nundroo

Information Visualization

Last week, after days of designing, developing and debugging (and, yes, also the inevitable last minute stress), Marcos and I presented a working prototype of our studio project. As could have been deducted from my previous post, “memory” was the main subject of our first studio class at Interaction Design Institute Ivrea, under the supervision of Neil Churcher and Ralph Ammer, resident professors at IDII. In a nutshell the task consisted of developing a software application for a collection of information of our choice.

Music and Memory

After an initial investigation and multiple brainstorm sessions we decided to work with music and how it relates to memory (a topic we stuck with from the beginning). In part because of our own experiences with music and how when each of us hears a distinct song we think of a particular moment in our respective lives. Undoubtedly, music is one of the most engaging and emotionally powerful stimuli. Listening to music can have strong effects on people’s mood, thinking and even their physiology. I think it’s mainly because of the latter that certain songs remind us so vividly of a specific memory.

Design and Programming

The course was a combination of studio and skill sessions, in design and programming. Since IDII attracts students with different professional and academic backgrounds, from computer science to industrial design and architecture (emphasizing the institute’s multi-disciplinary approach), some basics were covered at first. The programming classes proved to be the most challenging (for some reason they dumped me in the advanced class... ouch!). IDII promotes the use of Processing, a Java based programming language, developed by Casey Reas and Ben Fry (IDII, MIT). Processing is a programming language and environment built for the electronic arts and visual design communities. It was created to teach fundamentals of computer programming within a visual context and to serve as a software sketchbook. As most of you probably know I am by no means a programmer, but yet have always been interested in toying with code. Here are two examples I created: a. elasticity and b. particles. Probably nothing too exciting in the eyes of the seasoned programmer, but it nevertheless felt like an achievement to me! Now for some serious programming check out what Marcos has been playing with — yes, simply amazing.

Importance of Process

Interaction design requires good concepts and stellar execution. Consequently a good execution of a stupid concept is a waste of time, similarly, a poor execution of a good idea is a shame. Results-oriented thinking can bite you in the ass — very very hard. Earlier this year, in a must-read article, Andrei noted the importance of process in high-technology design. And boy, it is so true. Process ensures to some degree that you focus on what is important: the core of what you are working on. Getting lost in endless tangents? Go back to the core. Stuck struggling with mindless details? Go back to the core. Interaction not working properly? Go back to the core. Because no matter how good and sexy the aesthetics of an interface, nothing beats a good idea. Instead of trying to come up with an impressive interface for a crap idea or concept, go back a few steps and think hard about what a project is really about — what is the essence of what you are trying to communicate and design?

The Power of User Data

First, let me (and Marcos) thank everyone who has been so kind to share their memories related to music. The response has been beyond expectation: we gathered about 500 (!) records to date, and the database is still growing — if you are interested you can still add your memories. Additionally, a massive thank you to everyone who has linked to the project so far (K10k, Zeldman, Simplebits and others). I think it is important to mention that our intention is not to analyze the data or to discern specific psychological patterns. Rather, we wanted a real dataset for the visualization. But more importantly, the user data we collected showed us that the stories attached to the memories are the fascinating part of what we are trying to work with. The very personal, sometimes even intimate, nature of the stories is the core of the visualization. The challenge has been to build a graphical user interface (information visualization) that reflects the emotional value.

Graphical User Interface

In all honesty, we struggled a lot with the visualization of the data. Why? Simply because we wanted to address different issues at the same time — in retrospect probably too many issues. As mentioned we collected a number of attributes in the form, both quantitative and qualitative. Our initial approach was statistical, abstracted from emotion, a dry representation of data. It soon became apparent that such a visualization did not communicate the core of our project: it did not encompass the emotional or personal qualities inherent to the data set. Conclusion: back to the drawing board — hit it hard! Thus, going back to the core, and taking the stories as a starting point we sketched out different ways of accessing and displaying the content. How to browse the system? How to access the core of the data? What are essential attributes in this particular visualization? What is the essence of the user experience?

In the end we concluded that emotions, music (songs, artists) and memories (stories) are the main attributes, i.e. the essence of our visualization. Consequently we designed a 3 column interface that would reflect this approach, with a distinct focus on the memories. So what does it look like? I included a few screenshots, but I am not yet disclosing the full application. For the simple reason that we are building a public version that will launch sometime soon.

The very positive public response and enthusiasm made us realize that it would be a good idea publish our interface and make it available online. So, keep an eye out on http://www.musicmemory.net within the next few weeks. Right now we are working on refining the interface, programming in Flash, coding PHP, MySQL database, XML and anything necessary to make this work.

Technology

For those interested this is a quick overview of how our prototype actually worked, the back-end of it, that is. As mentioned before, Processing was the development environment of choice (or rather, required). This proved to be somewhat of a challenge and in the end we decided to build half of the interface in Flash and the other half in Processing. Uhm, yeah, this is probably where I should include a “do-not-do-this-at-home-kids” sort of notice. Anyway, the course brief was clear: use Processing to deliver your application — so be it.

The form (Flash) saves all the data in a MySQL database using a PHP script. Next, an XML file is created from the MySQL database. The left part (a) of the interface is a flash file that parses the XML file for emotions, songs and artists. The right part (b) is a Processing file (Java applet) that parses the XML file for stories. Now, Flash and Processing need to communicate, passing commands from the left side to the right side — this is done using Javascript. Yeah, it kind of gets ugly... but it worked, and for a prototype that is what matters. Now of course we van not publicly release such a monster, so we are rebuilding it in Flash and optimizing it for public release.

Discussion is open — there are 17 reader comments  add yours

Copyright © 2004 Didier Hilhorst. All Rights Reserved.

Remember that this is a personal web site — its content does not reflect the position or opinion of my respective employers or academic institutions.

Syndication — RSS 2.0 XML  Atom 0.3 Feed

• home
• archives
• essentials
• bookmarks
• about

Archived Article