This is the second post of my “nice touches” series of natty little pieces of web application design that really impressed me.

Colour Lovers Pattern Editor

A cool article by Ann at SEO Smarty ended with a couple of links to sweet tools. One of which is the Colour Lovers Pattern Tool.

This tool is easy to use and built to a very high standard, as I’ve come to expect from Colour Lovers. It uses loads of AJAX and the loading indicator caught my eye - it is a beating heart!

Annoyingly, the site is too quick for me to get a screen grab on my ancient ibook, so you will have to see it for yourselves.

Many other sites that use AJAX (including this one) have a spinning indicator like the Firefox page loading icon, or an oscillating bar which is quite techie and clinical. The use of a beating heart is genius for several reasons:

• It fits right in with the Colour Lovers branding - they already use hearts for their favicon.
• Heartbeats are often found in computer hardware, telling you that a headless server is working or a router is configured OK.
• Even if you’re not a techie, you know that the beating heart means that something is “alive” and working.
• It made me smile during a busy day.

So there we have, the tiniest of design touches but pure gold!

This is the first in a series of (hopefully many) entries detailing design decisions that have really impressed me. It is a complement to the annoyances series, and it will be interesting to see whether I find more nice touches or more annoyances.

Knowing my personality, there’ll probably be more annoyances.

Facebook Status Entry

There are loads of well thought out user interface items, but their status update window is a great example of a change that is not intrusive.

Many months ago, Facebook switched from forcing everyone to use “is” at the start of their status texts, to allowing anything. This was a welcome change for many people, but many others were used to just clicking on the edit link and typing.

There was a danger that people would forget that “is” was no longer mandatory and their statuses would make little sense or appear neanderthal, like:
Andy disappointed in United’s poor performance

The solution was pretty clever and one that I think many designers would not have thought of - if the previous status began with “is”, then all words except “is” would be automatically selected, otherwise the entire status would be selected.

This is great, for many reasons:

1. It gives people time to adjust to the change.
2. It visually emphasises the new functionality.
3. The editing process is just the same as before - click and type.

The whole Facebook site is awash with great usability features like this, although some features seem deliberately hidden (preventing application spam, for instance) so I’m sure they will be appearing in this series later.

Welcome to the first of a new series covering the little annoying features that crop up in web pages and applications. No doubt this will be a long running series, but it will be complemented by a series of “nice touch” entries covering those moments when I’ve been pleasantly surprised.

With this inaugural entry, I’m striking fearlessly at the heart of The Man...

Google Reader

Google Reader is a great tool. It’s my RSS reader of choice, but recently they added a feature that I instantly hated.

I subscribe to a great many feeds and typically get about 700 new items every day. A great many of these (probably 70%) are duplicates obviously irrelevant to me so I skip over them, get to the bottom of the unread items and hit “Mark all as read”.

There are loads of other ways to use the tool but this is the one that works for me. It saves me a ton of time and saves me from information overload. Scan, click, scan, click, read, comment, scan, click, read, done!

Then about a fortnight ago, this dialog popped up for the first time. I went to mark all as read and switch tabs but the dialog got in the way. I clicked yes and then went to the settings to try and turn it off - no joy there.

The next couple of times I used Google Reader, it didn’t appear. “Great,” I thought “it must have been an experimental feature that’s been ditched”.

Then it was back again. Then it was gone.

From my experiments, it seems that the warning is shown when you mark more than 50 items as read. Why 50? Who knows.

I cannot find any setting that will change the threshold, or turn off the warning permanently.

Inconsistency Is The Usability Killer

It is the inconsistency that makes the dialog annoying. I have no idea how many unread items I’ll be marking when I click the button. If there were few enough to count, the dialog would not appear!

It's hard to overestimate just how much consistency helps people to learn and use a wide variety of programs - Joel Spolsky

In web pages, consistency is key for your readers, just as it is vital in application design.

The use of a javascript alert is annoying too - it takes over the browser and prevents me from switching tabs.

