The Complete Guide
to
Ecommerce Web Design

Your Game Plan for Designing an Online Store to Today’s Best Practices

Designing an online store is no simple task. You’re not just building a website, you’re creating an immersive online shopping experience that influences visitors to become customers.

In this comprehensive guide, we’ll outline the new design best practices that your ecommerce website must incorporate in order to thrive. In doing so, you’ll have a website that can effectively retain traffic and drive online sales.

What’s in this Guide?

You will get wireframes for ecommerce page types: homepage, category page, subcategory page and product page.

You will learn how and where key elements of common ecommerce page types should be positioned and styled to influence conversions.

You will walk through an optimized checkout process.

You will learn how your online shopping experience needs to adapt to mobile devices.

 

Table of Contents

 

Chapter 1 – Header & Footer Design

Your header is the navigational hub of your online store. It must intuitively guide visitors to their desired destination or else you won’t find many people purchasing product.

Like the header, your footer is also an important navigational area. However, it should focus less on products and more on establishing credibility with your site’s visitors. It’s useful for freeing up clutter in the header so that there are no distractions from the online shopping experience.

Ecommerce Header & Footer Wireframe

ecommerce header footer wireframe

1

Company Logo

Display your logo prominently in the upper-left corner. This is done not only to reinforce your brand on every page of the website, but it also provides an important navigational link back to the homepage.

2

Search Bar

30% of visitors to your ecommerce site will use site search, according to eConsultancy. A search bar has the power to improve your site’s usability, thereby increasing sales.

Not only should your site’s search functionality provide relevant results, but it must be designed so that visitors can quickly find and use this navigation option.

walmart.com ecommerce header

  • Make your search bar difficult not to find. Just look at the real estate that Walmart gives its search bar.
  • Use obvious calls-to-action (CTAs) in the search button. Popular options are “Go,” “Search” or a magnifying glass icon. Also, give your search button a strong accent color so that eyeball are drawn to it.

tigerdirect.com ecommerce header

  • Let people know what they can search by placing helpful text inside the search bar (e.g., “Search by category, product name or keyword”).
3

Shipping or Return Offer

Break down a common barrier to purchase and establish immediate credibility by displaying your best shipping or return offer.

For first-time visitors, seeing a free shipping or return policy reduces the risk of buying from you and gives them the confidence to continue navigating your ecommerce site.

bed bath and beyond ecommerce header

Bed Bath & Beyond displays their shipping offer in the middle of the header. Other popular options are to position this messaging in a thin, but boldly colored bar at the top or just below the main navigation.

4

Account and Cart Access

People expect to see their account and cart links on the right side of the header, so that’s where you should place them.

best buy ecommerce header

Like Best Buy, it’s helpful to include a cart icon. Whenever products are added to the cart, the icon or text should display the number of items that have been added.

5

Customer Service

Visitors also look to your header for customer support. Again, it’s generally expected that these links appear to the right of the main logo.

sierra trading post ecommerce header

Include your customer service phone line and any other options that your customers have for getting help with their search.

6

Main Navigation (Mega Menu)

You can get an idea of what a mega menu is just by its name. It’s a large-panel drop down menu that typically organizes items by category. Ecommerce websites with large catalogs have found that mega menus are a great way to facilitate navigation without overwhelming visitors visually.

Your top-level menu items are your broadest product categories. Hovering over these menu items reveals an interface that groups products or subcategories by subcategories.

rei ecommerce header

The large interface of a mega menu panel also leaves room for CTAs. You can influence visitors to select a particular subcategory or take advantage of special offers or sales. REI likes to promote specific products in their mega menu.

7

Site Navigation

Your footer should feature a sitemap of the main sections of your ecommerce site. This is provided so that a visitor doesn’t need to scroll all the way back to the top to navigate to another area of the site.

zappos ecommerce footer

8

Company Links

Anything not directly related to the online shopping experience should be moved to the footer to free up clutter in the header. This means that resources for job opportunities, company news, PR, affiliate programs and more should be contained within your site’s footer.

9

Customer Support & Additional Services

Additional customer support should be featured in the footer. Include links to your ordering, shipping and return policies and any related FAQs.

best buy ecommerce footer

You can also include trust badges, like Best Buy above, to reinforce your secure online shopping experience.

10

Newsletter Signup & Social Links

Include your newsletter signup form and any social links in your footer.

11

Boring Legal Stuff

