Pattern Languages for Interaction Design

Written by: Will Evans

Will Evans stalked and captured Erin Malone, Christian Crumlish, and Lucas Pettinati to talk about design patterns, pattern libraries, styleguides, and innovation. Erin, Christian, and Lucas are leading a workshop on design patterns at this year’s Interactions in Vancouver; and, Erin and Christian are writing a book on patterns for designing social spaces for O’Rreilly.

An interaction design pattern is not a step-by-step recipe or a specification. It’s a set of things we’ve learned that tend to work in clearly defined situations as well as some known issues that need to be balanced or sorted out or otherwise addressed. A pattern is closer to a checklist than to a mock or a wireframe.

*How did you get your start in Interaction/Information Design?*

*Christian Crumlish (Xian):* I came from book publishing where I wore many hats over the years (editor, author, agent). I ended up in technical publishing (“computer books”), an aftermarket made possible by shoddy user interfaces. This piqued my interest and the Web democratized information architecture, interaction and interface design.

*Erin Malone:* I actually started out as a print designer and Art Director. I went to grad school at RIT around the peak of CD ROMs. I did a project in Hypercard (in 1993). I thought I was going to do interactive education CDroms when I graduated but then the web happened. I taught myself HTML and came out to California to build Adobe’s first website, and I’ve been doing web applications and interactive work ever since.

*Lucas Pettinati:* I studied Architecture in college after realizing that one doesn’t learn how to design GUIs in a Computer Science program. My first job out of college was at an internet startup where I did general design work but it wasn’t until I created a user flow diagram that I fell in love with the principles of IA and Interaction Design.

*Who do you look to for inspiration?*

*Lucas:* I’m a huge Edward Tufte fan and am always trying to think of ways of displaying information. One of my oddest inspirations came from a Piet Mondrian painting; it helped me visualize a way to display a cluster of available flights relative to their price and departure time.

*Xian:* I steal from everyone. I think we should be careful not to throw out too much of what we knew from print design and layout, typography and rhythm.

*Erin:* I am a big proponent of looking to the past as well as the future. My work is very grounded in what I learned as a graphic designer – typography, color theory, readability etc. I have recently added motion and time as factors to design for. I also believe in looking at nature for inspiration – how things interact, human gestures, the landscape. Etc.

*Christopher Alexander, in his book, “A Pattern Language,” and his talks and papers seems to come from an ideological perspective. What role do you think ideology has in interaction design and in patterns in particular? Do you sometimes face questions or issues where your design decisions are influenced by political, ethical, or ideological considerations?*

*Xian:* For another time perhaps we can address how the pattern language movement has evolved and splintered since Alexander et al.’s beginnings. I think there is always an underlying ideological set of assumptions, examined or not, explicit or not, transparent or not.
That’s only a good thing if you make it so.

*Erin:* I think having a grounding behind the decisions you make is important. Ethics play a big part in many people’s decisions – in the type of work they do as well as the way to design a certain interaction. Being ethical and non-destructive is important as a designer. I think Alexander wanted to enhance and support the human condition and propagate positive interactions between people. That was the ideological perspective for his approach to developing a pattern language. I don’t see anything wrong with having that same attitude as an interaction designer.

*Xian:* I’d say if anything I see ethical dimensions to design problems more often now than ever before, perhaps because of the way our always-on digital interfaces are permeating everyday life more and more thoroughly. In fact, Erin and I agree that there are ethical factors in at least _some_ of the patterns in our forthcoming book, Designing Social Interfaces.

*I’m interested in your take on building corporate pattern libraries. Some companies, like Endeca, are creating a proprietary library for faceted navigation. Is there is an obligation for practitioners to share their design patterns?*

*Lucas:* No, there shouldn’t be an obligation to share a design pattern – but much like the Open Source software movement, I think the future of pattern libraries lies with the participation of a broad community. The important thing to remember is that design patterns are living things. They can evolve over time and are adapted and refined as new technologies emerge. For example, a mere five years ago, the gesture-driven interfaces were in their infancy. Today, we have devices like Apple’s iPhone that rely on flicks, pinches and drags as core patterns for how to interact with the device.

*Good point – and in fact, gestural interfaces have now become such a part of the mainstream—between iPhones and those election maps on CNN—that people in our field aren’t surprised to see Dan Saffer’s new book, “Designing Gestural Interfaces”.*

*Christian, do you agree with Lucas that there’s no obligation to share? Do you think they should be open so they can evolve and become more widespread?*

*Xian:* I don’t personally think there’s any inherent obligation (certainly not in the sense of a mandatory, enforceable one) to share patterns. Over time un-shared patterns probably have limited utility. Patterns are a bit like tamagotchi. If you don’t keep tending them they die, and they’re social in the sense that they thrive and become more refined and useful and subtle the more people are able to engage with them.

*Erin:* For every corporation out there interested in building their own library, almost all of them will want to keep some, if not all, proprietary. I believe that as firms create their own library, they’ll see benefits in adopting open and shared patterns. After all, why reinvent the wheel when there’s already a fine, well-adopted and understood approach to a problem. On the other hand, they will develop a subset of highly proprietary interactions that become brand differentiators. These are the things they can patent and call attention to in a competitive landscape. After a certain point, though, many of these patterns will become part of the vernacular landscape and therefore more open.

…a subset of highly proprietary interactions [can] become brand differentiators. These are the things [companies] can patent and call attention to in a competitive landscape.

*Is a private corporate pattern library simply a style guide? People sometimes confuse the two. How are they different?*

*Erin:* In my mind, the pattern library is the architecture of the system, and the style guide is the wallpaper and paint color. The brand and style guide may change more often than the patterns — the interaction solutions. A certain instance of a pattern — with it’s skin and specific points of interaction and behavior — may also be promoted to a standard in the style guide for various companies as part of their brand experience and there’s nothing wrong with that.

*Xian:* Pattern libraries are often presented as an alternative to, and improvement over, corporate style guides. This is usually based on the idea that they tend to be maintained on an intranet as living repositories rather than as occasionally published brand guidelines in a binder on your shelf. Secondly, a case can be made that thinking in terms of patterns and following one of the semi-standard ways of exploring each pattern can provide for more stable, longer lived guidelines that aren’t as brittle as specs (though they can and should of course point to today’s specs and assets).

*So you fundamentally believe that the difference may lie in their velocities and life span?*

*Xian:* Yeah – To clarify, patterns are on a slower pace layer than most style guides, but the truth is that — yes — you could safely describe most real, existing pattern libraries as a kind of style guide, but a living, moving one.

*Lucas:* It’s easy to get all these different tools — corporate guidelines, style guides, brand values, etc. — mixed up with a pattern library. Pattern libraries address the need of a consistent interaction. Analogously, style guides address the need of a consistent aesthetic, and brand values address the need for a consistent outward image. Though they each serve a unique purpose, my opinion is that keeping these tools as separate entities is by far the easiest way to ensure that design quality will suffer. Integrating of all these different design tools with an engineering code library is what — I believe — is at the heart of a successful plan for communicating design consistency across an organization. This should be the heart of a private company’s pattern library — a way to provide interaction, visual, and engineering consistency for a range of products.

*I have heard it argued that use of design patterns and pattern libraries removes creativity and innovation from the solution-finding process? Do these criticisms have merit?*

*Xian:* I don’t really think that argument holds water. I do understand the concern, and it’s totally possible to apply patterns mindlessly or to force their use inappropriately, but, to my mind, patterns focus innovation and creativity on the leading edge of the problem: the unsolved part.

*Lucas:* As designers, we all want to innovate and take a crack at defining the details of a design. In that respect, using a pattern library does constrain some of the choices that one makes. But this is a very superficial way to look at the benefit of using a pattern library . In reality, a pattern library should house the _archetypes_ of common interactions and help the designer select a solution that best fits the current project. Projects have deadlines and the use of a pattern library helps designers quickly — and confidently — craft parts of a design so the bulk of their time is spent designing what’s unique, rather than what’s common. Think of it this way: the pattern library is like a compass. It’ll tell you what direction you should go in, but it’s up to you to figure our how to get there.

“…The pattern library is like a compass. It’ll tell you what direction you should go in, but it’s up to you to figure our how to get there.”

*Xian:* An interaction design pattern is not a step-by-step recipe or a specification. It’s a set of things we’ve learned that tend to work in clearly defined situations as well as some known issues that need to be balanced or sorted out or otherwise addressed. A pattern is closer to a checklist than to a mock or a wireframe. Patterns can’t do the design for you.

*Erin:* I agree with Christian here. Critics say patterns remove creativity. But that’s like saying that having only 64 crayons in the pack removes creativity. Constraints are a fact of life. Patterns are just tools to guide decisions. Converting every pattern to a component solution with skin and code will limit a designers options but they still have to resolve how it will all go together in a cohesive way — how the hierarchy of information guides the user; how pieces move from one into another; how to keep things from clashing or being confusing. And, in almost every design problem I’ve seen, there are also one-off, new problems to be solved. So I think the criticism is a cop-out.

