Designing great products that make sense & bring joy

Video Sketching Firefox Metro Start Page

Starting from March, I began to work on a challenging but super exciting project: designing Firefox on Windows 8. As you may know, Windows 8 will employ a new user interface based on Microsoft’s Metro design language. This Metro environment is a tile-based, touch-optimized, cross-platform system.

To make Firefox shine on this unique environment, the UX team on MetroUI project has been focusing on solving some design challenges, such as: delivering a consistent “Firefoxy” experience and also making it native on Metro; designing an equally awesome experience of Firefox Metro on desktop using mouse and keyboard.

Another challenge for me as a UX designer is prototyping and testing a product that has a brand new touch language. I found it hard to simulate the W8 touch experience in a quick and dirty way, withouting building a functional product. In order to get the experience out and gain enough feedback to iterate, I decided to “video sketch” the Start Page of Firefox Metro by just using Keynote.

Making a video sketch by Keynote is simple:

Step 1: Create a user story. Write a script with scenes.

Step 2: Place your mockups into Keynote, put them in sequence to match the scenes you created.

I will be posting more video sketch demos on Firefox Metro’s main features, such as browsing web pages, searching via awesomescreen, using app contracts, etc. Also stay tuned for more awesomeness about Firefox Metro from Stephen Horlander, Brian R. Bondy, and Asa Dotzler.

The design has really been growing on me, since it was first shown. I think it would be great to use!

The only criticism I have is that I think the app bar buttons should have labels and be contained in circles, like the other Metro-style apps. Otherwise, it doesn’t fit with the design language, so it looks like the buttons are disabled.

Thanks for the pointing that out, Josh! I agree with you that circled app icons fit the Metro design standards well, and are presented as touch targets in a straightforward way. However, if you check out Firefox on the other platforms, you may notice the ring style icon with labeling is not in the Firefox UI design language. There is a challenge on unifying FX experience cross platforms and at the same time making it native.

Our visual designer and me are playing around with different approaches. And I will be soon testing them out with users to figure out the best design solution.

I know this is not a good place for making feature requests, but I’m doing so because it’s really Really REALLY important, and I don’t know what’s the best place to say this:

PLEASE PLEASE PLEASE make the tabs in Metro Firefox always available — not like IE10 metro where you have to right-click to view the tabs. Please this is EXTREMELY important for using the browser on a laptop with mouse and keyboard. And, give an option to disable the thumbnail previews for tabs.

We take the experience of Firefox Metro on desktop seriously. There are already some design ideas to provide easier access to tabs, such as tabs always on top. We’ll be posting more details in the near future!

The tabs are not EASIER to use than before., they are HARDER. Easy, but harder. Also, I would not rely on SWIPING gestures, with mouse they are pain in the a**. The function of the ‘app bar’ is quite obscure to me, is it just a place where all the junk not fitting enywhere else will be dumped? Dont like that kind of design (also, swiping gesture, gah).

@Yuan
How does it look like when a website is loaded? I cannot figure that out.
Will the address bar disappear? I personally like the way Internet Explorer handles this. The full page, uncluttered, no chrome, just the content of the page.

I do not have a touch enabled device, but as a savvy keyboard user, shortcuts are always there to fast open a new tab or to close one. Thus, a lot of that content unrelated functionality could be hidden to the app bar, couldn’t it?

The interface looks great, which make me to think we might be able to reuse the UI on different platforms; it is an HTML5 application after all. What’s about using this as a full-screen mode (kiosk) on different platforms including both on desktop-based operating systems (Win/Mac/Linux) and other platforms (Android and [gaming] consoles)?