Terms of use, privacy policy, tax information, copyright notices and any other related policies should be linked to from the footer.

RETURN TO TOP

 

Chapter 2 – Homepage Design

An ecommerce homepage has probably the fewest agreed upon design best practices of any other page type we’ll go over in this guide. While your homepage likely attracts more entrances than any other page on your site, it probably gets less attention for it’s contribution to the overall shopping experience than it deserves.

With most ecommerce homepages you’ll find a big image, some CTAs, featured products, featured categories, credibility indicators and some tools and resources for buyers. The homepage becomes a sampling of all the areas of the entire site, which is very easy to create.

All of these elements, however, are competing for a visitor’s attention. While the intention is to get them to go deeper into the site, the mixture of offers, promotions, and resources can be distracting and lower site engagement.

The lesson here is that less is more. Don’t cram your homepage with images, CTAs and links for the sake of it.

Take a look at Patagonia’s homepage below. While this is an extreme example of a minimal homepage, the options and messaging are limited, making the next possible actions very clear.

patagonia homepage

You can either shop or learn about their environmental and social responsibility. It’s not possible to scroll down any further. Compare Patagonia to GameStop’s homepage below.

gamestop ecommerce homepage

Feeling overwhelmed? Follow Patagonia’s lead and strive to create a homepage that clearly outlines the next step a visitor should take without dividing their attention.

Ecommerce Homepage Wireframe

ecommerce homepage wireframe

1

Featured and Supporting Images

Your featured image will be the largest section of content on your homepage and likely the most engaging. It can be a slider, but I prefer crisp static images that are changed out frequently, like Mountain Hardwear’s homepage above.

mountain hardwear featured image

However you choose to display your featured image(s), it must meet the following criteria:

  1. Highly relevant to your audience and the product(s) being promoted.
  2. High resolution so that image quality isn’t sacrificed on large screens
  3. A single CTA that is actionable. Don’t use generic language like “Learn More” or “See How.” Tie your CTA to the product or offer to elicit an action, such as “Claim Your Discount” or “Shop the Fall Sale.” Your CTA should also stand out visually from the background image and any other text being used.
  4. Brief messaging that overlays the image and describes the product and associated offer.

marmot homepage imagery

You can support the featured image with smaller images to promote other popular categories or products. I recommend sticking with the rule of three on this one so you don’t divide a visitor’s attention among too many elements.

Supporting images are commonly positioned to the right or below the featured image and contain a CTA or description of the destination page.

2

Featured Products

You can feature popular products or sale items on the homepage. However, I’d only recommend doing so if you have just one featured image without any supporting images.

dicks sporting goods ecommerce homepage products

A great middle ground is to display top products by their subcategories. Dick’s Sporting Goods advertises three product subcategories, each with a relevant image, in place of bringing in a feed of products.

When you’re designing your homepage, don’t fall into the trap of content cramming that has become so common with conventional homepages. Remember these four letters, K.I.S.S. – keep it simple stupid.

RETURN TO TOP

 

Chapter 3 – Category Page Design

Your main category pages are often the first or second page your visitors encounter in the conversion funnel. They’re an important gateway for driving traffic to your site and getting visitors on the path to product pages.

Category pages serve many purposes:

  1. They are a logical step in the navigation from the homepage or another category page to subcategories and onto product pages.
  2. They function as landing pages for search traffic. Generally, the keywords driving traffic to these pages would be described as investigative. These searchers are conducting specific research and, while they are not quite ready to purchase, they are one step away from a transaction.
  3. They introduce the website’s catalog and showcase products.

For these reasons, you should treat your category pages like individual home pages. The information on this page should pertain only to that category and the messaging should be tailored to move visitors into a subcategory. Maintaining buying momentum is essential at this stage of the conversion funnel.

Ecommerce Category Page Wireframe

ecommerce category page wireframe

Remember that this is likely the first or second page that a visitor has encountered on your site. You still need to send encouraging signals that they’ve landed on a credible website and that there is little risk involved in buying product.

1

Shipping and Return Messaging

Immediately strike down some of the most common reasons for inaction on an ecommerce site. Make your (hopefully) favorable shipping and return policies loud and clear.

duluth trading company ecommerce category page

Place these value propositions at the top of the page, but avoid taking up too much real estate.

2

Image (size and context)

Give your visitors instant validation that they’ve arrived at the right page. Relevant imagery gives visual confirmation of this.