*Xian:* Agreed — and of course some pattern libraries are really more like catalogs of UI widgets, and a catalog of widgets can be slapped together to create poor design, but I don’t think you can pin that problem on patterns.

*Okay, so patterns don’t kill innovation, people do! Taking a different tack, do you think the use of design patterns and libraries are an effective way to train people new to interaction design?*

*Xian:* I think it’s part of a well balanced breakfast, but there are a lot of fundamentals of design, interaction, and information that come first.

*Erin:* Pattern libraries are tools. Just like having a stencil set and understanding of things like gestalt and readability. The library can be a great reference for designers to start with, to help uncover questions and considerations they might not have considered before, as well as offer ideas for quick solutions to easily solved problems.

*Lucas:* Consuming pattern libraries does not in and of itself create good interaction designers. Writing patterns, on the other hand, is something I feel helps new interaction designers better understand why some designs work and others don’t. Anyone interested in becoming an interaction designer should understand that even when using pattern libraries, there’s an awful lot of original design needed to complete a project.

*”Designing and Building with Patterns and Pattern Libraries” workshop at Interactions ’09*

Erin, Xian, and Lucas are leading a patterns workshop at Interactions ’09 in Vancouver. “Designing and Building with Patterns and Pattern Libraries” is a hands on workshop where participants will come away with some practical experience spotting patterns, describing them, and thinking about how to apply them to design work.

You can find out more about the workshop on the Interaction ’09 website: “http://interaction09.crowdvine.com/talks/show/2574”:http://interaction09.crowdvine.com/talks/show/2574

Christian and Erin’s book, Designing Social Interfaces, has a website where you can contribute to, refine, and discuss social design patterns: “http://designingsocialinterfaces.com/ “:http://designingsocialinterfaces.com/

Using Design Visuals To Communicate Ideas

Written by: Jeff Parks


iTunes     Download    Del.icio.us     Pod-safe music generously provided by Sonic Blue

banda_headphones_sm.gifIn late January I had the pleasure of attending the VizThink conference in San Francisco. As an Information Architect I wanted to learn how to use different ideas around design to assist me with “big IA” and “little IA” projects. The folks kind enough to join me in this conversation include:

Christopher Fuller Griot’s Eye
Daniel Rose Bell Canada
Ken and Rebecca Hope Motive8 Infographics
Noah Iliinsky Complex Diagrams

We discuss:

*Thinking outside the box* Daniel Rose talks about why the process of “thinking outside the box” isn’t possible unless you surround yourself with people of different experiences. The following framework is what Daniel sketched during our conversation that describes his idea.

*Graphics empowering people* Ken Hope from Motive8 Infographics points out that a lot of the visualization tools empowers people to communicate ideas more clearly, without having to use words.

*Global Perspective* Noah Iliinsky and Rebecca Hope talk about the diversity of professionals, both within and outside of the design disciplines in attendance, and how the sharing of different perspectives added even more to the conference itself; backing up Daniel’s perspective of thinking outside the box. (In fact, 21% of the participants were from outside North America.)

*Common Craft* One of the many presenters at VizThink were the founders of Common Craft, Sachi LeFever and Lee LeFever. Rebecca points out that the end result is brilliant, but not knowing the work that goes into creating these simple, yet elegant videos, is common amongst clients.

*To Write or not to Write, that is not the question* Daniel points out the genius behind Common Craft is the writing or scripting of the videos that make Common Craft remarkable. Writing and illustration go hand in hand.

*KISS* Taking the time to reduce the noise will help your users understand the core message – whether it’s in design or writing to help guide the vision.

*Want to see more of VizThink ’08?* There were several photographs taken by professional and amature photographers while at the conference. For most of the photos, check out Flickr and search on the key word “vizthink08”.

*Examples of Design*
The following are images were created by Christopher Fuller; Ken and Rebecca Hope; and Noah Iliinsky. For a full size version of this art work, simply click on the image.

*Christopher Fuller*
This is a recent live illustration record I did of a dialogue on branding (The original is 12.5′ X 6.5′) that was given to a European banking client by Scott Bedbury – a former Nike and Starbucks marketing executive.

Just a little note of clarification on why I drew Lech Walesa in the bottom left corner. Mr Bedbury told a story about Lech Walesa coming to the United States to give a talk at a conference. One of the employees at the hotel saw Lech’s name in the register as a featured speaker and decided to google him. They discovered that his birthday fell on the same night as his speech, and so they arranged for the hotel wait staff to learn how to wish him happy birthday in Polish. According to Scott, it brought Lech to tears. It was a great story and one I knew I had to capture.

I do have the ability to do a reasonable caricature of Lech Walesa on the fly being a child of the 80s, history buff, and someone who gobbled up pop culture (um, there’s a prominent nose, moustache, etc.). But I don’t know how to write “happy birthday” in Polish. So while scribing the conservation I whispered to a colleague to google how to write the phrase and slip it to me on a post-it (I took my cue from Scott Bedbury’s story and copied the initiative of the hotel worker). By the time the conversation was over I had written “Wsystkiego najlepszego Lech Walesa” on the graphic. Of course, this went over well (though I think it’s not 100% right) since the meeting was in Europe and there were a few Polish participants in the audience.

*Ken and Rebecca Hope*
This infographic is a classic example of a “before” and “after” and shows why we love what we do! The client, Ifor Ffowcs-Williams, CEO, Cluster Navigators Ltd, is an international cluster development consultant.

In his workshops Ifor’s verbal communication is eager and interesting. However, his key presentation tool detailing the underlying process just didn’t do him justice as a typical Powerpoint slide. Although he is a visual thinker and speaks using lots of imagery and analogies, his presentation slides were all plain written text (even though occasionally highlighted for effect!) and didn’t capture the excitement or essence of what the process involved and offered. Also, when used with audiences with limited English, the text-based slides were not always understood.

Essentially we brought the Cluster Navigators process to life. We visualised the process as a fun and dynamic journey, using simple imagery for each key stage to help audiences quickly understand the concepts and engage in the process.

The impact of the the infographic is probably best described by Ifor himself in this feedback he provided, “Why didn’t you show us this before?’ was the question from one of their Scandinavian clients on seeing our new infographic. “We’ve now used it in workshops and conferences on five continents. It’s brought out the smiles, made the learning more interactive and led to repeat business.”

*Noha Iliinsky*
This diagram has been arranged to show not only the hierarchy, but also the intended use pattern of a typical, linear, non-fiction book.

* Continuity in the book is indicated by contact of the circles.
* The gray line, progressing in small and large clockwise arcs from section to section and chapter to chapter, demonstrates the linear progression of the content.
* The dashed black arrows show some possible non-linear paths that may be traveled by the reader to view content that is not part of the main linear flow of the book.

The goal of displaying the use of the book, and not merely the hierarchy, has led to an atypical diagram that conveys more knowledge than the typical counterpart.

I created this diagram in the fall of 2003. It appears in my thesis, and was selected to be supporting material for the book The Practical Guide to Information Design, by Ronnie Lipton.

Transcript of Using Design Visuals To Communicate Ideas A Podcast from Vizthink 2008
[music]
Jeff Parks: This podcast is brought to you by TechSmith. Right now, millions of peoples are snagging. Are you? And by, the IA Summit. This year, your peers and industry experts will speak about how topics such as social networking, gaming, patterns, tagging, taxonomies, and a wide range of IA tools and techniques can help, as users experience information. For other events happening all over the world, be sure to check out evensts.boxesandarrows.com.

In late January, I had the opportunity to attend the VizThink Conference in San Francisco, California. VizThink brought together some of the most creative minds in design from around the world. On the last day of the conference I gathered together Daniel Rose from Bell Canada; Ken and Rebecca Holt from the New Zealand based infographics company, Motivate; interaction designer Noah Alinsky, and illustrator and designer Christopher Fuller from Griot’s Eye.

We cover a range of topics, including “How to truly think outside the box, ” “The power of illustration and design in communicating ideas, ” and personal highlights from the conference. Many thanks to everyone for participating in this discussion, and I hope everyone enjoys the podcast. Cheers.

Jeff Parks: I didn’t really have a theme for today. I thought maybe we could just talk about lessons learned, why people are here, and what they’ve learned, what they’ve enjoyed about the VizThink Conference, in general. Maybe we can go around there and everyone can introduce themselves to start, and maybe, the company you’re working for, and what you do. Can we start over here?

