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.

Transcript

1. Android Tablet Refresh IxD Proposal Yuan Wang June 2014
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:
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
4. Tab Structure
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
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
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
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”.
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
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.
11. Tab Interactions
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
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.
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
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.
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
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.
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.
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
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.
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.
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.
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.
24. Tab Status
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
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
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
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.
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
30. Thank you! Yuan Wang ! May 2014
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
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
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
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
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