Prototyping web apps: nobody loves a wireframe

Darren Delaye and Michael Leggett, user experience designers from Google.

The advantage of prototypes is that they allow users to experience interactions, not just layout, look, and feel.

To reduce complexity, choose examples of linear experiences to prototype. Don’t try to represent every possible interaction pattern. Then make the key examples as high-fidelity as possible, but “be scrappy” – iterate a lot.

Slideshow prototype: put mocks into a slideshow, then show the slides in a browser. Extremely easy to create and great for presenting the experience, but not easy to pass on (it’s really a demo rather than a usable prototype). To share it, you can make a video of yourself running the slideshow.

Hotspot prototype: create click targets within the mockup. Advantage is that it’s multi-branched and you can show more scenarios.

HTML prototype: use HTML where needed for the key example interactions, then use images to fill in the rest of the prototype. (Example: menu links are clickable, but the menus that display are images.)

Prototype as commercial (to sell your idea, convince people it is worth doing) vs. prototype as spec. A prototype plus discussions can be the final spec.


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