UX FAIL #1: Designing Against User Habits

There’s a certain graceful flow I like to make when entering a room or building and nothing kills the impression than opening the door the wrong way.  There I am, walking confidently along my way, barely pausing as I reach out to push open a door when…SMACK.  It’s not a push door.  It’s a pull door.  There goes the ease and swagger of my stride as I trip over myself to adjust and pull the door open.

Smart  companies have thoughtfully installed bidirectional doors so embarrassing mistakes like mine won’t happen.  But a majority of shops and buildings have the PUSH and PULL signs on their door for the confused.

Guess what?  We aren’t readers when it comes to habitual actions; there are very few of us that will take those extra seconds to process which 4-letter “P” word we’re supposed to do.

Your website may have one of these doors.  The UX FAIL equivalent? Links that don’t work as expected.

UX & Links

Habitual online users have a certain expectation for how links look and how links should work when clicked.  We don’t like to take those extra few seconds figuring out if something is clickable or not and we certainly don’t feel like the sharpest crayon in the box when we do click on something that should be a link and nothing happens.

Regardless of how comfortable with the Internet the user is, we all share a common expectation for how a link looks on a website.  In 2004, Jakob Nielsen encouraged improving the visualization of links by adhering to theses rules:

• Use color and underline the anchor text (with the exception of navigation links).
• Blue is the most recognizable link color, but other colors can be used.  If using reds or greens, underlines become necessary for color-blind users.
• Use different colors for visited and unvisited links.
• Whatever color you opt to choose for links, don’t use elsewhere on text.
• Don’t underline any text that isn’t a link.

What was true in 2004 still is today.  Inline links need to clearly stand out with visual cues.  When you hide them within your blocks of text, it’s the real world equivalent of this:

Additional Tips for Usable Links

I’d add to Nielsen’s 2004 advice:

• Include title tags or rollover tips placed with jQuery on links that may need more indication of where the link takes them.
• Anything that is clickable should have the hand cursor icon when rolled over.
• Make use of the :hover and :active states of anchors to indicate when linked block elements are interacted with.
• Avoid using Javascript actions on your links.  For users that use tabbed browsing, Javascript will often not allow users to CTRL or CMD click to open links in new tabs, instead forcing the user to view the entire site one tab at a time.  Ecommerce designers: listen up!
• Buttons are common renderings of links on modern sites; just like Nielsen forbids blue and underline on non-link text, so too should non-interactive elements not be rendered to look like buttons.
• Use padding on the anchor text and not on the containing element; this increases the active clickable area instead of confining it just to the text.