Stop making images! Prototype first!


Sounds crazy, coming from a designer, right? But I really mean it. The profession I’m involved in has always been closely aligned with making images, static images on screens. But if we really want to evolve our profession and the industry at large, we have to stop using old methodologies and stop making images!

Recently, I went through a lot of back and forth while having to produce an information architecture diagram of a redesigned navigation system for a Web-based application. We were trying to restructure the contents and enhance the navigation through the application.

We were meeting every day to go over the intricacies of the IA and getting nowhere fast. Add to this the mounting pressure to simply produce more and more diagrams, and I quickly found myself in a strange unworkable situation. The thing that I realized was that while I was talking about information architecture (which is primarily a domain-specific language), the real issues that we needed to solve were pushed further and further away the longer I tried to shop around diagrams.

So I just stopped making them.

Instead, I just went back to a core principle I tried to instill in my team, which is to do whatever it takes to show how the experience works. In this case, I just started prototyping.

Now let’s get some stuff clear. To me, prototyping of the kind I am referring to is not intended to be the high fidelity, dot every “I” and cross every “t”, kind of prototype. This is lo-fi stuff, which is to do the most minimal amount of detail work to communicate the idea. Basically, you want to make it as lo-fi as you can get away with, while still making your point.

So this meant making some black and white wireframes, and making them clickable.

Old school design process would tell you not to do this. It would tell you to move more methodically through the design, creating lots and lots of artefacts like IA maps and wireframes to help you convey your interactivity. But you really don’t need to do any of that if you can prototype first.

The best part, is you don’t need anything fancy to do this. If you’ve got some way to make images and some basic HTML skills, you can crank out a working model in an hour or two. There are even more simple ways to create prototypes. Heck, I’ve even made prototypes using PowerPoint! The basic idea is to make it as low fidelity as you can get away with. It will save you time to not have to polish every detail (like colors and typefaces), and you’ll be able to understand how the user experience is impacted once it’s an actual working model.

So what are the benefits of doing things this way as opposed to the old school method?

  • Saves time
  • Trust your instincts; creative solutions flow faster
  • You’ll see better interaction patterns when it’s a working model
  • Teams iterate faster with more context
  • You can move into usability testing much easier.
  • Invention is based on working models, not drawings of working models.

Saves you time

It may seem weird, but prototyping first will actually save you time. Why? Because you can omit all the extra process and iterations that would’ve been necessary if all you did was send around static screenshots. People will get a feel for the system once it actually works, and it will be conveyed more quickly when it’s built as an interactive prototype.

Trust your instincts

So when you’re actually building designs in an interactive medium, you start to really understand interactivity in a different way. This is because you’ll be using interactivity to convey ideas, as opposed to just static images. The medium you’re using is much closer to the final result. So doing things this way, you can develop more ideas more quickly, and really use your creative instincts to drive innovation.

See better interaction patterns

You might “see” interactivity as you develop your wireframes, and you may want to use multiple wireframe iterations to help “bring people in” to the design process. But when you use functional prototypes to convey ideas, you’ll be able to spot problems and flaws in the design much faster, and create better interaction patterns right from the beginning.

Teams iterate faster with more context

When you start using prototypes as your deliverables, you’ll be able to convey the intricacies of the design much easier than if you were just handing over a huge multi-page spec document. Especially if you’re using agile, you can “chunk” specific parts of your prototype for development, instead of potentially confusing and abstract user stories and spec docs. An interactive prototype will help show the context for certain behaviors and functions much easier than a written paragraph. Everyone benefits.

Move to usability testing much easier

This is a no brainer. You’re already building a prototype, and depending on how much detail you put into it, you may be ready to move into testing as soon as you get a “high sign” of approval. Otherwise, just shore up your prototype for “just enough” functionality to seem believable. Testing faster means you get feedback faster, which means you can incorporate customer feedback into what you do at a much faster rate. It’s a win-win.

Invention is based on working models

The bottom line is this: you cannot invent great things without using working models. Edison, America’s great inventor, built numerous prototypes of light bulbs before arriving at the ultimate version. What he did not do, is draw a lot of light bulb designs, and build only the final version. The same thing applies to interactive systems. You have to build it to see all of its flaws, and then and only then can you fix what’s wrong.

It will feel VERY strange to be starting with a prototype. But if you can set aside your initial discomfort, you will find your thinking gets sharper, and the solution will progress much faster, since you’re using interactivity to convey ideas, and not just static images. Furthermore, it benefits everyone involved.

This is what I think. Now I’d like to hear what you think. Do you use prototypes at your job? Or do you just pass around images? Have you tried both? What are the pros and cons? Add your comments below!

Stop making images! Prototype first!

Leave a Reply

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

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s