Re: My last post on the benefits of mocking up UIs, here is a great example of a low-fi mockup actually being used as the final marketing for a product:
The major features of Google Reader are covered in about a minute, all with cute pasted paper cutouts and without once saying “RSS.” Obviously, this is a a polished video, but you could imagine that some version of these paper cutouts could have been used very early on to validate the concept of Google Reader with test users.
This was one of the most fun presentations of the conference, mostly it addressed a task that I want to like, but find to be a pain: mocking up interfaces. Usually I just do this on paper, and don’t iterate much. Fierlinger showed off how he could effortlessly and visually throw together UIs in Flash. He’d do dozens of iterations a day, sometimes in the middle of user testing. It struck me as incredibly agile.
Interestingly, Fierlinger was barely using Flash at all: He was basically using it as a drawing tool with a timeline. The sweet spot he settled on between interaction and static mockups are what he calls “screenflows.” These are scripted interactions where the viewer is guided through the interaction. These are useful for testing the expectations of users, as requirements documentation for engineering, and as the first pass of a testing plan.
Click through to see the full notes on how he came to this process and all the places in the development cycles that it pays dividends.
MoviePainter is a quick Processing app I wrote last weekend. It gives you a little window to paint using… you guessed it: movies. Basically, a movie is played and whenever you click and drag with the mouse, those frames of the movie are laid down onto the canvas, like a continuously-animated well of ink. This is somewhat like the painting programs that are out there, but in this case the “brush” is the combination of a movie file and an opacity mask.
I’ve recorded a screencast to show you how it works and what it does.
Here’s a great piece about a guy who was able to produce a bumper crop on a vacant lot in Tuscon, Arizona by harvesting runoff from roofs and streets around the lot. It’s a nice bit of daydreaming for the wannabe urban farmer.
Here’s a map of the growth of his terraced gardens over the years, which I include because it’s a lovely small-multiple visualization:
Fiat has a cool new app called eco:Drive that uses accelerometers to analyze drivers’ efficiency (speed, precision of gear changes, etc.) The data is shared online, letting people compare their driving skill with others and estimate the cost/CO2 savings that they earn by becoming better drivers.
Unfortunately, it only works with specialized hardware in certain Fiat cars. It would be amazing if they could create a tracker that could use the accelerometers now built into any iPod/iPhone, cellphone, or laptop.
One of Amos’ new efforts at DiscoverMagazine.com is a new “journalistic mashup” blog call 80beats, which reports on scientific topics of popular interest. Here’s a screen snip of the text from an entry about new solar panels that use internal reflection to collect sunlight:
As you can see, the body of the post is made up of quotes from other news sources, colored in blue. This is a format that I really like; mashed up news from many sources. Some blogs like this are even explicit about reporting on biases; the sources themselves are sometimes a part of the story.
What 80beats is doing well is to start developing a UI around the mashup text, allowing a very natural flow of the prose. Using blue text and the occasional editorial brackets means the reader can easily ignore the sources completely and read the post as an uninterrupted piece of content. The references are there, though, for anyone who desires more context.
Wordle is a Java Applet for creating word clouds, such as the tag cloud here on mindtangle.net. However, the words can be set to orient themselves every which way, nest, etc. I’ve seen this on a couple blogs, so I decided to make my own. Here’s my delicious word cloud, artfully arranged:
I’ve exaggerated the red because it was hard for my color-differently-abled eyes to see.
Red is certainly a lucky color in China, traditionally. I wonder if green has any cultural meanings. AB did note (helpfully) that “in China, ‘green hat’ often refers to a man whose wife is cheating on him. In the unlikely event of you wanting to give your Chinese friend a hat, steer clear of green.”
This is cool: Walk-Score looks up common businesses nearby, finds out how far you’d need to walk to get to them, and compiles a “walk score” to tell you how walkable your neighborhood is. Genius use of the Google Maps APIs!
Here’s an example of an intersection near where I live:
Below are two posters up on the wall at my office, both extremely dense visualizations produced by Stanford’s Global Climate & Energy Project. I wanted find PDFs of these, but Google didn’t turn them up. So, I took pictures with my phone and posted them here. Better than nothing, though the second diagram (the more interesting one, IMHO) is almost illegible.
