Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Optimizing Conversion Rates: It’s All About Usability

In eCommerce usability improvements usually have a huge impact on conversion rates. However, usability doesn’t only mean better visual guide or better site hierarchy. It also means a better communication with potential customers using a professional, trustworthy design, delivering the right information at the right time and communicating with users instead of throwing ad-slogans at them.

In this article you’ll learn what to consider when preparing a perfect landing page for your product, how to focus user’s attention on the most important parts of your sites and also how you can use videos and user ratings to improve your conversion rates.

Professional Design Builds Trust Link

The most important rule for website usability is to keep it simple. Make your links speak for themselves. Make the structure of your website predictable. Provide clear and visible feedback. Comfort your visitors and make it hard for them to do serious mistakes.

However, while these (quite obvious) guidelines may help your readers to get a solid understanding of how your site works, they will not necessarily lead to more sales. Besides, you may have some goals that conflict with this paradigm of simplicity, the most important of which are probably up-selling and cross-selling.

Build Trust and Credibility Link

When it comes to building customer’s trust in your company, a professional, trustworthy design becomes crucial. In the Web, people are very likely to mistrust online-business, so you better make sure that you appear credible and serious. Inkd.com31 does just that with a professional look, a solid grid-based layout and following classic usability conventions.

Inkd.com2
Inkd.com31

For everything you do on your website, keep in mind that the user always has to be in control of what’s happening. This holds true for expert users, who will use your internal search to quickly access products they are interested in. They may want to be able to filter search results in a certain way. And it holds equally true for the users-newbies, who wants to see proof of the teasers on your home page and will likely use your primary menu to navigate.

When a user is attracted to the advertising campaign of a product, you have no alternative but to lead that user directly to the product page itself. The next click after that should lead the user directly to the purchase page. By the way, why should you use a shopping cart in this case, if the user wants to buy only one product? The cart becomes totally useless and creates more steps in the sales process. With each additional step, the risk of cart abandonment increases.

The rule of thumbs: if a user finds a product through your internal search engine, he or she shouldn’t have to click more than twice to find essential information about the product.

Deliver the right information at the right time Link

Speaking of good information, another important rule for leaving users in control is delivering the right information at the right time, whether the information is related to the product, shipping, credit card security risks, privacy or what have you. Because of the large amount of information you can deliver to the user, you need to sort it by priority.

Scribbles
Delivering the right information at the right time is important. Scribbles: before users type in any data, the site informs them about payment methods, privacy and purchase opportunities for educational purposes. However, both privacy data and the “education”-link could be given more visual weight on the page.

The user will have certain questions at each stage of the shopping process; focus on the answers to these questions, and make them the most prominent on the page at that time. Additional useful information can be “hidden” behind a hyperlink (as the “education” link in the Scribble-example above).

Don’t advertise, lead the users Link

Be careful about using graphic elements to prioritize information; don’t make them look like advertisements. People tend to overlook page elements that look like ads. Of course, you can illustrate the advantages of your products with big pictures — really big pictures. Jakob Nielsen even recommends using full-screen-sized views: “If I click on a product image on a product page, I am certainly asking for a bigger version of that image. And as I intentionally clicked, I’m able to wait for the really great picture. I’m not only able to but I even expect to wait for some loading delay.”

The paradigm of simplicity means that store designers have to be very careful experimenting with new techniques such as AJAX and rich Internet applications based on Flash. If you use these, you will have to run usability tests. New studies show that many people are still unfamiliar with functions like dragging and dropping and do not know what words like “tagging” mean.

Newsberry
Newsberry

Newsberry uses a beautiful layout with attracitve design elements. However, it fails to attract readers to sign up for the service immediately – users need time to find the obscure, modest “sign up”-button. How much time do you need to find it? Probably making the button stand out would work better in this case.

Designing for the Web
Be careful about using visual elements to prioritize information; don’t make them look like advertisements. Good example: Five Simple Steps

Mark Boulton’s Five Simple Steps does a good job of focusing users’ attention to purchasing options while not making them look like advertisements. Clear visual design and layout reinforce the sales funnel effect.

Getting back to the questions that customers pose, one of their big questions on landing pages is, “What next?” Take a look around the Web. You’ll find tons of stores that hide their order buttons or label them with ambiguous terms. For example, the German store Werbemittelguide4 includes the terms “Order or ask for an offer” on a single button. While distinguishing between direct orders and solicited offers gives users more control, placing these two different ideas on one button is confusing. In this particular case, clicking on the button does nothing other than put the product in your cart. And the cart is positioned in the bottom-left corner: a clear violation of user expectations.

Highlight What’s Important And Use Proper Wording Link