north face category banner image

Don’t just show pictures of the product. Try to create an emotional connection with your audience by showing the product in use.

Be sure that you avoid a common pitfall of banner imagery call the “false bottom.” A false bottom occurs when an image takes up the entirety of the above-the-fold content container, leading visitors to assume that the bottom of the image marks the end of the page.

macys ecommerce category page false bottom

Macy’s category pages appear to be creating a false bottom at certain screen resolutions. The combination of the two promotional offers and the two banner images pushes product below the fold and out of view of the visitors.

So keep your banner images to a modest height and QA your category pages on common screen resolutions to make sure that you’re not creating a false bottom.

3

Category Title and Messaging

Whether it’s above, below or within your banner image, it’s a good idea to make the your category title pop. Again, the goal here is to give visitors instant validation that they’ve arrived in the right place.

best buy ecommerce category title messaging

If it’s appropriate, include some messaging that’s relevant to the category. Keep this copy brief.

4

Subcategory Navigation

On the left side of your category page, include a vertical menu of subcategory links. This placement is influenced by the F-shaped pattern for consuming web content. Eye-tracking studies have found the website users will scan the top of the page horizontally before moving vertically down the left side of the page.

You’re placing the desired next step, to move into a subcategory, directly in the path of visitors’ eyeballs. Organize your subcategories by popular categories, such as brand, style, technology and more.

5

Subcategory Display

Below your category’s banner image, display its subcategories. Organize the subcategory sections into rows of three.

best buy subcategory display

If you have a lot of subcategories, you can list them out as hyperlinks like Best Buy does, or you can apply the 80/20 rule and only feature your most popular subcategories here.

6

Featured Products

Your main category page is a great place to feature a small selection of products. Decide on which selection of products would be most relevant to your audience.

  1. Top-selling items
  2. Most popular items
  3. New arrivals
  4. Personalized recommendations

Whichever you choose, keep it limited to 3 – 5 products displayed at one time.

7

Content

Category pages make great landing pages and can perform very well in organic search results. But this won’t happen unless you have content to support the purpose and context of the page.

zappos category page men's shoes seo content

Zappos applies this tactic to their category pages.

To improve the search engine optimization of your category pages, write unique and descriptive copy that describes the overall category, its products, uses for the products, brands, etc. Incorporate these suggestions for category pages that will drive high quality traffic to your site.

  1. Write at least 500 words.
  2. Don’t be spammy, be helpful. Give your audience content that is actually a resource for their decision-making process.
  3. Build internal links, but don’t overdo it. eBay received a harsh penalty from Google in May 2014 in part for their practice of creating tons of poor internal links.
RETURN TO TOP

 

Chapter 4 – Subcategory Page Design

Your ecommerce website’s subcategory pages are where the bulk of the online shopping experience takes place. This is where visitors view, sort and filter products to their liking, before settling on the product that is right for them.

By empowering your visitors to customize subcategory pages to their individual preferences, you’ll be able to efficiently move them to the next stage of the conversion funnel – product pages.

Ecommerce Subcategory Page Wireframe

ecommerce subcategory page wireframe

1

Shipping and Return Messaging

Like category pages, you want your subcategory pages to feature customer service messaging at the top of the page.

2

Image

Some ecommerce sites do away with the banner image for this page layout, but my preference is to keep them in as long as they don’t distract from the products.

duluthtradingcompany.com subcategory page

See Duluth Trading Company’s use of banner imagery on their subcategory pages above.

3

Subcategory Title and Messaging

If you decide on not going with a banner image, make sure that you still include a strong subcategory title and perhaps some brief, yet descriptive copy.

4

Horizontal Filter

Give your visitors as much power to customize the product display as you can. They’ll thank you with purchases.

bestbuy.com horizontal filters on ecommerce subcategory page

The horizontal filtering option should include:

  1. Sort functionality by price and popularity. You can also add options to sort by customer rating and new arrivals.
  2. An indication of how many results are displayed and the total results for the current filters. You can also display option to specify how many products should be shown at once.
  3. If your products run multiple pages, include pagination navigation buttons.
  4. (Optional) Some ecommerce stores allow visitors to display products either in a grid or list format.
5

Product Display

Let’s get to the actual display of your products and understand what you need to include to entice visitors to click.

