Re: [Ayatana] [ubuntu-art] Meerkat volume control design

[Matthew Paul Thomas <mpt@xxxxxxxxxxxxx>]

-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Hello Ersin

Thanks for your excellent feedback on the sound menu.

Ersin Akinci wrote in ubuntu-artwork@ on -10/01/37 20:59:
>...
> I'm not sure where to send this, so my apologies if I've contacted the
> wrong list.  I was looking at 10.10's new volume control menu,
> pictured here:
>
> http://files.digitizor.com/wp-content/uploads/2010/10/Selection_013.png

As your fellow Redditors pointed out, the sound menu is categorized as
part of the Ayatana project, so the Ayatana mailing list is the most
appropriate forum.

> I want to commend the Ubuntu team for their ongoing efforts to improve
> the toolbar, and I really enjoy the new functionality in the volume
> menu.  However, I've also wondered about some of the design decisions,
> specifically what the rationale was behind them.  I drew up a list of
> 23 issues that I thought the design team might be able to address:

First, a quick response to
<http://www.reddit.com/r/Ubuntu/comments/dpowc/1010_volume_control_menu_design_fail/c1208g3>,
which will help explain how we got here:
|
| I'd love to get involved. Part of the problem is that the design
| process, from an outsider's perspective, isn't transparent. I wasn't
| sure where to begin until someone on the art mailing list mentioned
| Ayatana. I agree with the gist of Shuttleworth's infamous "this is
| not a democracy" statement about Ubuntu's design
|
(https://bugs.launchpad.net/ubuntu/+source/light-themes/+bug/532633/comments/167),
| but as a purely practical matter, I don't want to invest time in
| something where I don't know how/if my efforts will be
| noted/implemented/etc. Regarding the window control "debate", I don't
| see any evidence that the community's input was taken seriously (full
| disclosure: I like the window buttons on the left) nor that the
| design team made a serious effort to win over/explain their positions
| on one of the most hotly contested issues that the Ubuntu community
| has ever seen.
| Perhaps someone can write up a post about how Ayatana/Canonical
| design works...?

There are, at the moment, three main sources of design decisions in
Ubuntu. There are decisions made by individual developers (for example,
the design of Simple Scan). There are decisions made by Canonical's
Design team (for example, the design of Ubuntu Software Center, or the
Ubuntu Web sites), for which we try to explain our positions. And there
are decisions made by Mark Shuttleworth in his role as SABDFL (for
example, the title bar buttons), which are up to him to explain.

In the case of the sound menu, I was responsible for designing the
contents and layout, though Mark made a few changes. Otto Greenslade
designed the look of the playback controls, Daniel Fore provided the
icons, and Conor Curran wrote the code. Several of the points you raise
are about the Ambiance and Radiance themes in general, which were mostly
designed by Otto Greenslade and implemented by Ken Wimer and Andrea
Cimitan. (I don't normally get time to report problems with the theme
design, so thanks for giving me an excuse!)

Feedback like yours is extremely useful. Even more useful would be to
get involved with the designers and engineers working on new elements
(such as the various parts of Unity, the Ubuntu single sign-on dialogs,
the date/time menu, or the networking menu), suggesting layout
improvements before the designs are implemented.

