In our efforts to improve Songbird’s user-experience, we continually revisit and refine our interfaces to provide the levels of quality you’d expect from a consumer-grade piece of software. Spend too much time designing an single interface and eventually you become numb to its idiosyncrasies. Let it cool and revisit it with a fresh perspective, research, and seek other opinions in the meantime. Each release is an opportunity to refine both visual and interaction design elements.
On the visual design front, we’re continuing to refine the visual design of our flagship feathers, Rubberducky, with new controls, better legibility and contrast, and a new sleeker faceplate.
Here’s the latest preview screenshot:
In the current 0.2.5 Songbird, the Shuffle and Repeat buttons occupy a very prominent part of the control bar right next to the faceplate. So do the Find Current Track and Next Faceplate buttons. The size and prominence of these buttons raise questions of their relative importance to the rest of Songbird’s features. Their prominence adds unnecessary complexity to the faceplate UI. To minimize clutter and complexity, we are attempting to simplify this area by streamlining our visual and interaction design.
To that end we’ve made a few refinements with regard to the Shuffle, Repeat, Find Current Track, and Next Faceplate buttons. Rather than clicking a button to get to the currently playing track’s place in the Library, click on the artist/title/album text cluster. We’ve also realized that there are few other status items as important as the currently playing song. For that reason, we’ve decided to remove the Next Faceplate button. If there is a status message that is important enough for you to see, we’ll make sure it is included as an alert or in the status area of a page or playlist.
That leaves us with Repeat and Shuffle. Where should these buttons live? Are they really part of the critical path or are they auxiliary features to the playback event? We seem to think they aren’t on the critical path, but they are a part of an expected player experience. The Shuffle and Repeat buttons are also stateful buttons, so they don’t just toggle, they also show what mode has been toggled.
So, where should these buttons live? In the faceplate? Outside the faceplate? With the playlist in the playlist toolbar? Under the service pane? Buried in a menu? After some debate we’ve come to an uneasy compromise by having them on either end of the seekbar. Shuffle on the left and Repeat on the right. Here they’ll be easy to find and have some logic to their placement. Shuffle tracks about to play on the seekbar and after the track is played, either go to the next track, repeat the playlist, or repeat the track. Where do you think they should go?
23 Comments
SubscribeI like. The shuffle and repeat buttons are in pretty good places, I say thumbs up. But. I think the bookmark icon should have a tassel or something on it, so it looks more like a bookmark. It doesn’t really make any sense unless you know what it does.
I love it - especially the new look for the play buttons and whatnot.
But I do like the darker look of the old library best, has an element of class.
Looks really beautiful,
It looks to me that the buttons for browsing the websites are taking so much space, can they be smaller? or that you can customize them to be smaller, like in firefox. so the bar becomes thinner/shorter.
and i do agree with Wilf about the darker look of the library.
but still. looking amazing.
Really nice design. I like the new Navigation buttons.
Another question: Are you thinking of integrating album art in the player? I think it would be really cool if the CD cover was displayed in the up-right corner. And I think the users want this feature.
I’m trying to make it as easy as possible for you to customize your Songbird in CSS. To make the playlist dark, look for #playlist_tree in mainwin_colors.css.
I really like the refinements so far! However I don’t think the song status/info area is the best place for the shuffle and repeat icons.
It seems to me that the established convention is that the faceplate contains information relevant to the current playing song. While shuffle and repeat are actually global settings for the playing of all songs specifically it relates more to how a playlist functions.
It would seem more logical to restrict widgets on and around the song status area only to the song that is being displayed at any given time. It would also seem logical to keep playlist related actions like shuffle and repeat either tied to the playlist area or on the faceplate area outside of the song status area.
I made a mockup of what it could look like under the source list:
I agree. Shuffle and repeat are playback modes that should be accessible but not front and center. Bottom-left, works well for this.
Is it just me, or is Songbird starting to look like an itunes clone? I noticed some similarities a while back, but figured that was just a start for UI with the development versions. With the latest version of the UI, it seems like things are becoming even more like itunes.
See for yourself:
http://www.ImageShack.us” />
In Firefox when I right click on the back and forward buttons it shows me a list of previously visited pages. A similar behaviour in Songbird could show me the next and previous songs of the current playlist.
When shuffle mode is on, next doesn’t make sense. Maybe replace the next icon with a question mark to represent that it could go anywhere in the playlist. When repeat-track is on the next button could show the repeat track icon.
If you tie the repeat and shuffle controls in with a current playlist interface you could provide much more granular control. For example you could set it to repeat 4 tracks in the middle of the playlist instead of just one track or the whole list. You could also add markers to stop the playback at the end of a specific track. Or repeat a specific track 3 times then continue.
I’d also integrate the faceplate in with the playlist more closely. Provide an intuitive connection by showing tracks queuing up behind the face plate (as if they were bands waiting to come on stage) and then coming out the other side.
The most successful form of album art I’ve seen is its use on the Apple TV. It would be cool if there was a similar play mode, so that SongBird could be operated away from the keyboard. Or so I could at least sit back and enjoy my music with the interface hidden. Maybe with the lyrics floating past (via a plugin perhaps)! But certainly with large album art.
No album art for a song? Perfect excuse to see more Songbird art
hmmm, or maybe Songbird dancing to the beat…
Wow,
i really like it!
But I always ask myself, why (songbird, tu quoque) the play and skip buttons are always on top left.
I myself would prefer them closer to the actual songs, I would go as far as putting them bottom right.
Why?
First. Well if I’m really in the mood of rediscovering my music library, it’s shuffle, skipping and occasionally picking a song that pops up in the song list.
And Second, if scanning thru the songs of a music blog, it’s the same, songs are located at the bottom. ATM, You are even placing a second play button because of that.
Keep the mouse movements nice and small
Mike
The mini web bar will be available for the advanced user who’s looking for less chrome. We will continue to allow the control pane to collapse into a mini-mode like it does in 0.2.5, so you can have a super minimal UI. Here’s the mini web bar:
philbar,
Rob’s post two year’s ago articulates it best,
“First, consider that every modern Web browser overwhelmingly looks and works the same and for good reason. The Web’s cognitive model is a tree of pages. Forward, back, location text field and other interaction elements stem from the page tree model.
Likewise, media players are undergoing a broad confluence and settling of best visual, interface and experience practices. This deliquesence of differences augurs simplicity for users and, significantly, promotes new innovation arenas for Web browser and Web site developers.
Songbird’s UI and VisDe draw upon the strengths of modern media players and improve their many wayward missteps.”
alprit,
Thanks for the feedback, we’ve been going back and forth on the shuffle/repeat buttons. Our biggest concern is that a user like my Dad won’t be able to find them if they aren’t in a prominent enough spot. Regardless, we are batting around a few ideas that put them in the playlist toolbar, much like your suggestion.
As for exploring UI’s that integrate the playlist, you might be interested in looking at a couple research mockups I did a while ago:
Those mock-ups look unbelievably sick. I agree with kberg; WOW. I’d love to be using that app.
I think the repeat and shuffle buttons should remain in plain sight. No reason to over-think this. Some of the most innovative apps break the rules; that’s why we like them. They do want we want; not what they “should.”
You have to think and design application with the use case in mind. (Not that you’re not.)
“If Juan is looking at Songbird and wants to make the current playlist/song shuffle or repeat, then those buttons should be with the playlist/song.” Why? Because he is manipulating the playlist/song. Your mocks do this and are intuitive. Why should I know that they are “global”, etc…? Screw iTunes.
Fresh Ideas about mock-up:
The top half could be minimized to only show the current playing just the way it’s highlighted there and the play/pause controls. I don’t know that after the first cool affect that artist bio makes sense; lyrics or album seem like they’d be the better long term choice. OR maybe people could choose between them ad-hoc.
Let the bookmarks and stuff, we have today, take up the left-hand side. And pretty please, put a “Now Playing” queue/playlist that can be created and managed ad-hoc there at the bottom of that area.
Move the navigation/web url part above the tabs and have them change as the tabs are selected like it does now.
I love the tabs and I’d be interested to see how you were thinking the albums in grid view would work.
Again, the mock-up looks very cool. What were you thinking the albums grid-view use cases would be?
The use cases for album grid view are the same as it is for viewing a list of albums, just in another format. Some people are list-lovers, some are art-lovers… While coverflow is super cool, it falls short when I want to see multiple albums at once, eg. all the albums I have by the Beastie Boys.
Yes, but, I think when looking at User Interface design and thinking of what becomes “established” you should keep in mind how the original interface design came about.
ITunes has the player interface controls at the top. But why is this? It’s because on Apple computer systems the “taskbar” is at the top of the screen.
Windows Media Player has the player interface controls at the bottom. This is because the Windows taskbar is traditionally at the bottom of the screen.
The location of the interface controls was chosen to minimize mouse movement after giving focus to (or opening) an application from the operating system’s taskbar. This placement, for the individual operating systems, is in the most intuitive position.
All internet browsers have their controls at the top because the Address bar is at the top. The Address bar is at the top because people don’t like looking at the very bottom of the screen while typing.
Since Songbird is a multi operating system media player it gets a bit tricky. I would personally like to see two default feathers. One for Apple systems, with a layout like the current Songbird, and one for Windows systems (and Linux systems) with a layout similar (but better than) Windows Media Player.
If you can’t tell, I get my jollies from UI design.
Your post really distracted me today. I’ve been playing and thinking about Songbird rather than doing my own work!
Anyway I’m starting to get used to some things and I thought it might be useful for you if I point out where my learning curve has been.
The biggest problem has been with the playlists. I was getting lost. For example, I would find an item in my library and play it. But I didn’t grasp that it wasn’t being added to a playlist anywhere, it was just playing that track within the context of the library. I’m used to a song being added to the current playlist when I double click.
But now I’m getting used to, I really like having multiple playlists that I dynamically create. This way makes sense, it just took me a little too long to get there.
I think the main issue may be with the sidebar. The simplest change would be to make the currently playing playlist (or the library) bold in the sidebar.
The other problem is I can’t keep a playlist open when I am adding items from my library. I like the large view for all the information it gives you, but maybe a less detailed list (song title and artist) could be kept in view at all times. This could be a sidebar that I can collapse or keep open.
Or I could also expand it further to show something more like what you created in the mock-ups above. Rather than just getting a list, there is also relevant information, possibly album art, things I can click to get lyrics, or search or whatever. This makes more sense than having it relate to the current song specifically, because a song only lasts 3 minutes; my playlist stays until I decide to get rid of it. It’s no good if I’m reading an artist’s biography and suddenly the track and biography change!
hmmm..
…okay I ended up going away and drawing a picture! I think I might be getting a bit obsessed.
So this is with the collapsed playlist. Expanding it would just provide the normal table view.
I should probably have added a link back to the library.
This could also be used as the interface for editing the id tags. And it’s a portal into the web, band forums, lyrics, similar music etc.
And when you click on the faceplate, it now finds the current track in whatever playlist you are in. If you click there while in this mode, you will see this same information but for the current track.
oh, oh, oh
so the user will be playing a song.. say Ziggy Stardust by Bowie. Decide to find out more, so click the song on the faceplate. The above screen pops up with all the locally stored song data nicely presented, but… no album art. User clicks the Wikipedia search button. The user is now browsing the Wikipedia page for Bowie and finds the album cover art. They click and drag the image over to the song in the still open playlist. A pop-up appears asking whether they want to save this for the current song, for the whole album or for the whole artist. Bang new cover art. Simple.
The user then searches Google for Bowie and finds a forum. Decides this might be worth looking at again, so drags the URL onto the song in the playlist. Bang, a song (or artist, or album) specific bookmark is automatically created.
… I really did get carried away with this comment.
Songbird (in my view) is a project dedicated to integrating the two things that the consumer (the music listener) generally would like (and something that the programers can do very well). Nowadays people use their media-player and their favorite web-browser most when at their computer. To integrate the two (and do it well) is such an accomplishment that people are calling it the new Firefox (and not just because both titles have an element combined with an animal, mind you) which has been downloaded millions of times.
Now then, when building a UI for such a thing you have to come in contact with many things that may conflict with the layout.
For one, you have to accomodate the millions of users that transfered from iTunes. These guys did it in several ways: The UI is similar, and there are extentions that handle iPods and transfer playlists from iTunes.
Another thing one has to deal with is the constant usage of such a thing. If the program is a media player and a web-browser, the two most used things on a computer, one must keep the most commonly used items in such things together for the sake of less mouse movement.
But, one has to consider the consequences: The controls are far from the taskbar. But to keep the controls with the URL bar, it has to be at the top. Should one suffer to spread the two most commonly used items entirely across the screen? My answer is, for the sake of chirping nicely, heck no.
I will agree here that this UI looks “sick”, but I wouldn’t use it. I love browsing the web while listening to tunes and being able to control them easily without even going to the taskbar. If this were to come about, I would stick to the nightly I have installed on my computer now and I would learn C++,XUL, CSS, and all the other languages it takes to fix the bugs on my own. However, if it were to come as an option (as “bones” so to speak) we would all be happy.
thanks a lot, you guys were ahead of me…
great work!!
Right. The point is to create a system that can allow people to cook up whatever kinds of UI layouts they like.
You know, it should be __really__ easy to write an overlay extension that puts a set of buttons in the bottom-right. And you can just reuse the skin values for the miniplayer buttons.
Any smart extensions programmers reading this?
To mig, yes, I agree with you.
download mp3 b