April 10, 2020
Mobile Navigation Menu – Ecommerce Best Practices

Mobile Navigation Menu – Ecommerce Best Practices

Only 4.6% users add products to cart on mobile
in comparison to 8% on desktop. Why? Because users very often can’t find what
they are looking for in your online store. What is the reason for that? Poor navigation. Hi everyone! My name is Pawel Ogonowski and I’m the Ecommerce
Optimization Guy. When I conduct user testing on mobile devices,
I constantly see that users have problems with navigation and menu in online stores
on their smartphones. What can you do so that your navigation didn’t
suck? Today we will go through the basics: getting
the header and the menu right. One, make sure the icons in the header are
big enough to be easily tapped. People use their fingers and fingers are not
as precise as a mouse pointer. Average person finger is 11 mm wide. And some
basketball players have got more than 19 mm! To let users easily tap icons with these clumsy
pointers which their fingers are, make icons around 45 by 45 px and add a 10 px padding. Two, add labels to the icons. I know that you assume that every single person
will recognize straight away what you meant by that hamburger but truth be told some users
have never seen before one stand for a menu. Don’t be like American Apparel for that
matter. Always add labels to your mobile icons. Even
if they seem obvious to you. Three, as usually less is more. When coming up with a mobile design you need
fewer links in the header. Menu, search box, my account or login and
shopping cart are enough. You may sometimes add a wish list to them
or a contact. Four, when users click on a menu, take a large
portion of the available screen’s real estate. I would even encourage you to take the whole
available screen just for the purpose of navigation. Remember, some users are using their right
hands, other are using left hands so it’s always good when a tappable element is screen-wide. A slide in animation from the left side like
the one on Zalando is a good idea. It would be even better if a sliding motion
from the right side to close the menu would be available. Five, It’s a good idea no to redirect a
user to another page every time when he is going back and forth into subcategories and
categories. Show these as new screens. Show user arrows that prompt him that he can
go back and forth. Only redirect a user to a category when you
don’t have any subcategories left there. This can easily simplify how users interact
with your menu — even if you have got a large category tree. Six, it’s better to show another screen
for the subcategory than to expand the tree. Expanding the tree is a good solution on the
desktop but delivers a poor experience on mobile as it forces a user to scroll up and
down which might lead to some problems. Seven, again remember about the minimal height
of each tappable element. It’s better to leave some free space just
like Zalando does than cramp them too much like Simply Hike. Eight, either make the search field big enough
so that user could easily interact with the field just like lyst does or enable a user
to open a bigger field by clicking on the icon just like American Apparel does. Summing it up. When you design mobile header and the menu,
here are the points to remember: One, make header icons 45 by 45 px plus 10
px padding so that they were easily tappable. Two, add a label to every single icon. Three, minimize the number of elements in
the header: logo, menu, search, cart are enough. You may add wishlist and contact. But not a thing more. Four, take the whole screen with the menu
when user clicks on it. Five, let users go back and forth from category
to subcategories without a redirect to another page. Six, show another screen for the subcategory
than to expand the tree. Seven, remember about the minimal height of
each menu line. 45 px plus 10 px padding is kind of a rule
of thumb. Eight, make the search field big enough so
that user could easily interact with it. And don’t forget about the call to action to perform
search. And finally: Test every single change before
you finally implement it. Ok, folks, that’s all for today! Have a great day and see you in the next episode
of Bite-size Ecommerce Optimization! Ta-ta! Good. Good. We have finished that one. So it’s Monday when it goes live right? Good, I better start packing my things now. There are just 3 hours till our flight to
Chicago for The Internet Retailer Conference Oh! If anyone of you watching is going to be in
Chicago for the event 5-8 June 2018 then DM me on LinkedIn or Twitter! Bummer, that won’t be up to date for a long

Leave a Reply

Your email address will not be published. Required fields are marked *