amazon.com shoe product image subcategory page

  1. Display 3 – 5 products across the page.
  2. The primary product image should accurately depict the product.
  3. Price should stand out the most amid the text appearing below the product image. If the product is on sale, pull in the list price for comparison.
  4. Show the product title below the price.
  5. Bring in the customer rating for each product. If you have a high number of reviews, pull in the quantity as added credibility.
  6. If free shipping is applicable, let your visitors know.
  7. If the product comes in more than one color, display tiles that can alter the product image.
6

Left-Side Filters

zappos.com left-side filtering options
Sometimes, the horizontal filter is not enough. Bring in advanced filtering options with a vertical layout on the left side of the page.

Your options here are only limited to the number of attributes that you can assign to your products. Popular filtering options are:

  1. Price and sale discount ranges. Include both defined and custom ranges as options.
  2. Product size, color, features, brand etc.
  3. Clearance, sale or regularly-priced items
  4. Average customer rating.
RETURN TO TOP

 

Chapter 5 – Product Page Design

If you’re getting your visitors this far, then congratulations! But there is still a long way to go. An effective product page must do the following:

  1. Limit clutter to focus attention on adding items to the cart.
  2. Build credibility in your ability to successfully deliver a high quality product.
  3. Satisfy frequently asked questions about the product to earn trust.
  4. Keep visitors on the site even if a particular product is not for them.
  5. Product pages are where the purchasing decision happens. It’s not where the transaction takes place, that’s covered in the next chapter. But, influencing visitors to become customers relies heavily on the design of your ecommerce product pages.

Ecommerce Product Page Wireframe

ecommerce product page wireframe

1

Breadcrumbs

Breadcrumbs are helpful for both navigation and SEO. They let visitors know where they are in the hierarchy of the website and provide quick links to move back through the site.

They also create an internal linking structure that helps search engines understand the relationships between your category, subcategory and product pages.

2

Product Title

A product page’s heading should be the product’s full title. By positioning the title above the image, either aligned left or aligned center, your visitors will instantly know that they’ve landing on the right page.

zappos.com shoe product page

You’ll notice above that Zappos displays the customer rating below the product title. The is a suitable alternative for our recommendation of placing this below the product price.

3

Product Imagery

Make the main image big! You want the product to look like it’s jumping off the screen. Give visitors the option to zoom in on the product to inspect materials, design or other features of the product.

Provide alternate views of the product that visitors can easily cycle through. Display these as clickable thumbnail images either below or alongside the main image.

6pm.com product page sizing

I find it extremely helpful when ecommerce sites, like 6pm.com, have an alternate image that tells you the size of the product on display. This really comes in handy if you’re shopping for clothing and want to know how a particular size fits.

zappos.com product page alternate images

Show your potential customers what the product looks like in action. Zappos creates videos for their shoes so that you can see what they look like being worn and used.

You’ll commonly find social sharing buttons below the main image, in the buying area, or not at all. If you are introducing social sharing options to your visitors, I’d suggest that you keep them away from the “Add to Cart” button. Remember, we don’t want to distract users from taking this action.

Introducing the Buying Area

Before we cover the individual elements of the buying area on the right side of the wireframe, there are a few points of note. This sections is where you want to be bringing the eyeballs. To encourage this, I recommend making the buying area visually distinct from other areas of the product page.

columbia.com product page buying area

This can be done by just by making the elements below stand out, or you can follow 6pm.com’s lead give the entire area shading or it’s own background color.

4

Product Pricing

Like the main image, make the product price big. It should be the largest font size used in the buying area.

Give the price a distinct color, especially if you are showing a sale price.

  1. Tell visitors how much they will save, either in percentage discount, real dollars or both!
  2. Display the list price in a neutral color so that the sales price has even greater emphasis.
5

Customer Rating

88% of consumers consider online reviews when purchasing a product online, according to a study conducted by Reevoo. This makes a product’s customer rating an essential element of a product page.

6

Brief Product Description

Write brief benefit-driven copy about the product. How does this product solve a consumer’s problem?

I would only suggest this if your product doesn’t require selecting from multiple options (size, color, etc.) to add an item to the cart. Otherwise, your buying area might get a little busy.

7

Options and Quantity Selection

In the interest of limiting the number of steps a visitor must complete before adding an item to the cart, you’ll notice that many ecommerce sites have done away with the quantity toggle. They now assume that you want just one of a given product, but give you the opportunity to add more once that item is in the cart.

dsw.com product selection options

