10 Tips for Designing a Great Web Storefront
Entrepreneurs and brick-and-mortar retailers looking to expand into online shopping have more options available to them than ever, but they also have more website considerations and technical options to decipher, too. Building an effective web storefront still has turnkey providers, such as Wix Stores , that can make popping up your initial presence quick and simple. But those who are really serious about growing their online businesses will find that their needs evolve beyond these turnkey services fairly quickly.
There are many questions to answer first before anything actually shows up in cyberspace and then much more as the business matures. Data gathering on customers is a great example, and a major question today, especially for any stores looking to access European markets. Currency conversion and differing e-commerce laws are still thorny problems in those markets, but now you'll also need to deal with the General Data Protection Regulation (GDPR), which requires a much more careful handling process for customer data.
Transaction security is another key question because it means balancing the need for customer safety with how many hoops you'll require them to jump through before they can make a purchase. And no matter what decisions you make for your standard website, you'll need to have the same discussions for its mobile iteration. Because, while mobility was certainly one of last year's darling buzzwords, the extra 12 months have in no way lessened its importance.
Current thinking designates that web builders must design the mobile experience first and then adjust the desktop experience as needed.
"Every element, every piece of content, must be functional on mobile," said Jimmy Rodriguez, Chief Operating Officer (COO) at 3dcart . "If you're starting from scratch, you design for mobile. With responsive design, you can build the website to start on mobile and then bring it to the desktop."
To help you design your e-commerce storefront for both mobile and desktop users, we've compiled the 10 important tips below. However, Rodriguez recommends that, before businesses incorporate any of them into their storefronts, they should A/B test these features on specific product pages to see how they do before rolling them out onto their entire website.
1. Sticky Header Navigation
We've all been there: We've scrolled down to the bottom of a product page to read user reviews or product details and now we're ready to leave the page to get back to the menu to continue our shopping journey. Unfortunately, in order to get back to the menu, we've typically had to click the "Page Up" button on our desktop keyboards or tap at the top of the screen on our mobile devices.
With Sticky Headers, as you scroll down, the menu resizes and adjusts. The menu follows you along your journey to keep the navigation on the screen should you need to quickly jump pages. You can see this in effect on Bose.com. Despite being midway through the page, you're still able to access the page's main navigation without having to head back to the top of the screen.
2. Hamburger Menus
Although Hamburger Menus sound like a feature best-suited for fast-food restaurants, they are quickly becoming a must-have for companies that do a lot of business on mobile devices. You've seen them before: Hamburger Menus have become the standard mobile icon for mobile navigation and menus.
They feature three horizontal lines that, when pressed, offer a drop-down menu of a website's navigation. They are particularly useful on mobile devices where screen real estate is at a premium. But we're starting to see them on desktop websites as well, so consumers have a similar experience on company websites regardless of the device they're using.
"A lot of people see Hamburger Menus and they know what it means, but they don't know it's basically the new standard," Rodriguez said. "Mobile visitors have learned the meaning of this symbol, and websites should embrace it as a standard for mobile navigation."
You can see a Hamburger Menu on the upper-right hand corner of Target.com and on Target's mobile website. You can also see it pictured below.
3. Parallax Scrolling
Less of a functionality feature and more of a way to improve your website's aesthetics, Parallax Scrolling takes advantage of big banners that are full of high-resolution imagery in order to add an artistic flair to your website. By taking advantage of large, full-width images, you can create a displacement effect between your website's background image and the image that's directly in front of your consumer.
As you can see in the image below from RimmelLondon.com, as you scroll down the page, the website's background images changes. However, the change occurs subtly as the background and foreground images blend into one another. The screenshot below shows the website right at the moment when the background image changes from purple to pink.
4. Infinite Scrolling
Infinite Scrolling sounds more like a torture technique than it does an e-commerce feature. However, this nifty tool lets your users continually view new products without having to click into and load a new page. Here's how it works: When you scroll down to the bottom of an e-commerce page, the page automatically loads more items at the bottom of the page. They're still catalogued as pages on the back end but the visitor doesn't know that.
You can see a similar feature on UnderArmour.com. Unfortunately, Under Armour requires you to click the "Load More" button to see additional content. Some websites are equipped with an auto-open mechanism that will show you more content without requiring a click.
5. A Floating "Add to Cart" Button
Similar to the Sticky Navigation tool, floating "Add to Cart" buttons let your consumers add products to their shopping cart regardless of where they are on the product page. Previously, users would scroll down to user reviews, product details, and other lower-page elements and, in order to add the product to their cart, they would have to scroll back to the top of the page. Now, companies such as Diesel.com let you see the product's price, quantity, color options, and image as well as the "Add to Cart" button, regardless of where you are on the product page.
6. Use Fitts' Law
We won't bore you with the mathematics behind Fitts' Law, but it's essentially a theory that the larger and closer an object is to us, the more likely we are to interact with it. The same basic principle can be applied to e-commerce. If you want to guide users to product pages, shopping carts, and promotions, then you should make those buttons large, colorful, and as close to the center-middle of the page as possible.
If you ignore Fitts' Law and you place tiny, black-and-white buttons along the rails or at the bottom of pages, then you may lose out on potential purchasers. Don't make this mistake.
7. Display Customer Reviews and Testimonials
You don't want customers coming to your website, viewing your products, and then heading to Amazon.com to check user reviews. After all, Amazon.com may sell the product cheaper or the customer may prefer the Amazon.com shopping experience to your website's.
If you give your customers the ability to rate and review products, then you'll be able to fend off those cautious customers who need the assurance of other consumers' opinions before making a purchase. Most e-commerce tools make ratings and reviews easy to implement so don't shy away from implementing this practice.
8. An Effective Customer Service Desk
Engaging with your customer is critical to retail success, and nowhere is it easier or more effective than at the customer service desk. Taking proper care of an irate, dissatisfied, or even just confused customer is one of the surest paths to repeat business. Today's service desk and helpdesk applications make it easier than ever. Using one of these apps not only organizes customer requests, it also lets you grab the customer and response data that these encounters generate and pipe them to your customer relationship management (CRM), marketing, and business analytics engines. Doing this lets you keep a closer eye on what customers think of your store and its products.
Where you place your customer service anchors and touchpoints is important to the overall customer experience. And whether this interaction takes the form of a simple Contact page, or goes so far as to open a chat window with anyone remaining on the website for more than 60 seconds, is something that depends on the types of products you're selling and the average website visit statistics for your store.
But making a customer service desk a success is about more than software. You've got to make sure that someone professional is there to deal with these requests or it's a wasted investment. Customers who have gone to the trouble of clicking a "Contact Customer Service" button expect to get some live help from an actual human. You can manage this through the phone or via instant chat, a feature that's becoming more common with helpdesk service providers. And if you're strapped for staff, you can front your customer service operation with intelligent chatbots that "sound" human, while being able to handle a deluge of incoming requests on a basic level, handing off only the more complex requests to actual homo sapiens.
9. Breadcrumb Checkout
When customers check out of your store, they like to know where in the process they are, how far from finishing they are, and how to easily go back without losing all of the data they already entered. Breadcrumb Checkout shows customers exactly where they are in the process by utilizing a linear navigation button design that lets consumers click forward and backward from Sign-In, Payment Options, Shipping Options, Place Order, or Continue Shopping. Without this layout, consumers may press the Back button, see that their information isn't logged, get frustrated, and then leave the website.
10. 360-Degree Views
Ever purchase a seemingly modest jacket online only to realize it's got a bedazzled-rhinestone back? Well, when you returned that product, you wasted your own time and the vendor's time, and you cost the company money. Don't worry, it wasn't your fault. More than likely, the vendor only had front-view and side-view images of the jacket. Had the vendor offered 360-degree view images, you would have spotted those rhinestones and clicked the Cancel Order button.
Don't make this same mistake on your own website. In addition to letting customers zoom in on images, give them the option to rotate or view multiple angles of the image, just like Kenneth Cole.com does. This way, they're not surprised when they open the delivery box and pull out a product they weren't expecting.
This article originally appeared on PCMag.com.