UX Principles Behind Firefox for Windows 8 Preview

Yuan Wang

2

Two weeks ago, Firefox released a preview build for Windows 8! This is a version of Firefox that runs in both the “classic desktop” environment, and in the new “Windows 8 (Metro)” environment. As the UX designer on this project, I would like to share a bit about the experience design principles behind this preview.

 

Windows 8 Native Interactions

Windows 8 has its own patterns on navigation, touch, and commands. It promotes direct interactions with content, leverages the screen or device edge for contextual commands. Influenced by Swiss design and Modern Bauhaus, the design of Windows 8 feels clean, crispy, flat, and grid-based.

Embracing the new interaction languages and design constrains of Windows 8, Firefox is getting a modern coat of paint.

  • Navigation (URL bar and tab panels) is the top for navigating and switching in between sites
  • App bar is at the bottom for contextual commands(bookmark, pin, find in page, etc)
  • App contracts (search and share charm) are hooked up, to bind Firefox with system UI
  • Snap view and filled view are supported for multitasking needs

We are excited about the new tile-based Start Page, where users can see their top sites, bookmarks, recent history, and pinned sites in one place. If you are interested about the details, here is a early stage video prototype.

Consistency Across Platforms

Firefox is the flagship brand that all our consumer products fall under. The big family includes Firefox Desktop, Firefox for Mobile, Firefox OS, and the latest member: Firefox for Windows 8. My Firefox UX team have been working hard in the past few months to pursue one of our major goals of the year: getting Firefox to feel like one product [a related presentation by our Firefox UX lead]

While Firefox for Windows 8 is getting a new look and feel, our visual design lead Stephen Horlander and I have also put lots of thoughts on making it feel like a member of the Firefox family.

1. Content layering

Layering of content has been a common UI element sense in Firefox for Mobile(Diagram made by Ian Barlow). Now this concept has been widely applied to Firefox for Firefox OS and Windows 8 as well.

Firefox for Windows 8 promotes full-screen browsing experience, at the same time also provides users various controls that are hidden behind the web content. Users can easily invoke these controls with a edge swipe(or right-click when mouse in use). Darker background color is used on the tab preview panel as if the panel is deeper beneath the web content. Reversible sliding transitions simulate the movement of revealing more content.

2. Unified and distinctive curves

We use curved tab shape to communicate a soft and friendly experience. This unique and organic shape also differentiate ourselves from other competitors.

 3. Awesome screen

The unique and powerful Firefox’s feature. Current preview build has already implemented the awesome screen feature to provide enhanced search function. Start typing to get a “frecency-based” list of your history and bookmarks. The awesome screen will always provide multiple internet search options for your input.

 

 

A Touch-optimized Browser

Given the fact that Windows 8 runs across classic desktop and mobile environment, it’s important to point out that the user interface of Firefox for Windows 8 is designed for touch. With the official launch of Windows 8 and releases of new Windows 8 devices, more and more mouse and keyboard PC users will start using PC that comes with a touch-enabled screen. The team started the design from scratch, embraced Windows 8 touch languages, such as edge swipes, snapping, flicking, and horizontal panning, reimagined the browsing experience on this new touch-based platform.

In the mean time, we understand the importance of Firefox desktop users. We will make sure all the touch-based tasks can also be achieved by interacting with mouse and/or keyboard. Moreover, Firefox for Windows 8 Preview have already included a Tabs-on-top feature for desktop users. This touch-optimized interface will work fine with mouse and keyboard.

 

Lastly, we know this is an early preview and we know there are bugs and missing features, so we would appreciate your feedback. We will be working hard polishing designs, finishing up more features, and improving responsiveness in the coming months to deliver a delightful Firefoxy experience for Windows 8.

 

Related Links:

Complete Q2 update document    |   Metro project wiki

2 responses

  1. Ashwin wrote on ::

    Wow, this is wonderful and simply beautiful stuff. Very reflective of the Firefox brand in its design language, love the softness that the background and curves bring. Also shows a lot of user research and proposes some innovative solutions that other browsers just aren’t doing well (‘frecency’ search is kind of crappy on Chrome, and the Top Sites home just isn’t as beautiful / soft as the one illustrated here).

    Love it, well done!

  2. Persistant wrote on :

    I have left Firefox few months ago for Chrome because of a number of issues (flash) and response time. I have started to try UX and it seems to be significantly improved in particular in memory management. A few bugs still but for a nightly version it is great. (Logmein is not working though. Freezes UX at connection.)

    I love the new design and wait to see UX on W8 UI.

    Thanks for all the good work.
    //CJT