All posts about

How & why prototypes are mandatory for good design

From lofi to hifi prototyping, the experience maquettes of the designer.

“Nothing brings you closer to the functionality of the final product than prototyping. While wireframes sketch out the blueprint and mockups show the feel and texture of the design, it is the prototype that brings to life the ‘experience’ behind ‘user experience’. That beautiful call-to-action may look great on the screen, but you won’t know if it works on end users until the clickable prototype. Not only do prototypes help provide proof of concept, they more importantly expose any usability flaws behind the wireframes and mockups.”

(Jerry Cao a.k.a. @jerrycao_uxpin ~ Design Shack)

How prototyping is replacing documentation

We seem to be still in the deliverable business.

“Creating a prototype as a final deliverable allows for greater interaction with the product and a deeper-level understanding of how the product is experienced. It can also easily be adopted for usability testing and iterated on quickly and efficiently to push out new versions. Prototyping is also an impactful way to present to your client. People know how to interact with products. Demonstrating interactions with a prototype helps to spark well-informed discussions with clients and can lead to better design more quickly.”

(Ian Schoen a.k.a. @icschoen ~ UX Magazine)

When to prototype, when to wireframe: How much fidelity can you afford?

All kinds of design documents provide you with a view of the future.

“The distinction between wireframe and prototype is almost arbitrary—both are mockups of the proposed application that differ in their fidelity to the final application. The lowest fidelity mockup has hand-drawn sketches which are quick, easy to do, and cheap. A set of black and white static layouts linked via hot zones provides a medium level of fidelity.”

(Garett Dworman ~ Usability Geek)

Five prevalent pitfalls when prototyping

Although I like the label ‘prototypathon’, I still wonder why you should have them.

“In our work with design teams, we see a lot of teams using prototypes today. We’re also seeing many of those same teams fall into traps that reduce the effectiveness of their prototyping efforts. Here’s five of the most common ones we see.”

(Jared Spool ~ User Interface Engineering)

Prototyping for mobile designs

Always wondered why mobile design would be different than plain software design. Is being able to move around the differentiator?

“Building a prototype is a great way to test your design early on with users. Whether you choose to go for a high-fidelity representation, or go lo-fi with paper, you can learn a lot about the usability of your site. Often, teams are concerned with which technique or tool to use because of the litany that are available.”

(Kelly Goto a.k.a. @go2girl ~ User Interface Engineering)

Mobile prototyping: A new paradigm

Mobile not only disruptive for industries, but also for established design practices like UI design.

“Designers and UX professionals use design techniques like sketches, wireframes and mockups to visualise a website during the design process. Can these web design techniques also be used for mobile app design – or is it time for change?”

(Alexis Piperides a.k.a. @alexispiperides ~ net magazine)

Bring Mockups to Life with Real Content

Content, the 80-90% driver of transformational user experiences.

“How do you create the perfect pitch for your new product or service? With a bunch of screens filled with Lorem ipsum? We don’t think so! Here we share our experiences creating mockups for some tough presentations.”

(Antun Debak a.k.a. @adebak ~ UX Passion)

Tips on Prototyping for Usability Testing

Make it as real as possible.

“(…) there are some differences between testing a prototype and testing a fully functional Web site or application. In this column, I’ll provide some tips that can make your usability studies more successful and help you to avoid problems when testing prototypes.”

(Jim Ross a.k.a. @anotheruxguy ~ UXmatters)

Exploring the Problem Space Through Prototyping

‘Prototype’ and ‘Know your people’ as the two imperatives for all designers.

“In our research of what separates the great designers from good designers, we saw that the great designers spent a lot more time trying to understand the problem. They really dove in deep, focusing on all the aspects of how their design would be used and what the constraints and complications might be. Design is all about tradeoffs. Learning how each tradeoff affects the outcome is core to great design. One of the things we saw from the best designers is their use of prototypes to explore the problem. The prototype is the instrument they used to uncover previously hidden constraints and to see the shifts in the outcome of the design.”

(Jared Spool ~ UIE)

Collaborative Prototyping, Groupthink and Design by Committee

Prototypes give you something to talk about and to point to.

“Collaboration in UX is more important than in other fields. Why? UX is all about communication. The dangers of insular thinking in UX are that other people can’t relate to our ideas, even if they are good. When people say “an engineer designed this,” it’s not because engineers are stupid or haven’t thought the problem through. It’s because their values (consistency, supportability, development costs) are not the same as the values of the user (easy, intuitive, powerful).”

(Andrew Mottaz a.k.a. @amottaz ~ Johnny Holland Magazine)

A prototype is worth a thousand words

