How to Make a Concept Model

IMG_0048

I can draw.

I went to art school. I studied painting until I fell out with the abstract expressionists and switched to photography. But I can draw.

What I cannot do is diagram. I always wanted to. I have models in my head all the time of how things work. But when it comes time to make a visual model of those ideas, I can’t figure out to to represent them. I find myself resorting to pre-existing models like four-squares or the Sierpinski triangle (I dig fractals.) For example:

Social-Architecture-Diagram

Other than the oh-god-my-eyes color choices, my social architecture diagram has deeper problems. For example, the ideas in it are limited to threes within threes because that’s the form triangles take. The model served to communicate my ideas well enough for the sake of my workshop, but… shouldn’t form FOLLOW meaning? If I had more than four elements for any section, I’d have to either collapse two, or fudge it in some other way. I was sacrificing accuracy for consistency. But I didn’t know how to make to make it better.

A concept model is a visual representation of a set of ideas that clarifies the concept for both the thinker and the audience. It is a useful and powerful tool for user experience designers but also for business, engineering, and marketing… basically anyone who needs to communicate complexity. Which is most of us, these days.

The best known concept model in the user experience profession is probably Jesse James Garrett’s “Elements of User Experience.” The best known in start-up circles is the lean startup process. Both of these models encapsulate the ideas they hold in such a memorable way that they launched movements.

Elements-User-Experience-Lean-Startup

If you wish to clearly present a set of ideas to an audience and represent how they fit together, a diagram is much more powerful than words alone. Dan Roam points this out in his latest book, Blah Blah Blah:

“The more we draw, the more our ideas become visible, and as they become visible they become clear, and as they become clear they become easier to discuss—which in the virtuous cycle of visual thinking prompts us to discuss even more.”

Concept models can serve many purposes. You can use concept models to show your teammates how a complex website is organized before the site is built…

Andrew Hinton’s model of a “virtual shared organizational ‘building’ where people spread all over the country were collaborating to run and participate in the org”.
Andrew Hinton’s model of a “virtual shared organizational ‘building’ where people spread all over the country were collaborating to run and participate in the org.”

… or to help teammates understand how the site currently works…

Bryce Glass’s concept model of Flickr use.
Bryce Glass’s concept model of Flickr use.

… or to show end users how a service works, to help sell it.

    Biblios uses a concept model to help users understand the power of social cataloging. What it lacks in elegance, it makes up in clarity.
Biblios uses a concept model to help users understand the power of social cataloging. What it lacks in elegance, it makes up in clarity.

I teach user experience design, and my syllabus always includes concept models. Students of mine who do a concept model before working on the interaction design and information architecture always make better and more coherent products. The act of ordering information forces them to think through how all the disparate elements of a product fit together.

Stephen’s handout from the workshop on representing types of visual relationships. Advanced and useful thinking.
Stephen’s handout from the workshop on representing types of visual relationships–advanced and useful thinking.

You can imagine how excited I was to take the Design for Understanding workshop at the 2014 IA Summit. Partly because I will go see anything Karl Fast or Stephen P Anderson talk about and having them together is Christmas come early. But mostly in hopes of learning a way to make a good concept model.

The workshop was brain-candy and eye-opening: They covered how the brain processes information and how ways of interacting with information can promote understanding. BUT I still couldn’t make a model to save my life. I didn’t know where to begin!

At lunch, Stephen was manning the room while Karl grabbed food for them. I had been struggling with a model for negotiation I wanted for a talk I was presenting later in the program. Seeing Stephen idle, I pounced and begged for help.

Stephan P. Anderson is author of Seductive Interfaces and the upcoming Design for Understanding. He’s also a patient soul who will put up with ham-handed diagramming and ridiculous requests. He started to sketch my model and tell me what he was thinking as he drew. Then I had my bingo moment: Stephen had forgotten what it was like not to know how to begin! This happens to all experts. After a while some knowledge is so deeply embedded in their psyche they forgot what it was like not to know. They then teach the nuances rather than the fundamentals.

I suggested we do a think aloud protocol while he made a concept diagram; he would draw, and I’d prompt him to talk about what was going through his mind. He was excited to have me reflect his thinking back to him so he could become a better teacher as well. We arranged to have a sketching session after the workshop.

 

    Stephen Anderson draws; I do a think aloud protocol to capture how he works.
Stephen Anderson draws; I do a think aloud protocol to capture how he works.

Later in the day, we met in the quiet hotel bar with wine and a sketchbook. I asked him what he wanted to draw. “Do you have something you are working on?” he asked. “That way I can focus on the model, rather than rethinking the ideas.”

Did I have a model I was struggling with? Always!  I shared my new theory of the nature of digital products. I’ll be writing that up in another article when it’s done, but for now, the short version is that one must iterate through the elements of digital design, which include the framework, interactions, information structure, and aesthetics. But a product doesn’t become an experience until a person interacts with it; your design cannot be known until you see what happens when a human shows up.

Stephen’s first step was to ask me about my goal for the model. I said it was for students and young practitioners to understand the interdependencies of the elements, so they have a more iterative approach. And for critics to be able to understand why things are different, both good and bad.

Next, he did what I’d call a idea inventory. He brainstormed more elements that might play into the model. He made sure no ideas were left out. He made notes of those he suspected might be important in the margins. He sketched as he thought, sometimes just making meaningless marks, as if warming up his hands.

He then carefully asked about each element in my theory, making sure he understood each. What was an information structure and what was a framework and were they different? I ended up telling a little story about a product to make sure he got what I was explaining. I began to draw too, encouraged by his easy scribbles.

Finally, Stephen noted the relationships of the items to each other. Were some things subsets of others? Were some overlapping, or resulting?

Playing with relationships (my drawing).
Playing with relationships (my drawing).

Once he knew what each item was, and how they were related to each other, he began to sketch in earnest. He said, “I always start with circles because edges mean something. They mean you have four items, or five. Circles leave room for play.” His circles quickly became blobs and then shapes.

