A few months ago I was looking for ways to improve the TurnKey web site. I spent a lot of time researching good web site design online by:
- studying the theory of web site design from such resources as "a list apart".
"reverse engineering" the design of existing successful web sites:
- Good.is online magazine / community
- The Wordpress blog
- A List Apart (they're the experts on web site design and usability)
I payed especially close attention to the social aspects of the web sites I was studying as I was interested in improving the social experience on the TurnKey web site as well.
I wanted to improve my understanding of good web design in general. Not just for my work on the TurnKey web site. By then we were discussing our ideas for the TurnKey Hub and it was clear it would come in handy for that as well.
Besides, the principles of good web design and good usability in general are tightly related. Thinking a lot about one is a good exercise for improving the other.
Bottom line, I refined what I've learned so far down to a simple design methodology:
Brainstorming: put into writing a list of ideas of items that should be presented to the user. Anything goes, in no particular order.
Attention map: translate the brainstorming list into an attention map by:
- Grouping related items: things that are really different parts of one design element
- Ordering the high-level elements by priority (1, 2, 3...)
- Translate the ordered elements into a drawing of blocks that divide the user's attention according to the priority we give the item.
You do that by taking into account that users don't read or analyze pages, they scan them very quickly (e.g., a few milliseconds). The amount of attention that elements on the page receive are effected by their size and location. English audiences scan a web page top to bottom, left to right, so a large item on the top left has a much higher chance of receiving attention than a small item on the bottom right.
Imagine that it takes energy for the eye to keep scanning and with each passing millisecond your visitor is more likely to stop reading, be distracted, make a decision, click a link, close the tab, etc.
Questions we can ask ourselves to determine the priority of an element:
- Is it informative? (e.g., blog post, related links)
- How useful is it for the user? (e.g., search box or navigation links)
- Is it a call to action? (e.g., sign up!)
- Does it improve the credibility of the site? make it easier to trust us? (e.g., well known brands and logos, testimonials, blog archive)
- Does it encourage community contribution? (e.g., list of top posters, recent comments box)
Regarding repetition, in some cases it can make sense to have an element (e.g., RSS subscribe logo) in multiple locations. Careful use of repetition can improve user engagement.
Functional implementation: translate the "attention map" design to a functional web site implementation. Pay minimal attention to form / styling considerations at this stage.
Styling: make the website's functional information architecture look visually appealing
This sums up my thought process, and it seems to work pretty well in practice too. For best results try not to work on all the steps at once. I find I'm much more effective when I minimize mental context switches and focus my full brain power on each step separately.
Have you designed user interfaces or web sites? What process have you used?