Closed Bug 1060413 Opened 6 years ago Closed 5 years ago

Define visuals/UI for default state of tablet browser

Categories

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

x86
Android
defect
Not set

Tracking

()

RESOLVED FIXED
Firefox 36
Tracking Status
firefox36 --- fixed

People

(Reporter: antlam, Unassigned)

References

Details

Attachments

(5 files, 10 obsolete files)

28.63 KB, application/zip
Details
67.71 KB, image/png
Details
7.04 KB, application/zip
Details
4.06 KB, application/zip
Details
83.53 KB, image/png
Details
Using this to track the visuals of the new tabs on top style browser UI.
Attached image prev_tabletui_vert_mock1.png (obsolete) —
Attaching a quick WIP of what we have right now, I have the specs WRT gutters and margins somewhere, will attach later!
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.
Flags: needinfo?(alam)
Attached image prev_tab_proportions.png (obsolete) —
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.
Flags: needinfo?(alam)
Attached image prev_tabletui_vert_mock3.png (obsolete) —
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 :).
Attached image prev_tabletui_vert_mock2.png (obsolete) —
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. :\
(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?
(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).
(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.
Attached image spec_structure_fxtabs1.png (obsolete) —
Here's the basic structural proportions and some clearance margins / gutters. I.. posted it in the other bug too.. by accident. :P
Attachment #8483632 - Attachment is obsolete: true
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
The last one was probably wrong - I think I made that assuming it was XXHDPI, which we later found out it wasn't. :P
Attachment #8489649 - Attachment is obsolete: true
Flags: needinfo?(michael.l.comella)
Duplicate of this bug: 1065396
Attached image prev_tabletui_vert_mock5.png (obsolete) —
Attaching up to date UI for default state (with 2 background new tabs)
Attachment #8481477 - Attachment is obsolete: true
Attachment #8488242 - Attachment is obsolete: true
Attachment #8488246 - Attachment is obsolete: true
Flags: needinfo?(michael.l.comella)
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
Flags: needinfo?(alam)
Attached image prev_tabletui_vert_mock6_forward.png (obsolete) —
Doh - completely forgot about that. Here's a preview, both icons to follow.
Flags: needinfo?(alam)
Attached image prev_tabletui_vert_mock6.png (obsolete) —
Attachment #8490209 - Attachment is obsolete: true
Attached file icons_fwd_tabparts.zip
Icons! (Forward arrow and tab icon parts)
Attached image prev_tabletui_vert_mock7.png (obsolete) —
Truncating with ... seems to waste a character. We have another bug filed somewhere to experiment with this.
Attachment #8490874 - Attachment is obsolete: true
Attached image prev_tabletui_vert_mock7_forward.png (obsolete) —
Attachment #8490873 - Attachment is obsolete: true
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.
Anthony, there is also no menu icon for private browsing.
^ Private browsing mode assets to follow :) Good point Michael.
Attached file 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).
just making sure you got these icons ^ :)
Flags: needinfo?(michael.l.comella)
Flags: needinfo?(michael.l.comella)
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.
Attachment #8490915 - Attachment is obsolete: true
Attachment #8490916 - Attachment is obsolete: true
Comment on attachment 8490135 [details]
spec_structure_fxtabs2.png

Greens have changed:

60dp > 56dp
Attachment #8490135 - Attachment is obsolete: true
Comment on attachment 8490135 [details]
spec_structure_fxtabs2.png

making non-obsolete after discussions.

We'll try this for V1 and iterate after.
Attachment #8490135 - Attachment is obsolete: false
Anthony, can I have the same type of specs (spacings, paddings, sizes, etc) for the tab strip?
Flags: needinfo?(alam)
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 :)
Flags: needinfo?(alam) → needinfo?(lucasr.at.mozilla)
(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!
Flags: needinfo?(lucasr.at.mozilla)
Let's close it for now and post future assets on the respective bugs.
Status: NEW → RESOLVED
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 36
You need to log in before you can comment on or make changes to this bug.