Low-Fidelity Prototypes

Prototyping helps you test and validate your designs early so that you can refine or even rethink your ideas and avoid costly mistakes further down the road. *Paper prototypes* are the fastest and cheapest way to get ideas out of your head and into users' hands. While digital versions might look more pleasing, you can create multiple versions on paper within a fraction of the time it takes to create a single one digitally. Paper prototypes also make it simple to conduct a Wizard of Oz session

where you swap out elements to simulate interactions. Once you test and weigh your options, you can proceed to the digital version with the shortlisted option. If assembling paper prototypes feels cumbersome, you can take pictures of your paper wireframes and turn them into digital prototypes that users can use on real devices. Turning sketches into prototypes is as easy as taking a picture with your smartphone and linking different screens. You can use dedicated prototyping tools or even regular presentation tools

to create a digital prototype from hand-drawn wireframes. The digitized paper prototype will be easier to handle for you and your users while still giving you the speed and flexibility of sketching.

So, the way we get into drawing simply is by using what I call the *five basic elements of drawing*. And I think these are really important, especially if you are coming to this course and you feel like "I can't draw"* – remember the asterisk – "as well as I would like." So, the important thing about this is this changes an approach

to your drawing; it moves it away from art and to ideas. So, my mantra is "Ideas, not art." And I think this is a foundational part of what I believe in. Not that there's anything wrong with art; it's just that art has *baggage* with it. You can draw like a little suitcase here. Art has baggage. It has baggage from junior high school when someone drew better than you or you felt like your drawing skills were not as good as you wished they were.

And that's very natural. So, we're here to help you through that. So, what are the five basic elements of drawing? Well, the first one is a *square*; second, *triangle*; third is a *circle*; fourth is a *line*; fifth is a *dot*. So, the square of course can be a  rectangle or something like that. A triangle can be all kinds of shapes.

A circle can of course be stretched into an oval. Lines don't have to be straight – they can be squiggly. And if we really wanted to talk about it, the dot is really the foundation of all these. These are all dots that are lined up in a certain order. But it's much easier to remember five elements. And there's also a reason why I chose five elements – it's because they're easy to remember when you're in the heat of the moment.

So, let's flip the page here, and we'll go to drawing with these five basic  elements so you can see how this mindset works. All right, so let's draw with the five  basic elements: square, triangle, circle, line and dot – any order. I just happened to choose that order.  Now what I'm going to do is show you what I mean

by this simple way of drawing. So, let's start with a simple one. So, if you have your pen, write 'house' here. I'm using green to set it apart from the drawing. So, on a house you can get away with – if you want to call it that – a square and a triangle on top. Right, that would be enough to communicate the idea of a house. But you can go further, and you're still using these same elements.

You use a rectangle, which is – you know – a stretched square. You can do a line here, and now you've got a  window on your door of your house. A dot can be your doorknob. You can put another window up  in the attic, let's say, and then a rectangle for a smoke stack or chimney. And then, finally, what about a curvy line? And that would be the smoke coming from the chimney. And now you've got a house. So, you can see it can be as simple as two objects or many objects based on the time you have. And the cool thing about it is

you could start with a very simple one and after you do your sketchnote you can come back and fill those in. So, let's do another one; let's do 'book'. How would I communicate 'book' in the simplest form? So, one thing I'll say about this approach of five basic elements of drawing is it's a little bit of a game. So, you can see here I've done a rectangle and a line down the middle or two rectangles next to each other, I  guess you could say. It's very, very simple, but it communicates the idea of a book,

especially with the word below it. And this is really important. This idea that *words and pictures work together* in Sketchnoting is really critical. It's really important because you have the power of both and they support each other and they add to each other, which is a positive. So, you can see I could stop here. So, the game is: how *few elements* can I use to communicate an idea? It's a little bit like the game Pictionary – how few things can you use to draw to get your team to recognize? – a similar idea in some sense.

But you can also, just like with the house, *add more detail*. So, let's add another line below and connect it. And what you may notice is, even  though it's just a two-dimensional drawing, what I just did sort of suggests to your mind that you're actually seeing dimensionality. This can really be reinforced if you have, say, a gray marker and you run a gray marker here. It reinforces it; there's shade here; that there's depth, light's on the top, shade on the side. But all you've done is drawn a line and connect it.

So, when you start thinking about that, really what you're doing is you're *providing enough information* for your brain to *interpret* this object as something. And that is a huge weight off your shoulders because now you don't have to be a great artist; you simply have to draw this object well enough that your brain can interpret it properly. So, let's add some more detail, so books have text on the pages. Now, this is quite small, so I wouldn't try to draw text, but we can do lines, and now this suggests that we've got text on the page.