> 1. What is that arrow bullet on the left next to the Rhythmbox info?
> Is it a control? If so, why is it flush with the edge of the menu
> (Fitt's law)? Why would we even need a control there to hide it?

The triangle is supposed to convey that the application is running. We
use the same symbol in the messaging menu, and in the Unity launcher.

We have not (as far as I know) tested what proportion of people
understand this symbol, or whether some other presentation would work
better.

> 2. Why is there a musical notation icon next to the Rhythmbox title?
> Isn't it already clear that it controls music?
>
> 3. Why is Rhythmbox even mentioned by name at all? How is that
> important? If you're going to be locking in the applet with a
> particular music player anyhow, what's the point of repeating its
> name?

The menu is not locked to a particular music player: so far, Amarok,
Banshee, Rhythmbox, and Xnoise all integrate with it. And as shown in
the pathological screenshot on the wiki
<https://wiki.ubuntu.com/SoundMenu?action=AttachFile&do=get&target=Screenshot-2.png>,
it's even possible for multiple players to show up at the same time,
though in real life people will rarely see that.

So the Rhythmbox item is supposed to represent the application, in the
same way as application items in the messaging menu do. However, Mark
asked that we use a generic music icon rather than the application's own
icon. Unfortunately, this makes the purpose of the item (launching, or
switching to, the application) rather unclear. So today, Conor is
experimenting with using the real application icon instead.

> 4. This tiny applet is designed around no fewer than six columns, five
> of them left-justified and one center-justified. Very jarring.

Maybe you could annotate a screenshot to show these? I see only four:
the column for application icons, the main column (in which the playback
controls are centered), and within that main column, two columns for
track data.

There have been various suggestions for different layouts that reduce
the number of columns (for example,
<http://www.flickr.com/photos/connehooley/4563555709/>). But they tend
to either make the menu look lopsided (as in that example), or to
visually mingle the playback controls with the track data (which would
get awkward if, for example, we started animating track transitions
while the playback controls stayed put).

> 5. The left edge of the menu is not aligned with with the left edge of
> the speaker button on the toolbar.

It is aligned, but it looks like it isn't, because the menu title and
the menu itself use different outline colors. This is a general theme
problem; it applies to every menu.

> 6. The speaker button is clearly meant to merge seamlessly into the
> volume control menu, as if it turned into a tab on a folder, yet the
> top edge of the menu continues and separates it from the toolbar
> button.
>
> 7. Why is there a drop shadow from the top edge onto the toolbar? So
> the menu is higher than the toolbar which is already floating off the
> desktop? Why are we introducing three z levels, does it serve a
> purpose?

These two are the same point, and related to the previous one. I've
reported a bug for all three. <http://launchpad.net/bugs/659816>

> 8. The spacing between the volume widget in the menu and its flanking
> speaker icons is imbalanced.

This problem is deceptively complicated.

Consider the speaker icon in the panel itself. Depending on the volume,
there may be one, two, or three sound waves to the right of the speaker.
Now, the speaker itself shouldn't slide around when you change the
volume; that would look unstable. So the icon always leaves space to the
right of the speaker for three sound waves, even when it's showing only
one or two.

The volume slider inside the menu uses the same icons as the panel does,
just at a smaller size. Unlike the icon in the panel, these icons never
change, but the result is that the left one is leaving room to its right
for sound waves that will never appear. Hence the odd spacing.

I can think of a couple of ways to solve the problem. One way would be
to have a special "muted" icon that has a ✕ cross next to the speaker,
instead of an empty space. Another would be to have a narrower speaker
icon for use at the left edge of the slider, but it might be quite
difficult to have a non-square icon for this. Perhaps there are other ways.

> 9. The left edge of the left speaker icon is not aligned with the left
> edge of the "Mute" text.

I don't see that problem, even in your screenshot.
<http://imgur.com/xNsiE?full> The first column of pixels in the "M" is a
*little* lighter than the first column of pixels in the left speaker
icon, but I think that's the font auto-hinter at work. If the text moved
about 0.3 pixels to the left, the "M" would line up exactly with the
speaker icon, but probably it would be blurrier overall.

> 10. The contrast between the right corner of the horizontal bar in the
> volume widget and the menu is very faint and makes it unclear where
> the bar actually ends.

This seems to be a general problem with sliders in the Light themes.
I've reported the bug. <http://launchpad.net/bugs/659829>

> 11. The musical notation icon isn't done properly. First, the stems
> should be aligned with the right of the dots. Second, the bar's
> shading is jagged and pixelated, which is OK but contrasts strangely
> with the dots' fuzzy shading around the edges. The proportions between
> the bars, stems, and dots aren't right, either, and the dots should be
> much rounder.

It's quite common for proportions in an icon to be exaggerated for
recognizability, just like they are in cartoons. The rest of your points
are valid, though. It won't matter for the sound menu if we switch to
using the application's icon instead, but I've reported it just in case.
<http://launchpad.net/bugs/659838>

> 12. The gradient of the Rhythmbox controls has nothing to do with any
> of the other system gradients and the light source is coming straight
> from overhead.

The light source comes straight from overhead for every control in the
theme (except scrollbar thumbs). The gradient is basically the same as
the one used in title bar buttons, for example.

> 13. What vertical justification were they thinking of when they
> aligned the album text? Is it justified relative to the album cover
> picture? Is it justified at all?

The text is supposed to be top-aligned with the album art. Conor thinks
it might be a couple of pixels off, and he'll try to fix that today.

> 14. The album art and the Rhythmbox controls are both bounded by two
> separate boxes that are a different shade of grey from the rest of the
> menu.

The background color around the playback controls is fixed in a pending
Ubuntu 10.10 update.
<https://launchpad.net/ubuntu/+source/indicator-sound/0.4.8-0ubuntu1>

As I write this, Conor is fixing the equivalent problem with the album
art, by removing the rounded corners. The primary reason for doing this
is because the rounded corners look overdone. But as well as fixing the
background color problem, it will also fix a problem where the corners
aren't highlighting properly when the item is selected.

> 15. Why is the "Sound Preferences..." text not aligned centrally
> between the spacer above it and the bottom edge of the menu?
>
> 16. The spacing between the "Mute" text and the top of the menu as
> well as the elements below it has nothing to do with the spacing
> between the other subtitles and the elements above and below it.

These are the same issue in the theme -- it's even more obvious in the
battery status menu. Reported. <http://launchpad.net/bugs/659866>

> 17. For that matter, why does the text read "Mute"? Is the sole
> purpose of that widget to mute the volume? Why is there text at all?
> Isn't the purpose obvious?

There's nothing else in that menu item *except* the word "Mute".

If you mean "Why is there a 'Mute' item separate from the slider",
that's to make it easy to turn down the sound in a hurry if it starts
blaring at you.

> 18. Why is there a "Sound Preferences..." option? Isn't this
> accessible from the options menu? How many times while changing the
> volume or controlling Rhythmbox through the toolbar applet have you
> wanted to access Sound Preferences?

It is accessible from the Preferences menu (soon to become the System
Settings window), but that's quite a bit slower to get to -- especially
if you've already opened the sound menu, in the knowledge that you need
to change *something* about the sound, and what exactly that is won't
crystallize in your mind for another second or so.

For similar reasons, the battery status menu ends with an item to open
Power Management Preferences, indicator-datetime (as used in UNE) ends
with an item to open Time & Date Settings, and indicator-network (not
yet installed by default) ends with an item to open the Network Settings.

> 19. The spacing between the rows in the Rhythmbox section is off and
> looks arbitrary.

Sorry, I don't understand what you mean here.

> 20. Edge shading issues with the volume control slider and the speaker
> icons similar to what I wrote about regarding the musical notation
> icon.

This is related to points #8 and #9. Those icons seem to be just
scaled-down versions of the larger ones used in the panel; they haven't
been tweaked to be sharp at that size.

> 21. What's up with the track forward/backward buttons? Very weird
> positioning of the triangles, they look too crunched together. Why are
> the ends of the pause button's bars rounded off but those of the
> forward/backward buttons not?

You're right, those are both a bit odd. I shall ask Otto whether these
can be changed.

> 22. Imbalance of whitespace between left and right.

Left and right of what?

> 23. The eye is being led in contradictory directions. First, the
> overall elements are massed in a trapezoid that leads from upper right
> to lower left and from upper left to lower left (unnecessarily broken
> by the musical notation icon and the arrow bullet). The menu's
> location in the upper right of the screen reinforces this flow. But
> then, the Rhythmbox section goes from upper left to lower middle with
> massive whitespace on the right.

This is basically the same as point #4. I would have loved to draw up a
dozen possible layouts for the menu, and whittled them down to something
more elegant than what we ended up with. But I did not have time for
that, and I haven't seen anyone else improve on the layout so far.

The "massive whitespace on the right" is fixed in the pending 10.10
update: when necessary, the track data now extends to the right margin
(not to be confused with the right edge).

> In most of these cases, it looks like there wasn't any active design
> decision made about the element at all.  Note how the spacings between
> the last two subtitles and the spacers above them are equal but are
> unequal to the spacing between "Mute" and the top edge of the menu.
> It's pretty obvious that's because the spacing of the subtitles is
> completely determined by the default spacing on both sides of the GTK
> spacer widget; similarly, the space between the top edge of "Mute" and
> the top edge of the menu is equal to the space between the bottom edge
> of "Sound Preferences..." and the bottom edge of the menu. That's
> probably just the default window manager/GTK behavior.  It's not about
> taste, the point is that no active decision was made about the
> spacing, or (weirdly) the decision was made that the default widget
> spacings were ideal.

That's pretty much exactly what Andrea Cimitan just told me when I asked
him about it. But today we've come up with a solution that will work
for every GTK menu, without special-casing this one.
<http://imgur.com/WkgcB?full> (This screenshot shows a fix for *only*
this problem, not any of the other problems.)

> In other cases, however, an active choice was clearly made but that
> choice doesn't address the element's purpose.  Why should a volume
> control menu be labelled "Mute"?  Etc.
>...

Because that's exactly what the item does. (If the speakers are already
muted, it says "Unmute".)

