Prototyping

Introductory articles

  • Basic methods: paper prototyping
    A short overview of paper prototyping.

  • How good does your website look on paper?
    The best way to improve the effectiveness of your company's web site is to let your site's users lend you a hand (quite literally) through the process of paper prototyping. Paper prototyping is a fast, low-cost method of testing web site designs. It involves creating rough sketches of a web site design and inviting some of your users to take the design for a test drive using their pen, instead of a mouse, to complete important tasks.

  • Paper prototyping
    A short discussion of paper prototyping and a set of scaled GUI and web screens and labels and buttons for controls such as fields and form buttons.

  • Paper prototyping
    This method features the use of simple materials and equipment in order to create a paper-based simulation of an interface or system. Paper prototypes provide a valuable and cost-effective means to evaluate and iterate design options before a team gets committed to one implementation. Interface elements such as menus, windows, dialogues and icons can be sketched on paper or created in advance using card, acetate, pens etc. The result is sometimes referred to as a low-fidelity prototype.

  • Recommended methods: paper prototyping
    Overview of paper prototyping in point form.

  • Testing with a paper prototype
    A brief overview of usability testing using paper prototypes.

Discussion articles

  • A web prototyping primer
    "Prototypes are attractive to development teams because they have clear benefits. They facilitate communication by exposing design assumptions, drive ideation, and provide a vehicle for gathering user feedback. But prototypes are complex artifacts: They have many different dimensions and can be created with a variety of tools. Project teams that don't understand these complexities can waste time and effort--and even thwart project progress. Before they start to develop a prototype, project teams need to consider the business objectives that are driving their efforts--and then manipulate prototype attributes to support these needs."
    Note: report must be purchased
    (Kerry Bodine - Forrester Research)

  • Balancing fidelity in prototyping
    "Deceived by their ideas of what clients will accept, many web development teams build prototypes that are too costly and don't serve the purpose prototypes are supposed to. To exploit the full potential of prototyping, it's critical to choose the appropriate level of fidelity."
    (Henrik Olsen)

  • Defining feature sets through prototyping
    Defining requirements and features can be a daunting task under the best of circumstances. The Vision Prototype allows the user-centered vision to be seen--and discussed--by all team members and then easily translated into a set of functional requirements.

  • Evolution, usability, and web design
    Evolution and natural selection relate to the web development process, so encourage designers to create many quick and dirty designs over many short intervals. The ideas of failure, prototyping, usability testing, and iterative design are explored in this article.

  • Extending prototyping (PDF)
    Prototyping, a technique often employed by software developers, has been primarily used for usability studies. We discuss in this paper, through case studies, our experience in the use of prototyping during various phases of the product life cycle, including planning, testing, marketing, and field support.

  • Getting the design right and the right design: testing many is better than one (PDF)
    "We present a study comparing usability testing of a single interface versus three functionally equivalent but stylistically distinct designs. We found that when presented with a single design, users give significantly higher ratings and were more reluctant to criticize than when presented with the same design in a group of three. Our results imply that by presenting users with alternative design solutions, subjective ratings are less prone to inflation and give rise to more and stronger criticisms when appropriate. Contrary to our expectations, our results also suggest that usability testing by itself, even when multiple designs are presented, is not an effective vehicle for soliciting constructive suggestions about how to improve the design from end users. It is a means to identify problems, not provide solutions."
    (Maryam Tohidi, William Buxton, Ronald Baecker, Abigail Sellen)

  • Hand-crafting prototypes in Visio
    "If you are the happy owner of a tablet computer or a pen tablet you can hand-draw prototypes on your computer. In this article we'll look at what hand-sketching is good for and how to built hand-drawn prototypes in Visio."
    (Henrik Olsen - guuui.com)

  • HTML wireframes and prototypes: all gain and no pain
    Mention the use of HTML for wireframing or prototyping, and some information architects and interaction designers frantically look for the nearest exit. In some circles, HTML has acquired the reputation of being a time-consuming, difficult undertaking best left to developers. This is very far from the truth.

  • Introduction to medium-fidelity prototypes
    These prototypes are sort of a best-of-both-worlds implementation that allows for a combination of both high-level and detailed views; rapid, iterative changes; and the ability to conduct meaningful user tests to evaluate complex functionality and to help determine system specifics.

  • Looking back on 16 years of paper prototyping
    "Despite amazing advances in prototyping technology, paper prototyping is still one of our favorite tools for gaining quick insights on new designs. As we look back at how we've used this technique over the last 16 years, we can see that it has adapted well to the new demands from today's design process."
    (Jared M. Spool)

  • Paper as a design tool
    There is one web design tool that is universally accessible and simple to use. It has been applied successfully in other design fields for may years. The tool is paper.
    (Gerry Gaffney)

  • Paper prototypes: still our favourite
    We've been creating paper prototypes and teaching others to use them for the past eight years. In that time, we've learned a lot about what paper prototyping is all about and we're still pleased by what an effective and easy-to-use tool it is.

  • Paper prototyping: getting user data before you code
    With a paper prototype, you can user test early design ideas at an extremely low cost. Doing so lets you fix usability problems before you waste money implementing something that doesn't work.

  • Paper prototyping in the large
    It's always fun to push the limits of a process and see what it can do. Paper prototyping is our method for testing a design with users. With paper prototypes we discover and fix design problems in the context of use. We build paper prototypes all the time for desktop applications and websites. But recently we've pushed the limits of the paper prototyping method in two ways: scaling it down to a prototype cell phone UI and scaling it up to the size of a room. I'd like to share my recent experience with room-sized paper prototyping here.

  • Paper prototyping methods
    Paper prototypes or other mockups are used clarify requirements and enable draft interaction designs and screen designs to be very rapidly simulated and tested.

  • Prototype design
    From the Delta method website, a discussion of prototype design, philosophy and activities.

  • Prototyping with PowerPoint
    "We use PowerPoint as kind of a better version of paper prototypes. This technique has several advantages: prototypes can be made to feel somewhat interactive, because the content is electronic it can be modified more easily than paper, and (best of all) the usability participant uses the mouse and is on the computer, so it feels natural to them."
    (Jensen Harris)

  • Prototyping with style
    CSS can be ideal for use by information architects and interaction designers for rapidly developing prototypes for usability testing, review, and analysis.
    (Jeff Lash)

  • Rapid prototyping tools
    "Prototypes as a design deliverable are on the rise, and for good reason. I am strong believer that prototyping helps us to design better experiences. We are working in a world of rich, dynamic interfaces, both on the web and on our devices. The experiences we design are interactive, responsive, and have emotion. Prototypes allow us to articulate the feeling and function of a design in a way that a wireframe does not. But how do you select the best prototyping tool for the job?"
    (Dan Harrelson - Adaptive Path)

  • The art of UI prototyping
    Even the brightest people make mistakes. This is especially true for teams of people. Somehow, as a project moves forward, small assumptions and well-intentioned but poor decisions accumulate, turning hours of work into a lousy user experience. The smart teams eliminate their mistakes before they ship by using a technique called UI prototyping. Combined with usability studies, prototypes keep teams headed in the right direction.
    (Scott Berkun)

  • The promised land of prototyping
    "While some may claim that prototyping isn't one of the wonders of the world, it's definitely a wonder of web and software development. It can help us design better products and overcome many of the hurdles that tend to surface during a development process."
    (Henrik Olsen - guuui.com)

  • Tools and programming languages for creating interactive prototypes
    This the first in a series of articles exploring the ways practioners go about making effective prototypes. This article presents just one method - the use of HTML and JavaScript.

  • Using paper prototypes to manage risk
    Using the techniques of paper prototyping and usability testing, you can get quick feedback on your product before you have invested a lot of development effort.
    (Jared M. Spool)

  • Using prototypes
    Prototypes can help to evaluate design alternatives at any stage of the development process. Here three approaches are introduced: storyboards, paper prototyping, and HTML prototyping. A listing of pros and cons is given for the prototyping approaches in order to facilitate the decision of which is best for your requirements.
    (Gerd Waloszek and Joelle Carignan)

  • What an IA should know about prototypes for user testing
    There are several important factors to consider when you are planning to do prototyping for user testing. You will want to make careful choices about fidelity, level of interactivity and the medium of your prototype.

  • Which type of prototype?
    We all know that it makes sense to build and test a prototype before you build the real thing. Whether you're building a rocket, a building, a toaster or a software application, you can avoid a lot of problems later by investing time and effort during the design phase. But what is the best sort of prototype to build: electronic or paper? Read the story of Mary and John, who work as developers for a software company, and make up your own mind.
    (Lee Barnard)

  • Why low fidelity prototyping kicks butt for customer-driven design
    "In my discussions with designers, one of the interesting recurring conversations is the tools and process they use to prototype and mock up experiences. In particular, there’s a lot of divergence on how high or low-fidelity to go with a prototype."
    (Andrew Chen - )

