Linkedin Learning: UX Foundation — Prototyping
Prototyping
A working model of the design to gain feedback and response by users. Design prototype does not require coding. The goal is to get through many iterations quickly and focus on the design not which tool to use. Make sure the prototype does not have errors that could distract the user from the testing. User may click on areas that are irrelevant.
- test out flow and interaction: test out the steps to get through the prototype
- validate design concepts: try out the design idea to see if works in the real world
- rapid iteration of ideas: get through as many ideas as possible
- limit the expense: cheaper process than using code
- refine usability: testing if the product is intuitive
- communicate with the team: demonstrate to others
Sketch: a drawing of the user interface
Wireframe: greyscale focus on layout and information display
Mockup: visual design with typography, color and hierarchy
“Interactivity are any interaction with the interface that changes the state of design or flow”
Design Thinking
It is a problem solving method.
- user-centered
- empathy focused
- problem defined by the user
- ideation
- prototyping and iteration
- delivery of the design
Design Council Double Diamond
IDEO Human-Centered Design Model
Stanford D School Design Thinking Process
Fidelity
It is the degree of visual representation and the functionality of the prototype.
Low Fidelity Prototype
Paper sketch or greyscale wireframe.
Pro:
- users are more likely to be open about their feedback
- easy to create with little time or effort
- easy to iterate on feedback
Con:
- limited flow and interaction
- rely on facilitator
- doesn’t uncover detailed usability issue
Medium Fidelity Prototype
A mix of visual representation and wireframe with few functionality.
High Fidelity Prototype
Close to the finished product with almost full visual representation and high functionality.
Pro:
- more representative of the design
- does not need a facilitator
- user is more likely to use it as a real product
- can use remote testing
- uncover usability issues
- feedback on UI
Con:
- higher cost and more time consuming
- user is less likely to give honest feedback
- difficult to update especially with core functions
Testing and Evaluation
Facilitator is neutral about the design and is familiar with the prototype.
The questions are more open-ended for low-fidelity prototype and more specific for high-fidelity prototype. Avoid leading questions.
“What do you think of this idea?” vs “Can you find an item and put it into a shopping cart?”
The project team should observe the research session.
Prototyping Tools
Paper Prototyping: paper(thicker paper), marker, sticky notes, Pop(mobile tool for linking paper prototype), Marvel(mobile tool for paper prototyping)
Mockup/High-Fidelity Prototype: InVision(cannot simulate data entry), Axure
Interaction/Animation: Keynote