For products that require choosing a size and/or color, a thumbnail layout (e.g., see the DSW example above) is a nice alternative to a text dropdown.

  1. You can gray-out size/color combinations that are out of stock, instead of notifying the customer after they’ve made a selection.
  2. You can visually display a color, instead of assuming that visitors will know what color “Fuschia / Cement” is.
  3. Including a size guide or chart is especially useful for apparel.
8

Add to Cart Button

Of all the elements on your product page, this one should stand out the most.

  1. Use the full width of the buying area for this button.
  2. Use a color that contrast the color scheme of your website.
  3. Rounded edges or shadowing can make the button “pop” and make it appear more clickable.
9

Additional Messaging and Trust Indicators

A theme that has been continual through the design of all the page types we’ve discussed thus far is building consumer confidence in your ecommerce site. Remind them that you are a trusted online store that:

  1. Keeps their private information secure.
  2. Guarantees satisfaction, as evidenced by your return policy.

Adding a couple small badges near the Add to Cart button can go along way in conveying credibility.

Another extremely useful tactic is to introduce urgency into the buying decision. This can easily be done in the following ways:

  1. Show remaining inventory
  2. Include a countdown that either lets potential customers know when they must order the product to receive it by a certain date, or shows the time remaining for a time-sensitive sale price.
  3. If the product qualifies for free shipping, include this messaging. Let visitors know the expected delivery date.

theclymb.com product page

The Clymb, a membership-based sales site, incorporates a couple of these suggestions into their product pages.

10

Detailed Product Description

For your visitors that are not immediately ready to purchase a product, give them the information they will need to make an informed decision.

Discuss the product’s use, dimensions, weight, materials, safety precautions and other technical features in detail. There is also an SEO benefit in doing so (check out our ecommerce seo guide for more tips on increasing the visibility of your online store).

Include a full explanation of your shipping and return policies to reduce the risk of purchasing the product from your site.

bestbuy.com laptop product description

A common way to organize all of this content is to divide the content into tabbed sections, like Best Buy above. The product overview should be the default tab selected.

11

Product Reviews

Some ecommerce stores include full product reviews with the tabbed product description, but I recommend creating another section for this content.

These features of customer reviews make them more engaging and resourceful for potential customers that are sitting on the fence.

  1. Include sorting options so that visitors can sort by date and relevance.
  2. Ask visitors that are reading reviews to indicate whether or not they are helpful. This will help to ensure that useful reviews are displayed more prominently.
  3. Get customer feedback, but also ask them to rate various features of the product, such as fit, appearance, quality, etc.
12

Cross-Sell and Up-Sell Area

Suggest product alternatives so that visitors are encouraged to continue shopping even if they haven’t yet found the product that is right for them.

Show products that were also viewed or bought after viewing the current product page, popular products or personalized suggestions based on a visitor’s browsing tendencies.

RETURN TO TOP

 

Chapter 6 – Checkout Process

Now that we have items in the cart, the hard work begins. According to Barilliance, an ecommerce data company, cart abandonment rates have steadily increased year-over-year to 74%.

Roughly three out of every four carts that contain product will not make it through the checkout process. Why? According to a June 2013 survey by the Baymard Institute, the top reasons for cart abandonment are as follows:

ecommerce reasons for cart abandonment from baymard institute

To combat these reasons for cart abandonment, our checkout process must exhibit the following qualities:

  • Transparency – show or estimate the total price of the transaction up front.
  • Obstruction-Free – don’t put up any barriers on the way to the “thank you” page
  • Trustworthy – create a secure environment when requesting private information
  • Simplicity – limit the number of steps to only those that are absolutely necessary
  • Accommodating – offer enough options to cover nearly all popular shipping and payment preferences

Ecommerce Checkout Best Practices

Assure Customers of their Order in the Cart

Validate for the customer that they’ve added the right items to their cart. Clearly display the following:

  1. Product photo
  2. Product title
  3. Product attributes (size, color, dimensions, etc.)
  4. Item Price
  5. Item Quantity
  6. Subtotal

zappos.com ecommerce cart

The cart is also your last opportunity for any cross-sells or up-sells. Don’t bombard the customer with offers, but it’s fine to suggest items that complement what they’ve added to their cart.

Confirm the TOTAL Price

Confirm the total price of the order. Include actual or estimated shipping costs, taxes and any other fees with the total price. That way you can nip the number one reason for cart abandonment in the bud.

