Posted on 12th December 2023
Mobile Browser Tab Switching and Affordance
Did you know you can switch between open tabs in your mobile browser by swiping left or right on the address bar? Nearly all browsers support this on mobile devices. But only one browser to my knowledge currently implements a visual indication of the fact that this action is possible - Safari on iPhone.
I had no idea this feature existed myself so when I discovered it recently, by searching the web for quick ways to switch tabs, I had a feeling I might not be alone in this. I asked around and a few people I asked didn't know about it either.
Researching the idea
After a quick sketch defining the problem, I carried out some very small-scale user research by asking them to show me the quickest way to switch tabs in their mobile browser. I then presented them with a basic mock-up image of a browser with a visual indicator:
By adding the end of a box to the left of the screen and the start of a box to the right of the screen, a simple indication of the fact that something exists beyond the edges of the screen is created. This is a common pattern for creating 'affordance' for scrolling or swiping in user interfaces. This allowed the users to identify the possibility of the swipe gesture on the toolbar as leading to the action to switch to the next or previous tab. I finally then asked them to switch tabs in the browser on their own device having seen and understood the mock-up.
Of course the experiment is somewhat leading in that once you know the aim is to switch tabs and you are presented with an original design and subsequently an alternative design you are likely to notice the change and hone in on the solution. Nevertheless, the speed with which the added affordance helped users identify the action and the fact that this is already supported on iPhone was enough to make me think this is something that could benefit other browsers.
A HTML/CSS prototype
I created a fairly low-fidelity prototype you can try below:
To me this defintely gives the feeling that scrolling on the bar at the top is possible.
Further suggestions for improvement would be to:
- Trial different styles of visual indication including lines and arrows
- Look at alternative input options to gestures such as next / previous arrows
- Add an indication of 'where you are and where you can go', this could be supported by:
- A scroll bar or similar - see this excellent article for further guidance: https://medium.com/headstorm/in-search-of-a-better-scroll-ux-pattern-3a22d4cff5f1
- Dots with the current tab highlighted
- A count of the current tab and how many there are
Browser modifications
I've never so much as dipped my toes in the world of browser development. I had a look at which browsers were (to any extent) open-source and open to submissions of ideas. Looking at the source code of 2 browsers: Brave and Firefox I could see potential entrypoints to implement a working prototype, but due to my lack of experience with browser design and development the obvious way forward to me seemed to be to present and submit the idea first and see what happens.
Both these projects get swamped with suggestions and proposed changes so I know there is a good chance the suggestion will take considerable time to process and may fall off the radar without even being looked at. So for now I'll just have to wait it out and see what comes of it. I'll definitely post an update if and when I have one.
In summary
This has been a useful exercise in demonstrating the value of affordance in increasing the chances of feature discovery, or looking at it another way: illustrating how a lack of affordance can significantly hamper the chance of a user finding a feature. Any interaction that can potentially reveal content that resides off-screen in particular is a tricky thing to make intuitive.
When you consider the impact of small changes to increase the discoverability of features that could potentially save a user time, it is well worth investing a little in reviewing and improving this aspect of UX.