Some books also have images. So, let's draw an image – a square. I'll put a triangle in there – maybe it's a photo of a mountain – and then finish with two more lines. So, now it's getting the feeling that it's a book with text on the pages. There's a picture, and it's got some depth to it, which is kind of cool. Now, the third one I'm going to show you is coffee, one of my favorite drinks. So, you might start thinking if you're going to draw coffee, now you have to think about

perspective and circles and "Oh, I'm not good at circles!". Here's another trick around this approach: stay *two-dimensional as long as possible*. This really reduces the stress on you. And if  you can communicate an image in two dimensions, then do that. Don't feel compelled to draw in dimensionality or in proportions if you're not comfortable with that yet. That may be a later skill. So, stay two-dimensional as long as possible. And I'll show you what I mean by that.

If you have a cup of coffee – let's say it's one of these cafeteria cups – why can't you just simply use rectangles and draw the side view? It still will represent as a cup of coffee. So, let's do a half circle here and one inside, so now we've got the handle on the coffee. And then, finally – just like with the house – let's put a little vapor coming off of it. And now you're implying that the coffee is hot. There's a little bit of vapor coming off of there.

If you happen to be a tea drinker, well, all you need to do is write the word 'tea' below here, right? The beautiful thing about this is you're staying simple. It turns into a bit of a fun game  to see how few elements can you use to represent the idea of something. It's representative. It's a simplified version. You're *not going for realism*. It *doesn't have to be beautiful*, but it  *must communicate the idea* to other people or at least to you if the sketchnotes are for you. So, I think that's really important to think about as you're doing this drawing

and you're seeing how it can impact the work that you do. What I want to talk about now is what happens  when you start to practice drawing with these five basic elements. You're effectively building a visual library. What I mean by that is the more often that you draw objects repeatedly, you will then build a library of those objects in your mind.

Now, you can of course have it on a piece of paper that you slide in the back of your notebook, just like this, if you wanted to make a collection that way. But as you draw these things over and over again, you start to build that library in your head. So, finishing the food theme next to my coffee or tea, let's talk about pizza, and specifically a slice of pizza. So, you might be tempted to simply draw a triangle. I would avoid that.

And the reason why is, a slice of pizza really comes from a whole pizza – you should do a  curve here, do a second curve in parallel, and now you've got crust. Now, remember the trick I taught you around the book. We can do the same thing here. You just draw another line below there, and now  you've got depth to the pizza crust. Now, the other thing I'll show you is if you're going to draw, let's say, pepperonis, have them partially on the pizza. Maybe there's one here. I can fill them  in with some shading;

just some lines to give them some depth. And the reason that I say you use a curve is really like – you know – this slice of pizza is coming out of a circular pizza. So, you're reinforcing that it's a piece of a whole without even having to say those things. So, there's a really simple way to draw a slice of pizza. So, what's really interesting is you can actually build quite a few icons. So, let's do a little icon drawing, and then I'll label afterwards to show you

how you can build a visual library that you can use over and over again. If you're someone like me – I'm a designer and I live in the world of deadlines – so, five o'clock on Friday is often  a deadline for me. So, I can simply use this symbol in the sketchnotes that I do or the notes that I'm taking to represent a deadline that's upcoming. What about *ideas*? If I have an idea – let's say I'm taking notes about some other subject – I would draw like a little lightbulb like this,

and that could represent an idea really quickly. If I have a challenge of concerns about a project – let's say I'm in a meeting taking notes – I'm very concerned about the timeline. Maybe I make the deadline on Friday, but the overall project is still behind. This would be what I would say 'alert'. And this can clue me into delays or problems of all kinds that might be happening, and I want to indicate that. So, very often for these, I'm actually using

these in the notes that I'm taking;  so, if I'm taking notes, more detailed notes, I'll sprinkle these in there. And what they do is help me identify when I scan through my notes, *actions*. So, what's the action here? Deadline on Friday; make sure it's on my calendar; make sure all my tasks are in order and that I'm working toward that Friday deadline. I have an idea. Maybe I need to sit down and write for an hour to express this idea so I don't lose it. But I would write enough that I could represent it later.

So, the next task here would be to sit down for additional time and fill out the details of that idea in a sketch by writing whatever that is. This alert might suggest to me that I need to talk  to my co-workers about issues that we see long term around this project that seems to be losing track – like it's falling behind; how can we address this? Is there something we can move back and accelerate this project to get it back on track? So, the last thing that I'll show you is a very  useful tool for coming up with icons to build your visual library.

And that is TheNounProject.com. This is a website where you can go, you can search any kind of term, and there will return not one but many different ways to interpret that idea as an icon. And this can be really helpful in  building your visual library. If you're looking for certain objects that you use all the time in your work or in your personal life, this can be a really useful tool. I would say the second tool that's good for searching is just Google.com.

And then focus on the image tab when you get the result that you're looking for, and then images will come up. And these can be helpful for just  sparking your ideas around how you can simply communicate this concept. So, these are two really helpful ways to think about building icons and building your visual library. The last thing I'll say is if you're in a specific profession, it could be really valuable for you to take time *every day* and *every week* to sit down and make a list of all the words you would love to have icons for

and then build those icons so that you've got those ready to go. And then have a reference that you carry with you. And as you get into meetings, you can have that reference out and you immediately have a symbol that represents those concepts that's always with you. And then, eventually as you do those more and more, you won't even need the card anymore; it'll be burned into your memory, and you can pull those out at a moment's notice on a whiteboard, on your notes, on whatever it is that  you want to use.

So, that is a really valuable way to think about drawing in a very simple way and to build your visual library – two really key parts to this whole Sketchnoting thing – because I believe if you can make it over the hump of not drawing as well as you'd like by focusing on ideas like this, then you'll be in a really good position to do the rest and feel confident and move forward and experiment and try things, which we're going to do.

When we talk about user research insights,  there is sometimes a tendency to be a bit... dry and effectual. "Our goal is to communicate  what our very important study found to the appropriate people." And sometimes we rely a  little too heavily on detailed reports and   numbers and lengthy descriptions of what we did and what we found. The problem with this, aside from the fact that it takes a really long time to write it up and it sometimes puts our coworkers to sleep,

is that it sets up a *hand-off*. One researcher is going to write up a very big, important academic thing and give it to the rest of the team to  consume, and that is not terribly collaborative. Instead of thinking in terms of reports, I want  you to think in terms of *sharing stories*. Stories are *communal*. They're easier to pass around and talk about than reports. *People remember stories about people* better than they remember facts or numbers. And stories are more persuasive; they tell us why we're building a thing and who we're building it for.

And don't just tell them – *sketch them*. Create simple storyboards to share with folks as information radiators. Sketch together to show the context in which your users are interacting with the product. Take photos of users – with their permission, of course, and following all the appropriate guidelines of regular research. But *share stories about them* and *great quotes from the research*. Make these stories and scenarios part of the common conversation at work. When you're talking about a new feature, talk about how it might help one of the users you all interviewed.

Stories are meant to be *shared*, which makes them an easy collaborative way to get everybody on the team to understand research insights.

So, judging field of view is is basically  figuring out what the user will see wherever you place an affordance, a menu, a hologram, a character, or a scene. And it's just going to be a case of constantly testing. So, low-fidelity prototyping can help you initially start with that testing.

But at some point you're going to have to test in your HMD – your headmounted display. So, building some initial geometry and getting a sense for that scene, the way you're unfolding it. Maybe you just build your first 30 seconds with a minute or so of play time or interaction time. And then build some geometry and test that. So, low-fi it in physical space, in the room. You know, so testing out like the reality, the  feasibility of your ideas in physical space

in the same way you would do like *theater*. It's more like theater design, like a play, a stage play. And so, when you have your team, you can all do it together and you can use improv skills to help you with that. The scissors and tape, whiteboard and improv – that's the cheapest, easiest, fastest way to do VR wireframing or prototyping. But make sure that you are checking your *SDK* – your Software Development Kit. For example, Oculus SDK now allows – that's Meta – allows, hands, legs,

full body tracking; so, if you have that capability, all of a sudden if the user leans in to your flower that's emitting some scent, you might want to take advantage of that, make the flower bigger, pull them in. If they pull away, maybe you take advantage of that because if you're body tracking, you have that feedback and your world can be more responsive to their actual movements. So, take advantage of that. I won't mention too many tools you can use because

this is a changing, shifting environment. But, yeah, you always check Google for the latest VR prototyping tools. Finally, *test with users*. So, once you build some initial geometry, do your own internal testing, ask a user to come in, give them a scenario, ask them to perform a task. And then ask them to think *aloud*. You know – "Tell me what you're thinking and feeling?" Observe and incorporate those kind of observations into your prototype, and just keep adjusting,

building, adjusting, building – it's really important early on to start doing this kind of play testing, if you will, to make sure that people are not having to do too many things that cause discomfort to them physically, mentally, or emotionally.