[UX] Multitasking

[bbinto]

Current Design Status

• Multitasking mocks are done
• Eng/UX to meet to discuss further breakdown after mocks have been reviewed

Prototype:

https://mozilla.invisionapp.com/share/GFQ4EM2CMVN

Prototype for Tabs + Sessions + Home:

• https://mozilla.invisionapp.com/share/GFQ4EM2CMVN#/334398019_Full_01-_Tab_Viewer_-Current_Session-
• https://mozilla.invisionapp.com/share/GFQ4EM2CMVN#/335064762_Full_01-_Tab_Viewer_-Scrolling-

Fenix Flows (WIP)
https://docs.google.com/drawings/d/11Kj7OAvit6bE6QQt_ven0xnHGhmwu4Jc_N_oazdryAo/edit

┆Issue is synchronized with this Jira Task

[bbinto]

@lime124 added this issue myself - would you mind checking with the the team about t-shirt sizing, progress, mocks etc.

Since this has to go into milestone 2 for eng, we should have this set as a P1?

[topotropic]

Meta #98

Prototype: https://mozilla.invisionapp.com/share/GFQ4EM2CMVN

[bbinto]

@topotropic could you please add mocks/flows.

[shorlander]

Here are the links to the Prototype that combines Tabs + Sessions + Home:

• https://mozilla.invisionapp.com/share/GFQ4EM2CMVN#/334398019_Full_01-_Tab_Viewer_-Current_Session-
• https://mozilla.invisionapp.com/share/GFQ4EM2CMVN#/335064762_Full_01-_Tab_Viewer_-Scrolling-

@boek @colintheshots is this enough to get started?

[colintheshots]

@shorlander Are we doing title and favicon? I've heard a number of folks suggest they're bad for security due to phishing. They might not be as bad on the multitasking page though?

Where do the backdrop graphics come from for each tab, below the title and favicon? Is that the top of the tab's thumbnail scaled to fit the horizontal width of that button? It seems a lot of desktop-sized sites might only show a plain background color, but we could work with this.

I can't see from Invision if any animations are desired. It seems like there might be some kind of reveal animation on choosing or adding a tab and maybe just the default remove animation on deleting a tab. Is that right?

Also, the "+" button in multitasking might not be immediately obvious in terms of "buttonness" affordances. It might be too flat. One could simply flash the button backgrounds briefly or use some kind of SVG ShapeShifter animation perhaps. Even a circle around the "+" might help. It could also become some kind of FAB or bottom button, since it seems to be the primary action for the screen and it's far out of thumb reach.

[shorlander]

@shorlander Are we doing title and favicon? I've heard a number of folks suggest they're bad for security due to phishing. They might not be as bad on the multitasking page though?

That's not a concern for tabs since it's not where we display identify information. (i.e. it's the status quo)

Where do the backdrop graphics come from for each tab, below the title and favicon? Is that the top of the tab's thumbnail scaled to fit the horizontal width of that button? It seems a lot of desktop-sized sites might only show a plain background color, but we could work with this.

I would like to do what we do for Highlights in Activity Stream and try and create nice imagery for each tab if possible.

Which is a fallback approach:

1. OG:image
2. Generated thumbnail

We could start with just thumbnails for the MVP?

I can't see from Invision if any animations are desired. It seems like there might be some kind of reveal animation on choosing or adding a tab and maybe just the default remove animation on deleting a tab. Is that right?

We have not defined any yet. But off the top of my head it would be nice to have:

• Scale and grow for restoring a tab
• Sliding for swipe gestures

Also, the "+" button in multitasking might not be immediately obvious in terms of "buttonness" affordances. It might be too flat. One could simply flash the button backgrounds briefly or use some kind of SVG ShapeShifter animation perhaps. Even a circle around the "+" might help. It could also become some kind of FAB or bottom button, since it seems to be the primary action for the screen and it's far out of thumb reach.

Trying to leverage existing Android patterns for group related actions, but agreed we might want to increase the affordance.

[boek]

@shorlander sounds great. We won't be able to generate thumbnails until we get the relevant APIs from GeckoView. But in the meantime we can potentially use the OG:image and generate a thumbnail based on the domain like we have in Focus.

[shorlander]

Agreed with Colin that there are different ways to expose these affordances but I would like to start here:

[bbinto]

Animations are missing, will be covered #167