I don’t know if he’d normally talk to himself out loud when not encouraged to do so, but it was fascinating to to hear him free associate concepts, then draw them out. A string of concepts became a string of beads; moving through an experience became moving through a tunnel; intertwined ideas were a braid. Any important idea got a drawing.

Here Stephen tries on various relationship metaphors, including moving through tunnels, holding something, string of ideas, braided together concepts.
Here, Stephen tries on various relationship metaphors, including moving through tunnels, holding something, string of ideas, and braided-together concepts.

Each time he completed a mini-model, he’d evaluate what was missing and what was working and take that insight to the next drawing. He made dozens of these little thumbnail drawings.

Stephen said, “one shape leads to another…a single word sparks a new representation—we’re always ‘pivoting’ from one thumbnail to the next…”

He pointed out what concepts were left out, or where they could be misinterpreted.

“You want to avoid 3-d, because it’s fraught with problems. You want to be able to sketch it on a napkin.” —Stephen Anderson, on keeping in mind the model’s goal

At one point, he became tapped out, and we spoke of other things. We stared out the window at the harbor, and I drank some of my wine, forgotten in the excitement of drawing and talking.

Then suddenly he started in again and produced a flurry of new drawings. I realized resting and mulling was important too. I was a bit annoyed with myself. An article doesn’t come out perfect in one writing session. Why should I expect a concept model to just materialize?

Finally he came to a stop, several pages filled with a jumble of images. We didn’t have a model, but we had many good directions. As we finished our drinks and headed toward the opening reception, Stephen told me, “You gotta get Dan Brown to do this, too.”

section-break

Dan M. Brown is best known in the user experience design community as author of Communicating Design and Designing Together. Both books benefit greatly by clear and succinct conceptual models, and the former even talks about how to use them in the design process:

Purpose—What are concept models for?
There really is only one reason to create a concept model: to understand the different kinds of information that the site needs to display. This structure can drive requirements for the page designs, helping you to determine how to link templates to each other. With the structure ironed out, you might also use the model to help scope your project—determining what parts of the site to build when.

Audience—Who uses them?
Use concept models for yourself. Ultimately, they are the most selfish, introspective, and self-indulgent artifact, a means for facilitating your own creative process.”

–Communicating Design: Developing Web Site Documentation for Design and Planning 2nd Edition, Dan Brown, 2010

Clearly, a guy I should be talking to!

The IA Summit was held in sunny San Diego in a hotel with not one but two swimming pools, so Dan had brought his family with him. When I asked him if I could watch him draw a concept model, he said, “I’m at the coffee shop with the boys around 6:30 every morning.”

You take what you can get.

The next morning Dan settled the boys in a corner with books, pastries, and an emergency iPad, and we got to work. We agreed he’d model the same concept, to control for variations. By now I had created a formula for the idea: (F+In+Is+Ae)+P=E. Framework, interactions, information structure, and aesthetics plus a person makes an experience. I was modeling in words as my friends were modeling in pictures.

I took Dan through the same story of an iterative product design process, since it had helped Stephen. I sketched it out. I felt like my hands were waking up from a long sleep, and they were eager to hold a pen now.

As I spoke, Dan wrote down key ideas and also began to scribble. He used the same process as Stephen: collecting the concepts then inspecting them for hidden complexity.

“A question I ask myself is ‘what needs unpacking?’ I can’t diagram an idea until it’s clear in my own brain.” —Dan Brown

He then took each concept and free associated all the sub-elements of the concept. He drew them out loosely, mind-map style.

Dan also started with the goal and wrote it out across the page.

Dan-Brown-Goal

He also asked explicitly who the model was for. To draw, he needed to visualize the audience. This reminded me of a recent presentation workshop at Duarte where we literally drew pictures of our audience. No work can be good unless you know who it’s for.

Duarte has you draw your audience before you design your presentation, so you remember who you are presenting to and how much attention they are (or aren’t) giving you.
Duarte has you draw your audience before you design your presentation, so you remember who you are presenting to and how much attention they are (or aren’t) giving you.

Dan made sure he didn’t carry anything in his head: All ideas were put on paper as a note or a sketch. When he had to turn a page, he ripped it out to lay it next to the other pages. I realized how critical it was to have plenty of room to see everything at once. I saw the same technique of storytelling and drawing of ideas.

Around now, Stephen joined us. He was excited to see what Dan came up with, enough to also climb out of bed at the crack of dawn. I listened as the two diagrammers discussed the poster session and the strengths and weaknesses of the ideas that had been presented.

Dan said, “You can look at people’s posters and see their process. They are so close to their own narrative…In one poster, the key framework was rendered in a very pale text. It was a good story, but there are things you want to jump off the page. For her, my guess is those steps were so self-evident she didn’t see need to highlight them.”

 You have to have a beginner’s mind to explain to beginners.

“Speaking of beginner’s mind, so much of my design process is to throw it all out start all over again.” —Dan Brown

Dan Brown draws it all.
Dan Brown draws it all.

Now Dan began to model the concept. He emphasized the importance of sticking with very simple geometry–circles, squares, triangles, lines–not fussing with trying to find a perfect model at the beginning, just exploring the ideas and their relationships.

He also mentioned he begins with any concept in the model and doesn’t worry about representing order at first. He starts with what catches his interest to get familiar with the ideas.

Dan then deviated from Stephen by seeking the focal point. What concept held all the others together? What was the most important or key idea? He tried out placing one idea, then the other, in the center to see if felt right.

After scrapping one bowtie model, he paused. “I sometimes retreat into common structures and see how these common structures might speak to me. For example, time is one of those fundamental aspects, so I ask myself: How much do I need to show time here?”

He demonstrated by drawing swimlanes and sketched the ideas and their relationships in time.

Swim lanes for moving across the elements.
Swimlanes for moving across the elements.

“Are there other elements you often look for, like time?” I asked

“People,” he replied. “People and time are familiar concepts, easy for an audience to relate to. By using them as a foundation for a model, I’ve already made it easier for people to ‘get on board.'”

He stared at the paper, deep in thought.

