Published on | Prototyping: From UX to Front End — Medium Jubilee Kim

This is a summary of <UX Foundations: Prototyping> lecture of James Williamson and Diane Cronenwett. Hope it useful!

What is a prototype?

A prototype is an early working model of a design used to gain feedback and rapidly experiment with ideas. In UX, prototypes are typically created through a mix of sketches, wireframes, or mockups depending on your project timeline, where you are in the design process, and how robust the prototype needs to be.

Types of prototype

Sketch

Drawing of the user interface
explore ideas quickly

Wireframe

Grayscale high-level rendering of a user interface
Focused on information and overall layout
Map out application structure

Mockup

Visual design including color, hierarchy, and iconography
Refined representation of final

Interactivity

Any interactive behavior that occurs on the user interface that changes the state of the design or the flow.

Why Prototype?

As designers, we need to prototype to make sure that the design flows and user interface make sense to our users to validate our ideas and concepts early and to test our various dates of the design to deliver a cohesive experience. One of the key ideas behind prototyping is to validate your designs early and often and without a lot of overhead.

Limit the expense of development costs
Test out design concepts
Refine usability of the product
Communication tool for the project team

Prototypes allow you to test out what works, and what doesn’t, before you make the expensive decision to write code or produce assets.

Defining prototype goals

Refining design

Prototypes allows you to physically test your design
You can test ideas, gauge user feedback, and try ideas without code
Higher fidelity prototypes provide detailed feedback on design and usability
Lower fidelity prototypes are looser and provide more room for innovation

Design without technical restraints

Focus on user experience without worrying about technical feasibility
Development restrictions can harm user experience and produce a narrow focus

Increase collaboration

Prototypes spur collaboration more than any other phase of the design process
You’ll need to establish rules and channels for communication
Have a plan in place to keep discussions productive

Selling ideas

Selling ideas easier If the client has a working prototype to test

Important prototyping considerations

Depending on where you are in your design process, prototyping can be done quickly and cheaply using paper or more robustly using more advanced tools to represent advanced functionality.

Another consideration is who you’ll be testing your prototype with. You’ll want to make sure you’re getting feedback from your target audience, so you’ll want to determine if your users will be in person or if you’ll be testing through remote session. Knowing how you will be testing your prototype might change your approach to your prototyping method.

Another important consideration is to use the right tool for the right job. Most prototyping tools will cover low fidelity to high fidelity. But some tools are really made for advanced functionality, and sometimes it’s just faster to string together a few mock-ups using hotspots to get the kind of feedback you need.

Users may click in areas you don’t expect

Overview of the design process

Design thinking is a problem-solving method and while there are a few different design process models, the key steps are largely the same. Let’s take a look at the three key design process models.

The double diamond focuses on key stages of the design processIDEO human-center design modelStanford d.school’s Design Thinking Process

These three models have new launched differences but all models of the design process stress the same key attributes. They’re all user centered with their focus on empathizing with the user to understand their challenges while discovering opportunities and insights. Defining the problem space based on the insights gathered from the users. Ideating through various designs concepts and ideas to come up with potential solutions. Prototyping and iterating on those design ideas and concepts and finally, delivering on the key idea.

Prototyping through the Design Process

Choosing the right fidelity

Fidelity refers to the degree of completeness of the user interface, interactivity, and flows. Fidelity can refer to the visual appearance, but also to the degree of functionality represented in a prototype.

Low-fidelity

Low-fidelity would refer to a design concept that is in a sketchy state and doesn’t have a very defined interface or flow. For example, if you are in the early stages of your project, you might be focused on interviewing users to understand their pain points and get a broad understanding of what kind of experience they might be looking for.

Low-fidelity Sketches

Advantages of low-fidelity

Users are more likely to be open with their feedback. The low-fidelity nature of the prototype gives the impression that the design is in an early concept phase, and if you ask for feedback, users will be more likely to give their honest opinion because it’s obvious that design is in an early state.
Low-fidelity prototypes are easy to create with little time or effort. If you’re using paper, you can quickly sketch out ideas and a few key screens to get the basic concept across. Even if you aren’t using paper, you can use big content chunks and placeholders for images so it doesn’t take a lot of time to think about the interactions and details of the design.
Low-fidelity prototypes are easy to iterate quickly on the feedback. If the first low-fidelity concept didn’t work, then try something new. With low-fidelity prototypes, you can easily come up with a new idea or concept based on the users’ feedback or other things that were noticed after the first prototype and iterate and incorporate that feedback quickly.

Disadvantages of low-fidelity

Limited flows and interaction behavior
Facilitator driven
Doesn’t validate usability

High-fidelity

High-fidelity prototypes are best used for scenarios where you have a solid idea of how the design interface should look and work and you want to get some feedback from the user that is more usability-focused and specific. At this stage, the high-fidelity prototype looks and feels like the real product. High-fidelity prototypes, however, can vary in functionality. Some high-fidelity prototypes have a very defined visual interface, but some of the functionality isn’t fully represented.

High-fidelity Prototypes

Advantages of high-fidelity

