100+ Check List for Your Ecommerce UX Design

When you’re blue

And you don’t know

What to do

About your store,

Check it here, bro! 😉

are you content with your online store performance?Among those 200+ ranking factors in Google, the UX design impacts not only positions, but ecommerce as a whole. Good user-experience will boost your sales, and UX problems may kill them.

This is a practical guide on how to improve your business online performance by polishing its commercial part and increasing sales. Follow the simple steps below to check every bit of your online store for UX and conversions. Simple tips implementation will improve your online sales dramatically.

Check list (shortened for convenience) is available at Google Spreadshits and in Excel for download here, but you are encouraged to read the detailed instructions below to make the heck out of your store!

Original information was taken from the SeoNews article, authored by Yaroslav Yegorov, translated and adapted for publishing after his kind consent.

Website Header

The upper part of your site has to contain:

  • A company logo.

Make the alt of the picture say that it is your company’s logo. It is also advantageous to make a small description just next to it in a text format of what your company’s doing.

  • Contact information.

It may be a telephone number (toll free is better in this case), or contact form, or chat link. If you want to show your e-mail here, it has to contain your domain in it (like seo@fajela.com).

  • Working hours.

Because there are so many time zones, it is useful for local businesses only. Anyway, if you point them out, you should indicate the time zone. For more complicated cases, consider using time zone converters.

  • Site search.

This one is crucial for big sites where it is hard to find the needed item right away or client is searching for something very particular. Its work has to be correct and accurate.

big site search

  • Cart.

When a product is added to the cart, the site header has to show total number of items and their total cost.

  • Country/state selection.

If you are working in different states or countries and have subdomains for them or some info is different, you should include the choice option to your site header. The same is valid for currencies and languages.

country and currency selection

  • A call-back form if necessary – may be helpful for service companies.

There should be as few fields as possible. It may be just an e-mail. Or a telephone number field and name field – telephone field has to be obligatory and format verified. It is recommended to include the time you will get back to your client, but only in case you are ready to abide by it and do it swiftly.

  • Help or Support link.

Especially for big and complex sites. This one leads to a simplified page with basic information link about ordering, returning, refunding, device support, payment, gifts, settings, search and contact form to ask questions. It may also include a FAQ page if you know your clients major questions.

  • User Profile link.

For your client to be able to go to their profile quickly for any info they might need there, including order details, tracking numbers, history, etc.

Main Page of the Website

  • Relevant slider or central banner if you have those.

If you have a banner or slider going after your menu, it has to contain not only a stylish or attractive image, but also the offer, hot deal, or unique selling opportunity. It has to be obvious and clearly distinguished. Every picture has to lead to the page with detailed description of your offer.

slider example on iherb

 

 

  • New, hot deal, online only, sale, clearance, etc.

Information has to be relevant and up-to-date. The link to the section has to be included into the main menu. Beautiful banners should not distract from the page content.

  • Pop-ups.

If you have widgets on your website that produce pop-up windows like “Congratulations! You’ve won 1% discount!”, “Sign up to our website news!”, “Share this deal with your friends!”, just check they are working the right way. If they appear every minute or so, they will infuriate your visitors. If you choose to show that stuff anyway, setup them so that they are not displayed to users who have seen the offer and already rejected it.

pop-up subscribe on hanes example

  • Content visualization.

Do use infographics, advantages icons, short descriptions of how your company works. It will help to demonstrate why they should buy from you and relieve your clients from reading all that seo text. But ensure that those are readable by users with limited vision abilities.

Check if the user can quickly get comprehension of this information on the main page:

  1. What’s your business about
  2. What can be bought on your site
  3. Why it should be bought on your very site

Category or Diluting Pages

The products on such pages contain:

  • Title
  • Image
  • Price

