Firefox for Android on Tablets
Redesigning the browser interface — Part two
It’s been in development for a while now and it’s gone through many iterations. Lucas and Yuan have both written great pieces about a lot of the project goals, ideas, and implementation processes. Now, I’d like to throw my hat in with some more on the UI/UX aspects of this redesign.
We believed that the general browsing experience on tablet devices could be improved. So, we started by diving into our homework and proposed what you currently see on Firefox Beta, a “V1” iteration of improvements.
Bigger screens, different environments, different ergonomics, just different. Tablet devices are just different enough that simply porting over what we learned from our mobile product wasn’t enough.
There was an opportunity to offer more value to the user here. From our studies, we knew that tablets were often used in the home rather than on-the-go, and probably in parallel with another device as well. They were held at a different distance, and had different ergonomics to consider.
Giving the user more control over their browsing experience was just step one. How we presented these new controls to them was also important. The goal was to make these interactions easy to find, and intuitive to use. We even studied the reach of a user’s grip while holding tablets and phones to help us decide where we might place elements of the UI.
Tabs on top
We knew we needed to bring a tabbed browsing experience to our users, so we started with that. This meant we had to reconsider a number of things in the existing toolbar. How were we going to handle overflow? and how would increasing the height of the toolbar work?
Android’s fragmentation issues made this even harder. To ensure our design was flexible, we looked at a variety of tablet devices in the 7" — 10" range. Ultimately, we used the Nexus 7, 9 and 10 for reference in most of our mocks.
One of the first decisions we made was about the proportions of this new toolbar. On mobile, our toolbar height is 48 dp tall. This was divided by three to create 16 dp “building blocks” that we then use to determine the proportions/space of related elements in the toolbar. But this wasn’t enough. Now, we also needed to determine a responsive width for the tab.
To ensure that our design was flexible, we tried to specify only what we needed to. Requirements were simple: tabs have to be easy to tap, information had to be easy to read, and it just had to work. The persistent “close tab” icon meant we also had to be extra careful with our margins. For that reason, we prioritized the specifications of our spacing around the favicon, page title, and “close tab” icon first.
A couple designs later, we found that three to four tabs was a good minimum to have along the top. Determining this number was even better than specifying a fixed width for each tab since this made it easier to adapt to different devices. By keeping everything related, we hope to create a stronger, more consistent visual language.
A better tabs tray
We wanted the tabs tray to be more about tab management, to be more practical. Since we now had UI in place to allow for quicker and easier tab switching, we were able to extend the tray metaphor over the entire screen. This also opens us up to the possibility of more organization type features in the tray.
Taking hints from the screen dimensions of tablet and desktop type devices, we decided to specify each tab’s width and height to be more similar to that ratio. The goal is to create more parallel between the preview, and what the user actually saw whilst they were browsing.
Providing a consistently amazing user experience across multiple platforms is simply expected — and rightfully so. It’s becoming increasingly common to have a multitude of devices (that are connected in one way or another). Going forward, there will be a lot of focus on the cross-device experience. I believe it’s important to give users a cohesive and natural experience regardless of the device they’re on.