29103 - Default interface looks very "flat" [modern skin]

Status: VERIFIED FIXED

(SeaMonkey :: General, defect, P3)

Description

[Peter Trudelle]

I gathered comments from several contributors, some of them key developers:

Default interface looks very "flat" due to lack of 3D-ness which has become 
popular with many OSs  The 2-D look is not very appealing, and is very 
confusing.  It looks like a  web page.   The idea of this product was enhance 
web sites to look more 3d-ish.  Not make the chrome more 2d-ish like an existing 
web site.  sigh. (dimensionality cues: drop shadow on scroll bars, esp thumb).

The lack of drop shadow and other dimensionality cues in the scroll bar makes 
the thumb indistinguishable as the foreground element. It actually looks as if 
the trough background is the foreground given the color choices. Neither the 
Windows nor Mac platform scroll bar has this problem. 

Note: This bug report may turn out to be merely a tracking bug for dependent 
bugs filed against specific issues.

Comment 1

[german]

The idea of this product has never been to 'enhance web sites to look more 3d-
ish.'

I was at Apple 1992-1993. One of the reasons for doing platinum at the time
seemed to be 'because we can' namely as graphic capabilities and processing
power advanced people flocked to using 3-D, another reason was that Windows
3.x had it and so it seemed they had to catch up to what was perceived a
competitive advantage. Part of the reason seemed to be also to show off the
OS as a product in its own right, as Apple started to sell the formerly
free OS to its customers. At that time we thought the possibilities were
fascinating.
One fundamental problem with this approach is that applying a 3-D look in
itself does not make it a more usable product. 3-D is often applied in
'supernatural' ways and where it is not needed. In fact you have to read
through a lot more clutter (bevels, groove lines) just to get at the basic
information.
That's precisely the reason why over time commerical application started to
remove the 3-D appearance in a non-hover state.
Furthermore there is such a thing as too much 3-D. When you look at things like 
Office95 you notice that in a world of gratioutous 3-D bevels, edges and ridges 
3-D does not stand out anymore. It essentially looses it's 'built in' affordance.
The other reason that over time content has become more exciting, colorful
and rich over time, and so we felt that chrome had to get away from this
-in your face- mode.

And then lastly, and this is from a non-scientific graphic design perspective: 
the 3-D look and feel is tired and outdated rather than new or wired, it is very 
80s and beginning 90s. Don't look at where today's OS are, take a peek at what's 
coming. Just ask your favorite graphic designers or browse in magazines like ID, 
graphis or AXIS. Observe the new designs that had been prototyped at Microsoft 
(neptune)or at other places :
they are going away from photorealistic 3-D depictions and towards simple, clean 
and symbolic graphics. As designers for consumer products we have to take all of 
these factors into careful consideration.
I think that skins will give us the option to satisfy various tastes. Ben is
hammering out a 4.x skin, and Netscape will likely ship more than one skin when 
the product goes final. Also as we will approach beta we will all keep a careful 
eye on all usability aspects of widgets, on user feedback related to using these 
widgets and of course will change/improve them as we go along.
From the user testing with consumers so far this has not been something  to end 
users at all that they noticed in particular. None of the end-users we have been 
with had a problem with the affordance or saliency of scrollbars. The data we 
have does not support your notion of this being a problem.

Comment 2

[Matthew T (active 1999-2002)]

Users in usability tests may not have *noticed* any difference with the flat UI. 
But I wouldn't be at all surprised if the average time they take to click a 
button, or to scroll a scroll bar, is longer (even by only 0.1~0.2 seconds) with 
the current skin than with a more 3-D one, because of the extra effort required 
to find the widgets on the screen.

Comment 3

[Eli Goldberg]

QA Assigning non-confidential New/Assigned User Interface: Design Feedback bugs 
to Matthew Thomas ([e-mail]).

Matthew Thomas is now the QA owner for the User Interface: Design Feedback 
component. (Bugs that involve UI issues in the Netscape-branded Mozilla browser 
should continue be QA assigned to [e-mail].)

Comment 4

[Matthew T (active 1999-2002)]