Check if it’s evident that the price perception is obvious: there should be a dollar sign ($) next to it, or cost or anything else, the price itself and previous strikethrough price if it has changed.

  • “Add to cart” (add to bag, checkout, buy) button
  • 1-click ordering button
  • Title and image link to the appropriate product page
  • Short product’s main characteristics
  • Product’s popularity
  • Icons that catch your attention – “New”, “Online only”, “Special offer”, “Sale”, etc
  • Delivery time
  • “Compare” button
  • Quantities available (in stock, limited, only 1 per customer, etc)

 

  • The text that describes the category goes after the catalogue.
  • There are interlinking blocks, like “Recommended”, “Viewed”, “Similar”, but not too many of them and they don’t distract the viewer (usually no more than 3 per page).
  • Quick view functionality opens the product in a pop-up.

quick view example

  • Unavailable (not in stock) products are shown at the end of the catalogue.

You may not add these products to cart, but there should be a button “Notify me” or similar one. If the user subscribes to receive news about the product’s arrival to the store, they should receive an e-mail about that as soon as the product becomes available.

  • Make a filter in the upper part of the catalogue.
  • An extended filter is available as well.
  • Tag links are displayed.
  • No irrelevant items like phones in TVs category, or blue dresses in white ones.
  • There are enough products in the catalogue compared to competition.

Product Page

The items on such pages contain:

  • Title
  • Image
  • Price

Check if the price is clearly distinguished: there should be a dollar sign ($) next to it, or cost or anything else, the price itself and previous strikethrough price if it has changed.

  • Item number or reference number
  • “Add to cart” (add to bag, checkout, buy) button
  • 1-click ordering button
  • Product’s popularity
  • Icons that catch your attention – “New”, “Online only”, “Special offer”, “Sale”, etc
  • Payment options in short
  • Shipment/delivery time and options listed shortly or estimated delivery date range
  • Quantities available (in stock, limited, only 1 per customer, etc)
  • Quantity selection field
  • Main characteristics of the product: short and long information list
  • “Compare” button or add to compare
  • Reviews (and option to leave your own review as well)
  • Certificates, thank you letters, choice of the year highlights if it’s appropriate in your case
  • It is possible to select the size and style (and anything else one may need).

 

  • Interlinking blocks are visible – “You have recently viewed”, “Customers who bought this also bought that”, “Similar products”.
  • Additional item information is present – bonuses, loyalty program, special offers.
  • A “Notify me” button for items that are currently not in stock.
  • If the requested product is absolutely unavailable, there are alternatives offered.
  • Product is perfectly sharable through social media.

Cart Page

Make sure there’s a link to the cart on every page of your website. Preferably, the cart is in the upper right corner (header), because users intuitively reach there in search for it.

adding to cart example

Cart items are shown in the following way:

  • Title
  • Image
  • Price
  • Item number
  • Title and image link to the appropriate product page
  • Product simplified description
  • Quantities available (in stock, limited, only 1 per customer, etc)
  • Quantity selection field
  • Discount
  • Total cost and number

There should be the same buttons to add to cart or 1-click checkout, but also include the button “Continue shopping” or similar one.

There should be an option to delete the item from the cart.

Whenever the order is updated, totals are recalculated automatically, and the page does not reload with that.

There is a block with add-ons, accessories, recommendations, etc to encourage your client buy more.

There are blocks with loyalty programs: coupons, promos, bonus, free shipment eligibility, sales, presents, giveaways, etc.

There is a link to return to catalogue.

Checkout Page

The page contains:

  • As few fields with personal information to be filled in as possible

Don’t make your client search for their zip – let it be offered automatically, or write their full names. You should include only those fields that you truly need to make the shipment, depending on what you are selling.

check-out page example

  • Option to choose date and time of the delivery – fast and postponed delivery options
  • Payment options – PayPal, credit card, gift cards…
  • Comments field
  • List of all the products user is ready to buy
  • Loyalty programs: coupons, promos, bonus, free shipment eligibility, sales, presents, giveaways, etc.

In case the user has previously bought anything on your site, fill the fields for them automatically.

Selecting different delivery options automatically updates total cost without reloading the page.

Upon the successful checkout, both you and your client receive an e-mail confirming the order with its details.

As soon as checkout is done, the cart is emptied.