Have Obvious Cart Navigation

Your cart should have two navigational options: Continue Shopping or Proceed to Checkout. Obviously, one needs to stand out over the other.

theclymb.com my cart

The Clymb does a good job making their checkout buttons stand out from all other elements within the cart.

Assume Guest Checkout

After selecting “Proceed to Checkout,” many ecommerce sites give users the option to sign into their existing account. Some force you into creating an account. This is the second most common reason for abandoned carts. Here’s exactly what you don’t want to do:

6pm.com no guest checkout for their ecommerce checkout process

In this example, 6pm.com is not offering a guest checkout option. They’re requiring an existing account or account registration. They may be losing upwards of 23% of potential customers at this step.

To contrast this approach, Sony takes you straight from the cart to collecting your address by assuming that you prefer guest checkout.

sony.com checkout page

Returning customer still have the option to sign in at this step. Why do I prefer this approach?

  1. Sony is not alienating the 23% of online shoppers that don’t want to create an account on every ecommerce site they visit.
  2. Sony is eliminating a step from the process. By removing the choice between logging in, creating an account or proceeding as guest, they’re moving customers closer to purchase.

Sony is creating an obstruction-free checkout, a trait we deemed essential in the introduction.

Limit Distractions and Make Your Checkout Process Clear

Some ecommerce stores do a one-step checkout while others break out steps into digestible chunks. Both have been proven to be effective as long as you remain clear as to where a customer is in the checkout process.

Referring, once again, to Sony’s checkout process, you’ll notice that they remove their site’s main navigation from the header. This keeps the customer’s focus on the task at hand.

sony.com simply checkout navigation

They also linearly display each step of their checkout process at the top of the page as well as highlight the current step you’re on to track your progress.

In this example, the checkout navigation is simple and transparent. Two of the qualities we discussed in the introduction of this chapter.

Cut Down Form Fields

There’s nothing more daunting to an online shopper than a ton of empty form fields. Keeping your fields limited to only the information required to complete a purchase is the best approach to make this a non-issue.

Here are some other ways you can encourage your customers to provide their information:

  1. Use a one-column layout so that customers can easily tab down to the next field.
  2. Auto-detect field errors as customers are entering the information, rather than waiting until they hit submit.
  3. Auto-populate the shipping address as the billing address.
  4. Auto-detect the credit card brand based on the first four numbers they enter.
  5. Reinforce the item and total price at each step.
  6. Don’t attempt to up-sell or cross-sell a customer that is already in the checkout process.
  7. Remove the promotional or discount code field. Customers will leave in search of a code and may be discouraged if they don’t find one. If it’s required, make it a small text link that reveals the field.
  8. Make the “Next Step” or “Purchase”  button visually distinct from any other element on the page. Clearly direct the customer to take this action.
  9. Include copy and badges that indicate a secure shopping experience.

sony.com ecommerce checkout review page

Sony’s simple checkout process keeps out clutter and unnecessary steps to efficiently guide customers to purchase product. Aim to replicate their approach in your checkout process.

RETURN TO TOP

 

Chapter 7 – Mobile Ecommerce Design

Smartphone traffic to ecommerce sites grew by 120% in the past year. Tablet traffic grew by 35%. Desktop traffic, meanwhile remained flat. If that tells you anything about ecommerce web design, it’s that you need to create a seamless experience between all device types.

In terms of dollars, the Baymard Institute has tracked mobile ecommerce revenue at a 45% annual growth rate that will hit $204 billion in 2014.

Taking a look at when different device types are in use will help us to understand why having mobile responsive design has become so vital today.

desktop mobile and table device use by time of day

Mobile devices are in peak use during the morning hours. People are likely checking their emails and getting caught up on the news. PC’s see most of their traffic during the working day when most 9 to 5ers are at their laptop or desktop. Tablets are the device of choice before bed.

If you think about how an online shopper might interact with your site throughout the day, consider this scenario:

  • A customer of yours is perusing their email on their iPhone as they enjoy their morning coffee. They see your email newsletter with this month’s deals and new arrivals. They click through to the site and browse for a few minutes before heading off to work.
  • Over the lunch hour, this customer visits your site from their office desktop. They shop for a little while before finding an item they want and they add it to the cart.
  • At home, they see an email reminder to purchase the item they added to the cart earlier. While on their iPad, they complete the transaction.

