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?

Reimagine-Firefox-on-tablet_banner.png

DESIGN PROCESS

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:

  1. Desktop controls were familiar to participants and they adopted them quickly
  2. Visual affordance built expectations
  3. Preview of individual tabs were helpful for tab switching
  4. Tab groups met the needs of a small set of tablet users
  5. 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.


DESIGN SOLUTION

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

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.

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.

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

The new tablet interface will offer a simple 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.

The new tablet interface will offer a simple 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.

Private browsing allows you to browse the Internet without saving any information about which sites and pages you’ve visited.

FUTURE CONCEPTS

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!

Add a new tab by long press if there is empty space on the tab strip. [Bug 1015467]

Add a new tab by long press if there is empty space on the tab strip. [Bug 1015467]

Pin a tab from tab strip [Bug 1018481]

Pin a tab from tab strip [Bug 1018481]

Visual preview your background tab, concept a: individual peek [Bug 1018493]

Visual preview your background tab, concept a: individual peek [Bug 1018493]

Visual preview background tabs, concept b: thumbnail switching [Bug 1018493]

Visual preview background tabs, concept b: thumbnail switching [Bug 1018493]

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.