They’re more representative of the look and feel of the design. Because the design feels more real, users will go through the prototype as they would a normal website.
The design doesn’t need a facilitator for high fidelity prototypes. If the prototype is close to completion, all screen flows will be accounted for, so generally speaking, a facilitator isn’t required to walk the user through the design. If the prototype is close to completion all screen flows should be accounted for. So generally speaking, a facilitator isn’t required to walk the user through the design. You may be able to use remote testing program with a list of tasks and the user can complete them on their own.
As a result of the finished appearance of the design, most usability issues at this level will be caught. You’ll get feedback on everything including content, field labels, color choices, and general attractiveness and usability of the product. Any usability issues that are remaining or weren’t caught through prototyping, will likely be caught in the high fidelity prototype.

Disadvantages of high-fidelity

Requires more time to create
Users might not be willing to give feedback
Difficult to update

Prototype components

Visual design

The finished layout and design of the project. Color, layout, typography, and all other visual components. Low visual fidelity means the prototype focus on other things like interactivity, whereas high fidelity visual prototypes focus on the final visual design.

Interactivity

How UI elements react to input. Include animations and transitions and change screen states. Low fidelity prototypes are static, while high fidelity interactivity simulates how application react to user interaction.

Data and content

Any page content such as text or images. Low fidelity will show placeholder text or boxes for images. Higher fidelity use actual text or represent how dynamic data will appear.

Environment

The physical aspect of how users interact with your product. This can include where they are, what types of devices they’re using, and in what context they are using it. Low fidelity environment doesn’t seek to replicate or test for the physical nature of the prototype. Hi fidelity prototypes will attempt to recreate the device and conditions for using it.

Social

How are you just likely to want to share or distribute the content of application? What level of access will you give them to the content and how will you give them channels to distribute it? How will your prototype communicate this?

Testing and evaluating prototypes

At a high level, the general work flow for testing and evaluating prototypes for each level of fidelity follows a basic format. You may need a facilitator, and this person can be a user researcher or someone else who has a neutral mind set, and who is very familiar with the prototype and the design goals.

It’s very important that the facilitator is neutral because you don’t want someone to ask leading questions to the user or to judge the user in any way.
If you’re testing low and medium fidelity prototypes the designer and the facilitator will collaborate to come up with a guide for the kinds of questions you will ask around the design.
The questions for low fidelity prototypes will be open ended and for high fidelity prototypes, the questions may be more specific.
You’ll need to establish a clear goal of what you want out of your test.
Typically, while the facilitator is interviewing the user either remotely or in person the project team and the designer will observe the session.
The goal of testing your prototype is to find out if the designs resonate with users and solve their problems. Sometimes a design approach resonates, and sometimes it doesn’t.

Prototyping tools

Find the best tool for your workflow and your personal process. Another important thing to remember is that you don’t have to know every tool. Find the tools and process that work for you and that you feel comfortable with, so you can focus on the design.

Paper prototypes

Paper prototypes need someone to facilitate the conversation because it takes a little bit of imagination for the user to walk through a simulation of an experience like shopping online when using a paper prototype. A facilitator will be able to offer context by providing scenarios to think about, and to help guide the user, if they get stuck. Or to get the user to speak more about their thoughts on the design to expose what’s missing, and how things should work.

Accessible to anyone
Most collaborative form of prototyping
No technical restrictions
Faster than many other methods
Can build them anywhere and anytime you want
Low cost

Paper prototyping is pretty easy to do. All you need is a black marker, paper, and some sticky notes.

POP

POP can be used for high fidelity prototyping and offers the ability to add mockups and state transitions. One of the limitations of using POP is that you can’t simulate scrolling down a page so everything that is viewable on your screen is all that will be viewable in your prototype.

POP that allows you to take photographs of your sketches

Moqups

Moqups is browser-based, so you don’t have to use a tool to create the design. You can quickly create your prototype directly in the tool. The default style of mock up lends itself to a low-fidelity visual appearance,which helps reinforce that you’re creating quick ideas.

Moqups has a lot of options to add interactivity

InVision

InVision is really easy to use for linking your screens together using hotspots. InVision doesn’t allow you to create your design in the browser like mock-ups, so you will need to use a different software to create your screens, like Sketch or Photoshop. InVision prototypes can be created for the web, mobile, and other devices. InVision has built-in transition states for mobile prototyping, so if you’re using fully rendered mock-ups, you can create high-fidelity prototypes for mobile using this tool.

This overlay gives you some options to select a destination

Keynote

Keynote is primarily a presentation software, but you can use it for prototyping and for wireframing concepts and ideas quickly. Keynote has a lot of built-in animation, so it’s really easy to experiment with different effects to prototype animations and help visualize interactions. One of the reasons you may want to use Keynote for prototyping over another tool is the ability to produce the interactions and animations that you’re visualizing, quickly.

Keynote has a lot of built-in animation

Axure

Axure also has a lot of options to create a high-fidelity visual appearance so you can create your designs directly in Axure that span from low fidelity to high fidelity. I’d like to demonstrate a couple things to give you a sense of what you can do in Axure.

The libraries area contains shapes and elements to build out your user interface

UX Foundations: Prototyping was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

UX Foundations: Prototyping

Cool stuff, every week

More Articles