You probably learned your way around the town in which you live based upon the positioning of landmarks. “Make a left at the church with the twin spires and you’ll see the Italian restaurant with the red, white and green sign on the corner.” Granted, landmark navigation is falling by the wayside in the age of sat nav. But one place fixed navigation points remain useful is in ecommerce. When your navigation menu is always on the screen, many users are reassured by its presence. Of course, there is a right way and a wrong way to do it. Here are some sticky menu best practices to consider.
What Are Sticky Menus?
When your navigation menu remains visible in the same position on your site regardless of how a user scrolls, this is referred to as a “sticky menu” or “sticky navigation”. Considered a standard of good web design, older adults and younger web users prefer this methodology as it gives them the confidence they can find their way around your site quickly and readily. These less web-savvy people like the idea of seeing everything they need right in front of them. When you’re operating an ecommerce site, anything you can use to help your visitors feel more comfortable will translate into more sales.
Best Practices Include
Avoiding iFrames
The practice of embedding an HTML document into another website is referred to as creating an internal frame or“iFrame”. Among the primary reason ,you want to avoid doing this is search engines have difficulty indexing sites employing this strategy. Internal frames are sometimes indexed out of the frameset. This could lead to some users not seeing your footer or navigation menu—which is the whole point of going with sticky navigation in the first place. Further, search engines may only lead shoppers to your homepage, as opposed to the page where the item for which they’re shopping can be located. When users don’t see what they’re looking for right away, they tend to bounce out of a site—which can cost you sales. Internal frames can also introduce security issues.
Do Employ CSS
If your site is being coded from a blank screen, as opposed to being based upon one of the best free website templates like those from Shopify, cascading style sheets(or CSS) will make establishing the look of your site much easier. It also makes your site load more quickly. Some experts argue it helps improve search engine optimization as well. This happens because CSS minimizes the amount of code your site needs to function properly, which means search engines can index it more quickly. Coding your sticky navigation using CSS gives you the desired results without bogging your site down with extra code.
Half-hide Search
If the menu is going to be on the screen all the time (especially in a mobile environment), it’s a good idea to simplify it as much as possible. This way you can provide the reassurance some shoppers want without bogging other customers down. Go with the magnifying glass symbol rather than using a full search field. Web users have been trained to click the magnifying glass to conduct a search when the window isn’t apparent. This will give you the best of both worlds.
Collapse Menus
Similarly, so-called “hamburger” menus add another element of simplification to avoid alienating experienced users who might be turned off by seeing full menus the whole time they’re on your site. This leaves the landmark in place for newbies, while providing more screen space for those who don’t feel a need to see the menu to feel confident.
These sticky menu best practices will enable you to assist those who need it, while remaining benign for those who feel they do not. Again, your most important consideration in ecommerce should always be the user experience. Anything you can do to enhance it will only serve to improve your bottom line.
About The Author
