|
|
Home | Audio | DIY | Guitar | iPods | Music | Brain/Problem Solving | Links| Site Map
This work is licensed under a Creative Commons License.
Case Study: Foruse.com redesign
www.foruse.com is the web site of Constantine & Lockwood.
Have a look at their home page to learn more about them.
This case study incorporates a brief critical review of the home page, plus a redesign.
Screenshot (Home page, 75% scale)
Summary critique:
Content
This home page has problems in content and design. It has a lack of focus, is hard to read, and gives an impression of low quality.
Firstly, the content appears as a big chunk of words, which it is quite hard to decipher. The content has no focus. You expect a home page to tell you what a site is for, which gives you an anchor for all further browsing. This home page fails to tell you what the site is about, so you're left still not knowing "Where am I?" or "What can I do here?"
It's strange that you've typed in www.foruse.com to get here, but you arrive at a site that seems totally unrelated. It looks more like a small law firm than usability consultants.
The main information on the home page is advertising an event that (at the time of writing) happened nearly 6 months ago. This makes me wonder whether Constantine & Lockwood are still in business! "Register now before it's too late!" the link calls out... Hmm.
Design
The colour scheme is very bad. The dominant colours are browns, which is stuffy and old-fashioned, and blue, which is a great colour but which simply doesn't go with brown.
The overall brand impression is that this is a cheap and shabby site - which means cheap and shabby company. I know that this company commands some respect in the usability, so I'd say this site is misrepresenting them.
Detailed breakdown:
Content
Firstly, where am I? I've typed or clicked on "www.foruse.com", and it seems like I've arrived somewhere else. The site should feature its URL. What is the difference between "foruse.com" and "Constantine & Lockwood"? It would appear that foruse is just a snappy domain name, but the company should strengthen it by making it more of a brand in its own right (like UseIt.com for Jacob Nielsen, or AskTog for Bruce Tognazzini).
There's no focus to the page. There's no message that stands out clearly. Someone scanning a home page needs to be shown where to look. That means knowing what's most important (understanding the user's goals), stating it simply (front-loaded), and using design techniques to make that information stand out.
This is probably the most noticeable element, but it doesn't tell me exactly what C&L are offering me. This is almost serving a strapline, but it lacks information. If only that one thing stood out from the page, you are none the wiser: "You do what? You teach what? You help who do what? Huh??" And what does it mean to "do usability"?
How about, "We deliver usability - guaranteed"?
The first paragraph should introduce the site, but it doesn't. The content that heads this page should be a call-out - a separate box that visually stands off the content of the page, like a side-note or an advert.
The best element of content sits in the middle of the page: the link "Learn what we can do for you". It's good because it's goal-oriented, clear and simple. I think that point should be answered on the home page: I should be aware (to some extent) what you can do for me before I click another link.
Content style
"Click for details" is a bad hyperlink, because the link target doesn't describe what you'll get if you click it. A much more effective link description would be "Full details on ForUse2003".
You shouldn't begin a page with a cryptic message or question. Writing for the web depends on being simple, clear and concise, giving your user the most relevant information straightaway. In this case, the relevant information the user needs is in answer to the million-dollar questions: "What is this site?" and "What can I do here?"
The comment on "This site is best viewed in IE5/NN6+... Please give us feedback" is redundant. It adds to the clutter without adding to the experience. You'd expect the site to work in recent browsers, and if you have a recent browser you don't need to be told. And if you don't have a recent browser, you don't need to be told either.. There is no reason to show this type of comment.
Layout
The layout of this page is quite conventional, and hence works well.
The elements at the top of the page, which serve as the site ID and site strap line, should be clearly distinguished as top-level elements. Apart from design style, they could also be clearly laid out as distinct from the rest of the site. Because they use bold, black text, like the rest of the page, they need to be more clearly distinguished. The feature that does this is a solid horizontal rule, but this is not effective because it is the same hue as the page's background gradient.
The side navigation sits too close to the left hand side; also the site id logotype and the strap line "the usage-centered design resource" both sit too high. The result is that they retreat from view.
Surface design
There is too much bold on the page to let any part of it stand out. Emboldening is an effective tool for making a word or phrase stand out from other text. Here, it is used to emphasise too many words and phrases, and the overall effect is that nothing stands out in particular. The eye skips around, unable to find where to start reading.
The top paragraph is all in bold, which doesn't work. If it's going to stand out from the rest of the page, or appear superior, it needs to be bigger, not bolder. Lots of bold text just becomes more difficult to read.
Too many different styles are used to emphasise text on the page:
- Bold
- Bold dark blue links
- Dark green shadowed square inline bullets
- Dark purple shadowed square inline bullets
- Tab-like section header
- Purple slightly larger text (on a yellow-based background!!?)
The bullets are over-used. They might work if used once or twice, and would also be much more effective if the list were vertically-arranged. Vertical lists are scannable; horizontal lists are barely more scannable than normal texts. The bullets serve as big full-stops/periods.
The logo forUSE2003 is incredibly unclear. This is because the fonts used have far too little whitespace.
The side navigation links recede quite a lot, considering their size. One reason for this is that they use white-on-colour, which is generally weaker than black-on-light text.
Colour
The colours on this page simply don't work, independently or together. The side gradient has the colour of an old tobacco stain. Brown, grey and green horizontal bars all clash.
The background colour is the websafe #ffffcc, which has traditionally been one of the only alternatives to white. It can give a site a parchment effect, maybe to suggest old-fashionedness and distinction. That's one of the reasons why, to me, this looks like a law firm's site. In this context, the colour is inappopriate. White would be much cleaner, brighter and more modern, and would be much easier to render other content against.
The first diagram shows the colours used on the side navigation links. I've inverted each colour to its exact opposite, and adjusted the saturation and lightness a little.
You can see that the colours are almost exactly opposite hues, which means they're diametrically opposite on the colour wheel. This is to be avoided, as exact opposites almost always clash. In the second diagram, you see that none of the colours goes natually with its opposite.
Original screenshot (75% scale)
Redesign
Note: this is not a completed design, just a short exercise to demonstrate alternative methods that fix the problems identified above.
In redesigns, I aim to reorganise and reformat the original site content, not to add content or imagery that was not originally there.
Summary of changes:
- Cleaner, consistent colour scheme, based on blue/grey with red to highlight.
- foruse.com is emphasised as the hero, a sister brand to the company.
- Search function is included in the home page, where it is more likely to be used.
- Side navigation is made much clearer and simpler by reformatting, and pruning less relevant links.
- Newsletter content is encapsulated in its own callout (separate to body content), and has its own subscribe function.
- The site states its purpose boldly up-front, which makes it seem accessible, confident and trustworthy.
- The amount of text used is dramatically reduced, aiding clarity and scannability.
- Hyperlinks are grouped together vertically, which is easier to scan and decode.
- All content for the foruse event is grouped together, and placed in its own container, to unify it, and to show that it is 'extra' to the main page content.
Home | Audio | DIY | Guitar | iPods | Music | Links | Brain and Problem Solving | Site Map | Contact
