Making room in the sound indicator

Wednesday, August 4th, 2010

In Maverick we’re adding the new Ayatana indicator for sound, Conor Curran’s very classy implementation of MPT’s very classy spec. It’s a Category Indicator, like the messaging menu, so it allows apps to embed themselves into it in a standard and appropriate way. You can have multiple players represented there, and control them directly from the menu, without needing a custom AppIndicator or windows open for the player(s). The integration with Rhythmbox and, via the MPRIS dbus API, several other players is coming along steadily.

One issue I’ve noticed is that the layout of the track and album art means we are almost always ellipsizing some of the track / album /artist data. I wondered whether it wouldn’t be reasonable to lay the metadata over the album art, if one used a drop shadow to ensure a more readable text:

Here’s the current layout:

Note the tight space for the track data, and hence the ellipsis

And here’s a GIMPfication, showing:

– the metadata right aligned,
– allowed to flow over the album art
– with a drop shadow to preserve contrast with the artwork

Metadata stretched over the artwork, with a drop shadow

And finally, I was a bit worried about the drop shadow over the non-art portion of the menu. It’s too different to anything else in the menu, so I cropped the shadows to limit them just to the area over the art:

Drop shadow is only used on the artwork

Clearly, this is only appropriate in the case where one has artwork. The metadata should stay left-aligned (and use the full width of the menu, something it doesn’t currently do) when there is no artwork.

Thoughts? I’m off to bed. Jetlagged, back from Debconf (lovely to see everyone again, if briefly).