A Better Solution?

I can see why the engineers have added this feature, but it’s just not right. A couple of changes could make it work for me:

1. Switch from a javascript alert to a GWT dialog box, then I can still use my other tabs.
2. Allow me to set the threshold. Fifty items is too few for me, it’s probably way too many for others. Let me choose.

I bet you have loads of suggestions for this series on annoyances, leave a comment and I might agree with you.

I read this post on the Google Blog today and my first thought was “Wow, cool”, my second thought was “I wonder if you could create a poll with that?”. It turns out that there are a whole bunch of problems displaying the results. Here is a quick proof of concept...

Note: for any readers subscribed to the blog via RSS, you need to view originating page, due to embedded IFRAMEs.

Go ahead, try it. Choose an option, you know you want to!

And here are the results so far

Pretty cool eh?

Unfortunately, your results will not immediately update the chart because it’s just published as an image. However, there is a load of potential there.

So, How Is It Done?

Well, the first thing you need is a google account, then go to Google Spreadsheets and create a new document. Make the first few rows be the same as the number of options in your poll.

The next thing we need is to provide formulae for column B. We need to count the number of occurrences of each option text that occurs below our options. The formula for this is =COUNTIF(C2:C100000, “I like it a lot”) (the option text in this case is “I like it a lot”, change it to match your option).

Repeat this formula for each option and then create a graph of the results.

The next thing to do is to share the sheet as form. Click the share tab and choose the “Invite people to fill out a form” option. You’ll be asked to fill out a quite complex window, but fill in the question and choose either multiple choice or choose from a list. You’re smart, you’ll figure out the rest.

Finally, send the form to your own email address. It will let you test it out and add some data to your spreadsheet.

How Do I Embed It In My Blog?

There are two stages, first embed the poll, second embed the results.

Go back to your spreadsheet and click “Go to live form”. It will open a new window with the form, so you can copy the URL from your browser’s address bar.

Next add an IFRAME to the page that you want the poll to appear in. Try the following text:

<iframe src="YOUR LIVE URL"> <p>Please wait...<p> <iframe>

Next, we want to embed the results. If you’re doing this as a chart, it’s just an image. To get the URL of the image, click on the chart in your spreadsheet and then click the menu at the top left of the chart. Choose the “Publish chart...” option. A window will pop up with the HTML you need. Put that in your page too.

Finally, we must ensure that the chart is updated regularly, for this you need to publish the entire spreadsheet, so click the “Publish” tab and choose the option to automatically republish after changes.

Unfortunately, the chart won’t be updated after each time you add a poll entry because the picture is stored in your browser’s cache, but there is not much we can do about that.

Improvements

It is early days for this new feature and it’s already quite exciting but I would like to see a few new things as a result of this experiment:

• A better confirmation message - especially one that could show the chart
• Improved chart updates - the spreadsheets themselves are really good for collaborative working and the charts could do with some of the same
• More control over the chart rendering - you can see above that the legend in painfully small

Overall, it’s a very cool feature and I’m sure that forms providers like Wufoo are taking note and raising their game.

Web design is about more than typography, layout and aesthetics - it is about flow, interaction and increasingly about software design.

Coming from an object-oriented software background, I know that software diagrams can help get your thoughts in order and reveal under-designed or chaotic areas of your projects.

I don't want to advocate formalising the design process or get into arguments over agile processes, just to show you some tools that can be better than the back of an envelope.

Bubbl.us

This is probably the tool I use most often. It's a mind-mapping tool but it's free form nature means that it can be used to represent many things (at a fairly high-level).

Bubbl.us has a lot to offer. There are no onerous registration requirements and it is really intuitive. Both of which mean you can start working straight away, whilst your ideas are fresh in your mind.

It will happily save documents for registered users, export as images, XML or HTML and it has great collaboration options too.

It can be a bit limiting if you want to move beyond simple mind-map diagrams but it's a great tool within those limits.

SQL Designer

