Firefox UX
Categories: Firefox Interaction Design Mobile

Video Sketching Firefox Metro Start Page

28 responses

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.
  • Step 3: Link your mockups together(create animations, page transitions, or maybe just hotspot link)
  • Step 4: Record your slideshow
  • Step 5: Export as Quicktime movie

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.

28 comments on “Video Sketching Firefox Metro Start Page”

  1. Diane Loviglio wrote on

    Yuan – Love the video sketch – great job with that!

  2. Tom wrote on

    Everything looks great, except icons on appbar.

  3. FrChris wrote on

    Awesome !

    Great design, sleek and logical.
    I wish I could use it already.

  4. Josh T. wrote on

    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.

    1. Yuan Wang wrote on

      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.

  5. Brandon Jackson wrote on

    Nice work. I like the thought for how I feels to work with the application. 非常好。

  6. Jonas wrote on

    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.

    1. Yuan Wang wrote on

      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!

  7. Ryan wrote on

    Well done Firefox team.

  8. Ping from Start Screen of Metro Firefox for Windows 8 Seen in a Video on

    […] UX developer, Yuan Wang posted the video showing the main start screen of Metro […]

  9. Ping from Video mockup shows Metro version of Firefox | EconoLan on

    […] when Mozilla announced plans for a unified Firefox visual identity. Now, there’s more: a concept video whipped up by the Firefox UX Designer Yuan […]

  10. Ping from Designer di Mozilla divulga immagini di Firefox Metro per Windows 8 [video] | Vistablog on

    […] designer di Mozilla Yuan Wang ha rilasciato un video con immagini della versione di Firefox progettato specificamente per […]

  11. The MS nerd wrote on

    Have you tried Expression Blend SketchFlow? It is by far the best UX prototyping tool.

  12. Ping from Mozilla zeigt Firefox als Metro-App on

    […] man es ja sogar bei Mozilla noch bis dahin eine funktionsfähige Version zu veröffentlichen. (via) Tags: Browser, Firefox, Metro UI, Metro UI-Apps, Microsoft, Mozilla, Video, Video-Sketch, Windows […]

  13. Ping from Firefox im Metro-Design im Video gezeigt | Beatmasters WinLite Blog on

    […] der Metro Firefox soll beide Eingaben optimal unterstützen und in einem Video hat Mozilla in Mozilla Blog einmal die bisherige Entwicklung aufgezeigt. Hier kann sich der User bereits ein erstes Bild […]

  14. Ping from Mozilla divulga interface metro do Firefox para Windows 8 | Obvius on

    […] Via: Blog Mozilla UX […]

  15. Ping from Mozilla zeigt Firefox in Metro als Video | Win 8 on

    […] Windows 8 gar nicht mehr so weit hin ist und auch der Release Preview schon demnächst kommen wird.(via) Mehr Artikel About Author […]

  16. Ping from Mozilla zeigt Firefox im Metro-Layout (Video) » mobiFlip.de on

    […] Video. Gar nicht mal schlecht, oder? Kinomodus | Vimeo-Direktlinkvia winfuture Quelle mozilla Acer Iconia A510 25,7 cm (10,1 Zoll) Tablet-PC (NVIDIA Tegra 3 Quad-Core, 1,3GHz, 1GB RAM, 32GB […]

  17. Ping from Firefox Metro per Windows 8: nuovo video e immagini - 19 maggio 2012 - Tecno News | Allnewz.it on

    […] Barra inferiore: con uno swipe dal bordo inferiore è possibile richiamare la barra a scomparsa che contiene il tasto dedicato alla gestione dei componenti aggiuntivi (da sempre grande punto a favore di Firefox rispetto a Internet Explorer). Articolo di Windows Blog Italia Fonte | Blog Mozilla […]

  18. Ping from Firefox Metro per Windows 8: nuovo video e immagini · 8 Log on

    […] Barra inferiore: con uno swipe dal bordo inferiore è possibile richiamare la barra a scomparsa che contiene il tasto dedicato alla gestione dei componenti aggiuntivi (da sempre grande punto a favore di Firefox rispetto a Internet Explorer). Articolo di Windows Blog Italia Fonte | Blog Mozilla […]

  19. Antti Karhu wrote on

    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).

    1. Sven R. Kunze wrote on

      Indubitably, they could shrink the size of the tabs in the nav bar.

      However, the natural mouse or keyboard substitute for swiping gesture is scrolling or page up/down or arrow left/right key. So, no pain in the a**.

      You should read more about Metro and its philosophy. It is about putting the content into the foreground and letting users interact with it directly. It is not about functionality but about content.

      Thus, functionality will be put into the app bar.

  20. Ping from Firefox Metro per Windows 8 prende forma: ecco il video di Mozilla - Chimera Revo on

    […] via Tweet > Tags: metro, mozilla, Mozilla Firefox, windows 8 Articoli Simili […]

  21. Ping from WinTablet.info » Video de Firefox para Metro en movimiento on

    […] y vean… En el blog de Mozilla han colgado un video en el que muestran como quieren que quede Firefox para Windows 8. […]

  22. jack black wrote on

    What about reducing the size of the Tabs but making it comfortably large for touch but not using excess real estate.?

    Are you designing firefox metro with electrolysis in mind? the multiprocess multitab browser for future?

    Will the new firefox metro be awesome with touch and with mouse and keyboard?

  23. Robert wrote on

    Looks great so far. I’m especially loving how you kept touch functionality in mind throughout the whole design. Looking forward to this being my main browser come release of W8!

  24. Sven R. Kunze wrote on

    @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?

  25. Tomer Cohen wrote on

    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)?