117 comments:

  1. Jason Stapels says: (permalink)
    August 4th, 2010 at 1:25 am

    With all the vertical room available, why not just move the album art a little lower to prevent the song name from ever having to go over it? If you’re concerned about the extra space that would be beneath the album/artist name, you could use that space for when Track metadata is available (eg. Track 3 of 12).

    Also, for consistency sake, I think it would be nice to always have some sort of “art” there, even if it’s only a subtle MP3/AAC icon when album art isn’t available.

  2. Nicholas Marquez says: (permalink)
    August 4th, 2010 at 1:27 am

    If the text is long enough, do you think it might be reasonable to extend the title to a second line, given the album art? There’s unused space under the third line that could perhaps be used. Of course, if the title would only reach say 1/4 into the next line, it should just be ellipsized as usual. This may be a more significant help if the system fonts are larger than the standard (e.g. when the user has bad eyesight).

  3. Deiki says: (permalink)
    August 4th, 2010 at 1:36 am

    It feels… misaligned. What about putting the text above the artwork?

  4. Dylan McCall says: (permalink)
    August 4th, 2010 at 1:38 am

    I wonder if it’s necessary to have both the album and the artist name. It already has album art, after all…

    With one of the two gone, wrapping the title over two lines doesn’t sound as evil.

  5. Bat says: (permalink)
    August 4th, 2010 at 1:41 am

    The text on the icon looks good, although some albums will always make it hard to see. I imagine a monochrome album cover will reduce visibility slightly.

    But why have the icon on the left? It’s odd to have right-aligned text, and less odd just to left-align the text and put the icon on the right.

    I would prefer to allow two lines for the song title, and perhaps sacrifice the album name. And use a bit of redundancy-checking to chop out the album title completely if it’s the same as the artist’s name, or if it’s blank or unknown. Or else, make the album art slightly larger, since it’s no longer squeezing the title into its own column, and then you get room for more of everything vertically.

    In short: this kind of thinking outside the box is a Good Thing, because it opens up options. Bravo!

  6. Brian Freytag says: (permalink)
    August 4th, 2010 at 1:53 am

    Why not scroll the titles if they are too long?

    Like XM Radio stereos, only better.

  7. Benjamin Humphrey says: (permalink)
    August 4th, 2010 at 1:59 am

    I think it looks a bit funky with the track stretching out over the album art. It almost look like a bug to be honest.

    I think we’re better off having the metadata and track title aligned as it is currently, but instead of cutting out the middle of the track name we can add ellipsis to the end if it’s too long – currently it doesn’t make sense with the beginning … end.

    Reducing the font size and perhaps making the text regular instead of bold would save some space too. Each time you give the track name space a few extra pixels you’re probably allowing an increasing amount of songs to fit in without being cut off, if that makes sense.

  8. luistm says: (permalink)
    August 4th, 2010 at 2:04 am

    Hi Mark.

    If we can already control Rhythmbox trough the Rhythmbox indicator, why add this to the sound indicator? Does’t make much sense to me…

  9. Dash says: (permalink)
    August 4th, 2010 at 2:05 am

    Just wrap. As long as it doesn’t occupy too many lines it should be okay. Buttons could be moved too, maybe alongside the album art and have the album art replaced with a generic placeholder if none exits. Then there would be more room for the tag info.

  10. Eddward says: (permalink)
    August 4th, 2010 at 2:08 am

    I’m of the opinion that ellipsis is bad. It just means that the program is not telling me what I wanted to know and I will be forced to open the App window to find out what I wanted to learn from the notification icon. I would prefer at least an option for scrolling, wrapping or a tooltip of some sort. I was used to only needing the App window for the music player to work with the music library.

  11. McIvor says: (permalink)
    August 4th, 2010 at 2:36 am

    It looks like there should be enough room to wrap the track title to two lines. I’m not sure that, even with the drop shadow, it will show up clear enough for albums with white covers. Alternatively, scrolling it from side to side would be really cool too, but I’m not sure how difficult that would be to implement.
    While we’re discussing the sound menu, I’d like to mention the buttons. I know this has been mentioned before, but is there a reason why the menu isn’t using standard icons for previous/play/pause/next? These look like they were ripped out of WMP and stuck here; they look nice, but they don’t look like they belong.

  12. nate8nate says: (permalink)
    August 4th, 2010 at 2:46 am

    I think that the overlayed text make the sound menu look very cluttered and messy. Perhaps a better layout would be:

    Song Title
    |||||||||||||
    ||||Large||||
    ||||Album||||
    |||||Art|||||
    |||||||||||||
    |||||||||||||
    Album Title
    Artist

    This would make the menu a bit bigger, but it would be much more readable and look less cramped.

    To save a bit of space, perhaps the Album Title could be overlayed onto the Album Art, like so:

    Song Title
    |||||||||||||
    ||||Large||||
    ||||Album||||
    |||||Art|||||
    |||||||||||||
    Album Title||
    Artist

  13. Makario Lewis says: (permalink)
    August 4th, 2010 at 3:13 am

    What are the reasons for ellipsizing in the middle? I understand that it allows the user to know the end of the track title, but as evidenced in the example it doesn’t really give much more of a clue to the user than if the ellipsis were at the end. I honestly find it more awkward in the middle, but maybe it’s because I’m used to the music widget on my Android device ellipsizing at the end.

    I’m also not sure that trying to help out the user remember the song by showing the end of the track title is even needed. I’d guess that most of the time we have a general idea of what tracks are in our music collection, and would only need to look for that quick memory jog. “Oh right, ‘A Sweater Poorly Knit’ is the name of this song.” And because of this, “A Sweater Poorly K…” makes more sense to me than “A Sweate…rly Knit” does.

    Just a thought my rambling brain.

  14. Robersonfox says: (permalink)
    August 4th, 2010 at 3:21 am

    if has no album art, it is a good option.

  15. Sergeant says: (permalink)
    August 4th, 2010 at 3:45 am

    For some reason, I don’t see the drop shadow that you mentioned and without it the mockup doesn’t look very pretty.

    In any case, I don’t understand the vertical space limitation – why is it not possible to move the artwork one line below, have the title appear below Rhythmbox (above the artwork) and if necessary overflow to the next line?
    This way the song title will have 1.5 of the current space.

  16. novatillasku.com » Blog Archive » Crear espacios en el Indicador de sonidos (Mark Shuttleworth) says: (permalink)
    August 4th, 2010 at 3:48 am

    [...] Shtuttleworth, ha escrito en su blog para hablarnos sobre el indicador de sonidos. Como ya sabemos, para Maverick, Conor Curran, ha [...]

  17. Makario Lewis says: (permalink)
    August 4th, 2010 at 4:15 am

    Hm…My comment was flagged as spam. I wonder what I said…

  18. Benjamin Humphrey says: (permalink)
    August 4th, 2010 at 4:16 am

    Mark,

    Going off what I said earlier and what Sergeant suggested above I whipped up a quick mockup.

    Something like this?

    http://twitpic.com/2bfkmh/full

  19. Mike Rooney says: (permalink)
    August 4th, 2010 at 4:20 am

    I agree that it would be nice to fix the ellipsizing for titles of reasonable length. Have you checked out the mock-up at http://www.omgubuntu.co.uk/2010/07/one-users-ideal-ubuntu-1010-sound-menu.html? In this design, the play controls and titles basically swap places as the controls are always the same size and can fit happily next to the art (if it exists), while providing plenty of room for more text below.

    The only issue I see there is that it seems suboptimal for usability if the controls aren’t in a stable place, depending on if there is album art or not. But, a design to take into consideration!

    By the way, really great and exciting work overall!

  20. kyleabaker says: (permalink)
    August 4th, 2010 at 4:41 am

    I see your point and I’ve often wondered how this design could be fixed to allow more text for song titles, but covering the album art just looks very none professional to me. I really hope that this is still an open debate and not something that will simply conform to your views because of who you are. I love what you’re doing with Ubuntu and what you’ve do in the past, but I don’t think this is the most aesthetically pleasing, nor appropriate way, to fix this issue.

    I often wonder why you don’t take advantage of your blog to call upon the community to vote or debate trivial topics like this to develop a more matured method, rather than announcing an idea that was developed internally that may or may not will the favor of the Ubuntu followers.

    Basically, I think this was a great attempt, but just not ideal and should not be implemented. I’ll take chopped text any day over drop shadowed text on my album art. Open up more discussion to the community!

  21. primefalcon says: (permalink)
    August 4th, 2010 at 4:41 am

    Very very nice, Can’t wait!

  22. mark says: (permalink)
    August 4th, 2010 at 4:42 am

    @Mike Rooney

    I hadn’t seen the link – thanks it was full of inspiration. I liked http://picasaweb.google.com/100804433705878937883/Mockups#5493946264489470306 best myself, will fwd to the Ayatana list.

  23. ebonz says: (permalink)
    August 4th, 2010 at 4:46 am

    It looks very cluttered and I am sure someone would think it’s a bug. Why not make it scroll just Winamp’s. It’s clutter free plus you got a cool effect.

  24. mark says: (permalink)
    August 4th, 2010 at 4:54 am

    @Makario

    Ellipsizing the middle helps with collections like:

    Dancing in the moonlight part 1
    Dancing in the moonlight part 2
    Dancing in the moonlight part 3

    Mark

  25. Colin says: (permalink)
    August 4th, 2010 at 5:07 am

    So if there’s artwork, the metadata is right aligned, and if there’s not artwork, it’s left aligned? That seems strange to me. Isn’t there a design principle about always doing what the user expects or being consistent or something like that? I think it should always be one way or the other regardless of the artwork.

  26. mark says: (permalink)
    August 4th, 2010 at 5:13 am

    @Deiki

    Text above or below the artwork (like Benjamin’s mockup) simplifies things, but also makes the menu longer than it needs to be. We’re looking for a fine balance, not sure we’ve seen it yet.

  27. Yann says: (permalink)
    August 4th, 2010 at 5:27 am

    I don’t understand why this is in the sound menu, not in the rythmbox menu, from the rythmbox icon that is just next to that one?

  28. _khAttAm_ says: (permalink)
    August 4th, 2010 at 5:29 am

    Have you considered scrolling (marquee) the text?

  29. mark says: (permalink)
    August 4th, 2010 at 5:39 am

    @Yann

    The sound menu is becoming a category indicator, so *all* music apps can embed themselves in that. No need for app-specific indicators.

    Mark

  30. Thorben says: (permalink)
    August 4th, 2010 at 5:51 am

    One thing about the Sound Indicator as it is right now makes not much sense to me:
    Why do I have to know which application is playing the music?
    I rarely (actually, never) have two music players open at once, especially not full blown suits.
    So, why not replace the “Rhythmbox” part with the Song Title? Ellipse it when it’s static and let it scroll when the mouse hovers over it.

    http://picasaweb.google.com/100804433705878937883/Mockups#5493946264489470306 is very nice looking (love the controls).

  31. KyleClarkeNZ says: (permalink)
    August 4th, 2010 at 6:21 am

    Why has no one discussed the concept of a place holder image if there is no album art? This seems obvious to me and I’ve been waiting for so long for someone to bring it up as I trust the design process. But thus far no one has. A simple square with a darkened CD or something inside would work. This way, the text will be aligned the same way in any scenario. Also my vote goes to http://picasaweb.google.com/100804433705878937883/Mockups#5493946264489470306 as I have said on the OMGUbuntu! Forums already.

  32. Greg says: (permalink)
    August 4th, 2010 at 6:24 am

    Is there a reason why the menu has to be so short? Can it drop down 1 line lower to give space for the full song name above the artist image? like a float:left image might work in a web page?

  33. wiz says: (permalink)
    August 4th, 2010 at 6:31 am

    Please, please give some love to Totem player too. It is much simplier than RB yet no track indication, no IM integration…

  34. Tommy Brunn says: (permalink)
    August 4th, 2010 at 6:43 am

    Just move the cover art down a little bit and allow the title to stretch across the entire menu. Having it go over the art looks incredibly tacky and – as Ben said – looks like a bug.

    What about the playback controls? I hope those are just placeholders, since they don’t fit in with any other element at all.

  35. Bruno Girin says: (permalink)
    August 4th, 2010 at 6:47 am

    What about moving the album art next to the the previous|pause|next buttons where there’s lots of space and leaving the whole area above to text?

  36. David Bosman says: (permalink)
    August 4th, 2010 at 7:34 am

    There is much empty & wasted space at the right of the ‘Rhythmbox’, why not switch it with the song’s title? That’ld leave much room for the song’s title and avoid it to run over the cover.

    One could also get rid of the app name: is it that important to display it in the sound menu? Doesn’t the user already know where the music/sound (s)he is listening to comes from? ;-)

  37. Is says: (permalink)
    August 4th, 2010 at 7:50 am

    It really feels not well aligned…. Two lines is better

  38. Novità su AppIndicator per Maverick Meerkat | Giovanni Raco says: (permalink)
    August 4th, 2010 at 8:14 am

    [...] notifiche dei player, infatti, assumeranno la forma di un menù più elaborato. Anziché limitarsi a indicare dettagli sulla traccia in riproduzione, AppIndicator [...]

  39. Jan-Christoph Borchardt says: (permalink)
    August 4th, 2010 at 8:23 am

    @mark
    »Ellipsizing the middle helps with collections …«

    Are there any cases where it is useful except that? At the moment, I see ellipsizing at the end as far less of a trade-off. It comes much more natural and as said, the title is completed in the head. With ellipsizing in the middle, it causes a bump and you have to connect the two pieces.

    For the rare cases when there are songs by the same artist with identical first words, displaying the full title in a tooltip should do it.

  40. François says: (permalink)
    August 4th, 2010 at 8:34 am

    I would go for something simpler (hey, it’s Gnome right ?) and avoid to loose too much space:

    -is this really necessary to display “Rhymthbox” ? Is it clickable ? If not… (and even if it is… we could make something else clickable) The user knows which software he ran, right? I would get rid of it, the information is not really necessary. If he runs both Banshee and Rhythmbox? Ok, crazy guy listening to two songs at the same time… But same idea, if that’s what he wants, why not! Is the info about which software is playing what really necessary? The song matters, not the software used to play it.

    -the controls are big, centered, with lots of space wasted around it. Unnecessary. They don’t need to be that big.

    -the cover is too small. People like big photos.

    -the song title hovering the cover… Sorry Mark, I don’t like it. Unless you put the image in full width, put a small transparent layer over a part of it, then the title on this layer. Otherwise, it feels awkward to me.

    Here is a simple mockup I made in 5 min, wrong font I think, please don’t look at details:

    http://yfrog.com/59mockupsoundindicatorp.

    Still doesn’t look perfect to me, we should make the whole indicator larger and allow more “breathing” with some bigger spaces between elements. But I think you see the idea: big focus on the media, not on the software.

  41. Rory Holland says: (permalink)
    August 4th, 2010 at 9:08 am

    Absolutely not. It looks like a mistake; like some kind of CSS problem in IE6.
    Why not just have 2 lines for the song title? It’s bold already so it will clearly still be the same field.

  42. Matt says: (permalink)
    August 4th, 2010 at 9:46 am

    Hmmmm… I’m not sure I like the text running over the art.

    What happens when you get some black / white text at the top of the album cover? Wouldn’t it make both the metadata and the album art difficult to read?

  43. molok says: (permalink)
    August 4th, 2010 at 9:49 am

    One of the reasons the text ends being “ellipsed” is simply the default size of the font, which is IMHO far too big, especially on notebooks (it might have something to do with DPIs, I don’t really know) . I use Trebuchet MS 8.5pt, the default until Maverick was Sans 10pt.

    I like the idea of a Sound Menu, but it’s important to understand it’s not supposed to *replace* the music player; the “Choose Playlist” entry scares me a bit. There are already enough features, selecting a playlist is a step towards bloat.

    I would also like to point out that in most of the cases it’s safe to assume at most one music player will be playing, so vertical space is not a real issue here. It would be also better if the controls’ position was independent with the length of the title or absence of the cover picture.

    This [1] is a mockup I just created, wrapping is IMHO the way to go. I couldn’t use the new Ubuntu font for the mockup because it’s not yet available for proles.

    [1] http://i.imgur.com/KPVOS.png

  44. ssam says: (permalink)
    August 4th, 2010 at 9:57 am

    could we also have an output device selector in there? (bonus points if i can select another machine on the network as an output device)

  45. jake says: (permalink)
    August 4th, 2010 at 10:09 am

    heres an idea – expand the needed area- with some animation – when mouse/selection hovers over it
    when mouse leaves that area of menu the area will collapse to normal size with minimal data- like artist+song name or just song name

  46. Joe R says: (permalink)
    August 4th, 2010 at 10:12 am

    Can you give users options so they can choose in the settings which layout they prefer. For me – I would like large art with the album info available in mouseover text and in a foldout below the art.
    Track name should be above the art. Move “Rythmbox” down near the bottom with the secondary info.
    Just my 2 cents

  47. Andy says: (permalink)
    August 4th, 2010 at 11:01 am

    Is there a reason why the whole thing can’t just be made wider? The menu is only going to be visible when I’m actually interacting with it, so I don’t see what the point of cramming lots of information into a small space is (perhaps minimising mouse distance? is that enough justification?)

  48. Giorg says: (permalink)
    August 4th, 2010 at 11:07 am

    I’d love to see moving/rotating/scrolling text, I’m just not sure if it’s doable in GTK. It would solve all issues, keeping a reasonable space for even the longest song name…

  49. monocult says: (permalink)
    August 4th, 2010 at 11:16 am

    Simple replace the Rythmbox title with the track name. Promoting the Rythmbox application makes no sense here and only waste space.

  50. Alexi says: (permalink)
    August 4th, 2010 at 11:50 am

    Hi Mark,

    I think the best solution would be to have long titles scroll. I listen to Classical music which tends to have long titles. When using space restricted interfaces, like on the iPod/iPhone, I often can’t tell what the song title are. Ellipses in the middle of truncated titles can help but not always.

    I also think that the Play/Pause, Previous and Next buttons should be smaller than in the original mockup. with the Play/Pause button being slightly larger than the other buttons.

    Thanks for all you and your team’s hard work on the user interface! While writing code is very important, presentation and usability is equally important.

  51. Steve Antal says: (permalink)
    August 4th, 2010 at 12:11 pm

    Sorry to be a party crasher, but while this is nice and all, I still can’t rearrange fields in Rythmbox, I mean call me an elitist power user but I think that’s a basic functionality. So my point is, this is nice and all, but having Rythmbox as a default music player which gaps like this irrational.

    The reason I hate indicators is that they make showing an application hard, I mean not only you can’t do it with one click, it’s way at the bottom, I mean it’s like the designers of this didn’t want us to use it, will this be fixed?

    You could give us evil power users two options for this in gconf: left click show application, right click show menu :)

  52. Flimm says: (permalink)
    August 4th, 2010 at 12:37 pm

    Could the sound menu try to make an intelligent guess on where to put the ellipses? If there are other tracks with similarly starting names in the play-list or library, put the ellipses in the middle. Otherwise, put them at the end. Details like that make software awesome.

    Choosing to overlay text over the album artwork works in this case, because the piece of art doesn’t have anything visually important in the top boundary. It wouldn’t work in this case: (random album art from Jamendo used)
    http://i34.tinypic.com/sawy.jpg

  53. Ubuntu 10.10: nuovi Mock-ups per l’indicatore del suono - Chimera Revo says: (permalink)
    August 4th, 2010 at 12:40 pm

    [...] Shuttleworth ha annunciato sul proprio blog personale che i lavori per perfezionare il nuovo indicatore del suono che verrà [...]

  54. Usman says: (permalink)
    August 4th, 2010 at 1:06 pm

    After your editing there is space above and below the text that is empty (relative to the picture). I suggest the balance would be that you start the first line text from the right of the image, top aligned (rather than on it) and if the text does not fit on one line then continue it on the second and maybe put ellipses on the second line if needed, below that could be other info.Also the text size/boldness of the first line could be decreased a bit.

  55. Martijn says: (permalink)
    August 4th, 2010 at 1:25 pm

    The buttons seem out of place somehow. I think black square buttons (purple when hovered) would integrate so much more. Thoughts?

  56. Luca says: (permalink)
    August 4th, 2010 at 1:53 pm

    guys what do you think if in the volume bar to appear also that of the microphone?

  57. Salvacus says: (permalink)
    August 4th, 2010 at 1:54 pm

    Text going across images always looks awful. How about just having artist name to the right of the image and song title beneath the image? Just make more vertical room.

  58. Marc says: (permalink)
    August 4th, 2010 at 2:54 pm

    Drop shadows should definitely be constrained to the art overlay, but since the album art and player controls are both fixed sizes, I would just put those alongside one another, and allow the text to take up the full width of the menu. This also reduces the need for those controversial ellipses. (If they can’t be placed intelligently (as Flimm has also suggested) quickly enough to keep the menu feeling responsive, I would put them in the middle too, for the reason you cited.)

    I’d also prefer the track details to stay right aligned, because it makes it easier to scan the left side for application names, and hanging icons would really highlight them. (These kinds of things help avoid jumbling the words up, for me at least.)

    Individual volume controls, at least for the three most recently active programs, are also on my wishlist.

    http://img.obfuscatepenguin.net/ubuntu/panel/volume-applet/july-2010-mockup/

  59. Jason says: (permalink)
    August 4th, 2010 at 3:08 pm

    I very much like the idea of putting the track controls (pause, next, back) beside the album art. This leaves space around the track controls for easy and quick access without accidentally clicking nearby and affecting something else, as well as then giving more space either above or below the album art for the track meta data. Additionally, the idea of having the track name scroll where appropriate is a a good one.

  60. Adhemar says: (permalink)
    August 4th, 2010 at 3:28 pm

    Just like Colin, I find it strange that the metadata should be right-aligned when there is artwork, and left-aligned when there isn’t any. That doesn’t feel very consistent.

    I can understand that you feel that metadata should be left-aligned when there is no artwork. Almost everything else in dropdown menus usually is (in left-to-right locales). But if the decision is made that the metadata should be left-aligned when there isn’t any artwork, it should be left-aligned too when there is artwork. A simple solution would be to display the artwork to the right.

  61. nixternal says: (permalink)
    August 4th, 2010 at 3:36 pm

    Do we really need album art in that area anyways? Album art is cool on your little media player to show off, but I think it is a useless feature overall. I mean, if you have music in your collection and when a song comes on, you don’t know who it is and you need to see the album art, then why do you have that song in your collection in the first place? I know when I turn up/down volume I do it with the media keys or keyboard, or I hover my mouse over the speaker icon and scroll up/down to change volume. I think having the album art in that area is doing nothing more than cluttering something that doesn’t need to be cluttered in my opinion. I like the little notification that displays this info, don’t need it elsewhere since it is already in my player and the notification (though I use KDE, installing Ubuntu Mav now to play with GNOME a little).

  62. Linux – SoundMenu. Новые подробности | EraldoCoil - Приватный Блог о IT технологиях. says: (permalink)
    August 4th, 2010 at 4:02 pm

    [...] Shuttleworth открыл у себя в блоге обсуждение саунд-индикатора, который будет в Meerkat. Он предложил [...]

  63. Damien says: (permalink)
    August 4th, 2010 at 4:06 pm

    The whole song title should be available. As with the standard deployment of all GNOME (and KDE, Fluxbox and others) there is oodles and oodles of wasted screen space. The netbook edition of Ubuntu goes some way to address this the graphics guys Canonical employed really aren’t push for neatness. The “feel” of a desktop are vital. Windows XP task bar has a great feel, GNOME is cold, harsh and unfriendly.

  64. amano says: (permalink)
    August 4th, 2010 at 4:18 pm

    The ugliest thing are the buttons (backward/pause/forward). They look cluttered and messy and use a lot of space. Look at THAT mockup that was posted on OMG! Ubuntu which looks very clean: http://lh6.ggpht.com/_r9psDEm7V9w/TD5mcsZJl8I/AAAAAAAAABk/VckthtvD_rE/sound-applet-mockup.jpg

  65. sayshh says: (permalink)
    August 4th, 2010 at 4:56 pm

    IMO the player controls (play/pause, forward, rewind) need not be present in the sound indicator. Volume indicator should be to display/adjust volume and not to control what is being played.

    Once this space is freed, the track information can be freely displayed without any gimmicks like shadowing or wrapping around.

  66. Mackenzie says: (permalink)
    August 4th, 2010 at 6:03 pm

    Why not put the album art on the right so that you don’t have to swap left and right alignments? It’d look really silly if you had right-aligned text from Rhythmbox in the menu at the same time as left-aligned from Exaile (or whatever) when only one of the two has art available for what they’re playing.

  67. usman says: (permalink)
    August 4th, 2010 at 6:57 pm

    i put a perfectly legal comment and it got deleted as spam wow

  68. Nicolas says: (permalink)
    August 4th, 2010 at 9:03 pm

    Im really like this mockup: http://picasaweb.google.com/100804433705878937883/Mockups#5493946264489470306 because it follows the line of icons of the rest of the icons of ubuntu … I think that the actual buttons are really ugly (sorry for be direct). All the design is really cute but the buttons looks like Windows Media Player, i think that the indicator needs to follow the behavior of the other apps. For example, if we change the icon theme, then the previous, play/stop and next icons needs to change in the indicator for the icons of the theme, just like all the media players do it.

  69. daqwid2727 says: (permalink)
    August 4th, 2010 at 9:08 pm

    http://yfrog.com/6wsoundindicator2p i have my own mockup (sorry if i make same mistakes i’m not best in english)

  70. jon says: (permalink)
    August 4th, 2010 at 9:38 pm

    Hi Mark, please allow change of output volume while “on mute”.

  71. Mike L says: (permalink)
    August 4th, 2010 at 9:54 pm

    Mr. Shuttleworth, what if we used a refined keyboard mapping in GNOME for Rhythmbox? Like the following:
    1) ALT+P for starting Rhythmbox
    2) ALT+,(Comma) to pause Rhythmbox
    3) ALT+.(Period) to stop playback
    4) ALT+Up Arrow to raise the volume
    5) ALT+Down Arrow to lower the volume

    These are simple things that could be added to the next release of Ubuntu. Especially for non-multimedia keyboards (the ones with large buttons that say Home, Back, Play, Mute, etc.) There are already shortcut options included in Ubuntu, Gnome for that matter, that control Rhythmbox directly, yet I can see it may be a benefit to add more shortcuts, and enable them to start. As well as include easier key mappings, that make more sense, like CTRL+ALT+G or WIN+G for GIMP, think GIMP starts with G. Or CTRL+ALT+T or WIN+T to launch Gedit, think T as in Text Editor. We could also add shorter key commands, for example, WIN+Left Arrow to go left one workspace instead of CTRL+ALT+Left Arrow. Another possibility is to map more common applications to the F1-F12 keys. Such as F1 for Firefox, F2 for Evolution, F3 for the terminal, and F4 for the run dialog. We could control the Help Application (yelp) with F8, and use F11 to toggle maximization state and F12 to go to fullscreen mode. Infrequently used and useless keys such as Scroll Lock could be used to lock the screen. The only problem with these configurations may be that certain applications, especially those not native to Gnome, like Firefox could have their shortcuts overwritten. These are just some ideas, but they are simple to include, and will solve the end user reconfiguration later on.

  72. Stuart says: (permalink)
    August 4th, 2010 at 11:09 pm

    I like the implementation. I think if this is enabled by default then the Rhythmbox status icon plugin should be turned off by default, otherwise it’s made redundant.

    I would prefer it if the buttons were proper GTK buttons rather than custom images (and used my chosen iconset).

    Hopefully Banshee will implement this too (my player of choice).

  73. Hanno says: (permalink)
    August 4th, 2010 at 11:52 pm

    Maybe even : the artwork fills the whole background space from the rhythmbox title down to just above the timeline?

  74. Forest says: (permalink)
    August 5th, 2010 at 12:35 am

    I want to put in a 2nd vote for something like:

    http://picasaweb.google.com/100804433705878937883/Mockups#5493946264489470306

    The current version is so cluttered and unprofessional looking, and putting the title over the album art only makes it look worse!

  75. notatoad says: (permalink)
    August 5th, 2010 at 12:59 am

    if you’re worried about vertical space, how about not giving the application name a full line. instead of the word “rhythmbox” and a music icon on the line above the art, put the rhythmbox icon and the track name.

  76. Goran Crnkovic says: (permalink)
    August 5th, 2010 at 2:50 am

    Third vote for something like http://picasaweb.google.com/100804433705878937883/Mockups#5493946264489470306

    But I would like the song title to be bigger…without overlap.

  77. Damian says: (permalink)
    August 5th, 2010 at 5:13 am

    I definitely like the current layout the best. It’s very clean.

    Keep the good work.

  78. Benjamin says: (permalink)
    August 5th, 2010 at 5:38 am

    I wanted to ask the same question as Andy: “Is there a reason why the whole thing can’t just be made wider?”
    After all, there is space, why not using it? The menu is used few seconds at best only. I’d opt for a screen-wide menu, but that’s my taste, best would be making it customizable for users, people will thank you for that.
    Another question: will we need to click on the menu or will mouse-hover be enough? Latter would be clever.
    Amazing job anyway :) Thanks.

  79. Micah says: (permalink)
    August 5th, 2010 at 7:01 am

    Wow, Wyatt’s mockup (the one hosted on picasaweb) is brilliant. Let’s hope the final version of the indicator is a lot closer to that than the current official versions or the official mockups.

  80. molok says: (permalink)
    August 5th, 2010 at 8:12 am

    My previous comment got caught by akismet :(

  81. Nick says: (permalink)
    August 5th, 2010 at 9:15 am

    I prefer the initial design without the text over the album art. I agree with some other comments that scrolling text might be a better solution.

  82. Ramon Villalonga says: (permalink)
    August 5th, 2010 at 10:31 am

    I have made another design modifying both designs.

    Here is:

    http://picasaweb.google.com/lh/photo/Wa07siWa0avykw6-p6eBtA?feat=directlink

    What do you think?

  83. Ramon Villalonga says: (permalink)
    August 5th, 2010 at 10:39 am

    I made another disign:
    http://picasaweb.google.com/lh/photo/Wa07siWa0avykw6-p6eBtA?feat=directlink

    What do you think?

  84. Ayatana Sound Menu « Thorwil's says: (permalink)
    August 5th, 2010 at 11:13 am

    [...] by thorwil Leave a Comment 2 Mockups in reaction to Mark’s post, this other mockup and also Troy’s interesting but wordy [...]

  85. Denis says: (permalink)
    August 5th, 2010 at 11:59 am

    It’s a nice idea to add music (and other sound) player information in the menu. Although a user may get confused if both Rhythmbox and sound icon are present and do similar things.

    I think the menu should be kept minimal, as it can get pretty bulky when many sound applications are running. Maybe the playlist and “time” controls aren’t necessary. The mockup looks much better to me.

    Good luck with improving this new feature!

  86. lootic says: (permalink)
    August 5th, 2010 at 1:46 pm

    Just want it to look like:
    http://picasaweb.google.com/100804433705878937883/Mockups#5493946264489470306

    I tried to pin down why I liked it and:

    -Very few grid lines(or what to call it, simply the lines cutting the different sections) which is what makes it feel uncluttered. The current media buttons are creating and following a multitude of different lines Id say the media buttons is the biggest problem.
    -Theres little whitespace, I like when it is compact.
    -It feels consistent and simple, the more monochrome media buttons feel more like the same as the monochrome indicator icons.

  87. lootic says: (permalink)
    August 5th, 2010 at 1:48 pm

    Voting for:
    http://picasaweb.google.com/100804433705878937883/Mockups#5493946264489470306

    I tried to pin down why I liked it and I got down to a few things:

    -Very few grid lines(or what to call it, simply the lines cutting the different sections) which is what makes it feel uncluttered. The current media buttons are creating and following a multitude of different lines Id say the media buttons is the biggest problem.
    -Theres little whitespace, I like when it is compact.
    -It feels consistent and simple, the more monochrome media buttons feel more like the same as the monochrome indicator icons.

  88. mark says: (permalink)
    August 5th, 2010 at 2:29 pm

    @Hanno
    :-) I started working on something exactly like that, but it was 2am and I went to bed instead. Think it’s worth seeing though, would you be able to knock up a mockup?

  89. UbuntuSpammer says: (permalink)
    August 5th, 2010 at 6:27 pm

    Hey Mark
    Why Dont Just Make The Art Cover In The Center And Whenever Some1 Clicks It The Picture Animates/Disappears After 2 Second to Give The Album Details..will preserve space giving rest details too
    Also The
    @lootic Don’t U Think Having Individual Mute This Mute That Will Make It Weird ..Rather We Should have A Seperate Mute Button ..though “mute all” is good….http://lh5.ggpht.com/_r9psDEm7V9w/TD5rBPX6qWI/AAAAAAAAAB4/gY_WIR2HYYw/sound-applet-mockup-2.png is good really awesome

  90. UbuntuSpammer says: (permalink)
    August 5th, 2010 at 6:28 pm

    Also Plz Make the edges a bit curvy cause it will den look nice :P

  91. Troy James Sobotka says: (permalink)
    August 5th, 2010 at 7:33 pm

    See what I was referring to Mr. Shuttleworth?

    No clearly defined audience == random noise.

    “I like…”
    “Do we need album art…”
    “ZOMGISAWESOME…”
    “DONOTWANT”

    *sigh*

    Who is this for?
    What is their age demographic?
    What culture?
    What needs / desires are being fulfilled? How is it useful for _that_ audience?
    Are their similar presentations out there in alternate mediums?
    Can we generate a mood board from them?

  92. Troy James Sobotka says: (permalink)
    August 5th, 2010 at 7:34 pm

    s/their/there. Donkey should have read his comment.

  93. muyiscoi says: (permalink)
    August 5th, 2010 at 8:06 pm

    Don’t mean to go offtopic or anything but Mark, looks like you havnt updated in over a week :)

  94. Ari Torhamo says: (permalink)
    August 5th, 2010 at 11:13 pm

    As a few others have already brought up, the player buttons look like they belong to some other place. I hope this is just an accidental side step that will be corrected, and not a first sign of Ubuntu moving more away from the refined, simple and beautiful standard GTK look. Otherwise, I think sound indicator is shaping up great. Thanks for the good work!

  95. Mark Shuttleworth announces new Ubuntu 10.10 audio feature | Linux User says: (permalink)
    August 6th, 2010 at 10:18 am

    [...] can check out his full blog and accompanying images here. Tags: Mark Shuttleworth, Maverick Meerkat, News, Russell Barnes, Ubuntu 10.10 Did you [...]

  96. John says: (permalink)
    August 6th, 2010 at 3:17 pm

    I haven’t gone through the comments, so this may already be suggested. I would recommend putting the album art next to the play buttons (such that the art and buttons are centered vertically). That way, the entire horizontal length is available for album/track info. The scrolling suggestion would also be a good addition to this, as many tracks will have longer names.

  97. cbleslie says: (permalink)
    August 6th, 2010 at 3:38 pm

    The major flaw in this design, even more so than the album art and text, are the bitmap Rhythmbox controls. What’s wrong with just copying the buttons Rhythmbox already uses? I am sure no one here hates the GTK icons. :) You change an icon theme, all button icons change globally, keeping the UI consistent for the user.

    Don’t re-invent the wheel, Mark use what GTK gives you, the user doesn’t need to see a developers personal take on what a “play-button” should look like, when they have already become accustomed to what play-buttons look like elsewhere.

    I see this all the time with windows developers, the will re-invent the “scroll bar” or the “progress bar”. OSX, this almost never happens. Good OSX developers 99% of the time just use what cocoa gives them; the other 1% never make a profit from their applications, because they don’t provide a consistent user experience.

    Stick with the stock GTK widgets.

    Thoughts?

  98. shane says: (permalink)
    August 6th, 2010 at 5:51 pm

    One of the basic rules of design… avoid text on images… they are harder to read.

  99. Leandro says: (permalink)
    August 6th, 2010 at 7:04 pm

    +1 for
    http://picasaweb.google.com/100804433705878937883/Mockups#5493946264489470306

  100. Penunjuk Suara Baru Ubuntu 10.10. : Jom Linux says: (permalink)
    August 7th, 2010 at 10:21 am

    [...] Mark Shuttleworth, pengasas Ubuntu melalui blognya telah mengumumkan sound indicator atau penunjuk suara baru bagi keluaran Ubuntu pada bulan 10 ini. [...]

  101. ilap says: (permalink)
    August 7th, 2010 at 2:28 pm

    > Stick with the stock GTK widgets.
    >
    > Thoughts?

    You’re almost right, but do not forget that the Gtk+ Control Widgets are really old fashioned.
    You can create a good-looking app using Styles but when you want open a file interactively then a really ugly old-fashioned widget will appear for you (OpenFileDialog).
    Also the AboutBox aargh, check the Firefox’s or Mozilla one and a real Gtk one.
    The Gtk one is opening a new dialog for licensing/contributor information and needs one more click and focus to an other dialog to close… I think such issues are the highest disadvantages of the Gtk+. I have been wondering for ages why the hell the Developers are designing the widgets’s look and feel (consistency, harmony, style, usability) and why not the Artists or real UI/Desktop Designers as at Apple. I think all of the control widgets (About box, GtkFileChooserDialog, Printerdialog etc.. etc.) should be redesigned.
    The Developers (I am a Programmer, but I know what I am capable for and the Design/Art is not part of it) can not do it as they should not talented at the Art. I am criticizing the Gnome/Gtk as a casual user and not as a Developer.
    Also, IMHO the softwares (Browser, OpenFileDialog, Nautilus, Rhythmbox, Shotwell, F-spot, video Player etc ) should tend to look similar. Similar tree widget on the left, similar Toolbar at the top etc. etc. to provide a real consistent user experience. This high UI inconsistency is horrible. I hope that Ubuntu can make the changes in the (far future) as it should have enough potential. But, they should need to hire a “Color Scientist” too:) as the Color Science is a really big science and the Ambiance/Radiance Color Theme should be revieved by a really talented Color Scientist.:)

  102. nadeem says: (permalink)
    August 7th, 2010 at 9:15 pm

    thumbnail always help us to chose what we want fast and easy but what i can say for me i would prefer a smaller and simpler sound indicator no thumb at all just the name of the album the track and to make it smaller in the size

  103. pdx says: (permalink)
    August 10th, 2010 at 11:49 am

    looks nasty
    http://picasaweb.google.com/100804433705878937883/Mockups#5493946264489470306 is near perfect

  104. kikl says: (permalink)
    August 10th, 2010 at 1:18 pm

    I understand the problem but I don’t think having the title run over the artwork is a solution. It just doesn’t look professional, because it obscures the artwork. The basic problem is that you don’t have enough space to display all of the content you want.

    My proposal would be:

    Reduce the amount of information you want to display. A reduced album title has no meaning if it is undecipherable. So in your quest to show the user all the relevant information you end up communicating less. That defeats the purpose!

    What should remain? I think the album picture should remain! Why? Because most likely, the user will identify the artist and album by looking at the picture alone! But, he can’t identify the song title by looking at the picture! So what should go? The artist and album title should not be displayed at all. Instead, the name of he song should be written out as far as possible. In case someone wants to know more, well, that could be a few clicks away. If there is no artwork available, well then you could use the additional space in order to display all of the information.

    Now, I haven’t read all the comments here. So, it is quite probable that someone else has already proposed this.

    Nevertheless: The idea is great!

    Keep up the great work, we ubuntuusers really appreciate it!

    All the best and good luck!

    kikl

    PS: I hope the senseless fighting with red hat will eventually stop!

  105. kikl says: (permalink)
    August 10th, 2010 at 1:20 pm

    I understand the problem but I don’t think having the title run over the artwork is a solution. It just doesn’t look professional, because it obscures the artwork. The basic problem is that you don’t have enough space to display all of the content you want.

    My proposal would be:

    Reduce the amount of information you want to display. A reduced album title has no meaning if it is undecipherable. So in your quest to show the user all the relevant information you end up communicating less. That defeats the purpose!

    What should remain? I think the album picture should remain! Why? Because most likely, the user will identify the artist and album by looking at the picture alone! But, he can’t identify the song title by looking at the picture! So what should go? The artist and album title should not be displayed at all. Instead, the name of he song should be written out as far as possible. In case someone wants to know more, well, that could be a few clicks away. If there is no artwork available, well then you could use the additional space in order to display all of the information.

    Now, I haven’t read all the comments here. So, it is quite probable that someone else has already proposed this.

    Nevertheless: The idea is great!

    Keep up the great work, we ubuntuusers really appreciate it!

    All the best and good luck!

  106. D.G. says: (permalink)
    August 10th, 2010 at 2:33 pm

    It pains me to ask, but why would anyone think that it’s a good idea to have ARTWORK soiled by text running into it? The iPod can scroll song titles. Here, it should be possible, too. Make the menu a bit wider, reduce the font size of the song title. Done.

  107. David Ayers says: (permalink)
    August 10th, 2010 at 3:00 pm

    +1 for
    http://picasaweb.google.com/100804433705878937883/Mockups#5493946264489470306

    …yet I’d consider collapsing the mute control into an icon placed to
    the right of the existing controls.

    I.e. place a “mute all” icon to the right of the volume control and the
    left of the prev/play/next control.

  108. Harish says: (permalink)
    August 11th, 2010 at 1:13 pm

    Hi

    The UI looks great..but as everyone is pointing out that ellipses don’t look good. I will suggest to show scrolling text.

  109. Benjamin says: (permalink)
    August 12th, 2010 at 1:07 pm

    Agree with DG, wide screen -> wide menu, what’s wrong with making things simple?

  110. Yahia Chlyeh says: (permalink)
    August 13th, 2010 at 11:25 am

    Just came across the direction of Ubuntu with those title bars. I couldn’t comment on the appropriate post so I’m doing so here.
    I’m a long-time Windows user, was researching the appropriate distro for me and my hardware, but as it turns out, these windicators are a disappointment.
    This might be surprising but as a Win user I minimize GUI elements a lot. For example I would remove the File/Edit/Etc menu bar from the software that permits this, or switch it vertical/left for others. I remove the status bar and everything. I use the mouse but also the keyboard.
    Anyway, today i think the more intuitive step in desktop design is to minimalize. For example, if the default behavior of double clicking the title bar was to maximize, then it would be good to remove the maximize control button from the wincontrols to leave only two buttons.

    For the windicators, I think it’s a pretty bad idea. It would be too much clutter to my eyes. Also each window having its own special icons… Is this OLPC or something? All in all they’re really not necessary, and even when done, the file/edit menu would still be necessary since these indicators will just cover a small functionality (thus having to add vertical space in the window).
    If you’re really persistent about this “feature” you can make it have the same behavior as the overlay status bar, or better, making those indicators viewable when the mouse actually points to the lower/upper right of the window in question (or something in this direction).

    Also for what’s _in_ those indicators, I think you’re just trying too hard to put anything just to convince yourselves.
    The cart/basket? you know I’ve never bought anything from the web, and mostly, I don’t think anything else than a browser would make use of that.
    Oh, and the activity-thing, isn’t the mouse pointer not sufficient to make you see that the app is working on the action? but you really want to be more ‘graphic’ or ‘cool.’
    Also I’d never share any file with anybody. Simply attaching files on e-mail.

    For the position of the wincontrols: I’m against placing the mon the left. It’s teh worse design idea. Making them easier to reach? More noticeable? Why in the first place! it’s not like I close my windows just after opening them. In fact making them be on the right side makes them visible only when necessary, and that’s the whole point I believe.

    I think that by this new design ideas you’re just trying to make ubuntu distinguishable from any other system without real gain in functionality or usability.
    You’re actually pushing the titlebar concept in even worse direction than where it already is.
    I’m sure I understand the excitement that some people already have in regards to these windicators. Reminds me of the hype of just the “web2.0″ name.

    You really ought to review your design choices with more regards to the future.
    As for me if this will be forced onto the user without choice to disable, then I would definitely not make the switch to ubuntu but to a more reasonable distro.

  111. zelrik says: (permalink)
    August 14th, 2010 at 12:40 am

    Hello mark,

    As you said before, horizontal space is cheap. I am not sure why you don’t apply it here. That looks more like the form factor of a smartphone app. You would need more horizontal space to:
    1 – make more room for the title of the track
    2 – extend the ‘track navigation bar’ or whatever it s called so that people can scan through a track more accurately.

    Extending horizontally would also make some space to place the ‘mute all’ besides the volume control.

    my 2 cent…

  112. Dave says: (permalink)
    August 14th, 2010 at 11:55 am

    Does it still have the unintuitive behaviour of the mouse scroll button not working for volume control unless your over the pop up?

  113. mark says: (permalink)
    August 15th, 2010 at 8:24 am

    Mouse scroll volume control should work in 10.10, yes.

  114. NoSheds says: (permalink)
    August 15th, 2010 at 7:57 pm

    +1 for
    http://picasaweb.google.com/100804433705878937883/Mockups#5493946264489470306

    As for the originally posted design, don’t left alight if no album art and right align if album art – it’s not consistent! Choose either Left or Right aligned. Don’t like the pause, rewind, fastforward buttons, esp because the middle is so much bigger – consistent sizes please!

    If song title is too wide to fit, don’t elipse it, expand the menu vertically or horizontally.

    Since I rarely use playlists, why do I have to have a playlist entry on the sound menu? – to be honest, I’d much rather have the old Rhythmbox icon back with it’s old functionality.

    Since

  115. Markus says: (permalink)
    August 15th, 2010 at 9:37 pm

    I think the new sound indicator is a great idea. There is just one functionality missing for me: Switching the music from one output to another (pulseaudio). I think this is a common use case for many people (music in another room, skyping at the pc or switching music from the speakers to headphones). At the moment I have to use the pulseaudio volume control to do that. It would be great if there would be a field like the “Choose Playlist” field, where we can choose the output.

  116. Ben Finney says: (permalink)
    August 16th, 2010 at 12:10 am

    Nice design solution.

    A language note: rather than verbizing the noun and making up the word “ellipsize”, you might want to note that the verb “elide” already means what you want to say.

  117. David Raid says: (permalink)
    August 16th, 2010 at 9:28 pm

    Since I use Rhythmbox’s indicator applet to control my music (though I would appreciate some more options there) all I really want adding to the volume applet is… more VOLUME OPTIONS. If you MUST cram more functionality into the volume applet, why not add the ability to change individual application volume? Even if you insist on having track control in the volume menu, please add the ability to turn down ONLY the music.

    It’s a volume applet, please keep it’s features centered around that.

    I appreciate all the hard work that goes into making Ubuntu an amazing Linux distribution and my rant there is in no way intended to devalue that work. =p