We're working on a larger post about the awesome IxDA 2012 in Dublin last week, but in the meantime, I wanted to chat separately about sketchnoting.

I'm a drawer, there's no doubt about it. I can barely manage to consider a design problem before I'm reaching for a pen and paper, or my Tablet PC and a stylus and cranking open OneNote for an explanatory drawing or mind map. But that got taken to the next level when I attended "Visual Thinking Through Sketchnotes," a workshop by MJ Broadbent & Eva-Lotta Lamm.

In it we covered the basics of sketching and then went further into what that means for capturing the complex ideas communicated in lectures and speeches. I was hooked, and challenged. I spent the next three days both enamored of the excellent ideas being presented (high marks on all four things I look for in presentations, nearly across the board), but also trying my new skills at sketchnoting. Here's the whole set.

Where do you start when you're approaching a complex software design problem? If you work on a large development team, you know that software engineers and UX designers will often approach the same design problem from radically different perspectives. The term "software design" itself can mean very different things to software architects, system programmers, and user experience designers. Software engineers typically focus on the architectural patterns and programmatic algorithms required to get the system working, while UX designers often start from the goals and needs of the users.

In the spring of 2009, I participated in a research study that looked at the ways in which professional software designers approach complex design problems. The research study, sponsored by the National Science Foundation, was led by researchers from the Department of Infomatics at the University of California, Irvine. The researchers traveled to multiple software companies, trying to better understand how professional software designers collaborate on complex problems. At each company, they asked to observe two software designers in a design session. At my company, AmberPoint, where I worked at the time as an interaction designer, I was paired with my colleague Ania Dilmaghani, the programming lead of the UI development team. In a conference room with a whiteboard, the researchers set up a video camera, and handed us a design prompt describing the requirements for a traffic control simulation system for undergraduate civil engineering students. We were allotted two hours to design both the user interaction and the code structure for the system.

Jim Dibble and Ania Dilmaghani at the whiteboard in their research design session

Platfora, a new startup in the Hadoop business intelligence space, is working with Cooper to design an elegant, intuitive interface to bring clarity to the chaos of big data.

After Platfora received 5.7 million in funding from Andreessen Horowitz; Cooper worked on a rapid, collaborative two-week timeline with a team of five designers to create their website, www.platfora.com. Platfora CEO Ben Werther said, "we wanted to convey the clarity and simplicity that we are striving for in our product experience — without showing actual screenshots. Cooper's design work on our website conveyed this message perfectly."

A clean sans-serif designed by Minneapolis type foundry Process combined with rich, vibrant visualizations designed by the Cooper team combine for a unique and beautiful site we're proud to have been linked to in the Wall Street Journal, TechCrunch and New York Times.

Immediately after launch, the site received rave reviews on Twitter:

See the site at www.platfora.com.

Related Reading

• Cooper helps TaskRabbit design new iPhone app for help with chores
• The litl: a design miracle!
• Mental Models for product and service strategy
• Take the visual interface design class

“We don't finish the movies, we just release them.” -- John Lasseter of Pixar

It’s easy to think of design as an ongoing iterative process, a constant refining that never reaches an objective “end.” It is especially easy to think of software in this way. Because code isn’t static, design of software is relatively dynamic, able in many situations to alter direction or incorporate new functionality without overturning initial design-framework decisions. While this can be true, it is also possible for design to reach a state which is done. Not simply done for the next release, but where design reaches finality. The design no longer carries the evolution of the product forward.

Once design reaches a stage in which the difference between versions is more window-dressing, or a change in interaction approach, rather than a realization of deeper functional improvements, design is done. When the ideas on how to improve a design no longer come, when the designers can no longer see a way to improve the idea, it is done. It isn’t that someone else couldn’t take the idea and evolve it, but that the stewards of the design reach a point where their collective imagination can’t move the product forward.

Design which is not done

It’s easy to find examples of design which isn’t done. Lots of first generation software is released delivering basic functionality. Later versions fill out with functionality, growing to meet the latent potential in the first version. This design isn’t done.

Early designs of Evernote promised much more than was delivered. Successive versions cast and recast the design until the initial flaws could be worked out. Early versions provided little more than a limited word processor that stored stuff in the cloud. The interaction paradigm was a little strange and frustrating. Evernote continues to be a design in process. Functionality continues to evolve and improve with each release; the design isn’t done.