Stephen then pointed at the page. “What Dan did here,” he said, poking at where Dan wrote out goal and audience, “I did also but didn’t externalize. I was holding it in my memory, but I like having it on the paper better.”

Eventually Dan, too, was tapped out, and his sons began to play Let It Go on the iPad at higher and higher volumes. He separated his sons from the electronics and left to prepare for the swimming pool.

 

section-break

After Dan, I knew I wanted to try to get one more person to model. Since I was lucky enough to be at a conference full of diagrammers, I chased Joe Elmendorf of The Understanding Group. He had just given a talk on Modeling for Clarity that my friends were raving about. And, with my luck still holding, I got to have breakfast with him. Happily, at 8 am this time.

Joe Elmendorf brings pace layers into the discussion. My handwriting is the ballpoint; his, the nice black ink pen.
Joe Elmendorf brings pace layers into the discussion. My handwriting is the ballpoint; his, the nice black ink pen.

Again, I saw what were becoming familiar concepts (inventory, inspection, relationships, then talk-draw.) I then focused on how he differed from Stephen and Dan. He choose to use the title of the diagram as an element. He did not iterate as widely as Stephen. He was the first person to argue with me about the validity of my theory, which was a great way to understand it (and benefited me by making it better!).

As well, he reinforced something Stephen had mentioned in his workshop and that Dan was obviously doing: Joe had a large mental library of typical models to draw upon, which got him started. Stephen keeps a Pinterest board full of inspiration, if you want to start your own “lego box” of models.

Stephen’s Board http://www.pinterest.com/stephenpa/the-visual-display-of-information/
Stephen’s Pinterest board: http://www.pinterest.com/stephenpa/the-visual-display-of-information/

Overall, there were so many familiar patterns I saw in his approach, the differences were more interesting than important. I had my answer. I knew how they did it.

section-break

On the last day of the conference in the afternoon, Stephen and I were scribbling further on the model, playing with petals for the elements, when Dan Willis joined us. Dan is also a master of models as well as an inveterate sketcher.

Stephen further refining ideas, always generating.
Stephen further refining ideas, always generating.

Although Dan declined to diagram for me, claiming brain fatigue (a reasonable claim at this year’s Summit) he pulled up a chair and sat sketching next to us. It was companionable, to sit and talk and draw ideas. We moved back and forth from discussing life to discussing the ideas, teasing, joking, drawing. As we chatted, I realized this was a part of the secret. You need a thinking partner. Sometimes it’s paper, sometimes it’s friends; but it’s best when it’s both. It doesn’t always matter what you draw, just that you draw.

Dan Willis drawing nearby makes me happy.

Dan Willis sketch from a tweet
A Dan Willis sketch from a tweet that day.

Our brains work better when our hands are busy.

section-break

Later, sitting in the back of a session, I lobbed a model at Stephen, and he shot back with his own.

Refining an idea, mine on left, Stephen’s on right.
Refining an idea; mine on left, Stephen’s on right.

Then I saw another step, one which Dan had alluded to when he mentioned the poster with the key point too pale to read: You have to refine the model to communicate effectively. Type, color, and labels are all a key part of the communication process. While the model did stand alone without the color and type, adding those–and most especially getting labels right–made the model more effective.

section-break

DaveGrayAfter getting home, I started sketching how concept models were made. I drafted this article and then asked my friend Dave Gray if he’d do a quick edit. Dave was the founder of Xplane, a company that used diagrams–concept and other–to transform companies. Dave has been a proponent of visual thinking and clear modeling for years, and I consider him the master of making ideas visible.

Life then intervened and this article sat. I was busy with several things, including Lou Rosenfeld’s 32 Awesome Practical UX Tips. Dave presented right before me, and watching him sketch, I realized I just had to get one more diagramming session in. It was not enough to have him comment, I needed to see him draw. I was grateful I did; otherwise, I would have missed a crucial piece of the puzzle.

Dave Gray draws on cards so he can rearrange, manipulate, and overlay the concepts.
Dave Gray draws on cards so he can rearrange, manipulate, and overlay the concepts.

We hopped on a Google Hangout and he also drew out that same darn design model for me. I saw familiar patterns in his approach: inventory, unpack, relationship exploration. But he added a critical step I hadn’t thought of before: Test the model.

He’s currently writing a book on Agile, and it shows. He said, first design the test, then design the thing. For the model, he suggested using his WhoDo Gamestorming tool as a way to design a test of the effectiveness of the model. He lists who the model is for and what they will do if they understand the model.

If Dave didn’t fully understand the audience for the model, he might do an empathy map for those people.
If Dave didn’t fully understand the audience for the model, he might do an empathy map for those people.

Designing a test of the model’s success radically clarified the goals for the model. Testing it would make sure it did what you wanted it to do.

section-break

So then I sat down to make a model of how to make models. And it came easily.

  • Determine the goal: How will the model be used, by whom? What is the job of the model? To change minds, explain a concept, simplify complexity?

  • Inventory the concepts: Brainstorm many parts of your concept. Keep adding more in the margins as you go.

  • Inspect the concepts: Are there many concepts hiding in one? Do you really understand each idea?

  • Determine the relationships: How do the concepts interact?

  • Decision point: Do I understand the ideas and what I’m trying to communicate? 
    Test: Ask yourself if the model “feels” right.
    If yes, then continue.

  • Iterate with words and pictures: Talk to yourself and draw it out!

  • Evaluate with yourself/the client: Keep making sure the drawings match the ideas you wish to communicate. Don’t punk out early! Rest if you need to!

  • Decision point: Does my audience understand the ideas and what I’m trying to communicate? 
    Test: Can my audience answer key questions with the model? 
    If yes, then continue.

  • Refine: Use color, type, line weight, and labels to make sure you are communicating clearly.

A model for making models.
A model for making models. It may not be beautiful, but it’s clear.

The concept model is invaluable. But like so many useful things, it takes time to make.

When my daughter first started drawing My Little Pony, she expected to start at the ears and draw it perfectly down to the hooves. She was angry when it didn’t work that way, and it took some convincing to get her to block out key shapes then refine the whole, and to use pencil before ink. When I sat down to make a concept model, I made the same mistake! I’d start in Powerpoint or Grafio, and expect perfection to flow from my mind.

