Chapter 6. Street signs and Breadcrumbs (Part II)

Useful conventions for navigation are:

1. The logo appears on the top-left of every page, and redirects to ‘Home’.
2. Every page has a prominently-displayed name which frames its related content.
3. Main links appear at the top, local links appear on the left margin.
4. The top navigation persists throughout the site (exception: pages with forms).
5. Utilities (e.g. FAQs, help, jobs) are split between the persistent navigation and the footer.
6. The current location is vividly highlighted on navigation bars of the page.
7. Breadcrumbs appear at the top, utilizing ‘>’ and boldface as follows: Home> Level1> ThisPage.
8. A search box exists on every page.

Chapter 6. Street signs and Breadcrumbs (Part I)

Using a website is like in-store shopping:

1. Users look for something specific.
2. They browse, or ask for help (i.e. ‘search’ for a keyword).
3. If browsing, users look at signage for clues.
4. They leave if frustrated.

But websites are also unlike real-world stores:

1. Hard to tell how big a website is, and thus when to stop looking for something.
2. Must memorize important locations conceptually (or via bookmarks). Cannot retrace physical steps, like in the real-world.

Hence intuitive page navigation is a must-have, for it not only helps users find stuff, but also reveals site content and leaves a good impression.

Chapter 5. Omit needless words

A text-heavy page looks daunting, since the user subconsciously assumes that reading everything is compulsory. Just like a machine has no unnecessary parts, a website or app should have no unnecessary text. A heuristic is: get rid of half the words on each page, then get rid of half of what’s left.

The following is especially prone to excess:

1. Happy talk: text containing banal platitudes suggesting how great the app is. It’s just a whole lot of ‘blah blah blah…’.
2. Instructions: users read these only after several failed attempts. Strive to make the page self-explanatory, so minimum instructions are needed.

Chapter 4. Animal, Vegetable, or Mineral?

Sites and apps strive to minimize clicks around a central task (e.g. 3 clicks to the ‘book it’ button on Airbnb). One can do better. The number of clicks actually don’t matter if no thought goes behind each click, and no uncertainty exists regarding where each click will lead. A rule could be: three mindless, unambiguous clicks equal one thoughtful click.

Therefore, when presenting a difficult choice to the user, divide it into simple clicks. In the rare instance where the choice can’t be elegantly broken down, provide accompanying guidance which is:

1. Brief.
2. Visually noticeable.
3. Available precisely when needed.

Further reading: Forms that Work: Designing Web Forms for Usability (by Caroline Jarrett).

Chapter 3. Billboard Design 101

As users whiz past, increase usablilty through:

1. Strong consideration to following a convention (if one exists) at every step.
2. Allowing slight inconsistency if it creates clarity.
3. Notice how, in newspapers, some things are prominent (the scoop), some are grouped (sections), and some are nested (paragraphs spanned by a heading). Use similar visual hierarchies.
4. Clearly define areas, so users can quickly find what they want.
5. Make it easy to tell what’s a link or a button.
6. Keep the noise down, making sure everything isn’t shouting for attention.
7. Write text optimized for scanning. Make effective use of headings, bullets, paragraphing, and highlighting.

Further readings: Letting go of the words (by Janice Redish), The design of everyday things (Donald Norman).

Chapter 2. How we really use the Web

Designers should design a page as if they’re designing a billboard, because:

1. Users don’t read pages, they scan them. Why? Because they’re usually in a hurry and interested in just a fraction of the content.
2. Instead of weighing all choices, users mostly plunge into the first reasonable option. Why? Because there’s no guaranteed method to guess correctly. Moreover, guessing incorrectly is undo-able.
3. Users use technology without understanding how it works. Why? Because they don’t care enough to dive deep, and stick to whatever bit works.

Users easily get mixed up since the aforementioned behavior tends to be, predictably, error-prone.

Chapter 1. Don’t make me think!

Don’t create questions in the user’s head. Questions like: is that a clickable link, or just text? Why is the ‘Jobs’ button called ‘Jobs-o-Rama’? Is that an ad, or part of the site? Where do I start?

Such split-second mental chatter creates ‘cognitive workload’, which can add up and encumber the experience. Hence, ensure using the website requires no thinking whatsoever – it is self-evident.

But occasionally, a website does merit thinking (e.g. it’s novel). In that case, strive to make it self-explanatory via tiny variations of color, text or appearance. Ensure everything can be figured out at a glance.

Introduction: Read me first

Read the book when you can. This blog is not an alternative to the book. With that said, onto the summary. The book’s first section contains preliminary clarifications. Specifically:

1. Steve’s a ‘usability consultant’, helping clients design intuitive websites and apps.
2. There’s no secret sauce. Steve uses ‘common sense’ principles, mostly obvious in hindsight.
3. The book is short enough to be read on a plane ride. It focuses on a few key principles, each of which go a long way.
4. NEW, in this edition: previous editions dealt solely with the web, there’s a whole new section on mobile now (plus examples).