by Leah Buley
How will the experience unfold over time?
People don’t experience digital products page-by-page or screen-by-screen. They pop in the back door, jump erratically from one part to another, break your forms, and trick your logic. A task flow gets you thinking about how people really use your product. What are the most likely scenarios and sequences that users will follow? And what are some potential side doors that they may use to end up in the same place? Often, the user experience breaks down most at the “moments in between,” when someone moves from one step or screen to another (no matter how carefully each step has been designed). A task flow helps you design an experience that flows smoothly even through the transition points.
You can make a task flow in any software program that’s good for diagramming. (Any of the programs described under the “Wireframes” method in this chapter will work.) Or you can simply draw it out on paper, as shown here in Figure 7.21. In fact, if you don’t have a lot of time, paper and pen may be preferable because they enable you to add additional details easily without needing to “design” the flow document, which can be its own task.
FIGURE 7.21
A low-fidelity task flow.
Average Time
1–2 hours to think through and document a specific task flow.
Use When
You need a complete picture of how the broader user experience hangs together for yourself and for your team.
Try It Out
1. Figure out your starting point.
You can do this in a top-down fashion or bottom-up.
• When you’re thinking top-down, ask yourself what should a user encounter first? What is the starting point? What are the major parts of the product? What comes first, and then what might happen as the user works his way deeper into the product?
• In the bottom-up approach, start with the most interesting steps in the process, or moments of truth, and ask yourself what comes before and after them? “Moments of truth” are the points in your product that represent key destinations or transition points for your users. They’re the reason they’re here. For example, the purchase and confirmation screens on an ecommerce site might be a moment of truth. Or the wall or activity feed on a social network site would be a moment of truth.
• Another alternative is to focus on scenario-based sketching, which is a bit of a blend of the top-down and bottom-up approaches. Rather than just focusing on the top layer or the interesting moments, explore how users might start at the top and eventually work their way to the interesting moments.
• Pick your approach, and then draw or depict the initial screen or step as a small, thumbnail-sized representation. (You don’t need to show the entire screen, but giving just enough detail to convey the essence of the screen will make it easier to recognize it in your task flow.)
2. Consider what comes next (or prior).
After you’ve picked your starting point, think about how your users would get to that point, and where they would go next. Repeat this process, either working your way from start to finish, or spreading out from the central moment you began with until you hit a reasonable start and end point.
3. Think about alternate entries and exits.
For each step in the flow ask yourself, is there another way that someone could get here? Or is there somewhere else they’re like to go from here (not necessarily the next step in the flow)? Also, consider what should happen if people abandon at this point. If they come back later, what should they see? Similarly, if they come back on a different device or computer, what should they see?
4. Add annotations.
Once you’ve captured all the key steps or screens for a particular task flow, go back through and add notes for how transitions should take place, or other important points to capture that are not selfevident from simply looking at the task flow.
Tips and Tricks for Task Flows
• Keep it lightweight. To go even more lightweight, use Post-it notes on large paper to plot out your task flow. Each Post-it note represents one screen. Lay them out on the large sheet of paper to figure out their relationship to each other and draw connector lines, annotations, etc. directly on the paper. If the flow changes, simply rearrange or redraw the Post-it notes. (Thanks to UX designer James Goldsworthy for this tip.)
• Don’t boil the ocean. Instead of trying to create a massive task flow that encompasses an entire system, create discrete flows that focus on core scenarios. It’s less daunting, easier to think through, and can help you focus on getting distinct threads of the experience as tight and fluid as possible. Afterward, you can go back through and think about how individual task flows connect to each other.
• Use as a starting point for a clickable prototype. This can also be a useful first step in determining what screens to include in a prototype and when interactivity should occur.
• Think multichannel. If you find yourself working on a task flow that switches channels or has non-digital components, consider creating an experience blueprint like the one shown in Figure 7.22 instead. Experience blueprints come from the field of service design, but they serve a function that is similar to a task flow—envisioning how an experience unfolds over time. To learn more about experience blueprints or service design more generally, check out the book Service Design, by Andy Polaine, Lavrans Løvlie and Ben Reason ( Rosenfeldmedia.com).
• If you work remotely... Task flows are easy to put together wherever you are and may in fact benefit from the focused thinking time that being remote sometimes provides. However, your colleagues will be a useful resource for you in helping think about the edge cases and alternate paths that users sometimes take. (Engineers are especially good at thinking through this sort of thing.) So also set up some time for a phone call or remote review to talk through what you have so far and get your team’s thoughts and feedback. If you’re comfortable sketching or assembling a task flow on the fly, you could also do this as a remote facilitated activity, using screen sharing software.
FIGURE 7.22
This service blueprint from Brandon Schauer of Adaptive Path conveys the steps that a user moves through, key touchpoints that they interact with, and supporting processes that happen “behind the scenes.”
METHOD 18
Wireframes
How will the product look and function in detail?
Wireframes are the meat and potatoes of user experience design. Many of the methods leading up to this point have all been geared toward enabling you to create smart, appropriate, relevant designs right here. A wireframe is a skeletal depiction of what a product should look like (see Figure 7.23). If that sounds simple, let’s not forget that a skeleton has an awful lot of bones. Like a skeleton, wireframes show you how the whole system hangs together to create a complete, interconnected structure that stands together as a whole.
FIGURE 7.23
An example of a finished wireframe.
Wireframes are typically black-and-white schematics or renderings of all the pieces and parts of the product or service. In a digital product, they depict the parts of the product screen-by-screen. In a service, they may illustrate touch points that customers have with the service (be they digital, paper, or human). Wireframes are (usually) black and white because they’re focused on just the basics: What is the information that should appear on a screen? How should it be laid out? What details appear there? What navigation is available (if this is a digital product) to help someone move from one part of the product to another? Wireframes gives some sense of how all the information and details relate to one another: How do you get from one step to the next, and what is the appropriate hierarchy of information?
In addition to black-and-white diagrams, wireframes usually include notes or annotations about how the product should behave. For example, what should happen when you press on a particular button? How should interactive elements change, given certain conditions? Those notes make wireframes an interesting bridge between a design document and technical spec
ifications. Wireframes can often simply be handed over to engineers for implementation.
Average Time
Hours, days, or weeks, depending on the scope of the system. When working on a digital product, a good rule of thumb is each screen takes 2–4 hours on average.
Use When
You’re ready to really nail down the details of the product design.
Try It Out
1. Pick your tool.
Start by deciding how you will create your wireframes. Usually, this means selecting a software program. For wireframes, pretty much any program that enables you to draw shapes will work. But there are some programs that are favorites for user experience professionals. Most of them feature easy drawing tools that allow you to easily approximate user interface elements in your diagrams. Many of these programs also feature libraries of standard user interface elements, so you can assemble your wireframes by simply dragging and dropping elements onto the page. Table 7.1 shows some of the most popular programs for wireframing.
TABLE 7.1 WIREFRAME SOFTWARE
Software
Description
Strengths
Weaknesses
Adobe Illustrator, Fireworks, Photoshop, or InDesign (otherwise known as the Adobe Creative Suite)
The ultimate suite of creative tools, these products can be used to render high-quality designs, photorealistic art, and pretty much anything in between. Their drawing tools make it easy to create and stylize basic shapes, which means it’s a snap to render common interface elements or design interesting new ones.
Highly interoperable. Can start a document in Illustrator for basic layout and then take it into Fireworks to create a clickable prototype, or take it into Photoshop to create high-fidelity, visual design comps.
Expensive.
Can be daunting to learn.
Balsamiq or Axure
These are listed together because they’re both the young upstarts in the wireframing software market, rapidly gaining popularity and giving old dogs like the Adobe Creative Suite a run for its money. Both let you assemble informal looking wireframes using built-in user interface element libraries.
Wireframes can be turned into interactive clickable prototypes.
It’s easy to give the wireframes a sketchy, hand-drawn appearance, which lends an “in progress” feel that encourages feedback on the right things (for example, the overall information layout and hierarchy, rather than the color of a button).
Axure is relatively expensive. (Balsamiq, on the other hand, is quite inexpensive.)
PowerPoint or Keynote
You might not think of these two ubiquitous presentation programs as wireframing tools, but both have robust drawing and animation capabilities that make them surprisingly useful for quickly rendering a wireframe and then turning it into a clickable prototype.
Since most people already have at least one of these programs installed on their computer, the barrier to entry is next to nil.
Public user interface element libraries (including mobile UI elements) are available for Keynote and PowerPoint at Keynotopia.com.
Can be harder to achieve a refined look and feel.
Omnigraffle
An inexpensive drawing and diagramming tool for the Mac. Omnigraffle comes with preinstalled user interface elements, referred to as stencils. Beyond the stencils that come pre-installed with the software, additional Omnigraffle stencils are freely available.
Easy to learn.
Mac only; difficult to export to PCs.
Visio
A Microsoft product for creating diagrams, schematics, and drawings. Visio also comes preinstalled with standard interface elements.
Integrates well with the MS Office Suite.
Preinstalled interface elements tend to look like, well, Microsoft UI elements.
2. Create a template.
Once you’ve chosen your tool, your impulse may be to jump right into designing screens. Consider taking a moment first to lay out a template for your wireframes like the one in Figure 7.24—one that takes into account the device or form factor you are designing for. For example, are you designing for an iPhone?
FIGURE 7.24
This is a wireframe template being created in Omnigraffle. On the left side of the template is room for annotations. On the right is room for the wireframe. the orange boxes represent a four-column grid.
A 1024 × 768 Web page? An 8.5 × 11 printed page? Create a template that represents the aspect ratio and proportional measurements of the area that you are designing for. You may need to scale down your measurements a bit to fit on the canvas of the software you are using. On your template, include a spot for a name to identify the page, screen, or design exploration. Also add a spot for notes or annotations.
3. Create a wireframe inventory.
One final step before you start creating your wireframes: make a list of the wireframes that you think you’ll need to create and gather together any sketches that you’re planning to turn into wireframes. If there are any screens in your list that you don’t have ideas for yet, take the time to start sketching out the design before you start to create the digital wireframe. If you need to evolve any sketches further, do it on paper before you move into software. Once you go digital, it can be hard to separate the functional questions from the natural impulse to pretty up your wireframes, so try to have a basic plan before you get started. However, your wireframes don’t have to be a perfect copy of your sketches. In fact, it’s likely that you’ll go into more detail, and think more about subtle nuances of the design, as you work through the wireframes. Some things that work on paper don’t always work on screen, and that’s okay. That’s part of the process.
4. Get wireframing.
At last, you’re ready to start wireframing. Clear your calendar. Put on some good tunes. Pour yourself a nice cup of tea, and prepare to settle into the time-eclipsing flow of wireframing. As you work, rendering designs for each screen or part of the product, think about things like the following:
• Sequence and state: How will someone get here and where will they go from here? Does this step have multiple states, depending on which path the user takes to get there?
• Information density: What’s the main message or action from here? What should I notice first? Does that differ at all from what I am noticing first in the design that I’m creating?
• Grid: How clean, balanced, and orderly does the design feel?
• Design principles: Is this screen or piece of the product delivering on the experience expressed in that handful of statements that were created?
• Error messages and states: What does the user see when things don’t go exactly as planned?
Every once in a while, get up, take a walk, and then come back and try to see your wireframes with fresh eyes. When you do, ask yourself, how can I make it even simpler? Continue on this path until your wireframes are at a good stopping point to share with others.
5. Seek and listen to feedback.
Share your wireframes with the team (or even just anybody you can find). Get feedback on whether the designs make sense, if the flow matches how people would expect to move through or use the product, and if anything seems just plain funky. Ask people what they would expect to happen when interacting with certain parts of the design. Do their expectations match what you have planned? Accept this feedback for what it is—valuable and honest input that will help you make the user experience design even better.
Tips and Tricks for Wireframes
• Show your work. Wireframing can be the most labor-intensive part of the process. This makes it an important but tricky piece of work for UX teams of one. How do you ensure that you are doing great design work but not spending all day, every day, pushing pixels around the screen? Taking time up front to do sketching and sketchboarding should help you balance the amount of time you spend working with others with the amount of time working on your own. Whatever you do, make sure that you don’t get too far alon
g in the wireframing process before showing your work to other people. Never go too far down the rabbit hole of ideas without having some basic conversations with your colleagues to see if what you’re thinking is really viable. For a UX team of one, checking in and showing your work opens up the black box of design and helps your colleagues develop an understanding of the user-centered design process.
• Give it a grid. Within the wireframe template, consider adding a faint grid. Working with a grid gives you guides to create consistent, balanced, clean designs. A popular grid is 12 × 12, because it gives you the ability to subdivide designs and columns of 3 or 4 equally. However, different grid structures may be recommended for different types of devices. Pick up a good book on grid systems to learn more, such as Making and Breaking the Grid, by Timothy Samara (www.amazon.com/dp/1592531253/).
• Think about tool compatibility. As you are selecting your wireframing tool, think a bit about whom you’ll be sharing these documents with and how editable they’ll need to be. This may influence your choice of tool. If you are going to be handing wireframes off to graphic designers, integrating well with Photoshop may be a priority (which would argue for one of the Adobe products). If it’s okay to just PDF the wireframes and send them around, pretty much any tool will work. But if you’ll need to share ownership of the wireframes with other people and you’re the only Mac user while everyone else is on a PC, you may want a tool that “plays nice” with the PC (for example, not Omnigraffle).
• Consider novel techniques. Design collage is a method that is similar to wireframing but approaches things from a more inclusive and less technical angle. In design collage, rather than design a screen from scratch, you literally collage a screen together from common interface elements (see Figure 7.25). For example, print out sample widgets from sites or products that you like (or pattern libraries can also be a good source) and then, with scissors, blank paper, and tape, begin to piece together a design that seems to have the right kinds of elements. You may need to modify some widgets by sketching over them. You may also need to make some new ones. The basic idea is to use found inspiration as your starting point—a great way to circumvent the daunting feeling of starting with a blank page. For teams of one, design collage can also be a fun group exercise, if you want to bring non-UX folks into the wireframe process through an inviting, inclusive activity.
