Web International Awards

payday loan


SEP 2009 4

Consistency. Key element in extraordinary UX

Throughout their life people develop different patterns. These patterns are visible in how people interact with each other, actions they usually take for similar scenarios. Some develop tics. A tic is a spasmodic contraction of muscles that usually occurs in the face. People love patterns because patterns make them feel comfortable. Some sales people could develop a pattern in opening a discussion with someone else, a stranger, and could feel awkward if a chat with a new prospect doesn't go according to the usual plan.

Some love drinking coffee while reading the newspaper in the morning, and each morning they do the same thing. Programmers love having coke or energy drinks while they code while cops love their donuts. The list of habits and patterns is very long, and is not the goal of this article.

But if we love patterns, why almost every software out there is different than the one next to it? Why related sections on a site are different when they should have similar structure? Not having a consistent layout across a site, across a network of sites will damage user experience, because it will be harder for your visitors to go around the site developing habits.

Consistency matters. Here's why

Mac OS X screenshot

Take for example Apple's operating system OS X. Leopard is consistent across different areas and software installed on the platform uses the same visual elements, positioning of elements. Users therefor learn their habits faster and the user experience improves drastically because people know their way around the operating system.

Mac OS X Snow Leopard screenshot

Further more, Snow Leopard, the new OS from Apple, didn't produce huge changes in user interface since original Leopard. The new version only improved the first one, while adding some new features. Slight changes do appear in the user interface, but they were placed in the right place, exactly where users expected them to be. Another good example is the iPhone's user interface, which contains a set of basic elements that are given to developers, and they use only those elements to build the structure of their apps. The direct result is whatever app you are using, be it a weather app or sending a text message, interacting with the phone is done in the same way.

iPhone UI screenshots

As I do not want to put Apple on a pedestal, Microsoft is consistent throughout their Office suite. Similar functions are placed in the same spots whether you're using Word, PowerPoint or Excel for example. Another good example is out of the IT world, into cars. All cars have the brakes, clutch and throttle in the same place, and all cars are to be driven on the right side of the road, with minor exceptions.

Google, doesn't do a really great job when it comes down to consistency. They do have consistency across different services they offer, but what I will talk about is Google's search engine and their translation service. While searching on Google you may misspell a few words. Should that happen, Google searches for your phrase but also makes suggestions for search phrases with proper grammar. What I don't understand is why such suggestions and corrections of my bad grammar don't happen while trying to translate something. You could hear a word on radio or on TV and you have no clue what it means. Moreover, you don't know exactly how to spell it, but you give your best. Then you hit translate, and the word appears in another language exactly the same. This is totally wrong especially because there's nothing that says that the word was not found. It is your own guess that the word you typed is badly written or doesn't really exist. Google does provide a tiny search link. But it is tiny and takes you away from the translation page. Poor user experience from Google.

Consistency across the web: Envato

We will first look upon Envato's websites network. They all share the same structure, all links are in the same place across all sites. Articles have same structure. The only difference between them is given by different color schemes.

psdtuts.com screenshot

vectortuts.com screenshot

cgtuts.com screenshot

audiotuts.com screenshot

Consistency across the web: Nike

The next stop will be another network having consistency across many sites: Nike. Same structure, different colors, awesome branding.

nike women screenshot

nike football screenshot

nike basketball screenshot

nike soccer

If you have any other examples or pointers please leave them in the comments section bellow. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

Published on Tuesday, September 8th, 2009 at 9:25 am in articles, design.

About Bogdan Pop

Bogdan Pop is a young Romanian entrepreneur who runs WebRaptor. He is a web developer with awesome design skills, who enjoys writing about everyday's work and usability. He relaxes by taking photos every once in a while and by mixing french electronic music. Connect with him via Twitter.
  1. CSS Brigit says: September 8th, 2009 at 9:51 pm

    trackback to this article

  2. Dale Watkins says: September 9th, 2009 at 2:24 am

    Great article with examples about consistency.
    Many times we all can get caught up trying to be different and quirky when it’s usually best to stick to what works.
    Good post!

  3. admin says: September 9th, 2009 at 8:51 am

    Hey Dale,
    I am glad you enjoyed the article, and thanks for the comment! Your comment made me think of something more about this issue.

    Being consistent, not different and quirky as you put it, probably results in lower development costs. I imagine how much it would take Envato, for example, to develop differently all those sites in their network.

  4. Make your own jQuery slider using XML says: March 4th, 2010 at 5:44 pm

    […] 4. Consistency. Key element in extraordinary UX […]

Save time next time! You won't have to fill out all these fields again. Register in just a few clicks and then login.

If you do not have a username, you can register in just a few clicks.