WEBSITE HEADER ELEMENTS

E C O M M E R C E

H o w t o d e s i g n e C o m m e rc e w e b s i t e h e a d e r e l e m e n t s

e C o m m e r c e U X D e s i g n a M i n e W h a t i n i t i a t i v e

1e c o m m e r c e u x d e s i g n . c o m

Help customersremember your brand

A clear, distinct and remarkable logo that appeals to the target audience is the basis of brand identity of an eCommerce store. Whether the logo is placed on the upper left corner as in most eCommerce stores or in the center, it should be displayed prominently. Add a catchy and memorable tagline below the logo that helps in brand building. Land the shoppers on the homepage when they click on the logo.

1

2e c o m m e r c e u x d e s i g n . c o m

The Search Box

Sitesearch is an important navigation function of an online store. So, make the search box clear and prominent on the site-wide header. If your product catalog is very large, then allow users to choose the category before they perform the search. Don’t place any other boxes in the header other than the search box as that would confuse the shoppers. Use a button that reads “search” instead of a small search icon especially on the home page.

2

3e c o m m e r c e u x d e s i g n . c o m

Easy access to shopping cart

The shopping cart button has to be designed properly as it is essential for the purchasing process. It has to give an overview of the ongoing buying process. Specify how many items are currently present in the cart and how much do they cost. Link it to the cart page. Most of the eCommerce stores place the cart icon on the upper right hand side of the page. Ensure that the cart icon is not overcrowded by other elements, make it easy to find. Design a visually appealing cart or use just a simple text link based on your audience.

3

4e c o m m e r c e u x d e s i g n . c o m

Feature your customer service phone number

The simple act of adding a phone number, preferably a toll free number on to the website header establishes trust and help customers feel comfortable shopping with you. Displaying the contact number on the website header will make it easy for shoppers to locate it irrespective of the page they are in. Keep in mind that prominent phone number will do good only if you have enough staff to respond to the incoming calls. Also, clearly specify if you answer the calls only during specific hours.

4

5e c o m m e r c e u x d e s i g n . c o m

Track order

Show off your order tracking link on the website header instead of hiding it behind help or customer service links so that the customers who did guest checkout can easily access the order status page. Even shoppers who have a registered account might want to know the status of their order quickly without having to log in.

5

Read on to f ind out how a Shopify based luxury retai ler increased their landing page conversion by 200%.

6e c o m m e r c e u x d e s i g n . c o m

User account

Provide your customers with a private account where they can check all their previous orders and the status of their current order. Offer link to the user account section if the user has logged in. If not, display registration and login links. If you offer any interesting incentive upon sign up, then mention that near the signup link.

6

7e c o m m e r c e u x d e s i g n . c o m

Link to the store finder

Many shoppers webroom before purchasing a product. If you have physical retail outlets, then help shoppers find ones that’s closest to them. Include a link to the store finder on the website header. You can even include stores in your search results when users search for cities or zip codes.

7

8e c o m m e r c e u x d e s i g n . c o m

Wishlist

A wishlist allows shoppers to save the products so that they can purchase it later. Provide a wishlist or save for later button on the website header, but make sure it is not too prominent that it distracts the other important elements. Show a link to the wishlist even if the user has not logged in and prompt to sign in or sign up when a product is added to wishlist as it is a good way to gather email addresses.

8

9e c o m m e r c e u x d e s i g n . c o m

Promo bar

Promote the unique selling point of your store or feature your store’s most important perks/offers such as free shipping, easy returns, major markdowns, special deals etc in the promotion bar that appear on every page of the website. For more pointers on how to design a nice little promo bar, read this.

9

Average order value increased by 26%. Read on to f ind out more on how we helped.

10e c o m m e r c e u x d e s i g n . c o m

Navigation Menu

The navigation menu should help visitors find the product they are looking for. It has to give them an overview of the available range of products.

10

Make your primary navigation prominent and simple with 5-7 choices

When naming your categories, use words that your users are familiar with instead of inventing creative category names

Make sure the top landing pages of your site are accessible from the main navigation

Use top or left navigation based on the nature of your website

Show the navigation menu consistently throughout the site except on the checkout page

Indicate where the user is by highlighting the link in the navigation menu.

11e c o m m e r c e u x d e s i g n . c o m

12e c o m m e r c e u x d e s i g n . c o m

Link to customer service

Help customers who are stuck to find answers irrespective of whatever page they are in by providing a link to help/customer service along with the contact number on the website header. If they can find information easily, then they don’t need to contact you for assistance and that would save your time and your customer’s time.

11

See how a large fashion retai ler used MineWhat to reduce exit rates on their Out of stock pages by 2%.

13e c o m m e r c e u x d e s i g n . c o m

Currency/Country/Language selector

12

If you support multiple currencies on your site, then use a drop down to enable shoppers to select the currency and/or the country. Ensure the option to choose the currency/country is highly prominent. If you can automatically detect the geographic location of the shopper, then set the default currency/country based on the location.

14e c o m m e r c e u x d e s i g n . c o m

Since automatic country selection is not always accurate, you can also ask the users to choose the country when they first enter the site and allow them to change it any time.

15e c o m m e r c e u x d e s i g n . c o m

If your store is localized in 2 or 3 languages, then list them using the language’s own name itself across the website header so that the user can toggle between them.

16e c o m m e r c e u x d e s i g n . c o m

If yours is a multilingual store, then use a drop down language selector that lists all the languages in alphabetical order.

Time saved on category management everyday 2Hrs. See how MineWhat brought an entire team onto one page.

P O W E R E D B Y

Product Analytics for eCommerce

T h e # 1 e C o m m e rc e i n t e l l i g e n c e p l a t f o r m f o r y o u r s a l e s a n d m a r k e t i n g t e a m s .

Quick ly spot what works and what doesn’ t on your s tore. Dr ive more convers ions.

w w w. m i n e w h a t . c o m > >