10 July 2008

Our website design

So why is user:number 1's website designed like it is and not like all the others?

After looking around, our website is very different to other usability companies. Typically, a usability company will have a standard 2 column layout: header at the top with logo at top left, company name/aim/niche at top right, a narrow navigation column on the left and a wide area of text content to the middle and right side. Sometimes, there are nice pictures, but quite often there are none.

A quick bit of user testing showed one thing to me. Most people are not in the slightest bit interested in usability companies. We could be talking a different language for all they care and this includes people who hire us. I was surprised by the complete absence of interest. Of course, folks are very interested when we do our work well and a product works without them having to think too much, but other than that, we are on to a loser.

This was shown by the lack of reading of the main text content. This is quite disturbing really because it shows that potential customers probably won't read or absorb much of the main page. Yes, they will if it is a standard test and they are given a specific task to find a particular piece of information, but that's flawed. Users would have to be given the task of "look through 10 usability company websites and then 10 more. Then remember what the ninth one said." I bet that the primacy and recency effects come into play and users only remember the first or most recent sites they visited.

So in the best tradition of performance based HCI, I've reduced the cognitive demands of the site by reducing the amount of information on the page. This means a distinct lack of text and bullet points with links to more detailed pages should anyone want to know more. My experience with e-learning for postgraduate medical students also helps here because they, like business people, are busy too and don't have the time to wade through piles of information. Instead, they need the information they want presented as concisely as possible.

This means that there is not much to actually read on each page but that's okay. Links to more information are present.

But the websites were also boring. Unless I am fascinated by a subject, I don't like being faced with pages of text. Perhaps we in usability companies assume that everyone else has the same fascination as us, but they don't and it's a fact.

So the design also attempts (not sure how successfully though!) to reduce page boredom by using lots of white space around the edge to draw the eye into the centre. On the left hand side is a nice picture which hopefully conveys some of the text's meaning. The navigation bar is on the top with indicators of the current page / section and little else. On the right of the picture, occupying 35% of space, is the main text which as I have said is brief and can be assimilated quickly. Underneath is list of link to the left and the logo to the right.

In this, I was inspired by some wonderful flash-based sites by a graphic artist. In terms of usability, they are not so good but they looked wonderful. What I wanted to do was to have a site that looked pleasing and relaxing upon being visited, but one that also communicated information very effectively and was still usable and accessible.

Conventional practice always puts the logo at the top left hand side where most people (those whose written language read from left to right) set their gaze according to eye-tracking studies. To me, a logo is much like an advert and can easily be dismissed automatically without being absorbed. Instead, I have put the name and type of company there. The logo being bottom right is hopefully where the eye falls towards the end of its initial journey. I'm hoping that the primacy and recency effect encourages strong remembering of the company because in both places, the company's name are there.

All fonts are relatively sized and all images have alternative text. Being so concise, users with screen readers should also be able to whip through a page more quickly too.

I guess time and more testing will show if this idea works, but for the time being it seems to be doing okay.
Post a Comment