Rookie’s Guide to UI for E-Commerce

Thinking about starting an e-commerce site but don’t know where to start? Then this is the perfect guide for you. Before you worry about product descriptions, SEO or press releases you’ve got to have a solid UI.

A great UI will be intuitive, will guide your customers to the sales and promotions you want them to see, but most importantly, it will make it easier for your customers to get down to business – figuring out if you’re the best company to purchase from, how to find what they are looking for and how to purchase it fast so you can provide that excellent customer service and get your e-com site off the ground.

Here’s a breakdown of your most important UI elements that an e-commerce homepage needs:

THE HEADER

The header is your navigational hot spot of your online store. Its main purpose is to guide visitors to their desired destination.

-Company logo: put your company logo in the upper left hand corner on each page. Not only does it reinforce your brand, orienting visitors and building awareness and trust, but it is an essential link back to your home page. To move products, your users need to be able to navigate the site easily.

-Search bar: Perch this within the header or directly below. Thirty percent of your site visitors will use search. This means an increase in usability which means an increase in sales. Your visitors need to quickly find your search bar, in fact, make it hard for users NOT to miss the search bar. Logically, the results should be relevant to what your prospects are searching for. In your search bars, use obvious CTAs – like a magnifying glass icon. Put helpful text inside the search bar, like:

“Search by keyword, product, name or search”

CONFIDENCE BUILDERS

The most common barrier to potential purchasers is credibility. You can decide where to put it, but place testimonials and your best shipping or return offers prominently. Put this information in a boldly colored box.

SHOPPING CART

People expect a cart icon to the right side of the header. Your cart link should go here. When products are added to the cart, an icon or text should illustrate the number of items that have been added.

CUSTOMER SUPPORT

Customer support should rest to the right of the main logo. You want your customer to know you are there to answer their questions or concerns. Good information to include in your customer service section include a phone number (highly recommended) and any other options customers have to seek support.

MAIN NAVIGATION

The main navigation on your website will likely be a large panel drop down that organizes items by category. This makes navigation easy without overwhelming users. Broadest product categories should be above menu items that reveals an interface that groups products by subcategories. There is room for CTAs in your main navigation – your chance to convince users to select a special subcategory or opt for an offer you are pushing or sales.

FOOTER

The footer feature that is most important is your sitemap. They should list the sections of your ecommerce site. The reason this is important is because the reader doesn’t have to waste time to scroll up to the top of your site to find where they need it.

Under the site map, put additional customer support links, shipping, returns and FAQs. Inset trust badges to eliminate customer friction. Also use this space for newsletter sign ups and any additional links.

Finally, post all of the boring legal stuff at the bottom of the page, like privacy policy.

CONCLUSION

This guide is just the beginning of your UI efforts on your e-commerce site. But if you are new to this type of gig, hopefully it was helpful for you.