Go to the website www.guut.de5, look for a second and then close your eyes. Open them again for a second and then close again. What did you notice? The big product picture on the left? The countdown? The huge orange order button? The label on the button says “Order now” — a couple of years ago, a lot of Web designers would have regarded that as outrageous, outdated design. Today, it’s state of the art.

“Tell people clearly what they should do next,” says US e-commerce expert Peter Blackshaw. What works with online shopping also holds true for online communication, downloading a PDF brochure or any other form of conversion. Make the most important option the biggest. Links to “More information,” “Details” and “Technical data” are also important, but less important than the conversion itself. They should be displayed in a smaller font or in less aggressive colors.

The US agency MarketingExperiments learned first-hand how strongly wording can influence conversion rates. It tested its own campaign, which aims to convert readers to paid subscribers. Every single element of the email campaign was tested. The button that triggered conversions was labeled “Continue here,” which at first glance would seem to work perfectly. The outcome of the test surprised even experienced experts. A new button labeled “Continue to article” converted 3.3% better than the first; and a third version, labeled “Click to continue,” convinced almost 10% more users.

Coolest Gadgets6
After inserting an Amazon-style order button, Al Carlton doubled sales on his website7.

Video Is Often A Silver Bullet Link

It is becoming common sense for product descriptions and product pages to include videos that show the products in action. In Germany, almost 60% of all retailers surveyed by the BVDW indicated that they planned to increase their efforts with video.

The bike retailer Fahrrad.de8 invited sales agents from all brands to its new studio, which was built solely for producing videos for its website. The sales agents were advised to explain why their products were better than others. And most brands sent not only sales people but also cross-country world champions to stand in front of the camera. Some retailers might argue that their products are not suited to online video. By now, though, we can quickly find many products that are being advertised with online videos.

Design Trends 2009
Both Getbackboard.com…

Design Trends 20099
…and GoodBarry.com10 use prominent video blocks on their start pages. Videos are often used to quickly explain what the product is all about and what advantages it can bring to the customers.

What is very important to understand is that the videos don’t have to be full-throttle studio productions with enormous budgets. In many cases a hand-made personal video will do. It may even perform better than a traditional advertising video because it’s more honest. Websites that push new concepts, like eBags.com11, try to build community websites around their product videos, and users can vote on which video they like best.

A very nice idea was used by Pleo, a company that sells a kind of robot pet that looks like a dinosaur. Pleo hit the sidewalks in certain cities, put the dinosaurs on the ground and shot people’s reactions. You could hardly advertise with more authenticity.

And don’t let anyone fool you, there is only one format for online video these days: Flash. Only Flash allows video to be seamlessly embedded onto a Web page and integrated with other elements on the page. Because of YouTube’s success, most users are able to play back Flash video. And producing video is really not expensive, even if it is farmed out to an agency.

Don’t Underestimate The Importance Of User Ratings And Customers Reviews Link

This may be one of the most important topics of all these days. In tourism, about 60% of all travellers base their decisions on online research. They visit ratings websites to find the best destinations and hotels, free from the marketing overtures of the companies themselves. Similar websites can be found in the electronics and other industries.

This leads us to two questions:

  1. Should store owners build their own ratings system?
  2. How should one deal with criticism?

The first answer is pretty simple. In most cases the answer is, “No.” And there are a lot of reasons for that. The most important reason is that no retailer is trustworthy in this way. People would know that commercial interests are behind any recommendation; the cost and effort to maintain such systems are immense; and only the biggest websites attract enough users to build a valuable rating system. If a website owner decides to build his own system, he must provide the ratings right in the spot where users expect it: beside the products.

Take Thomas Cook Travel12 an example. After a lot of research, it built its own user ratings system, which is now one major filter in its internal search. An external system like Idealo.de (or PriceGrabber.com1513) might be a better alternative. Idealo gathers ratings from a lot of platforms and aggregates them with tests and reviews from websites and magazines. The plattform itself is neutral because individual retailers cannot influence the content.

Pricegrabber14
PriceGrabber.com1513

The second question is also easily answered, but the consequences are significant. When criticism comes its way, a company would do well to leave it on its system, as long as it isn’t obscene and doesn’t violate laws. This is what experts recommend. It is a very sensitive issue for retailers, their suppliers, the producers and brands, all of whom are trying to cooperate for mutual benefit. If you face this kind of criticism, forward it to the relevant partner and allow them to respond.

Stay Tuned Link

This article is the second part of our 3-part-series “Optimizing Conversion Rates”. The third (and last) part will be published next week.

  1. Optimizing Conversion Rates: Less Effort, More Customers16
  2. The Conversion Is All About Usability17
  3. Use Conversions To Generate More Conversions18

Hence, you may want to subscribe to our RSS-feed19 Subscribe to our RSS-feed20 and follow us on Twitter21 Follow us on Twitter22. Any ideas or suggestions? Comment on this article!

