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

Firefox Android Tablet Refresh - IxD Proposal

Yuan Wang
June 03, 2014

Firefox Android Tablet Refresh - IxD Proposal

What is a tablet-centric experience for Firefox Android like? Based on the tablet sprint findings, I presented a interaction design proposal for Android team.

Yuan Wang

June 03, 2014
Tweet

More Decks by Yuan Wang

Other Decks in Design

Transcript

  1. Android Tablet Refresh
    IxD Proposal
    Yuan Wang
    June 2014

    View Slide

  2. Firefox for Android tablet | JUNE 2014 | Page 2
    Recap
    Tabs on top
    Visual tab previews
    To build:
    To explore:
    Tab groups
    Make creating, switching, and managing
    tabs a quicker and more fluid experience
    !
    Balance a user’s desire to switch pages in a single
    tap with more powerful tools for grouping
    multiple tasks
    Goals:

    View Slide

  3. Firefox for Android tablet | JUNE 2014 | Page 3
    Tab Structure
    !
    !
    Tab Interactions
    !
    !
    Tab Status
    !
    Tab Groups
    • Australis-style tabs on top
    • Gestural switch
    • Sync tabs on home screen
    • Blurred private tab thumbnails
    • Pin tab gesture
    • Visual preview concepts
    • Visual indicator for sound, unread, etc
    Outline
    • Additional feature to tab panel

    View Slide

  4. Tab Structure

    View Slide

  5. Firefox for Android tablet | JUNE 2014 | Page 5
    1. Tabs — Australis-style tabs on top with a tab panel
    Website title Website title Website title Website title Website…
    Tabs on top with a tab panel
    tab panel

    View Slide

  6. Firefox for Android tablet | JUNE 2014 | Page 6
    1. Tabs — Australis-style tabs on top with a tab panel
    Website title
    Website title Website title
    TABS PRIVATE TABS

    View Slide

  7. Firefox for Android tablet | JUNE 2014 | Page 7
    2. Private Tabs — i01: same mode as normal tabs
    PROS CONS
    • One single interface
    • Continuity between normal and
    private, no mode switching
    • Adding complexity to “Plus” icon
    • Differentiating private and normal tabs can
    be tricky
    • A perception of “not so private”
    Website title Website title Website title Website title
    Normal foreground tab Private background tab
    • Ask users if they want to open a private tab? (Firefox Blush addon)
    • Ability to turn any open tab from regular to private
    Trade-off solutions

    View Slide

  8. Firefox for Android tablet | JUNE 2014 | Page 8
    2. Private Tabs — i02: a private and a normal mode
    Website title Website title Website title Website title Website…
    Tabs on top with a tab panel
    Website title Website title Website title Website title Website…
    Use colors or visual labels to
    distinguish private browsing mode
    To improve continuity between normal and private modes, the browser
    should support ”Back to regular” and “Back to private”.

    View Slide

  9. Firefox for Android tablet | JUNE 2014 | Page 9
    2. Private Tabs — i02: a private and a normal mode
    Touch points to switch to private or
    regular browsing mode
    New Tab
    New Private Tab
    Menu option to launch regular
    mode and open a new tab
    New Tab
    New Private Tab
    Menu option to launch priva
    mode and open a new privat
    Website title
    Website title Website title
    TABS PRIVATE TABS
    Website title
    Website title Website title
    TABS PRIVATE TABS
    a burred private
    thumbnail based on site
    color or a picture from the
    site

    View Slide

  10. Firefox for Android tablet | JUNE 2014 | Page 10
    3. Synced Tabs — a new addition to home screen
    Firefox Home Website title Website title Website title Website…
    TOP SITES BOOKMARKS READING LIST HISTORY SYNCED TABS
    Nightly on iMac
    Firefox on Nexus 5
    Synced tabs serve the same function as bookmarks, top sites.
    They are shortcuts to your interested destinations.

    View Slide

  11. Tab Interactions

    View Slide

  12. Firefox for Android tablet | JUNE 2014 | Page 12
    1.1 Add a new tab
    Website title Website title Website title Website title Website…
    Website title Website title Website title Website title Website…
    Adopting UI structure from Firefox on Desktop, “Plus” icon is visible on the
    top right side of tab strip. Creating a new tab is just one tap away.
    — from tabs on top

    View Slide

  13. Firefox for Android tablet | JUNE 2014 | Page 13
    1.1 Add a new tab — from tabs on top
    Long press on the empty space of tab
    strip can load a new tab.
    !
    Once touch is released, the tab loads
    in the foreground. “Plus” indicator
    rotates to a “Close” indicator.

    View Slide

  14. Firefox for Android tablet | JUNE 2014 | Page 14
    1.1 Add a new tab
    On the tab panel, the “Plus” icon stays as the same position. Tabs are listed in a
    chronological order. A new tab loads from the end of tab queue.
    Website title
    TABS PRIVATE TABS
    Website title
    Website title Website title
    TABS PRIVATE TABS
    — from tab panel

    View Slide

  15. Firefox for Android tablet | JUNE 2014 | Page 15
    1.2 Close a tab
    Website title Website title Website title Website title Website…
    Website title
    Website title
    Website title
    TABS PRIVATE TABS
    Hit “Close” icon on the tab or thumbnail to close a tab. Swiping up can
    also close a thumbnail on the tab panel.

    View Slide

  16. 1.3 Tab switching
    Website title Website title Website title Website title Website…
    Pressed-down state of a background
    tab. Release to switch the tab.
    Website title
    Website title Website title
    TABS PRIVATE TABS
    Website title
    Website title Website title
    TABS PRIVATE TABS
    To switch to another tab on tab panel, simple tap the thumbnail. Same for private tab panel.
    When a private blurred thumbnail is pressed
    down, show the original thumbnail.
    Pressed-down state of a
    normal tab

    View Slide

  17. Firefox for Android tablet | JUNE 2014 | Page 17
    1.4 Reorder a tab
    Reordering a tab is supported on tab panel only.
    To initiate, press down a tab thumbnail. The header on the panel turns to a tray for deleting the selected tab.

    View Slide

  18. Firefox for Android tablet | JUNE 2014 | Page 18
    1.4 Reorder a tab
    Reordering a tab is supported on tab panel only.
    To initiate, press down a tab thumbnail. The header on the panel turns to a tray for deleting the selected tab.

    View Slide

  19. Firefox for Android tablet | JUNE 2014 | Page 19
    1.5 Tab Overflow — tabs on top
    Firefox Home Sketch Guides - Goo… Bohemian Coding - Rul… Sketch Guides - Goo…
    Sketch Guides - G… Bohemian Coding - R… Sketch Guides - G…
    Sketch Guides… Bohemian Cod… Sketch Guides…
    Firefox Home Sketch Guides - G…
    Firefox Home Sketch Guides… Sketch Guides…
    Sketch Guides… Bohemian Cod… Sketch Guides… Sketch Guides… Sketch Guides… Sketch Guides…
    Firefox Home
    Subtle gradient to indicate overflow
    No overflow
    Overflow stage 1:
    Shorten the length of
    each tab
    Overflow stage 2:
    Shorten the length of
    each tab + dismiss “Close”
    Overflow stage 3:
    Scroll through tab strip to
    view overflowed tabs

    View Slide

  20. Firefox for Android tablet | JUNE 2014 | Page 20
    1.5 Tab Overflow — tab panel
    Website title Website title
    Website title Website title Website title
    Website title
    Website title Website title Website title Website title
    Website title Website title
    Website title Website title
    Website title Website title Website title
    Website title Website title Website title
    TABS PRIVATE TABS
    A MVP version of tab overflow on tab panel.
    Tabs are organized in a grid layout. Scrolling up and down to reveal more.

    View Slide

  21. Firefox for Android tablet | JUNE 2014 | Page 21
    2. Pin a tab
    Brushing through a foreground tab from right to left triggers
    a “Pin” indicator that follows brushing motion.
    When indicator is pointing 9 o’clock direction, release touch
    to create a pin tab.
    To unpin a tab, brush through a foreground tab from left to right.
    The page should appear as the first tab next to pinned tabs.
    Alternative gesture
    Pin-to-zoom seems also an
    intuitive gesture for this action.
    !
    However, limited space of a tab
    can be tricky to perform a two-
    finger gesture. And it can easily
    trigger system notification bar if
    not performed perfectly.
    Long-press is a common
    gesture for revealing contextual
    actions.
    !
    In this proposal, long-press on
    a background tab triggers visual
    preview. To stay consistent,
    long-press does not trigger any
    action on a foreground tab yet.

    View Slide

  22. Firefox for Android tablet | JUNE 2014 | Page 22
    3. Visual tab preview — i01: individual peek
    Long press to peek at a thumbnail of a background tab.
    Brush the focus through tab strip to view thumbnails from other tabs.

    View Slide

  23. 3. Visual tab preview — i02: thumbnails on top
    Swipe down from tab strip to reveal thumbnails. Release touch focus to switch to thumbnail view.

    View Slide

  24. Tab Status

    View Slide

  25. Firefox for Android tablet | JUNE 2014 | Page 25
    1. Active media
    • is active when one or more tabs
    (including pinned tabs) are playing
    sound
    • is inactive when media player is
    paused or muted by the users
    • can not be affected by OS level sound
    actions, for example “F12/mute”
    Locate the tab that is playing sound, recording, or casting
    Current state
    Firefox
    Support certain sites like
    Youtube, Soundcloud,
    showing a “Play” indicator.
    !
    No indicator when a tab is
    pinned or the media player
    is paused
    Chrome
    Display indicators at the
    right end of active media
    tabs.
    !
    Show status when media
    player is muted, paused,
    and when the tab is pinned.
    A sound indicator

    View Slide

  26. Firefox for Android tablet | JUNE 2014 | Page 26
    1.1 Sound — from tabs on top
    John Coltrane - Olé 1964 - John Coltrane Website title Website title
    1964 - John Coltrane Website title
    i01: status indicator layered on a site’s favicon
    PROS CONS
    !
    • Display site info and status together, useful
    especially for pin tabs
    • A reusable module to display other indicators
    • Legibility of the indicator due to small size
    • Can cause information overload with other
    tab status

    View Slide

  27. Firefox for Android tablet | JUNE 2014 | Page 27
    1.1 Sound — from tabs on top
    i02: stand alone status indicator
    PROS CONS
    !
    • Bigger icon, more direct display • For a pinned tab, favicon has to be hidden to
    show the sound indicator

    View Slide

  28. Firefox for Android tablet | JUNE 2014 | Page 28
    1.1 Sound — from tab panel
    i02: stand alone status indicator
    John Coltrane - Olé
    1964 - John Coltrane Impressionists
    TABS PRIVATE TABS
    PROS
    • Easy to apply to labels of tab thumbnails
    Note: When tab panel is active, sound from the tab should still be playing. No live thumbnail
    for performance issue.

    View Slide

  29. Firefox for Android tablet | JUNE 2014 | Page 29
    1.2 Webcam + Casting — from tabs on top
    i02: stand alone status indicator
    CamRoll - Video Ch… Website title Website title
    1964 - John Coltrane Website title
    i01: status indicator layered on a site’s favicon

    View Slide

  30. Thank you!
    Yuan Wang
    !
    May 2014

    View Slide

  31. Firefox for Android tablet | JUNE 2014 | Page 31
    Findings Tabs - the basics
    1. Desktop style controls are familiar to participants and
    they adopt them quickly
    [Video] Backwards:
    https://www.usertesting.com/highlight_reels/
    ioN8exTzu11TNBioX6x2
    [Video] New Tab: https://www.usertesting.com/
    highlight_reels/biJnGEe1RCtJVsqXREYA?
    id=biJnGEe1RCtJVsqXREYA

    View Slide

  32. Firefox for Android tablet | JUNE 2014 | Page 32
    Findings Tabs - the basics
    2. Visual affordance builds expectations
    [Observations] All participants recognized a “Close” icon on each tab
    and expected that’s how to close a tab

    View Slide

  33. Firefox for Android tablet | JUNE 2014 | Page 33
    Findings Tabs - the basics
    3. Previews of individual tabs are helpful when switching
    between them. Scrolling and dragging through an
    overflow of tabs are expected interactions
    [Observation]People almost unanimously liked current Firefox's
    thumbnail tab preview.
    "I like to see where I am going"
    [Video]Tab overflow and switching:
    https://www.usertesting.com/highlight_reels/
    pZPqngygEnYP1Ebr9ZTy

    View Slide

  34. Firefox for Android tablet | JUNE 2014 | Page 34
    Findings
    4. Provide both "straight forward" features alongside
    "power user" features
    Tabs - more powerful tools
    [Video] Tab group preferences
    https://www.usertesting.com/highlight_reels/1ZYBhtupYYcqV6Lu99gm
    no tab group by default
    +
    tab groups as a customized feature

    View Slide

  35. Firefox for Android tablet | JUNE 2014 | Page 35
    Findings Tabs - more powerful tools
    5. Brand new features that are different but still useful
    require some time to become familiar to the user
    tab groups
    on-screen
    controls

    View Slide