Research articles

  • High fidelity or low fidelity, paper or computer? Choosing attributes when testing web prototypes
    "Interface designs are currently tested in a mixture of fidelities and media. So far, there is insufficient research to indicate what level of fidelity and media will produce the best feedback from users. This experiment compared user testing with low- and high-fidelity prototypes in both computer and paper media. Task-based user tests of sketched (low-fidelity) and HTML (high-fidelity) website prototypes were conducted in each medium, separating the testing medium from other factors of prototype fidelity. We found that low- and high-fidelity prototypes are equally good at uncovering usability issues. Usability testing results were also found to be independent of medium, despite differences in interaction style. Designers should choose whichever medium and level of fidelity suit their practical needs and design goals, as discussed in this paper."
    (Miriam Walker, Leila Takayama, James A. Landay)

  • Prototyping
    Two separate studies find no significant difference between high- and low-fidelity prototypes in usability testing.

Case studies

  • Testing a paper mockup of the home page
    This short article discusses how a paper prototype was used to test the performance, and users' impressions of, a design for the Sun intranet home page.

  • Testing web page design concepts for usability
    In order to identify the extent to which visual designs assist users to locate particular elements that might be contained on a web page (such as search, site-wide navigation, and local navigation), we used a usability testing method described by Tullis (1998) to test a set of five web page design concepts. All text elements on each of the designs were "greeked", or turned into nonsense text. This meant that users had to rely on the communicative aspects of each design in order to perform their tasks. The results matched our initial predictions about design elements that might lead to usability problems.

  • Testing whether web page templates are helpful
    Before you unleash a page template on a large number of content creators and direct them to design thousands of pages to its specifications, it would be nice to have more data on the usability of the template itself. This article reports on usability testing of web page design templates by Thomas Tullis.

Templates and tools

  • GoLive: the interaction designer's hammer and nail
    In web development projects, HTML based prototypes have some advantages when it comes to usability testing. In this article we'll take a look at the HTML editor Adobe GoLive, which has a number of features that makes it a decent prototyping tool.

  • Rapid prototyping tools revisited
    "he list of rapid prototyping tools has been updated and can be found below. The list has grown to 42 items with 18 new or updated tools. Please comment with your own perspective on these tools and send me links for more!"
    (Dan Harrelson - Adaptive Path)

  • User interface library
    A library of commonly-used interface elements that eliminates the need to re-create buttons, menus, windows, or fields from scratch. These interface elements mimic real, platform-specific interface standards and can be used to create UI prototypes.

Books and book reviews