OndÅ™ej Žára's excellent flash tool provides basic entity relationship diagramming, allowing you to model database tables, indexes and relations.

It isn't a patch on professional modelling tools (like Oracle Designer) but can really save you a lot of time. It can generate SQL/DDL for an impressive array of database platforms and can export and import XML representations of your diagrams.

The ability to maintain an agnostic copy of my database designs, then generate code for MySql and Oracle with a few mouse clicks really makes me love this free tool.

GModeler

GSkinner's GModeler application deserves a mention because it actually tries to implement proper UML class diagrams.

I must confess to not using this tool much, I find desktop applications to be far superior for modelling in the kind of detail required by UML.

I'm probably not the target audience though - one of the biggest draws for GModeler is its ability to generate Flash ActionScript code (including ActionScript 2.0).

It's good to see web developers embracing software engineering tools like UML though.

Conclusion

A picture is worth a thousand words and diagrams are incredibly useful for communicating what is happenning behind your web pages. Whether you're producing wire-frames for page transitions, object diagrams for Javascript or ERDs of database designs, give these tools a go.

Are there any other online diagramming tools you'd suggest to web designers? Let me know in a comment.

Blogs and Content Management Systems (CMS) usually allow readers to leave comments on articles. Most bloggers and webmasters are concerned about comment spam, follow/nofollow links and much has been written about the technical aspects of user comments - this article will look at the visual and functional design of comment creation and display.

Comments are creating using forms and much has been written recently about styling forms using CSS (like these excellent articles), but there are a number of variations when dealing specifically with user comments.

Nested Or Linear?

Nested comments allow users to reply to other comments (as used to good effect by community sites like Slashdot, Digg and Reddit) whilst typically blogs created with Wordpress, Movable Type or Blogger only allow users to reply to the original post.

When comments are linear, commenters will often try to get around limitations by adding "Re:" to their comment titles or using block quotations of the original comment in their text.

The limitations of linear comments are obvious, when a large number of comments are associated with an article, it is difficult for discussion to flow between commenters and comments are often posted in a fire-and-forget manner with few commenters checking back to look for replies.

In contrast when nested comments are used, the comments can often take on more importance than the original post. This is particularly evident on Slashdot where posts are intended to kick-start discussion, not be authoritative.

Voting

Where nested comments generate a great deal of discussion, they are usually associated with a voting system so that abusive, foolish or repetitive comments get buried when votes against them reach a certain threshold. Additionally, commenters with a large number of positive votes gain status amongst the site's readers, sometimes making the activity of gaining points an addictive game.

Editing & Deleting

Very few sites allow comments to be edited or deleted by the original commenter (b3ta is one that does) because comments can be edited long after their creation to completely change their meaning, making any replies look stupid.

Similarly, deleting a nested comment must delete all replies, wasting the efforts of those who bothered to respond. On b3ta, deleted threads are met with howls of protest.

Subscribing To Updates

Blogs sometimes allow users to request notification when a new comment is posted. With nested comments, this may be restricted to replies to that user's comment but with linear comments, users are notified of any new comment against the article.

These notifications are almost always provided by email, meaning that fast moving threads can fill up the user's inbox making them less likely to subscribe next time they comment (if they ever do so again).

A more appropriate technology is RSS, although few blogs use it (Ajaxian is one). RSS gives the user a choice of subscribing to the whole blog, an article or replies to a specific comment.

Comment Forms

Some blogs (such as Blogger) take the user to a separate page to add their comment. Others (like Particle Tree) display the form at the bottom of the list of existing comments.

Some blogs use AJAX or DHTML technologies to dynamically render the comment form when requested without loading a new page. This has the advantage that the commenter can read the original article and comments whilst adding his own contribution but the form does not take up screen real estate for the majority of readers who do not comment.

What Data To Capture?

Where comments can be added anonymously, the comment forms usually ask for:

• A username
• An email address
• Optionally, a homepage
• The comment text

You can be sure that the commenter's IP address is logged as well.