Christopher Fuller: I’m Christopher Fuller. I’m from Los Angeles. I work for Griot’s Eye. It’s a huge vast company of one.
[laughter]
I network with friends a lot of times on bigger projects, but I do graphic facilitation, live illustration. My background is cartooning and caricature, which I usually do in Orlando. And I came into this because of MG Taylor Corporation, which was a boutique consulting firm that put an ad that they needed some artists. And I was like: “Why would consultants need artists?” And that began my journey.
Jeff: Cool, excellent. And you’ve enjoyed the conference?
Christopher: I did. I loved it. I knew that there was a community out there, but I was in a bathtub, sliding around. [laughter] And I came here and I was like, “Wow, there’s an ocean!”
[laughter]
So, it was great.
Jeff: Excellent. Rebecca.
Rebecca Holt: I’m Rebecca Holt, and I’m from Wellington, New Zealand, all the way across the Pacific. And my husband and I work in a company called
Motivate Infographics, which has been recently launched. After five years of playing around with infographics and the need for them, and clients that we could help communicate with, or for. And we launched Motivate at the end of last year, and most of the work we do is with the New Zealand government, where they have excessive documents, and reports, and processes which aren’t understood in your words. We go in and add the concept to our process and make them visual. People can quickly and clearly grasp the main points of anything.
The conference has been great. Same reason. New Zealand’s a very small country, a long way away. But it’s nice to be able to come and connect with other people who are also converted over.
Ken Holt: Well, I’m Ken Holt, the other side of Motivate Infographics. I too, by coincidence, come from New Zealand.
[laughter]
Noah Alinsky: I’m Noah Alinsky. I’m between projects right now. I’ve most recently been working as an interaction designer, which is what I went to graduate school for. But, accidentally, in the course of my studies at graduate school, I wrote a 90 page thesis about, how to draw good diagrams. And the basis of that is… the short version is that intentional choices are more powerful than arbitrary choices. So, the process steps you through the choices that you make when designing a diagram, or a visual representation, and how to make those good choices, based in cognitive psychology, and how people perceive things, like shape, and placement, and color.
So, at the end of the day, what you get is a product that is an information product that’s useful to your audience. And mostly, I’ve done work applying that to qualitative things: to pictures of relationships. But the same concepts are completely valid also for any kind of quantitative, numeric representation. So, I’ve spent a lot of time thinking about that.
Daniel Rose: My name is Daniel Rose. I’m from Toronto, Canada. And I work for a company called Bell Canada, big phone company. You may have heard of it.
[laughter]
You’ve heard of it in New Zealand. Alright, that’s good. I work with large groups, around specific business objectives, to coalesce the energy and passion, and wisdom of those groups and put it together into something that is useful for organizations. What I would call a ‘tangible work product’, that is created quickly, in real time, with the knowledge and expertise of everyone in the room.
Jeff: I know the one thing I was talking to you guys earlier… one thing that I really got out of this conference as an information architect, is really wanting to understand, how to better design ideas; better design products and services. Like Rebecca, I work with vast, huge volumes of data, trying to structure and label things so people can easily find them and then move their way through a process, whether it’s on a website, or otherwise.
There’s a lot of tie‑in: interaction design is very much like that. And I just found it really interesting with the different workshops, the way in which people would do things. I attended Daniel’s session this afternoon, and Christopher was trying a lot of things brilliantly, and we got to interact with everything from Play Dough to cut and paste of Styrofoam balls.
You don’t really think about these things that, I guess I would have used in grade one and grade two as a way of working with large companies, to try and illustrate ideas. He gave a great presentation today, Daniel, and again, it’s just thinking outside the box a little bit more, in terms of presenting ideas.
Daniel: I have some thoughts on that box, too.
[laughter]
Jeff: OK, well let’s hear them.
Daniel: Sure, alright, we’ll make it quick. So, I would suggest that thinking outside the box is not actually possible. The box is what it is. So, when people are asking that; asking to get that, I’ll define the box, first. In my humble opinion, the box is defined by: the boundaries of the box are the collection of our knowledge and our experience. That’s the box. So, when you’re looking for creative or breakthrough ideas, what tends to happen is that people tend to get with like‑minded people. And, they tend to be with small groups of people, as well. They don’t want 50 people looking for breakthrough ideas, because that’s unmanageable.
So, they get in a room with five people who are just like them. So, the collective box is the sum total of that knowledge and that experience, which is really, ultimately, quite small, because they’re all the same. They’re all say, “Telecom people.” They all went to the same university, and they’ve all worked at the same telecom for 20 years. So, the potential for breakthrough ideas is limited.
So what you need to do then is you need to…and I’ll draw it out. This probably won’t help for you podcast listeners.
Jeff: We’ll take a picture of it and put it up on the show notes.
Daniel: All right, perfect.
Jeff: No problem.
Daniel: So if you get a bunch of people together who are all kind of similarly minded, there’s your box. If you get a bunch of people together who are all very different ‑ artist, sculptors, musicians, different industries, different places on the earth, different ages ‑ that becomes the size of your box. And the potential for creativity and innovation is when these people start to talk, and they start to share mental models, and they start to rebuild mental models based on the unpacking of their assumptions and rebuilding it. So that’s where your potential for innovation and creativity can occur. The thing is it takes time.
Jeff: Right.
Daniel: So if you’re talking with a nuclear physicist about what they mean by the word “merger”, they’re going to be talking about the coming together of electrons and atoms or whatever, and it’s going to mean something completely different to a business person. And then you start to unpack, OK, well what does it really mean? What does it really mean? What does it really mean? And then you can start to co‑create together. So then you can have the insight and brilliance of a physicist to help you work through your corporate direction with ideas and perspectives that you never would have come up with on your own.
Ken: Might start a completely different change of direction which the businessman’s never even contemplated before.
Daniel: Exactly. But this takes time. The act of these different parties coming together to exchange and unpack their models is a time consuming process. So you have to think about, is that a good investment. Is the challenge that I’m currently dealing with significant enough that I need to invite physicists and sculptors in order to really get into it? If you’re just looking to redo your something or other, how do you bring people into the company through a website…maybe you don’t need that. You just need to think about what your objectives are.
Rebecca: And out of interest are you seeing more and more companies willing to take that step to want to bring in outsiders and such who might not know anything about the business but then are actually, OK, let’s go for it. Let’s see what can be possible. Let’s see what ideas we could come up with.
Daniel: It’s getting there. I think that’s almost the most extreme manifestation of that. I’ve worked with some clients who instead of doing that, instead of inviting the sculptor and the physicist in, they take a whole day to rethink their business processes after reading for a couple hours about complex adaptive systems. So we’ll have people reading about how coral reefs manage resources and how rainforests do the same. And that’s one way to substitute for actually getting a marine biologist in or something like that.
Ken: It’s kind of like what Tom was saying that it’s almost a poor substitute because you look up on the Web for this sort of information, and you’re still using your assumptions and your box view. Whereas if you’re actually sitting in a whole room of people, that’s like you said, they could have done this all over the Web. But the scope of what we’ve done and what we’ve learned and the enthusiasm could not be captured through a single conduit like that.
Daniel: Yeah, it’s a continuum and you just have to figure out where the payoff is.
Ken: Time is the cost of getting these ideas but wow, look at the directions you could go in.
Jeff: Even from a human factors perspective, your brain is made up of two hemispheres and we tend to not really exercise the one half very much, in our professional lives in particular. And I think that’s the one thing that focusing on design more for solutions can really help with because the more you engage in creative processes, the stronger your logic becomes as well, in very much layman’s terms but that’s the general idea. And so if we had companies that were more involved to be, looking at Chris’ illustrations for example ‑ we’ve got to get pictures to put up on the podcast. You’re an absolutely brilliant artist. When we were here the first night…
Christopher: Go on.
[laughter]
Christopher: That’s good, that’s good, yeah, yeah.
Daniel: Yes.
Christopher: Griotseye.com.
[laughter]
Jeff: I resemble that remark. But you are. You’re absolutely brilliant. And looking at your illustrations the other night you could just tell. I didn’t need to say anything. You could just look at the illustration and you could just envision exactly what you were thinking. The whole conference blew me away in terms of the unbelievable talent that’s out there. And we’re not alone, right?
Christopher: I think that’s the real power of when you add the visual modeling element. When people see ideas that they’re saying coming to life in front of them it’s just such an amazing experience.
Ken: Empowering.
Christopher: It’s empowering, people hear their ideas being captured. And like you said they’re empowered, but also other people can see a pattern emerging, and it’s pretty amazing.
Noah: And that actually leads into something that I was very impressed by is that we’re under this umbrella of visual thinkers, but there’s cartoonists, and illustrators and mapmakers here, the mind mapping people who are very much about the contents and the relationships and not so much about the visual presentation. And I’m more at that end of the spectrum. People who can do all of it…
Christopher: Photographers.
Noah: Photographers. These groups working together and learning from each other. The illustrator is learning to structure and the logical people learning how to draw. I can do a stick figure now, right?
[laughter]
Noah: But everybody being excited about expanding our collective box really to creep in those directions that we didn’t have and having a community to do that in where we to a degree have this common goal of all of us expanding our capability of representing these ideas. Just like you said, being able to turn what’s stuck in our heads into something that we can share in a representative way.
Rebecca: And what’s cool about that also is how many university‑type teaching professionals are here too.
Ken: Oh, yeah, academics.
Rebecca: Covering a couple of educational people who are here to try and learn how to do this. It’s not just professionals in this field. It’s actually companies who want to do better and bring it into the organizations or lecture which I think is brilliant.
Ken: Or people who want to actively pass this on to the younger generation. That’s the kind of energy which I think everyone’s got to take. This is really just a new way of thinking.
Jeff: Because I’m part of a few mailing lists, the Interaction Design Association, the Information Architecture Institute, Taxonomy Community Practice. One thing I keep reading over and over again, which I think is a colossal waste of time, is trying to define the professions, trying to…you know what I mean?
Noah: It’s a thread on the IA list for 10 years.
Jeff:: I’m sick of it. It’s so irrelevant because let’s face it, if I were to draw a picture of what I wanted you to build, and all of the different professions that are sitting around this table, you’d all be able to build it. You’d have a different way of going about building it, but the product or the service or the site or whatever it was, you could build it. So what I really liked about this conference is, here’s an opportunity to learn from people in different areas, like you were all just illustrating, and not focusing on trying to define my own profession. But rather, opening up the doors and learning from others, and then incorporating that into my profession and learning accordingly. And stop trying to get into the semantical details of defining what information architecture is, or what interaction design is. I mean, to me, that just seems like such a waste of, I don’t know, brain power. You know?
Ken: Define through the big picture. Don’t define through the micro‑vision.
Jeff: Right. And Daniel’s big picture as, right? Not the little microcosm of like‑minded people, but all the larger box of professionals.
Ken: The ocean.
Rebecca:[indecipherable 15:27]
[laughter]
Jeff: Yeah, exactly. What were some of people’s favorite sessions that they attended? And maybe a short description of what they were?
Ken: One which I was super impressed with, wasn’t so much the session itself. Because it was about the growth, mind‑mapping. And, you know, he’s just a fundamental, flawless presenter, and he’s so onto it. But then, he, in the very last five minutes of his session, was all about the second life interactive reading environment. And so, he uses this basically to display these panoramic, huge pictures that they create, that they [indecipherable 16:12] .
Here’s a way of, what we normally do, is we draw a two dimensional information graphic. We boil the information we get down to the core message, and display it in a information graphic, that tries to encompass the whole.
Now that’s basically the core message, or the surface structure. Here’s a way of bringing this 2D image into a 3D environment, still keeping it 2D. But saying: “Look, here’s part of it. I want to know more, let’s open it up.” And suddenly, you get this 3D shelving effect, where you can actually open up part of the graphic and learn more about it. It links to websites, delve more into the structure of that particular part. And then: “OK, I’m getting a basic understanding of how that works. Let’s [indecipherable 17:01] together. Move that down, and open up this other part.”
So instead of giving just the overview, they’re giving the big picture. They’re getting the small picture, and putting it more into their framework that we’ve developed. And, I see that this could be a way of, basically adding much more detail to our end and to graphics.
And adding a fundamental step which allows people with the time and the energy, and the core need, to find out more about it. To allow some [indecipherable 17:31] to do so.
Rebecca: Other than Daniel’s session today, which was just a highlight…
[laughter and applause]
Rebecca: And the simplicity, or the cleverness of what they do, people keep saying, “Oh, well it looks so basic. And it looks… Anyone could do it.” And, as they pointed out, it’s not the look that’s simple. Or, maybe the look’s simple, but it’s the strategy. It’s what actually goes into choosing which simple images to put together. It’s what makes their…
Noah: The script?
Rebecca: It’s the script, yeah. It’s the script that really drives it together. And I think that’s what, a lot of what we all do, what people see as the end result. What actually has gone into the decisions that create that end result, often don’t really get appreciated. And it’s the strategy behind what you’re showing. And some of the examples you showed us today, Dan, made it all… It’s the decisions. It’s not just nice looking at diagrams. It’s been, you know, dozens, and dozens, and dozens of people work to create this masterpiece. In our case it’s just the two of us, but it’s nice even when it’s something really simple. Like at the Common Craft one today, they recognized just how much work goes into them. Yeah, just really cool people. So, that was a buzz, as was your session.
Daniel: And I was in that session as well, in Lee and Sachi’s session, Commoncraft.com. So, someone asked the question around, “It’s so simple that anyone can do it?” And I think the thing that’s going to them in business for a long time, is actually not the visuals, but the writing. I think people generally are either A, don’t like to write, or B, aren’t good at it. Or, C, think they’re good at it, but they’re not.
Noah: Well, they don’t take the time to do it. They just dive into the end product without doing the design phase. Of, what is the content we need to convey?
Ken: I’ve got a Mac, can’t do it. So [indecipherable 19:34]
[laughter]
Noah: Yes.
Daniel: But with respect to the actual, the visual component of it, I think that’s actually, it’s the writing. It’s not the visual that’s going to keep them in business, it’s the ability to write it.
Rebecca: And I think that… sorry, that reinforced, as several other workshops did, the need to keep things simple. That it doesn’t need to be complex. The visuals can be so simple, as long as the message is clear.
Ken: Cool message…
Rebecca: If the script is so clear, then the visuals don’t need to be more than colored little stick people.
Noah: And that was a very strong thread through two of the sessions I really enjoyed. I went to see Karl Goode, who is a professional information, informational diagrams, I guess. He worked for a music magazine for many years. And John Grimmway, who also has done a lot of map work. Maps of cities, and museums, and whatever. And both of them really were clearly very skilled at reducing the noise, and really focusing on: “What are the key things you’re trying to convey with this graphic?”
So, removing a lot of detail, removing a lot of extraneous color, removing a lot of text. Refining and refining and refining until… The core message remains. And it’s very clear and there’s not a lot of distractions. And, as the reader or the user, you can very easily access the information that it’s designed to convey, rather than having to dig through the text or dig through extra illustrations of things that aren’t actually relevant.
And so, this goes back to the writing. Having a really clear idea of, what is the message? What are we trying to achieve here? And using that to really guide the vision, which is unfortunately, infrequent, I think.
Rebecca: And that ties into what you and I have been talking about, Jeff, about the need to fully understand what the message is, and what it isn’t. The client’s actually trying to get across, or what the ultimate outcome is that they’re after. Because, unless you can figure that out front and you shouldn’t just start playing and throwing things.
Jeff: Yeah. Everyone’s really excited to dive in? Right? They want to get the project done, they want to see the end state. I mean, working with Canadian government clients, and I’m sure this is true in a lot of governments, they want to see the pretty picture. And from a graphical perspective, that’s great. But, when you’re dealing with vast, unbelievable amounts of data where no one can find anything, which is the whole purpose of the website in the first place. Arguing for three or four hours over what shade of blue the banner should be, right? Is kind of a moot point. Right? So, if we… Which is why wire‑frames are popular and why they’re effective, right? Because it focuses on the structure of where things are. And that’s a very basic, there’s another very basic visual tool kit that I know I use often, to get people to move away from looking at the specific colors of things.
Because that helps to put the final touches on it. But, OK, let’s focus on where you want things to go. Because very quickly after doing five or six wire‑frames, for example, they can see, “Oh, we’ve got about 16 different ways we structure content, and we’ve only got about five different ways we’ve drawn out so far, and we don’t have time to do 16 different structures of the information. And we don’t have time to create 16 different looking versions of each section of the site.”
So, very quickly it gets pulled back to the importance of the structure and the content, which in turn can drive the final look and feel. The designer I have back home in Ottawa, Bahn Forester, has been doing 15 years. He tells me all the time, design project that are maybe $500 quick projects, quickly turn in to $5000 projects for him. Not because he’s, you know… He tells the client up front, if you have the vision in place we can do this quickly, it can be done once.
But if you don’t have any of the content written and you have no vision for it, he just has to keep re‑changing everything. All the pixels have to change, the colors have to change. Again, he’s happy to take their money, as we all are, but if we focused more on that at the beginning then it wouldn’t be such a big issue, right?
Ken: To create a vision, you’ve to to have an end vision created.
Jeff: Right.
Ken: It’s not something that you work through.
Rebecca: It might evolve, but it’s a starting point.
Ken: It might evolve, but…
Christopher: Guys, my alarm went off, I’ve got to go catch my flight.
[crosstalk]
Christopher: I want to just leave quickly by saying I wasn’t actually in Scott McCloud’s session, but I was in the general session that he did at the end. That was very illuminating for me. It was brilliant, because, he outlined the dilemma that I find myself in sometimes as someone who’s come to graphic facilitation but from an illustration background. I’ve been blessed and cursed with the ability to draw very quickly, and kind of realistically sometimes. But, you know what? I’ve run into problems trying to find where I am inside his triangle of the real side, the iconic abstract side, and then the abstract beauty.
I remember working with a client and the line illustration went great. We were working towards a poster and I was doing cartoon people but they were kind of representative. Then the emails, edits starting going back and it was like, “You need to, the percentage of women needs. If you’re going to go that, we need some blacks.” Which is embarrassing because I’m African‑American. It got.
[crosstalk]
Christopher: Like star people, blue star people, would have worried so much.
[laughter]
[cross talk, several people say goodbye]
Christopher: … nice meeting you.
Jeff: Do people have other things they want to share, or chat about?
Daniel: I felt that the conference was more than just listening, like most conference are. I felt there was a spirit of co‑creation, that people wanted to create something new that hasn’t been done before. So, in the very literal sense, I think people really go into the exercise this morning in the general session around creating a plan for a not‑for‑profit organization called Art Train. Going back to my session content, that is a tangible work product. There were 350 people in the room who, in the course of 90 minutes, created work. Things were done.
Rebecca: The feeling that it will actually go on a mean something.
Daniel: Yeah.
Rebecca: The organization will absolutely use those ideas, or a lot of them.
Daniel: I felt that kind of, over the course of the couple days, let’s do something here.
Jeff: For those that weren’t here, the night before the conference started, what I really thought was interesting, they had massive large white boards they wheeled into the middle of the room, throughout the room. They left markers on them, so people could sketch and draw anything they wanted. And had different signs up about employers who are looking for people and people who are looking for work and they could put their names down. The organizer, Tom?
Daniel: Tom Crawford.
Jeff: Tom Crawford, the organizer of VizThink for this particular event, announced tonight that one person actually found a job. They were looking for someone and they hooked up. They had the interview and they landed the job, which I thought was pretty…
Daniel: That speaks your idea of something unique. You don’t hear about these things at every single conference, in terms of it being a priority, in terms of looking for those kinds of things.
Ken: In fact, I’d go so far to say, if you put white boards and markers up at most other conference, they would either be left untouched or what went on them would be just… complete vandalism, basically. You’d get the smart asses who’d do the “Kilroy was here” type stuff without really engaging that side of their brain. They would do a dump, rather an organized dump.
Noah: It was interesting for me the diversity of experience levels and skill sets here. A number of other conference I’ve been to, like the Information Architecture Summit, for example. Was more or less professions who were more or less doing the same thing. Some academics. This was very diverse here. There was educational administrators, there was graphic designers, and there was sort of information theorists, and illustrators, and cartoonists. In some ways I think it was a little bit challenging, because I think targeting the sessions and who they were for. I went to at least one session where I knew most of what went on, because I had much more experience with interaction design. It was a little bit lower level of that.
But, then, in the collaborative sessions where you had these different people working on a project, and people from all these different backgrounds and different parts of the country. Again, a nice big box. It was kind of interesting having all those different skill sets that, at least for me, mostly I don’t get that level of diversity of exposure in my workplace to these different skill sets.
They’ll be the customers I’m working with, and I’ll get some ideas from them, or some analysts or something, but that’s very different from having the diversity of people who were here.
Rebecca: A lot of that probably points to note for the people that weren’t here that they might find interesting is that 20% of the 380 people who were here, I think 380?
Ken: About that…
Rebecca: 20% were international and come from more than 3000 miles away. There were people from the UK, Denmark, Australia, New Zealand…
Jeff: South Africa.
Rebecca: South Africa. So there’s a pretty diverse bunch that all came together. And also that every meeting table, workshop table, and also the main session tables were covered in paper.
Noah: Yeah.
Rebecca: With a bowl full of crayons and pencils and stickers and sticky labels. I’ve never been to a conference like that in my life where you’re invited to doodle and draw.
Noah: Draw like a five year old, but here you’re encouraged to draw on the tables. And on the walls and the white boards. It’s almost like, complete reversal of what is expected of a professional, stiff‑backed person to come and doodle on a piece of paper or [indecipherable 29:20] . Just encouraged to lead the test. I feel like I’ve been at a fun‑park for an entire weekend. It’s just been like wow, wow, wow, wow, wow.
Rebecca: I think that the Vizthink website’s going to put a lot of the images from the conference up on their website. I’m sure people who are listening can go to that and see some of the cool photos that captured the essence of what it was all about.
Jeff: Guys, thanks very much. I know it’s been a great couple of days, but I’m sure everybody’s got plans for dinner, drinks, and maybe even heading home as Chris had to fly out. So, thanks very much for joining me on the the Boxes and Arrows podcast. Best of luck and I hope to see you at future conferences all over the world.
[crosstalk of everyone saying thanks]

