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

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.

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.

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.

Consistency across the web: Nike

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

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.

Graceful flash degradation

It has been quite some time since I last wrote an article here, and I hope you all enjoyed the summer and summer holiday. I read a lot of blogs each day and I must say that there's a decent amount of articles about javascript, content, and how to properly code a site when using javascript. You have to be careful because of those people who disable javascript or use old browsers that don't have such features. However, I haven't seen any articles describing some short guidelines as to what you should do when developing a site in flash.

Issues with flash developing

The first issue that has to be taken into consideration here is that while many people have flash player installed, its version may be an older one, and the site or web app you are building with flash 10 may not work correctly, or at all on some people's computers. Moreover, there are individuals that don't have flash player installed, just like the ones without javascript.

How to handle flash generated problems

The easiest option would be to develop a html version of the site. Though this is ok, the costs of such a solution grow as the site grows. This is ok for small sites or sites that are not updated frequently. What happens when you have a big site, with content updated on a daily basis?

Increase sales by 70%

Few weeks ago, during a meeting with a long time client, I have received an "Indecent Proposal", just like in the movie. The client wanted me to double the number of sales triggered by the site, and said he would pay big money for it. I considered it indecent just because how the client proposed it, not because what he was asking. That was perfectly fine with me.

So I studied the website for a whole day, I also did user testing with 15 friends, which also took about an hour. After 9 hours of brainstorming work and testing, I had some figures in front of my eyes. More than 60% of the subjects said that they liked the site and the products. However, they didn't see any price for none of the products so when they came upon the "order now" button, they felt like they were about to buy something without knowing how much they will be invoiced.

Careful with your call to action buttons

I decided to change only that little aspect which took not more than 5 minutes of coding. I changed the "order now" button with a "Find out more" button. No search engine optimizing, no marketing campaigns, no advertising were required to improve targeted traffic. After more than a month since I made that change, here's how the figures look. The conversion rate was improved by almost 3 times. The conversion rate is now 2.88% while the previous one was around 1.13%. The overall traffic of the website has however hit a peak point in May this year, and has reduced by 40% since then. Doing some math will provide us with an extraordinary answer. Even with traffic going down by almost 50%, the sales numbers went up by around 70%. Those are 2 words which were changed that packed such a big punch into it. What is even more important is that the client now wants search engine optimization and advertising to increase targeted traffic to his website.

Awesome navigation techniques

Check out red-issue.com, because this site is mind blowing in terms of navigation. What is the most natural way for people to communicate? Gestures. Just like babies do before they learn to speak. Red issue uses them to allow visitors to browse their website. I really like how gestures trigger different features on their website.

Let me know what you think about how the site works, and if you have any similar examples, please post them in the comments. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.

Red sites showcase

A couple of weeks ago we published a great article on a delicate subject: colors. We discussed some interesting tips and tricks about red color, where to use it and other interesting facts. We even interviewed Igor Asselbergs for advice, a renowned color expert with over 20 years of experience. Today we are taking the series of articles around color one step further as we publish a showcase of websites that use a good amount of red color.

Bad usage of red!

Uniqlo here uses red to attract people's eyes towards what I consider to be headlines. The website is bundled with numerous colors and huge contrasts. However, I find those red labels a bit disturbing, especially after a couple of minutes of navigation.

Good usage of red!

Red Nose Day uses red for headlines, just like Uniqlo does. However, they use it for the foreground color, not the background color. The red on their website is subtle and doesn't disturb the user, even after a couple of minutes of browsing. As it contrasts with pretty much everything else on the page, headlines, buttons, and call to action buttons are easily distinguished.

Chisholm Hunter uses red even better that Red Nose Day does because the only place red is used is their link to the on sale products.

Blogger Bake Off also uses red just like Chisholm Hunter. It emphasizes the links for the donation and join pages, which are the two main actions the site was designed for.

Better home link buttons (3)

Couple of months have past since the last article in the series. I have been visiting this website for quite some time now. However, their home link button has a small subtlety which only today I've discovered. In the first and second articles regarding better home link buttons I recommended providing users with means that show that the logo is in fact a link to the home page. However, Marca.com, the site I am talking about today, fails to this properly.

Marca fails to do this properly simply because they do it in a very subtle way. I don't think many visitors see the little icon while hovering their logo because it is too small, and the contrast with the menu background is too low. In the previous article regarding the red color, we have seen that although red usually pops out, it does that only under certain circumstances, and having a red icon on a red background is simply not one of them.

If you do emphasize home link buttons make sure you do it the right way. Otherwise, why bother at all. I hope you enjoyed this article. Let me know what you think about it in the comments. If you liked this one, you can stay updated to upcoming articles via the rss feed.

Red

This is the 1st article in a series that is meant to describe colors and provide detailed information about their waveform, tones, and advice on where and how to use them. We kick of with red because it has the longest wavelengths. Did you know that infrared and red lasers were developed based on this color just because it has the longest wavelength? Another reason for choosing red is because it is the first named color in the RGB color system.

Having the longest waveform, red catches people's attention, and not only. Familiar with Spanish toreadors, fighting those bulls? Well, those bulls are also attracted to red. Because it catches people's attention red is generally used in negative ways, to indicate danger or emergencies. For example, traffic signs that deny entrance are red. Sometimes, red is used in advertising to attract people's view towards a product or campaign. In "Contemporary Ergonomics" (Boca Raton 1996) we find out after several different studies that red is indeed the color that carries the strongest reaction. That's why scientists always recommend using red for warning signs and labels.

Fixed background

Achieving a fixed background on a webpage is not so difficult. However, there's lots of topics out there (especially on forums), with lots of solutions to this problem, including some javascript or flash techniques. The point is that you don't need javascript, nor flash to achieve this. Especially flash! The trick is simple. You must set the background not to repeat, and the make it fixed. You do that by adding "background-attachment: fixed;" to your css code and you're done. The rest of background positioning must be done just as you would on any other background.

Here's a demo, and here's the source code for the demo. If you liked this article you can subscribe to the full content rss feed and stay updated as we post new information.