Some more catching up with things that occurred recently; on Monday February 23 we1 had our second This happened. I am quite satisfied with how things went.
For one; we had some unplanned cohesion2 amongst talks.3 Three out of four talks discussed the use of field research (to use the term broadly). It was good to have some discussion of how this is put in practice, as I often find ethnographic techniques being presented as some kind of silver bullet, but without any clear demonstration of its application. It was also cool to see field research being applied effectively in such different contexts (primary school, the elderly, South Africa).
To my relief, a significantly larger percentage of the audience (compared to last time) was female.4 This was something we had worked consciously towards, since the first edition’s testosterone quotient was a bit too high. In my opinion, a more diverse audience is conducive to the kind of relaxed, open and honest atmosphere we are pursuing. The main way we tried to draw in a more balanced mix of people was by inviting more female speakers. Three out of four talks were by women. All of them were great. It seems to have worked.
I love that This happened seems to be a venue for the kind of unassuming and honest presentations we somehow stop giving once we leave design school (or at least I have). I can’t think of other events where I am treated to such wonderful war stories from the front-lines of interaction design.
The discussions after each session were good again as well. Lots of thoughtful questions, critical, but fair. Alper was kind enough to keep minutes, and has blogged the most salient parts over at his site (in Dutch).5
Our friends in London launched a new website that now contains videos and slides of all talks from past events. The Utrecht sessions are on there too, so go have a look. It already is an amazing collection of high-quality content. Some of my current favourites are Troika, Crispin Jones and Schulze & Webb.6
The next This happened – Utrecht (number three) is set for June 29. Hope to see you there.
We’re less than four weeks removed from the second edition of ‘This happened – Utrecht’. As you may know, this is an event I am organizing and curating together with Alexander and Ianus. We’re trying to offer an alternative to flashy product-focused (and fuzzy theory-based) sessions that are prevalent in the interaction design event landscape. ‘This happened’ presentations are short stories about how a project came to be, warts and all. Think of them as the DVD extras for interaction design.
On Monday February 23, we’ll return to Theater Kikker in Utrecht, the Netherlands for #2. Our first edition was a success, and I’m really looking forward to continuing the experiment. Here’s who we’ve invited this time to come and shed light on one of their projects:
Niels Keetels, a game design researcher at the HKU, will be talking about Softbody. A game that is interesting because of its lush expressive visuals, as well as the clever balancing of open-ended and goal-directed play. Oh, and how many games fo you know that had their mechanics inspired by honest-to-goodness field research?
Sanne Kistemaker of Muzus will present Piece of Family, which was developed in collaboration with Vodafone. It’s a communication device designed for the elderly, composed of a sketchpad and a scanner, which instantly posts whatever’s written to a blog. The design won a prestigious Dutch Design Award.
Irene van Peer, a celebrated product designer, will talk about the Mahlangu Hand-washer, which was featured in the New York Times 8th Annual Year in Ideas. It is both a product (developed as part of a sanitation project in Africa) that involves converting the cap of an empty bottle into a homemade tap, as well as a set of instructions that can be passed on from person to person.
Finally, we have Naomi Schiphorst and Mieke Vullings of MIMOA, who will show how their free and open online guide to modern architecture came into being. The site is aimed at a broad audience, not just architects, and aims to build a durable community.
Head over to the This happened – Utrecht website for expanded descriptions of the talks (in Dutch). The registration will open on Monday February 9. I hope to see you there!
So far, Ianus, Alexander and I have announced three of the four people who’ll be speaking at the first Dutch This happened. They are Fabian of Ronimo Games, Philine of Supernana and Dirk of IR labs The final addition to this wonderful line-up is Werner Jainek of Cultured Code, the developers of Things, a task management application for Mac OS X as well as the iPhone and iPod Touch.
When I first got in touch with the guys at Cultured Code, I asked who of the four principals was responsible for interaction design. I was surprised to hear that a large part of the interaction design is a collaborative effort. This flies in the face of conventional wisdom in design circles: You’re not supposed to design by committee. Yet no-one can deny Things’ interaction design is solid, focused and cohesive.
Werner and his associates collaborate through vigorous sketching. Sometimes they produce many mock-ups to iron out apparently simple bits of the application. A prime example being this recurring tasks dialog. Just look at all the alternatives they explored. Their attention to detail is admirable. Also, take a look at the photos they posted when they announced Things touch. I’m sure that, if you’re a designer, you can’t help but love carefully examining the details of such work in progress.
Werner tells me he’s been busy scanning lots of sketches to share at This happened – Utrecht #1. I can’t wait to hear his stories about how the design of both the desktop and mobile app have happened.
Werner completes our line-up. Which you can see in full at thishappened.nl. There, you’ll also be able to register for the event starting this Monday (20 October). I hope to see you on 3 November, it promises to be a lovely filled with the stories behind interaction design.
It’s time to start revealing the speakers for This happened – Utrecht #1. First up is Fabian Akker, co-founder of the independent studio Ronimo Games. The studio was funded with money Fabian and his colleagues earned by selling the concept behind one of their games to THQ.1 The game is called De Blob, and the new version is now available on the Nintendo Wii and DS.2 As part of a 3rd year assignment at the Utrecht School of the Arts’ Game Design and Development course, De Blob was created for the municipality of Utrecht. The aim was to allow people to explore the city’s future station area, which is under heavy reconstruction. You could therefore call De Blob a serious game — a game that is not only fun but also useful. It is not often that a serious game makes the transition to a title aimed purely at entertainment. It is more often the case that an entertainment concept gets injected with some ‘serious’ content, with usually disappointing results. At This happened – Utrecht #1 Fabian, who was the original game’s lead designer, will share the story of how it came to be.
I announced This happened – Utrecht #1 last week. The event takes place on Monday 3 October at 20:30. Registration will open next Monday (20 October) — space is limited so mark your calendars!
I’m happy to announce This happened – Utrecht; a series of events for interaction designers that I have been working on together with Ianus Keller and Alexander Zeh. On Monday 3 November we’ll have our first edition at Theater Kikker. I’m keeping the line-up to myself for now, but I can assure you it is awesome.
At This happened, you’ll get four to five short lectures by interaction designers about the process behind one of their projects. Each lecture is followed by ample time for discussion. We invite speakers from many different domains, such as products, web, software, games, architecture and art. This way, we hope to show that although the outcomes are different, there is a lot to learn from fellow designers working in areas other than your own.
This happened has been going on in London for some time now, with great success. I can’t remember when exactly I first came across the concept, but I do know that from the start I wanted to introduce it in the Netherlands. Imagine my excitement when I received an enthusiastic response to my proposal from the guys in London.
I believe This happened really adds something to the design event landscape. It isn’t often you get to go somewhere to hear about the hard work that went into finished projects. Usually, you either get a demo of what has been achieved, or you hear someone talk about what it is he would like to work on, not what he’s actually done. Neither is very informative for practising designers. At This happened, the focus is firmly on process, not on outcome, and on making & doing, not (only) on thinking.
Registration is free and will open around two weeks before the event starts. Watch this space, or keep an eye on the official This happened – Utrecht website (in Dutch).
I am a bit nervous about doing this, but since several people asked, here goes: You can now download the travel-time map of the Netherlands I made in Processing. I have exported applications for Linux, Mac OS X and Windows. Each download includes the source files, but not the data file. For that, you will need to head to Alper’s site (he’s the guy who pulled the data from 9292 and ANWB). I hope you’ll enjoy playing around with this, or learn something from the way it was put together.
Some notes, in no particular order:
Please remember I am not a programmer. The vast majority of this sketch was put together from bits and pieces of code I found in books and online. I have tried to credit all the sources in the code. The full write-up I posted earlier should point you to all the sources too. In short; all the good bits are by other people, the bad code is mine. But who cares, it’s the end-result that counts (at least for me).
Related to the previous point is the fact that I cannot figure out under which license (if any) to release this. So the usual CC by-nc-sa license applies, as far as I’m concerned.
If this breaks your computer, offends you, makes you cry, or eats your kittens, do not come knocking. This is provided as is, no warranties whatsoever, etc.
Why am I nervous? Probably because for me the point of the whole exercise was the process, not the outcome.
Subscribers to my Flickr stream have probably noticed a number of images of some kind of map flowing past lately. They were the result of me tracking my progress on a pet project. I have more or less finished work on it this week, so I thought I’d detail what I did over here.
Background
Following my Twitter dataviz sketches, I thought I’d take another stab at prototyping with Processing. On the one hand I wanted to increase my familiarity with the environment. On the other, I continued to be fascinated with data-visualization, so I wanted to do another design exercise in this domain. I was particularly interested in creating displays that assist in decision making and present data in a way that allows people to ‘play’ with it — explore it and learn from it.
The seed for this thing was planted when I saw Stamen’s work on the mySociety travel-time maps. I thought the idea of visually overlaying two datasets and allowing the intersection to be manipulated by people was simple but powerful. But, at that time, I saw no way to ‘easily’ try my hand at something similar. I had no ready access to any potentially interesting data, and my scraping skills are limited at best.
Luckily, I was not the only one whose curiosity was piqued. After seeing Ben Cerveny demoing the same maps at The Web and Beyond 2008, Alper wondered how hard it would be to create something similar for the Netherlands. He presented a way to do it with freely available tools and data (to an extent) in a workshop at a local unconference.1
I did not attend the event, but after seeing his blog post, I sent him an email and asked if he was willing to part with the data he had collected from the Dutch public transport travel planning site 9292. Alper being the nice guy he is, he soon emailed me a JSON containing of the data.
So that’s the background. I had an example, I had some data, and I had a little experience with making things in Processing.
JSON
The first step was to read the data in the JSON file from Processing. I followed the instructions on how to get the JSON library into Processing from Ben Fry’s book (pages 315–316). On the Processing boards, a cursory search unearthed some code examples. After a little fiddling, I got it to work and could print the data to Processing’s console.
Plotting
Next up was to start visualizing it. I used the examples of scatterplot maps in Visualizing Data as a starting point, and plugged in the JSON data. Pretty soon, I had a nice plot of the postal codes that actually resembled the Netherlands.
Coloring
From there, it was rather easy to show each postal code’s travel time.2 I simply mapped travel times to a hue in the HSB spectrum. The result nicely shows colored bands of travel-time regions and also allows you to pick out some interesting outliers (such as Groningen in the north).
Selecting
At this point, I wanted to be able to select travel-time ranges and hide postal codes outside of that range. Initially, I used the keyboard for input. This was OK for this stage of the project, but of course it would need to be replaced with something more intuitive later on. In any case, I could highlight selected points and dim others, which increased the display’s explorability considerably.
Coloring, again
The HSB spectrum is quick and easy way of getting access to a full a range of colors. It served me well in my Twitter visualizations. However in this case it left something to be desired, aesthetically speaking. Via Tom Carden I found the wonderful cpt-city, which catalogues gradients for cartography and the like. Initially I struggled with ways to get these colors into Processing, but then it turned out you could easily read out the colors of pixels from images. This allowed me to cycle through many palettes just by adding the files to my Processing sketch. I discovered that a palette with a clear division in the middle was best, because that provides you with an extra reference point besides the beginning and end.
Selecting, again
I next turned to the interaction bits. I knew I wanted a so-called dual slider that would allow people to select the upper and lower limit of travel time. In the Processing book, there is code for plenty of interface widgets, but sadly no dual slider. I looked around on the Processing board and could find none either, to my surprise. Even in the UI libraries (such as controlP5 and Interfascia) I could not locate one.
So I decided to lower the bar and first include two horizontal sliders, one for the upper and one for the lower limit. These I made using the code on pages 448–452 of the Processing book. Not perfect, but an improvement over the keyboard controls.
Selecting, yet again
Next, I decided I’d see if I could modify the code of the horizontal scrollbar so that I would end up with a dual slider. After some messing about (which did increase my understanding of the original code considerably) I managed to get it to work. This was an unexpected success. I now had a decent dual slider.
Exploring
So far there was no way of telling which point corresponded to which postal code. So, I added a rollover that displayed the postal code’s name and travel time. At this point it became clear the data wasn’t perfect — some postal codes were erroneously geocoded by GeoNames. For instance, code 9843 (which is Grijpskerk, 199 minutes to the Dam) was placed on the map as Amsterdam Noord-Oost!
Adding more data
Around this point I visited Alper in Delft and we discussed adding a second dataset. Although housing prices à la mySociety would have been interesting, we decided to take a different route and add a second travel-time set for cars.3 My first step in integrating this was to simply generate a map each for the public transport and car travel data and manually juxtapose them. What I liked about this was that even though you know intuitively that traveling by car is faster, the two maps next to each other provide a dramatic visual confirmation of this piece of knowledge.
Representing
Moving ahead with the extra data, I started to struggle with how to represent both travel times. My first effort was to draw two sets of dots on top of each other (one for car travel times and one for public transport) and color each accordingly. For each set I introduced a separate slider. I wasn’t very satisfied with the result of this. It did not help in understanding what was going on that much.
Showing differences
After discussions with Alper and several other people, I decided it would make more sense to show the difference between travel times. So I calculated the percentage difference between public transport and car travel time for each postal code. This value I mapped to a color. Here, a simple gradient worked better than the palettes used earlier for travel times.
I also discarded the idea of having two dual sliders and simply went with one travel time selector. Although more user-friendly, it created a new problem: for some points both travel times would fall within the selected range, and for others one or the other. So I needed an extra visual dimension to show this. This turned out to be the greatest challenge.
After trying many approaches, I eventually settled on using the shape of the point to show which travel times fell within the range. A small dot meant that only the public transport travel time is within the range, a donut means only the car travel time is selected, and a big dot represents selection of both times.
Final tweaks
Around this point I felt that it was time to wrap up. I had learnt about all I could from the exercise and any extra time spent on the project would result in marginal improvements at best. I added a legend for both the shapes and color, improved the legibility of the rollover and increased the visual affordance of the slider, and that was it.
Thoughts
It is becoming apparent to me that the act of building displays like this is playful in its own way. Through sketching in code, you can have something like a conversation with the data and get a sense of what’s there. Perhaps the end result is merely a byproduct of this process?
I’m amazed at how far a novice programmer like myself, with a dramatic lack of affinity for anything related to mathematics or physics, can get by simply modifying, augmenting and combining code that is already out there. I have no ambition whatsoever of becoming a professional developer of production-quality code. But building a collection bits and pieces of code that can do useful and interesting things seems like a good strategy for any designer. I am learning to trust my innate reluctance to code stuff from scratch.
Also, isn’t it cool that it is becoming increasingly feasible for regular citizens to start analyzing data that is — or at least should be — publicly available? Government still has a long way to go. Why do we need to go through the painstaking process of scraping this data from sources such as 9292 which for all intents and purposes is a public service?4
I will probably make the final prototype available online at some point in the future. For now, if you have any questions or comments I would love to hear them here, or via email.
Update:Alper has released a JSON file containing all the data I used to make this. Go on and grab it, and make some displays of your own!
And another update: I’ve decided to make this application available for download, including source files.
And that was it. After exactly one year in Copenhagen I am back in Utrecht. I enjoyed my time in Denmark tremendously, it has proven to be a great place to start my new life as a freelance designer. Now I will continue my practice over here. Different city, same international outlook.
There is not much time to catch my breath, however. I have client projects happening throughout July and of course there is also plenty of unpacking and merging of the old and new life to be done. I hope to publish the NLGD and Reboot stuff shortly, but it might take me a while.
Now that I am back in the Netherlands, I can also move forward with some small plans I’ve had for some time: one being a local design event and the other a ‘different’ kind of office space. I am also still looking for a creative technologist to partner up with on potential future projects. If any of this piques your interest, do drop me a line.
Less than a week from now I’ll exchange the lovely Netherlands for the equally lovely Denmark. I’m taking what you could call a working sabbatical. I’ll be freelancing from Copenhagen and have (pretty exciting) work lined up for the first three months. If you have a gig in social software, mobile or gaming and want to work with me from October onwards, get in touch.
Besides Copenhagen, you might be able to grab a hold of me in Brighton, where I’ll be attending dConstruct 2007 or Barcelona, where I’ll be speaking for the 3rd Euro IA Summit. Perhaps I’ll see you on the road?
There’s plenty of photos of the sky on Flickr, but lets be honest — skies and clouds are just so pretty, and the Dutch skies are the prettiest of all.
Tom thought the same, so he’s started a group called ‘Hollandse Luchten’ — Dutch Skies.
