Ever since the birth of the internet, people have been looking for ways to profit from it. This seemed as simple as making an electronic version of one's brick-and-mortar store. People loved buying things online too, but only some e-commerce stores survived to this day. Why?
In the early-2000s, the expected user experience (UX) online was not set in stone. The World Wide Web was like the Wild West; there were precious few design conventions to follow and designers were unsure of what internet shopping should look like. With JavaScript and Flash came the ability to make your website look any way and act any way you wanted. Often, website designers would try to do things a little differently in a bid to stand out or show they were the cutting edge choice. In hindsight, many of these experiments in online user interaction were a mistake and those companies are no longer around.
Using an established e-commerce platform like Shopify saves you from making many of the mistakes of the past. Shopify and other e-commerce platforms follow specific design conventions that have proven to be the most effective. With an e-commerce platform, you're already standing on a tried-and-true foundation, and all you need to do is tweak the UX for your particular brand, niche, and customer.
A Familiar Interface
A familiar interface that works the way users have come to expect wins out over a flashy design any day. Users feel comfortable on a site that works the way they expect, with buttons and links in convenient places and with very few surprises.
If someone picks up a new phone model and the numbers on the keypad are all in a different order from what they're used to, they immediately consider the phone hard to use. It doesn't matter if it has incredible features; you've already turned off your customers. It's the same with e-commerce stores.
Your e-commerce store must look good, and studies have shown that aesthetically-pleasing websites are subconsciously considered more user-friendly by people. But your store also needs to work well from a user experience point of view and perform in ways that the customer has come to expect from his or her prior internet user experience.
Making Buying Invisible to the Customer
An e-commerce store wins when it makes buying things easy. Stores should strive to make the buying process transparent to the point of being almost unnoticeable. Every interaction with elements on the page should be helping the customer to move towards purchasing in a satisfying, engaging way.
- Every time your website does something unexpected, the customer becomes momentarily confused.
- Every time there's something in the way of them buying the product it gives them a chance to change their mind.
- Every time they have to consider pricing or shipping or taxes or fees, it reminds them that there's 'pain' in a purchase instead of focusing on the 'pleasure' of getting a product they'll love.
Your User Interface Choices
Any Shopify website has three basic user interface groups - input elements, navigation elements, and informational elements.
- Input elements are those that allow your customer to enter details or make a choice. These include text fields, toggles, buttons, and checkboxes.
- Navigational elements allow your customer to move around your website and find to find the things they want. These include sliders, breadcrumbs, pages, and search fields.
- Informational elements give your customer information about the buying process. Notifications, tooltips, progress bars, and pop-ups all inform the customer in different ways what they need to do.
Choosing the right combination of these user interface elements and placing them correctly in your sales funnel is how you create the perfect user experience. How you place things on each page makes a great difference in how the user interacts with it. It's also one of the hardest things to do in your store, so you will find yourself making small changes to your user interface on an incremental basis.
Each page needs to be considered on its own as it's designed to do a different thing. Someone who has reached your homepage for the first time is in a different frame of mind than someone who has chosen a number of products and has reached the checkout. Each of these steps in the process must be carefully designed and tweaked.
For brevity, we'll discuss the four most important steps your typical customer will go through between reaching your Shopify site and making a purchase and the UX considerations of each.
1 - First Impression
Arguably the most important user experience is the one they get when they first hit your site. They may come to the home page, to a specific landing page you've built, to a product page, or a catalog listing. The first impression you make on all pages counts.
Making Things Obvious
Someone reaching your site for the first time must be able to instantly understand what they're seeing and how to use it. If they land on the home page, is it obvious how to dig deeper into the product category they are interested in? If they land on a product page, is it clear it's a product page and they can browse to other products in the same or similar category? If they want to go ahead with a purchase, is it obvious how they can do that?
Entice Readers to Venture Below the Fold
The user will make a split-second decision about whether they're going to stay at your website. The most important screen real estate is, therefore, the above-the-fold space - the space on the page before the user needs to scroll. Make every attempt to encourage scrolling down the page by making your above-the-fold space pleasing and intriguing. Further down the page, after they've learned more about the product(s), can you add a call-to-action, a next step to perform.
Familiar and Simple
As advised above, the general layout of your Shopify pages should be logical and clean. As the user scrolls down the page, they'll see the same general layout with some visual breaks (such as swapping images from left to right). It's comforting to know what to expect and makes it all the easier to concentrate on the message.
Make Text Work for You
Despite what writers might wish, the text on the product page is one of the least important things when it comes to actually making a sale. Buyers these days have no time to read through huge blocks of text and they're much more likely to skim through a page until something catches their eye.
Break large bodies of text into manageable chunks. Use formatting to highlight important words.
Avoid text filled with jargon. You might assume that putting in hundreds of buzzwords makes your company look smart or cutting edge, but it's just obfuscating the value you offer to the reader.
Break down what you can offer the reader in simple terms and back it up with proof, and they're much more likely to proceed to the next step.
2 - Navigation
As discussed above, people expect your site's navigation to follow basic principles they've become used to. If in user testing you notice some people are finding it difficult to get from point A to B on your site then you need to fix it.
The navigation system should be logical, justified, and easily identified. Don't be coy with menu names or link titles; let people know what they're getting if they click on a user interface element and make commonly searched for items easy to find.
Call-to-Action Buttons
Your call-to-action buttons denote actions that you want the customer to take. Common examples would be 'Buy Now', 'Follow on Twitter' or 'Join Newsletter'.
Differentiate your call-to-action buttons from navigation buttons. Make them clearly defined, instantly recognizable, and well-positioned. Different call-to-action groups should be labeled as such too; buttons which concern purchasing should be one style, buttons that concern special offers another, and buttons for getting additional information another, for example.
This way, your buttons' styles can serve as a shorthand for getting around the site.
3 - Search
Search bars are prominent on most Shopify stores because when done right they're a goldmine for conversions. Anyone who enters details into a search bar is looking for something in particular. They're a motivated buyer, and it's your job to offer them exactly what they've searched for at a reasonable price.
Search bars need to be prominently placed and styled obviously as a search element. They're so important that it's worth styling them in a contrasting color to the rest of the page so they pop out in the design.
An advanced search, search filter, or search customization should be available for users who want to narrow down their search even further, but there are multiple ways to accomplish this.
4 - Checkout
The checkout process is where a lot of user interaction comes into play and it's where many Shopify stores lose their customers at the last hurdle. The best design for your checkout depends on how complex your products and services are.
For simple products and services where you don't need to ask the customer a lot of additional questions, a one-page checkout can work. It can be tough to do without asking too many questions at once and giving the user too many places where they can make a frustrating mistake.
Multi-page checkouts are the norm now, though you should be able to keep your checkout process to 2-3 pages. Dividing the checkout process into login, payment/shipping, review, and confirmation will make the process easier but not feel too dragged out.
People expect a lot from an e-commerce store checkout process, so you'll need to ensure you offer it all or you'll lose customers along the way.
- Simple login - Offer multiple ways to login such as using social media or email. Whenever possible, reuse login details and don't ask people to ever enter the same information twice.
- Easy payments - Offer multiple ways to pay. Display the logos of payment gateways and credit cards prominently so people reaching the payment page can instantly confirm you take their preferred payment method.
- Money-back guarantee - It's at this point that people begin thinking 'what if something goes wrong?' The prominent display of a money-back guarantee or free refund will allay these fears.
- Security seals - The user is possibly about to enter their credit card details. Pulling out their credit card is the one time that most people think about security online, so display security seals that show your website is safe to use.
- Save to cart - People back out of purchases for all sorts of reasons. Maybe they just wanted to see if you were going to tack on additional fees before completing the purchase and they still need to think about it? Maybe they want to add another product to the basket first? Instead of letting them get away that easy, a save to cart feature allows them to store the purchase for later.
Post-Conversion
Don't rest on your laurels just because a customer has clocked on your CTA. Consider that that first step in encouraging a long-term relationship. The page after the conversion can offer free downloads, links to resources on your site, encourage referrals from friends, social media shares, or recommend products.
At this point the customer is warm to your company, so do what you can to make their experience even better offering extra value.
User experience is central to e-commerce. You have to think about it as a whole and also break it down into each step of the process. From the foundation that Shopify gives you, make every single step of the journey a joy for your visitors and you'll be on the road to success.
Cover image by Alvaro Reyes on Unsplash
