989102 - [UX] Improve history sidebar

Status: VERIFIED FIXED

(Firefox :: Bookmarks & History, defect)

Description

[Zhenshuo Fang (:fang) - Firefox UX Team]

Attachment: Screen Shot 2014-03-27 at 3.18.42 PM.png

Improve the history sidebar design. Include but not limited to:

• Better structure
• New icons
• Australis visual style

Attached shorlander's mockup as inspiration.

Comment 1

[Marco Bonardo [:mak]]

this seems to remove the [View] selector, expected? Sounds like we should not until we have an about:history page able to search history better.

Comment 2

[Nicolas Barbulesco]

(In reply to Marco Bonardo [:mak] from comment #1)

> this seems to remove the [View] selector, expected? Sounds like we should
> not until we have an about:history page able to search history better.

I agree that the View menu that we currently have is needed, it is useful.

Another remark : 
In my current Firefox I have the nice titles "Last 7 days", "This month"... Not the Absurd Titles With Capital Letters Everywhere.

Comment 3

[Tim Nguyen :ntim]

FYI, Windows 8 should be taken in consideration. Gradients, sky blue, are not classy on Windows 8.

Comment 4

[Tim Nguyen :ntim]

For Windows 8, I'd suggest a light gray header with a white body.

Comment 5

[Sevaan Franks [:sevaan]]

(In reply to Tim Nguyen [:ntim] from comment #4)
> For Windows 8, I'd suggest a light gray header with a white body.

Thanks Tim, that's exactly the direction I've been going :-)

Comment 6

[Sevaan Franks [:sevaan]]

Improvement suggestions for the history sidebar can be seen here: http://people.mozilla.org/~sfranks/Sidebars/Improving%20History%20Sidebar.pdf

Comment 7

[Luís Miguel [:quicksaver] (not reading bugmail)]

I have a couple of questions/concerns about the new proposed look. (also, should this really be resolved already? Maybe it's my lack of familiarity with how UX bugs usually work, but I wouldn't expect a proposal to "resolve" anything.)

Is there a specific reason for why it's dark? Maybe it's just me, but I don't see any particular gain from that (drastic) change. The only other browser elements that I know of that are dark are:
- the dev tools, which can -optionally- be made dark in order to differentiate dev-UI from user-UI
- the pdf viewer, which is dark to allow for a better reading immersion

Seeing a dark history sidebar in what is an overall light UI (besides looking completely out of place, but maybe that's on purpose?), would tell me "this is something that is completely separate from your normal browser experience, you should have a completely different mindset when using it for [whatever reason] in order to fully take advantage of it".

I think it would look better if it was integrated with the rest of the Australis UI by using similar tones.

Also, I assume the dropdown arrow next to the title will be present in all sidebars and not just history. How will its options be decided, will it be a predetermined list (bookmarks and history only), or will it use some sort of dynamic list based on the "view - sidebar" menu or on the broadcasters available directly?

Comment 8

[Sevaan Franks [:sevaan]]

Hey Luis,

Thanks for the feedback.

We actually started with a light theme but found that it was getting lost when on light-background pages. You can see an example of a mockup here: http://cl.ly/image/2A2G0G0k1O40

The dark theme will also be showing up in a lot more things in the future (such as in-content preferences) and it part of an overall design theme currently titled Project Chameleon, the goal of which is to create a first class, comprehensive Mozilla-recognizable visual language.

So while it may seem inconsistent now, it's part of an overall, larger design theme we are working towards.

And yes, the arrow next to the title will appear in all the sidebars, not just history. I've submitted a bug to refresh the visuals for the bookmarks one and will be working on that soon. Regarding the technicalities of how it would work, I will have to defer to an engineer for that. But my assumption is that it would be a dynamic list, so as new sidebars are added, they will appear on the list right away for easy switching.

Oh, and I forgot to mention, regarding the resolution tag, the bug gets marked resolved when the initial work is complete, and then it is reviewed and broken down into further work bugs. Not all the work on redesigning this sidebar takes place in this bug. Engineering tasks will be split out, as well as UX revisions that need to be made.

Hope this clears some things up!

Comment 9

[u428464]

What about the hover style ? Currently the Aero styling is buggy (see bug 909820). I think it would be best to use the Australis styling on every platforms.

Comment 10

[Luís Miguel [:quicksaver] (not reading bugmail)]

(In reply to Sevaan Franks from comment #8)

Thanks for the explanation on everything. And if it's part of an overall project to use darker tones on other elements, then it makes sense of course. I look forward to seeing more like this then.

Comment 11

[Sevaan Franks [:sevaan]]

Reopened pending final UI review.

Comment 12

[Sevaan Franks [:sevaan]]

UI approved.

Comment 13

[Sevaan Franks [:sevaan]]

Luis, I updated the deck with a light theme alternate option at the end, and ultimately UX will make a decision as we get closer to starting development.

Comment 14

[Luís Miguel [:quicksaver] (not reading bugmail)]

(In reply to Sevaan Franks from comment #13)
> Luis, I updated the deck with a light theme alternate option at the end, and
> ultimately UX will make a decision as we get closer to starting development.

Actually I'm with you on the point that a white sidebar (like the one you added now at the end of the pdf) would look a bit lost in white-background webpages. Have you considered using the same color (as on the header and the footer) for the whole sidebar? Basically, sort of how it is designed now, a sort of "unified" sidebar going all the way from the header to the footer, with the added "extras".

Or maybe on alternative using a kind of gray-light-textured?-metallic?-glass? background instead of absolutely white, something that would contrast with the content. Just throwing ideas out there, personally I like the unified look it currently has. :)

Comment 15

[Tim Nguyen :ntim]

(In reply to Luís Miguel [:Quicksaver] from comment #14)
> (In reply to Sevaan Franks from comment #13)
> > Luis, I updated the deck with a light theme alternate option at the end, and
> > ultimately UX will make a decision as we get closer to starting development.
> 
> Actually I'm with you on the point that a white sidebar (like the one you
> added now at the end of the pdf) would look a bit lost in white-background
> webpages. Have you considered using the same color (as on the header and the
> footer) for the whole sidebar? Basically, sort of how it is designed now, a
> sort of "unified" sidebar going all the way from the header to the footer,
> with the added "extras".
It'd pretty much look like Windows Classic like you're suggesting.

> Or maybe on alternative using a kind of
> gray-light-textured?-metallic?-glass? background instead of absolutely
> white, something that would contrast with the content. Just throwing ideas
> out there, personally I like the unified look it currently has. :)
It'd be too mac-os-ish.