Straight From the Horse’s Mouth with Dan Brown

Written by: Dan Brown

iTunes     Download    Del.icio.us     Pod-safe music generously provided by Sonic Blue

banda_headphones_sm.gif Christina Wodtke traveled with microphone to the IA Summit in Las Vegas this year and sat down with some of the most interesting and accomplished information archictects and designers in all the land. Bill Wetherell recorded those five conversations, and now B&A is proud to bring them to you. Thanks to AOL for sponsoring these podcasts.

In this bat episode, Dan Brown, “consultant”:http://www.eightshapes.com/ and “author”:http://www.communicatingdesign.com/ extraordinaire, deftly parries Tom Wailes’ repeated calls to oust the wireframes and task flows for prototyping and simulations. Our stalwart hero defends mindful subversion of the status quo as the best path in many corporate and public sector projects.

While exciting to throw out the bathwater, not every baby is fed by radical innovation alone.

Thanks to Tom for taking the voice baton after his previous turn as interviewee.

We discuss…

*Conceptual vs Design Documentation*
Ideation processes is where the team needs to think bout creativity and innovation. As designers, we create a set of artifacts to help us communicate.

*More detail required?*
Rather than using Wire Frames, Tom Wails says that his core artifacts are more detailed prototypes rather than wire framing, calling Dan’s approach to using Wire Frames into question.