> I just wanted to offer my observations, though I wasn't too sure how
> to go about it.  It's strange that there isn't a dedicated mailing
> list for design issues.  Are these handled on a component-by-component
> basis?  How do the designers interact with the engineers?

It's mostly component-by-component. Unfortunately, there isn't a
browsable directory of Ubuntu components to get involved with. For the
Ayatana project, we use the #ayatana IRC channel
<https://wiki.ubuntu.com/IRC/ChannelList> and mailing list.

>                                                            How would I
> go about changing the design of the volume control menu myself?
>...

The code for the sound menu, the Ubuntu Mono icon theme, and the Light
themes, are all on Launchpad.
<https://code.launchpad.net/indicator-sound>
<https://code.launchpad.net/ubuntu-mono>
<https://code.launchpad.net/light-themes>

Thanks again for your feedback. As "drfugly" wrote in
<http://www.reddit.com/r/Ubuntu/comments/dpowc/1010_volume_control_menu_design_fail/#c11zste>:
|
| We need more of this. Lots more of this.

Cheers
- -- 
Matthew Paul Thomas
http://mpt.net.nz/
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.10 (GNU/Linux)
Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org/

iEYEARECAAYFAky1wMIACgkQ6PUxNfU6ecqYmgCeMnBo+D/5tDGd4LsrHDVlcwZy
KP8AnjYSyHHMUqFjZ3LbAcDL8oL/1rcg
=+iVD
-----END PGP SIGNATURE-----