Bow to the Thumb — Rethinking Navigation for Bigger Screens in 2018
In one hand you hold your coffee, in the other, you shop for a graduation gift for your brother. Your thumb cranks up to the top left corner of the screen and *splash*. The phone takes a dive and becomes the porcelain throne’s next victim.
Top navigations on large screens are phone killers.
In 2018 we’re going to see a radical change in the way websites are navigated. New patterns and solutions that bypass traditional solutions such as hamburger menus and toolbars will make the world of ecommerce a better place.
Some Actual Factuals
1. How important is mobile really?
Be worried if you’re still asking this question. Let’s visit the numbers worldwide as of February 2018:
- 52% — Mobile
- 44% — Desktop
- 4% — Tablet
In eCommerce, we see these numbers trending even higher with 68–88% of our customers coming from mobile devices.
2. What are the actual mobile screen sizes are we using?
In February 2018 global mobile usage:
- 44% — 360x640
- 9% — 375x667
- 4% — 720x1280
- 4% — 414x376
3. The hamburger has been failing you as a designer, as a customer, as a stakeholder.
As designers, we politely ignore proof that hamburger navigation is hiding things from users. It keeps things clean and tidy, but let’s just nail the lid on the coffin:
- The top left corner is the hardest place to reach on a mobile device for a right-handed user. This is where hamburger menus are most often found.
- You limit discover-ability in an age where average users decide if they are going to stay or leave in the first 10 seconds of viewing the page.
- 57% of people use your hidden navigation, but if your nav is even partially exposed (combo navigation) it will be used in 86% of the time — That’s 1.5 times more.
- People prefer hot dogs anyway.
Thumb Friendly Navigation —AKA, Where I play with solutions when no one is looking…
It’s a scary thing to mess around with the core patterns of navigation when redesigning a site. We tweak things slowly, adopt patterns from native apps and hope changing text or an icon will change conversion for the better.
My goal in this is to create imperfect solutions that defy patterns that exist today in hopes of finding a new way to navigate on larger phones. The purpose of these designs is to explore new solutions that keep navigational elements within the green thumb zone. All other rules are going out the window.
1. The Side Nav
We have bigger phones screens. This means more space, which is the whole issue for our thumbs. Let’s use the space differently! The wider our phones, the more we can play horizontally. This solution cannibalizes horizontal space, but my thumb can pretty comfortably jump into the cart and my preferred product gender. Nothing is getting hidden behind the hamburger. If we tried this solution in the real world, we might want to snap back to the traditional top nav on smaller phones when thumbs are still able to reach on the smaller screen size, sticking with a more familiar pattern while still providing a functional approach.
2. The Floater
Can I replace navigation completely with only the prompt to search? It’s crazy, but it’s also simple. When I go into navigation, by definition I am searching for something that I have not found within the content of the page. So, if I open up the actual ability to use a search field OR click straight into pre-selected shopping categories, aren’t all my hopes and dreams fulfilled? As search tools get smarter, can we lean even more heavily on this type of experience?
3. The Toolbar
This has been done before in our apps and now we’re seeing it pop up within ecommerce. But for my clients, icons don’t always make sense. If shoppers are divided by gender, then by product can I simplify the nav into two groups, expose those groups and provide all universal nav items under the more pertinent shop categories? Notice I don’t have to go to the awkward corners of the nav to close, I can just keep my hand right where it is and if I don’t see what I need, I get out of there.
Here’s an unpleasant reality about mobile iOS browsers.
We want to put our nav down at the bottom of the screen, just like those clean beautiful apps we use. This would fix the darned thumb-reach problem. Life would be peachy.
Sadly if you are on an iPhone, you’re going to have to tap twice. There is a 44px high space on the bottom of the safari mobile browser that when touched, the bottom navigation bar reappears. So — first tap, the browser bar pops up — and tap again on the thing you wanted to navigate to in the first place. It’s messy.
One workaround is to keep the browser controls open, which will allow our bottom toolbar nav to remain active on a single tap. However, this solution reduces screen real-estate for our website and invites visual noise to get in the way of our carefully laid designs.
The alternative is to let your navigation hide away with the browser controls, and reappear when the user scrolls back up. This avoids the frustrating double tap and avoids forced browser bars eating up screen space.
4. Home Sweet Navigation
What if your site’s mobile homepage is the navigation? Total exposure! Quick entry! All the user needs to know is that ‘back’ takes them to the homepage where they can navigate to their heart’s delight.
This limits the amount of promo content that lives on the homepage, but if we’re focused on conversion, then streamlining content to the essentials is exactly what we should be doing. We can find more strategic placement for brand messaging and promotion.
How do you feel about the future of nav?
Let’s figure this out together. How do you think navigation on the mobile web will evolve? Share the solutions have you have used in the comments below.
