Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Firefox for Windows 8 Touch — the present and the future

Yuan Wang
April 16, 2013

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

Yuan Wang

April 16, 2013
Tweet

More Decks by Yuan Wang

Other Decks in Design

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. Windows 8 design language

    View full-size slide

  5. Good luck making it flat!

    View full-size slide

  6. Embrace Windows 8 new
    touch gestures
    1

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Use finger for what
    they are good at

    View full-size slide

  10. Use finger for what
    they are good at

    View full-size slide

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

    View full-size slide

  12. Design for touch but
    remember the mouse
    2

    View full-size slide

  13. An option to
    always show tabs

    View full-size slide

  14. An option to
    always show tabs

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  20. 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 full-size slide

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

    View full-size slide

  22. Reflect Firefox personality
    and branding
    5

    View full-size slide

  23. 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 full-size slide

  24. 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 full-size slide

  25. Iterate + Collaborate

    View full-size slide

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

    View full-size slide