*Know more than your audience*
Dan discusses the importance of knowing not only your audience but also understanding the corporate culture into which you’ll be working and designing.

*Government Work*
Dan points out a constraint to innovation from his experience is that most contracts are very specific with respect to deliverables. The challenge is creating within these set parameters. Dan provides examples of such creativity when designing Wire Frames.


*Transcript*

[musical interlude]

Announcer: Boxes and Arrows is always looking for new thinking from the brightest minds in user experience design. At the IA Summit, we sat down with Dan Brown from EightShapes.

Tom Wailes: Hi, my name is Tom Wailes. I’m User Experience Director for Yahoo! Local and Maps. I’m going to be discussing with Dan Brown a few issues that came up today at the IA Summit.

Dan Brown: That sounds awesome. I look forward to it.

Tom: So a little bit of background. Dan gave a talk today, “Communication Design”. So something to summarize, I guess, his book what I thought about some of the design deliverables that information architects and designers who typically delivered over the years and made some very senseful suggestions for some refinement improvement to that. I gave a talk with a colleague of mine from Yahoo! Kevin Cheng that talked about different kinds of design deliverables, primarily storyboards and prototypes and simulations. So I’m here to talk with Dan about where he sees this to working together or not.

So Dan first, I kind of teased you a little bit in my talk after praising your talk. It was very good, I enjoyed it. But then, noting that you hadn’t already talked at all about prototyping or simulation, storyboarding, things like that which is what my team has been doing a lot of and we’ve been very little wireframing. So your reactions to that.

Dan: I think it strikes me as a very important part of the work that we do as designers. I didn’t sense any sort of disconnect between your story and my story. In a sense, I was speaking to all those people who have to jump on a project after a concept has been approved and funded and need to hash up the details. At the same time my, I guess, philosophy is meant to help people provide a critique of their own documentation and I wonder if there’s an interesting synergy there in looking at the kinds of conceptual documents that you do dividing it into layers as what I suggest.

So very important stuff that’s critical to the document versus the more extraneous stuff and using that as a model for evaluating conceptual documentation as much as design documentation.

Tom: So can you clarify a little bit what you mean by conceptual documentation versus design documentation?

Dan: Sure. What I got out of your talk was there’s this ideation process. There’s this process where we need to spend some time just spending some brain cells to think about what could be or let me get a better understanding what the problem is. We created a set of artifacts to either better articulate what that problem is, help get our heads around it, or, in the case that you were discussing, we’ve got this concept, we’ve got this idea to improve your product or create a new product and we need to sell it to the people who make the decisions and hold the money. That’s certainly what I got out of your talk and it’s something that I’ve had to do a lot in my career.

