Once upon a time, prototyping web apps was easy. You’d draw every page, and then use a site map to demonstrate which links went where. Every page was static; nothing moved, there was no Ajax, no infinite scrolling, no drag’n’drop, and most websites were actually about as interactive as a Choose Your Own Adventure novel. Well, those days are gone. People expect more – richer UIs, better responsiveness, less postbacks and waiting around for pages to load – and with libraries like jQuery, there’s really no excuse for not delivering code that satisfies those expectations.
Question is – how do you prototype a rich user interface? How do you draw a picture of something that won’t sit still? For me, that’s where Axure RP comes in. Axure is a “tool for rapidly creating wireframes, prototypes and specifications for applications and web sites”. It’s a commercial product, that I’ve been using for many years now, and I’ve still not found anything that comes close for rapid prototyping.
- Balsamiq, because it’s easy to mock up static user interfaces by dragging buttons, inputs and form elements on to your page.
- Visual Basic, because it’s easy to add behaviour to those elements using click handlers, events and dynamic controls.
- Lego, partly because it’s fun, but mainly because it’s really easy to see that you’re looking at a prototype and not a finished product.
The game Populous was designed using Lego. I grew up with Lego. From a very early age, I learned to use Lego bricks to express ideas. I knew every single brick I owned. I could demonstrate an idea I’d had for a car, or a spaceship, or a robot, by assembling these reusable components into a prototype with spinning wheels and moving parts and a sense of scale and colour. Working entirely in plastic bricks actually become very liberating, because it stops you worrying about materials and finishes, and allows you to focus entirely on expressing ideas.
Have you ever showed someone a Lego house and had them say “Hey, that looks great! When can we move in?” No. People know a Lego house is not a real house. They appreciate that the point of a Lego – or cardboard, or clay – model is to demonstrate what you’re planning to do, not show off what you’ve already done.
Now, have you ever showed anyone an HTML mockup of a web app and had them say “Hey, that looks great! When do we launch?” – and then they look crestfallen when you explain that you haven’t actually started the build yet?
Software is magical invisible thought-stuff, and the vast majority of our interactions with the systems we build are based on looking at pictures on a screen. It’s understandably difficult to tell the the difference between actual working software and “pictures” of working software. The distinction between between an HTML mockup and a completed web app isn’t nearly as clear as the distinction between a Lego house and a real one – and understandably so. HTML is HTML – whether it was hacked together late last night in Notepad or generated in the cloud by your domain-driven MVC application framework. The difference doesn’t become apparent until they actually start clicking things – by which point it’s too late; you’ve made your first impression (“wow, the new app is done!”) and it’s all downhill from there. Axure gives you a wonderful degree of control over this – whilst it’s perfectly possible to build really high-fidelity prototypes with color schemes and typography, it’s also easy to override your styles by applying “sketchiness” to your wireframes – check out this example from a prototype of Spotlight’s authentication system. This is the same wireframe – on the left, we’ve overridden the font and cranked the sketchiness up to produce a back-of-a-napkin look; on the right is the same wireframe, but with the default typefaces and a much higher-fidelity appearance:
I think the hardest questions in software are “what are we doing?” and “are we done yet?”. I think good prototypes are absolutely instrumental in answering those questions, and any tool that can help us refine those prototypes without falling into the trap of “well, it looks finished” has to be a Good Thing.