10 Prototyping Principles

  1. Make it visual and tangible (Don’t regress into the land of blahblahbla)
  2. Embrace a beginner’s mind
  3. Don’t fall in love with first ideas— create alternatives
  4. Feel comfortable in a “liquid state”
  5. Start with low fidelity, iterate, and refine
  6. Expose your work early —seek criticism
  7. Learn faster by failing early, often and cheaply
  8. Use creativity techniques
  9. Create “Shrek models” (Shrek models are extreme or outrageous prototypes that you are unlikely to build. Use them to spark debate and learning
  10. Track learnings, insights, and progress

Osterfelder et.al. 2014, p 78-9


PICTIVE (Plastic Interface for Collaborative Technology Initiatives through Video Exploration) is a paper mock-up technique that allows users to participate in the development process. A PICTIVE is a representation of a graphical user interface (GUI) or a Web page on paper. A PICTIVE prototype gives a user a sense of what a system or a piece of software will look like and how it will behave once it is finished. PICTIVE enables a non-technical person to contribute ideas to the development process.


Benefits of lo-fi prototyping

Here’s a couple of the main advantages:

  • Get better and more honest feedback
  • It’s great for A/B testing
  • Make the cost of mistakes cheap, not expensive
  • Refine the page flow, not the pages
  • Figure out the interaction design rather than the visual design

Andrew Chen: http://andrewchenblog.com/2009/09/15/why-every-consumer-internet-startup-should-do-more-low-fidelity-prototyping/

Clickable lo-fi prototypes

Benefits for client/agency:

  • Facilitate documenting requirements
  • Allow quick iteration at very little cost
  • Compatible with agile workflow
  • Focus on functional elements rather than visual treatment

Benefits for customer/user testing:

  • Focus on screen elements that matter for the journey (no distractions)
  • Edgy look-and-feel invites to expressing ideas and comments (improvements/changes)
  • Allow for multiple test-sessions in quick iterations
  • Easily allow for A/B/C comparison

Workshop: Rapid Prototyping

A prototype is a visual outline of the interface and an efficient way of experimenting with ideas. It is built to be tested with users in order to get better ideas. A rapidly built prototype helps designers to fail faster and to succeed quicker.

    The three mantras of rapid prototyping:

  1. Think user! Put yourself into the shoes of the user and consider needs, expectations, and constraints.
  2. Start broad – go narrow! Don’t get lost in details.
  3. Be pragmatic! Don’t get emotional with your ideas. There is always more than one solution to a problem.


What to consider when doing a prototype:

1. Page lay-out – How can I organise content on the page effectively and appropriately?

    Think about:

  • The layout-grid for this page
  • Meaningful sections and different levels of headlines
  • Other content items: Images, Featured items, Comments, Ratings …

2. Signposts and Navigation – How can I facilitate site- and page-navigation that is consistent, easy to understand and helps users finding stuff.

    Think about:

  • Menus and subsidiary menus
  • Contextual links (from within the recipe)
  • Buttons where necessary
  • (Meaningful labels for the menus, if not produced in the card-sort workshop)

2. Functionality – What do I need to offer in order to give the user maximum value for visiting the page.


  • Comments and ratings
  • Sharing content with others
  • Printing a recipe
  • Finding similar items
  • Anything else?


“The term [prototype] also implies a certain amount of disposability. 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.”

Another important benefit is that prototyping helps designers fail faster.

Dave Cronin: Industry Trends in Prototyping

Design, prototyping and construction

  1. Prototyping may be low fidelity (such as paper-based) or high fidelity (such as software-based)
  2. High-fidelity prototypes may be vertical or horizontal.
  3. Low-fidelity prototypes are quick and easy to produce and modify and are used in the early stages. There are two aspects to the design activity: conceptual design and physical design.
  4. Conceptual design develops a model of what the product will do and how it will behave, while physical design specifies the details of the design such as screen layout and menu structure.
  5. We have explored three perspectives to help you develop conceptual models: an interaction paradigm point of view, an interaction mode point of view, and a metaphor point of view.
  6. Scenarios and prototypes can be used effectively in conceptual design to explore ideas.
  7. We have discussed four areas of physical design: menu design, icon design, screen design and information display.
  8. There is a wide variety of support tools available to interaction designers.

From: Preece, J., Rogers, Y., Sharp, H. (2002), Interaction Design: Beyond Human-Computer Interaction, New York: Wiley, p.277-8