Mature software may not be done either. Photoshop versions 5, 7 and 8 delivered significant design shifts. Paradigms for working with text, the inclusion of vector images and interface for handling of RAW images marked major departures from previous versions. As an 11-year old product the design of Photoshop accomplished remarkable adaptation and revealed the “incompleteness” of prior designs. Of course the design leveraged advances in technology which were not available for earlier versions, but that’s the point. The design wasn’t done, design could still be used to improve the program, to advance what it did and how it did it.

Design of non-software products may also reveal a level of “not done.” A baby stroller from BumbleRide is “done” in the sense that you can purchase one and it works. The design is largely coherent and shows evidence of finish. But even here the design isn’t finished. A comparison of the 2008 and 2009 versions shows significant advancement of the design even though each of the versions was sold as a completed design. Wheels gained quick-release, the safety harness adopted a single button release, and the sun hood extended for more coverage. So is the design done now? I’d argue no. Improvements in ergonomics, materials, and signage all provide ripe areas for the design to continue to evolve.

When it reaches "perfection"

Design isn’t done when it reaches a pinnacle of efficiency or goodness. Done isn’t really a measure of quality or perfection. Many products never reach any level of quality or refinement. They represent evolutionary dead ends, still-born ideas with no potential in which to grow. They are poorly conceived, even if executed well. Crappy products may arguably be done before they are ever built or coded. The lack of vision from the start dooms the product to an evolutionary dead-end before it’s even born. If perfection is the measure of done we don’t have any way to agree on what is perfect or good. Perfect doesn’t give us a way to evaluate done.

When it feels done

Subjective evaluations by the creator may be acceptable in the realm of art. Artists work until the piece is “done;” till they feel the idea has been expressed. Design of products whether software or hardware need more objective measures than feelings. In part, designers need this because the act of creation relies on a whole team, not just an individual. We also need measures because products exist in a marketplace; there are deadlines, ship dates, feature sets, marketing and sales efforts, which require more clarity around when the design will be done.

When the time or money runs out

For consultants, work is “done” when the contract (time) is up. Projects are scoped to meet specific deadlines and requirements which fit those timelines. Design deliverables are iterative, each pass we give moves a level deeper and we work out more of the design details. We give great value for our time, but design is “done” when we run out of time. Our design is rarely done in the sense that every detail has not been worked out, all the possible problems have not solved. We work down from larger more fundamental patterns and frameworks, iteratively filling in the details. The big picture may be done when we deliver, but often it is internal product owners or developers who will actually “finish” the design.

When the requirements are met

It could be argued that design is “done” when the initial requirements have been met. It’s done enough to release a version, but it’s not really done. After the product ships the design team refines the design, adding in features or fixing issues which shipped in the previous version. The designers work to fulfill the full potential of the product. As long as their work produces advancements the design isn’t done.

When innovation plateaus

Design is done when its evolution plateaus. A couple of versions are released with little more than rearranging the deck chairs. Rework or changes to the interface reflect passing fashions rather than fundamental shifts in direction or functionality. Innovations in the marketplace or in technological breakthroughs are not incorporated or addressed in the design. Evolution grinds to a halt, the product ceases to advance in meaningful ways.

Design continues on many products long after the design is done. Design effort is wasted in chasing a market rather than leading one. Products become bloated with features which compromise the clarity achieved when the design reached “done.” Features are designed which don’t evolve the product; they complicate the vision reaching to be all things to all people, ultimately hobbling the product. The design of Microsoft Word has delivered little beyond version 5.1. It is a quite usable word processor, but the design for word processing was solid in 1991, in the subsequent releases little was advanced. Features where added that did little to improve the word processing experience. The design also failed to take advantage of shifts in the marketplace or technology. Five versions later Word is still largely a pretty good word processor. While much has changed in the interface switching interaction paradigms from menus to the ribbon can hardly be thought of as a fundamental shift in functionality. Word hasn’t evolved so much as changed it’s wardrobe.

Some products manage to react to changes in technology or marketplace. The design accommodates changing needs and opportunities. The product evolves through design to include new functionality, utility and continues to add life to the product. While Adobe Acrobat Pro has struggled with its share of bloating and incessant updates, the design of the program has continued to evolve. From humble beginnings of a reader/writer for portable documents, Acrobat has incorporated new functionality unimaginable when the product was initially designed; OCR of text, automatic creation of interactive forms, document markup, digital signing and distributed workflows. The integration of this new functionality has stumbled at times, but Acrobat X delivers a coherent, usable evolution of a product that is more than 17 years old. What was just latent potential in the embryonic design of the first versions of the product has been realized.