A more detailed response (for what it's worth) ...

* The 3-D Platinum Appearance in MacOS was not done just `because we can' or for
  marketing purposes. From <http://www.mactech.com/articles/mactech/Vol.14/14.01/
Appearance-savvyApps/>:
  |
  | The new appearance shows more distinction between active elements and
  | inactive ones: "One of the design goals of the grayscale appearance was to
  | give better definition for active and inactive states. Active objects are
  | beveled and 'pushable' whereas inactive objects are flat, and blend in with
  | the background." [-Arlo Rose, on the Apple HI Developers mailing list] 

  And from the same page:
  |
  | Rather than a square placard with a subtle shadow and a simple black
  | down-arrow, popup menus now look more like buttons. I like this because it
  | tells the user "push me" rather than "look at me". 

  So yes, applying a 3-D appearance in appropriate places *does* make a more
  usable interface.

* Commercial applications (such as Office 97 and Communicator 4.x) did not begin
  to remove their 3-D elements in order to make it easier `to get at the basic
  information'. They did it because they had too many controls on the screen at
  once in the first place.

* Yes, there is such a thing as too much 3-D. But we're not asking for too much,
  we're asking for enough.

* A 3-D look is not `very 80s and beginning 90s'. 3-D apppearances were
  introduced as standard on Windows in 1995, and on Macintosh in (IIRC) 1997. It
  is 2-D interfaces (such as those used in the Netcenter skin) which are very
  '80s and beginning '90s.

* We're not asking for `photorealistic 3-D depictions', we're asking for useful
  3-D affordances which make controls easier to see. Now that XPToolkit controls
  have been made more three-dimensional, the only thing really required to
  resolve this bug in particular would be bevelled borders for the toolbar
  buttons, the status bar, the taskbar, and grippies.

* Mozilla is skinnable. That's very nice, but it's largely irrelevant. It's
  largely irrelevant because the majority of users (the majority of Netscape
  users, at least) will be either incapable of changing their Mozilla skin, or
  will see the current skin and not even bother to go so far as investigate
  alternative skins. The *default* skin for the *majority* of Mozilla users
  (i.e., the default Netscape skin), in my view, should not throw years of
  careful development of 3-D affordances out the window just to follow an
  ephemeral design trend.

Comment 5

[german]

- I was at Apple at the time Platinum (then Truth) was conceived and while Arlo 
Rose has good reasons for why he thinks its more usable the driving marketing 
reason from what I have seenand experienced was because windows had a non-black 
and white appearance since 3.x and started to be perceived by customers as more 
attractive. 
- "with regards to the only thing really required to
  resolve this bug in particular would be bevelled borders for the toolbar
  buttons, the status bar, the taskbar, and grippies." I would have to disagree, 
just adding bevels globally like this does not much to enhance usability, it just 
adds visual complexity by indifferently sprinkling 3-D borders and bevels around, 
without giving users a way to tell that yes this is clickable, but its not 
important for your current task at hand, and it doesn't require your attention 
right now. See the problem with 3-D 'always on' is that the added visuals have to 
be processed even though the controls might not help you with the task at hand.
I also don't believe that themes are not accessible. First of all those who care 
(and as said earlier to my surprise many common users just don't seem to) are 
among those 40-50% who we expect will be able to change their theme. Just by 
virtue of being able to turn it on after a theme has been downloaded and in 
conjunction with the fanfare that will be generated around appearances I think 
this will be more than visible. 
That said I agree that whatever will be the default theme has to have a high 
level of usability, because that will be what the Netscape customer will use 
first when approaching our product.

Comment 6

[shuang (gone)]

This particular skin will be called "Modern Skin" for people who prefer 2-D 
graphic design. Bugs are filed to address some minor usability issues that might 
associated with this particular look. 
Additional skin(s) will have variety of looks in the future. 

Comment 7

[Matthew T (active 1999-2002)]

Sorry, I can't verify this as invalid and keep a clear conscience -- unless the 
current skin is an alternative (rather than the default) for any major
Mozilla-based release. I don't think it's acceptable for skin-switching, no 
matter how well publicized, to be a compulsory part of the Mozilla setup process 
for anyone who simply wants to know, at a glance, what is clickable and what is 
not.

Giving QA to Claudius instead.

Comment 8

[Blake Ross]

I have to agree with matthew and trudelle on this one.  The only thing 
separating the top toolbars from the page is a thing line.  The status bar 
doesn't even have this advantage, and I can easily see it blending in nicely to 
a page with a gray background.  

Comment 9

[Claudius Gayle]

I marking this bug VERIFIED. I believe its usefullness has expired and it is more suited for a newsgroup discussion.

Comment 10

[Claudius Gayle]

ooops, clicked too soon. i didn't notice the dependencies. In that case this really is a meta bug and should stay open. It is 
incorrect to mark this bug invalid.

Comment 11

[german]

adding modern skin to summary to make clear this only applies to that skin. 
Modern will receive some updates starting after beta 2 to improve form and 
function.

Comment 12

[rbs]

Adding myself to the cc list. I agree with the proponents of a little amount of 
emboss on the elements to convey the "push me" vs "look at me" (BTW, that's
a nice way to put it...)

My main problem with modern [blue,new] has been that it is way too flat (like
on a touch screen gadget). This really starts to make a significant difference
when using the application over a number of days.

I cannot build right now, but from some partial screenshots that I have seen
(e.g., http://bugzilla.mozilla.org/showattachment.cgi?attach_id=14876), some 
elements are getting embossed which is a step in the right direction.  

Comment 13

[rbs]

Got a build now. FWIW, some follow-up comments: sidebar panels look much nicer; 
separator between sidebar and content window too wide (it seems to convey a 
non-smooth sensation); too much emboss on the scrollbar (making it somewhat
invasive); a hint of an emboss on the various spheric buttons (e.g., for Next,
Forward, etc.) would be appreciated.

Comment 14

[german]

Marking fixed, as much new designs has been added to modern, that no longer
looks 'flat', if this ever was a valid bug :-)

Comment 15

[Claudius Gayle]

marking VERIFIED Fixed