No more! Stephen, Dan, Joe, and Dave taught me to play, explore, refine, test, and play some more until the result was right. Thank you all!

Now go make a model!

section-break

Postscript

If your hands do not obey your brain, and/or you need more ideas for shapes and relationship models, I recommend Dave Gray’s Visual Thinking School.

See my interview with Dave on how he’d make the experience model

Mythic Design

When I agreed to teach a twelve-week course on user experience design, I did what anyone of us would do: I went to find something to copy. I trolled the articles and syllabi I could find online, and I was horrified. Sometime in the years between Jesse James Garrett’s lovely diagram and his incendiary demand that a room full of information architects, content strategists, and interaction designers rebrand themselves as user experience designers, user experience design had grown small. Jesse’s diagram starts with strategy and finishes with skin. His elements of user experience include deciding what to build, and how it looks. Yet the user experience designers I found were the wireframe people.

The wireframe people are designers who don’t design. They don’t make mental models, or do card sorts, or task analysis. They don’t write specs, and they certainly don’t do graphic design! They carefully do a collection of wireframes they then hand to “the designer” who hands it to the engineer. And the engineer, if he’s lucky, has a product manager who did all the interaction design work in the specs. And if he’s less lucky, he does it himself. No wonder many engineers view everyone except the graphic designer as essentially useless. Too often, they are. The wireframes people often call themselves user experience designers.

And forget stealing syllabi! Everywhere I looked classes taught Omnigraffle and touted the wonders of wireframes. No wonder the world was filling up with wireframe people.

So, to paraphrase the Grinch–who I was feeling like–“If I can’t find a user experience designer, I’ll make one instead!” I had a template in my mind of what I thought a user experience designer should look like. I had seen a new generation of designer I liked and hired every time I could.

They were medium-agnostic, code-fluent, and user-centered. They didn’t draw hard boundaries between information architecture and interaction design, and they flowed easily from task analysis into interface. When they did make wireframes, it was on whiteboards in conversations with engineers or as sketches in notebooks to clear their heads. I think of them as Mythic Designers because they would have been called unicorns by the specialists.

But even if these designers are rare, they do exist, just as family practice doctors still do in a world of cardiovascular surgeons and neurologists. These generalists do everything pretty darn well. They make good sites. They might not be the best people to call on if you had to build a Photoshop or a New York Times; complex interaction or massive content stores deserve the special skills of interaction design and information architecture. But if you are a startup, and you can hire one person, you want a real user experience designer. Just as when you don’t feel very good, you just want a doctor who can help.

But I was naive. You can’t make someone capable of designing a user’s experience in twelve weeks. I almost killed my poor students as I pressed five hours of lecture on interaction design into two, pounding them with conceptual models and use cases, activity-object models and task analysis. I knew I was teaching a foundations class and I would do nothing justice, but I kept trying. They wanted to learn Omnigraffle, I said no. They wanted to do wireframes, I told them wait. A student said, “I have never gone this long without designing anything,” and I despaired. They had designed task flows, use cases, site maps, conceptual models, and the basic social structure of their projects; and they thought they had designed nothing?

And then she said, “I’m so glad. We never get time to get our heads around our projects.”

And I got hope. I relented. My TA is going to run a workshop on Omni. I’ll teach them the fundamentals of interface design next week, in the guise of wireframes. Perhaps I’ll even start teaching them one way of doing something instead of three.

It has made me think that maybe the wireframe people wanted to do good design. And maybe they were given so little time to work, it was all they could do to choose between a multiple select list and radio buttons. And maybe they just needed to be taught some thinking tools and classic techniques. Perhaps what they really needed to be taught was to have faith in themselves, so they would demand the time it takes to make something worth making.

Ten years ago, they’d have been called web designers. In a sane world, we would have called them product designers. They chose their own name, user experience designers. And we old farts who have been designing forever need to help them, so they all can be called Mythic.

Not Dead Yet

When Boxes and Arrows was founded a little over ten years ago, there was nothing quite like it online. There were peer-reviewed journals, and basic how-to articles. A List Apart was much more concerned with the CSS behind the interface back then, and UX Matters, Johnny Holland and Smashing Magazine were not even a twinkle in their creators’ eyes. So a bunch of scrappy volunteers gathered together and pushed to get the stories we wanted to read online. We were struggling to figure things out in our day jobs, and we created a place where we could learn from each other. Boxes and Arrows did much better than we could ever have imagined, surviving transitions over four chief editors, thirty-nine editors, and today it holds four-hundred-and-forty-one articles written by three-hundred-and-nine members of the community at large.

But it was always a volunteer organization. It lost money for the first five years of its life, and for the next five barely paid for hosting and conference coverage. This allowed us to podcast the IA Summit for the first time, and paid to have those podcasts transcribed. Jesse James Garrett’s incendiary talk on User Experience is captured because of the passion of those volunteers, and the kind sponsors who made it possible. Our history is written because of the amazing volunteers of Boxes and Arrows. Wireframes were defined and debunked here, Design Patterns explained and complained about, career advice given out and career transitions documented. Boxes and Arrows was the best of us, and we like to think it inspired our many peers who now make it so easy to share inspiration and knowledge.

But as often happens with volunteer efforts, the volunteers’ lives changed. Some people left the field, some people took on jobs that required long hours, and some people made babies. Some people did all three. The people who used to have spare time, didn’t.  They didn’t even have time to notice what was happening. And through spam and neglect, the magazine started to wither. And the torch didn’t get passed. And lacking oxygen, it started to flicker. And now, some say, the light is gone.

But rather than dead, let’s say it is sleeping. Boxes and Arrows is old for an online magazine, and with age comes some advantages. One is SEO: with no new article published, it still gets 5-7K pageviews a day. A bad day for Boxes and Arrows is ten times most blogs’ best day. Which means Boxes and Arrows is still a site with reach. It means it is still a place where a voice, having something important to say, can be amplified. That voice could be yours.

