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 THE 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 PROTOTYPES 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
A 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 the 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 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
Stakeholders
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 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 lines 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 accurate and useful user feedback before investing in costly coding?
_______________________________________________________
ARE PROTOTYPES THE 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 to be better used to iterate and improve designs rather than endlessly specifying them.
_____________________________________________________
PROTOTYPING FOR UX
User Experience is the person's overall experience 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 addresses 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. We humans find it difficult to describe how we feel and distinguish between different emotions accurately. It is also difficult to pinpoint the exact cause of the emotion, partially because emotions can change instantly 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.
The 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 various useful collaboration features.
Designers tend to use both toolsets. 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 the 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 essential, as a non-creatives 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 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 for 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 vital to experimentation and instant capture of ideas.
WHY SKETCH FIRST?
Sketching allows for the 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 bridge better 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
The proliferation of cloud services 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.
Design teams produce prototypes (see diagram below)
Users use them, play with them, test them.
Users discuss the product’s usability. They feedback to design teams on how they felt using the prototype.
Design goes back to the drawing board for further refinement, as per user feedback.
_______________________________________________________
FOAMBOARD 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 various 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.
Paper strip drawings and annotations are usually scanned and stored to form part of project documentation and share ideas with the stakeholders.
As a practising designer, I find this prototyping method to be stimulating and creatively liberating in many ways. 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 distract creativity due to its inherent technical complexities. They tend to get in the way 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 the 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 the client.
TAKE PRAISE WITH GRACE,
AND CRITICISM WITH DIGNITY.
