A music library track typically has a set of data that users are interested in. Keywords or tags, title, composer, album and text description are all used by users to identify tracks that they may want to explore further. This presents an interesting UI challenge. We wanted to present the user with least complicated UI but we needed to perform searches of different types of data and furthermore we needed to help the user understand what they are searching for.
The easiest approach would be to have different boxes for a user to type their search into: one box for keywords, one for track titles, one for albums, one for composers etc. The user would be able to see what had searched for. because each box would have any text they used in their search but there could be a lot of boxes which would make for an over complicated and ugly interface.
What users deserve is one place that allows them to search over a range of data types whilst helping them see the context of there search. We call our solution the Wünderbar. In addition to searching all types of data the Wünderbar also gives feedback to what type of data you are matching. This is important because you need to know that typing in ‘summer’ to the Wünderbar could search tracks with the:
Users really need to know before committing to a search which of these they are using because the search results are going to be different in each case. The Wünderbar does this by showing the preemptive list items with an annotation to identify their type. They have to be actively chosen by the user by either clicking on them or by scrolling using the arrow keys on the keyboard and pressing enter. This makes a two stage process feel like a one stage process. It logically has to be a two stage process in order for the page to know whether you want to search by composer or keyword of title but using this UI slight of hand makes it feel un-fussy and direct.
There is another type of search – free text. The Wünderbar will always give you the option of a free text search which can be selected like any other type in the preemptive list but as the user types more and exhausts this list, the free text type of search is all that is left and is selected by the enter key mirroring the action of a conventional form.
Lastly having done the search you need to know what you have searched for. The Wünderbar uses ‘tokens’ showing the search term with an annotation to show what sort search type it is. This is important not just for the user who has just performed the search but also because each search is saved and can be recalled. any user can copy the url of the search results into an email and the recipient can see the same results as well as the search terms used in the Wünderbar
If you type in an exact match for a suggestion that suggestion is moved to the top of the list so if you type in jazz ” Jazz is moved to the top above ‘Acid Jazz’ these refinements are what make the Wünderbar together with other subtleties such as persistent search really compelling to use.