Problem: Running Out of Width
What if all your navigation items don’t fit onto one line on mobile? In the screenshot below, if Habanero opens another office, it won’t fit:
Pattern 1: Horizontal Swipe
You can let the choices go off-canvas. You’ll find this in use on the web and in native apps.
Make sure to hint at the concealed content. Adjust spacing to ensure the last item is cut off:
Google adds a fade effect as an added cue, which also makes the cut off item less awkward:
Strymon adds fade effect AND a small arrow for clarity. Moreover, they turned the links into buttons, which makes it easier to see they are cut off (not a video):
This pattern isn’t useful just on mobile. LinkedIn uses this pattern in their Create Post pop-up, where width is restricted and the concealed tags are low priority:
Samsung adds motion as an affordance. In the video below, notice that it’s important to auto-pan the selected item into view after a page redirect:
This diversity and number of cues highlights the main disadvantage of this pattern: discoverability. A user may not recognize a swipeable menu and may miss out on the concealed choices.
Pattern 2: Hide Low Priority Items
A common pattern is to hide complex navigation behind a hamburger icon or icon + label. You should avoid hiding important choices if possible. It may be appropriate if the menu is redundant and the high priority options are prominent in the body of the page.
Try a hybrid approach to achieve a balance between discoverability and layout constraints.
CASE STUDY: Interaction Design Foundation Home Page
IDF decided to hide all its links, including “UX Courses”. The courses offered are listed in large cards way down the page. So at first blush, it’s not obvious what courses they offer, although it’s the primary interest of visitors.
Here’s how the page looks now:
SOLUTION 1: Move Courses Higher
Here we leave navigation unchanged but move the relevant content above the fold:
SOLUTION 2: Expose Top Priority Menu Item
Here we leave the page unchanged but surface the UX Courses as a button:
Another hybrid example
Vivobarefoot exposes the high-level filters but conceals more precise filters behind an icon. This is better than hiding all filters, but the “filter” row is empty, so they should use available space to expose 1 or 2 mostly frequently used
precise filters:
Pattern 3: Simplify and Fit
You can save some space by using icons without labels, but you should avoid pure icons if possible. When you choose this approach, be pragmatic. Certain icons like Home are safe, while others are less recognizable. I use YouTube every day, but I don’t know what the flame icon represents:
Simon Cowell’s gesture symbolizes the idea that if a user doesn’t know what something means, it’s as if it’s not there.
You can fit links by grouping them under pulldowns:
Another approach is to shorten text labels on mobile. Here is a desktop nav I did for a client:
On mobile, I kept just the key words:
Here’s how the code for this looks: <a>Promote <span class=”mobile-hide”>Your Listing</span></a>. A media query hides .mobile-hide class on narrow screens. Note that assistive technologies may still be able to read the full label depending on how you hide it (e.g., if you make it 0 width and height).
Sometimes the links are just too long and won’t fit. In that case, you can let them overflow:
On that note, let’s talk about my preferred approach.
Pattern 4: Let It Overflow (Counter-Pattern)
The approach I generally prefer is to not hide anything. As you can see in the previous example, I let the links overflow on mobile. I want them all visible at a glance as an overview.
If you visit my site on mobile, you’ll notice my sitemap is fully exposed right at the top to orient visitors to what I’m about:
On the inner pages, I’ve removed low priority items, but I still let items overflow onto a second row:
This works for a limited number of links, 3 rows at most. I do the same thing for inline tabs:
When I worked on GoodUI.org, we usually exposed links in the body and let users scroll through them normally. 100% discoverable:
Sometimes you have tabs that are not links but switch up some text in-page. If the tabs take up a lot of height, the user may not be aware that the text below has changed. In those cases, checking if text is out of view and auto-scrolling to it may be an option.
Wrapping Up: Best Practices
- Keep choices exposed whenever possible to ensure disoverability
- Try simplifying to fit the choices on one line by using icons carefully, simplifying text labels, or grouping (simplify without sacrificing function and clarity)
- If you rely on horizontal swipe, use fading, cut-off text / buttons, and motion to increase discoverability
- If you decide to hide choices, use available space to keep high priority choices exposed in the nav area or the page body
- Don’t be afraid to give navigation a large treatment if it makes sense
Do you need a UX audit of your mobile app or site? Send me a link, and I’ll check it out.