Book Summary: Designing the Obvious + Designing with Consitency

This is a great book, a light read that has powerful lessons in design. I love it that is not overwhelming for someone new to the topic. Thankfully, it does a good job of listing down what makes great applications, well, GREAT, in the first chapter.

So without further adieu, I will list them, verbatim, for you (with some of my comments), below:

Great Web-based software, in my experience, has some or all of the following qualities:

  1. It conforms to the way users interact with the Web, but focuses on the activity instead of a specific audience. (activity based planning)
  2. It has only those features that are absolutely necessary for users to complete the activity the application is meant to support. (But be careful.)
  3. It supports the user’s mental model of what it does.
  4. It helps users get started quickly so they can become intermediate users as soon as possible.
  5. It makes it easy to recover from mistakes and difficult to make them in the first place.
  6. It has uniformly designed interface elements, but leverages irregularity to create meaning and importance.
  7. Reduces clutter to a minimum.

Let’s focus on #6.

Here are my takeaways from the chapter: “Design for Uniformity, Consistency, and Meaning”

1. First impressions, just like in life, are very important. 
The impression users have within the first 50 milliseconds are very similar to their long-term impression of the site.  Make the first one great!

2. Be consistent in hierarchy, colors, typography, and spatial memory.
Leverage the visual hierarchy HTML already naturally supports (especially now with HTML5). Make sure your styling builds on this hierarchy (headers vs body vs paragraphs vs footers).
Remember that content is the most important part of any app. Minimize chrome (look and feel), maximize interaction elements, and increase your users’ productivity.
Some rules on typography: Never use different fonts from page to page. Choose different typefaces for headers, etc. vs regular body content, but make sure the difference is obviously intentional. Use no more than 2-3 fonts. In summary, less is more!
Spatial memory is the “ability to recall where physical objects are in relation to other objects.” This is the exact same concept as to why we can hobble around in a dark room we are familiar with  This means make your app’s layout similar from page to page so that users will be able to navigate with ease.

3. Being consistent with the rest of the company’s other products is important as well.
If you do, your company will be able to easily convert users of one app to buy a new one. There will aslo be less dev time due to reuse. If you don’t, you will risk your company looking un-focused, and you will make users unhappy as they have to relearn what they already know.

4. Know the power of design patterns.

Yahoo’s 59 design patterns.

Designing Interfaces’ patterns

UX’ movement’s 4 best design pattern libraries

“Design patterns are the glue that holds everything in an interface. They help useres learn new applications based on what they already know.”

Which leads me to this interesting fact I read from somewhere else. The company that originally built Visio (before Microsoft acquired them) built it to look like it was Microsoft’s precisely to increase their usability. I mean, everyone knows how to use MS office apps, right? (Bonus: which is also a big factor into why Microsoft acquired them!)

5. Know when to be inconsistent. Usually, to bring more importance to an element of a page.
But, be very careful. Knowing when to comes with experience, so err in the side of consistency when in doubt.

Remember the following:
Colors: 1-2 additional is ideal. You can use lighter/darker versions as well; just be sure not to overwhelm.
Dimension: more space usually means more importance.
Always make the differences obviously intentional.

6. Use bananas.
Bananas are guideposts that help the user along with what they want to do. It goes back to making it impossible for the user to fail, by designing the page to focus on what the user should be doing, and nothing else.

The idea behind Set Godin’s “banana” principle is that user’s will follow giant, clear signposts about what needs to be done on a page, just like monkeys will follow a trail of bananas. Surfacing the bananas in an application screen is as simple as determining what’s most important on a page and then making it stand out by displaying it differently than everything else…

Keep in mind that some apps do not benefit from bananas, such as portals, where the aim is to give as much information and choices as possible.

Leave a Reply

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

You are commenting using your 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