Yet another way to organize your music …


Because of the amazing accessibility of music media these days, personal music collections are growing and growing. It's becoming increasingly more difficult to get the songs we are looking for through one dimensional list and table based programs like iTunes. The aim of my user interface concept is to support users in finding, exploring and managing music within personal collections.


The concept is based on various visualization techniques and draws special attention to usability and an intuitive user experience.


In the zoomable interface songs are represented by circles and arranged in a self-organizing map by musical similarity (similar music nearby in space). The different characteristics of the circles give some basic information about the tracks. Zooming into the map establishes more space between the tracks – space to reveal more information. With the help of orientation markers you always know where you are.


Sort and compare song selections according to different criteria in the spatial interface. A saved selection will be displayed graphically as a line which connects the titles. Furthermore you can add various filters and receive recommendations or look for new titles.





Prototype — Demo of the UI concept


To make the ideas more tangible and to illustrate interactions and transitions within the spatial interface, I developed a design prototype. The demo is introducing the concept with the help of an annotated scenario, showing all possibilities in action.


You can download the documented version here:

Demo for Windows  (8.3 MB)

Demo for OS X  (8.5 MB)


The demo is licensed under a Creative Commons Attribution 3.0 License








Zoomable Interface
In this visual interactive music space songs are represented by circles – arranged in a so called self-organizing map by musical similarity. Furthermore, the circles vary in size, brightness and color. This gives you some fast information about the tracks (play count etc.). Also, it is possible to zoom into the music space, to have a look for additional information. Orientation markers indicate where you are and where to move to change the style of music on the screen.



The player module is equipped with general play controls and a visually enhanced play position slider. Moreover social networking features have been added.


Track collections
You can add single songs to the track collection by using drag and drop or add multiple tracks with the marquee tool. In the maximized view of the selection tray it is possible to have a closer look at your selection. To reveal interesting information and connections, you can sort your selection on two axes. A saved playlist will be displayed as a line which connects the titles in the assigned order. With this visualization, you can nicely follow your journey through the music space.



With activated recommendation mode, similar titles will be displayed by selecting a song. By jumping from recommendation to recommendation, it's possible to explore new fields in your music collection. As well intermediate songs from two or more selected titles can be displayed.


Beside a textual filter, many other filters such as popularity, release date, last played and beat intensity have been implemented. Another very interesting filter is the history. – It's possible to adjust various filters intuitively by a two-handle-slider.


Discover new music
You are able to reveal new tracks with the search function. By typing phrases or using more complex search patterns, you can discover new music. With help from the new title's position, you have an idea as to what that new music is like. The visual filter method enables you to find specific songs quickly.






Background /Approach


The interface concept and prototype are the results of a longer design process. Originally it all started with the observation that our habits of music consumption were changing quite drastically with the introduction of digital music collections – and the subsequent fairly open question, how one could improve the experience and usability in this field.


If you like to know more about the background of this project and my approach, you can download the short abstract of the design process.

Abstract of the Design Process  (PDF, 0.9 MB)







Related Sources


Visual Complexity

Paul Lamere: Duke Listens!

Anita Lillie: MusicBox





If you have questions and comments, please don't hesitate to contact me via e-mail under: