SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

Usability Best Practices For eCommerce Websites

March 21, 2011 by George Fekete 9 Comments

Usability – a term that we hear almost everywhere we go on the web and for good reason. Good usability can mean the difference between one site’s success and the downfall of another.

Usability is especially important in the case of e-commerce websites. While most usability principles of regular websites still apply for e-commerce sites as well, the different specific pages such as shopping carts, shipping methods, shipping and billing addresses, order reviews, payment options, etc. all add another layer of complexity to creating usable online shops.

Usability is a prerequisite for an online store to achieve its full potential. If people cannot shop, or are unwilling to go through a seemingly unsecured and long order process then the site is useless. It doesn’t matter how inexpensive the products are if visitors can’t find them or if they get stuck on a step in the ordering process.

After deciding what to purchase, the buyer’s next goal is to complete the buying as quickly as possible, and the website’s job is to hasten and streamline this process as effectively as possible.

Let’s take a look at some of the best usability practices that a few of the most popular online stores exercise.

First we will study practices that apply to e-commerce site usability and then we take a look at usability tricks for e-commerce specific elements such as shopping carts and online ordering.

Online store site usability practices

Using email addresses instead of usernames

Usually people have much fewer e-mail accounts than random usernames and they tend to remember them more easily. Also, we know that emails are always unique so they make a perfect candidate to replace usernames.

Buy.com uses this practice among many other e-commerce giants.

Buycom Login

Using breadcrumbs to ease navigation

Navigating an online store and knowing at all times where you are as not to order something by mistake or lose your selections, can be tricky. Breadcrumbs are a great method to let the customer know at all times where he is on the site.

Amazon.com is the leading e-commerce site and a trendsetter in usability practices. They make great use of breadcrumbs.

Amazon Breadcrumbs

Visible contact information

Posting contact information in visible places can go a long way in establishing credibility and providing a pleasant shopping experience. Customers will have problems and questions during the buying process and being there for them is a huge usability plus.

The designers at JCPenney have taken full advantage of this usability approach.

JCPenney Contact

Visible search field

Customers need to find what they are looking for, and this is why many online stores try to keep the search field visible at all times. Also it doesn’t hurt to have a search that can be refined.

GAP does a great job with their search function.

GAP search results

Show recommended and related products

The goal of usability in e-commerce is to keep the shopping experience as pleasant and easy as possible.

By showing recommended and related products online stores can significantly increase the user experience and more importantly sales.

We can see American Eagle Outfitters use this strategy to great effect.

AEO Recommended Products

Calls to action

An e-commerce site without sales is not going anywhere. Promotions, deals, and campaigns all help boost sales and what better way for them to draw customer attention than calls to action.

Calls to action don’t come much clearer than at JCPenney’s.

JCPenney Call To Action

Security badges

Online shopping is still perceived as being unsafe. Online store owners are doing anything they can to demonstrate the security of their platform as best they can. Displaying security logos, badges is a great way of earning the customers’ trust.

Best Buy clearly presents these badges in the footer.

BestBuy Security Badges

Usability practices for shopping carts and ordering processes

Breaking up the order process

The order process can be a complicated step in buying online. Breaking up the process into smaller bites is a technique often used.

Customers need to be able to feel secure when ordering. To dispel the fear of the customer to maybe order something they do not want too, many online stores make sure to show the customer where he is in the process.

We can witness it best at Amazon.com.

Amazon

Use copy in the order process that increases credibility

The order process is where most potential customers abandon the purchase. Online stores go to great lengths to ensure this happens as rarely as possible. One great technique is to use copy in the process that increases credibility and answers potential customer fears.

Tesco does this brilliantly.

Tesco

Visible cart and content

Another widely used usability practice is to have the cart and its contents visible at all times. This allows customers to be constantly in control of their purchases.

Buy.com does a great job at this.

Buycom Shopping Cart

Show every fee in the shopping cart

