28353 - [usability][low risk]Sidebar panels should look like tabs

Status: VERIFIED FIXED

(SeaMonkey :: Passwords & Permissions, enhancement, P3)

Description

[Matthew T (active 1999-2002)]

The usability of the sidebar could be greatly enhanced if the sidebar panels 
looked more like something the user is used to. They could look like the cards in 
a card file, as in the URL given.

A small (~3-pt) bevelled border around the outside of the panel, contiguous with 
the border around the panel heading itself, would be needed to make the panel as 
a whole look like a cardfile card.

Comment 1

[german]

Funny you say that. I was working on just this because recent usability testing
shows the panels are too bland to be distinguishable, users loose track of the
panels. I have a 'fix' (using XBL) working on my local machine since last night.
I am going to forward to Don and Slamm to see whether they're OK. Enclosing
screenshot in a second. Don can we take this fix? This is low risk and will not
be affecting other areas of the code. In addition we can take the stuff I
already have working so it takes little of Slamm's time. Thanks.

Comment 2

[german]

Attachment: screenshot from what I have

Comment 3

[leger]

Need to check with marketing for PDT+ call.  We like it, but need to check with 
khaki people :-)

Comment 4

[johng]

The My Sidebar khaki person says yes.  Usability studies point out problems with 
what we currently have, and this is an improvement.  Ship it if we can - just do 
it.

Don now needs to assign it to someone.

Comment 5

[leger]

Putting on PDT+ radar. 

Comment 6

[don]

Steve, can you grab Ben and check out German's really cool new design for this?

Comment 7

[Matthew T (active 1999-2002)]

Ok, judging by the screenshot, the tabs as implemented are a vast improvement 
over the previous controls ... but here's a list of things to tidy up to make the 
tabs look perfect:-)

* All tabs should be the same width -- about 75% of the width of the sidebar.
  This would increase clickable area for panels with short names, and would make
  the column of tabs look nicer than the current irregular width, while still
  retaining the tab look (which would suffer if you went to 100% of the width of
  the sidebar). Tabs in the real world don't shrink to fit their contents, so why
  should these ones? (When fixing this, ensure that the tab labels are either
  left-aligned or right-aligned, depending on the language, *not* centered.
  Centering would make the labels ragged down the left side, while the tabs
  themselves were flush left.)

* The area of the header not covered by the tab should be the same color as the
  area above it -- because visually, that's what that area is, it's part of the
  tab above. In the current skin, this means it should be:
  - light gray, normally;
  - dark blue, if it's the first tab (to match the sidebar border);
  - white, if it's the tab below the currently selected tab.

* The scrollbar needs to be inside the border, not outside it. Otherwise, the
  scrollbar is (a) separated from, and (b) longer than, the viewport it is
  scrolling. Neither of these are good from either a usability or aesthetic
  point of view.

* If the active tab is white, then the border around the content should also be
  white, not gray. Otherwise the panel and the panel's tab look like they're not
  connected to each other.

* If the UI is set to a language which is normally written from right to left,
  the tabs should be aligned with the right side of the sidebar, not the left
  side. (They might do this already, I'm just making sure.:-)

Comment 8

[german]

OK I'll dump the code and step by step instructions to slamm/ben tomorrow, it's
really pretty simple and very low risk using hyatt's xbl. mpt's points are all
good ones, I think we can get by without the last one, as I think bi-directional
fonts are not really well supported for beta1 in some portions of other UI, so I
think that would be OK for beta1. We should be OK in all other points you're
raising too, until tomorrow I will pick up on your suggestion to make
sidebartabs equal 75% length and left align the text. Thanks as always fro your
feedback!

Comment 9

[Jim Roskind]

Can we get a date for this landing?  IT is very nice, and very good... but if it  
takes too long, we'll have to later it.  Please a) add a landing date to the 
status whiteboard; b) Get this finalized and in RSN.

Comment 10

[Paul MacQuiddy]

so the tabs are pretty, but in the screenshot, they are about 50% wider then the
current tabs. Is there any way to shrink them down? The tabs for my ~10 panels
will be taking up around 1/3 to 1/2 of my sidebar, and will be even worse in
mail/news and aim which have even less room to spare.

Comment 11

[Matthew T (active 1999-2002)]

By `wider' I assume you mean `thicker' ... Hmmm. I see your problem.

Here are my solutions, in order from easiest (and least effective) to hardest 
(and most effective):

* Get used to having fewer sidebar panels open. (What on earth are you doing with
  *ten* of them???) The search popup menu in the location bar, once fully
  implemented, will probably eliminate the need for a couple of sidebar panels.

* Shave a couple of pixels of vertical padding off the top and bottom of each
  tab.

* Make tabs 50% of the width of the sidebar, and arrange them in rows of two.
  No, this wouldn't cause the same usability headache as multiple rows of tabs do
  in Windows dialogs; because unlike Windows tabs, the sidebar tabs would retain
  the same y-order when selected. However, it might give the impression of a
  relationship between pairs of sidebar panels, when no such relationship exists.

* Replace the sidebar panel headers with a single popup menu at the top of the
  sidebar.

* Use dockable windows for the things now done by sidebar panels, and (gasp) get
  rid of the sidebar.

Comment 12

[german]

Paul:
Reasons for doing this more visible size and shape: In the search studies we
ran  for search we got a lot of  'free data' on the sidebar also, some of which 
strongly suggested that the panels headers need to be a) more visible
establishing a hierarchy of elements in the sidebar and  b) have a larger target
area to click on. Also once we introduced the new  design on the usability
machine, people were readily able to identify them  as 'file folders with stuff
in them' and understood where they went when collpased.

Comment 13

[Paul MacQuiddy]

I like the new design, I just think they are a little 'thick'. I'll hold further
whining until it's implemented. And yes, I probably have too many panels :-)

German, I'm not concerned about the space in browser, I'm concerned about the
space in mail/news and aim, where you are already pressed for space. In AIM, you
can't get rid of the sidebar at all...

Comment 14

[Steve Lamm]

I checked it in.

Comment 15

[Paul MacQuiddy]

marking verfied, any problems with the tabs should probably come in a new bug

Comment 16

[Matthew T (active 1999-2002)]

Tabs aren't present in latest (2000-03-07) Mac nightly build, four days after 
slamm checked them in. So, reopening.

I know Windows users are seeing the tabs, because they've been discussed in 
MozillaZine and the n.p.m.ui newsgroup. So, marking as Mac only and adding pp 
keyword.

Comment 17

[Jim Roskind]

Can we have verification that this is not fixed on Mac, along with a planned
landing date.  To be honest, I'm not psyched to carry this further along.  I'm
setting the "w/b minus" to 3/9

Comment 18

[Simon Fraser [no longer active]]

It's not possible to test this in a release mac build, because the build crashes 
before the sidebar is displayed (bug 30477). Pls verify tomorrow.

Comment 19

[Paul MacQuiddy]

I'm looking at today's mozilla mac build 030808 and the tabs are there. I don't 
know if an old build got posted or what yesterday, but this is okay. Marking 
resolved and verified.

Comment 20

[Paul MacQuiddy]

verified on 030808 mac commercial and mozilla builds