Footnotes Link

  1. 1 http://inkd.com/
  2. 2 http://inkd.com/
  3. 3 http://inkd.com/
  4. 4 http://www.werbemittelguide.com/php/page/shop/index.php?IDENT=1:20:2&id=629&complete=true&SPRACHE=
  5. 5 http://www.guut.de/
  6. 6 http://www.coolest-gadgets.com/
  7. 7 http://www.coolest-gadgets.com/
  8. 8 http://www.fahrrad.de
  9. 9 http://www.goodbarry.com
  10. 10 http://www.goodbarry.com
  11. 11 http://www.ebags.com
  12. 12 http://www.thomascook.com/
  13. 13 http://www.pricegrabber.com
  14. 14 http://www.pricegrabber.com
  15. 15 http://www.pricegrabber.com
  16. 16 https://www.smashingmagazine.com/2009/05/05/optimizing-improvig-conversion-rates-less-effort-more-customers/
  17. 17 https://www.smashingmagazine.com/2009/05/15/optimizing-conversion-rates-its-all-about-usability/
  18. 18 https://www.smashingmagazine.com/2009/05/23/optimizing-conversion-rates-less-effort-more-customers/
  19. 19 http://rss1.smashingmagazine.com/feed/
  20. 20 http://rss1.smashingmagazine.com/feed/
  21. 21 http://twitter.com/smashingmag
  22. 22 http://twitter.com/smashingmag
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

The german journalist writes on webdesign and usability subjects since 1994. He worked in one of the first editorial portal teams at a forgotten service called EuropeOnline and co-authored ProSieben online which ist now one of the biggest media sites in Germany. Puscher wrote the first German book on Usability, his current publication "Leitfaden Web-Usability" is on sale these days.

  1. 1

    Andrew Conde

    May 15, 2009 8:30 am

    Nice list. Point 2 has a typo! Highight What’s Important And Use Proper Wording. Should be highlight

    0
  2. 2

    Now if I can get my “know it all” boss/owner to understand this maybe we could get more returning customers than a constant flow of new ones.

    Thanks for the great info!

    0
  3. 3

    Great article, some useful tips =]

    0
  4. 4

    Great article once again!
    Really useful for the website i’m working on at the moment

    0
  5. 5

    Extremely useful article…thanks SM!

    0
  6. 6

    hmm, i like this ‘The most important rule for website usability is to keep it simple’ .. thanks great article

    0
  7. 7

    Wow-this will be one of those posts that I will come back to 500 times. I love finding new how-tos! Thank you!

    0
  8. 8

    some nice tips..Obviously not enough but useful to take care. Thanks Frank for the write up!!

    DKumar M.
    @instantshift

    0
  9. 9

    More of this please! :)
    Really enjoy to read these kind of posts.

    thanx SM

    0
  10. 10

    Great article, but please copy-edit >.< It’s super-frustrating to see a good article on usability lose credibility points for using “The sales agents where advised to explain” instead of “The sales agents were advised to explain.” I also noticed at least one rhetorical question ending with a period.

    It’s sloppy; it also makes it hard to pass this on to the bosses.

    (SM) Thank you, the mistakes are corrected now.

    0
  11. 11

    Good article, but too many typos man!

    0
  12. 12

    Thanks for the excellent article. Some really useful knowledge, and I look forward to the next 2 in the series!

    0
  13. 13

    Martijn van Vreeden

    May 15, 2009 10:51 am

    Excellent article! The importance of user ratings for conversions cannot be emphazised enough. I am already looking forward to part 2.

    0
  14. 14

    thank you, thank you, thank you : repeat; …

    0
  15. 15

    Looks like Idealo.de doesn’t read SM.

    0
  16. 16

    Kelly Smith

    May 15, 2009 2:16 pm

    Hey thanks for selecting us! We really appreciate the kind words!

    Kelly Smith

    0
  17. 17

    Joshua Greenough

    May 15, 2009 4:30 pm

    Great tips and when we started as a smaller business we were always looking to knock out as many projects with one implementation as we can. This is the biggest advantage that we have gotten from multiple product implementations was from Google Analytics and Website Optimizer.

    We offer a review platform that is more fully featured solution than PriceGrabber’s stars and comments. Check out our SMB platform PowerReviews Express where you can get all kinds of features with one installation. You can get user generated images & video on your site at the same time. We also offer email marketing which is why I suggest trying to kill a few birds with one stone.

    Also we 100% agree with showing negative feedback. You can respond to it but you have to show it or users will notice and then it is worse when they spot you trying to do a cover-up. So your advice is right on.

    0
  18. 18

    all trivial rubbish.. sorry, fail.

    -2
  19. 19

    Permana Jayanta

    May 15, 2009 5:32 pm

    Thank you for the good article …. I like reading article like this …

    0
  20. 20

    A good article with key points

    1

↑ Back to top