PROTOTYPING? WHY BOTHER?

Updated: Oct 25, 2019

Prototyping is a term that most designers and non-designers alike would be familiar with. Here I explore prototyping for UX, what it is, and why prototyping matters in the design process.


This blogpost is extracted from my recently published booklet (free low res version)

A BRIEF GUIDE TO PROTOTYPING FOR UX





THIS GUIDE COVERS:

  • Prototyping for UX fundamentals.

  • Using prototypes to solve UX problems.

  • The basic principles by which prototypes are generated and tested for their effectiveness.

This blog post is not meant as an in-depth manual, but rather as an indicator of prototyping methodologies, with each section (pointing to an area of further investigation.


TOPICS:

  • WHAT ARE THE BENEFITS OF PROTOTYPING?

  • CREATIVE EXPLORATION AND PROTOTYPING

  • PROTOTYPES AND COLLABORATION

  • ARE PROTOTYPES SAME AS WIREFRAMES?

  • PROTOTYPING FOR UX

  • CAN EMOTION BE MEASURED?

  • RAPID PROTOTYPING

  • FIDELITY

  • LOW FIDELITY

  • HIGH FIDELITY

  • SKETCHING BEFORE PROTOTYPING

  • ADDING STRUCTURE TO SKETCHING

  • DIGITAL RAPID PROTOTYPING TOOLS

  • PROTOTYPE TESTING PROCESS

  • FOAM-BOARD SMARTPHONE MOCKUPS


_______________________________________________________


WHAT IS A PROTOTYPE?

The term draws its origin from Greek PROTOTYPOS meaning FIRST OF ITS KIND. Most creative processes that eventually lead to the design of commercial products start as:

  • Rough sketches

  • Evolving into more detailed design iterations through user testing

  • Before they became fully fledged final products


Prototype is a first, or pilot version of a design from which other forms are developed. It is a working model of a finished product built to test a concept, and crucially, a process that can be learned from. Its purpose is to emulate not just the functionality of a product but also its look and feel.


“Prototype is a quick, preliminary version of an idea. It can be a draft version that can be thrown together in a flash, or a more finished and detailed version of a proposed solution. The idea is that one can use the prototype to imagine possible futures.”

Runa Sabroe, Project Manager, Danish Design Centre



______________________________________________________


PROTOTYPE EXAMPLES



WHAT DOES A PROTOTYPE DO?

  • It simulates specific aspects of how a product is meant to function.

  • It makes user testing possible before full production can take place.

  • It is an integral part of evidence-based design methodology.


WHAT DOES IT NOT DO?

  • Due to its limited construction it cannot offer the look and feel of a finished product.


_______________________________________________________



WHAT ARE THE BENEFITS?

SOLVING DESIGN PROBLEMS

Prototypes can be an efficient way to work through design problems before getting deep into costly and time-consuming coding.


EVALUATION OF DESIGN IDEAS

Prototypes are often used to evaluate design ideas – concepts, flows and interactions, before investing in development time.


COMMUNICATE DESIGN IDEAS

Prototypes take ideas out of designer’s head, onto the page and into a format that feels closer to the real thing, closer to the real user. These may be presented within a company, shared with coders, and indeed used to draw feedback from users.






_______________________________________________________


CREATIVE EXPLORATION AND PROTOTYPING

Prototyping can add a whole new area of creative exploration to design thinking as it gives an early understanding of complex challenges in the design process of problem solving. It offers:

  • Tangibility, experiencing and testing of results and essential basics of design thinking

  • Aids ideation

  • It allows users to participate early in the innovation process.


WHO BENEFITS FROM PROTOTYPING?

  • Designers

  • Users

  • Stake holders


EARLY USER FEEDBACK

Prototypes are the best way to generate early user feedback, essential to effective design. It allows the design team to:

  • Explore and try out design ideas

  • Validate design requirements and assumptions

  • Communicate ideas to cross-disciplinary groups

  • Reduce the high risk and costs of developing ineffective designs.


“Thinking with our hands, or prototyping, is a powerful strategy for design thinkers as it can generate better results faster. By actually building an idea (with materials, rather than with only our minds), we quickly learn its limitations and see the many possible directions we can take it. Thus prototyping shouldn’t come at the end of the process, but at the beginning!”


Tim Brown, CEO of IDEO.com


_______________________________________________________



PROTOTYPES AND COLLABORATION


Prototyping stimulates collaboration more than any other stage in the design process. Collaboration, however, cannot be taken lightly as clear channels of communication must be in place.

Productive discussions are essential. Strategy is all too often set and dictated by discussion leading to prototype production and analysis for its effectiveness. This strategy must address the following questions:


  • Are line of communication clearly established?

  • Do all members of the design team know their roles?

  • Do prototypes allow the physical testing of the concept?

  • Can a test give an accurate and useful user feedback before investing into costly coding?



_______________________________________________________


ARE PROTOTYPES SAME AS WIREFRAMES?


Prototypes are something we can hold in our hand - touch, feel and interact with.


Wireframes, also known as visual mockups, show a single state and cannot be considered prototypes.


Because of their static nature wireframes are not best suited to defining dynamic on-page interactions.


Wireframes can often slow down the design process as they tend to spur burdensome documentation. Creating and annotating detailed wireframes takes time and effort that could be better used iterating and improving designs, rather than endlessly specifying them.



_____________________________________________________


PROTOTYPING FOR UX


User Experience is the overall experience of a person using a product, such as a website or apps. It’s about how easy, or pleasing it is to use a product.


UX asks a simple question:

How does the user feel using a product?

  • Happy to use the product

  • Not sure if the product adresses my needs

  • Unimpressed

  • Not happy to use the product

Prototyping is about finding out as early as possible in the design process if a product triggers a positive emotion. The product relevance to the user, the clarity of content and navigation can lead to positive emotional responses.


CAN EMOTION BE MEASURED?

Andrew Meyer of Stanford University argues that emotion is an inherently complex subject to study. Us humans find it difficult to accurately describe how we feel and distinguish between different emotions. It is also difficult to pinpoint the exact cause of an emotion, partially because emotions can change in an instant and can be triggered by a variety of unrelated factors. In an attempt to meet these challenges, researchers have created many different emotion measurement tools such as psychological, verbal or non-verbal.



_______________________________________________________


RAPID PROTOTYPING


Rapid prototyping doesn’t refer to any specific tools used in the prototyping process. It is a design methodology that facilitates fast prototype generation, reliable testing and quality iterations based on prototype testing outcomes.


With rapid prototyping designers can build UX earlier in a product’s lifecycle as they can now receive more reliable feedback following prototype testing.


The traditional pen & paper, with scalpel and masking tape added to the mix is a great way to start the process and explore initial ideas.

Below screen shows a typical high-fidelity digital desktop-based tool for rapid prototyping of mobile, web and desktop apps.


Most of the digital tools will facilitate interactions by simple drag-and-drop, with a variety of useful collaboration features.


Designers tend to use both tool sets. Which of the two will be more prevalent in a designer’s toolbox is a matter of personal preference.


_______________________________________________________


FIDELITY

Fidelity refers to the level of visual detail within a prototype. At their outset prototypes usually start as rough sketches before they are rendered into more polished versions.



LOW fidelity

Just a rough sketch outlining content and basic navigation


MEDIUM

It will have some refinement to it compared to Low Fidelity


HIGH fidelity

The visuals very closely resemble the final product.


_______________________________________________________


LOW FIDELITY


PROS:

  • FAST - instant capture of ideas

  • INEXPENSIVE - all that’s needed is pen & paper, and sometimes a little glue or masking tape

  • Technical skills not essential

  • UNIVERSAL - anyone can contribute to the creative process, bringing a variety of design perspectives to it.



The capacity of Low-Fi prototyping method to encourage the non-creative members of the production team to contribute their ideas is particularly important, as a non-creative’s perspective and insight can play a crucial role in the success of the creative process.


CONS:

  • Can be too open to interpretation

  • Not overly user friendly

  • Can ask a lot from testers’ imagination

_______________________________________________________



HIGH FIDELITY


High-fidelity prototypes are highly polished. Their purpose is to give the developing design a look and feel that are close to the final product.



PROS:

  • Offer a clearer idea of the final product

  • More user friendly

  • Online sharing and collaboration

  • Real-time previews

  • Look and feel closer to the real product.


CONS:

  • Technical skills essential

  • They can take a long time to get ready to a testing stage*.

  • Can shift user testing focus to ‘eye-candy’ and away from UX and usability.



_______________________________________________________



SKETCHING BEFORE PROTOTYPING


Despite all the technological advancements, the top tool for any UX designer is pen & paper. Computers, the drawing and prototyping packages are pivotal to the design process, but pen & paper continue to be of vital importance to experimentation and instant capture of ideas.


WHY SKETCH FIRST?

Sketching allows for exploration of many different design alternatives. It firmly draws the focus on structure, architecture and navigation. Sketching forces the designer to concentrate on the essence of the design itself, rather than embellishments.




_______________________________________________________



ADDING STRUCTURE TO SKETCHING


  • Identify the pages / components to be sketched

  • Outline the purpose of the page – what’s the goal? What does the design need to achieve?

  • Determine what needs to go on the page? What does a user need to be able to do?

  • Determine user requirements for the page – who will be using the page? How will the design need to support them?

  • Keep annotating.

  • Scan your sketches. Keep them organised. Streamline the retrieval.



_______________________________________________________


DIGITAL RAPID PROTOTYPING TOOLS


The main benefit of digital rapid prototyping is to better bridge the communication gap between designers, developers and stakeholders. They offer features such as:


  • Look & feel close to a finished product

  • Adaptive layouts across a variety of devices

  • Online collaboration and real-time previews

  • Dynamic elements

  • DropBox support

  • User testing features

Proliferation of cloud services in recent years has pushed a move from stand-alone applications to web-based tools. Web tools are a great way to share and preview prototypes in real time with stakeholders.


_______________________________________________________



PROTOTYPE TESTING PROCESS


The primary purpose of prototyping is to gain feedback through user testing. This feedback should clearly spell out whether the prototype meets user needs and expectations.

  1. Design teams produce prototypes (see diagram below)

  2. Users use them, play with them, test them.

  3. Users discuss product’s usability. They feedback to design teams on how they felt using the prototype.

  4. Design goes back to the drawing board for further refinement, as per user feedback.


_______________________________________________________



FOAM BOARD SMARTPHONE MOCKUPS


As part of my prototyping work I have constructed a set of foam board mockups of iPhone and generic Android smartphones. The mockups closely mimic the handsets for their size, volume and shape.


Strips of paper, gridded or plain, can be inserted through mockup slots, so a variety of different layouts and scenarios can be drawn directly within the screen area, and observed and tested for their effectiveness. Iterations can be done on the fly during testing, or after testing when user feedback data has been compiled.



Paperstrip drawings and annotations are usually scanned and stored to form part of project documentation, but also as a way of sharing ideas with the stakeholders.


As a practicing designer I find this method of prototyping to be not only stimulating but in many ways creatively liberating. Pen, paper and the tactile feel I experience as I develop my visual narrative keeps me focussed on my search for solid structure and UX / UI solutions. Digital prototyping, fast, efficient and convenient though it is, can be distracting to creativity due to their inherent technical complexities as they tend to get in the away of unhindered design thinking.


_______________________________________________________



FINALLY


Hand visualising can help designers achieve great things. But it isn’t the magic bullet of creativity. Nothing is. Nor are the digital tools the enemy of good design. Both methodologies have an equally important role to play in any creative process.


All designers develop their own methods and ways in which they tackle prototyping challenges, but they all tend to share the following:

  • Start creative process with pen & paper

  • Test

  • Iterate

  • Generate digital prototypes towards the end of the prototyping process when enough user feedback has been fed through.

  • Test

  • Iterate

  • Finalise

  • Present to client.



TAKE PRAISE WITH GRACE,

AND CRITICISM WITH DIGNITY.





76 views
QUICK CONTACT :

LinkedIn

​ZigMEDIA © 2020 • Birmingham UK