By Heather Coldsmith-Young & Yvette Simon
We’ve evaluated a lot of user experiences throughout 2012, and we’ve seen some good things and some bad things. December is the perfect time to reflect on what web designers should do differently in UX design for 2013. Here are the top seven website UI design ‘features’ that we think web designers should leave behind as they ring in the new year:
1. Auto-play on the landing page
Picture this: You’re sitting in a quiet office full of busy people when you decide to take a break to research restaurants for dinner. You stumble upon a website for a Giuseppe’s Pizzeria and click the link, hoping to get a peek at the menu. Suddenly, “That’s Amore” blares from your speakers as Giuseppe himself begins a boisterous introduction to the restaurant, instantly making you the center of attention and the scorn of your diligent coworkers.
While it may be tempting to play a little music to set the mood when users visit your website, put the user in control and let them decide whether they want to hear or see it – don’t decide for them!
2. Nested scrollbars
In usability research, we routinely interview users who fail to scroll down a page to locate important information.
The appearance of multiple scrollbars can confuse even experienced users and prevent them from locating information on the page. Also, nested scrollbars typically do not work the same way (if at all) on mobile devices, rendering a portion of the site unusable for people on the go.
While on the topic of scrollbars, we would love for horizontal scrollbars should be banished. Some may argue that there can be a certain aesthetic appeal associated with horizontal scrollbars. However, in our experience, horizontal scrollbars fail the usability test with an overwhelming majority of participants.
3. Buttons – not links – that open new tabs or pages
While searching online for that perfect sweater to wear to the holiday office party, you find a likely contender and click a button that says “See More Info.” After a couple of minutes of scrutiny, you realize this one’s not for you and try to go back to the previous page to continue browsing.
That’s when you notice, for some strange reason, you cannot go back to the previous page…
You try to click on the browser back button, but in vain – it’s grayed out! Upset and frustrated, you decide maybe this is the Universe’s way of telling you that perhaps you don’t need a new sweater after all, and you sigh and give up.
Time and time again we see how users can easily become disoriented or confused when page elements do not behave as expected. Common conventions dictate that links will take users away from a page, but buttons will not. What makes breaking this convention even worse is users don’t always notice when a new page has launched. They become perplexed and look for the browser’s back button, which is now, naturally, inactive. Next step? Abandon site!
4. Inability to edit directly from Order Review pages
Imagine you’ve just completed a lengthy checkout process for that new fancy gadget. Now to review the order and click the “Purchase” button… oh! Wait – you left a digit off your zip code. Whew, aren’t you glad you caught that? Now to just correct the error – but… how? The fields aren’t editable. There’s no “Edit” button, no “Previous” navigation button. Dare you push the browser’s back button and risk losing all of the information you already entered?
The key is to always give users a way to edit information on Order Review screens without fear of – or worse yet – losing what they’ve already completed.
5. Inflexible data entry (e.g., 7732025862 versus 773-202-5862)
A phone number is a phone number, whether it has dots, dashes, spaces, or none of the above. And whether I place a “1” before the number or not shouldn’t make a difference if you know I’m located in the US!
Allow users to enter data in various ways; don’t make them figure out how it should be entered. This also goes for dates, social security numbers, credit card numbers, etc. It’s not that hard for programmers to do the work to strip out extra dashes, spaces, colons, commas, etc. Make the machines do the work not the users.
6. Unhelpful error messages
If I don’t enter my phone number correctly, tell me what I did wrong! An ambiguous error message that doesn’t indicate what needs to be fixed will only frustrate users and cause them to waste time trying to figure out what they did wrong.
The error message should always tell users why it appeared and what they should do to fix it. Take it up a notch and highlight the erroneous entry, and you’re one step closer to having a less frustrated customer.
7. Lists with no filters, sorting tools, or ability to view all
Depending on what we’re searching for, we have different schemas for selecting the item we want. If you’re purchasing a new TV, you might want to check out the highest rated TVs between 40 and 50 inches. If you need a replacement charger for your phone, you might simply want the cheapest one you can find.
However, without sorting tools to organize results by the desired criteria or filters to eliminate options that don’t fit your needs, the list can easily be too overwhelming for a user to navigate.
In the absence of these features, allowing users to view all results on one page can make it easier to visually identify what they are looking for without browse through numerous pages; but this requires clear presentation of the elements a user might consider (e.g., technical specs, cost, brand, seller, etc.) in the list itself.
Without the ability to organize or manipulate a list of results based on their own criteria, many users may go elsewhere to do their research.
While these are just a few website design commonalities seen throughout the year, there are several others elements that designers should resolve to ‘kick’ as well.
UXers, what other common design faux pas do you think should disappear at the end of 2012?