{"id":1467,"date":"2023-05-12T11:00:00","date_gmt":"2023-05-12T11:00:00","guid":{"rendered":"https:\/\/vfflogs.com\/?p=1467"},"modified":"2023-07-23T03:49:57","modified_gmt":"2023-07-23T03:49:57","slug":"designing-sticky-menus-ux-guidelines","status":"publish","type":"post","link":"https:\/\/vfflogs.com\/index.php\/2023\/05\/12\/designing-sticky-menus-ux-guidelines\/","title":{"rendered":"Designing Sticky Menus: UX Guidelines"},"content":{"rendered":"<p>              <title>Designing Sticky Menus: UX Guidelines<\/title><\/p>\n<article>\n<header>\n<h1>Designing Sticky Menus: UX Guidelines<\/h1>\n<address>Vitaly Friedman<\/address>\n<p>                  2023-05-12T11:00:00+00:00<br \/>\n                  2023-07-23T03:34:38+00:00<br \/>\n                <\/header>\n<p>We often rely on <strong>sticky headers<\/strong> to point user\u2019s attention to critical features or calls to action. Think of sidebar navigation, CTAs, sticky headers and footers, \u201cfixed\u201d rows or columns in tables, and floating buttons. We\u2019ve already looked into mobile navigation patterns in <a href=\"https:\/\/smart-interface-design-patterns.com\/\">Smart Interface Design Patterns<\/a>, but sticky menus deserve a closer look.<\/p>\n<p>As users scroll, a sticky menu always stays in sight. And typically, it\u2019s considered to be a good feature, especially if the menus are frequently used and especially if we want to <a href=\"https:\/\/www.smashingmagazine.com\/2012\/09\/sticky-menus-are-quicker-to-navigate\/\">speed up navigation<\/a>.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/1-sticky-menus-sverigesradio-tv-gids.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"544\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/1-sticky-menus-sverigesradio-tv-gids.png\" alt=\"Two examples of sticky menus with Sverigesradio on the left and  TV Gids on the right\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Multiple sticky menus in use: On <a href=\"https:\/\/sverigesradio.se\/kanaler\">Sverigesradio<\/a> and <a href=\"https:\/\/www.tvgids.nl\/gids\/14-05-2023\/npo1\">TV Gids<\/a>, with multiple chained sticky menus. (<a href=\"https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/1-sticky-menus-sverigesradio-tv-gids.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>However, sticky menus also come with a few disadvantages. In his recent article on <a href=\"https:\/\/adamsilver.io\/blog\/the-problem-with-sticky-menus-and-what-to-do-instead\/\">Sticky Menus Are Problematic, And What To Do Instead<\/a>, Adam Silver argues about some common usability issues of sticky menus &mdash; and how to solve them. Let\u2019s take a closer look.<\/p>\n<h2 id=\"when-sticky-menus-are-useful\">When Sticky Menus Are Useful<\/h2>\n<p>How do we decide if a menu should be sticky or not? This depends on the <strong>primary job<\/strong> of a page. If it\u2019s designed to primarily convey information and we don\u2019t expect a lot of navigation, then sticky menus aren\u2019t very helpful.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/2-sticky-bar-france-tv.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"565\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/2-sticky-bar-france-tv.png\" alt=\"A sticky bar on France TV\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      A helpful sticky bard for navigation through channels on <a href=\"https:\/\/www.france.tv\/\">France TV<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/2-sticky-bar-france-tv.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>However, if we expect users to navigate between different views on a page a lot and stay on the page while doing so &mdash; as it often is on long landing pages, <strong>product pages, and filters<\/strong> &mdash; then having access to navigation, A-Z or tabs <a href=\"https:\/\/www.nngroup.com\/articles\/sticky-headers\/\">can be very helpful<\/a>.<\/p>\n<p>Also, when users <strong>compare features in a data table<\/strong>, sticky headers help them verify that they always look at the right piece of data. That\u2019s where sticky headers or columns can help and aid understanding. That\u2019s why sticky bars are so frequently used <strong>in eCommerce<\/strong>, and in my experience, they improve the discoverability of content and speed of interaction.<\/p>\n<h2 id=\"keep-sticky-headers-small-but-large-enough-to-avoid-rage-taps\">Keep Sticky Headers Small, But Large Enough To Avoid Rage Taps<\/h2>\n<p>The downside of sticky menus is that they typically make it more difficult for users to explore the page as <strong>they obscure content<\/strong>. Full-width bars on mobile and desktop are common, but they need to be compact, especially on narrow screens. And they need to accommodate for <a href=\"https:\/\/smart-interface-design-patterns.com\/articles\/accessible-tap-target-sizes\/\">accessible tap sizes<\/a> to prevent rage taps and rage clicks.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/3-sticky-bar-navigation-postal-service.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"561\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/3-sticky-bar-navigation-postal-service.png\" alt=\"A sticky bar navigation of a postal service\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Postal Service from Iceland with four items in the sticky bar navigation (now changed). (Source: <a href=\"https:\/\/posturinn.is\/\">Posturinn<\/a>) (<a href=\"https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/3-sticky-bar-navigation-postal-service.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Typically, that means we <strong>can\u2019t have more than five items<\/strong> in the sticky bar navigation. The choice of the items displayed in the sticky menu should be informed by the most important tasks that users need to perform on the website. If you have more than five items, you probably might need to look into some sort of an overflow menu, as displayed by <a href=\"https:\/\/www.samsung.com\/us\/tvs\/neoqled-tv\/picture-quality-sound\/\">Samsung<\/a>.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/4-sticky-overflow-menu-samsung.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"581\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/4-sticky-overflow-menu-samsung.png\" alt=\"Sticky overflow menu at Samsung\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Sticky overflow menu at <a href=\"https:\/\/www.samsung.com\/us\/tvs\/neoqled-tv\/picture-quality-sound\/\">Samsung<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/4-sticky-overflow-menu-samsung.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Whenever users have to deal with forms on a page on mobile, consider replacing sticky menus with accordions. Virtual keyboards typically take <strong>up to 60% of the screen<\/strong>, and with a sticky bar in view, filling in a form quickly becomes nothing short of impossible.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\"><span class=\"feature-panel__desc\">More after jump! Continue reading below&nbsp;&darr;<\/span><\/p>\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p><strong>Boost your UX skills<\/strong> with <strong><a data-instant href=\"https:\/\/smart-interface-design-patterns.com\/\">Smart Interface Design Patterns<\/a><\/strong>, a 9h-video library by Vitaly Friedman. With <strong>100s of real-life examples<\/strong>, design guidelines and a friendly live UX training. <a href=\"https:\/\/www.youtube.com\/watch?v=aSP5oR9g-ss&amp;ab_channel=SmashingMagazine\">Check the free preview<\/a>.<\/p>\n<p><a data-instant href=\"https:\/\/smart-interface-design-patterns.com\/\" class=\"btn btn--green btn--large\">Jump to the UX video course&nbsp;\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"https:\/\/smart-interface-design-patterns.com\/\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img loading=\"lazy\" class=\"feature-panel-image-img\" src=\"https:\/\/archive.smashing.media\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8c98e7f9-8e62-4c43-b833-fc6bf9fea0a9\/video-course-smart-interface-design-patterns-vitaly-friedman.jpg\" alt=\"Feature Panel\" width=\"690\" height=\"790\" \/><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"accessibility-issues-of-sticky-menus\">Accessibility Issues of Sticky Menus<\/h2>\n<p>By their nature, sticky menus always live on top of the content and often <strong>cause accessibility issues<\/strong>. They break when users zoom in. They often block the content for keyboard users who tab through the content. They obscure links and other focusable elements. And there is often not <strong>enough contrast<\/strong> between the menu and the content area.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/5-sticky-sub-menu-navigation-accessibility-issues.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"447\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/5-sticky-sub-menu-navigation-accessibility-issues.png\" alt=\"Example of a poor contrast between the sticky sub-menu-navigation and the content area\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Poor contrast between the sticky sub-menu-navigation and the content area can cause accessibility issues. Discovered via <a href=\"https:\/\/www.nngroup.com\/articles\/sticky-headers\/\">NN\/Group<\/a>. (<a href=\"https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/5-sticky-sub-menu-navigation-accessibility-issues.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Whenever we implement a sticky menu, we need to make sure that focusable elements are still visible with a sticky menu in action. And this also goes for internal page anchors that need to account for the sticky bar with the <strong>scroll-padding<\/strong> property in CSS.<\/p>\n<h2 id=\"avoid-multiple-scrollbars-of-long-sticky-menus\">Avoid Multiple Scrollbars Of Long Sticky Menus<\/h2>\n<p>When sticky menus become lengthy, the last items on the list <strong>become difficult to access<\/strong>. We could make them visible with some sort of an <strong>overflow<\/strong> menu, but often they appear as scrollable panes, causing multiple scroll bars.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/6-sticky-sidebar-navigation-australian-bureau-statistics.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"483\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/6-sticky-sidebar-navigation-australian-bureau-statistics.png\" alt=\"A large sticky sidebar navigation of the Australian Bureau of Statistics\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      <a href=\"https:\/\/www.abs.gov.au\">Australian Bureau of Statistics<\/a> with a large sticky sidebar navigation. (<a href=\"https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/6-sticky-sidebar-navigation-australian-bureau-statistics.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Not only does this behavior cause <strong>discoverability issues<\/strong>, but it\u2019s also often a cause for mistakes and repetitive actions on a page. Ideally, we would prevent it by keeping the number of items short, but often it\u2019s not possible or can\u2019t be managed properly.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/7-accordion-menu-smashing-magazine.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"566\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/7-accordion-menu-smashing-magazine.png\" alt=\"Example of an accordion menu on Smashing Magazine\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Showing and hiding cart details when needed. On Smashing Magazine. (<a href=\"https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/7-accordion-menu-smashing-magazine.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>A way out is to <strong>show the menu as an accordion instead<\/strong> in situations when the space is limited, especially on mobile devices. That\u2019s what we do at Smashing Magazine in the checkout, with a button that reveals and hides the contents of the cart when needed.<\/p>\n<div class=\"sponsors__lead-place\"><\/div>\n<h2 id=\"partially-persistent-menus\">Partially Persistent Menus<\/h2>\n<p>Because sticky menus often take up too much space, we could <strong>reveal them when needed<\/strong> and hide them when a user is focused on the content. That\u2019s the idea behind partially persistent headers: as a user starts scrolling down, the menu disappears, but then any scrolling up prompts the menu to appear again.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/8-partially-persistent-menu.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"571\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/8-partially-persistent-menu.png\" alt=\"Partially persistent menu\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Partially persistent menu on <a href=\"https:\/\/www.cb2.com\">CB2<\/a>, appearing when you need it, and disappearing when you don&#8217;t need it. (<a href=\"https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/8-partially-persistent-menu.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The issue with this pattern is that sometimes users just want to jump back to a previous section of the page or double-check some details in a previous paragraph, and the menu often gets in the way. Page Laubheimer from NN\/Group recommends using a <strong>slide-in animation<\/strong> that <a href=\"https:\/\/www.nngroup.com\/articles\/sticky-headers\/\">is roughly 300\u2013400ms long<\/a> and will preserve the natural feel without being distracting.<\/p>\n<h2 id=\"alternatives-to-sticky-menus\">Alternatives To Sticky Menus<\/h2>\n<p>In some situations, we might not need a sticky menu after all. We can avoid their downsides with <strong>shorter pages<\/strong>, or lengthy pages which repeat relevant calls-to-actions or navigation <em>within<\/em> the page.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/9-tables-of-contents.png\"><\/p>\n<p>    <img loading=\"lazy\" width=\"800\" height=\"570\" src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/9-tables-of-contents.png\" alt=\"Tables of Contents displayed on UK Government and New Zealand Government websites\" \/><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Tables of Contents displayed on <a href=\"https:\/\/www.gov.uk\/find-legal-advice\">UK Government<\/a> and <a href=\"https:\/\/www.govt.nz\/browse\/immigration-and-visas\/visas-and-travel\/\">New Zealand Government<\/a> websites. (<a href=\"https:\/\/files.smashing.media\/articles\/sticky-menus-ux-guidelines\/9-tables-of-contents.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>We could display a <strong>table of contents<\/strong> on the top of the page and bring the user\u2019s attention to the table of contents with a back-to-top link at the bottom of the page.<\/p>\n<div class=\"sponsors__lead-place\"><\/div>\n<h2 id=\"wrapping-up\">Wrapping Up<\/h2>\n<p>Whenever the job of the page is to help users act, save, and compare, or we expect users to rely on navigation a lot, we might consider displaying sticky navigation. They are most harmful when there isn\u2019t enough space anyway, as it often is with forms on mobile devices.<\/p>\n<p>Sticky menus do come at a cost, as we need to account for usability and accessibility issues, especially for <strong>zooming, keyboard navigation, and anchor jumps<\/strong>. Add them if you need them, but be careful in plugging them in by default.<\/p>\n<p>We need to prioritize what matters and remove what doesn\u2019t. And too often, the focus should lie entirely on content and not navigation.<\/p>\n<p>You can find more details on <strong>navigation UX<\/strong> in the <a href=\"https:\/\/smart-interface-design-patterns.com\"><strong>video library on Smart Interface Design Patterns<\/strong><\/a>&nbsp;? \u2014 with a <strong>live UX training<\/strong> that\u2019s coming up in September this year.<\/p>\n<h3 id=\"further-resources\">Further Resources<\/h3>\n<p>Of course, the techniques listed above barely scratch the surface. Here are wonderful articles around sticky headers, from design considerations to technical implementations:<\/p>\n<ul>\n<li>\u201c<a href=\"https:\/\/adamsilver.io\/blog\/the-problem-with-sticky-menus-and-what-to-do-instead\/\">The Problem With Sticky Menus, And What To Do Instead<\/a>\u201d, by <a href=\"https:\/\/www.linkedin.com\/in\/adambsilver?miniProfileUrn=urn%3Ali%3Afs_miniProfile%3AACoAAAKPgv4BhBlcQZzpi3QD2sssbjghdYhQI1o\">Adam Silver<\/a>,<\/li>\n<li>\u201c<a href=\"https:\/\/www.nngroup.com\/articles\/sticky-headers\/\">Sticky Headers: 5 Ways To Make Them Better<\/a>\u201d, by Page Laubheimer,<\/li>\n<li>\u201c<a href=\"https:\/\/uxdesign.cc\/porting-long-scroll-content-to-a-small-screen-a-different-approach-to-sticky-in-page-navigation-ca94f15262fe\">A Different Approach To Sticky In-page Navigation<\/a>\u201d, by Corey Snyder.<\/li>\n<\/ul>\n<div class=\"signature\">\n  <img src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" \/><br \/>\n  <span>(il, yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Designing Sticky Menus: UX Guidelines Designing Sticky Menus: UX Guidelines Vitaly Friedman 2023-05-12T11:00:00+00:00 2023-07-23T03:34:38+00:00 We often rely on ...<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[8],"tags":[],"_links":{"self":[{"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/posts\/1467"}],"collection":[{"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/comments?post=1467"}],"version-history":[{"count":1,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/posts\/1467\/revisions"}],"predecessor-version":[{"id":1468,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/posts\/1467\/revisions\/1468"}],"wp:attachment":[{"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/media?parent=1467"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/categories?post=1467"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vfflogs.com\/index.php\/wp-json\/wp\/v2\/tags?post=1467"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}