10 Prototype and wireframing Flashcards
What simulates a working product and allows it to be tested with users, in order to improve the product’s design?
Prototype
What is characteristic of prototypes?
Interactive
An aid for development but shouldn’t be used alone
Typically don’t include annotations
What is NOT a benefit of low-fidelity prototypes?
Optimal for testing with users
You are working as a UX designer on a project and wish to test a rich mapping interaction. Which level of prototype should you use?
A high-fidelity prototype
What is NOT considered a weakness of high-fidelity prototypes?
Capable of creating only limited interactions
What is an annotated specification of controls, rules and feedback?
Wireframe
What is NOT a characteristic of wireframes?
Recommended for usability testing
You are working as a UX designer on a project with a relatively tight budget, but need to test basic product interactions with users. Which level of prototype should you use?
A mid-fidelity prototype
What is recommended when writing annotated notes?
Proof read in one go
Go through notes with developers
Be open to changing the rules
What is a prototype?
Simulates a working product
Simulates the interactive experience
Allows the product to be tested with users
Communicates the solution to stakeholders
Prototypes are a work in progress
The purpose of the prototype is to improve the design
What are the benefits of prototyping?
Helps improve quality of designs Identifies issues before build Reduces the risk of building flawed products reduces costs in the medium term helps validate or invalidate assumptions Helps shore ideas
How can a prototype help manage stekaholders?
Communicate design ideas clearly
Reduce ambuigity - everybody is talking about the same design
facilitates executive feedback and buy-in
facilitates better decision making
showcase design flare (shows the benefits of good design)
What are the benefits of low-fidelity prototypes?
Quick
Cheap
Catches potential problems early
Low skill level needed
What are the benefits of low-fidelity prototypes?
Quick
Cheap
Catches potential problems early
Low skill level needed
What can you learn from a low-fiedelity prototype?
Broad concepts and mental models
finding out if the user “gets it”
optimizing flow
What are the benefits of medium fiedelity prototypes?
More detailed concepts and flows Screen layout and hierachy Basic interaction naviagtion copy and labeling
What are the benefits of medium fiedelity prototype?
sill cheap
Better to test with users
easier to communicate with stakeholders
richer data and insights
What can you learn from high fidelity prototypes?
Access flows and concepts access screen design and layout acces data in/data out workflows access the performance of form design test rich interactions, such as mapping
What are the benefits of high fidelity prototypes?
Ability to convey rich interactions
Stakeholder management
Richer data and insights
What is the process for creating a low fidelity prototype?
Define the flow
Sketch screens and screen states
Sketch elements
Sticth together
What are the pros of low fidelity prototypes?
Quick
Cheap
Manipulate on teh fly
Validates ideas early
What are the cons of low-fi prototypes
limited learning
could be difficult for testing participants
What is the process of creating a medium-fi prototype?
Screens sketches and flow diagrams choosing the prototype tool build the screens incorporate text and labels incorporate inetractions
What are the pros of medium-fidelity prototypes?
value for money
relatively quick
requires attention to details
forms teh basis for wirefreames
What are the cons of medium fidelity prototypes?
learning curve required
tools are not free
capable of creating only limited interactions
What is the process for creating a hi-fi prototype?
Starting point is creen sketches and flow diagram Choosing the ptotoype tool Build the screens Incorporate text and labels incorporate interactions
What are the benefits of testing hi-fi prototypes?
Testing flows and concepts Testing screen design and layout Testing data in/data out workflows Tesing the performace of form design Testing rich interactions
What are the pros of hi-fi prototypes?
Allows for rich interactions Deepst user insight Allows testing of visual style Ability to iterate quickly forms the basis for wireframes and spesifications
What are the cons of hi-fi prototypes?
Difficult to know when to stop
Learning curve required
Time consuming
Not cheap
What is a wireframe?
A wireframe is like a blueprint for builders. It is filled with guides and spesifications
What is ture about wireframes?
Static
Not suitable for usability testing
blueprint for development
includes annotated notes or system rules
What is true about a prototype?
Interactive
reccomended for usability testing
aid for development (don’t use alone)
typically no annotations
What should a handover documentation intel?
Hierachy = Information architecture Structure = user flows Content = Wireframes Rules = Wireframes
What is information architectiure?
How a website is structured How content is organized Influences primary navigation (but not all navigation) Defines where content lives Big impact on the user flow
What is user flow?
Unserstand where it sits in the structure
Understand its sequence in teh main flows
Be consious of different screen states
What are wireframes?
Contains the rules of how the product should behave - and all the different states
What should annotated notes intel?
Define how the system behaves
How it responds to actions
How it communicates results
How it helps fulfil inentions
What is important to remember when it comes to annotated notes?
Proof read in one go
Use another set of eyes
Go though with the developers
Be open to chaning the rules - as long as it does not interfare with the user flow or user experience