And so, facing retirement or resurrection, we’d like to ask you, reader, what should be the fate of Boxes and Arrows? Is there a new generation of designers out there who wants to take the power of this magazine’s reach and use it to talk about the next generation of user experience design? Will you define it? Will you defend it? Will you debunk it?

If you would like to take over Boxes and Arrows, speak up. We have moved it to a new platform. We have reached out to new writers. We have breathed a little oxygen on to that torch, and the flame begins to catch. We’d like to pass it to you.

If you would like to to volunteer to create the next Boxes and Arrows, please leave a note below. Say what you would like to do, and this magazine is yours.

Again.

As it always was.

As it should be.

Addendum: So grateful for the outpouring of support!  Please join this mailing list where the next generation of B&A begins to plan for the future…

 

Flow, Mastery and Ease-of-Use

Recently the web design community has been eating up the secrets of game design. The Gamification trend merely borrowed simple game mechanics, from badges to progress bars. But now designers are looking more closely at core game design principles like design for flow and mastery, blending them with our old friend, ease of use. But how many of these techniques are relevant for more everyday sites, like ecommerce and productivity apps?

Flow is a concept popularized by Mihály Csíkszentmihályi. It describes the ineffable state between boredom and excessive difficulty in which time disappears and you are pleasurably lost the execution of a task. In the game design community, it’s a well understood and desirable state that most designers strive to create.

Because this state is so desirable, both for productivity and for pleasure, many application (web and mobile) designers are starting to try to design for it as well. This is a daunting task. First, all humans are different. This means in identical situations I hit flow at a very different moment in the ease-to-difficulty continuum than you do. Secondly, flow is extremely easily to disrupt. Have you ever been in the middle of writing where words are finally flowing out, then been interrupted by a cat/child/roommate/coworker jumping into your lap? Did you lose the precious thread? Then you know exactly what I mean, as does the cat/child/roommate/coworker who got the brunt of your wrath. Thirdly (and perhaps most importantly) the application designer has far less control than game designers over challenge and skill, the two key levers in creating flow.

A more straightforward goal is to create the conditions for flow and to design to minimize interruptions. Designing for ease-of-use may be more than difficult enough, and designing for flow an unnecessary extra struggle. Just because something is wonderful doesn’t mean everything should have more of it (e.g. think of salt). For applications where users spend a lot of time in the app, designing for mastery is the better design goal.

Appropriateness of Flow

Consider your application. Is it used daily? Hourly? monthly? When it is used, how long does a session last? Flow can only be achieved in situations where mastery of the toolset is possible, and the user need not consciously think about what they are doing. They must be using the tools repetitively until they have acquired such a skill that allows them to work as if the tools were an extension of their body.

Most sites that are used irregularly, from shopping for cars to choosing a gym, will never be mastered by the users. Instead, they will be used only briefly to accomplish a goal. If you are a travel site aimed at consumers, it’s unlikely they are going to use your site over and over until they reach a zen-like state while doing price comparisons. Exceptions exist, sure. There may be the travel junkie who runs the flight costs endlessly and tweaks to find the cheapest ticket. But you probably want to optimize your site for the family planning the annual August outing first. Even that travel junkie is probably going to be plenty happy just to find a cheap ticket to Belize rather than luxuriate in manipulating the flight from Wednesdays to Fridays just to watch the prices fluxuate.

Conversely, word processing, numbers crunching, and alien shooting are all activities where mastery of the tool set increases the user’s effectiveness and enjoyment when using the tool. In such cases, flow is not only possible but desirable.

Ease-of-use

You have been hearing about ”ease-of-use” for ages under the rubric of usability. For most web applications, from ecommerce to online banking, this is all you need. For applications where you need more than simple usability, such as photo editing or blogging tools, you still must get ease-of-use right. Even in games, where some tasks should be hard to accomplish in order to create pleasurable challenge, designers still make the fundamental usage easy. For example: seeing what level you are on, how many lives you have, how much gold/points/reputation you have is all bundled up in the HUD. HUD, or heads up display, is the bar that keeps your status in front of you in the same place all the time, so you can flick your eyes over to it to mark progress. This is a paragon of ease-of-use, and many productivity apps would greatly benefit from a HUD.

Mastery

Mastery is a common game concept; it’s what makes much of game play fun. Everyone knows that amazing moment when you suddenly are riding your bike perfectly balanced, playing a song on the guitar without watching your fingers fret, or typing your thoughts without trying to remember if you hit the Y with the right or left finger. You feel so powerful and in control! This is mastery.

In games, that elation is doled out across levels. As you master one complicated set of patterns in Dance Dance Revolution, you are spoon fed the next harder one, so each step of mastery releases its own high. Flow occasionally happens just as you are about to be gobsmacked by the next level.

To design for mastery, you have to map the user journey, and consider how to move them from one stage to the next.

Amy Jo Kim's player journey helps you decided what the key mastery points are
Image 1: I have always loved this diagram from Amy Jo Kim‘s classic Community Building on the Web : Secret Strategies for Successful Online Communities

Such a long user journey is not needed for every site. If you sell curtains direct to consumer, you may just need people to find and buy a curtain. Novice is as far as any user has or wants to go.

But if you sell curtains to interior decorators, you definitively want to figure out how to move them from novice to regular. Every site has its own user journey to plot out. Mastery is critical if “regulars” or “engagement” are in your strategy deck.

Once you know what the stages of the player (user) journey are, you can plan for mastery. For example, for Facebook mastery might be about moving users from novice to regular. Facebook wisely makes sure you are connected to your social network (finding people to connect to is hard!) and then can easily interact. A regular might hop on two or three times a day, check their stream for funny/interesting posts, respond to notifications for games and check for personal messages. A leader might help less tech savvy members of the family get on Facebook, and figure out how to upload pictures. An expert… well you know them. They run groups, have a business page, and generally get Facebook to do things you didn’t think it did.

With productivity apps like word processors, mastery appears when a user uses a keyboard shortcut to cut and paste rather than the menus. Users can get by without the advanced tools, but those tools are waiting, perhaps hidden, for when the user is ready to move a bit faster. If you have ever visited you accounting department and watched them use excel, you know what I mean.

