Re-imagine Firefox on tablet

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

Design process

Beginning in January 2014, mobile Firefox UX designers started envisioning solutions for an interesting challenge: a Firefox browser that is optimized for tablet-specific use cases and takes full advantage of tablet form factor.

The team defined two main user experience goals as the first milestone of this project.

Questions.001 Questions.002

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 the 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 was 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 frequently 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.

Tablet Refresh Presentation.001

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.

Tablet Refresh Presentation.002

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.

Tablet Refresh Presentation.003

4. You have 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.

Tablet Refresh Presentation.004.png.001

Future concepts

Besides basic tab structure and interactions, I have also experimented with 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 thoughts and help us make it happen!

  • Add a new tab by long-tapping on the empty space of horizontal tab strip [Bug 1015467]
  • Pin a tab on horizontal tab strip [Bug 1018481]
  • Visual previews for horizontal tabs [Bug 1018493]
  • Blur effect for private tab thumbnails [Bug 1018456]

 

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 make Firefox feel more like one product — more Firefoxy — across all our platforms, desktop to tablet to phone.

Tablet Refresh Presentation.005

 

Currently the 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!

One comment on “Re-imagine Firefox on tablet”

  1. Caspy7 wrote on

    Will this same design be coming to Firefox OS when it ships on tablets?