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)
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
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.
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.
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
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 -
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.
"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.
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
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.
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 dark blue links
- Dark green shadowed square inline
purple shadowed square inline bullets
- Tab-like section header
- Purple slightly larger text (on a
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
The colours on this page simply don't
work, independently or together. The side gradient has the colour of an
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.
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.