Personal Profile

Personal account link has to be present on all web pages and is usually accessible through header or menu.

  • Orders history is stored in the account.
  • Coupons, points, promos info is easy to access.
  • Order and delivery status are fully visible, including tracking information.
  • The user can subscribe/unsubscribe to promotional e-mails.
  • Order numbers are displayed.
  • The user may edit their information.
  • Special offers for extra personal information (when is your child’s birthday, their name, are you married, etc).
  • Your visitors should receive a bonus for providing you with extra information. You may later use it for targeted promotions.

Shipment/Delivery Page

There is such a page on your site and it can be found in the main menu.

It contains delivery options, free shipment availability and shipment rates, shipping timeline.

Policies Pages

You have to include terms and conditions and privacy policy pages. In Europe, you have also to include the cookies notification in case you collect those.

  • Return policy can be easily found and is written explicitly.
  • The payments through your online store are verified and secured, include various options.
  • There’s info on loans, mortgages, insurance, monthly payments if applicable for your business.

About Page

About page is in the main menu. It lists guarantees and liabilities, return conditions or link to those, service centers.

It is favorable to include quality certificates, rewards.

You should also include the disclaimers here and if you are a brand official dealer or rep – it should also be confirmed.

Contact Page

Contact page should include your full address with zip, telephone number, email or contact form, and contact alternatives: WhatsApp, Skype, social media.

You may include operating hours if it’s important for your online sales, locations – for your offline sales.

Reviews

Product pages do include reviews. Reviews are subject to moderation.

Negative reviews are answered and regulated.

unanswered review example on amazon

Motivate your clients to leave a review and build your online reputation. Some retail stores will give you coupons or bonuses for high-quality feedback.

Navigation

Navigation will either improve your site UX or destroy it completely. It has to be convenient and intuitively comprehensible.

You can evaluate the ease of search and site travel by making a focus group to perform goal tasks via your site. Otherwise, just ask your friends and relatives to help you. You should also setup analytics and trace your users behavior to reveal bugs and mistakes in your service.

  • There are breadcrumbs, setup the right way.

simple breadcrumbs example - anyone can do

  • Major site sections/categories have links in the main menu.
  • There are drop-downs, submenus for subcategories.

Compare

Comparison option is available in catalogue, categories and product pages.

If a user clicks the compare button/link the second time, they are lead to the products comparison page.

Comparison page contains:

  • Titles
  • Images
  • Prices
  • “Add to cart” (add to bag, checkout, buy) button
  • 1-click ordering button
  • Title and image link to the appropriate product page
  • Full comparative descriptions
  • Products rating
  • Icons that catch your attention – “New”, “Online only”, “Special offer”, “Sale”, etc
  • Quantities available (in stock, limited, only 1 per customer, etc)

Filtering and Sorting

There’s a filter button.

  • User may sort items in catalogue by date, name, price, popularity, size, whatever’s important for them.
  • There’s an extended filter.
  • All filters and sorting work correctly.

Other

Make sure your site is seen the way you expect it in different browsers, including:

  • Google Chrome
  • Mozilla Firefox
  • Opera
  • Safari
  • Internet Explorer

Your store has to be mobile friendly, look nice to your users and be convenient for wide fingers.

Avoid obligatory registration to enter the site, it’s no longer attractive.

how not to do - don't make registration to let people shop

Include a registration via social media.

If that’s possible, make an online chat.

There may be a page on affiliation, partners, alike.

Partner links are noindex, nofollow.

The information on your site proves your company’s or workers qualifications, don’t hide your certificates, rewards, thank you letters, appraisals.

Your news and sales pages provide users with regular up-to-date info.

All of your offices, locations and stores are listed in Google My Business and Bing Places for Business.

Don’t show nonrelated ads of other companies.

In case of successful order, form sent, 1-click order, there’s a “Thank you!” pop-up!

 

Thanks for reading this far! Do you have anything to add?

Do you want to get more information?

Or perhaps, you need a consultation or any other kind of help?

Leave a Reply

Other posts