Most blogs will allow the comment text to contain a subset of HTML, so text can be bold, italic, preformatted and contain links. The text is checked at the server to ensure that the rules have been followed, to ensure that no dangerous Javascript has been added, for example.

Another potentially destructive form of comment vandalism is page-widening. This is the act of posting a comment with an unbroken string of text that is wider than will comfortably fit in the area reserved for comment display. This can break the layout unless specifically catered for.

It can be unintentional - posting a long URL or line of code can cause it to happen. These cases dictate that it is undesirable to simply truncate long words, instead the CSS style overflow: auto should be used to cause a horizontal scrollbar to be displayed when words cannot be wrapped.

Textareas

Most comment forms use HTML textarea widgets for entering the comment text. Very few enhance these widgets to provide WYSIWYG editors using technologies like TinyMCE or FCKeditor. Providing such editors would help less web-savvy users create better posts and would be less off-putting than a textual note below the widget like this:

Some HTML allowed:<a> <em> <strong> <cite> <code> <ul> <ol> <li>

The size of the textarea widget also provides an important visual clue for commenters as to how large their comment should be. Although the textarea might allow for 50000 characters, if it only shows 4 rows of text at a time commenters are unlikely to write lengthy comments.

Some comment forms have low limits on the number of characters allowed and will show a dynamically updated count of the number remaining.Ebay feedback is an example where this works well. It is unnecessary where the character limit is high and the textarea size is small.

Displaying Comments

The design aesthetics of displayed comments are too often overlooked by web designers due to the disconnect between web design and web development.

Comments must display a significant amount of information in usually a small space. Typically, this information might be:

• The name of the poster
• The status of the poster (member, moderator, points, number of posts etc.)
• The poster's homepage
• The poster's avatar
• The date the comment was made
• The title of the comment
• The text of the comment

We can think of the title and text of the comment as being the content and all other items as being the comment’s metadata.

There are two approaches to displaying the meta data, it can be shown with the comment (above, below or on the left hand side) or abstracted to another page. In the latter case, the commenter must typically be a member of the site and would have a page displaying his/her user profile.

Use Of Colour

Some blogs use colour to distinguish comments by the article author from the comments of random web-surfers. This is a useful approach as the reader's eye is drawn to the difference, making the author's comments stand out as more authoritative, like this example.

Distinguishing between successive comments can also be achieved using colour by alternating between subtly different shades for the background, or by placing a contrasting line between them.

This is an effective approach for linear comments, but breaks down when applied to nested comments. In the case of nested comments, a strong design for the comment title is more effective at emphasising the start of a new comment, as shown to good effect at Slashdot.

Whitespace

Good webdesign makes much use of whitespace to separate elements on the page. Comments should be separated from the article by effective use of whitespace and box borders.

Separating comments using lots of whitespace can cause pages to become excessively long when an article attracts hundreds or thousands of comments. Some blogs employ pagination to show comments in blocks of 10, 20 or 100. This can often mean that greater prominence is given to earlier comments as they are shown first - users are morely likely to scroll down to read more comments than they are to click to read another page full of them.

Conclusion

Good web design should give careful consideration to readers’ comments. Reader interaction should be encouraged and rewarded, and a well designed comment form coupled with a layout that makes your readers’ comments look good will pay dividends.

Blogging tools have an array of plug-ins and options for styling comments so use them and the design principles of a blog can be consistent with user contributions.

Most of all, the design of a comment system should reflect the aims of the site owners and add value for readers.

Every web site needs a number of supporting pages and facilities to look and feel professionally built.This article lists the common items and tasks that all web designers should include with any site design and explains their purpose. You'll no doubt find that there are many more tasks than you initially envisaged, which can be a bit daunting, but it really helps to have a list of these things to hand and you’ll probably find that you’ll be able to tick them off quite quickly.

I’ve grouped the items into categories (such as Navigation, Interaction etc.) but note that these groupings do not imply any order of importance.

Navigation

