E-commerce UX: An Overview of Best Practices (with Infographic)
A thirtysomething Millennial is shopping for a cool running shoe she spotted on an Instagram sponsored post. She clicks through to the e-commerce site. The site takes forever to load on her mobile—she can’t buy the item without registering, nor can she find the return policy or contact info for customer service. She leaves faster than Usain Bolt can sprint 100 meters.
Milliseconds earn millions. In retail, even a one-second delay in load time can negatively impact conversion by up to 20%.
Even with worldwide e-commerce revenues scaling new heights to the tune of trillions of dollars every year, when it comes to e-commerce UX, shoppers still tend to be considered last. How many billions are lost due to shopping cart and checkout abandonment? Who hasn’t flown into a computer rage because an e-commerce site wouldn’t accept a credit card or a phone number?
Many e-commerce businesses are still focused on the numbers and are typically put together by engineering teams. Sadly, UX continues to be considered as something to be added later. Subsequently, many e-commerce companies with billions of dollars in annual revenue (including some big names) still don’t get the user experience right. If they committed to making their e-commerce user experience more seamless and pleasurable, these giant, billion-dollar names could add even more billions to their bottom line.
Nevertheless, there is light at the end of the e-commerce tunnel. Despite countless online merchants still not being on board with the idea that better UX results in higher revenues, almost three-quarters (74%) of businesses believe that user experience is important for improving sales.
Clearly, there’s much work to be done on the UX front. The executive suite, product management, and developers can be convinced of some e-commerce UX best practices. After all, building the near-perfect e-commerce store is not impossible. Savvy UX designers can align e-commerce site designs around well-researched and time-tested standards and conventions.
By 2020, user experience will replace price and product as the key brand differentiator. – Jonathan Beckman, Founder of Apptourage
Here are some vital e-commerce UX best practices that will elevate the user experience and in consequence give rise to improved sales.
• • •
Further reading on the Toptal Design Blog:
Understanding the basics
What is a mobile first approach?
A mobile first approach means designing for the smallest screen first and then moving up. If a site works well on mobile it will convert more successfully on other devices. Working within the constraints of mobile (eg. screen size and bandwidth) means lean content which leads to a content/user-focused design.
What is e-commerce design?
E-commerce UX design is designing for e-commerce (banking, buying or selling over the internet) sites specifically. A great e-commerce UX design provides superior user experience, takes into account best practices, gives a business an edge over the competition and helps to broaden a brand’s reach.
What is touch gesture?
Touch gestures are hidden controls that let users interact with screen elements using touch. A standard set are: tap, double-tap, drag, flick, pinch, spread, press & tap, press & drag & rotate. Proper implementation of touch gestures will elevate e-commerce UX.
What is form design?
Form design is the creation of web forms (e.g., contact, shipping, registration, etc.) that visitors use to submit their information. Great web form design can help increase conversions, and can directly impact a website’s overall UX including e-commerce UX.
What is an input mask?
An input mask is a database/data entry term and controls what a user can enter in a form field by forcing them to enter data in a specific format. Doing it properly will boost e-commerce UX.
Located in London, United Kingdom
Member since May 20, 2016
About the author
Miklos is a lead UX designer and strategist with more than 18 years of experience in a wide variety of projects across multiple industries.