Posted by: Matthew | October 17, 2008

Modelling interaction design with Paper Prototypes

For many development projects, an application’s interface design is deemed to be more about how it looks than how it works. Look and feel is the realm of graphics designers and is important, but most designers will not appreciate how the application needs to deliver information to the user. Considering the needs of the user in this way is where interaction design (how it works) comes into play and is an important step in any application’s development process.

Working on paper is a great way to prototype screen layouts, controls, etc. With paper prototyping,you can get a feel for how the finished product will work without having to write code! You can ‘run’ the paper prototype by showing potential users what happens when they ‘click’ a button: “If you click there, you’ll get this <place next paper mock-up in front of them> dialog box”. You’ll quickly see what works and what doesn’t; what’s important to the user; what user tasks take too long or too many ‘clicks’ (interactions) to do. Because the sketches are simple, your test users will not be distracted by graphical design, and instead concentrate on the task at hand.

For initial ideas, pencil and paper is great, but when it comes to ‘running the prototype’, hand drawn sketches are too time-consuming to make alterations to or to make presentable enough to be effective. Balsamiqis a cost-effective tool ($79USD) to solve this problem. Balsamiq produces screen mock-ups that have the same feel as hand-drawn sketches, which is important for keeping the essence of paper prototyping. Other software tools create realistic looking mock-ups, which actually ends up being distracting in the same way as fancy graphics; the mock-ups look ‘finished’ and real and so the feedback you get from test users is often not on the interaction.

Balsamiq comes with around 60 ‘controls’to help build your mock-ups. If a control is not there that fits your needs, you cannot (currently at least) create your own. However, at the end of the day, if you can express 90% of your design with the tool, then that’s still a huge saving in time and effort! 

Advertisement

Responses

  1. This looks great. Thanks for blogging about it. I’m just at the point in a new project where my basic test UI isn’t cutting it and this might be the sort of thing we need to make sure we don’t make any horrible mistakes… ;)

  2. This is good in the sense that the customer will be less hung up on the design, as I often get premature feedback about specific functions and look and feel. The more accurate I make a prototype the more questions I get, even to the point when they think it I can just flick a switch and it’s live.

    But how good is this product? Better than powerpoint with a few cartoon images and hyperlinks? I will take a look.

    Thanks for sharing this

    • I like the product a lot actually. It’s not perfect, and there are a few glitches, but its really the quality of output I like. It’s quick to work with and the results are always presentable. Using Powerpoint and few hyperlinks is probably more cumbersome than using Balsamiq.

      Give it a go, and post what you think.


Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

Please log in to WordPress.com to post a comment to your blog.

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Categories

Follow

Get every new post delivered to your Inbox.