Nowadays mobile space is dominated by applications that are created for mobile phones. Designers often start designing an application for phones first and then scale it for tablets. However, people interact with tablets quite differently due to the unique context of use. For a browser on tablet, you may find people use it in a kitchen for recipes, on a couch reading or shopping, or at home streaming music and videos. How can Firefox innovate and re-imagine the experience for tablet users?
Since January 2014, mobile Firefox UX designers started visioning solutions for an interesting challenge: a Firefox browser that is optimized for tablet specific use cases and taking full advantage of tablet form factor.
The team defined two main user experience goals as the first milestone of this project.
To quickly test our design hypothesis for these two goals, I came up with a 10-day sprint model (inspired by Google Venture's 5-day sprint) for mobile Firefox UX team. I prototyped a few HTML5 concepts (GIF version) using Hype and published them on usertesting.com to get initial feedback from Android users.
What we learned from the sprint testings:
- Desktop controls were familiar to participants and they adopted them quickly
- Visual affordance built expectations
- Preview of individual tabs were helpful for tab switching
- Tab groups met the needs of a small set of tablet users
- Onscreen controls required additional time to get familiar with
Based on what we have learned from design sprints[full report], I put together an interaction design proposal for this redesign[full presentation]. To help myself and the rest of the team understand the scope of this redesign, I divided the work into a few parts, from fundamental structure to detailed interactions. My teammate Anthony Lam has been working closely with me focusing on the visual design of the new UI.
The new Firefox on tablet achieves a good balance between simplicity and power by offering a horizontal tab strip and a full-screen tab panel. Designed for both landscape and portrait use, the new interface takes full advantage of the screen space on tablet to deliver a delightful experience. Here are some of the highlights.
1. Your frequent used actions are one tap away
2. Big screen invites gestures and advanced features
3. Make sense of the Web through enhanced search
4. Your control over privacy as always
Besides basic tab structure and interactions, I have also experimented some gestural actions for tabs. You can view some animations of those experiments via this link. I also included a list below with links to Bugzilla. If there is a concept that sounds interesting to you, feel free to post your thought and help us make it happen!
Based on sprint findings, we also learned that Tab Groups can be very powerful if targeted the right audience. However, not every Firefox tablet users have the need of managing their tabs. We think a good strategy would be provide Tab Groups as an easy-to-opt-in feature in the product. The users can turn it on and off based on their own needs. The design is currently a work in progress. Stay tuned for more updates.
THE BIG PICTURE
Many of the highlighted features above, such as enhanced search, gestural shortcuts, can be adopted by Firefox Android on phone. And you may have noticed the new interface was heavily influenced by the simple and beautiful new look of Firefox on desktop.
Based on screen-sizes, tablet is a perfect platform for merging consistency in between desktop and phone. Focusing on the context of tablet use, Firefox Android on tablet will establish itself as a standalone product of the Firefox family. We are excited to see a re-imagined tablet experience get Firefox to feel more like one product — more Firefoxy — across all our platforms, desktop to tablet to phone.
Currently mobile Firefox team is busy bringing those ideas to life. You can check out our progress by downloading Firefox Nightly build to your Android tablet and choose "Enable new tablet UI" in the Settings. And stay tuned for more awesomeness about this project from Anthony Lam, Lucas Rocha, Martyn Haigh, and Michael Comella.