Apple’s iOS 15 update to Safari meant the search bar fell from grace and settled right down at the bottom of the screen. Though bottom navigation and the ‘thumb rule of design’ have been used before, the tech giant’s influence may mark a fundamental shift in the layout of mobile applications and webpages.
Squarebird is a multidisciplinary website design and development agency based in Bristol. Our team comprise experts in web and mobile design and talented development specialists. We help exciting brands keep up with the times and create platforms with the user always in mind. So, we’re always looking out for what’s next.
Below, we discuss Apple’s update to the search bar and explain more about bottom navigation in UX design.
Apple’s iOS 15 Safari redesign.
When Apple unveiled its new safari layout towards the end of 2021 as part of a range of updates for iOS 15, many users were taken aback. Why? The search bar was no longer at the top of the screen; instead, it way down at the bottom, disappearing upon scrolling down and reappearing upon scrolling up.
After considerable pushback, the tech giant made the change optional. However, some say this heralds the continued dominance of bottom navigation and the ‘thumb rule’ of UX design. More than that, the upset the change caused highlights a key challenge for innovative UX designers; users prefer applications and web pages to follow familiar patterns, and always work as they are accustomed to – even if that way is actually more difficult for them.
Some refer to the phenomena as Jakob’s Law of User Experience; users spend most of their time on other websites, so your website should be similar to all the others. In any case, it is clear: people don’t like change, but sometimes, change has to happen.
Why did Safari move the search bar to the bottom of the screen?
The reasons behind the redesign mainly centre around ease of use. Most people use their thumbs as their primary means of navigation when using their iPhone, and many hold their phones using only one hand. When it comes to Safari, we are accustomed to the browser bar being at the top of the screen – a thumb unreachable zone. This is arguably a bad UX, but users have become used to it, proving the point that acceptable UX isn’t driven by what is actually ‘usable’ but rather the formats spearheaded by big tech companies.
What is bottom navigation?
Bottom navigation has been around in mobile design for a long time. Facebook has long had a tab bar at the bottom of their mobile app, and Uber recently moved their search bar lower down the screen to become more ‘thumb-friendly’. Bottom navigation is exactly what it sounds like: a navigation bar located at the bottom of the screen on an app or webpage design, rather than at the top. A host of other examples exist of companies embracing this format, begging the question: what’s the big deal with thumbs?
Thumb rule of design, explained.
The thumb rule of UX design works on the principle that most users scroll and navigate with their thumbs. With phones getting bigger, some parts of the screen are much easier to interact with than others, and the design of the app or webpage should be optimised for this mode of use. Approximate reach charts show that the centre and the bottom of the screen are the most comfortable for us to reach. Truly mobile-first design is actually thumb-first design. The reachable areas of the phone screen, rather, are critical real estate.
Like Uber, Safari’s search bar is fundamental to the functionality of the app. That’s why it had to sink lower down the screen; important functions and buttons should all be positioned within thumb reach. To maximise conversions, you need navigation to be simple and logical, and for the ‘enquire now’ or ‘buy now’ button, to be just a thumb click away.
Can I have my hamburger menu at the bottom?
The term ‘hamburger menu’ refers to the icon with 3 lines that can be tapped to reveal a website or app’s full menu. Now a mainstay of mobile-first design, the hamburger menu icon was invented by Norm Cox in 1981 as part of the user interface for Xerox Star. In mobile design, it acts as a toggle and provides a neat way of simplifying navigation whilst still providing a range of menu options – just hidden behind the hamburger!
Increasingly, UX designers far and wide are criticising the effectiveness of the hamburger menu, contending that it restricts users from navigating intuitively and finding the information they need. Instead, they proport that users need hints and clues to find where they need to go, and this isn’t possible if content is hidden behind an icon. The result? Lower engagement, and a poorer UX.
So, let’s get back to the question in hand: can you have your hamburger menu at the bottom of the screen? In theory, yes, but you might want to choose an alternative solution. Take the Facebook app. This went from a design with a hamburger menu to a design with a simplified tab bar at the bottom of the screen in order to boost engagement and user satisfaction. Instead of prioritising navigation, they started prioritising content and enabling users to find the information they wanted much more quickly. First Facebook, now Apple – clearly, bottom navigation is here to stay.
Bottom navigation & the future of mobile-first design.
Big tech companies like Apple have the power to fundamentally change what is known as acceptable user experience. By moving the search bar on Safari to the bottom of the screen, Apple are attempting to turn what is considered ‘usable’ on its head – literally.
What does this mean for the future of mobile-first design? Whereas before the understanding has been that the future is about decreasing the distance between web and mobile, a fundamental shift like this will underscore the difference. We think there is going to be a greater demand and rationale for placing CTAs and navigation bars at the bottom of the screen on mobiles, and non-critical buttons at the top. In fact, there will need to be a total reordering of on-screen design elements to make the phone-as-object more in line with our bodies – so easy to use, it becomes like an extension of the hand.
Mobile & website design agency Bristol.
Squarebird is always ready to evolve with the times. If you want to get started designing the ultimate UX for your new website, we’re here to help. Our team of talented designers, developers, and content experts can help craft the ultimate platform for your brand – making your audience happy, and their thumbs too!
Get in touch to talk through your ideas today!