Style of Elements for Web Usability- Don’t Make Me Think

This post is a book review, rather a book summary. Though this may be a blog entry for all of you, these are notes for me that can be always handy for me.

Recently I demonstrated our product to Andrew Conru, CEO of Friendfinder. During the discussion he mentioned a book of Web Usability that impressed him a lot. So in my recent India trip I took the book, Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition by Steve Krug. Its not a recent book, 10 years old. 10 years is an enternity in Web world. During these ten years many websites became popular and many perished. However, the basic principles covered in the book still remained. Rather, many of the suggestions and observations are so much part of the most of websites and frameworks like Drupal etc that we do not even need to think about them. However, understanding those principle would always be important.

So what principles I am talking about?

As name suggests, per Steve, the first law of Usability is, “Don’t make me (user) think!”. A web page should be self-evident, self-explanatory. One should not need to think too much to understand what the page is all about, what does it do, who it can be used, why it should be used etc. The user’s mind should not be filled with questions like, “where should I start”, “Why did they call it that?”, “Can I click that?”, Is that navigation? Why did they put it there, those links look same, are they same? etc etc.  Steve gave examples of sites poorly designed where the web designers used non-standard navigation, innovative words for buttons, etc. which might be innovative but that unnecessarily requires users to think. One of  Steve’s  quotes, “On the internet, the competition is always just a click away, so if you frustrate users they’ll head somewhere else!!”

Now that we all are savvy web readers spending large amont of our time (and so the life) on web, we all can observe our own behariour and use the knowledge while designing sites. But the funny thing is we don’t do that. I realized when I felt committing the same mistakes when Steve pictorially displayed that how we design and expect the user to read the web page as, read! read and read just as a logic flow or essay. However, the users just look around, “inetersting, clickable and whenever they find reasobly matching what they want, they click, and do trial and error”.

Anyway, Steve listed few facts of the web reading that we all know but rarely apply in the web design:

1. We don’t read pages. We scan them.

2. We don’t make optimal choices. We sacrifice (when penalty for guessing, and making errors is not high. Moreover, guessing is fun)

3. We do not figure out how things wrk. We muddle through.

Further Steve gave some important tips for making site for scanning and not for reading:

  • Create a clear visual hierarchy on each page
  • Take advantage of conventions
  • Break pages up into clearly defined areas
  • Make it obvious what’s clickable
  • Minimize noise

In a chapter, Steve correlated Web site navigation experience with streets signs and finding item in store. Like following navigational signs or asking (search button). With a flow chart showing a flow with scenarios of customer existing happily or frustratedly. The examples mentioned about section based navitgation, search as well as o breadcrumps to anchor the user in the site are now almost standard practices.

There are important questions that comes to the minds of user visiting a web page: What is this? What do they have here? What Can I do here? why should I be here and not somewhere else? Hence, its important to focus on deliveing the message. The most important aspect is tagline: In Steve’s words: “Nothing beats a good tagline!” which he emphasis are important to deliver the message about what the site uniquely does without being abstract or coining new terms which the users don’t commonly understand. Good taglines for example are: Books You Thought You would never Find (Alibris), Worlds’ Largest archive of cheat codes and game tips(CompterUnderground), The Single Largest Source of facts on the net(reddesk). Bad taglines are vague or abstract. However, once brands are established or broadened, taglines won’t be needed (Amazon, ebay for example).

If I had read Steve’s book earlier, I would have saved few thousands by doing usability study on our own for my early stage startup. He gave good tips for cash-strapped startups who can do low-cost usability tests on their own : Gather 3-4 users (any one for that matter) in a small conference room equiped with camcorder. Observe whether the user “gets it” (what the site does etc) and how does he browse / does activity (key strokes).  The user should not feel that she is being tested, it should be told in advance so that the person would not be shy in committing mistakes as well as as would not be shy in giving blunt feedback including offensive onces (it sucks! 😦  )  You can get a script to go through from http://sensible.com/   The UI developers should watch the video so they would know whether the users are getting it and whether they are able to navigate. It would be worth repeating this excercise frequently with different set of users.

The book also emphasised on using CSS and following consistency and standards.

Most of these things are now commonly observed on popular consumer sites like Amazon and a lot can be observed from their navigation and consistencies.

Suggested Readings:

sensible.com

http://psychology.wichita.edu/surl

http://useit.com

http://www.usabilityviews.com

http://www.webword.com

Books:

Rocket Surgery Made Easy: Steve Krug(same author : new book)

Why We Buy: The Science of Shopping: Paco Underhill

Sources of Power: How People Make Decision: Gary Klein

The Practice of Creativity: George Prince

Homepage Usability : Jacob Nielsen (analysis of 113 home pages)

Defensive Design For The Web: 37 Signals (how to improve error messages, help, forms etc)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s