10 Prototype and wireframing Flashcards

1
Q

What simulates a working product and allows it to be tested with users, in order to improve the product’s design?

A

Prototype

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is characteristic of prototypes?

A

Interactive

An aid for development but shouldn’t be used alone

Typically don’t include annotations

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is NOT a benefit of low-fidelity prototypes?

A

Optimal for testing with users

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

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

A high-fidelity prototype

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is NOT considered a weakness of high-fidelity prototypes?

A

Capable of creating only limited interactions

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is an annotated specification of controls, rules and feedback?

A

Wireframe

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What is NOT a characteristic of wireframes?

A

Recommended for usability testing

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

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

A mid-fidelity prototype

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What is recommended when writing annotated notes?

A

Proof read in one go

Go through notes with developers

Be open to changing the rules

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is a prototype?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What are the benefits of prototyping?

A
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 well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

How can a prototype help manage stekaholders?

A

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)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What are the benefits of low-fidelity prototypes?

A

Quick
Cheap
Catches potential problems early
Low skill level needed

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What are the benefits of low-fidelity prototypes?

A

Quick
Cheap
Catches potential problems early
Low skill level needed

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What can you learn from a low-fiedelity prototype?

A

Broad concepts and mental models
finding out if the user “gets it”
optimizing flow

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What are the benefits of medium fiedelity prototypes?

A
More detailed concepts and flows
Screen layout and hierachy
Basic interaction
naviagtion
copy and labeling
17
Q

What are the benefits of medium fiedelity prototype?

A

sill cheap
Better to test with users
easier to communicate with stakeholders
richer data and insights

18
Q

What can you learn from high fidelity prototypes?

A
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
19
Q

What are the benefits of high fidelity prototypes?

A

Ability to convey rich interactions
Stakeholder management
Richer data and insights

20
Q

What is the process for creating a low fidelity prototype?

A

Define the flow
Sketch screens and screen states
Sketch elements
Sticth together

21
Q

What are the pros of low fidelity prototypes?

A

Quick
Cheap
Manipulate on teh fly
Validates ideas early

22
Q

What are the cons of low-fi prototypes

A

limited learning

could be difficult for testing participants

23
Q

What is the process of creating a medium-fi prototype?

A
Screens sketches and flow diagrams
choosing the prototype tool
build the screens
incorporate text and labels
incorporate inetractions
24
Q

What are the pros of medium-fidelity prototypes?

A

value for money
relatively quick
requires attention to details
forms teh basis for wirefreames

25
Q

What are the cons of medium fidelity prototypes?

A

learning curve required
tools are not free
capable of creating only limited interactions

26
Q

What is the process for creating a hi-fi prototype?

A
Starting point is creen sketches and flow diagram
Choosing the ptotoype tool
Build the screens
Incorporate text and labels
incorporate interactions
27
Q

What are the benefits of testing hi-fi prototypes?

A
Testing flows and concepts
Testing screen design and layout
Testing data in/data out workflows
Tesing the performace of form design
Testing rich interactions
28
Q

What are the pros of hi-fi prototypes?

A
Allows for rich interactions
Deepst user insight
Allows testing of visual style
Ability to iterate quickly
forms the basis for wireframes and spesifications
29
Q

What are the cons of hi-fi prototypes?

A

Difficult to know when to stop
Learning curve required
Time consuming
Not cheap

30
Q

What is a wireframe?

A

A wireframe is like a blueprint for builders. It is filled with guides and spesifications

31
Q

What is ture about wireframes?

A

Static
Not suitable for usability testing
blueprint for development
includes annotated notes or system rules

32
Q

What is true about a prototype?

A

Interactive
reccomended for usability testing
aid for development (don’t use alone)
typically no annotations

33
Q

What should a handover documentation intel?

A
Hierachy = Information architecture
Structure = user flows
Content = Wireframes
Rules = Wireframes
34
Q

What is information architectiure?

A
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
35
Q

What is user flow?

A

Unserstand where it sits in the structure
Understand its sequence in teh main flows
Be consious of different screen states

36
Q

What are wireframes?

A

Contains the rules of how the product should behave - and all the different states

37
Q

What should annotated notes intel?

A

Define how the system behaves
How it responds to actions
How it communicates results
How it helps fulfil inentions

38
Q

What is important to remember when it comes to annotated notes?

A

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