Firefox for Windows 8 Touch — the present and the future

This is a lightning talk I gave on Mozilla 2013 UX Summit. The talk focuses on the background of this Windows 8 project, and design rationale of Firefox for Windows 8 Touch

Transcript

1. Firefox for Windows 8
   the present and the future
   Yuan Wang, Firefox UX Team
   Mozilla UX London Summit, April 2013
   

   View Slide

2. Before Windows 8 ships
   After Windows 8 ships
   http://lockshot.wordpress.com/2012/10/30/windows-eu-ballot-screen-technical-glitch/
   

   View Slide

3. We have to find our own way
   to build as a 3rd party browser
   

   View Slide

4. Windows 8 design language
   

   View Slide

5. View Slide

6. Good luck making it flat!
   

   View Slide

7. Embrace Windows 8 new
   touch gestures
   1
   

   View Slide

8. Top area for navigation
   Bottom area for
   commands
   Full-screen browsing
   buttons
   

   View Slide

9. Top area for navigation
   Bottom area for
   commands
   Full-screen browsing
   buttons
   

   View Slide

10. Use finger for what
    they are good at
    

    View Slide

11. Use finger for what
    they are good at
    

    View Slide

12. Use finger for what
    they are good at
    Keep interactions
    reversible
    

    View Slide

13. Design for touch but
    remember the mouse
    2
    

    View Slide

14. An option to
    always show tabs
    

    View Slide

15. An option to
    always show tabs
    

    View Slide

16. Reevaluate what is essential
    and what you can take out
    3
    

    View Slide

17. A simplified setting panel
    One level, flat hierarchy
    Page 1 Page 2
    

    View Slide

18. Selected Texts Selected Texts and Image
    Image Links
    Links
    Images
    Selected Text Links
    Copy
    Search Bing for “...”
    Copy
    Search Bing for “...”
    Select all
    Save to picture library
    Copy image
    Copy image location
    Open image in new tab
    Copy
    Search Bing for "..."
    Open link in new tab
    Copy link
    Bookmark link
    Save to picture library
    Copy image
    Copy image location
    Open link in new tab
    Copy link
    Open link in new tab
    Copy link
    Bookmark link
    Texts Images Links
    Mostly frequently used actions
    Least frequently used actions
    Legend
    Maximum 5 actions
    in every context menu
    Grouped by objects
    

    View Slide

19. 
    Mozilla - Home of the
    Prioritize for the
    most common use
    case
    Design from constraints
    

    View Slide

20. 
    Mozilla - Home of the
    Prioritize for the
    most common use
    case
    Design from constraints
    

    View Slide

21. Top Sites Bookmarks
    Yuan Wang / Pinterest Hulu The Verge
    Co. Design The Designer Fund Home | SFJAZZ
    Klout | The standard of Influ... Sosh :: San Francisco
    Top Sites Bookmarks History Synced Tabs
    Top Sites Bookmarks
    Yuan Wang / Pinterest Hulu The Verge
    Co. Design The Designer Fund Home | SFJAZZ
    Klout | The standard of Influ... Sosh :: San Francisco
    We didn’t get right the first time
    

    View Slide

22. Understand the guidelines, but
    don’t be afraid to break them
    4
    

    View Slide

23. Reflect Firefox personality
    and branding
    5
    

    View Slide

24. Balances power
    and simplicity
    Takes care of you
    Makes sense
    of the web
    - Adapt lightweight
    Win8 style
    - Australis
    - Awesome search
    - “Share” charm
    - Do Not Track
    Finely crafted
    - High resolution
    

    View Slide

25. Embrace Windows 8 new touch gestures
    Design for touch but remember the mouse
    Reevaluate what is essential and what you can take out
    Understand the style guide, but don’t be afraid to break them
    Reflect Firefox personality and branding
    1
    2
    3
    4
    5
    

    View Slide

26. Iterate + Collaborate
    

    View Slide

27. Help us test Firefox for Windows 8!
    Thank you
    

    View Slide