A New Mobile Tabs tray
Why we’re giving it an update in Firefox for Android
Special thanks to Martyn and Sebastian for all their hard work here.
When we were redesigning our tablet interface back in 2014, we learned a couple things (read part 1 here and part 2 here). Since then, things have changed and there’s been new findings. We’ve seen the latest smartphones continue to get bigger, Luke Wroblewski shared some data about usage by orientation, and our competitors have continued to improve their offerings too.
Given the high visibility nature of this part of our product, it felt important to be more proactive here. So, what’s this part of Firefox for, really? When you’re in the Tabs tray, what are you trying to do?
- Navigation — As a user, I want to switch between my different tabs.
- Management — As a user, I want to control and manage my tabs.
Why?
High visibility, again. We don’t have a whole lot of UI. For the most part, our UI is our Toolbar and it’s designed to take a back seat to the web content. This means that there’s an inherent importance we’re establishing when we place a button in our Toolbar — it has to matter.
Quality. There’s always things to update and there’s always room to improve. But a key part of that is balance. I believe it’s important not to be content. We need to be aware of our own weaknesses and catch them earlier. By acknowledging the landscape around us, we can benchmark and critique ourselves too.
Tabs matter. As a user, you create these tabs so you should feel like they belong to you (rather than your device/app). In many ways, the browsers job is to facilitate that relationship. To “improve” this means doing better in terms of the user experience, security, privacy, as well as performance.
Accuracy. The Tab previews are obviously the most prominent objects in this View. But the visual connection between the preview here and the web content it represented wasn’t strong enough. In order to be more reliable in that sense, we felt it needed to be more accurate.
Consistency. Firefox is available on tablets, phones, and now on the App store too. Yes, different devices offer different form factors and use cases, but there are similarities that should be translatable. The underlying principles and values should be consistent. This was our opportunity to leverage the work from our tablet redesign and adapt them to our mobile offerings.
What’s different?
In Firefox 44, the new Tabs tray will have three notable changes.
- A full screen interface that allows users to focus on the task at hand
- More accurate Tab preview proportions
- A navigational back button
What you don’t see here is probably what’s most important. This updated design is also designed for the future.
It comes in many forms. It could be UI reusability, simply a scoped down “V1”, or maybe even anticipation of new technology and devices. But the end goal is essentially the same — a more durable design. Hopefully, one that can prevent future frustration (when it comes to adding or removing a feature for example).
Cost of change is alway something that needs to be considered when redesigning an area of our product that has been around for such a long time. But seeing the limitations that we’re constantly running into with our current Tabs tray, I believe that this is the right direction going forward.
Currently, we’re looking at adding a preference for this new Tabs tray that allows for a two column layout as well. It’ll look something like this (pictured above) and we’re calling it “Compact tabs”. As seen in our iOS product, the idea here is to use the space more efficiently and to organize the hierarchy with the focus placed on the Tab previews.
Part of this is about cleaning up our UI and preparing for the future. Design is never done, so it’s important to identify when you need to start rethinking things.
The current UI has proven difficult to grow and evolve with some of the newer ideas/interactions we’re looking at (like gestures!). This update gives us the room to explore a bit more. Ultimately, it puts us in a much better position to come up with simpler and more creative solutions.
Is this perfect? No, far from it. But, done is better than perfect.
