Posted on 13th December 2023
Mobile Browser Tab Switching and Affordance (part 2)
As a follow up to Mobile Browser Tab Switching and Affordance I thought it was worth discussing an important distinction between smaller phone-sized screens and tablets. It is best illustrated by examining Apple's solution for the UX of tab switching / navigation.
iPhone 'tab bar' view in Safari
Here we can see that Apple have moved the address bar and navigation to the bottom of the screen by default on iPhone only. There is a good rationale for this: generally speaking the bottom and right hand side of the screen are easier to access single-handedly on phone sized devices.
They call this the 'tab bar' view and you can also switch between this and a 'single tab' view. The single tab view moves the address bar to the top of the screen with the navigation remaining at the bottom. It also removes the affordance and ability to swipe between tabs.
iPhone 'single tab' view in Safari
Note that the view offered on iPads is entirely different - multiple tabs are shown across the top of the screen similar to most desktop browsers. This highlights the complexity of designing for mobile apps. In reality we are designing for a range of devices, with enough differences in the context of their usage and how we naturally interact with them, that we have to consider alternative UI layouts for them.
How other browsers stack up
- Google introduced an experimental feature in Chrome to split and move the toolbar around 2020, but have since removed this option.
- Firefox lets you customise the view to move the whole toolbar to the bottom.
- Brave has an address bar at the top and the navigation at the bottom by default. In Brave you can customise the view to move remove the bottom navigation toolbar, which moves some of the buttons into the address bar at the top, but you can't move the address bar to the bottom.
Brave's default browser layout
I think Brave's default solution is not bad since you can swipe both the top and the bottom toolbar (if enabled) to switch tabs. It could be improved with some affordance for swiping on the toolbars and the ability to move the address bar to the bottom if desired.
One thing I really like about Brave's split solution is you can still search or type a web address by pressing the magnifying glass at the bottom (which gives focus to the address bar at the top). This lends further support to single-handed operation.
Summary
As you may be able to tell this has got me thinking a lot about mobile browsers, UIs, and their interactions. On a personal level it has made me question further the hardware and software I use and in the short term at least I think I'm going to trial using Brave as a default browser. Once again we find Google's products leave much to be desired in terms of UX.
In light of thinking more about this I created the following mock-up. I've submitted this as an alternative suggestion to my proposal for changes to the Brave browser to add affordance for the 'swipe to switch tab' feature:
