Random Etc. Notes to self. Work, play, and the rest.
A Quote From Edward Tufte
Edward Tufte, October 27, 2006:
"In choosing templates for workaday graphical productions, it is worthwhile to look for excellent, conventional templates. Conventional templates immediately solve a lot of graphical reading problems for the viewer of the display. But the classics are often classics because they are off-the wall, unconventional, idiosyncratic, one-off, brilliant, historically original performances. Tinkering with Minard's Napoleon's March is no better than an artist tinkering with Picasso's Guernica."
ArtNano (notes on Processing for design elements)
As I mentioned in my previous post, we were working with Geraldine Sarmiento on the ArtNano site, and she came up with the pixellised imagery you see throughout.
Towards the end of the project, I needed a few more of the pixelly images at short notice, to illustrate the essays and about pages on the site. Rather than bother Geraldine, I reached for Processing to see if I could match the look of the homepage imagery that she had created.
I came up with an applet that used a bit of blurring, a bit of distance fall-off, and a bit of perlin noise to create the effect that we were looking for (decorative, obscured, but related to the overall site). Here's an example of the imagery created from a picture of Scott Snibbe's Three Drops that we used on the page for Jennifer Frazier's essay:
You can see the full applet and source code here, and I think it's a good example of how a generative solution to design elements can keep a project flexible right up until launch (and beyond).
mySociety Travel Time and House Price Maps
O'Reilly Radar has the scoop on the most recent thing I've finished working on at Stamen. Interactive travel time and house price maps for London. Go play, and read what mySociety have to say, including the ones for BBC TV Centre and the Olympic Stadium site. Then come back and read this full post if you want the background info...
I've had a slow debate running with mySociety's Tom Steinberg since Euro FOO '06 about the best way to present travel time mapping, after we compared notes from my travel time tube map for London and the work Chris Lightfoot did on mapping transport travel times in the UK as a whole.
It seemed like the best way to settle this debate would be for mySociety and Stamen to work together updating their maps and see if we could get the best of both worlds. MySociety had comprehensive travel time data that they, uh, acquired from Transport Direct and Transport for London's journey planners. They also had an ace up their sleeves with the purchase of house price data for London from the UK's land registry. So far the volunteer-led map design had come up with strong proofs of concept, but a consistent set of presentation material was needed to make a compelling argument about the usefulness of these maps in the general case.
Our initial attempts to update the map began with a couple of days of Tom Steinberg and I alternately hunched over Photoshop and poring over the Edward Tufte books (passages recommended by the man himself) and looking for an appropriate colour gradient to represent travel contours (I didn't know about this resource at the time). All the while Francis Irving was back in the UK working on the heavy lifting behind the project, getting the data gathering and overlay rendering up to speed. We tried a few different things, but actually I thought that the palette Tom had worked on with mySociety volunteer Richard Pope was pretty good, and that's the one we used for these static contour maps. (Early mySociety results on the left, updated one in the middle, my final one on the right).
These maps got much less satisfying with the addition of the house price zones, however. That was what Tom had originally asked us to help with; a thorny problem that needed a new approach. After poking around with the various two and three colour overlays with my colleague Mike it became clear that the combinations of masks and outlines were immensely confusing to work with. In addition to this problem, Tom and Francis at mySociety wanted to be flexible about the most appropriate configuration of house prices and travel times to tell a convincing story about the data later. My initial plan had been to set up a workflow in Photoshop to quickly produce the image files they needed. As the complexity of that task became clear, it got less and less attractive.
I had been resisting reaching for a programming solution to the design and cartography problem, but it became clear the manual processing was going to be onerous and difficult to keep consistent. So I asked Francis to provide me with a house price overlay that displayed small price increments using a grey-scale gradient, instead of solid colours between large price bands. Then whilst Tom Steinberg was out at a meeting I cooked up a quick slider experiment in flash to see if the approach had merit, and the difference was astounding. From that moment I was hooked on giving everyone access to what we were playing with, even if it meant working on it over Stamen's christmas break (time/budget constraints had already excluded building a slippy Google-Maps-style map, for example).
Here's a picture of what the house price masks looked like at that point, two colour bands on the left (constrained, harsh), and the new small price increment one (cloudy, beautiful) on the right:
The next task focused on getting a consistent set of base maps for the work, rather than using a hotch-potch of Ordnance Survey maps. The OS maps are world-class for accuracy, of course, but the cartography changes radically at each different scale and the maps aren't designed for on-screen viewing, let alone for data presentation. Naturally (given my history with the project) we turned to OpenStreetMap as a data source and asked Nick Black from ZXV to help produce maps that would be a drop-in replacement for the OS maps mySociety had been using so far.
One thing that Nick's involvement got us was separate layers of data (above), which let us get more fancy with the presentation later on, and keep the labels on top of the data. Of course flexibility giveth, and flexibility taketh away: later on, it took me a while to figure out how to get the text rendering in Flash to match the mapnik style Nick was providing us (more on that later).
So, armed with new map layers, gradient overlays and masks for travel time and house prices, I set about creating a Flash piece that Tom and Francis could configure for themselves (and they did). They're tough cookies to please, of course, and getting something ready that we were all happy with (on volunteer time, across an 8 hour time difference) took patience on everyone's part. Looking at the finished pieces I hope you'll agree that it's worth it, and if you happen to be a transport routing expert sitting on a system that could help produce these maps for everyone, working around the issues Francis identified, then I hope you get in touch!
I have to leave this post here for now, but I hope to go into more detail about the Flash code (which is over here, under a BSD license) in a future post.
Accidental Visual Resonance
In my post about the good people at Yahoo's design research group in September I suggested that some of their visualisations remind me of the movie War Games. I love the movie, but I continue to think that certain kinds of accidental visual resonance should be avoided. The 'incoming' visualisations by the good people at Dopplr have this problem too.
Today, Mike sent me the above image that Gem ffffound showing the devastation caused by the Oakland Hills firestorm in 1991. It's shocking, stunning and scary all at once to see so many homes ablaze like that. Mike pointed out that it looks like some of the work from our Trulia Hindsight project at Stamen.
Thankfully I think Mike was referring to the early prototypes I made in Processing using additive blending and a red-through-blue colour range. I've uploaded a movie of one of these prototypes to Vimeo so you can get an idea of what we're talking about:
San Francisco Property Prices, Animated from Stamen on Vimeo.
The fact that certain parts of the movie looked like San Francisco was burning, or being bombed, was definitely a problem we had to avoid for the final piece. It's something I wouldn't want to be thinking about addicentally if I was trying to find out about real-estate in the area. What we want is to make something that can illustrate the effects of real devastation if we want it to, without emotionally swindling you if you just want to think about urban growth. That's why we knocked out the red and orange hues in the colour range, added a drop shadow and ditched the additive blending. Ultimately, it was more appropriate to show data on the map than in the map.
So, if you want to you can look up some of the areas of Oakland affected by the fires in 1991, such as this example, and spot the clear rebuilding activity in 1992. With luck, the animation will illustrate some of the devastation caused by the fires, without looking like a simulated disaster.
Rabbits and Snails
Rabbits and snails, originally uploaded by m.fedoseev.
We used a tortoise in Digg Arc, but isn't there always prior art? (via No Ideas But In Things, via ffffound)
Design.Yahoo: Web 2.0 meets War Games?
Whilst I wrestle with my reaction to the reception of Twitter Blocks, it's interesting to look at what other people in information visualisation are working on.
Yahoo's new design research outfit, apparently also known as yhaus, have just put up a site outlining their work so far. The first thing I noticed is that they've snagged an amazing subdomain: design.yahoo.com. The second thing I noticed is that compared to other teams I'm aware of in the field (including Stamen) they have a pretty good gender balance (a thorny issue but I'm noting it anyway). The third thing I'll note is the guest appearance of non-Yahoo work in the portraits of the team: I see Torrent Raiders, Fidg't... what else?
Sadly, all but one of the demos there so far is a big Quicktime movie. I know that with millions of users Yahoo has to be a stickler for browser support and compatibility, but I hope they get a chance to take this work live on the web as well as demo it in movie form. There's some solid realtime Flash and Processing work hiding in there, and people (OK, I) want to see it in its interactive entirety.
There's clearly some healthy collaboration and influence going on there (much as in our work, e.g. Ben Fry's zipdecode looms large over the interactive version of our Trulia search animation). Yahoo's Aaron Koblin is best known for his Flight Patterns piece, and this visualisation by Michael Chang of Yahoo trip planner data is very similar:
Likewise, Aaron's work on traffic patterns bears a close resemblance to Flight Patterns:
I don't want to pick on them too much, because it's really beautiful work I admire a great deal (and it might seem like sour grapes), but both the pieces I've highlighted do suffer from something we've tried to avoid at Stamen: animated information graphics on top of black backgrounds and vector maps can easily look like screenshots from a modern-day War Games:
I'm glad other people as well as us are experimenting in public, and I'm glad sites like Infosthetics and Visual Complexity are cataloguing our efforts. We need our own visual language around this kind of visualisation that doesn't resonate with the imagery of war.
Apple's iphone has made a strong impression with slick transitions in its interface design, but the maps application still borrows from Google's pseudo-shadows and static pins. The playful interfaces of the Nintendo's Wii games certainly offer a different path, but the rest of the games (and movie) industry's cinematic-realism aesthetic exerts a strong influence over our generation of designers and it isn't going to meet these goals any time soon.
It's a fairly regular topic of conversation at Stamen: how can you make a visualisation of e.g. 911 calls actually look like emergencies, and not birthday parties or toilet flushes, without freaking people out and without making it mundane? Is it possible to use great circles to connect air travel destinations without it looking like missiles? Can you animate growing and shrinking red and yellow circles on an aerial map without it looking like Gulf War I weapons company propaganda?
It's a bloggy weekend here at Random Etc, if you're reading along I'm definitely interested to hear your thoughts.
Cognitive Dissonance is Bad for Design
Thomas de Monchaux at Design Observer says Apple is bad for design, and the argument largely boils down to a matter of style:
"What is unique to Apple is more accurately called “style”: a clear signature vocabulary of forms and materials, superabundant to the mere requirements of function, that convey a certain sensibility, atmosphere, association, vibe. Of course, all those rounded corners may aid in manufacture and structure, but they also say in a comfortingly Jetsonian way: “I’m from the future, and so are you.” It’s the familiar tension between Modern and Modernist, in which a particular high style is mislabeled as “design,” and a corrupted understanding of the phenomenon of design is misrepresented as an additional “feature” of an object."
Adaptive Path's Peter Merholz says that isn't good enough, and that Apple is bad for design because they make it look easy but don't talk about what's hard. Everyone tries to copy them, but they're just not smart enough to pull it off:
"Apple is bad for design because they contain a brilliance that simply cannot be emulated. And that brilliance allows them to approach design in ways that are harmful for those organizations that aren’t brilliant. Dan, in his book Designing for Interaction, holds up Apple as an example of genius design — design that emerges from the mind of the designer. This is in contrast to user-centered design, systems, design, and activity-centered design, which all incorporate users more directly."
He continues,
"So, this could encourage other companies to practice genius design. The problem is, the people at those companies aren’t geniuses. Steve Jobs is a genius (and has had it proven numerous times throughout his career). And when non-geniuses practice genius design, bad things happen. Instead, what’s good for design in the overwhelming majority of cases is more of a user-centered approach, because this approach is accessible to many more people, and thus could have a much broader impact on design."
I think both Thomas and Peter have fallen into the same trap here and missed the real problem with Apple products: they look more perfect than they really are. The clean lines, smooth surfaces, and rounded corners are better finished than the internals. Every surface detail is taken care of from the packaging to candy-like GUI style to the consistency of the error messages. Ah, the error messages! If only my Macbook Pro showed me an error message before freezing and losing a couple of hours of work. If only the ipod showed an error message before its famously hard to replace battery died.
Of course, I'm falling into a different trap here by blogging that Apple products aren't perfect. People will find me and tell me they never had a problem with theirs. The fallacy of abundant anecdotes ("my friend had a problem with their mac", "our office runs on macs and never has problems") will be cited in both directions. The debate will be buried because people love their products - they look and feel so perfect, there can't be anything wrong with the reliability. Can there?
The problem is that under the veneer of consistent styling, beneath the packages of audacious world-changing product line-ups, is the same consumer hardware and fallible software and colourful pixels that drive all those other non-Apple products that we love to hate. And we think the Apple products will be better because the packaging is well thought-out and the buttons are consistent. Apple is bad for design because they only fixed half the problem. At least when a shoddy-looking Windows PC or iPod rip-off crashes it's behaving in a way that is commensurate with its appearance.
If a cheap-looking thing crashes, it's because you get what you pay for. It turns out the same applies if an Apple product crashes - it's still because because you got what you paid for, but it turns out you only paid for surface details. Same shit, different box.
Stamen is hiring a designer
Stamen, the company I work for in San Francisco, is hiring a designer.
If you're "someone who is a designer first and foremost, a coder a distant second, and who's interested in where these areas interleave" then please read the post on our site and consider getting in touch. I can't recommend us highly enough.
Pair Blogging is the new Extreme Programming
Ben and Kate are blogging, Schulze and Webb are blogging. The former is possibly London's only left-brain/right-brain blog about contemporary dance, finance and food. The latter is a space for thoughts, sketches and observations that aren't yet fully formed projects. Both are worth your attention.
Also found this week (via del.icio.us/toxi) Matt Pyke and David Barrington are collecting graphic design inspiration from outside the field at Everyone Forever.
Bleigiessen
Yesterday my colleagues and I took part in the monthly guided tour of the new Wellcome Trust building on London's Euston Road. The main point of the visit was a chance to get up close and personal with the seven stories of Thomas Heatherwick's Bleigiessen installation.
Bleigiessen is described on the Wellcome trust page as follows:
Consisting of 150 000 specially processed glass spheres, suspended on almost one million metres of fine stainless steel wire, the sculpture glows with a constantly shifting rainbow of colours. This effect was created through a unique process of sandwiching reflective 'dichroic' film within the glass.
The form of the sculpture has been derived, through the use of 3-D computer modelling, from the twisted shape of a drop of molten metal, which cooled and solidified as it fell through tumbling water. The aim was to produce a sinuous, curvaceous form with variety, so that it would look different from each of the building's nine floors.
So Bleigiessen's organic forms turn out to be from a happy accident with molten metal, rather than the DNA or biological roots I had naively assumed given its Wellcome Trust connections. I like that. More background on Heatherwick in this great PingMag feature.
Since it's on UCL's doorstep, I've admired the sculpture from the pavement several times before, and I wasn't alone in having my nose pressed up against the glass when it was under construction. Inside though, the ambition and scope of the work becomes clear.
Bleigiessen's thousands of steel cables render its interior an obscure and enticing mystery, strobing in and out of view as the layers of cables overlap. To me sculpture is art manifest by space and requiring movement to explore and enjoy it, and so Bleigiessen is the anti-sculpture in that it demands stillness from its viewer. Tilt your head up and down to take it all in, by all means, but don't cross its overwhelming verticality.
Well worth the trip, the only downside is that the fast and smooth glass lifts don't linger alongside it for long enough. Tours are currently running on the last Friday of every month, the Wellcome Trust site has the details.
← Back to Home
© Random Etc.. Powered by WordPress using the DePo Skinny Theme.