by Leah Buley
FIGURE 7.13
A sketch on a browser template.
2. Block off some time.
When you’re ready to sit down and start sketching, consider giving yourself a time constraint. For example “I will sketch ideas for the next 30 minutes.” The time constraint is useful because it helps you move quickly rather than deliberating over an idea until it’s perfect. Perfect doesn’t matter when you’re sketching. That comes later in the process. Here, it’s about generating a lot of ideas for what’s possible.
3. Sketch your first ideas for key parts of the experience.
Start by asking yourself, what are the most interesting moments in this product? If I’m the user, what point am I trying to get to? What screen, state, or configuration of data will be most compelling and most likely to impress me or give me the most value? What part of the experience is most likely to “wow” me? Pick one of the key moments, and start to sketch some potential screen layouts for them.
4. Sketch alternatives.
After you’ve sketched one or two ideas for a particular state or screen, try to force yourself to sketch at least a few additional ways you could design that part of the product. For example, if the first sketch was a text-heavy design, how about a very visual way that you could present the same information? Continue this exploratory, experimental way of thinking as you drum up at least a few ideas for each screen that you’re sketching. You can use a “six up” template, shown in Figures 7.14 and 7.15, to help yourself sketch six quick, thumbnail-sized sketches for how you might design a specific page or moment of the experience. This may sound like extra work, but challenging yourself to continue and push past your first few good ideas inspires interesting new thinking. It’s a way for UX teams of one to bring the same kind of rigorous, exploratory, generative thinking that a team of designers brings to a design problem.
5. Pick the best ideas.
Once you’re satisfied that you’ve done rigorous exploration, identify which directions or ideas seem most promising to develop further. Only then should you fire up your computer and commence detailed design. You may find yourself mixing and matching some ideas from your initial sketches. That’s great! Your sketches should help you arrive at design solutions that are bigger than any one particular idea.
FIGURE 7.14
By forcing yourself to explore six different alternative approaches, you push past your first one or two good ideas.
FIGURE 7.15
Templates like this one aren’t required, but can help you remember to sketch multiple options before settling on just one.
Tips and Tricks for Sketching
• Clarity before beauty. You don’t have to be a great artist to be a great sketcher. When sketching, aesthetics are low priority. You do, however, want to try to make sketches that someone else could look at and possibly make sense of—or that you yourself could make sense of if you pulled them out of a drawer two or three months later. To make your sketches clear, add annotations, or use the pens as described earlier to add visual clarity. Often, a short note and an arrow pointing to some part of the sketch are all it takes to clarify what makes a bunch of squiggles a solid gold idea. Also, focus on drawing basic shapes. The sketches in Figure 7.16 were created by designer Rachel Glaves at Adaptive Path. Rachel shows that most user interface elements can easily be sketched using a few basic elements: lines, boxes, and arrows.
• Sketching hacks. If you are unhappy with the look of your sketches, there are tools that can help. Balsamiq is an online wireframing software with a sketchy appearance that you can use to put together sketch-like designs.
• Sketch in words. If you feel uninspired as you sketch, try to describe an idea in words before you attempt to draw it in pictures. Some people are naturally “word” people, and this sketching-in-text approach can be an equally valid way to explore the possibilities.
FIGURE 7.16
Focus on drawing simple shapes.
• Carry your kit. Keep your sketching kit handy so you can sketch on the fly, in meetings, or in ad hoc conversations. When a conversation seems to drag on, with participants going back and forth about what they believe should happen to the product design, grabbing a pen and drawing what you or others have in mind can be very powerful. It can help turn a purely speculative conversation into something more tangible. The person who sketches directs the conversation, which is a very strong position to be in. Likewise, handing a pen to a colleague and asking her to “sketch it out” can give you a clearer picture of what she has in mind.
• Frame the sketches for their audience. To get people who are used to reviewing higher fidelity designs to engage with sketches, it can be helpful to spend a little extra time (but not too much time) to frame the sketches within a more polished deliverable. Scan your sketches and place them into a presentation or document that presents the sketches as visual examples to support a written overview of the conceptual directions being presented.
• If you work remotely... Even if you can’t be there in person, you can still make sure that reviews happen as though you were there in person, which means setting up time and structures to enable the team to see your sketches, make their own, and have a highly detailed discussion around a collection of sketches. To do this remotely, schedule several larger blocks of time for an online working session with the cross-functional team. During this time:
• Either block off a larger than average amount of time for the meeting (say, two hours), or explicitly give the working session a very narrow scope so you can be sure that you’ll get through all the designs in the time available.
• Ensure that the technology is set up for an optimal sharing experience. This usually means having a dedicated conference line for everyone to call in and conference software where everyone can see each other’s faces and share documents. You can use software such as Adobe Connect, GoToMeeting, join.me, or even Skype. Or tools like ConceptShare, ProofHQ, and Cozimo are designed for visual collaboration online, and can be useful for sharing and annotating sketches, wireframes, and other visual artifacts.
• In meetings like these, it’s critical to have a clear agenda and a clear process for how content will be shared that everyone understands ahead of time. When technology issues derail a meeting, even if it’s nobody’s fault, it makes everyone annoyed (not the open, friendly, participatory vibe you’re trying to create).
• If the meeting is focused on sharing (or co-creating sketches), you can make sketches ahead of time, scan them, and then send them around by email so people can refer to them during the meeting. Or, if you have a tablet (such as a Wacom tablet, or even an iPad with a good sketching tool like the app Paper), you may be able to sketch real time during the meeting as you discuss ideas. If you’re asking your colleagues to sketch and they’re not similarly equipped, you can just ask them to sketch with pen and paper and ask them to hold their sketches up to their cameras or snap a quick photo with their phone and email it to the group. (Or scribblar.com is a collaborative white-boarding tool that you can use.)
METHOD 16
Sketchboards
What might the overall system or product look like, and what range of ideas is possible at each point in the process?
A sketchboard is a way to display the sketches that you and the team have created and facilitate a group conversation around them. You can think of a sketchboard as a big poster that you create by assembling your sketches and initial ideas for the design of the system. Sketchboards also help you look beyond individual screens and envision how someone will move among multiple parts of a product or system. The intended purpose of a sketchboard is to help you think across the broader design of the system, and to make sure that you’re pushing yourself to make quality, creative designs. But sketchboards have lots of side benefits as well:
• They are interesting to look at, which makes people curious and draws them into your process.
• They’re cheap and quick to assemble, so you can easily put one toget
her whenever you need to think about the breadth or flow of a product.
• They’re a good canvas for layering on new ideas, and even recording notes, questions, clarifications, priorities, etc. As such, they create a vivid and visual record of a whole team’s input into the user experience design.
Average Time
3–4 hours total
• 1 hour to assemble a sketchboard (provided sketches have already been done)
• 1–2 hours to review with a team
• About 1 hour to go over notes and new sketches after the review and determine the next steps
Use When
You’ve done a bunch of initial sketches, or when you’re ready to narrow down your ideas and need input from the team to move further into detailed design. This way of working settles design decisions. By doing the design thinking together and having a critical conversation about the benefits and drawbacks of certain approaches, the strong ideas become self-evident. Rather than requiring you to preach or appeal to your colleagues’ user-centered virtues, they can come to the same conclusions on their own by participating in the process.
Try It Out
1. Assemble your supplies.
After you’ve sketched some preliminary ideas for the product (or part of the product) that you are designing, gather your supplies and prepare to assemble your sketchboard. You will need:
• Paper. A large sheet of paper, approximately 3’ × 6’, or 1 m × 2 m. Brown paper creates an especially nice work surface because it contrasts sharply with the sketches, which are usually on white paper. Brown paper also seems like a less formal canvas, which has the subtle psychological effect of making you less hesitant to write all over it (see Figure 7.17). Plus, it’s usually cheaper than white paper.
FIGURE 7.17
Consider buying a roll of butcher or craft paper to cut off pieces as you need them.
• Tape. The tape should be sticky, but not too sticky (see Figure 7.18). Painters tape works well or drafting dots. Drafting dots are single-serving bits of round tape, often used by architects and drafters to hang blueprints and schematics on the wall. The key is to find tape that’s strong enough to hold a big piece of paper on the wall without ruining the paint, but it should also enable you to affix paper to paper (your sketches to the sketchboard paper) and pull them off and reposition them in a new spot without tearing the paper underneath.
FIGURE 7.18
If you put all of your sketchboard supplies in a handy kit, you’ll be ready for impromptu sketching sessions whenever the opportunity presents itself.
• Post-it notes for labeling the sections of your sketchboard, which will correspond to the parts of the product that you are designing. Consider using color-coded Post-its. For example, green for positive comments and red for negative comments. This enables you to stand back and quickly spot the trends.
• Large markers to make big, clear labels and notes.
• Printouts of important information that influenced your design. You should tape these directly on your sketchboard, to connect the sketches to the user and business needs that inspired them. This will come in handy once you have other people looking at the sketchboard and talking through ideas. It will make it easier to discuss priorities, objectives, and trade-offs. Types of documents that you might include here: personas, use cases, user stories, design principles, marketing segment information, feature lists, and so on.
• Any sketches or designs that you’ve done so far. This can include high-fidelity design or back-of-the-napkin doodles. Whatever you’ve got can go on a sketchboard.
2. Assemble your sketchboard.
Now that you’ve got your supplies in order, begin to put together your sketchboard. Start with the structure. Think about all the screens or sections of the product that you are designing. This may just be the high-level sections of the product, or if you are thinking about a specific flow or scenario, it may be sequential parts of that flow. (See the “Task Flows” method in this chapter for more guidance on creating flows.) Put sticky notes along the top of the paper for each of these parts or sections. In addition, reserve a spot on your large sketchboard paper for the “input” documents that you printed and label that section as well—something like “requirements” or “inputs” or even just “docs” (whatever works for you). In that spot, tape up the documents that served as inspiration for you as you were working on your initial design ideas.
3. Put up your sketches.
Next, tape up all of your initial designs or sketches within each of the sections that you have labeled, as shown in Figure 7.19. If you find you have a section without any designs taped up, it probably means you need to sketch some more. Similarly, if you find you have a section with one or two potential ideas but there’s still room for more that also means you probably need to sketch some more. A sketchboard helps you quickly see where your thinking so far has been heavy and where it’s been a little light. Aim to have a handful of different ideas for how you could tackle the design at each part of the product workflow that you’re working on.
FIGURE 7.19
On this sketchboard, reference documents are posted on the left, and sketches are posted on the right.
4. Schedule a review session.
Now comes the most important part. Assemble a group of fellow team members, coworkers, or even just friends, and use the sketchboard to explain your ideas and get feedback. Start by explaining the inputs that informed your thinking. And then talk through your initial ideas for what the design solution might look like. While you’re explaining your ideas, encourage people to ask questions and give their honest, off-the-cuff feedback. This is all valuable information about how the design is likely to impress people in the wild. As the group gives its feedback, write notes next to your sketches. You can write them directly on the brown paper or on sticky-notes that you place next to the relevant sketches. If you start talking about an alternate way you could treat a particular sketch (which is often triggered by your preliminary sketches), do new sketches right there in the middle of the discussion and add them to the sketchboard. If some sketches are clear winners, put a big star next to them and make a note that you should develop these further. Keep in mind that you can also rearrange the sketches and change the overall process flow if you realize as a group that the structure simply needs to change.
5. Review the best ideas.
Your goal by the end of the sketchboard session is to come away with some sense of which ideas are promising enough to turn into higher fidelity designs. Those higher fidelity designs may just be more sketches, but they can also be wireframes, interactive prototypes, or even working code—whatever makes sense for the product development process that you’re working with.
Tips and Tricks for Sketchboards
• Get people on their feet. One reason that sketchboards work well is because they turn the traditional process of presenting and seeking approval for design on its head. Instead, they get people out of their seats and working together in an active, participatory, animated fashion. Sketchboards turn people into contributors to the design process, rather than the recipients of it. They also provide extra quality assurance for the UX team of one to help you make sure that you’re designing a product that isn’t just the first idea that pops into your head, but rather the result of a rigorous and creative exploration. To make it work, have a “no butts in seats” rule when you’re in the middle of a sketchboard session to make sure that you are truly keeping people active and engaged.
• Know your altitude. Sketchboards can be applied to design problems of varying specificity. You can use a sketchboard at the start of a project to explore what major components or sections of the product you want to address, and to begin to develop preliminary ideas for what each could look like. Alternately, you can use a sketchboard later in the process to figure out the details of a specific area or workflow. You could even have a sketchboard that focuses on one screen or moment, using the sketchboard to dig into all
the permutations that one view might take, depending on the data the user has provided, what route they took to get there, if they are signed in or not, and so on. The important thing is to know the altitude of the problem you’re trying to solve before you start your sketchboard. The process can become hard to manage if you think you’re doing a 30,000-foot, system-wide sketchboard and then end up focusing all your ideas instead on a 5-foot view of a single state. Pick a scope for your sketchboard and stick with it.
• Review with a focus. Sketchboards can be an excellent tool for critiquing specific aspects of the product design. Instead of one sketchboard working session, consider having multiple review sessions with different types of people who will be focusing on different considerations, to ensure that you’re thinking through all aspects of the product. For example, schedule a session with the engineering team to do a technical feasibility review and another session with the content folks to discuss whether the CMS can support these designs and how much of this content would need to be created or purchased.
• If you work remotely... Sketchboard sessions are very animated and physical. In general, that makes that makes them hard to do from afar. However, sketchboards are highly portable (as you can see in Figure 7.20) and can easily travel with you to where the rest of your team is located. If being there in person is simply not an option and you’d still like to try this, follow the same tips for remote workers described for the “Sketching” method in this chapter.
FIGURE 7.20
You can tell by the annotations and copious notes in between sketches that this sketchboard has been through a review session.
METHOD 17
Task Flows