While the tablet gets credit for the sale, the smartphone got them into the conversion funnel while the desktop helped them to make a buying decision. Providing a poor user experience at any of these stages would likely result in a lost sale.

In this chapter, we’ll take the best practices that we’ve learned for desktop and adapt them to mobile devices.

Major Design Considerations for Mobile Ecommerce Sites

Real estate is at a premium on mobile devices. This creates the challenging task of having to sacrifice elements of your desktop site without sacrificing user experience.

A mobile site must adapt to the device width in use for only vertical scrolling and change font size to keep content legible. This is true of all mobile websites. In this chapter, we’ll focus on just those elements that are critical to mobile ecommerce design.

Designing Your Header for Swipers and Searchers

The header must be stripped down significantly from the desktop version to focus on the essential navigational elements. These are:

  • Brand logo as a link to the homepage
  • Shopping cart link
  • Main menu access
  • Search bar

A Marketing Land article makes a good argument for who your mobile ecommerce navigation should be tailored to. There are two types of mobile online shoppers; swipers and searchers. Swipers prefer following buttons, using menus and swiping their way to their destination. Searchers, meanwhile, use on-site search to find their way to products.

You header navigation, and the mobile ecommerce site itself, should facilitate a user experience that is favorable for both swipers and searchers.

Main menu navigation

A popular mobile menu style is accessed by the appropriately-called hamburger button (I think it’s actually called a list icon). It reveals an off-canvas sidebar navigation menu.

bestbuy.com mobile site menu

There are those that argue that the hamburger button is less effective than other alternatives. There’s been a recent trend towards tabbed navigation for mobile social media websites. If you visit Twitter’s mobile site or their mobile app you’ll see some examples.

twitter mobile tabbed navigation

This trend hasn’t yet broken into ecommerce in any significant way, but it might be something worth testing. Don’t simply accept the hamburger button because others are doing it. Set up some A/B tests and determine the most effective menu for your online store.

Search Bar

Regardless of the menu you choose, site search will be one of the most essential navigation features of your mobile ecommerce site. Up to 30% of your visitors will interact with site search and one study found that on-site searchers contribute to 40% of overall revenue.

You have a couple options for your mobile search bar.

  • Icon-only: You’ll see a lot of sites, like Best Buy, that just display the magnifying glass icon. While this saves room, it may be harder to locate than option two.
  • Prominent search bar: With this approach, your search bar is displayed in full with your other navigation items in the header.

Personally, I prefer it when the search bar is displayed prominently, like Costco’s.

costco.com mobile site

Sizing Tap Targets on Mobile

The worst thing you can do on your mobile site is require a user to pinch and zoom to take an action. To avoid this pitfall of bad user experience, resize your tap targets to be larger and more clickable on mobile devices.

What you need to consider resizing to make your mobile site more usable:

  • Navigation menu items
  • Search, filtering and selection buttons
  • Any button that you want to be clicked, especially “Add to Cart”
  • Form fields
  • Product thumbnails

But exactly how big should these tap targets be? Apple’s iOS Human Interface Guidelines suggest that an appropriately sized target should have a minimum height and width of 44px.

Researchers have found that the average width of an index finger is equivalent to 45 – 57px.  A thumb comes in at 72px. However, that doesn’t necessarily mean you should be designing tap targets to match. That actually surface area of a finger that contacts the screen will depend on the angle taken, how the device is being held, the gesture that’s required, etc.

Instead, follow these guidelines suggested by UXmatters to appropriately size your targets and the spacing between them.

  • Touch targets:
    • Minimum—17 pt / 6 mm
    • Preferred—23 pt / 8 mm
    • Maximum—43 pt / 15 mm
  • Spacing between targets to avoid interference errors, on center:
    • Minimum—23 pt / 8 mm
    • Preferred—28 pt / 10 mm

There are many other aspects of mobile UX that should be considered, but they would take up another entire guide:

  • Keyboard layouts
  • Screen sizes
  • Form field validation
  • Recoverability
  • Mobile site speed
  • Auto-complete usage

If you really want to dive deep into mobile ecommerce usability, then perhaps you should invest in Baymard’s comprehensive m-commerce usability study.

Conclusion

Designing an entire online shopping experience is no easy task. Use this guide to make essential design decisions that will help guide your users through the conversion funnel. But don’t take everything you read here or anywhere else as the end-all truth. Make sure you set up testing mechanisms so you can constantly refine and improve your user experience based on feedback from your audience.