Prototyping: storyboarding, paper prototyping

The three main techniques for rapid prototyping are: storyboarding, paper prototyping, digital prototypes.

Here is the graph, that shows the fidelity of the prototypes your get in comparison to the time you spent on them.

You should start with the low fidelity tools, which allow you to create the first versions in a small amount of time. You can start with storyboarding, that will give you the feeling of the tasks and scenarios you are going to support. Then it is time to move to the paper prototypes. Digital mock-ups and static html are the next. Picking the right one helps you to focus on questions you have on a particular stage of the design process.

Storyboarding

The most common mistake while creating the design is the focusing on the interface before you focus on the task it is going to support. The storyboarding is all about tasks. Here is the example from my course project:

I was working on the project, which will be helpful for people, who are dieting and keep track their calories consumption.

The storyboard is a great thing to show what the interface will help the person to accomplish just in a few frames. Good storyboard will always have an actual person in it. The other thing is that the storyboard communicates flow. Much like a comix strip it is showing what is happening in the key points of time.

If you are thinking that you can’t create the storyboards, because you are bag in drawing – you are absolutely wrong.

Storyboarding is not about the “pretty pictures”, it’s about communicating ideas.

Bad drawing can even become an advantage, because the only thing you can focus on is the flow you want to show.

The first thing storyboard should do is to illustrate some goal, then to show how the task unfolds, how the people accomplish the goal in the end of the storyboard.

Things storyboard should accomplish:

• Setting: where the action takes place, who are the people, what in the task, which should be accomplished by your interface
• Sequence: that are the steps to accomplish the tasks, what role UI helps. What leads somebody to use the app
• What motivates people to use the system. What system enables to accomplish. What user needs does the system feel.

Benefits of storyboarding

Here are the most remarkable benefits of storyboarding:

• They help to understand how the system can help to accomplish the tasks users have.
• There is no connection tot he real UI yet – you are not thinking about the particular buttons or other UI elements – you focus on how and why people will use your system.
• Helps the team, all stakeholders to be on the same page. Sad but true that the idea in your head can much differ from the idea your team mate has in his head.
• It take not much time to create storyboard, You are even advised to limit your time, so not to spent to much time on each storyboard.

Paper prototypes

When you have the idea what tasks your application should solve and what goals can your users accomplish with the help of your application – it is type to move to the prototyping. The first  step is paper prototyping or using some low fidelity prototyping tools, like Balsamiq.

Paper prototypes my stanfy.com colleagues were working on

This is the time to think about look and feel and what the actual UI will be. To create a prototype you will need paper, markers and some scissors. That is all. it is the fastest way to try your ideas.

Some tips which can help you:

• You may have a lot of small paper elements – have a special place for them, as it is very easy to lost them.
• Create some reusable components – you can photocopy some elements.
• If some elements are difficult to reproduce – for example, progress indicators, drop down menus – you can just describe how it will be working to the person testing.
• You can use some fixed size backgrounds for your prototypes (ipad, iphone screen size papers) ans steak UI elements to it.
• Print some actual screen shots, if you need them. Make and print any photos of the parts of real interface.
• If you have the layers you can use transparency.
• Removable tape is useful to stick the elements quickly.
• Index cards can be used to simulate the tabbed dialog boxes.
• Use your imagination. You are not limited any way.

Next steps

Not it is time to move to the digital mock-ups.

The first thing to point out here is that you will have to invest more time in creation of the digital prototypes then in the paper ones on the previous step. It is the reason paper prototyping can be so important.

As the fidelity of your prototypes is increasing the kinds of evaluation and feedback you get from people will evolve also. Early on you will be talking about scenarios with people. With paper prototypes you will try some alternative tests and receive critiques for your design team. As you are developing your prototype you can turn to more formal kinds of experimentation – techniques.

Used:

Human-computer interaction course on Coursera by Scott Klemmer lectures.