Linked by Thom Holwerda on Sun 10th Oct 2010 14:17 UTC, submitted by Extend
Ubuntu, Kubuntu, Xubuntu Yes, yes, it's that time of the year again - a new Fiona Apple album confirmed (which makes anything that happens between now and spring 2011 irrelevant and annoying), MorphOS 2.6 released (will be the next news item), and, of course, a new Ubuntu release showcasing the best of the best that the Free software world has to offer in the desktop world.
Thread beginning with comment 444705
To view parent comment, click here.
To read all comments associated with this story, please click here.
RE[2]: Design fail
by earksiinni on Sun 10th Oct 2010 21:02 UTC in reply to "RE: Design fail"
earksiinni
Member since:
2009-03-27

I read the "You Can't Innovate Like Apple" article linked on the sidebar (http://www.pragmaticmarketing.com/publications/magazine/6/4/you_can...) and I've been keeping Apple's pixel-perfect design method in mind as I've been going over 10.10.

Bad visual design is like bad writing. You can point out the flaws, but that doesn't get at the whole picture. To extend the writing metaphor, every element should be thought about very carefully a la Chekhov's gun, and it's clear that the new volume control applet's elements need more work:

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 silly musical notation icon isn't even 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 completely 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. Total 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.

24. I haven't even said anything about how crowded the toolbar looks when with the menu open.

Edit: The point here isn't that the menu is in bad taste. I've tried to select design decisions (or accidents) where the purpose isn't obvious. That's really what brings about bad design, when every single element's role isn't thought about.

Edited 2010-10-10 21:16 UTC

Reply Parent Score: 6

RE[3]: Design fail
by Morgan on Sun 10th Oct 2010 21:18 in reply to "RE[2]: Design fail"
Morgan Member since:
2005-06-29

With that kind of attention to detail, you should work in forensic science. I've never known anyone to be so absolutely anal about something as insignificant as a few pixels in a software widget. I can imagine a rant from you about Windows HIG violations; we would need a new comment system with room for many more characters per post.

I'm not making fun of you by the way, it's just an observation. What looks fine to some may be jarring to others, and I agree with you in general about the aesthetically pleasing interface in OS X.

In all seriousness, perhaps you should forward your findings to the UI folks at Ubuntu? It couldn't hurt, and maybe they can improve the UI even more for the next release.

Reply Parent Score: 4

RE[4]: Design fail
by earksiinni on Sun 10th Oct 2010 21:38 in reply to "RE[3]: Design fail"
earksiinni Member since:
2009-03-27

Thanks, I appreciate the feedback =). I was just thinking about sending my list along to Ubuntu, as well, though I wonder how much they care for outside design criticisms considering the button alignment debacle (not the end product, rather the way they handled it). I did a quick Google search and all I've found is a forum. I guess this would be a bug report on Launchpad?

