1060413 - Define visuals/UI for default state of tablet browser

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: Theme and Visual Design, defect)

Description

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Using this to track the visuals of the new tabs on top style browser UI.

Comment 1

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_tabletui_vert_mock1.png

Attaching a quick WIP of what we have right now, I have the specs WRT gutters and margins somewhere, will attach later!

Comment 2

[Lucas Rocha (:lucasr)]

Anthony, this is looking pretty good. I have one concern though: the browser chrome is taking a bit too much of the screen's real estate. Maybe experiment shrinking the toolbar and tab strip a bit? I'd be ok with such a spacious browser chrome if we had a design for hiding/shrinking the toolbar+tab strip as you scroll the page.

Comment 3

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_tab_proportions.png

I definitely want to keep this as small and "out of the way" as possible. But, the other side of that would be to consider tap-ability as well. Especially if we have to fit in functionality like closing a tab.

I've attached a rough shot of the proportions I used to define the structure here. It's about a 2 - 2.5 relationship.

I'm going to keep playing with this and I think you're right - figuring out a way to gracefully define the behaviour of this toolbar as the user scrolls and resizes will be the best way to adapt the sizes here. Ideally, I'd like to only see the tabs if I want to switch tabs/close tabs.

Comment 4

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_tabletui_vert_mock3.png

Another WIP shot to keep you guys in the loop. 

Incorporating more tabs along the top here and sorting out more of the dimensions for things like the icons and the size of the toolbar. But, still not sure about how the tabs stack together and everything. 

Lucas, we had concerns about the height of it compared to before, but after shrinking the toolbar height to be the same as the tabs on top (96dp), I like the space that this offers more. It also makes the buttons feel more comfortable to tap and I think that UX > visually taking up more space (24dp difference) since we could be smart about hiding the UI anyways. But we could definitely keep iterating on this :).

Comment 5

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_tabletui_vert_mock2.png

Here's a shot of what it looks like when the tabs height = the toolbar height. The issue is more evident because if we simply make the URL bar any smaller, we lose out on tap-ability and legibility. :\

Comment 6

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to Anthony Lam (:antlam) from comment #4)
> Created attachment 8488242 [details]
> prev_tabletui_vert_mock3.png
> 
> Another WIP shot to keep you guys in the loop. 

I notice that each tab has the visual curves, but on Desktop only the active tab has the curves. All other tabs are separated by vertical dividers. Are we going to move that direction too?

Comment 7

[Lucas Rocha (:lucasr)]

