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.
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:
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
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
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”.
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
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.
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
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.
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
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.
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
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.
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.
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.
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.
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.
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
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
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
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.
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
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
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
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
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
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
yuuuan
ohtristanart
yunoda
misaaa09
mrmiguelart
cduc
mkc
minamitary
kackington
yuinamiki
michalis_art
chiemitaki
chriscoyier
smashingmag
philnash
destraynor
garrettdimon
vanstee
nonsquared
cherdarchuk
cromwellryan
lauravandoore
brad_frost