But consider this: while both Facebook and Microsoft word offer power tools, this is completely different than Dance Dance Revolution which increases the difficulty of the basic activity each time you play. Just imagine what writing a letter would be like if every time you opened Word the buttons and menus were completely rearranged. (It’s bad enough when this happens once every year or two).

Flow


Image 2: Challenge vs. Skill

Finally, mastery leads to flow. If you followed the wikipedia link at the beginning of this article, you know now that flow is hard to achieve. An activity gets a little too hard, or a little too easy and it’s all over. One enters flow when the challenge level is appropriately matched with the skill level.

With most productivity apps, the challenge and skill are both provided by the user, and thus the designer has little control over flow, except to prevent or interrupt it. Let me illustrate.

I originally wrote this article in WordPress. I use WordPress a lot; even more than Microsoft Word. I could be considered a regular now. When I wrote my Eleganthack blog post, Why You Should  Speak, I was in a flow state. I knew exactly what I wanted to say, and all I had to do was craft the sentences. Although two hours went by, it felt like 15 minutes.

But writing this post has been more of a struggle, even though I originally wrote it in WordPress. I knew I wanted to write about why flow was a potential chimera, but I wasn’t sure why. I was writing at least as much to figure out my ideas as to express them. And I popped in and out of flow, stopping to check twitter, write an email, and even debug a WordPress problem. The challenge of expressing myself kept bouncing between arousal and anxiety, only occasionally hitting flow. And there is absolutely nothing WordPress could do to help me with it.

WordPress could certainly kick me out of flow, though. If they popped up an autosave dialog, or the mechanism to allow me to insert a picture was too many steps, I’d lose my train of thought and flow might have been hard to recover.

In games you see more of a partnership between the designer and the user to create flow states. The user masters skills, the game monitors that mastery and ups the challenge. In badly designed games, the challenge will increase so sharply the user is thrown into anxiety and will quit. Or conversely, the challenge is insufficient and the user wanders away in boredom. Collision Effect is an example of an app often reviewed as being incredibly fun by experts, but having too steep a challenge curve for casual players. Boring games are a dime a dozen, and I’m sure you’ve uninstalled your fair share.

In excellently designed games, the game lets the user move between arousal and flow perpetually. In addition to Dance Dance Revolution, you have the wonderful Kinnect game Dance Central. World of Goo (iTunes, Android) has a terrificly smooth progression in difficulty, becoming deliciously hard at the end. And who hasn’t played (and gotten a little obsessed with) Angry Birds?

So: Design for Flow?

If you are a game designer, it’s a must. Pleasurable extended play relies on the player bouncing between the arousal and flow states (occasionally dipping into anxiety and resting in relaxation). But if you are an app or web designer, I recommend instead focusing on ease-of-use and mastery. Consider flow as you design, but only to make sure if the user manages to achieve it you don’t disturb it. Otherwise, you may find your software flung across the room, just like the cat who jumps on the keyboard mid-composition.

No cats were harmed in the writing of this post. Unless looks can kill.

Afterword: I cannot resist commenting on the state of relaxation. Many people find Farmville’s appeal completely incomprehensible. But the chart shows high skill and low challenge not as boredom, but as relaxation. I would argue that completely mastered skills work the same way, such as knitting or Let’s Create! Pottery. In the case of Let’s Create Pottery, you can move back and forth between challenges and relaxing unstructured creation once you have mastered the basic throwing and decorating skills. I think lazy relaxed play is much underrated in both the game and web design communities.

Christina Wodtke is continuing to explore the overlaps between game and web design, as well as what it takes to make great products at Eleganthack.

Straight From the Horse’s Mouth with Chris Fahey


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 fantastic finale, consulting powerhouse Chris Fahey of “Behavior Design”:http://www.behaviordesign.com/ talks with Christina (herself a former consultant-turned-entrepreneur) about the conditions that led to the founding of the firm. He speaks with great nuance and honesty about how the practice developed, what it means to lead the consultancy, and how the partners’ work has changed because of its success.

For those who have ever considered striking out with a few colleagues or are just curious about the path, do yourself a huge favor and listen to this podcast before you jump off that cliff.

We discuss…

*Your future…*
Chris discusses the reality of the business world today when it comes to careers. How we start to think less about how we can do well for our clients and more about how we can get involved in larger projects.

*Virtual detox*
Chris talks about how he and his four business partners created his company Behavior Design and the challenges of moving into an office after working virtually for years.

*To hire or not to hire*
Chris discusses the hiring process at Behavior Design and their good fortune in hiring staff. His biggest challenge remains whether to out source work to trusted consultants or hire staff full time. Pros and Cons to both are talked about.

*In through the out door*
Although one of the partners left the organization to take on a dream job at the NY Times as the lead designer, the culture that was developed allowed for a smooth transition for the organization and its’ people.

*Shameless Self-Promotion*
Christina describes the importance of shameless self-promotion in order to continue to advance your company. Chris describes other important aspects including knowing when to say “No!” and when to be hungry for sales.

*Come together*
Christina and Chris talk about the challenges and advantages of working with several partners when building a company.

*Summing Up*
Part of the natural growth of the company is for people to walk away to take on new challenges. As Christina points out, we’re human beings, we grow, and ultimately we’re bigger than what we do.




*TRANSCRIPT*

Male Announcer: This podcast brought to you by AOL, now hiring designers in Silicon Valley, New York City, and the Washington DC area. Help us set the standard for what happens next on the web. Send your resume to uijobs@aim.com today.

[music]

Female Announcer: Boxes And Arrows is always looking for new thinking from the brightest minds in user-experienced design. At the IA Summit, we sat down with Chris Fahey from Behavior Design.

[music]

Christina Wodtke: This is Christina Wodtke of Boxes And Arrows and we ran into Chris Fahey in the hall of Behavior Design and we thought we’d catch up with him and see what interesting things he’s up to. So Chris, what are you up to over in New York these days?