Some products are so deeply bound to a specific paradigm that the only reasonable evolution is an entirely different approach. The original design is done. A new product, with a different design, is created to address new technology, and a new marketplace. The original iPod‘s design is done. The scroll-wheel/menu design of an mp3s player was groundbreaking and brilliant, and it was well-executed. At some point it became clear that this design was done; it couldn’t evolve while maintaining the same core design. The only road forward was to abandon this “done” design, and adopt a new paradigm. The result was the iPod Touch. The shift was more than simply adding a bigger screen with touch input; what the product could do radically shifted.

Why does it matter?

It is important to acknowledge that design can reach a place of “done.” If we don’t, we may end up fooling ourselves that we are moving products forward when we are really just treading water. If we can’t step back and evaluate whether a design is done, we may continue to put effort into a product which we can’t improve. We will continue to release products that don’t help people achieve their goals, or worse--damage great products by bloating them with features no one needs. Knowing when the design is done allows us to recognize when our efforts will be productive and when our efforts will be wasted. When design is done it’s time to move on, to take up new challenges or products and start designing again.

I like to think of Interaction Design in its purest form as being about shaping the perception of an environment of any kind. Yes, today the discipline is so closely tied to visual displays and software that it almost seems to revolve around that medium alone, but that’s only because as of now, that’s pretty much the only part of our environment over which we have complete control.

The one field that has come closest to overcoming this limitation is the video game industry whose 3D games are the most vivid and complete alternate realities technology has been able to achieve. Game designers have control over more aspects of an environment, albeit a virtual one, than anyone else.

Lately I’ve been thinking a lot about this idea that interfaces can be more closely integrated with the environment in which they operate. I’d like to share some of what I’ve learned from the universe of video games and how it might be applicable to other kinds of designed experiences.

In Designing for the Digital Age, Kim Goodwin criticizes the term “Experience design” as being too presumptuous because we don’t really have the power to determine exactly what kind of experience each person with their own beliefs and perceptions has. Even when we work across an entire event from start (e.g. booking a flight) to finish (arriving at the door), there are still countless factors outside our control that can significantly impact how a person will experience it.

Video game designers on the other hand can orchestrate a precise scenario since almost every detail in their virtual world is for them to determine. They can arrange exactly what kind of person sits next to you on a flight no matter who you are or how many times you take that flight.

That isn’t to say that videogames don't have their limitations. Of course, it isn’t completely true that game designers can determine who sits next to you. They can only determine who your avatar sits next to. The most significant weakness of videogames is the inability to truly inhabit a designed environment or narrative. As much control as we may have over a virtual world, as long as we are confined to experiencing it through television screens and speakers, it won’t be anywhere near comparable to our real world.

Fortunately, there’s a growing effort to address this lack of immersion.

A key area of the problem lies in how we’re presented and interact with complex information diegetically, that is, interfaces that actually exist within the game world itself.

Before continuing, it helps to be familiar with some basic concepts and terminology around diegesis in computer graphics, the different spaces of representation between the actual player and their avatar. The diagram above illustrates the four main types of information representation in games.

Non-diegetic representations remain the most common type of interface in games. In first person shooters, arguably the most immersive type of game since we usually see the scenery through our avatar’s view, the head-up display has remained an expected element since Wolfenstein 3D first created the genre.

We really enjoyed watching the World Cup over lunch here in the Cooper office. The games sparked many conversations about soccer, beloved sporting traditions, and why FIFA is so bloody minded about goal-line technology use (okay, maybe that last one was just from a bitter England fan).

It's also been a time to admire the many new and unusual visualizations used for the tournament brackets, game-by-game breakdowns, and statistical replays. For the fans that wake up in the coming weeks with an empty feeling, perhaps this library of visualizations will provide a glimmer of comfort and distraction until the next tournament. (That is unless you're an England fan.) There are many visualizations to look at here but if I could suggest one to look at closely it would be the Guardian twitter replay. The best of the bunch.

And of course, congratulations to Spain on winning the World Cup!

