Compact and Uncluttered The header is  the first stop for anyone using your site. It should announce who you are while offering easy navigation to the rest of the site.     The fact that the header appears on every page makes it doubly important for you to get it right. Your header should offer […]

One possible layout On desktop, opt for a header with 2 or 3 rows. Due to less restrictive space requirements, you should surround major icons like the search box and shopping cart with a whitespace so they stand out more prominently. There are various possible layouts, but below is a draft mockup of one of […]

They define the scope of your store One of the biggest issues I see when looking at stores (especially newer ones) is the lack of categories in the header. This is the main way for users to grasp the scope of your store. They scan your main categories and get an idea of what you’re […]

  Tagline A tagline helps users immediately understand the store is all about. It’s typically short, just a few words. You can often see it right below the logo, or in a row above the logo. While most people treat taglines as an afterthought, you need to take your time. A bad tagline can do […]

According to KPMG research, 51% of customers will trust your business more if they can easily contact you. This cannot be emphasised enough.     If you have a floating Live Chat button in the bottom of the page, then a simple “Help” menu item in the header is enough. If you don’t have that […]

While most mobile menus are well designed, desktop menus are something else entirely.  Good and well-sized desktop menus exist but far too many are cluttered and require a lot of effort to make sense of even for people with perfect eyesight. That’s assuming they even bother to linger so they can squint at the screen. […]

15 seconds. That is the average amount of time a person spends on one website. This means that any website needs to be compact and easy to navigate so that the user can process the most important information within that window of time. Having a simple menu with fewer menu items is one sure way […]

Mega Menus work very well for ecommerce stores A mega menu is an excellent choice to improve your navigation on desktop. This is doubly so if you have a large site structure with lots of categories and sub-categories. Since navigation options are revealed on hover, mega menus have been shown to be much better in […]

Above the fold While above the fold is a slightly dated description it simply refers to the top half of the screen. This is the part of the site your users can see without scrolling. But random placement won’t cut it. The ideal location would be in the header or the main menu.     […]

Once you have your main product categories, what next? Ordering them can be a little tricky.  When someone visits an online store, in most cases they’re seeking something specific. Since there is no way to tailor your website uniquely for every new visitor (this can hopefully be accomplished in the future), the most effective method […]

While ordering your menu’s main categories by sales volume is preferred, sub-categories are best listed alphabetically. This is simply a matter of practicality.  Sub-categories are usually listed vertically and can contain a pretty large number of items. Ordering a long vertical list randomly is no short of an act of torture towards your would-be customers. […]

First, some definitions A sticky header stays put at the top of the screen when you scroll down. A semi-sticky header reappears at the top of the screen once you start scrolling up.     The purpose of having a sticky or semi-sticky header is to ease navigation. Your customers don’t have the time to […]

The Standard The burger menu has become a design staple. Mobile navigation would be literal hell without it. You just tap on it and a collapsible menu appears.    Easy to close Since this menu covers page contents, closing it should be as hassle-free as possible once someone is done with it. A failure to […]

For large catalogs If you offer a large variety of products, search is indispensable to delivering a good user experience. The statistics are quite convincing as well: 43% of users immediately use the search box for navigation after landing on the homepage. The number is even higher for mobile users – 60% (according to Baymard […]

Menu flickering is when a user moves the mouse towards a sub-category, and instead activates another parent category, causing the hover activated drop-down to change. Let’s take the example of a home furnishings retailer. They have the following categories:  Furniture Rugs Decor Kitchen Outdoor   Furniture has the following subcategories and sub-sub-categories: Living Room Furniture […]

Your site’s web pages are generally divided into three parts: The header –  It contains your logo, site navigation, contact information, search bar, and links to support pages such as the account page. The body – This is home to the main content of your website; mostly product, category, cart, checkout, and support pages The […]

There’s less space on mobile. The ideal solution is to have a logo already so simple that it is just as clear on desktop and mobile. But perhaps that’s not your case. An easy solution to that is to simplify it. If on desktop it contains a slogan underneath, remove it on mobile. Make sure […]

Having a physical store gives you a competitive advantage over stores that sell purely online by simplifying some of the complexities of e-commerce. Shopper’s can find products in-store, pick them up directly from your store instead of waiting for home delivery, and return products to the store instead of having to mail them back. However, […]

The usability issues of text-heavy headers and the standard shopper behavior of wanting to read as little as possible has led to a reliance on icons in most designs. They look good, save space, reduce clutter, and make for a more seamless and minimalist design.  But not all icons are created equal. Some are universally […]

Customers often use the cart as a storage and comparison tool. As such, they tend to add multiple variants of the same item (four comparable cameras for instance). Due to the fact that online shopping often takes place over multiple sessions, shoppers tend to lose track of all the items in their carts. This might […]

Shoppers don’t always access your product and supporting pages from the main navigation. More often than not, they get there after using the search function or being redirected from a search engine. Breadcrumbs are often used but these can be misunderstood or overlooked by a subset of users. Showing them their navigation path helps them […]

High shipping costs are the leading cause of cart abandonment at checkout.  That’s why free shipping is so popular. People are more likely to shop at a store if it offers free shipping. They’re more willing to add an item to their carts in order to qualify for free shipping and they’re willing to for […]

If you have used any mobile apps lately you may have noticed that a lot of menus are at the bottom. This is down to how people hold their phones. 49% of people hold their phones in one hand and do most of their scrolling with a single thumb. 36% hold their phones in one […]

According to hundreds of usability studies, putting placeholder text in form fields is a horrible idea and you should never ever try it. But what about the search bar? Is it immune to the horrible effects placeholder text has on usability? Is it special? Lots of sites seem to think the search box is immune […]