Sometimes having a well-designed store doesn’t necessarily translate to higher conversion rates. Your customers will appreciate the design, sure, but ultimately they’re there to buy a product and if they can’t then the best design in the world won’t change that. That’s why it’s important for retailers to consider their website usability as well. In this post, Sezgil Hergul from Usability Tools explains what that means. Take it away, Sezgin!
According to research by Microsoft, a great majority of the visitors will leave a website upon the first 10 seconds from entering it. After this time, they will still leave, but at a lower rate. This is yet another proof of the fact that the attention span of an average person is rather low.
In other words, as put by Jakob Nielsen:
Roughly speaking, there are two cases here: bad pages, which get the chop in a few seconds; and good pages, which might be allocated a few minutes.1
Note: “good” vs. “bad” is a decision that each individual user makes within those first few seconds of arriving. The design implications are clear: To gain several minutes of user attention, you must clearly communicate your value proposition within 10 seconds.
This seems like a very short time. Considering the eCommerce environment, where people expect product pages to run smoothly and enhance their customer experience, this may be even more daunting. 47% of consumers expect a web page to load in 2 seconds or less and 88% are less likely to come back to your website if they had a bad experience.
You may now start to wonder what to do in order to avoid this. There’s a list of things you can go through to make your product pages more user-friendly in no time. If you make sure to check the items below, it’s likely that common usability issues can be fixed without spending tons of money and wasting time.
Make it easy to navigate
Don’t confuse your visitors and don’t make them think about where to click to get the info they need. If people have trouble with basic interaction on your page, they will more likely just leave and look for another solution (remember the 88% above!). This means no confusing categories, unclear labels, or overwhelming people with multiple tabs.
Making your store easy to navigate also makes browsing or purchasing much easier for your mobile visitors. When it comes to mobile usability,46% of consumers report having difficulty interacting with a web page, and 44% complain that navigation was difficult.
If you’re looking for useful tips on how to optimize your product page navigation, UsabilityGeek has made a really nice round-up of things to consider when it comes to eCommerce website navigation.
What can you do to check if your navigation is confusing? Do a simple online card sorting test to make people choose the categories and adjust them based on results. For this, you can use services like UsabilityTools. You can also set up a click testing task for the visitors. Just ask, “Where would you click to find X?” The answers may surprise you.
Zappos.com makes it easy for visitors to find the right items by using clear main tabs in their main navigation and by listing the most popular categories in the left-side panel.
The categories under Journal on goop.com above are too confusing and too generic for an average visitor to understand them right off.
People can sometimes get lost, especially when your store offers many products in different categories. We all know how the Internet works: you start looking for white trainers and soon find yourself looking at funny cat videos on YouTube. Don’t make your potential customers feel lost after they’ve already spent a while looking around for what they need. Breadcrumbs are a simple solution that show a visitor’s exact path in the form of direct links to the previously visited categories.
For example – Home & Kitchen › Kitchen & Dining › Coffee, Tea & Espresso › Coffee Makers
Users expect to see breadcrumbs, especially on sites with deep information architectures. Even if users are only using breadcrumbs 10-15% of the time to navigate, they are still relying upon them when necessary.[source]
Using breadcrumbs will not only help people to navigate but will also help your product page score higher in Google search results. Just see how the search for any of your product pages appears on Google. Notice that the breadcrumbs are shown just below your main search. This gives searchers more information about your site before they’re even on it. Use it to attract potential customers.
Make F your favorite letter
Be aware of the F-reading pattern: people scan websites from left to right and then back to left again. This pattern hasn’t changed for years and was first described thoroughly by NNGroup in 2006.
That’s why the typical eCommerce store has a large image on the left and product info on the right. The image attracts attention and then you automatically see the description. Don’t try to re-invent the wheel. Instead, use this method to improve the usability of your product page. Make images stand out and prepare clear and informative descriptions.
Also, adjust the information architecture of your product page: put the most important info at the top of the page as people won’t have the focus and patience to scan through to search for it.
Note: This is only valid in western world cultures. If you have an Arabic audience or are localizing product pages for them, keep this in mind: they read right to left.
If you want a foolproof way to see how your customers really see your product pages, eye tracking tests are a good method of evaluation. Use services like Attensee to check screenshots of your web page to determine what catches most of your visitors’ attention.
Make mobile your friend
48% of users become frustrated and annoyed when they are on sites that have either been poorly optimized or not optimized at all. 36% of users say they consider time spent on a poorly optimized site to be a complete waste of time.
Adjust your design to make mobile users happy. They expect larger buttons, less jibber-jabber text, easy-to-find search options, responsive navigation that won’t cover the entire screen, and no left-to-right scroll.
Make images on your website scale to most common screen sizes. Use Google Analytics data to determine what these are for your store. There’s no better way to ruin mobile UX than an image which is cut in half or one that couldn’t load properly on a small screen.
Still not convinced? Then consider this: 67% of users said they’re more likely to purchase a product or service from a site that is mobile-friendly.
Besides, now you basically can’t afford to neglect mobile, as Google has recently decided to rank mobile-friendly websites higher in search.
Save your visitors’ time with fast search
People don’t like to wander around real-life stores. The same goes for online product purchases. Make it as fast and seamless as possible. If people can’t find the right information it is more likely they will leave your website without buying anything.
Include a visible search option. You can’t have a successful online store without it. If you’re running an eCommerce store, try having a broken search function sometime and read the feedback. I don’t have statistics at hand, but I can tell you that a lot of people use the search as the first attempt at going directly to an item, rather than going through the category navigation, even when the category navigation has the same two-clicks-to-product result.
Include search hints/tips that appear in real-time as people type in their search query. Show the most searched or closest search options.
Consider including similar items on the product page. It’s going to make people’s shopping easier by recommending similar items directly on-page and at the same time it will give you an option to show promoted items or ones with better profit margins.
Take Website Usability Seriously
As we wrap up, let me leave you with this: usability redesign brings a pretty nice chunk of change in return. Don’t worry if you don’t have this stuff figured out yet or that your budget won’t handle usability testing and iterations. With the abundance of usability testing tools on the market you can surely find ones that will fit your needs and help to improve any product website. Tools like card sorting, click testing or installing a simple feedback form are a great way to hear the voice of your customers.
The truth is: usability redesign is not as expensive as losing customers due to poor user experience.