User Experience

User Experience: 5 Avoidable Mistakes

With the advent of easier web development methods, it’s become easier than ever to saddle your users with an awful user experience (UX).  Every day people are creating thousands upon thousands of web applications.  These pages confuse their visitors, give poor impressions, and generally pollute the web.  This article won’t make you a UX PhD, but it will point out some of the most common UX mistakes.

Treat these as “low hanging fruit”.  With a little knowledge you can avoid the most common UX problems up front.

Executive Summary

Here’s the list for the “too long, didn’t read” crowd:

  1. Skueomorphism
  2. Non-Traditional Navigation
  3. Missing Human Touches
  4. Hover Menus
  5. Skipping Device Testing
  6. Bonus Item – Skipping Usability Testing

Still reading?  Then let’s dive into the details of the first mistake!

Skueomorphism

What it is:

Skueomorp-huh?!  Skueomorphism is a big word that simply means the use of physical materials to make something seem familiar.  For example, the leather stitching around the border of the old Apple Calendar app.  Or the “stack” of albums in your music player screen.  Or glossy buttons that have a reflection change when you press down.

Skueomorphism helps apply the familiar old mental models to software experiences.

The problem with Skueomorphism is that it must be done well.  We’ve all seen user interfaces clogged full of drop shadows, animated bells, marble tile backgrounds, etc.  These elements don’t help the user accomplish a familiar task; they just force a very specific style taste onto the user.  It makes a site look dated, and it’s usually harmful to the experience.

What to Do Instead:

As a UX rookie, the least you can do is steer clear of drop shadows, reflection, and physical materials patterns.  If you’d like to become more advanced, read up on Flat Design.  While flat design isn’t exactly the opposite of Skueomorphism, it does call for a simplified experience with reduced use of shadows and materials.  This new, minimalist design approach is in use by Microsoft, Google, and Apple.

Bonus Fact: drop shadows could become a performance issue.  While today’s computers have gotten faster, it still takes processing power to render all those shadows.  And they might display inconsistently between browsers.  Why not avoid them entirely?

Other Notes:

Non-Traditional Navigation

What it is:

Poorly-designed websites may place navigation in unusual locations.  Examples:

  • Buttons in the very center of the page
  • Menus that are limited to the bottom footer

If you are an agency creative director and are looking for a truly unique website, non-traditional navigation is fine.  Go ahead: have animated panels fly in diagonally, it’s cool!  That’s great for agencies to highlight their technical chops.  But if you are in a public-facing business role, you need the average mom/dad to be able to navigate quickly.  Also, these “innovative” navigation schemes may not be compliant with assistive screen-reader technology.


What to Do Instead:

Primary navigation goes at the top, and secondary goes at the left.  See Amazon.  For more info on navigation (and other great UX topics), see Steve Krug’s amazing book “Don’t Make Me Think”

Missing Human Touches

What it is:

This is an easy one.  Many public-facing websites are looking to build trust, but don’t establish any human rapport.  Without rapport or trust, how is the user to know that this website isn’t running in a basement in North Korea?

I can’t tell you how many websites I’ve seen for accountants, doctors, and other service professionals that DON’T have a photo of the service provider.  Understandably, some people are shy about their photo.  But when you are trying to build a connection with another human being, they need to believe you are an actual human being.  Call it the business version of the Turing Test.

Other websites try to hide their contact phone information in order to reduce call volume.  The “Contact Us” page is left to its own devices to build relationships.

What to Do Instead:

Adding the human touch to a website:

  • Provide professional-quality photos of the people behind the business
  • If applicable, provide photos of satisfied customers (avoid stock photos)
  • Prominently list your phone number: “Questions: Call Us at…”
  • Read this article from the Baymard Institute for more tips on giving your site a trustworthy, human touch

 

Hover Menus

What they are:

A hover menu requires the user to keep their mouse on top of a designated area in order to see a sub menu.  Many of these types of menus have sub-menus, which requires the user to mouse over an item, wait for the menu to “fly out”, “drop down”, etc, and then carefully move their mouse to the sub-item.

Here’s a visual, courtesy of UXmovement.com:

In the above example, most menus will instantly close when the user takes the direct path.  This is sometimes referred to by the chuckle-worthy term “hover tunnel”.  But regardless of terminology, it’s a very bad UX to have users perform a mouse coordination test in order to get to the desired page.

What to Do Instead:

You have several potential solutions.  Here they are, listed from easiest to most difficult, in terms of implementation effort:

  1. No Hover Menus: keep content focused into a handful of top-level domains.  This solution requires no coding, but most organizations would outgrown it.
  2. Vertical Hover Menus: if menus must fly out, keep them vertically oriented.  With a generous width, this approach should be very forgiving to most users.
  3. Click to Open Menus: this pins the menu open, giving you the ability to stuff the menu full of sub-menus and other content.  Of course, this has a slight affordance problem, since the user needs a cue to click rather than hover.

Other Notes:

If you are facing this issue, we strongly recommend reading this excellent article from UX Movement.

Multi-Device Testing

What it is:

There are a number of websites that don’t work well on mobile phones, iPads, or large screens.  How many of us have hooked up to an old projector for a presentation, only to find that the website has buttons cut off at a particular screen size?  And how many of us have heard the dreaded

But it works for me!

…from their development team, support center, etc?

What to Do Instead:

This article won’t make you a responsive design expert.  But everyone is capable of cross-checking their website on multiple devices.  Try browsing from your phone, a library computer, an old Macbook, etc.  This is especially important for phones, which are rapidly becoming the primary consumer of internet bandwidth.

Bonus Tip: Google has tools that will tell you exactly how mobile-friendly your site is.  See their mobile-friendly test tool here.

Bonus Item: Skipping Usability Testing

What it is:

Usability testing is the science of gathering up users and examining their use/reactions to software.  Often, you hear about this being done by professional teams with cameras, eye trackers, and two-way mirrors.  And 90% of Usability Testing planning discussions end the same way:

Ain’t nobody got time for that! (or funds)

Many organizations skip usability testing, then later discover that their users don’t understand how to make use of the software.

What to Do Instead:

You must execute usability testing.  Even if you have to hand your phone to a relative at a family picnic.  Also, formal usability testing might not be as expensive as you think.  New services provide virtual alternatives, so you don’t have to spend a lot of time with travel, facilities, etc.  Contact Cloud Notions for details; we’ve executed usability tests on a shoestring budget before.

 

Conclusion

This article covered a lot, but they were only the basics.  We hope you have learned enough to sidestep these common user experience errors.  Please contact us if you would like an assessment of your UX strategy, a usability test, or a referral to a world-class design agency (we’ve worked with several).  Is there one we missed?  Contact us for that, too!