The problem is that what appears to be one small issue here or one small issue there adds up to subtly distort the overall effect; in plainspeak, the damn thing just looks "off". This has nothing to do with taste, and personally I think that the menu is tasteful despite being poorly designed. (I also think that the menu is usable, with perhaps the exception of the weird arrow bullet, if indeed that's meant to be a control.)

What I'm trying to get at here is that the designers clearly didn't think about the purpose of each aspect of each element. There's empirical evidence for this. 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. The point is that no active decision was made about the spacing, or (weirdly) they decided that the default widget spacings were ideal. The first possibility (which is the probable one) betrays a lack of thought; the second betrays a lack of good judgement.

Most of the flaws seem to be because they didn't think about the details. There are others, though, that were active decisions but bad ones, again not because of taste but because they didn't think carefully enough about the element's purpose. Why is a volume control named "Mute"? Why does it even have a title at all? Why is there a musical notation icon? Etc.

Reply Parent Score: 2

RE[3]: Design fail
by Radio on Sun 10th Oct 2010 22:22 in reply to "RE[2]: Design fail"
Radio Member since:
2009-06-20

Point by point, here we go...

2 & 3: Applets can be implemented for many apps, that's why it is important to put the logo and/or name. Doing otherwise would be a big assumption that the user will never use any other music player, or any other software outputting sound.

4: "Columns", you mean lines? All the text is left-justified, the volume meter fills the whole space, and the controls are center-justified; how is that incoherent? Text is read from left to right, control buttons are symetrical.

9: That is no spacing: it is the void left by the missing "sound arcs". The speaker icon on the left and the one on the right have the same dimensions. It may seem uneven, but I am not sure: the void highlights the absence of sound.

10: ...Badly explained, I can't see it.

12: ...Like the gradient of the taskbar? So no, it is aligned with the gradients of other UI elements: buttons, bars, etc. Plus, a light source from the side would be ugly. We are not talking about round dock icons.

13: Yes it is. Zoom in down to the pixels. It is just that the "S" and "T" have differents weights for the eye. This is the kind of optical illusion that a professional typographer may correct on paper prints, but asking to do the same in an automated way would be a job for Heracles (or Sysiphus).

14: ...What? Are you talking about the spacers? Because I can't see the "different sade of grey", or any box.

17: Quick access to a useful feature? One click (okay, two clicks) toggle between "no sound" and "back to the sound level it was before"? No? Really? Never used it anywhere? Even on an Apple product? Never found it useful?

18: If I rephrase it "advanced settings" or "sound mixer", do you see the point?

20: the slider looks fine, and the sound icons may look slightly blurred because it is a screenshot hosted on a website. Have you never seen JPG compression effects on crispness?

21: ...The complaint about the triangles is so ridiculous I am at loss for words.

22: Just play songs with long names from albums with long names by bands with long names.

23: ...Now you're just making stuff up.

24: Utterly unbearable.

So, over 24 items, I left 9 of them (1,5,6,7,8,11,15,16,19) for they are valid points. The vertical alignment issue, common to all GTK software, especially (they know about it, and never fixed it; that's why I don't like GTK). Most of them are just repeats of the others, though.

The 15 other bullet points are just dishonest, looking only at the bad side of design compromises that had to be made, or plain dumb.

Edited 2010-10-10 22:35 UTC

Reply Parent Score: 2

RE[4]: Design fail
by earksiinni on Sun 10th Oct 2010 22:56 in reply to "RE[3]: Design fail"
earksiinni Member since:
2009-03-27

Man, people really need to chill out on this site. I mean the interwebs are rude, but damn.

2 & 3: I'm not aware of any API for adding subapplets to the volume menu. If there is, that makes sense...sort of. For there to be any conflict, there would have to be a separate subapplet for a different music player. Why not make it so that the title only appears when two different players are open at the same time?

4: By columns, I mean that the applet is designed with the elements lined up into six different logical columns. Columns are a layout technique rather than an element. When there are too many of them they tend to conflict and look jarring to the eye.

8 (you addressed this as 9): I think that the lack of sound "waves" coming from the speaker is enough to imply lower volume since the other speaker has sound waves. But my point wasn't that there's too much space between the speaker and the bar, it's that the spacing is imbalanced with the other side. Adding some breathing room between the bar and the right speaker would fix it while keeping the same rationale (if indeed that was the rationale) intact.

10: The left end of the volume bar looks like it fades into the background and needs a little more contrast.

12: Point taken about the light source, I agree that would look weird. But the gradients are out of whack in general. The gradient for the playback controls is quite different from the toolbar, which is quite different from the volume control slider, which is quite different from the drop shadow. They don't have to all be the same (the gradients help differentiate controls), but my question is why are they so distinct? What purpose does that serve? Seems like they could've made it subtler if their reason was to distinguish the controls.

13: Sorry, I think perhaps you misunderstood my point here. I'm not saying that the individual lines of text are misaligned, I mean that the entire block of the song description isn't vertically aligned.

14: Look carefully at the pixels next to the rounded corners of the album cover and the pixels next to the playback control's edges. The best way to see it is if you have a laptop to tilt your screen back and look at the menu from an angle. Use the eye dropper tool in Gimp if you still can't see it, compare the color value to the grey in, for example, the upper left corner of the menu.

17: I didn't realize that's supposed to be a button. If it is, they need to make it clear that it is a button, because right now it looks like another subtitle. It could easily mislead people into thinking that the menu doesn't have a mute button. P.S., I don't own anything by Apple, I just admire how methodical their design method is, which is why I linked to that article near the top of the thread.

18: Yeah, actually that would be really useful. "Sound Preferences..." is a lot less direct than "Volume Settings..." or "Sound Mixer..."

20: Is it actually because of compression (it's PNG, btw)? Usually image compression results in artifacts, not smooth edges. My complaint isn't about the blurring, which looks good in itself, my complaint is that it contrasts sharply with the straightness of other parts of the element. Compare the stem and the dot of the musical notation.

21: I didn't think it was "ridiculous". I've never seen track forward/backward buttons with triangles that were so closely put together. A little bit of breathing room would be welcome.

22: No need to be facetious. A proper design should account for short song names, and besides, even with longer names the whitespace would still look imbalanced.

23: Sounds like you've never had to put dinner on the table with layout. Visual flow is a very important part of any design.

24: Why should we settle for "bearable"? I want Ubuntu to look excellent.

Blaming GTK is not an excuse. I personally don't know what compromises had to be made, but it sounds like you do. What were they? Even assuming that these flaws were the result of compromises as opposed to oversights, why shouldn't we be free to point them out? And what do you mean by only looking at the "bad side" of these compromises? What is the "good side" of a weird looking musical notation icon? Or improper spacing?

Edited 2010-10-10 23:11 UTC

Reply Parent Score: 2

RE[3]: Design fail
by cycoj on Wed 13th Oct 2010 04:17 in reply to "RE[2]: Design fail"
cycoj Member since:
2007-11-04

I read the "You Can't Innovate Like Apple" article linked on the sidebar (http://www.pragmaticmarketing.com/publications/magazine/6/4/you_can... http://www.pragmaticmarketing.com/publications/magazine/6/4/you_cant_i nnovate_like_apple" rel="nofollow">http://www.pragmaticmarketing.com/publications/magazine/6/4/you_can... ) and I've been keeping Apple's pixel-perfect design method in mind as I've been going over 10.10.

Bad visual design is like bad writing. You can point out the flaws, but that doesn't get at the whole picture. To extend the writing metaphor, every element should be thought about very carefully a la Chekhov's gun, and it's clear that the new volume control applet's elements need more work:

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.


And here you have shown that you have absolutely no clue what you are talking about. This sort of misalignment is done very often (also and especially by Apple, who do indeed have very good designers) to make an object look more "real" or "3D" (plastisch in German). This is done purposefully and it looks better that way. That you did not know this already, pretty much makes you unqualified to talk about visual design with any authority.

Reply Parent Score: 2