Wednesday, November 27, 2013

Poor contrast websites: how to lose your users

The golden rule in designing interfaces is to think of the user. Consider what task they are trying to accomplish, and make that task easy to do. Every bit of good advice derives from that simple rule. This is why we make websites fast, because users want to accomplish their task quickly. This is why we make the most common actions stand out, to ease the user's job. Many books have been written about usable design and how best to serve the user.

Yet, there is a growing trend towards websites that are superficially gorgeous but are difficult to use. The biggest pain point is the lack of contrast. Many common mobile applications and websites are awash in a sea of grey. Readability is sacrificed to make the page look good from a distance.

A quick word about my setup.  I have two monitors: a 22" LCD monitor and a 27" LCD monitor (in portrait mode) at home. I have 20-20 vision. These observations are true when carried out on my work monitor as well. My work monitor is more expensive and newer than my home monitors. Screenshots don't capture the image I see. So I have photographs of the screen with a digital SLR camera with a fast lens.

On to the examples.

This is from Gitorious, a website that holds source code. Reading the source code is the entire reason for that web page. This is the page with the Makefile. Utterly and completely unreadable.

The 27" display is better at displaying the same text. But even here, the text is nearly impossible to read. Also, I noticed a yellow highlight that was invisible on the 22" display. In either case, this website is completely unusable on my displays since I can only read with eye strain.

Github is next. The github page of this project is only marginally better. The text is light blue and light grey against a background of grey. A truly nauseating sight after a few minutes. Again, the entire reason for this page is so the user can read the directory structure and navigate the project.  The main content is pretty bad, but the various widgets on the top: number of commits, number of branches is even harder to read.

Apple used to be a herald of good design. This has changed in favour of catchy and beautiful, at the expense of readability. On my monitor, many pages are completely unreadable. Here is an image of the bottom of the iPad product page. The page shows the same color scheme as github: light blue or light grey text set against a light grey background. In addition, the fonts are too thin to be readable even with good contrast.

Google Plus has the same issues. Here is the best contrast on the site: the side bar which shows the navigation drawer. The chat pane on the right has even worse contrast. Even the navigation drawer is quite difficult to read.

Google Store, the devices section. The contrast on the site is comically bad. Look at the unreadable text in the white boxes. The bottom bar: "Treat yourself to a..." is slightly better because the text size is huge.

To summarize:
  1. Your users have worse monitors than you. High gamut designer displays costing thousands of dollars are a rarity. The screen becomes even harder to view when you add external factors to this: viewing angle, ambient lighting, type of display (CRT vs. LCD), age of display.
  2. Your users have worse eyes than you. These photographs were taken with a reasonable SLR camera and I have perfect vision. Your users are spread across the spectrum of perfect vision and complete blindness.
  3. Your users have lower patience than you. The competitor is just a click away.

Here is one example of a good website. This is Microsoft's product page for the Xbox one. Beautifully readable: good contrast, big legible fonts.

Contrast Rebellion is a website that raises awareness about poor contrast. Here is a website that raises the same issue with more humor.