[ubuntu-art] Meerkat volume control design

[Ersin Akinci]

Hello all,

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

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:

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?

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?

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

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

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?

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

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

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.

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.

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.

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?

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.

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.

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?

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?

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

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

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?

22. Imbalance of whitespace between left and right.

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.

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.

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.

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?  How would I
go about changing the design of the volume control menu myself?

Best,
Ersin

-- 
Ersin Y. Akinci -- ersinakinci.com

What Digital Revolution? -- www.whatdigitalrevolution.com
Thinking critically about digital worlds.