The Navigation group covers facilities that help visitors move around your site.

Breadcrumbs

One of the first user interface paradigms to emerge on the web, breadcrumbs show a list of parent pages to the current page, for example:

Large, complex sites can use breadcrumbs to great effect so that users who drill down to content do not et lost in the maze of links.

The Yahoo! Developer Network has more information on breadcrumbs.

Search

Every site of more than a few pages can benefit from a search facility. Many pages will get few visitors and are unlikely to be linked directly on the homepage, but when they contain vital, specific information (such as a privacy policy) people do need to be able to find them easily.

If your site does not include a search facility, many people will give up on their search or use google to try and find the information they require - meaning that they could get distracted and end up at another site.

Adding your search facility to your 404 page also gives visitors another chance to find the page they want.

Pagination

Web designers often cry out "The web is not print!" in frustration at being told to display large amounts of text on a single topic. They are right, the web is not suited to dense swathes of difficult to read text as computer monitors do not display it as clearly the printed page and many visitors will not wade through hundreds of words to glean the information they came for.

One solution to this problem is to split large pages into several and encourage navigation in a linear fashion using links to the next and previous pages at the bottom of your text. Always provide a link to the beginning of your article for those who arrive on one of the middle pages via a search engine.

Interaction

The web would be pointless without interaction, it wouldn’t even be as good as television. This section covers the basics required to allow your visitors to interact with your site.

Contact Page

The most common link on the site is to the contact page. We are constantly exhorting visitors to let us know if they like, or dislike, any aspect of the site, to tell us when things go wrong or ask our advice. As a side effect, some visitors even contact us in order to hire us!

The contact page is the web equivalent of publishing your phone number, it still requires some effort to use, but not much.

Mailing List

A mailing list is a great way of reminding casual visitors of your existence. An easy means of subscribing and unsubscribing should be easy to find, both on your site and in the emails themselves.

Comments & Forums

An excellent way of getting return visits to your site is to allow comments against articles or provide a forum for your visitors. Few people can resist checking to see if a comment they left has ellicited any response.

Wherever posts are allowed, a moderation policy must be clearly stated and enforced. The policy should reflect the goals of the site owner but often giving visitors some flexibility can take your site into new and exciting areas. Without active moderation, your site will simply choke with spam and insults.

Legal

Most business websites will need to provide a couple of documents to satisfy legal requirements. This page is merely intended as a guide and is no substitute for professional legal advice. The nature of your business might indicate that more information should be provided, as may local laws where you do business.

Copyright

Many web publishers have fallen foul of copyright issues so it’s wise to state your policy on copyright clearly. One particular issue that many neglect is that the software that runs the site, the icons and photographs and even the layout may be copyright another entity so it is important that you distinguish what is your original content.

A sample copyright page (applicable to the UK) is available from Business Link.

Privacy Policy

Any web site that collects personal information (such as email addresses) should provide a privacy policy that is linked from any form collecting such data. It gives visitors a bit more confidence that you are not just harvesting emails for sale to third parties.

Business Link also provide a sample privacy policy here.

Other Legal Issues

In addition to the two documents listed above, many corporate web sites also provide disclaimers and terms and conditions - often placing onerous and unenforceable requirements on the visitor. Demanding that nobody link to your site without written permission is laughable and such practices are often held up to ridicule.

We all create web sites to attract visitors and create a community, not to punish those who don’t do exactly as we say. I would argue that these documents do more harm than good.

Web Stuff

A number of files that any professional site contain are what I call “web stuff”. These are files created for search engines or for your web server - the glue that holds your site together.

Site Map

Google loves site maps and we all want to get a high ranking don’t we? Submitting your site to the search behemoth is made muchmore efficient if you can provide an XML file listing all the pages of your site.

Creating a HTML version of your site map is also useful for humans too - think of it as a table of contents for your web site.

Error Pages

Of course your site won’t have any broken links or errors in your scripts because you will be spending a great deal of time testing and debugging, won’t you? Errors still happen - maybe somebody copies only one line of a long URL into their email, or tries to link to a password protected resource. In such cases, having a professional looking error page with details of how to get around the problem is much more friendly than proclaiming “403 Forbidden” in black on white text.

You will also need to configure your web server to display these pages when an error occurs (with Apache this usually takes the form of a .htaccess file or a change to /etc/httpd.conf).

Of course you don’t need to serve a page for every possible HTTP error, here are the ones that I commonly provide:

• 401 - Unauthorised
• 403 - Forbidden
• 404 - Not Found
• 408 - Request Time-Out
• 500 - Server Error
• 503 - Out of Resources

.htaccess and .htpasswd Files

As I mentioned above, the Apache web server is often configured using files called .htaccess. These files apply configuration changes to all files served from the directory in which they are placed.

It is possible to prevent serving files with a specified extension, password protect certain scripts or even re-write URLs using these handy little files. Configuring them can be somewhat daunting at first but CooleTips have an excellent tool to help you.

It is possible to password protect certain resources using a combination of .htaccess and .htpasswd files with Apache. You probably don’t want to use this for user logins but I often have a handful of administrative and debugging tools on my sites that I do not want to get into the wrong hands and using this kind of protection is ideal for them.

Cascading Style Sheets & Javascript

Modern web design separates presentation from content using Cascading Style Sheets (CSS) to define the prentation rules. Usually one or more files contain the CSS rules - and often many files are used for different media, such as computer monitors, mobile phones and paper printouts.

Interactive web sites usually rely on Javascript to implement much of the client-side functionality - such as form validation. Javascript functions are often separated into one or more files for maintainability.

Keeping your CSS and Javascript separate from the HTML code will reduce page loading times by using the browser’s cache. Loading times can be reduced further by using compression on the files before uploading them to your production web server.

Conclusion

If you’ve made it this far through the article, you'll realise that there is plenty to think about in addition to the actual content but don’t worry - content is still the key to a successfull site.

Many sites have started out with a simple layout and minimal features but been successful because they provide a high quality service or have useful content - Google is a great example.

Are there any other items that you consider essential to a modern website? Then leave a comment below:

Since it was first announced, there's been a load of blogging excitement about the X-UA-Compatible meta tag - so I'll add my 2 cents.

It seems that web developers/designers are splitting into two camps - for and against. Like most things in life, it's not that simple.

Background

In case you've not been following the saga, here is a summary:

1. Internet Explorer does not render HTML correctly
2. IE 7 tried, but failed to render HTML correctly - and caused old websites to render differently to IE 6.
3. Two types of people complained:
   • Web designers who want to reach everybody
   • Intranet designers who can force their users to use only IE, accept ActiveX controls and live in the early nineties
4. The latter type have the most money and make the most noise. Microsoft feel sheepish.
5. When announcing IE 8, Microsoft didn't want the same problems again - they must handle 21st century HTML, but not annoy the people who actually pay for their web products.
6. The IE team announce a new meta tag - X-UA-Compatible. Couple it with a value of "IE8" and the browser will use all its new features to render your web page as best it can.

What Will It Mean

Adding a new tag is not a big deal for modern CMS's - just change your templates and republish. Those with static sites requiring vi and FTP and so on can ignore the tag - this is good.

Look forward to IE 9, though and a problem occurs - do I change my X-UA-Compatible tag value to "IE9"? Does that mean that users with IE8 will try to render it as legacy IE7?

Will there be another tag with a different name for IE9?

I hope not. Otherwise, we go back to the days of browser detection - not good for anybody.

My Opinion

IE is rubbish - it's good that Microsoft are working to fix it. This tag is not the ideal way, though, as it precludes graceful degradation.

I really hope that other browsers don't follow suit - I'd hate to see X-UA-Compatible="Opera10" or X-UA-Compatible="Firefox 3.01".

The reality is probably that some of my pages will contain this meta tag - it will be another weapon in my arsenal. It doesn't solve the real problem, though.