Why that stuff didn’t make it into the book, I would say is only because I was trying to –there’s a long list of documentation, I’d to cut it off that one of the things that people really do everyday in their jobs. And I was looking at your little video, I’m going, “God, if I could do that everyday, my job satisfaction would go –I mean, I love my job as it is, I’m self-employed, etc., etc.–but my job satisfaction would go through the roof”. So I see the conceptual stuff as sort of trying to sell and capture big ideas about a product or product direction. Whereas the design documentation, elaborating on the details and providing directions to the people who have to implement it.

Tom: So one thing I didn’t really cover today but it’s also part of our process that we’re trying, we’re experimenting and sort of making up as we go along, frankly. But it’s not just using interactive visualizations for the concept, but it’s also for the details that designs are right now, rather than doing wireframe or anything like that, we’re continuing only detail prototypes to help us work out more detailed aspects of the product, and that ends up being our core documentations.

It’s not to say we won’t go on to do some wireframes later but we’re involving the engineers right now in that so that they can start thinking about, “Oh, you wanted an interacting look like that. Let me think about it.” So using those kinds of –documents is kind of a funny word to use.

Dan: Artifacts.

Tom: Artifacts, those are our core artifacts now throughout the process, not just the ideation but as we’re working through the details. So how do you react to that?

Dan: I think that’s an amazing opportunity that you have. I remember you polled people at the beginning and ask them, for example, “Do you have a 20% role in your organization that allows you to just simply trying to innovate for one day a week?” And only a handful of people raised their hands and I think if you ask them, “Could you experiment with the kinds of documentation that you do to try and continue some of these prototyping or conceptual type of stuff throughout the life cycle of a project?” you get a similar number of hands.

I come from a world of government contracting, working with large Fortune 500 companies that are stuck in old school tradition, wireframes are, in a sense, –I know this is maybe shocking– innovation enough for them as far as a new kind of document. They’re used to sort of, I imagine, 1980’s IBM, big binders of functional requirements, the idea that we can translate those into some digital format is radical in and out of itself.

Can we get to a point that we’re all doing that kind of documentation? I would love that, in 10-years time we will be but in 10-years time you, guys, are going to be doing a whole another kind of creating another kind of artifact to capture functional requirements of behaviors and all those kinds of things. Does that answer your question?

Tom: It does, well, I think it does. So are you really saying that there are just core differences in the type of industries and the type of projects that might make it incredibly hard to break away from more traditional documentation like wireframes and flows and requirements, documents and things like that?

Dan: I’m not even in charge of industry thing, I just think it’s a corporate culture thing as far as there are some companies that are just not –one of my clients, for example, is a hospitality company. They’re not a technology company, they’re not geared towards that kind of innovation.

They grew out of this idea of selling hotel rooms to people. So that kind of culture is throughout the organization. They have technology people there, and they are fighting an uphill battle to do the kind of innovation that you are talking about. That hill is culture of 100 years of hospitality industry.

Tom Wailes: Obviously I know nothing about that company and that project, but I can imagine… You talk about hospitality and selling hotel rooms. At least me, from the outside, I can imagine a great opportunity to start with some visualization and prototyping to get across some concepts, particularly since you are talking about selling. I don’t know the details of that.

So what would stop you, what would make it very hard for you to say “You know what? I’m going try something different on this project”. What are the main inhibitors for you?

Dan: Oh, I’m not afraid to try something different. But I think, as designers, we need to be responsible… I’m no Steve Jobs, so I need to be responsible for about just exactly how much I am going to push the envelope.

The kind of conceptual stuff that you are creating is working for you and your organization and your culture and the kinds of products that you are working on. I think that there are opportunities to create those kinds of artifacts and documents in other organizations but maybe not push the envelope so much.

So, if I were to show that to someone who is so used to, in the flip side, seeing certain kinds of documents, it may not speak to them as well. They may be saying “why are you wasting my time with a comic?”

There is no controversy here. I am not trying to say that I don’t think there is a place for those things. I have not been able to cultivate a place for those things in the kinds of clients that I work on.

Tom: OK, I have two comments. The first is, in our environment, people were used to wire frames and requirements documents and things like that. We had been using those but we decided just to experiment with new methods like the comic storyboarding. The reaction actually wasn’t “I don’t understand that or I don’t get that or don’t want that”. It was like “oh my gosh, can you do more of this? I can see much more clearly what the core ideas are. I can be involved in giving my opinions now”. The wireframes and other kinds of documentation are much harder to be involved in. So that would be one comment.

The second comment is we talked about starting small. In what ways could you perhaps start small? I can understand you cannot just turn your client overnight into completely new processes. You have deadlines, budgets, and things like that. But in what ways do you think you could start small in introducing new ways of working?

Dan: There are things we do all the time. That culture may have given rise to a certain kind of wireframe, and I may see opportunities to encourage them to go in a different direction.

They may start with a conventional site map, and I might move them more to a conceptual model that includes things beyond web pages. It encourages them to think about maybe incorporating their users into that picture so they have a better sense of that. So I think there are definitely small opportunities. I believe we take advantage of them as much as possible.

The other constraint I wanted to point out was that, as an outie, as someone who is not inside an organization… I mean, to a certain extent, you serve clients inside your organization. But as a complete outie, my contracts are structured to do something very specific for a particular client.

So, if they hired me to help improve a set of pages or a particular function on their site and I said “OK I’ll do that but let me show you this first” they would really not happy with that because they are paying me to achieve something very particular.

I am working within the constraint of that particular project scope I need to find a way to do that things you are talking about and sell them on big ideas. The book, Communicating Design, talks about using documentation and use it in different contexts and those contexts, as the contexts vary, they will impact the nature of the documentation itself, as well. I don’t know if I answered your question.

Tom: I think you did. I’m still not entirely convinced that you can’t introduce new ways of working in a very small way where maybe you do not take any of the client’s time or maybe you only take a day. We gave some example today. I can show you some stuff later that just took two days to visualize some ideas.

So it might be something that is very lightweight and you are not beating the client of the head with it and saying “oh my god we’ve got to work this way”. It’s just like “yeah we are going to do all the things we are contractually committed to doing but, by the way, why don’t you have a look at this as well”.

Dan: I am not disagreeing with you at all. I completely think there are opportunities to do that, but my primary concern (I may get in trouble by saying this) is less about doing cool work period and more about doing cool work within the constraints that have been handed to me.

So I do want to push that envelope as much as possible but my primary concern, as a consultant, is customer service. Ultimately I can feed the kid by getting hired again. So I will do a little thing. I will show them a different kind of document. I will take their wireframes to the next level or I will show them how they can incorporate all of their flows. Who knows what it is.

I might produce a comic. We have done a couple of projects where we have done comic-like things that incorporated user commentary and very explicit screens or wireframes along with some more technical contexts. Not a comic in the true sense of the word, but something leaning in that direction. Those can be very helpful, especially when clients themselves are struggling with the scope.

That was a long rambling answer to say I agree with you.

Tom: OK, let me challenge you a little bit then. What if I was to put it to you that you would actually do better work and serve your clients better if you did less wireframing or other traditional kinds of documentation, and more prototyping, simulations and storyboarding?

Dan: I think you are right. So ha! So try and challenge that! [laughter]

I agree that there is an opportunity to do more prototyping and stuff like that. It is balancing that with the expectation of what we are going to get and what is going to work inside the organization.

In some cases, we are shielded from the development team entirely. So I am working to support to user experience team, and they are burdened with communicating with the developers. If I am going to ask them to challenge their developers, that is not very responsible on my part.

Tom: OK, thanks very much. So we sort of agree, and disagree, and agree again.

Thank you so much for your time.

Dan: I look forward to our next conversation.

Tom: Me, too.

Content Analysis Heuristics

Written by: Fred Leise

Most website designers are aware that an important part of understanding the background of any website redesign project is performing a content inventory as well as a content analysis.

After all, authorities Lou Rosenfeld and Peter Morville include this famous Venn diagram in their classic Information Architecture for the World Wide Web:

leise.iavenn.jpg

Clearly, we are supposed to understand the current website content before we begin the process of redefining and reorganizing the website.

So we all dutifully go through the website and prepare a content inventory spreadsheet capturing page titles, details of page content, and so on. leise.contentinventory.sample.jpg

Each content inventory contains a different set of columns and fields; each has a purpose specific to the needs of the particular site being analyzed. Sarah Rice has developed another example(xls) that’s available as part of the IAInstitute’s tools project.

Sarah’s version captures additional information from the site, uses an indented format for capturing the page titles at different hierarchical levels and uses color coding to indicate content types, external links and open questions.

So doing a content inventory is all well and good, but what exactly is it about the content that we are supposed to understand? What are we supposed to tell our client, other than that the website has 4,321 pages, of which 358 are dead-ends, 427 have no page titles, 27 have content that has expired, there are 432 different document templates in use, and there are 17 distinct document types?