Hidden fees constitute one of the main reason customers have a bad online shopping experience. Having a transparent shopping cart is usability must.

Dell.com makes sure to do this.

Dell Online Store

Confirmation page

It is very important to have a confirmation page where customers can review their order before finalizing the purchase. Online shoppers have become accustomed to this usability feature so shops omitting this step in the order process are making a huge usability mistake.

Again, Amazon.com is a prime example.

Amazon

Conclusion

Usability is crucial for e-commerce sites and since a happy customer will most likely return, making the experience as good as possible must be one of the main objectives for online stores. Finally, you will want to keep in mind that the current trend in application development requires graphic designers to be knowledgeable about secure code and protecting websites against the techniques used by hackers. Organizations, whose sites provide access to confidential information, are asked to complete audits, such as a SOC audit. These audits promote compliance with information security and control standards.

Also, we must keep in mind that while adhering to usability guidelines and best practices is a must, every store is unique in their way. That is why constant usability testing and collecting customer feedback must be an ongoing activity for any e-commerce website.

Filed Under: Design, Usability, UX

Comments

  1. Guido Jansen says

    March 21, 2011 at 9:56 pm

    Some great tips George, thanks for sharing!

  2. Adrian Thomas says

    March 22, 2011 at 12:10 am

    Nice overview about getting the fundamental principles of e-commerce done properly.

  3. Anonymous says

    March 22, 2011 at 3:47 am

    Agree with pretty much everything except…

    “breadcrumbs ease navigation” – Way back in 2000 when I was part of the team taking Best Buy online, we found they only did if they showed the actual route a visitor used to get to that particular page/item. But, there were many routes – search, external links, etc – where that wasn’t the case and then the breadcrumb wasn’t as meaningful and became confusing.

    Also, just because Amazon is a leading e-commerce site doesn’t mean they’re doing it right. There’s many things they do wrong (or get wrong and leave up) – Jared Spool gives a great talk dissecting Amazon and what they do wrong. Totally dispels the myth. If you ever get the chance to see him talk, I highly recommend it – He’s very entertaining.

  4. IntuitionHQ says

    March 22, 2011 at 11:28 pm

    Surely part of the point with breadcrumb navigation on e-commerce sites is linking you back to categories you might be interested in? Even if I came to a site via Google looking at a specific product, I might be interested in looking at other products in the same category?

    I’d venture a guess that peoples understanding of breadcrumb navigation would have advanced a huge amount since 2000 as well, because the web has changed a huge amount since then.

    I agree about Jared Spool though; he always has some really insightful comments – UIE.com is a great site too.

  5. IntuitionHQ says

    March 22, 2011 at 11:37 pm

    I also pretty much agree with most points, but I like being able to enter a username on sites for several reasons.

    1) Both my personal and professional username are unique, and I’ve yet to encounter a situation where are in use by others
    2) I own many of my own domains, and generally use a unique email address on any site I visit, for example: [email protected] – for me this is partly a security measure, and partly to sniff out spam. It’s pretty easy to figure out who’s sold you out in this way.
    3) I personally like the OAauth/OpenID trend, so I can use a login on whichever site without compromising my accounts, or trusting security to some site I don’t know well.

    I really like the other examples, thanks very much for sharing.

  6. Resimleri says

    March 23, 2011 at 1:26 am

    Great Article. Thanks very much.

  7. Lauren says

    March 23, 2011 at 7:19 am

    Great article George! Thanks for sharing. I came across a pretty neat shopping cart recently called (http://InstanteStore.com). They have similar features as what you’ve mentioned and I guess it’ up to the business owners to tweak how they want their online stores to look like. have a go at it if you’re free! Cheers!

  8. A Pie says

    March 25, 2011 at 2:47 pm

    great article, // muy buen artículo

    regards // saludos

  9. Gerard says

    May 17, 2011 at 9:21 am

    Thanks a lot, it will be a very good check list :)

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • What Factors Determine the Best Digital Marketing Agency?
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022