And give me one word and I’ll make a thousand prototypes. Words are just like requirements.

“Building a good set of wireframes that become a working prototype helps your web project get off to a flying start, it becomes the hub of the design and development project which everyone involved can refer back to. You need to find the right tool to build your prototype. It must be capable of demonstrating how everything will work, whilst not being a complex or fickle beast you have to battle with. Ultimately you need a tool to help shape your thoughts and create a tangible model which is robust enough to be tested with real users and take you through to the next stages of the design process.”

(Leigh Howells a.k.a. @leigh ~ Boagworld)
courtesy of sofia svanteson

How to Choose a UX Prototyping Tool

“A feel of the real is very important in User Experience Design and we often find clients asking for prototypes (proof-of-concept) during the design process. Prototypes better communicate the interactions and navigation of the proposed design than static wireframes and mockups. Prototypes can be created at various stages of the design process (Analysis, Design or actual Test), for an informed user and client feedback to reduce number of design iterations. There is a broad array of prototyping applications available to suit the purpose, skill set and the fidelity required of a deliverable. In this blog we present a brief survey of common prototyping tools.” (Design for Use)

Seven myths about paper prototyping

“Paper prototyping is probably the best tool we have to design great user experiences. It allows you to involve users early in the design process, shows you how people will use your system before you’ve written any code, and supports iterative design. So why are some design teams still resistant to using it? Here are 7 objections I’ve heard to paper prototyping and why each one is mistaken.” (David Travis ~ userfocus)

Open vs. Closed Prototypes

“An open prototype is one that involves the user in a direct way. It is typically something you could hand over to a user. (…) A closed prototype is an experience that users watch, but won’t interact with directly. The lack of direct user interaction can make it harder to learn from a closed prototype.” (Tom Maiorana ~

Wireframes are dead, long live rapid prototyping

“Wireframes, your time is up. You’ve served your purpose. You’ve brought order where there was once chaos and provided gainful employment for thousands of UX designers, but I’m afraid now it’s time for you to go to the big recycling bin in the sky. You’re just no longer cut out for the cut and thrust of UX design and have been replaced by that young upstart called rapid prototyping. In this article I argue why you too should ditch wireframes and embrace rapid prototyping.” (Neil Turner ~ UX for the masses)

Prototyping Theory: Understanding How Prototyping Practices Affect Design Results

“This research examines aspects of the creative process such iteration and comparison, two key strategies for discovering contextual design variables and their interrelationships. We found that, even under tight time constraints when the common intuition is to stop iterating and start refining, iterative prototyping helps designers learn. Our experiments also indicate that creating and receiving feedback on multiple prototypes in parallel— as opposed to serially — leads to more divergent ideation, more explicit comparison, less investment in a single concept, and better overall design performance. Most recently, we found that groups who produce and share multiple prototypes report a greater increase in rapport, exchange more verbal information, share more features, and overall, reach a better consensus.” (Stanford HCI Group)

Design Better And Faster With Rapid Prototyping

“Prototypes range from rough paper sketches to interactive simulations that look and function like the final product. The keys to successful rapid prototyping are revising quickly based on feedback and using the appropriate prototyping approach. Rapid prototyping helps teams experiment with multiple approaches and ideas, it facilitates discussion through visuals instead of words, it ensures that everyone shares a common understanding, and it reduces risk and avoids missed requirements, leading to a better design faster.” (Lyndon Cerejo ~ Smashing Magazine

Sketches and Wireframes and Prototypes! Oh My! Creating Your Own Magical Wizard Experience

“Why is every conversation about wireframes I’ve encountered lately so tense? For instance, at a recent UX Book Club meeting whose topic was a discussion of some articles on wireframes, the conversation moved quickly from the actual articles to the question of what a wireframe even was. What the discussion came down to was this: no one knows the answer, and trying to find it feels like a wild-goose chase—or like wandering off on our own down a yellow brick road to find the all-knowing and powerful Oz to figure the answer out for us.” (Traci Lepore ~ UXmatters)

Resurrecting User Interface Prototypes (Without Creating Zombies)

“To create a good user interface design, prototype your concepts and evaluate them with real users. The more natural you want the user interface to feel, the more details you will have to take care of. This makes prototyping more challenging and time-consuming than the conventional notion of prototyping, which is to build something rapidly and cheaply.” (Smashing Magazine)

Industry trends in prototyping

“Prototypes are meant to be a cost-effective way of experimenting with ideas. They are generally considered part of the pre-planning phase, rather than part of the construction or manufacturing process that results in the final product—although obviously the discoveries made during the process of prototyping should ultimately both inform and shape the construction process.” (Dave Cronin ~ Cooper)