In her 2002 article on rearchitecting the PeopleSoft website1, Chiara Fox noted that document inventories and analyses form part of bottom-up IA. “It deals with the individual documents and files that make up the site, or in the case of a portal, the individual sub-sites. Bottom-up methods look for the relationships between the different pieces of content, and uses metadata to describe the attributes found. They allow multiple paths to the content to be built.”

Certainly content relationships are important, as is the development of appropriate metadata to describe content, but are there specific things we can look for during a content inventory? In the remainder of this article, I hope to show that the answer is a resounding “Yes.”

Content Analysis Heuristics

In the fall of 2006, I was working on a navigation taxonomy project for a major media industry client that was redesigning its public-facing website. It was while preparing the content analysis report for that client that I developed the following set of 11 heuristics for analyzing website content.

  • Collocation
  • Differentiation
  • Completeness
  • Information scent
  • Bounded horizons
  • Accessibility
  • Multiple access paths
  • Appropriate structure
  • Consistency
  • Audience-relevance
  • Currency

These heuristics provide an important way to organize my report and help me identify significant problems that I might not otherwise notice. They provide qualitative results and indicate general trends, but are not statistically valid in the strict sense.

While you can use heuristics for any kind of website or intranet, regardless of size or content, certain heuristics may be less applicable for some sites. For example, a game site that is designed to encourage users’ exploration may not present bounded horizons. In fact, it would be doing gamers a disservice to let them know the entire game path from the start. So some evaluation is necessary as to whether or not (or how strongly) a specific heuristic should apply to the site you are designing.

Each of these heuristics will be discussed in detail in turn.

Collocation

Bring together items with similar content or items about the same topic in one area.

Users should be able to find all relevant content easily. Accordingly, collect related content in one area, or at the least, make it accessible through one area. While the exact way content is related may differ (e.g., by document type, by subject, by author, by date), the information that users will want to find in one place should be in one place.

Obviously, if the quantity of content is large enough, users may have to visit different subsections to view all of the related content. In that case, the content organization itself should make it easy for users to understand how different areas are related and how. When those areas are viewed together, they will provide a unified picture of the product or subject of interest.

The important point here is to not have “dangling” content that lives in one area perhaps because of historical growth of the website, while most of the related content is accessible in another area.

Differentiation

Place dissimilar items or items about different subject areas in different content areas. Use navigation labels for different areas that clearly indicate those differences.

One of the typical ways that websites break this guideline is in the use of Frequently Asked Questions. FAQs often bring together a wide variety of topics on issues that are important for users. Perhaps website creators think they are making it easier for users to find information when they put everything “important” in one place.

The problem for the user is that their search for specific information becomes like looking for the proverbial needle in a haystack. Unless FAQs use a well-thought-out topical arrangement, users may have to read through every question in a long list to find the particular information they are looking for. How much better it would be to separate this content into meaningful sections!

The World Bank’s website is one example of an organized set of FAQs. They use four main topics and clearly identify secondary subject areas for each. Yet even this example is not totally successful in using a good topical arrangement, as the “Ask the Expert” section contains the usual miscellany of important information without topic differentiation.

leise.worldbankfaq.jpg
“World Bank Website: FAQ Section, February 2007”

Completeness

All content mentioned or linked to should exist.

In this day and age, there is no excuse for the 404 Error, Page Not Found. Nor is there any excuse for the “Under Construction” sign on a page. If the content doesn’t exist, don’t lead the user to where it might be sometime in the future.

If you mention a related topical area, be sure that content is actually on the website. Directing users to non-existent information simply breaks their trust in the website.

Information Scent

Content labels should be appropriately descriptive of content so that users know they are on the proper path to finding the information they are looking for. Content labels should therefore also reflect information collocation and differentiation.

The idea of information scent was first developed by Peter Pirolli, Stuart K. Card, and Mija M. Van Der Wege of the famous Xerox Palo Alto Research Center (PARC). In their paper [2], they note that, “Information scent is provided by the proximal cues perceived by the user that indicate the value, cost of access, and location of distal information content. In the context of foraging for information on the World Wide Web, for example, information scent is often provided by the snippets of text and graphics that surround links to other pages. The proximal cues provided by these snippets give indications of the value, cost, and location of the distal content on the linked page.”

Simply put, a good website will provide users with strong clues as to the content that can be found by clicking on a specific link.

In his Alertbox column of June 30, 2003, Jakob Nielsen says, “ensure that links and category descriptions explicitly describe what users will find at the destination. Faced with several navigation options, it’s best if users can clearly identify the trail to the prey and see that other trails are devoid of anything edible.

“Don’t use made-up words or your own slogans as navigation options, since they don’t have the scent of the sought-after item. Plain language also works best for search engine visibility: searching provides a literal match between the words in the user’s mind and the words on your site.”

BOUNDED HORIZONS

A site’s users should be able to easily understand the breadth of content they are looking at.

While a labyrinthine website that leads users along a single, linear path through groves of rambling information might be appropriate for a conceptual artist’s site, such a principle for organizing content is useless in most cases.

Users should be able to identify in relatively short order the depth and breadth of relevant content.
Providing good navigation cues and a strong hierarchical structure when appropriate means that users quickly learn how long their search for information may take. They can thus make an informed decision whether to continue content exploration on your site or to abandon ship and continue elsewhere.

Accessibility

Users should be able to access the content they want through the browsing hierarchy or by using search.

It may seem obvious, but I have seen sites where search is so poor and navigation hierarchy so limited that it is hit-or-miss whether users can find what they seek. Often, information is hidden by contextual links to content areas not exposed in the main navigation. You are no doubt devoting considerable time and effort to creating content. Let users find it.

Multiple Access Paths

Because users think about content in different ways, they should be able to take multiple paths to get to specific content.

Facets provide one of the important ways to provide multiple paths to content. I’m looking for a blue coat to go with my gray suit. Or I want a wool sweater, because my cotton one won’t cut it in Boulder, Colorado. My wife says it has to be Prada. Size, color, material, designer: each can be the most important way for someone to find an item or some content.

While faceted navigation schemes are often useful for e-commerce sites, they can also be especially useful for information-rich sites. You might provide search filters by document type, date, or author in addition to subject. For scientists, methodology or researcher often become more important than subject in finding relevant research papers.

Multiple access paths provide greater findability for more users.

Appropriate Structure

Organization of content should (1) match users’ mental models of the information space and (2) support the differences in users’ information-seeking behaviors: known-item finding; exploratory browsing; unknown information finding; and refinding.

Whether you have multiple access paths or a single hierarchy, the organization and structure of your site should be appropriate to both the nature of the content and to your users.
As with many of these heuristics, there is no single “best” approach. Rather, based on your knowledge of business context, users, and content, determine whether content access structures are valid for the specific context.

Consistency

Whenever possible, content structures in similar content areas should be consistent.

If all of your products have accessories, they should be accessible through similar links or tabs or icons. Consistency enables users to more quickly build a mental model of your site and to understand how to find information.

Think of the rather complex page structure on Amazon.com for a book:

  • Cover illustration
  • Title
  • Author
  • List price
  • Savings
  • Availability
  • Delivery information
  • New/used copies
  • Customers also bought
  • Editorial reviews
  • Product details
  • What customers ultimately buy
  • Help others find this book
  • Customer tags
  • Customer reviews
  • Customer discussion
  • Listmania
  • Recently viewed items
  • Similar items by category
  • Similar items by subject

Who in their right mind would create such a structure? Obviously people who did lots of research on their users. Why does this structure work? Because once we have seen it, we know that we will see it again and again and again. Power users of Amazon.com probably know exactly how many turns of their mouse’s scroll wheel it takes to the to the information they want.

This book product page may be long and complex, but it is consistent in structure and format. We know what to expect. A good website provides users with a consistent experience.

Audience-Relevance

Content organization allows different audience segments to easily find relevant content.

This heuristic is especially important if your site’s audience comprises multiple distinct segments, holiday travelers and business travelers, or students and faculty. In some cases, it might be appropriate to use audience segment as the primary way to organize information.

Additionally, audience relevance may be legally mandated. Drug websites, for instance, are governed by FDA regulations dictating that prescribing information should be available only to health-care professionals, not the general public.

However, even with a relatively unitary audience, you want to be sure that the site’s labeling system is appropriate for its users. It is also important that the site mirror how users think about the site’s content.

Currency

Content should be kept up to date.

Nothing frustrates a user more than finding that the information you provide is out of date: you don’t make that product any more, that color is out of stock, or that drug is no longer indicated for that condition.

Put an expiration date on all content through your CMS, thus ensuring that it is reviewed for currency on a regular basis. That is a good way to ensure that you website provides users with information that is still valid.

