Flat Music Player

This blogger has moved!

I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers. Come join us if you are into UX, design or photography at some level. Visit Rift Labs

 

I'm at the two day Over The Air conference in London. It's a combined code camp and conference. As is customary, there is a hackathon going on. Yesterday I was sitting in a couple of sessions bored (not all of the sessions are good to be frank) and I thought I'd join the competition and submit a design. I don't know if something that doesn't run code is admissible at a code camp... we'll see.

Here is the submission:

The problem

The majority of current music applications on mobile phones are surprisingly poor.

    

Screens from a Nokia Series 40 phone and the Sony Ericsson 960W phone.

The problem with the illustrated players is that the vast majority of the screen is décor and "computer administrative debris". The information value is extremely small. All that fits on the 240 x 320 pixel screens are three band names (Nokia) or four song names (SE).

Nearly all players use a hierarchical presentation where the user steps through levels; Genre, Artist, Album, Song.

The icons are genetic and do not add any information value. The layout of the W960 music player only uses half the screen width for the song name. The result is that most song names have to be truncated even if they are rendered in a small font.

Flat Music Player

This is an attempt to apply a different approach than the hierarchical lists used in music players in most current phones. 

The assumption is that people do not think about music in hierarchical manner. People organize their music according to their own head, primarily in a spacial image.

I don’t think there should be any significant difference between a streaming player and a file player. If you add an album, it should appear in your music collection the same way as empeethree files does. ("internet radio" streaming is different of course, as you don’t select music, you select a station.)

I wanted to design this so it could theoretically be implemented for current phones on the market today. That means 240 x 320 screen size, both touch and softkeys and a layout that can be adopted for both portrait and landscape.

I’ve tried the following:

• Use the content itself as the interface
• Flatten the information space somewhat
• Provide for spatial reasoning and spatial memory

Main view

The job of the main view is to give you a complete overview. It is based on album art because album art is (currently) the best visual representation of the music. At this zoomed-out scale, the albums themselves are tiny color blurbs, but you can still recognize the individual albums.

The albums are not sorted alphabetically. New albums appear on the top of each section. The reasoning behind this is that the human brain is good with space. We know approximately where things are in space. If you want play a song you tend to remember that it was "somewhere in the middle of the Indie section".

A search is started merely by typing from the keypad. Search should be modeless, i.e. searching artists, album titles and songs at the same time. It might even get fancy and return music from the sixties if you search for "1960".

Classification is done automatically. The user can change or override classification.

Suggestions are generated automatically.

 

The sketch is charcoal, or shades of gray (standard designer issue), but it must be possible for the user to add and change around colors. MySpace-ification is admissible :-). The size and layout of the sections should be user-adjustable.

Zooming interface

Each section is selectable. When clicked or tapped on, the section expands or "zooms" to fill the entire screen. 

In this view, the albums can be scrolled and individual albums can be selected.

I made the text too small unfortunately, it has to be bigger, but must fit the same grid.

Playing

Clicking on an album opens the album, displays the song list and first song is ready to play.

The progress bar is shown under the song name, so you see what the next or previous songs are. 

This view should also offer means to discover other music "like this", bands that have influenced this band, followers, etc, etc.

The play/pause player controls are mapped to the joystick push. Fast forward and rewind is mapped to the joystick right and left. The concept of "Stop" has no use on a digital player. 

Sharing

I didn’t have time to do a "hifi" mockup of this screen.

The idea is that the recipients on top are "near", for example Bluetooth devices nearby. The recipients below are "further away", they are IM friends, Facebook, Address Book contacts etc.

Browsing new music

      

Straightforward horizontal scrolling interface. You can switch between a song list and and band/album information. 

It turned out looking like it’s more or less lifted from iTunes, I’m sorry.

Needs work, but time is up. I have to submit now.

[Update]

Lots of cool demos here. I especially liked the Social Network Open Butler (presented by Robert "Jamie" Munro). It aggregates data from several social networks into your mobile phone address book. It can add a picture found on Facebook and a place from, well, from somewhere else :-) I'll link to it if I can find something posted later.

Phone Phight by Russ Anderson is a game in the starwars genre where two people battle it out using their Nokia N95s as "lightsabres". The phones are bluetooth connected and uses the game uses the accelerometer and bluetooth to decide who wins. Hopefully someone caught it on video!

[Update]
Here is a video showing Phone Phight:

Comments

[Dan W]

Perhaps it's worth entering into the MEX DEsign contest: http://www.mobileuserexperience.com/mexdesign/

[Sony Ericsson Mobile Games]

This one is really nice one and i really impress this post and application is superb... take into more useful........nice post

[Morten Hjerde]

Johan: Thanks for the vote of confidence. The jury didn't recognize it, and I don't blame them, it's probably a little mundane. It not a crowd pleaser and events like this is about new and fun stuff. :-)

Steven: I should probably write a blog post about content as the interface. It's a concept very much in the Edward Tufte spirit.

Dan: I don't have technical resources to make it into a proper working app. But I plan to play around with it some more. Maybe in FlashLite?

[Dan W]

I saw this at Over The Air and really liked it. Any plans to expand on it or make a working application?

[Steven Hoober]

I was excited to read this bullet:
> Use the content itself as the interface

But then nothing seems to have come of it. All album art as labels for audio items.

Can you expound on this more?

[johan rhodin]

Hey! Cool with a scandinavian competitor;-) Tycker det var en bra idé, frågan är väl om de låter ett bidrag som inte är ett kodat program vinna?