Sunday, June 17, 2012

How to Prototype

In a previous article, Prototypes Are Your Gateway to Effective Design, I have described
  • The importance of prototypes for better design.
  • What do prototypes prototype?
  • Who are going to be involved with them?
  • And most importantly why do we do them?

However, I haven't really mentioned how to prototype. In this article, I plan to outline a little bit about that.

When you have an idea for a product or a system, you want to get a lot of feedback at first to know how to improve your product, to get stakeholders to know what the heck you are trying to accomplish and to see what is missing.

You have lots of methods but you want to start off with the easy methods that wouldn’t take much time. Changes are easy at first. Contribution is the gold you are mining for and feedback is the main goal.

Those easy methods may include:
  1. Storyboards
  2. Paper Prototypes
  3. Digital Mock-ups

They will help you produce rapid prototypes, rapid feedback, rapid improvement and rapid involvement.

Let's start off with storyboarding.

What is storyboarding?
Storyboarding is illustrating the story behind the system that will take place using drawings and figures to visual motions, animations or flow.

What makes a storyboard a good storyboard?
  • It's on paper.
  • It's about tasks. Not design. Not yet.
  • It has an actual person inside.
  • It conveys the environment of which the design should take place.
  • It conveys what the system works to achieve in a few panels.
  • It communicates the flow of what is happening at key points of time.
  • It communicates idea. Beautiful design is not the key factor just yet.
  • It shows what motivates the people to use the system.
  • It illustrates a goal.
  • It shows how the goal is accomplished at the end of the storyboard.

 How does storyboarding help us?
  • It emphasizes how the system works. It shows how it accomplishes tasks. It communicates the idea.
  • It avoids commitment to a specific interface of buttons or such.
  • It communicates and encourages stakeholders to input and contribute to the system.

While you are storyboarding, there is something you want to avoid. It is focusing on the user interface before focusing on the tasks you want to accomplish.

Remember this: Storyboarding is about tasks. It's about tasks you want to support; tasks that will solve an issue. Tasks you want people to use this system for.

Once you are done with storyboarding, you want to move on the next step. It's paper prototyping.
What is a paper prototype?

It's going to be your first user interface. Instead of wasting your time on a digital mockup, you may want to consider investing in a paper prototype first.

How does paper prototype help us?
  • It will give the look and feel of the system yet it will help you from being distracted by the urge to creating a beautiful interface. At the end of the day you still want more feedback. You don't want to waste a lot of time planning and designing a digital mock-up where you will have to destroy all of it to start over.
  •  Also, paper mock-ups encourage stakeholders to contribute and modify with you. All they have to do is to grab a piece of paper and marker to hop in. That's the whole purpose of prototypes, to get more feedback, right?
  • It's easy.
  • It could be really fun!

Here are some tips for making paper prototypes:
  •  Have a storage place for them. You don't want to lose your tiny glue and paper buttons.
  • Do it fast. It doesn't have to be neat or pretty. It has to convey the message.
  • Make reusable components such as rulers, buttons, etc.
  • Describe hard to stimulate actions such as hyperlinks verbally.
  • Use a poster board or white board for illustration.
  • Use hardware with paper for better stimulation, such as using a frame as the computer screen.

After you have gotten lots and lots of feedback from your story board and paper prototype, you can move on to digital mock-ups.

What is a digital mock-up?

Digital as the name conveys. It's a conceptual design or illustration just like the paper prototype that it digital. It does not need to be complete. It does not need to be functional. It is a way to explore further.

How does a digital mock-up help us?
  • Digital prototypes will help you stimulate some extra "stuff" such as pixels and specifics.
  • Storyboards and paper prototypes will get you valuable informal feedback where as digital prototypes could be your first step to more structured critiques and controlled experiments.

At the end of the day, there are more numerous ways and techniques to prototype, but you want to remember one thing. At the beginning, at the very start, you want it to be simple. You don’t want to waste a lot of time building something that you know for sure it will be modified and altered. The main goal is communicate the message and get the feedback. Storyboards, paper prototypes and digital mock-ups could be your start.

Image 1 Credits to:   Zole4
Image 2 Credits to:  Grant Cochrane

Related Posts Plugin for WordPress, Blogger...


Post a Comment

Design by New WP Themes | Lasantha - Cheap Web Hosting | Top Web Hosts | Great HTML Templates from