Another way to ensure currency is to have a good website maintenance plan in place. Such a plan should cover, among other things: who is responsible for content reviews, extraordinary internal and external events that should automatically trigger a content review, and how users or content authors can suggest a review.

Conclusion

Although the above eleven heuristics provide good qualitative information, you may find it helpful to add a five-point scale (derived from the Lickert Scale), indicating how well the site under analysis conforms to the heuristic:
1. Strongly deviates from the heuristic
2. Deviates from the heuristic
3. Neither deviates nor conforms to the heuristic
4. Conforms to the heuristic
5. Strongly conforms to the heuristic

Providing such a scale may help the client understand the results of your content analysis better than a purely descriptive report.

Whether you use a numerical scale in discussing the results or not, provide your client with a written content analysis heuristics report. You can offer the analysis as part of your content inventory or content analysis report, or you can create a separate document entirely. The report should include sections describing your evaluation of the website using each of the heuristics (if applicable). In discussing each heuristic, indicate how well the site meets the heuristic in general and then note instances for improvement, or places where the site does not conform to the heuristic at all.

The following are several sections from an actual content analysis report that used these heuristics (modified to mask the company’s identity).

Although [company].com is relatively good at gathering like content into one area, there a number of exceptions. For example, information on money and vacations is available as a content sub-area under both the Money and the Vacations topical areas. However, the content is different in each place. In essence, there are two separate areas dealing with the same subject of money and vacations.

The most significant problem area with regards to collocation is the Specials section, which offers much content that would be best distributed among and combined with other areas of the site.

The [company].com Specials section is the primary place where the principle of differentiation is not observed. It combines subject areas such as health, relationships and travel, along with a number of the company’s special projects. Because this content area contains such disparate information, users may not always spend enough time looking through it to find relevant information.

Because labels on the website often reflect a supportive and encouraging emotive vocabulary, those labels sometimes obscure important information. For example, it is doubtful that a user looking at “Tips for Living” would realize that there is information on home decoration and time management in that section.

[Company].com generally supports exploratory browsing and unknown information finding. However, shortcomings in the search results (a limit of only 21 results) sometimes make it difficult for users to find specific information.

[Company].com is not always good at providing access to audience-relevant information. For example teachers may be totally unaware of the fact that there are classroom videos and teaching aids available in the Library section.

By arming the client with such information, you give them more well-structured ideas about how to improve their website. And that, after all, is the goal of our work.

Endnotes
[1] Fox, Chiara, “Re-architecting PeopleSoft.com from the bottom-up”:http://www.boxesandarrows.com/view/re_architecting_peoplesoft_com_from_the_bottom_up in Boxesandarrows.com, June 16, 2002.
[2] Pirolli, Peter, Stuart K. Card and Mija M. Van Der Wege, “The Effect of Information Scent on Searching Information Visualizations of Large Tree Structures”:http://www.inxight.com/pdfs/info_scent.pdf.
[3] Nielsen, Jakob, “Information Foraging: Why Google Makes People Leave Your Site Faster”:http://www.useit.com/alertbox/20030630.html.

Real Wireframes Get Real Results

Written by: Steve Turbek
“Just because project teams understand the purpose of wireframes, that doesn’t mean everyone will. Similar to listening to someone sing out loud to his iPod: we only hear the singing, while the person hears the whole orchestra.”

How many times have you been asked, “So, is the new website going to be black and white too?” after presenting your wireframes to a client or a usability test subject?

This question is almost a traditional part of being an information architect. Wireframes do not clearly define what they mean to convey, leading to confusion. This is most apparent in wireframe usability tests with users who don’t know anything about the project or process. Fortunately, there are a few simple steps that will make wireframes be understood by anyone. They don’t even have to be much more work. It’s simply a matter of choosing to “get real” from the start.

Real people don’t understand wireframes
Usability tests are done to get early feedback on content and functionality decisions from people outside the project team. These participants, unfortunately, are not sure how to respond to a wireframe. It is not intuitively clear what they should be doing, which site they are looking at (public site, intranet, client site)—it may not even be clear that they are looking at a web page. This lack of information and context adds a bit of cognitive friction to each step in the process. This level of confusion results in less confident answers and fewer opinions.

Wireframe tests usually take place with well-meaning, but unsophisticated users. They generously accede to poking and prodding and answer questions as best they can, despite not exactly understanding what is wanted. This realism gap is due to the lack of definition of what should and should not be looked at. “Look at the field names but not body copy.” “You can look at the forms but not images.” “Comment on the page layout but not design, and, yes, the font size but not font.” It’s no wonder that the layperson is confused.

Visual affordances, such as color and underlining links are key to using a site, and these cues make a significant difference in a usability test. Users cannot confidently predict how they would use a page if they don’t recognize links or can’t read what the page expects them to. Information architects, however, tend to shy away from these cues because they don’t want to step on designers’ toes. Wireframes, after all, are not designs.

Or are they?

Avoiding “design” elements removes visual cues that users rely on:

* Color, which identifies hyperlinks and focuses the user’s attention on an element of the page
* Branding, which confirms that the user knows where they are
* Recognizable web page elements, such as forms and search fields
* “Content,” such as account numbers or product names, which allows experienced users to focus on how they would really use the page, instead of interpreting “lorem ipsum”

The boundaries of the role of the information architect shouldn’t be more important than clarity.

Originally the term “wireframe” referred to a quickly rendered 3D model showing the model’s structure used while the model maker was working. They were much faster to work with than the full rendering. Interestingly, they are not currently used as modern tools and techniques are fast enough.

Why wireframes?
Information architects construct wireframes instead of designing final pages, in part, because:

# Wireframes are faster.
# Information architecture and design phases can happen in parallel.
# Wireframes force viewers to focus on the content, not the visual design.

Notice anything? All these goals are internally focused on the project-team. Wireframes aren’t created for external audiences.

wireframewireframe

Figures 1,2: Originally the term “wireframe” referred to a quickly rendered 3D model showing the model’s structure used while the model maker was working. They were much faster to work with than the full rendering. Interestingly, they are not currently used as modern tools and techniques are fast enough.

Wireframes are conceptual models of a page that web design teams have become to interpreting. Each wireframe is surrounded by experience in reading them, knowledge about the project scope, knowledge about how the designer will use the document. Liz Danzico writes about this wireframes becoming project memory in the article “The Devil’s in the Wireframes.”

Just because project teams understand the purpose of wireframes, that doesn’t mean everyone will. Similar to listening to someone sing out loud to his iPod: we only hear the singing, while the person hears the whole orchestra. Likewise, the test subject knows only that “the page isn’t going to look like what they see,” but what they see is all they have to react to.

Wireframe makeover
Here is an example of the simple steps to transform a standard wireframe into a realistic wireframe. In this example, let’s say we are designing a registration process for Verizon.com (no special criticism is intended for the site below).

The site we are designing for Verizon.com:

wireframe

Here is a standard wireframe:

wireframe

And here is the same wireframe, made more real. (An additional 10 minutes was required to use the standard header and a library of realistic form elements in Visio or InDesign.)

wireframe

And here is a version re-using Verizon’s standard buttons and clip art. (Additional time: two minutes.)

wireframe

Which do you think would be easier for test subjects to understand?

Tips to get real
These tips are best for intranets or sites with defined styleguides, and less useful for graphical or marketing pages where the design is the content of the page.

# Make a header bar with the company branding. It should look like the site they are used to, showing the company logo.
# Use color. Hyperlink color is a basic requirement.
# Put a web browser frame around the image (or at least the first page).
# Use real form elements, not drawn replicas of them.
# Create a template or library of real form elements (feel free to share yours in the comments below).
# Avoid lorem ipsum. Instead, use: “Descriptive text that will explain this product.” to avoid confusion about greeked text.
# Use accurately sized fonts (this also keeps you honest about what can fit on the page).
# Use real detail such as products names and data. Especially on transactional tools with expert users, users care about what they are reading and recognize and use data like account numbers. It may not be important to us, but they have expectations that need to be met.

Compare the wireframe to the current site, note any changes in functionality that may trip them up.

The page doesn’t have to be perfect, just enough to give the test subject their bearings. A semi-designed page is easier to understand than a non-designed page. This is not wasted work; these decisions need to be figured out at some point. Consider bringing designers into the process earlier, cooperating on file formats and processes. It might even make their jobs easier.

Are traditional roles limiting projects?
Wireframes are in fact the first design iteration, and this overlap with visual design can be uncomfortable for teams. However, denial is not the way to fix this issue. Good collaborative relationships should make this overlap an opportunity to reduce work, not fight over ownership. Concern that wireframe might be mistaken for a visual design, or worse, be criticized for lacking design, may be holding the entire project back. It is much easier to communicate within the project team than the outside audience.

Consider these and other ways to make the transition as smooth as possible, for example, by having the wireframe be designed to import into the designer tool without retyping all the text.