Chris Fahey: Well, Behavior Design is growing quite a bit, we just passed our fifth year mark, so I think that’s sort of the marker as to whether or not a business can survive, so that’s been great for us.

Christina: Do you wake up every morning going “not dead yet!”?

Chris: [laughing] I wake up very late sometimes, because we’re still working very late. Even after five years, we’re still putting in massive hours and still working as if we’re in our first year.

Christina: So, you know, a lot of folks on Boxes And Arrows are becoming really excited about the articles we’re running about careers, because they’re asking themselves, “Where am I going to go with my life? I’m a designer, and I could become ‘best designer in the universe,’ but maybe I should try something else, maybe I should run my own agency, maybe I should become a product manager.” Do you have some fun thoughts on what brought you here? What made you decide to run your own shop?

Chris: Actually I was just in the hallway having an interesting conversation with some other people about the very same topic actually, so it’s fresh in my mind. Someone said there was a sort of series of ingredients that go into making you a ‘superpowerful’ consultant as an individual, and that is starting a business, publishing a book, and speaking at conferences, or teaching at a university of some kind. So, these ingredients add up to escalations in your ability to make money and get premier clients.

I guess, over the years, we start to think less about how we can do good on our projects for our bosses and clients and more about, “Well, what’s going to happen to me coming up in the future? Am I going to manage people? Am I going to work on bigger and bigger projects? Am I going to work on more and more refined, focused projects?” And, you know, I’m in my mid-thirties right now and a lot of people I think in this industry – while it’s very broadly ranged – I think there are a lot of people in that kind of boat, where there’s a new generation coming but there’s people who are entering the second generation, having started in the web industry in the 90’s. We’re kind of all facing that question, you know, where do we go now?

Christina: So, as a way of thinking of the question, can you tell me what was the moment that you said, “Hey, take this job and put it in a trash bag, and let’s go start our own thing.” How did that happen?

Chris: Yeah, that was an interesting decision for us. At Behavior we started with five partners, including myself, and we all were working together at Rare Medium, which is one of the razorfish-like global consultancies that managed to…

Christina: I actually remember…

Chris: …driving to…

[laughing]

Christina: …Rare Medium, believe it or not, and March 3rd, and…

[laughing]

Christina: …Vividenson [?], Gohan [?]

Chris: Yeah… March 1st, March 3rd is my birthday, actually.

Christina: Oh, must have been in the air.

Chris: Yeah, but we were the last people to work there as they gradually went from a thousand to five hundred to fifty to three… you know, thirty people. Finally it was down to about ten people and we realized we all liked working together, we had clients that like working with us that were going to be upset when their vendor disappeared. So we continued to work with the same clients right away, working from home.

It wasn’t hard for us to decide to continue working together and to serve clients as almost like a virtual agency. What was hard was deciding to incorporate and move into an office and start delegating tasks to underlings and start to, you know, build an organization. You know we had all managed people before, but kind of we had this brief period of time where we were virtual freelancers as a virtual company. It was very awkward.

Christina: What made the decision hard?

Chris: I think it was just sort of the change of focus. It was sort of transitioning from working out of your home, to spending money on an office. I think it was financial difficulty. We grew organically. We did not have any investment. I think we all lived off of credit cards for a few months in the early stages when we had unemployment. [laughter]

Gradually I think we made enough money in our first year to be able to afford the down payment or the deposit on a space. We started with folding tables, worked our way up to buying actual doors that we could then varnish and make into real tables. Now we’re actually getting furniture built for us from friends of ours. [laughter]

I think the hard part is financial but its also just sort of cultural, understanding yourself to be not the person the client hired, but you are the embodiment of the brand that the client hired. So clients don’t necessarily get Chris Fahey 100 percent on a project. They get me leading a team, and my selection of that team. My course correction of that team. My standardization of the deliverables that we do. That’s been hard. That’s been tough to do because I really like working on stuff too.

Christina: You know, I was talking to another entrepreneur who just made his first hire and he was talking about what a terrifying moment that is. Can you talk a little bit about what it meant to change from five guys who are all kind of responsible for their own troubles to being responsible for a team of young people who you have to grow and nurture and keep your brand going.

Chris: One of the hardest parts about that was when people started sending us resumes from outside of New York. Then we have to say to them, yeah, OK you’re going to come work for us, and relocate and move all your stuff, and move your wife or your family to New York. That was a big tough decision. I think hiring other people…

Christina: And then you might have to fire them two weeks later.

Chris: Exactly, that was the tough part, was sort of feeling comfortable enough in our pipeline and our growth and our stability that we could make that kind of commitment. We’ve never made a wrong decision in that regard. We’ve hired people that weren’t great, and that sort of works out eventually.

We’re generally very, very careful about who we hire. Most of our interviews don’t, you know, end up really short. [laughter] Because we want to hire the best and so we wait a long time to hire people. It takes a long time.

Christina: It’s got to be tempting when you’ve got this incredibly fat pipeline and the market is red hot. You’re like, gosh, if we had three more people, boy, that would be a lot of leverage.

Chris: We looked at a pipeline recently that said if we got every single client that we could get, and we felt like was a sort of a good nibble in this business development, we could hire up to a hundred people.

Christina: Wow!

Chris: [laughter] Over time, that shook up and we decided, we said no to some clients. Some clients said no to us. It turns out you don’t actually have to grow that much.

One of the hardest parts though, is deciding between freelance and staff. We have a lot of freelancers working for us as well as staff. I like staff better, because they grow our competency and enable us to have an organization which has institutional knowledge which you don’t get from freelancers quite as much. Except that our freelancers, we like to keep for a long time, in a long-term relationship. So it’s virtual staff.

Christina: Almost staff. And you can flip them sometimes, right?

Chris: Yeah, we’ve done that a couple of times and hope to do more of that.

Christina: So are all five partners still with you?

Chris: No, one of our partners, Khoi Vinh, took his dream job at the New York Times as the design director. I think it was the one thing that could possibly take him away from us, literally of all the jobs out there in the whole world. I think he spoke to some other companies that at some point were interested in him, and the New York Times was his dream job, and he’s loving it.

