GR6 - User Testing
Design
Overview:
The overall design of the interface did not vary significantly from the paper prototype we decided to implement. The interface has 3 main visualizations: an artist similarity graph, a friends’ concerts graph, and a calendar. Each of these pages has 2 static sidebars: one to maintain a list of curated concerts, and one to provide filtering on these concerts. A static menu bar at the top of the screen is persistent across all pages, and allows the user to access any other page in two clicks, at the most.
(add screenshots!)
Design Decisions and Alternatives
One of our biggest design decisions was to allow users to access any visualization immediately. We were initially toying with the idea of guiding the user through a step-by-step tutorial, where we would present recommended concerts at the end. Instead, given the users’ varying interests, we chose to go with a more parallel design.
We attempted to make our graphs as clean and minimal as possible. Concert nodes on the graph were labelled only with the artist name, which initially confused users. Thus, we later added tooltips that provided the date and pricing information when the user moused over a node.
This way, the look of the graph remains the same, but the user can request more information with minimal interaction.
One large change made in response to heuristic testing was the price filtering. We initially chose to dynamically color the nodes based on a price slider. This was unusual and confusing, however, since it didn’t have any external consistency. Instead, we chose to bucket prices within the range of most concert prices, and colored the nodes based on the buckets, instead.
Implementation
Internals
- The backend was implemented in Ruby on Rails with a MySQL database.
- Concert information for the next few months was gathered by hand and stored in the database.
- Concert and artist information were gathered through Echonest’s API
- Katrina’s listening information was gathered through last.fm’s API
- The artist similarity visualization was seeded on Katrina's listening habits.