How should I create lo-fi (non-interactive) UI prototypes?

Question

I'm currently working on throwing together some basic prototypes, partly to gather requirements and partly to design the final UI.

At the moment I'm trying building up the screen using Post-it notes, with yellow notes for information and pink for actions (buttons or menus). The idea being that you can easily move, remove and add information. But I'm sure there are more efficient methods out there.

What is the recommended way for developers to efficiently create non-interactive UI prototypes?

And why?

---

I tried some pen, paper and Post-it note versions and they went down like a lead balloon (likely my drawing skills). In the end I used Balsamiq, which thus far is liked by most users and they get it is prototype. Alas, some people are still having problems with the idea that first one should get an idea of what the application should do via some lo-fi prototypes and really want to "see something on the screen" before committing to anything.

Answer 1

I prefer a whiteboard.

It makes it easy to change as you make decisions without redrawing the whole thing. It's easy to share with other (nearby) developers. It's easy to annotate using sticky-notes or other colors.

Answer 2

Balsamiq mockups are usually the first port of call, almost as quick as using a pen and paper and reusable.

Plus you can add some degree of interactivity if you wish, linking pages together for example.

http://balsamiq.com/

Answer 3

The Pencil Project is a Firefox addin that does nice and simple mockups.

Pencil provides various built-in shapes collection for drawing different types of user interface ranging from desktop to mobile platforms. Starting from 2.0.2, Pencil is shipped with Android and iOS UI stencils pre-installed. This makes it even easier to start protyping apps with a simple installation.

Popular drawing features are also implemented in Pencil to simplify the drawing operations...

Answer 4

I use a combination of MS Paint and Visual Studio. I use VS to drag/drop all the controls I want onto a form, then screenshot it into MS paint to rearrange them until I like the way it looks.

This way I can use simple, familiar, free, and always-accessible tools (for me) to mock up my UI, and the client can see the UI as it will probably look once the application is finished. In addition, often VS ends up containing the beginning of my project for me.

Edit: Toby's answer lead me to Balsamiq, and that is now my primary tool of choice for UI mockups to present to other people.

I still pull out MSPaint or pen/paper on occasion, but that's usually only when I'm sketching basic UI design for my own reference, or if I want to present the client with two options for a completed screen (ex. "Do you want the buttons Here or Here?")

Answer 5

It sounds like you're using good methods, but you're running into resistance having people accept the utility of rapid prototyping. Everybody loves to code, but if a half hour in, they're still fighting with JScrollBars and you've generated 12 mockups, they might understand that the strength of these tools is in rapid iteration.

That being said, the various low-fi approaches have different strengths:

• Whiteboard prototyping is useful because anyone can participate and it helps ground ideas, but it's only a discussion tool. You want something one step further if you're going to iterate on a design, if only because it gets hard to erase old marker. ;)

• Paper prototyping is useful because people understand it is impermanent and open to change, and you can iterate quickly, and you still can get very good results. Do a usability test with some users on a paper prototype and you can get great feedback on a design very rapidly, at quite low cost. People get really engaged when they can see and feel the interface on paper.

• Balsamiq is a shortcut for rapidly making paper prototypes that are reusable. I print out screenshots and use them as paper prototypes. I also use it during meetings to help mock up ideas as we have them--similar to whiteboard prototyping. I've also used Visio and OmniGraffle for this.

• Cut and paste prototypes are good for iterating on an existing design--take a screen shot, chop it up in an image editor, and mix and match with new controls (from Balsamiq or elsewhere). Once again your goal is rapid iteration of the prototype, not something that looks good.

I never do prototyping with users. I do it with the design team, based on the user data we have. Users are not designers; if you treat them as designers, you end up with watery tomato sauce, bitter coffee (thanks Malcolm Gladwell), and The Homer car. Gather user input to your design and use it to refine the design with the design team.

Answer 6

My first mock-ups are always pencil & paper or whiteboard, but once the basics are nailed down I usually move to HTML. I have a bunch of placeholder images that simply say "Header", "Banner", "Image", "Chart" and the like. Some simple CSS for laying things out somewhat sanely and I'm done. A little JS tacked on to a control can give you some semblance of functionality, and people just seem to "get it" better.

The only problem with this is that I'm probably the world's worst living UI designer, and sometimes have to remind people that I'm just gathering requirements, not showing them what the completed thing will look like. I often set the background to pink or something, so whenever anyone asks "Does it have to be pink?" I can counter with "This is just a mock-up, the real thing will look different" (or "You'll have to discuss that with the designer").

Answer 7

I use pen and paper first, then after drawing the UI a few quick times, I try to make it in powerpoint 2 or 3 times. Having 5 or 6 iterations before getting into the actual editor helps me cut down on unworkable UIs (such as generating content Y based on textbox X when the user has not even seen X yet). I see it as a chance to get out the stupids right away.

Answer 8

Pen & paper / whiteboard, and you can also use Visio or something similar (Visio comes with UI templates for common controls). Sometimes I take shots of existing (similar) UI that we have and cut and paste the new UI onto it using a paint program like Paint.NET.

Answer 9

I've done rapid prototyping in Delphi several times. It makes it easy to very quickly throw together a screen layout, much quicker than in powerpoint or visio. The resulting exe can be attached to e-mails without requiring any dependencies. Since I use it to prototype web apps, there's no danger of people confusing the prototype with a halfway finished version.

I've tried to do the same with Sencha Ext Designer, but the layout system of Ext JS is harder to use, and it felt like more of a burden than a convenience to rapidly iterate ideas.

Answer 10

I don't always use the same approach. Some of the techniques I use are (in rough order of frequency):

• Whiteboard (for prototyping interactively/discussing. Take a photo afterward!)

• RAD-style GUI designer (Visual Studio, NetBeans, Delphi)

  • Get good at this, and it can actually become one of the fastest ways to create prototypes of a "windows, widgets, and forms" application. Bonus: the prototypes can end up looking really pretty professional, depending on how quickly you throw it together. They can sometimes even serve as a launching point for creating the real thing, once a prototype is approved.
    
    

• Paper and pen/pencil (usually for brainstorming to myself)

• Static HTML/CSS/JS files on disk

  • I'd imagine a WYSIWYG design application wouldn't hurt here, but I usually just hack on the raw HTML. I don't do a lot of these, anyway.
    
    

• Vector drawing tools - Illustrator / Inkscape / Visio / PowerPoint / Impress

• Raster graphics tools - Photoshop / Gimp

• ASCII art ;-)