Lots of maps are coming out that document when, where, and how stimulus money is being spent through the ARRA, like these at the Foundation Center. With all of the reporting, accountability, and transparency required of ARRA grant recipients, I’m sure we’ll only be seeing a lot more of these in the future. Recovery.gov directs traffic to states’ Web sites where some of this data is appearing. I’m looking forward to seeing more and more mash-ups and interactive maps and graphics as developers and designers get their hands on this stuff and data from other sources that track stimulus money.
For now, we decided to get involved by putting together a static map that shows where our ARRA tax dollars are going for energy-related programs administered by the DOE. As underlying layers, the map shows states’ historical energy consumption trends and their projected trends required to meet consumption goals set for 2012.
I’m sure we could all talk about the politics around ARRA funding and energy consumption and how this might or might not be shaped by patterns that the map does or doesn’t show. But to me, a few of the most interesting things about this map are related to its design:
1) Encoding data in state boundaries
I’ve always been attracted to National Geographic political reference maps, with their countries each outlined in a different color. On those maps, outline color clearly helps distinguish one place from another. Plenty of other maps use enumeration unit outlines to represent data, too, like those that categorize administrative boundaries using line weight, dashes and dots, etc. I wondered what was to stop the application of this idea to a thematic map? Why not try to take it one step further and encode numerical data, as opposed to nominal data, in unit outlines? I haven’t seem many examples of this.
The main limitations here are line weight and unit size. Line weight has to be heavy enough so that color can be seen and read. For my map, this seemed to work best above around 4 pts. Only thing is, as enumeration units get smaller, the outline can eat up more interior space and obscure the presence of a second data set, which in this case is the historical energy consumption trend, encoded using unit fill color. So, I had to cheat a little bit with some small states and states with small pieces (e.g., Delaware and Maryland) and decrease the line weights a bit under 4 pts. I don’t see this approach working very well with really small enumeration units like US counties, unless the map scale is really huge.
2) Color selection
The challenge here was to select colors for three data sets (historical energy, projected energy, and ARRA money) that not only encoded data properly but were harmonious (i.e., not competing or ugly). The historical energy data set has a natural midpoint around zero, so it needed a diverging color scheme. On the other hand, the projected energy data, having no midpoint, required a sequential scheme (thanks to ColorBrewer 2.0 for both sets of specs). Proportional rings for ARRA money just needed to be readable and look nice on top of the other colors.
Here are some earlier attempts at getting color right. In my first try, I used a grayscale sequential ramp for the historical data (state fill color), matching the middle value to the map’s background for a pseudo-diverging ramp feel. But this seemed overly subtle and downplayed the importance of clearly distinguishing states with decreasing and increasing energy consumption trends.
So, my next try was to replace the grayscale ramp with a true diverging ramp. Yuck. The mix of red outlines and fill colors bothered me on an purely aesthetic level. Other diverging ramps with other hues in them produced similarly ugly results.
The final colors for historical energy consumption trends (blue-white-red) seem to best emphasize the data’s midpoint, with red doing its part to connote “alarm” in the states with a poor track record. The projected energy consumption data set is now lower down in the visual hierarchy (shown using a grayscale color ramp on state outlines), but this seems to be acceptable compromise. Using gray prevents these two ramps from competing for attention or overlapping and confusing the map reader. From my perspective, at least, it also results in an (yes, subjective) improvement in overall color harmony.
Other thoughts about the ARRA funding map? Please add them to the comments.
Google Earth is amazing. As we’ve commented here before, it continues to blow our minds and has also done wonders for the popularity of maps. And let’s be honest, it looks super cool. There is no doubt that Google Earth is much sexier than that boring old atlas collecting dust on your shelf: It’s interactive, seamlessly integrates distributed data sources, animates the surface of the earth over time, facilities virtual communities, can be customized by both developer and user, etc, etc. It’s hard to not be impressed.
So all of our maps should be in Google Earth, right?
In fact, despite recent efforts to create a suite of thematic mapping approaches, Google Earth is a terrible environment for presenting many kinds of thematic maps. I’d go so far as to say that the 3D prism maps and 3D graduated symbol maps we see popping up in Google Earth are pure chart junk, of the kind Tufte warned us about repeated for past 25 years.
Chart junk takes what should have been a simple-to-read graphic and makes extracting information (1) slower, (2) more difficult, and (3) more prone to reading errors, because of excessive ornamentation and unnecessary design additions—like adding a 3D effect that communicates nothing in and of itself but simply “looks cool.” This is not idle speculation: Research consistently shows chart junk and “redundant ink” hurt otherwise fine graphics.
Want to see for yourself? Download these two example KML/KMZ files from blog.thematicmapping.org and run them in Google Earth. While you’re looking at them try to extract numbers or compare places: KMZ File 1 | KML File 2
“BUT THEY LOOK COOL”: A TECHNOLOGY IN SEARCH OF A PROBLEM
As Abraham Maslow said, “If the only tool you have is a hammer, you will see every problem as a nail.” This seems to be the case with virtual globes and the developers who love them and insist that any and all kinds of thematic data belong there. Instead, I’d challenge us to take a step back and ask,
WHY DO WE MAKE THEMATIC MAPS?
For a long time folks like Robinson, Dent, and MacEachren have been arguing that thematic maps exist to support two basic tasks: (1) the ability to extract numbers/facts about specific places (e.g., 15C in Paris) and (2) the ability to judge those values in geographic relation to other places (e.g., 5C warmer than London, about the same as Milan). In other words, we want both specific details and overall patterns to be obvious on our thematic maps. And we want all of that AT A GLANCE.
The problem with digital globes (as with all globes) is you can’t see half the planet and, due to curvature, really only about a 1/3 of the planet clearly at once. Which leaves us with a conundrum: If you’re only mapping a small place (e.g., a country), why do you need to have it on a globe? And if you have a global dataset, why would you allow your readers to only ever see ½ the data at once? They can rotate the globe (more on this later) but they’ll never be able to see the entire dataset at once. That makes understanding overall patterns very difficult, and asking folks to “remember” half of a global dataset while they spin the globe to the other side is far, far beyond the meager limits of our working memory. If you’re not convinced, just try it.
KNOW YOUR HISTORY
What makes these recent developments even more frustrating is that in the 70s and 80s, with the advent of digital map making, cartographers flirted with, and largely rejected, faux 3D prism maps and 3D graduated symbol maps (like the two examples above) since they suffered from several limits:
visual occlusion (not all of the map can be seen at once since some places hide others)
people suck at estimating volumes, especially of complex shapes (e.g., try estimating the size of moving van you’ll need for your home)
mental rotation of complex shapes is extremely hard, so hard that it is often used as a measure of intelligence in IQ tests.
Many a thesis and dissertation was written in the past 40 years demonstrating these limits to human visual processing.
The nice thing about Virtual Earths is that you can rotate them, so the problem of visual occlusion is solved, right? Yes and no. Yes, interactivity and the ability to rotate the globe can help reveal hidden places, but no, these virtual globes introduce a significant extraneous cognitive load because the user must now think about controlling the globe (not always easy with a mouse) while also trying to focus on the thematic content. In fact, adding a complex task, like visually acquiring the Google Earth controls and then trying to figure out how to move/scale/reposition the globe between two other tasks effectively “flushes” short-term working memory. It’s a kind of mental sorbet, which is why giving folks something distracting to do is a common trick in memory tests (they lose their train of thought). Why would we deliberately do this to our map-readers?
BIG PROBLEM: INCONSISTENT SCALE
In the examples above it is really hard to judge relative sizes. Why? Because the scale of the symbols is constantly changing, and the ones closer to the viewer are much larger (and at a different scale) than the ones far away. Given that it has been long established in cartography that people are terrible at estimating sizes, and even worse at estimating volumes, it is utterly inane to compound this failure by drawing the symbols at different scales. Of course it is worse than this: Rotating the globe slides each symbol through its own scale transformation path, changing in size with every pixel the maps are moved.
This is an absolute rule:If you want to give people the best chance to judge the relative sizes of objects, they should all be drawn at the same scale.
STILL NOT CONVINCED? LET’S DO SOME USER TESTING
TASK #1: As quickly as you can, how does Nepal compare to Uzbekistan?
TASK #2: As quickly as you can, find all of the other places on the map similar to Nepal? Which place is most similar? Which one least?
Hard, isn’t it? To be honest, it shouldn’t be: A regular 2D classed choropleth map or proportional symbol map would make short work of those questions. So what did we gain by extruding the countries up into space? Not much that I can see.
The Lack of a zero-line referent makes it hard to judge absolute magnitudes.
The “fish eye lens” effect mean each prism is viewed from a different angle than its neighbors, making comparison just a little bit harder as we have to mental account for these differences in our estimates.
It is hard to judge the height of something when you are staring directly down at it. This matters because height is the visual variable that does the “work” in this graphic—it’s how the data are encoded visually. Why obscure the very thing map-readers need to make sense of the graphic (e.g., the side-view height of each polygon)?
I need to be convinced of two things: (1) something is fundamentally wrong with our proven and highly efficient planimetric thematic maps, and (2) that reprojecting this data onto a virtual globe somehow solves those problems. Otherwise, we truly have a cool new technology in search of an application, and that’s just putting the cart before the horse.
Some suggestions: First, unless the 3rd dimension communicates something and isn’t merely redundant data already encoded in the colors, sizes, etc., do not include it (for all the reasons outlined above). Second, if you want folks to perform “analytical map reading tasks” such as estimating relative sizes, distances, or densities, keep scale constant. Third, do not obscure parts of the map behind other parts if that isn’t inherently relevant to the data (e.g., this is fine for terrain visualization). Fourth, and most importantly, do some user testing before presenting a new technique as the best thing ever: It’s how research works and why it is important.
So what things are Google Earth (and other Virtual Globes) good for? The consensus around here is (1) to engender, quite powerfully at times, a qualitative “sense of place” or “immersion”; (2) for virtual tourism (e.g., sit on top of Mt Everest) or virtual architecture/planning; and (3) to perform a kind of viewshed analysis and see what can and cannot be seen from locations (line-of-sight). All of those are inherently 3D-map reading tasks in which the immersive, 3D nature of the map is important. By comparison, population data (one number per country) is NOT inherently 3-dimensional and is only made to suffer when dressed-up in prism maps and 3D figurines.
Cartography, like all good design, is about communicating the maximum amount of information with the least amount of ink (or pixels). The world is just too complex and interesting to be wasting our ink/pixels on non-functioning ornamentation.
Do you need a cartography degree to make maps? As the only trained cartographer on the panel, they just couldn’t wait to ask me this question (could I really say that Stamen’s “non-cartographers” shouldn’t be making maps?). I gave the popular answer, “No,” but with a caveat: “You just need to care about cartographic design.” Elegant design and clear communication are universal to all aspects of design. Cartographers have a slight leg up in the map game because we’ve been using our design chops to get good at applying these universal concepts to maps, but concepts like subtle use of color, visual heirarchy and map / UI composition can directly be applied from graphic design to map design. Incidentally, this is the hardest stuff to teach to cartography students. However, there is a lot of cartographic design that is uniquely geographic. Issues like projections, thematic symbolization and generalization don’t exist outside of maps and largely exist because of the challenges of representing a complex world on a small, flat piece of paper. These same issues remain even moving from paper to the computer screen, but unfortunately they are largely ignored. On a preachy note, I think it is our responsibility as cartographers to CONSTRUCTIVELY engage ourselves with the new mapping discourse.
What’s with neocartography? Neocartography is a tricky definition (one that I think is changing every day) so take the coward’s way out and define it as:
But “Where2.0” covers it pretty well. Location (that’s the where) is EVERYTHING. It’s an on-demand (that’s the 2.0) reference-map world where apps need to know WHAT you’re looking for so they can tell you WHERE it is. A lot of cartographers (especially those educated in Geography) probably feel disengaged with the new movement because they are looking for “Why3.0.” We want to make thematic maps that explain the world instead of just locating a tiny part of it. And unbelievably, with two people on the panel who helped build it, we never showed off Geocommons Maker and its thematic mapping to the audience. We could have started the Why3.0 movement then and there!
What about the 9,000 lb Google shaped elephant in the room? Instead of listening to me prattle on about projections and choropleth classification schemes, it seemed like the audience would rather hear what Google, represented by Elizabeth, their Maps UX Designer, had to say about mapping. Me too. Even though we are both making maps on the Internet, our issues couldn’t be more different. Where we can agonize over cartographic and UI issues, Google constantly needs to consider issues of scalability. With their maps viewed by millions of people (horrible problem to have, right?), design decisions take on massive significance. The UI and interactivity set worldwide expectations on what an interactive map should be (look at panning / zooming controls on all the major map providers to see their influence). They’ve become masters of the universal elements of cartographic design but have not addressed (or have been constrained by) the uniquely cartographic issues. Because Google sets the tone for mapping on the web, the web-mapping community has believed that these issues cannot or should not be dealt with.
Anything else? Just a couple things:
Cloudmade and OpenStreetMap are going to be huge. They are going to improve the state of cartography on the web and engage both experts and the public with mapping in entirely new ways.
GPS is coming to social networks. This is going to be MASSIVELY HUGE. In 3 years, “location-aware” won’t be a buzzword anymore, it will be an assumed feature. There is going to be insane amounts of spatial data and I, for one, cannot wait to face all of the display challenges it’s going to pose.
Stamen kicks ass and they’ve set the bar high for top-shelf online mapping. It’s hard to share a stage with Mike Migurski when he has such awesome maps and visualizations at his disposal. What a show-off.
It was great to meet Elizabeth and some of the Google Maps team. I wish I could have pried more Google secrets from them but they’re too tight-lipped.
Andrew Turner at FortiusOne is one of the most plugged-in, active people working in the neocartography field. Thanks to him for putting together a great panel and keeping us in line.
Everyone at SXSW had an iPhone.
Everyone communicated via Twitter.
Favorite quote: “The difference between unemployed and self-employed is only in your head.”
Favorite panel: How to Give Better Presentations – To unfairly summarize, be gimmicky to get people’s attention, play to their emotions, and don’t split their attention between what they see and what they hear.
I honestly cannot recommend this conference enough. Getting to be around the leaders in the technology field was an unbelievably energizing experience. I met some wonderful and inspiring people and I could feel the world changing over those five days.
Note from the future: the example in this post broke somewhere along the line, but this whole post is obsolete anyway now that the Google Maps API allows styled maps!
This isn’t news to everyone, but it’s worth pointing out the fun things one can do with maps using the ActionScript ColorMatrixFilter. Tired of the boring old yellow and orange Google map in the Flash API (or any other map in Flash/Flex)? Lay down a ColorMatrixFilter on that sucker!
The ColorMatrixFilter, if it needs to be pointed out, essentially allows you to mix up the red, green, blue, and alpha channels of vector or raster graphics to produce exciting new colors. Adobe has a nice little article explaining it, along with an interactive demo.
Here’s a little example of simple effects I threw together for Google Maps. Click the links at the bottom for different looks.
I poked around the Google Maps Flash API to find exactly where to apply the filter. If you apply it directly to the Map instance, you’ll color everything, including the Google logo and whatever else floats on top of the map. One level deeper is better, but will still color makers and info windows. A second level deeper is the spot. It’s basically like this, where map is the Map instance:
var a:Sprite = map.getChildAt(1) as Sprite;
var b:Sprite = a.getChildAt(0) as Sprite;
b.filters = [new ColorMatrixFilter([ /* color matrix values */ ])];
In the example above, “Winter” takes the red and green input channels and distributes them equally across all channels, but the blue input remains blue on output. The result is an desaturated, icy-looking blue. “Inverted Grayscale” turns everything to grayscale, but additionally sets the map’s blendMode property to “subtract” and sets it against a white background. That inverts the grayscale image for a somewhat stylish effect.
Now, let’s face it: this is a quick and easy but very limited method for “customizing” a map. (And to be honest, I’m not sure how kosher it is according to the terms of service.) It can make a map look cool, but applying the effect to pre-made tiles means that you’re altering the colors of all features on the map. You can’t keep the official blue and red of interstate highway shields, for example.
So keep this little trick in mind, but be more excited about actual customization (and open data) with CloudMade.
We are very pleased to announce the launch of indiemapper.com. Indiemapper is a project that is very near and dear to our hearts. When we were starting as a company or even before that at the University of Wisconsin, we constantly talking about the tools available to us as cartographers. Talking might be putting it lightly… we were complaining.
The same things were coming up time and time again. Why is it so hard to make a simple map from digital data? Why did we need to keep PC’s around when all of our design work was done on Macs? Why was all the current software so expensive when we were only using 10% of its total functionality?
At the same time, we were building some great online tools built for cartography. Ben was building TypeBrewer to help map-makers understand and make better choices with typography. Mark had built ColorBrewer a few years earlier when he was back at Penn State. Dave was working on bringing usable UI controls to temporal and geographic visualization in BallotBank. These programs were built on expert content, usability and accessibility. Why weren’t web-based tools like this available within a the map-making environment?
Flash forward to the spring of 2008. Indiemapper began as a proof-of-concept built by Andy and Zach Johnson during their free time. They wanted to see just how much of the cartographic capabilities of GIS could be moved online using Flash. As it turns out, quite a lot. Originally, we thought that this would be a great code repository from which we could draw ideas and code to build into maps we were making for clients. Then it all came together. Indiemapper was so close! Andy’s original work proved it could be done. We could finally build the application that we ourselves had been wanting for all these years!
Indiemapper is still in development and there’s a lot we’re still learning about the final product. We’re re-coding that original prototype from the ground up to make it robust enough for professional cartographers in a production environment. We’ve redesigned the UI and built in expert choices (colors from ColorBrewer, type from TypeBrewer, data classification, etc) to make it easy for novice map-makers to produce great looking maps quickly.
We know that there are lots of people like us who are frustrated by the current available tools because of their price or their functionality. We’re confident indiemapper is for you and will find a place in your mapping workflow.
Recently, we took on a nice little print mapping project for a few hotels located in downtown Madison, Wisconsin. The project involved making a one-sided, page-sized map showing hotel locations and the locations of a few points of interest in the area. The idea was that hotel guests could use the map to find their way around downtown as well as get a sense for where they were staying in relation to the university, interstates, airport, etc. The map was to be printed in grayscale, plus 3 spot colors (red, yellow, and blue).
Before starting out, we discussed the possibility of sharing the project with those interested in seeing all the stuff that goes into designing a map like this. The map design process is notoriously difficult to articulate and we’re keen on the idea of making pieces of it more transparent, where possible. One option was to screen capture the hotel map as it appeared in the production software at regular time intervals from blank page to finished product. So, here is a sequence of 116 images, originally captured at 10-minute intervals, compiled to show the evolution of the hotel map in just under 2 minutes. Clearly, not all maps are made in the same way, but this should expose some of the kinds of design decisions made in a relatively simple project like this.
Watch the larger version of Map Evolution (990 x 766px) — best for seeing change in map details.
After posting our election map last month, we received a number of excellent comments and suggestions. It’s late, but I thought I’d finally post the couple of variations of the map that I’ve managed to find time to put together. The maps below do two things differently from the original:
Vary the brightness of counties by population density rather than total population. This was a frequent suggestion. I think it has a few of its own drawbacks too, but it looks pretty good.
Different color schemes. Just for fun, I’ve used the purple color scheme that has become common in recent elections. I also liked the suggestion in one comment to saturate colors by margin of victory, so I’ve done that too. In these, full blue would be total Obama domination (Obamanation? Obamadom?), full red would be the same for McCain, and gray is an even split.
No snazzy posters this time. Just a few map snapshots.
First, the original colors mapped by population density, as posted in the comments on the original post.
The purple color scheme. First by total population:
And by population density:
Margin of victory by total population:
Margin of victory by population density:
Apologies for any trouble seeing the images. It’s tricky to find a brightness that will look right on every screen.
Perhaps the most basic capability of any custom interactive map we make is the ability to pan and zoom the map. That is, after all, the way to make something that might be the size of a wall poster in print fit on a computer screen and still be readable.
On my personal site I have posted a very basic tutorial and example of ActionScript code for a simple version of the way I typically code panning and zooming. If you’re looking for a starting point for panning and zooming, check it out.
Based on my own experiences, if you’re looking for basic ways to improve upon that minimal functionality, consider these:
Tweening zoom changes
Replacing vector graphics with raster while moving the map (faster performance)
Dynamically drawing and placing symbols on the map
Drawing geographic data (shapefiles, kml, etc.) into a pan/zoom map
When we were building GeoCommons Maker!one of the key map design challenges we faced involved producing semi-transparent choropleth maps. Choropleth maps are perhaps the most common type of thematic map and are regularly used to show data that is attached to enumeration unit boundaries, like states or counties. Ever seen a red state / blue state election map? This is a basic choropleth. There are a lot of more sophisticated ways that choropleths can be made to best represent a given data set, for example, by playing around with classification, categorization, choice of color scheme, etc., but we won’t get into those here.
I want to talk about color. Traditionally, choropleth maps are read by looking at the general pattern of unit colors and/or by matching the colors of specific map units to a legend. Other reference data is often removed from the map because it is either, 1) not necessary to communicate the map’s primary message or 2) makes communicating this message more difficult. It could be argued, for example, that other reference map information, like green parks, gray airports, brown building footprints, and blue water distract readers from seeing the general pattern of choropleth colors on the map, which is where the map’s most important message can be found.
For GeoCommons Maker!, we wanted to allow people to make a kind of hybrid, semi-transparent choropleth map that would show both thematic data (colored choropleth map units) AND the rich reference information on popular map tiles (e.g., Google, Microsoft Virtual Earth) without sacrificing map reading and interpretation ability and confidence. We believe that there are lots of times when reference and thematic data can work extremely well together to really benefit a map’s message (e.g., a soils map that shows terrain or a vegetation map that shows elevation). So, we wanted to build this functionality into Maker!, and allow people to make maps that show the best of both worlds.
The Problem with Transparency
The fundamental problem with transparency is that the color of semi-transparent map units can shift due to the visibility of color that lies beneath them. This is not at all surprising, but can make the basic legend matching task difficult, obscure the pattern of color on the map, or just as bad, make patterns appear out of nowhere. Here’s a look at what happens to colors using the same semi-transparent choropleth map units on different backgrounds. These are screen captures from early design mock-ups for Maker!.
The first image shows (hypothetical) opaque choropleth map units with a 7-class color ramp. The next three images show the same units at 50% opacity on top of Google terrain, streets, and satellite imagery. Notice how colors shift when compared to the opaque map at top? See how lightly colored units nearly disappear on the streets map, and darkly colored units nearly disappear on the satellite map? Yikes!
The Solution to Transparency
We employed three design solutions to ensure that semi-transparent choropleth maps in Maker! would work, despite potential map reading problems: 1) unit boundaries, 2) data probing, and 3) transparency control.
1) Unit boundaries. In Maker’s choropleth maps unit boundaries are color coded but remain opaque, even when unit fill color is semi-transparent. This gives map users some true color information to work with, and should improve their ability and confidence to spot map patterns or match colors to a legend. In other words, while unit fill colors can get you close, unit boundaries can get you the rest of the way there.
2) Data probing. We also took advantage of a relatively common and very helpful interactive map feature known as data probing. Exact values for any choropleth map unit can be obtained by clicking on them. In Maker!, we designed the data probing feature to go one step further and give values for all of the possible attributes associated with each map unit, not just the mapped attribute alone (see the scrolly list, shown in the probing pop-up below).
3) Transparency control. Finally, we gave mapmakers a transparency control, as well as a chance to take some responsibility for how well their maps communicate. The transparency control lets mapmakers decide what works and what doesn’t. Given the huge range of possible maps that can be made with Maker!, some user controls like this are necessary (as well as being kinda fun!). Here, transparency can be adjusted for a custom fit with any chosen tile set, color scheme, or other mapped data. Settings on the control (shown below) range from 50-100% opaque.
The Best of Both Worlds
Our decision to include semi-transparent choropleth maps in Maker! should give mapmakers and map users the best of both worlds. A semi-transparent choropleth is truly a hybrid map in that it can potentially offer all the advantages of combining rich reference data (i.e., underlying tile sets) with great thematic data (i.e. overlying choropleth units). Hopefully the choropleth maps coming out of Maker! will be easy to read and good looking, too!
The first time I used Google Maps I knew that the world of cartography had just gotten a lot more interesting. It blew my mind. What really struck me then (and still does today) is that I didn’t have to learn how to use it: It just worked. It didn’t come with a manual, and I didn’t need a class in it. Rather, I would think, “Hey, I wonder if…” and sure enough it did just that. First try. It worked. What was happening was that my expectations of the map and the feedback it gave—and the speed at which it gave that feedback—left me feeling empowered to explore more, rather than frustrated or confused.
This is true of all the best tools in our lives: they make us feel confident (even smart), not intimated or confused or frustrated. And they quickly become completely transparent. The master violinist, photographer, or painter all work so comfortably with their tools that they are able to translate their powerful and nuanced intentions into a physical reality. We’ve all experienced this – when the interface between our cognitive and emotional selves and the world around us disappears and we are able to lose ourselves in a great book or a great movie (you cease to realize you’re sitting in the theatre watching reflected light on a screen or scanning printed characters on page).
When our tools disappear and become transparent, we are at our best. Psychologists call this ‘flow’ and I think it is the singular defining state of creativity: it’s what happens when we are so deeply engaged with the work we love that we lose track of time and need to be prompted by loved ones to stop and eat occasionally. Mozart had this problem, Newton had this too, and to a lesser extent, so do I every time I fire up Google Earth. I often joke that Google Earth should come with a warning label: You will be here happily for hours. Proceed with caution.
Now reflect on how rare that experience is in the world of software and web interface design. Why is that? Why are we content to create maps that merely don’t crash? Below I outline how we might, as designers, aim a little higher.
The problem is, as design guru Donald Norman points out in his classic must-read The Design of Everyday Things, most people expect to be flummoxed by new technology, that’ll it be hard to learn, that it will be unpleasant at best.
Why else would people refuse to upgrade software despite obvious problems with their current version — because they’ve done the math, and the current flaws are better than having to learn a new version. Indeed, most people blame themselves when something doesn’t work, saying, “I must be stupid because other people know how to use this,” when in fact it’s most likely a counter-intuitive UI and poor or missing affordances that are to blame. The only reason why other folks know how to use it is because they’ve learned, through trial and error, how to work around those flaws. If software elicits “That made no sense, but I guess it worked…I’ll try to remember that for next time,” it is badly designed. If it elicits “I bet I can do x by using y,” you’ve earned your paycheck (ironically, most payroll systems I’ve seen are horrendous).
Success in UI design is not measured by “Did the person get something at the end?” but rather by “Did they grasp what the tool was capable of and how to use it quickly? What was the mental and physical workload required? How many dead ends did they go down before they found success? Did they enjoy the experience?” among other important questions. The TLX scorecard (designed by NASA) and the GOMS test are two such approaches used by savvy designers to score how well people use their tools, not merely if they can use them (or, as we often see, only use them if they’ve taken lengthy training courses).
Case in point: A Big Ten university I know reserves a mandatory full afternoon to show every new employee how to use the phone message system, representing millions in lost productivity. Uh, Houston, I think you might have a problem, and it’s not your employees. This isn’t just design snobbery it’s massive waste of money and time.
THE IMPORTANCE OF FLOW
Let me propose that the best user interfaces (UIs) become transparent because they engender ”flow.“ For me, this is the holy grail of good design. The 9 components of flow, based on Csíkszentmihályi’s work (see his TED Talk) in the 1970s, can be used as a scorecard for any UI we design or use:
Clear goals (expectations and rules are discernible and goals are attainable and align appropriately with one’s skill set and abilities).
Concentrating and focusing, a high degree of concentration on a limited field of attention (a person engaged in the activity will have the opportunity to focus and to delve deeply into it).
A loss of the feeling of self-consciousness, the merging of action and awareness.
Distorted sense of time, one’s subjective experience of time is altered.
Direct and immediate feedback (successes and failures in the course of the activity are apparent, so that behavior can be adjusted as needed).
Balance between ability level and challenge (the activity is neither too easy nor too difficult).
A sense of personal control over the situation or activity.
The activity is intrinsically rewarding, so there is an effortlessness of action.
People become absorbed in their activity, and focus of awareness is narrowed down to the activity itself, action awareness merging.
HOW DO WE GET THERE?
There is no simple magic formula, I suspect, for what defines a good interactive map (or any user interface) but I think some salient qualities include the following:
1.Give Them Something Quickly. Nothing boosts confidence like finding the power button immediately or sliding your credit card in the reader the correct way the first time (aside: omg card reader designers— after 30 years this is the best you can do? Seriously?!!). I’ve always liked Apple’s “welcome” movie that plays the first time you start up your new Mac – all you’ve done is find the power button but already you feel like you’re off to a good start. A blinking c: prompt is no way to greet your clients.
2.Adapt to the Skill-Level of the User. Maps and software should be smart enough to adapt to the level of the user, from offering pro-level shortcuts to revealing more advanced features as needed — not when they can’t be used and simply clutter up the screen and taunt the user with ”shame you don’t know how to activate me cause I’m all grayed-out.”
3.Understand Affordances.All interfaces, from airport signs to lawnmowers, live or die by them. If you are a designer, you need to eat, breathe, and sleep this stuff for the world already has too many ”Norman Doors.“ Named after Donald Norman (who talks about them in his aforementioned book), these are doors that have a horizontal bar across them and thus suggest that you’re suppose to push them, when in fact you have to pull them (RULE: horizontal bars to push, graspable vertical handles to pull). In the panic of a fire, such design flaws take on new significance.
4. Eliminate Features Ruthlessly. My two current favorite UIs are the Google Search Engine and the iPod. Both are the model of simplicity and both burst onto the scene and quickly dominated their markets by doing the incredibly counter-intuitive thing: offer the user less. They both removed a whole bunch of features the competition thought were essential. Why? Because we are all swamped with too many choices in our lives (see “The Tyranny of Choice”) and simpler tools are (1) faster to learn, (2) faster to use, (3) cheaper to make, and (4) and less likely to break.
Unlike just about every product ever, over time the iPod has in fact gotten less complicated: The Gen 1 iPod had twice as many buttons as the Gen 3. The iPod shuffle? It got rid of the screen! Heck, the shuffle even eliminated the power jack and let folks recharge directly through the headphone jack (I still don’t know how they did that one). And it sold like hotcakes because it was cheaper to make and easier to use — they killed the features that were underused and kept just the stuff that really mattered to most casual users (pro users can still buy the more powerful models of iPod). And most folks learned, hey, you know, I really didn’t need all that stuff after all, and I just saved a bunch of money…and that is a happy customer.
5. Build a Well Labeled Emergency Exit. If the user feels like at any moment they might break it, they won’t venture far. The best UIs increase confidence by providing reassuring feedback that progress is being made and encourage the user to keep going. We’ve all been stopped by cryptic warning messages that leave us feeling unsure of whether to proceed or cancel (I usually cancel, unless I’m feeling dangerous or it’s not my computer). Good ideas include a big reset button, unlimited undos, and lots of sign posts such as “Before we close the window, would you like me to save your work for you?” More advanced users can turn off such warnings once they’re weaned off of them. I have archiving software that asks me three times in three ways if I really, truly want to erase a drive and overwrite it. Given the cost of a mistake (10 years of my entire digital life) this five seconds of forced careful thinking is a suitable insurance premium.
I asked Andy, Ben, and Dave to name their current favorite UIs and Ben suggested these cool light switches in his apartment in Sweden. He writes “(1) really big and square, (2) in the dark, just start smacking the wall, and (3) feels really good to smack the wall in the dark.” Hard to argue with that. Compared to the light swithces we have here in North America these are easier to use (less effort) and result in less fumbling (faster to use, fewer mistakes) and they remind us even the humble light switch can be improved with some careful thinking.