TABLET-FIRST
Consumers 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.
Firefox on tablet aims to achieve a 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.
HIGHLIGHTS
1. Your frequent used actions are one tap away
The new interface features a horizontal tab strip that surfaces your frequent browsing actions, such as switching tabs, opening a new tab, closing a tab.
2. Big screen invites gestures and advanced features
A full-screen tab panel gives a better visual representation of your normal and private browsing sessions. Taking advantage of the big space, the panel can also be a foundation for more advanced options, such as tab groups, gestural actions for tabs.
3. Make sense of the Web through enhanced search
A simplified and convenient search experience. The enhanced search overlay is powered by search history, search suggestions, your browsing history and bookmarks. You will be able to add search engines of your choice and surface them on the search result overlay.
4. Your control over privacy as Always
Private browsing allows you to browse the Internet without saving any information about which sites and pages you’ve visited.
DESIGN PROCESS
10-day Design Sprint
During our initial exploration phase, I came up with a 10-day sprint model (inspired by Google Venture's 5-day sprint) for mobile Firefox UX team to test our hypotheses. 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
Prototyping Micro-interactions
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.
GESTURAL CONCEPTS
THE BIG PICTURE
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 the progress by downloading Firefox Nightly build to your Android tablet and choose "Enable new tablet UI" in the Settings.
OTHER PROJECTS