Christina: Well I would be. If the New York Times comes knocking sometimes… but it’s still got to be hard right? You’ve got this core five, and you’re seeing your company turn into something that isn’t about you five guys but is its own entity.

Chris: Yeah, and actually we thought that would be a difficult transition, and while we miss Khoi very much, we were able to do it because the company had been abstracted enough away from the personalities and to the communal culture. And that culture is embodied not just in our methodology and our deliverables, but also in the zeitgeist of the group of people.

There’s five partners, well, four partners now, and there’s 16 additional employees working around the office and that’s the culture. We’re bringing people at every level and that’s great too, so we’re actually transitioning from bringing in people that we’ve known for a long time with the same experience as us, to bring in people from other cities, from recent graduates. We’re sort of nurturing that, so the culture is constantly evolving and that’s really exciting.

Christina: So let’s say that I’m a practitioner in my late twenties and I feel pretty good about my craft and my game and I come up to you and say, “You know, I’ve been talking to a couple friends and maybe I want to start my own thing.” What would you warn me about? What would you ask me to think about?

Chris: You want to start your own thing? You mean as an entrepreneur?

Christina: As a consultant. I’m going to start a consulting gig, a consulting company. I’m going to go out and there’s so much work right now I feel kind of brave and I might be able to get together with a couple friends and start a consultancy.

I know what I’d say if they wanted to be an entrepreneur and it’d be a very different story.

[laughing]

Christina: “Are you mad?” is what I’d say.

Chris: I don’t want to say it’s luck, but I think there’s a lot of faith you have to have in your own personal connections and their ability to drum up business for you.

I think you have to be shameless in certain ways. You have to tell people what you’re doing more often than you might feel comfortable with, in what they call shameless self-promotion. You have to be gentle with that too, you can’t just spam everybody, but you have to keep in contact with people, have lunch with people, something I’m really bad at.

But don’t get too caught up in your work that you forget that business development is… I’ll be honest with you, business development has and always has been, ever since we started this company, probably a third of what I do. Defining our process in a way that is digestible by clients, that is sellable, actually going to pitches, working on proposals, having a business developer on staff and helping her craft our pitch, marketing ourselves, writing press releases, editing press releases.

That’s a lot of stuff you don’t have to do when you’re working inside of an organization for someone else. I’ve seen you doing it too, a little shameless self-promotion!

[laughing]

Christina: Of course!

Chris: It’s the hard part, I think. One of the hardest parts.

Christina: Oh, absolutely. Well, I was at South by Southwest where you were, and I was tired, it was eight, nine in the morning and I was a little bit hung-over and I was like, “Oh, God. Am I really going to stand up and try to ask a question that promotes my company, and yet doesn’t do it in a really horrifying fashion.

I felt really guilty and shy and tired and like drinking water and laying down. But I did it anyway because you don’t actually have a choice. You think you have a choice, and you don’t actually have a choice. You just always got to stand up there and have a way that your company’s name gets in front of more people.

Chris Fahey: Yes, and you have to make your presentations very sleek, and even to the point where they go beyond doing what they have to do. They have to put on a good show. Another piece that I thought was interesting is really defining what you’re aiming for and knowing what your target is. We don’t say no a whole lot to clients, lately maybe more so just because of the saturation of the market.

But, you have to understand when to say no, and when to just be as hungry as possible. I can’t say that I’m not practicing what we preach, because we’ve taken a lot of almost everything that we got, but we have to decide what to pitch for, we have to decide who to contact, who to send our marketing materials to.

I guess, it’s a good idea, especially if you have partners, to have constant communication. We have summits with our partners twice a year where we just go outside and we’ll hang out for a while. It’s surprising how you’ll realize that you haven’t actually spoken to your partners one-on-one in weeks or months sometimes. Especially when you start getting a staff and you start getting kind of into your projects. So when you communicate internally with your partners, sometimes you’re surprised as to what your company vision is and then the company vision gets embodied in how you pursue business.

Christina: Interesting. I got to say, I’m very impressed that you started the company with five partners. I started the company with five partners, but we had never worked together. So a huge amount of our time was just trying to figure out how we’d relate to each other. So there wasn’t as much time that we could spend with clients or, if we were spending time with clients, we weren’t working through those details. So it was just a tremendously hard thing to do.

Chris: I can’t imagine doing that. I think we had all worked together for five years before we started Behavior or almost five years, maybe four or five years, at Rare Medium. Two of my partners had worked together for four or five years before that at IO/360, a Web design firm in New York that was pretty influential, from day one of the Web.

Also, two of my partners that I’d gone to school with in college, so we all know each other very, very well and we’re able to–I think we’d shaken out a lot of our kinks early on. Every partnership has kinks, and we still have disagreements as to how we want to do things and personal styles and stuff like that, but I think we shall grow out of it early and that was a really big event.

Christina: OK. Well, you know, MIG and Adaptive Path are both two partner companies now.

Chris: Oh, really?

Christina: Yes, absolutely. So I think that’s something else I would say, when they were starting up, it’s like start with one person and get to know them really, really well or start with somebody you already know really, really well and build from that. I got to say, those early years, as you were talking about not having any money, being scared about rent, that’s a lot of stress for any relationship, friendship or otherwise.

Chris: I would say also that part of the natural growth of a company is for partnership to break up and then people go on. There’s no guarantee that everybody, especially if you have three, four partners, wants to spend the rest of their lives doing that. People move on, Adaptive Path has had a very organic changes and behaviors, we’ve had one. Then we don’t see anymore coming, but six years have passed and we’re still together. We all put our vision, like we want to do this for the rest of our lives, that’s just how we say it, but you’ll never know.

Christina: Yes. I think that’s part of our lives, is just to remember that. We’re human beings, we grow, we change, you do one job, you do another job, you become partners and then you go off and get to be the Design Director of New York Times. That’s not personal because we’re human beings, we grow more bigger than what we do.

Well, thanks, Chris. It’s been really, really wonderful.

Chris: Thanks so much. It’s great to be on the podcast for my first time.

Christina: Yay!

[music fading]