Header showing 20 of 216

#1

Header

Opt for a consolidated header that takes minimal space

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 […]

#3

Header

Opt for a header with 2 or 3 rows on desktop

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 […]

#4

Header

List your main product categories in your menu’s level 1

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 […]

#5

Header

Have a tagline, guarantee, USP and/or offer in your header

  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 […]

#6

Header

Show your key contact information in the header

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 […]

#8

Header

Make your menu items big enough

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. […]

#9

Header

Have as few menu items as possible

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 […]

#10

Header

Opt for a Mega Menu

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 […]

#11

Header

Place the post-sale actions above the fold

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.     […]

#12

Header

Order your menu’s main product categories by sales volume

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 […]

#13

Header

Order your menu’s SUB-categories alphabetically

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. […]

#14

Header

Make your header sticky or semi-sticky

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 […]

#15

Header

The burger menu should be easy to close

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 […]

#16

Header

Place a search box prominently in your header

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 […]

#86

Header

Avoid menu flickering

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 […]

Header

Move your non-essential pages to the footer menu

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 […]

Header

Simplify your logo on mobile

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 […]

Header

Add a store locator link prominently

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, […]

Header

Design header icons so they’re easy to understand

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 […]

Header

Show the number of items in their cart

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 […]

Header

Highlight the current navigation path the user is in

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 […]

Header

Mention your free shipping in the header

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 […]

Header

Test bottom menus on your mobile site

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 […]

Header

How to properly use placeholder text in your search bar

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 […]

LOAD 20 MORE