Sunday, December 12, 2010

56: HCI and music

Yann Tiersen on six iPhones:

My church's worship team on iPads (skip to 5:00 to see Seth Condrey making good use of the T-Pain app):

Collective win, yes?

Thursday, December 2, 2010

55: a visualisation critique from my HCI design class

artifact: map your moves

Moritz Stefaner's Map Your Move visualization shows where New Yorkers have moved in the last ten years. His data comes from an informal survey of 1700 people, and because most of it reflects people moving from, to, or within the New York area, he uses that entire region as the focus of the graphic. All other parts of the world are mapped relative to New York City.

When you first go to his project, you see a bunch of brownish-purple circles of varying sizes. Each circle represents one zip code, and its size represents the number of moves to or from that zip code. He uses rings around circles to indicate which behavior is more prevalent (red = people moving out, blue = people moving in).

You can interact with the graphic by clicking on a circle to look at moves to/from the area, or you can drag your cursor to make a radial selection of dots that let you see a bunch of zip codes. Once you click on a zip code, all irrelevant dots fade away, and you see a bunch of red and blue lines, which represent each person's beginning and ending location, the year the person moved, and the reason why. There is also a side bar that shows general statistics for the zip code(s) you selected (# people moving in/out, reasons for moving in/out, when people moved in/out).


Overview: The first thing that I always notice is aesthetics, so when Map Your Moves (MYM) loaded on my screen, I was a little grossed out because all these different sized dots reminded me of the measles. However, it's important for these circles to be different sizes because they show you at a glance where people are coming and going. Also, Moritz maps his graphic so that you can see other locations in the world, but he doesn't attempt to make his map geographically accurate (i.e., distances are disproportional), in order to make sure everything fits on the screen without having too much unnecessary extra space. It's nice that he considered this because it goes along with Fitts' law - bigger + closer = faster. The colors are nice as well, because the red and blue contrast nicely, and the background is very neutral and therefore not distracting.

MYM doesn't have very robust zoom and filter features. You can "zoom" in on a cluster of zip codes by making a radial selection of circles. However, it's not a very precise method at all. When you select a zip code area, the graphic automatically eliminates all other items for you, so you can see your current data points very clearly, but based on your goal, some points might be more important than others. The system may be too rigid in that respect.

Details on demand: MYM is fairly good at providing details; whenever you position your cursor over a circle or a line, the circle/line becomes outlined, and a text box with information pops up, which not only helps you maintain your orientation but lets you glean specific information very quickly. The sidebar is also useful in that it shows you statistics for your current selection area.

At first glance, it's hard to compare relative numbers, because the bar graphs for each variable are in the same line. However, the designer does include gray baselines when relevant, so you can easily see whether these numbers are actually statistically significant, which may be more important than positioning the bar graphs to appear more comparable.


Because the mapping is not to scale, it's hard to find specific zip codes. Most people only know a handful anyway (office, home, school), so in order to navigate, users really need to rely on trial and error. An easy fix would be implementing a search bar based on address. That way, users wouldn't have to know individual zip codes, or have to look through each circle one by one; they could type in a familiar street or nearby restaurant to navigate (similar to the way Yelp and Google Maps work).

There is also an issue with size. It seems that Moritz made tradeoffs in usability and ability to interpret and understand information. According to Fitts' law, bigger may be better, but in this case, actual circle size is a defining characteristic and relevant to the interpretation of data. Because the thin lines and small dots are hard to select, and because many of the lines overlap each other, it's easy to either select the wrong one, or miss it entirely and click on the white space instead (which actually clears your selection completely and takes you back to the overview). You could address this with a gravity function or a magnetic cursor so it's easier to jump from circle to circle or line to line. You could also add a history bar with the last several regions you looked at, to undo unwanted or accidental actions.

In Carr's paper, he says that visualization is designed to help people who are "pursuing a goal that is unknown to the designers and requires sifting through a lot of data," but that supporting specific tasks is also good. My goal was definitely unknown at the time - it wasn't until I actually started playing with the visualization that I realized I wanted to know why people were moving away from New York and where they were going. When I scrolled over lines, I'd see general reasons for moving ("Work or School," "Can't Afford What I Used To," etc.), but there were also people who wrote things like "building was being replace[d] by a 'luxury' condo," or "Neighborhood was scary," or "didn't like australia." To me, these are the little pieces of information that make data so interesting and help people relate to one another. I'd like to see a feature that shows almost the opposite of what this visualization currently does: Start with the why (reasons) and show where people moved. This could be as easy as making the reasons listed in the sidebar clickable; zip codes with people moving away due to roommate or relationship issues could vary with size.