Download Examples
Tag Archives: Sketching UX
How to draw a stick figure
built on concepts by Dave Gray and Scott McCloud
IDSA 08
I’m in Philly speaking at the IDSA conference.
This is what I’m going to be talking about.
I imagine a world of design where storytelling is considered to be as important as the visuals we create. The optimal way for creative storytelling and complex problem solving in the digital era necessitates an environment where visually and verbally communicating user experiences is a seamless and vital part of the design process. I would like to present the challenges faced in doing this and best the practices I have learned from my experiences in creating such an environment within the companies I have worked with. This section will likely include audience interactivity and collaboration.
How to build a visual thinking team
So let’s say you are already convinced that visual problem solving and sketching experiences is integral to your team. You are sure that there is nothing more you would rather see than a whole slew of people roll up their sleeves and break out their sharpies to collaboratively work out problems on giant rolls of paper all over the office. Everyone is on board and everyone loves the idea. One one thing wrong. No one is doing it.
So here’s the top three reasons people are unwilling to use this powerful tool.
- Fear of the blank page. There is something sacred about an empty page. It sits there waiting ominously filled with possibility. Added to this is not only the fear to sketch but especially to sketch in public. If only we can get people to stand up and sketch in front of others it removes a huge roadblock to collaboration.
- “I can’t draw” Another variant of this is ‘oh you artsy designer…. I like your horn rimed glasses why you do the drawings for me’. The thing to keep in mind for this sketching is not drawing. The goal is different. When you draw you are trying to effectively represent reality (even if it’s just the reality in your own head). Sketching on the other hand is a language of rapid iteration that uses visuals as well as words to effectively communicate your design solutions. Think of it as your own personal visual vocabulary.
- Untested skills. Having to perform without practice can be a very uncomfortable experience. Trial by fire while really effective with certain groups can be disastrous for others. What people need is a safe place to fail.
So how do we get people over these hurdles? Enter Visual Workouts! A safe place to to practice solving problems visually. Think of it as a gym for your mind.
How to make Visual Workouts!
- Record your workout; make a workout worksheet
- Name your workout. You want to give your workout a handle to people can refer to it and do it over and over again. Similar to running on a treadmill you aren’t going to see a difference right away you need to practice over time.
- Visualize the workout. create a visual for your workout that represents either the activity or the results of the workout.
- Ingredients. Identify the tools and materials you’ll need for the workout. Pens, paper, index cards, cameras. If you find yourself using a number of things often make a tools and materials basket and just carry it with you to the workouts.
- Recipe. A paragraph on how to actually do the exercises. Obviously this will vary from exercise to exercise but try to make it as concise and to the point as possible.
- Ways you can use this today. End your workout with actual actionable items for your team. Think about how many different ways
- Make it a routine. Ideally you want to spend 30 minutes three times a week working out. I tend to find that the actual time and frequency of the workouts will differ depending on the size and availability of the team. Cap it to a time period shorter than what people may expect. That way they want leave invigorated and wanting more.
- It’s an workout not a presentation. You want to spend as little time as possible going through the rules of the exercise and spend a lot more of the time actually making and critiquing.
- Learn from each other. hand the pen over to others and take turn teaching. Select one person to lead (facilitate) each session but rotate that role around the team. We all resolve and work in the world using our eyes and everyone has something visual to offer and if nothing else teaching can be the best way to learn. Share ownership and allow everyone to contribute to the lessons.
- You have to present and critique work. In many ways the workouts are exercises in collaboration. An integral part of design is being able to effectively critique each others work as well as take criticism. This is much harder than it seems. A weak critique will lead to a bad design (and yes there are bad designs) out of the door. Critique to harshly and you’ll trifle the whole team to play it safe and cover their asses. Practice doing this and you’ll strengthen your design skills and really start to build trust in each others methods.
- Document and share you work. You want to capture and document not only the exercises but people participating in them. Record the activity, take photos and share them on flickr. It will get help publicize your session as well get people excited about your company. Who doesn’t want to work for a place where you get to play with colored markers. I know that’s what I love most about my job.
Some visual workouts
Here are some of workouts and workout ideas
- Storyboarding for interaction design
- Visually representing design research
- Building your visual vocabulary
- Stick figure theater
- Scenario of the future experience (eg. vision typing)
- Visualizing a process (eg. visualize how to make tea?)
- Mind mapping
- 20 different ways to use post it notes
- Draw on others work
- Understanding complexity
- Documenting sketches
- Character sketching
- Whiteboard collaboration
- Storybording process
- Laying out the page
- Globals myths and visual metaphors
- Visual vocabulary
- Need finding
- Visualizing numbers
- Interactions over time
- Shared vision (eg. defining project goals)
What are some workouts of your own?
Story and Metaphor
What are metaphors but stories with formal clothes ons. A friend of mine graduated with a computer science degree and ended up starting an internet café in Lahore, Pakistan. So he’s running this café one day when an old lady walks into the shop and walks up to him and tells him she wants to write a letter to her son who lives in some other country (let’s say Papa New Guinea for conveniences sake).
So my friend agrees to write the email for her and send it of to her son. So he sits her down next to a computer and she starts dictating to him. And when he thinks she’s done he clicks on send and mails it off.
Suddenly, the old lady gets all angry and starts asking him where the letter is gone, she wants to add something, say a proper goodbye. “Didn’t your family teach you how to end letters”, she insists. So my friend offers to send of another email adding the stuff she wants to but she won’t have any of it. She insists that he can run up to the roof and grab the email before it fly’s off. My friend, with his computer science degree, starts explaining to her that email is instantaneous, and it’s already been converted into bits and packets and those are irrecoverable. Angry, the old lady storms off leaving my poor friend sitting at the computer.
Now I understand that the mental model the old lady had in her head was that email was like regular mail with except faster and cheaper. From her point of view what you had to deal with was someone to ‘send’ it that was different than the postman but essentially did the same job. The message itself wasn’t any different because in her perception the medium had not changed. Now what my friend should have said was, like a mailbox once you drop the letter in, you can’t take it out unless you have the key. And that he didn’t have the key. “It’s somewhere in Amreeka” (America in urdu). ; ) …
So I smiled at my friends amazement that the old lady couldn’t appreciate the complexity of technology while thinking he couldn’t appreciate the simplicity of metaphor.
What is a ux sketch?
User experience sketches are quick, simple and powerful tools designers use to solve problems or explore opportunities.
In order for an artifact to be a user experience sketch it has to be
1. Unprecious : Sketches are not precious and can destroyed to make room for more ideas.
2. Quick : Sketches don’t take days to make. They are fast as we are fast. Like ninjas.
3. Useful : UX sketches lead to solutions. While doodling is immense fun for the purpose of ux sketching we sketch as a means to an end.
Sketches can include
I’ve started a project to start collection such sketches. If you want to participate you can add your own sketch to the User Experience Sketches flickr group. Or you can view the collection at UX sketches gallery