Game Schedules & Results

The classic visualization for the World Cup is the table breakdown and brackets. For any hardcore fan this is the most exciting visualization where supporters can see their team's road to the final and victory.

MARCA World Cup calendar
One stadium visualization received plenty of attention for it's beautiful form and elegant interaction but, for me, it failed to illustrate the future match-ups. I never could understand the rationale of the order of the teams either.

World Cup radial bracket poster
While just a poster, this visualization gives a very quick glimpse into potential future opponents. It also is beautifully designed with bright colors and typography. Sadly, it isn't interactive.

I've been looking for a new place to rent using craigslist, and while it's an invaluable source of information, i've been frustrated by how much unnecessary work has been required. I've wasted huge amounts of time writing emails and making calls to fill in details not included in ads. Even when I do this extra legwork, I forget to ask about something and show up to a place I wouldn't have even considered if, for example, I'd known it didn't have a gas stove.

Part of the problem is that every posting on craigslist is formatted uniquely. One person is a realtor and posts an HTML formatted ad, while another is a homeowner listing a rental for the first time. One is verbose and full of irrelevant details, another is three sentences long and only lists generic information such as number of rooms.

It's clear that most people writing a listing aren't real estate professionals, and when faced with a big blank text box, they type in whatever they can think of off the top of their heads and post the ad. Sometimes this works out, but much of the time this results in lots of overhead answering questions via email and phone, or showing the house to people who aren't a good fit for the place.

Current craigslist housing posting form

Luke Wroblewski wrote a great post about narrative format registration forms -input boxes within sentences-basically madlibs. While the focus of his post was on increased conversion, it shows that this kind of approach can be more inviting and friendly than standard form boxes that can feel like you are doing a lot of work to input information.

What if Craigslist offered a narrative format template just for listing rental properties? Housing listings are a constrained problem with a limited set of vocabulary which lends itself to templates. This template could guide home owners in crafting a post which is easy to read, includes the kinds of information that renters need in order to make decisions and saves everyone time. Of course the old text box could still be an option for those who want to craft their own post.

Mad-libs style template approach for posting rental listings

The template offers a simple streamlined method of posting, resulting in ads which are more consistent, yet customized in the places which matter most, highlighting the unique differences between rentals. The mad-libs format is faster and easier to compose, and results in prose postings which are easier make sense of and save time and effort of matching renters to homes.

We find that looking at the world from the perspective of users and their goals makes us notice a lot of bad interactions in our daily lives. Being solution-minded designers, we can’t help but pick up a whiteboard marker to scribble out a better idea. We put together "The Drawing Board", a series of narrated sideshows, to showcase some of this thinking.

In this episode, we look at car information systems. Sure there’s a ton of useful data in there, but most of it is trapped behind a series of menus, idly waiting for us to enter the correct sequence of commands to unlock it. We imagine a car information system that’s more forthcoming with the data it already has, making us feel like we’ve got a great road-trip buddy in the passenger seat instead of a computer.

Credits: Emma van Niekerk and Suzy Thompson.

One of my favorite scenes in Futurama features a Lucy-Lui-lookalike robot who is programmed to fall in love with the main character, Fry. When she sees him, she purrs, “You’re one sexy man,” and then switches into a harsh monotone to shout, “PHILIP J. FRY”, before jumping in his arms and giving him a kiss. The writers can make this sort of insert-name-here joke because we’re all familiar with this type of communication, mostly from mass mailed form letters and IVR telephone systems that try and composite sentences from prerecorded bits. “If you want to talk to SUZY THOMPSON, press THREE FIVE TWO FIVE…”

Variables in otherwise-static text (like in interfaces) can be good or bad, depending on how you treat them.

Many people have seen Marcos Weskamp's brilliant visual design of Newsmap. The site uses the Google News aggregator to rank news stories by popularity across the Web, and then maps them out with the popular items larger, and less popular headlines smaller, all in color-coded categories. Here's a quick screenshot if you haven't seen it, but view it live if you can.

The beauty of the layout is that it allows a user to quickly glance to see what's most popular. But what if you wanted to do the same thing with a set of identically-proportioned graphics? (Like channels of video, CD artwork, or avatar options on a social networking site.) You couldn't use different proportions for the images, as Weskamp does with headlines, without sacrificing the graphics' integrity.

What you could do is use "squared rectangles."