The Click #13
You’re skiing. It’s snowing hard. The mist is thick. Sound is muffled. You keep going, gingerly hoping for a tree or a marker, anything to give you your bearings. Then you think “Am I actually moving?”
A bad website can be just as disorientating.
A good website, on the other hand, makes it obvious where you are and where you are going - this is an essential part of the website designer’s skill.
FreshDirect is a good example. What do they do right?
1. Conventions are followed
The logo is top left. The background is white. The header stays the same from page to page (with the section highlighted in orange - giving you an immediate sense of location).
2. Clear, consistent titles
Clear titles make it obvious what page the user is on. In the example, both the section title ‘SEAFOOD’ and the subsection title ‘FISH FILLETS’ are prominently displayed.
One gripe. ‘Fish Fillets’ in the subsection navigation doesn’t look selected. Minor inconsistencies like this cause confusion.
3. Seven plus or minus two is the magic number
Human short term memory has a limited capacity: 7 items plus or minus 2. Navigation should have no more than nine items (five can be the limit, if the items are particularly abstract or diverse. (For more, check out this book).
Being a big site, FreshDirect has several main navigation bars (listing by product type, by dietary requirement, etc.), but each has 9 items or fewer.
The way the items are split isn’t perfect (you might argue that wine should be in the products navigation bar) - but it successfully breaks the information down into human sized chunks.
4. All information is not equal
FreshDirect has corporate information and a ‘Special note for AOL users’ at the bottom of the page. Unless your site is a company brochure, people come to the site to get a job done. Admin can be relegated to the footer.
5. It reads from left to right
Jobs that need to be done last (for instance, dealing with the shopping cart) are best placed on the right.
Conclusion
Making sites easily navigable takes hard work. If there’s one principle it’s ‘Don’t make me think’ (for a book on this). The less you make your visitors think, the more they can concentrate on what they came to do.
Who wants a pair of trainers from
Art Force One (without switching to English)?
I do!
The Click #12
When I studied computer science any design was referred to disdainfully as ‘pretty printing’. The geek part of my brain worries that website design is superficial and trivial.
I’ve always felt a bit stumped trying to explain why it matters.
Until I read this:
“All the cues that people rely on are muted online. There is no touch or smell or location. There is very little sound. So we obsess about subtle cues of typeface or colour or photography. It is hard to overestimate how much these things matter” from KnockKnock by Seth Godin.
I asked Noam - my creative partner - to talk me through the magic that goes into web design:
FreshDirect vs ASDA
Check this fabulous site for US online grocers FreshDirect. Green and yellow don’t usually go together, but they’ve picked just the right tones to make it work. Green communicates freshness, yellow
communicates warmth. The consistency of the photos and the
neatness of type show an attention to detail that rivals a
well-run deli.
By comparison Asda’s site looks downmarket. Too many ill-considered colours makes it hard for the eye to navigate. The buttons look home-made. The pictures are irregular and show packages - not food. In short, it seem like they don’t really care.
Interflora vs Boutique Florists
It feels like Interflora churn out bouquets. The main navigation is unnecessarily bulky. The flowers look plastic-y - and the heavy border round them doesn’t help. The title above the flowers has been saved at low resolution (see the degraded, mottled purple background to ‘Timeless Traditional Bouquets’) creating a tired, even wilted, feeling.
We couldn’t find an excellent ecommerce site for flowers. But
Bryony shows how attention to detail stimulates desire. They use a dreamy photo of a velvety pink flower. Carefully applying that colour to the rest of the site shows respect and love for their product. The white space make you calm and unrushed - the way you want to feel when considering romance.
(Another interesting example is Paul Thomas). He looks like the florist you’d use if the Queen was coming for tea.)
Geek at heart
I’ll always be slightly confounded about design. Luckily Noam knows what looks good - and how to make it. That’s important because, in business, as Seth Godin says, ‘it is hard to overestimate how much these things matter.’
I was at In The City Interactive yesterday. Best quotes:
‘It is obvious that the customer is increasingly in control… our big challenge is working out how to include readers in the dialogue.’ - hugely impressive Nigel Pocklington, Global Director of Online Publishing, FT.
‘Blogging hasn’t just moved the needle for us, it has moved the whole damned compass.’ - Jonathan Schwartz, CEO, Sun quoted by Alan Moore, CEO, SMLXL and author of Communities Dominate Brands.
‘Moral rights are always a problem.’ - Alexander Ross, Partner, Wiggin & Co (probably has a less sinister legal meaning than how the audience understood it)
Signs combine images, text and type. Just like websites, but less disposable.
An organisation wouldn’t communicate any of these verbal or visual messages today. The past (or Lambeth?) is a different country.
Evelina Mansions (map)
House on John Ruskin road (map)
Belgrave Hospital for Children - now flats (map)
Lambeth College - now derelict (map)
