Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

UX > Wireframing and Prototyping > Flashcards

Wireframing and Prototyping Flashcards

1
Q

What is prototyping?

A

Preliminary model of something from which other forms are developed.

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

What does a prototype do?

A
  • Simulates a working product in order to understand how it works
  • Simulates the interactive experience
  • Allows the product to be tested with users
  • Communicates a solution to stakeholders
  • Improves the design of the product
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What are the benefits of prototyping?

A
  • Helps improve the quality of the design
  • Identifies issues before the build phase
  • Reduces risks of building flawed products
  • Reduces cost in the medium term
  • Helps validate/invalidate assumptions
  • Helps share ideas
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

How can prototyping help manage stakeholders?

A
  • Communicates the design idea clearly
  • Reduces ambiguity
  • Facilitates executive feedback and buy-in
  • Facilitates better decision-making
  • Showcases design flare
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What 4 design factors are to be considered to determine the type of prototype?

A
  • What resources and skills are available?
  • How much time and money is available?
  • Who is the audience?
  • What do you need to test?
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

When would you use a low fidelity prototype?

A
  • Short timeline

- Few resources/skills available

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

When would you use a high fidelity prototype?

A
  • Long timeline
  • Need a lot of learning along the way
  • Have a lot of resources/skills available
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is a low fidelity prototype?

A

Sketchy and incomplete prototype, has some characteristics of the target product but otherwise is simple, and tests broad concepts.

Also known as a paper prototype.

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

What are the benefits of low fidelity prototypes?

A
  • Quick
  • Cheap
  • Catch problems early/Validates ideas early
  • Low level of skill needed
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What can you learn from a low fidelity prototype?

A
  • Broad concepts and mental models
  • Find out if users “get it”
  • Optimize flow
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is a medium fidelity prototype?

A

Fairly detailed and complete, but objects are presented in schematic or approximate form. Provides simulated interaction functionality and full navigation.

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

What are the benefits of medium fidelity prototypes?

A
  • Quick and cheap
  • Better to test with users
  • Easier to communicate with stakeholders
  • Richer research data and insights
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What can you learn from a medium fidelity prototype?

A
  • Details of concepts and flows
  • Screen layout and hierarchy
  • Basic interactions
  • Navigation
  • Copy and labels
  • All other learnings from low fi
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is a high fidelity prototype?

A

Almost indistinguishable from the actual product.

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

What are the benefits of high fidelity prototypes?

A
  • Ability to convey rich interactions
  • Stakeholder management
  • Richer data and insights
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What can you learn from a high fidelity prototype?

A
  • Assess flows and concepts
  • Assess screen design and layout
  • Assess data in/data out workflows
  • Assess the performance of form design
  • Test rich interactions, such as mapping
  • All learnings from med and low fi
17
Q

What is a wireframe?

A

An annotated specification. Specifies controls, rules and feedback, and tells people how the product works.

18
Q

What are the differences between wireframes and prototypes?

A

Wireframes are static, not for user testing, blueprint for dev, includes annotated notes/rules.

Prototypes are interactive, recommended for user testing, aide for dev team, typically not annotated.

19
Q

What should be documented before handing over to dev?

A
  • Hierarchy = Information Architecture
  • Structure = User flows
  • Content = Wireframes
  • Rules = Wireframes
20
Q

What are some tips for designing a wireframe?

A
  • Use same layout
  • Make it easy to read and understand
  • Keep screens together that are part of the same flow
  • Add a page number, title and date
  • Use a number/line callout for notes
21
Q

What should annotated notes define?

A
  • How the system behaves
  • How it responds to actions
  • How it communicates results
  • How it helps fulfill intentions
22
Q

What should annotated notes answer?

A
  • What are the rules of how it functions?
  • What happens in different states?
  • Does anything happen to other elements on interaction?
  • Have all use cases been covered?
  • Does it change based on device?
  • Have all errors been considered?
  • What is the feedback for any errors?

UX (11 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions