Brand Central Station

My business partner and I are working to save a client from his current web site.  The site he has now looks okay.  It should.  It was designed by an award-winning, graphic designer who knows a lot about designing attractive brochures, annual reports and the like. But she doesn’t know Jack about designing a web site.

Or should I say Jakob. 

Jakob Nielsen, that is.  For those of you who don’t recognize the name, Jakob Nielsen is the “guru” of web page usability as a concept in the design and management of web sites.  And while I’m not a big fan of the look of his web site on the subject, it does put his theories into practice in a clear and obvious way.  Which is, I suppose, the point of web usability in the first place.

You can boil Nielsen’s work on web page usability down into ten basic rules (you can find them on Nielsen’s site here).  Web designer Theresa Neil provides a listing and a series of very useful examples of these ten basic rules in practice:

1. Visibility of system status (FEEDBACK)

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.  (Examples include BaseCamp from 37 Signals, Picnik and Tick.)

2. Match between system and the real world (METAPHOR)

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. (Examples from iTunes and Mindomo.)

3. User control and freedom (NAVIGATION)

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Supports undo and redo and a clear way to navigate. (Examples from CollabFinder, Wufoo, Pages and Balsamiq.)

4. Consistency and standards (CONSISTENCY)

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions. (Examples from GMail and Microsoft Office.)

5. Error prevention (PREVENTION)

Even better than good error messages is a careful design, which prevents a problem from occurring in the first place. (Examples from Yammer, Wef form Design, Google Auto and Wikipedia.)

6. Recognition rather than recall (MEMORY)

Minimize the user’s memory load. Make objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate. (Examples include Quanta IDE and Keynote.)

7. Flexibility and efficiency of use (EFFICIENCY)

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. (Examples include Omni Focus and Numbers.)

8. Aesthetic and minimalist design (DESIGN)

Dialogues should not contain information, which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. Visual layout should respect the principles of contrast, repetition, alignment, and proximity. (Examples include Kontain and Harvest.)

9. Help users recognize, diagnose, and recover from errors (RECOVERY)

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution. (Examples include Digg, among others.)

10. Help and documentation (Help)

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large. (Examples include Picnik, GoodBarry, Zennos and BaseCamp.)

You can view her entire article on her blog.

Adobe’s Mark Asher also provides some basic rules to follow when designing a web site:

As you approach Website design, ask yourself the following questions:

1. Can my users get to their desired information in two clicks?
2. Are my visuals distracting or useful?
3. What technologies are appropriate and not overkill?
4. Do my users know where they are within the Website at all times?
5. Can users get back to the front/home page with one click?
6. Is my content accessible to disabled users?

This list is simple enough, but many Websites continue to violate these basic rules–and frustrate users in the process. Remember, your competitor’s Website is only one click away, so removing these barriers above will aid in keeping users (and their dollars) at your site.

Remember the key takeaway from all this advice: No matter how nice your site looks, if it’s hard to use, you’ll lose your visitors.  Design the look and feel with the clear intent to make it a simple, elegant and intuitive process to visit and transact business there.

We’ll save the content relevance lesson for another day …

Have a great weekend.