(In reply to Mark Finkle (:mfinkle) from comment #6)
> (In reply to Anthony Lam (:antlam) from comment #4)
> > Created attachment 8488242 [details]
> > prev_tabletui_vert_mock3.png
> > 
> > Another WIP shot to keep you guys in the loop. 
> 
> I notice that each tab has the visual curves, but on Desktop only the active
> tab has the curves. All other tabs are separated by vertical dividers. Are
> we going to move that direction too?

Yeah, I thought we were taking the same approach than desktop too (this is what is in Nightly now).

Comment 8

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

(In reply to Mark Finkle (:mfinkle) from comment #6)
> (In reply to Anthony Lam (:antlam) from comment #4)
> > Created attachment 8488242 [details]
> > prev_tabletui_vert_mock3.png
> > 
> > Another WIP shot to keep you guys in the loop. 
> 
> I notice that each tab has the visual curves, but on Desktop only the active
> tab has the curves. All other tabs are separated by vertical dividers. Are
> we going to move that direction too?

Yes we are moving to the same direction as Desktop UI. I believe Anthony used that mockup just to figure out measurements.

Comment 9

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: spec_structure_fxtabs1.png

Here's the basic structural proportions and some clearance margins / gutters. I.. posted it in the other bug too.. by accident. :P

Comment 10

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: icons_toolbar_default.zip

So we figured out Nexus 7 takes XHDPI only so I've scaled these down to MDPI and then from there went back up to cover XXHDPI.

Give these icons a try :) I'll post the updated preview of the vert view after this

Comment 11

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: spec_structure_fxtabs2.png

The last one was probably wrong - I think I made that assuming it was XXHDPI, which we later found out it wasn't. :P

Comment 13

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_tabletui_vert_mock5.png

Attaching up to date UI for default state (with 2 background new tabs)

Comment 14

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

re icons in comment 10:

1) There is no forward button arrow.

2) I apologize but I made a mistake in a comment on IRC - the tabs panel button is actually *two* icons, [1] & [2], I assume for the tab added and tab removed animations.

[1]: https://mxr.mozilla.org/mozilla-central/source/mobile/android/base/resources/drawable-large-mdpi-v11/new_tablet_tabs_count_foreground.png
[2]: https://mxr.mozilla.org/mozilla-central/source/mobile/android/base/resources/drawable-large-mdpi-v11/new_tablet_tabs_count.png

Comment 15

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_tabletui_vert_mock6_forward.png

Doh - completely forgot about that. Here's a preview, both icons to follow.

Comment 16

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_tabletui_vert_mock6.png

Comment 17

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: icons_fwd_tabparts.zip

Icons! (Forward arrow and tab icon parts)

Comment 18

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_tabletui_vert_mock7.png

Truncating with ... seems to waste a character. We have another bug filed somewhere to experiment with this.

Comment 19

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_tabletui_vert_mock7_forward.png

Comment 20

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Awesome explorations!I imagine the titles of tab panel thumbnails will need the same treatment.

One benefit that comes with using shadow is that title scrolling will feel a little more natural. 

I can see in the future when the user long-press on a background tab on the tab strip, Fennec initiates title scrolling. This will help the user identify a site in the background before switching to it. Compared with desktop UI, tablet UI doesn't have hover state. Though a part of the tab surface will be covered by your finger, but having the title scroll should help with identifying the tab.

Comment 21

[Michael Comella (:mcomella) [NI reported issues only: ex-Mozilla]]

Anthony, there is also no menu icon for private browsing.

Comment 22

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

^ Private browsing mode assets to follow :) Good point Michael.

Comment 23

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: Old tabs icon.zip

Have a go with these ones.. I performed an uncomfortable level of magic here so let's hope this works! (e.g. there is no transparency I just used the color straight up, but it doesn't seem necessary - I could be wrong).

Comment 24

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

just making sure you got these icons ^ :)

Comment 25

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Attachment: prev_tabletui_vert_mock9.png

As per Lucas's suggestions, we'll try 56 dp for this V1, 60 dp seems a bit of a jump to start off from.

Comment 26

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Comment on attachment 8490135 [details]
spec_structure_fxtabs2.png

Greens have changed:

60dp > 56dp

Comment 27

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Comment on attachment 8490135 [details]
spec_structure_fxtabs2.png

making non-obsolete after discussions.

We'll try this for V1 and iterate after.

Comment 28

[Lucas Rocha (:lucasr)]

Anthony, can I have the same type of specs (spacings, paddings, sizes, etc) for the tab strip?

Comment 29

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

I've got these specs in these two bugs. 

https://bugzilla.mozilla.org/attachment.cgi?id=8499006

https://bugzilla.mozilla.org/attachment.cgi?id=8493280

Do they cover what you're looking for? Just want to avoid posting multiple specs in multiple places :)

Comment 30

[Lucas Rocha (:lucasr)]

(In reply to Anthony Lam (:antlam) from comment #29)
> I've got these specs in these two bugs. 
> 
> https://bugzilla.mozilla.org/attachment.cgi?id=8499006
> 
> https://bugzilla.mozilla.org/attachment.cgi?id=8493280
> 
> Do they cover what you're looking for? Just want to avoid posting multiple
> specs in multiple places :)

They do, cheers!

Comment 31

[Lucas Rocha (:lucasr)]

Let's close it for now and post future assets on the respective bugs.