02 Jul 2013

Reader Experience and Conversions

Successful web sites are those that are easy to see, read and comprehend. So why do webmasters choose barriers to these in their designs?

Creativity on a web site does have its limits. In the late 1990’s I was big into animation. I could make any image have moving parts and it would look really cool on a web page. Then I went through my 3D stage where I added depth and dimensions to shapes, words and logos and would make them spin.


Moving Images

Web site user complaints ended that era. These fun images took too long to load. Back then many of us were still on 9600 baud modems and a large population of Internet users relied on AOL for service. In a rural area like mine, using AOL meant unplugging the phone, plugging in the modem and dialing up a number from a town 12 miles away to get online. I could make dinner, wait for my email to load and not get any phone calls.

Moving objects also were distracting. Our eyes just can’t stay focused on reading words when moving pictures are right next to them. For a while static images were the norm and then sliders and carousels came into vogue.

Not only do these images move, they often move too fast and there are no controls to pause or move forward and backward. Worse yet, the images may be linked to pages. So, designers have not only brought back distractions, that may or may not load on mobile devices, but they expect you to read the content nearby and click on the moving images.

We don’t click on those images. Studies show that sliders, which often take up the entire top half of a web page, don’t convert well. Adding to this is accessibility compliance. There is a target user base that will never see them.
Example 1


Color Contrasts

Which of these examples of commonly used color combinations pass color contrast tests?

Example 2

Example 3

Example 4

Example 5

Example 6

None. You see these color combinations often in call to action buttons, navigation and text. Each of the above is a full or partial color contrast compliance failure. Partial fails can typically be remedied by increasing the font size to 14 to 18 pixels.


Say No to Gray Text

Even Amazon has color contrast issues.

Example 7
Popular persuasive design author, Bryan Eisenberg, once said during one of his talks at a search engine marketing conference that gray text is a “fad” that has made reading online nearly impossible for many people. I’ll add to that. Colored text against colored backgrounds is a fad that makes reading text or seeing call to action buttons very difficult.

Why do web designers sabotage web sites they expect to generate revenue from?


Mystery Links

When underlined text links went to web design heaven, we lost the ability to find our way around web sites with confidence. We’ve become a culture of mouse-over users. The use of color and movement is needed to communicate feedback to us since the underlines were removed. Here’s what we smart humans do now.

We  scan each page.

Next, we drag a mouse over what we think is a link. It could be an image, content text, heading or sub-heading. The mystery link could be hiding behind a product image but you’ll never know unless you mouse over it and if still not sure, you have to click it. If you go somewhere, it’s a link. Yay.

Another mystery link could be the blue heading before each section of text. We lost confidence in headings and sub-headings as non-linked text when actual hyperlinks were given the same exact color, font face and size.

I’ve long thought this is what webmasters do just to toy with us.

A block of black text can have a word in boldface and the color green and be just that. A green word. But we’ve been burned. Just to be sure, we need our mouse to hover over it to see what it does. It may suddenly display an underline. So now we know it goes somewhere.

Every web site I audit fails color contrasts (including our own). Nearly every web site I audit has distractions conveniently placed next to their leading revenue generation task. Every web site has mystery links, especially ecommerce and travel sites.

The next time you invest in PPC campaigns, make sure searchers can read the landing page and figure out where you want them go next.


Resource:

Use this free color contrast testing tool with your favorite color picker. Color Contrast Comparison