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

#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

300ms hover delay Menu flickering is when users move their mouse towards a sub-category, and instead accidentally activate another parent category, causing the drop-down menu to change. Implement a 300ms hover delay and/or mouse path analysis.  

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

Isn’t Google Maps enough? Users still turn to your store website to confirm your opening hours and holidays when you’re closed. And if they’re already on your store when they need to locate your store, their next logical step is to open your store locator, and not go on Google Maps.  If you don’t have […]

Header

Design header icons so they’re easy to understand

Two out of these icons are confusing   Stay close to the standard On desktop it’s possible to add alternate text which shows when hovering the mouse on the icon, but not on mobile. So I think a better approach is to not use confusing icons in the first place by not deviating too much […]

Header

Highlight the current navigation path the user is in

Navigation path By navigation path, I mean the menu items in the header (or burger menu) that lead to the current page. For example: Level 1 (directly shown in your main menu): Electronics Level 2: Accessories Level 3: Phone Cases   Remind them And even if they know the path they took because they started […]

LOAD 20 MORE