Prototyping

Low-Fidelity Prototyping
High-Fidelity Prototyping
Prototyping Dimensions
What is a Prototype?

▪ In other design fields a prototype is a small-scale model:

- a miniature car
- a miniature building or town
- a juicer

Prototyping 2
What is a Prototype?

▪ In interaction design it can be (among other things):

- a series of screen sketches, i.e. not necessarily
related
- a storyboard, i.e. a cartoon-like series of scenes
- a Powerpoint slide show, e.g., simulation
- a video simulating the use of a system
- a cardboard mock-up
- a piece of software with limited functionality
written in a language

▪ Key point:
- Goal is to NOT the artifact, but the feedback

Image source: Nintendo

Prototyping 3
Prototype Fidelity
Fidelity

Time
Higher fidelity resembles final product more closely in look and feel, as well as
functionality Prototyping 4
High-Fidelity Prototypes

▪ Use hi-fi prototypes, when you have

- test the details of your products in terms of UI elements,
colour schemes
- when you want to test the transitions, animations, and effects
of them on the user and user behaviour
- want to know how your target users feel about your product
and you want to get their opinions on your designs.

Prototyping 5
High-Fidelity Prototypes

• Prototyping with a computer

• interactive representation
of the product
• closest resemblance to the
final design in terms of
details and functionality
• simulate some but not all
features of the intended
system

Prototyping 6
What You Can Learn From High-Fidelity Prototypes

▪ Everything you learn from a paper prototype, plus:

▪ Screen layout
- Is it clear, overwhelming, distracting, complicated?

▪ Colors, fonts, icons, other elements

- Well-chosen?

▪ Interactive feedback
- Do users notice & respond to status bar messages or cursor
changes

▪ Efficiency issues
- Scrolling list is too long?

Prototyping 7
Popular Techniques

▪ Program it directly in a language

▪ Use a prototyping tool
- Proto.io
- InVision
- Axure
- Principle
- Framer
- Adobe XD
- Sketch

Prototyping 8
Prototyping Tools

▪ Axure (https://www.axure.com/)
▪ Free for students (https://www.axure.com/edu)

Prototyping 9
Design Guidelines

https://developer.android.com/design Prototyping 10
Material Design Guidelines

▪ Buttons (https://m3.material.io/components/all-buttons)
- Buttons communicate actions that users can take
Nine types: elevated, filled, filled tonal, outlined, text, icon,
segmented, FAB, extended FAB
Each button has either high, medium, or low emphasis

Prototyping 11
Design Guidelines

▪ Touch targets
- Touch target minimum of 48 x 48 density independent pixel (dp)
- The recommended target size for touchscreen elements is 7-
10mm.
- An icon may appear to be 24 x 24 dp, but the padding
surrounding it comprises the full 48 x 48 dp touch target.
- In most cases, touch targets separated by 8dp of space or more
promote balanced information density and usability.
▪ Pointer targets (e.g., mouse pointer)
- Consider making pointer targets at least 44 x 44 dp.

Prototyping 12
Design Guidelines

▪ Top App bar

▪ Dialogs One Line Lists

Prototyping 13
Colors and Icons

https://color.adobe.com/create/color-wheel/ https://www.flaticon.com/

Prototyping 14
 Design Guidelines

▪ iOS design Pattern: https://developer.apple.com/design/human-interface-guidelines/designing-for-ios

▪ Web UI Design Patterns

- https://www.uxpin.com/studio/ebooks/web-ui-design-patterns-2016-volume-1/
- https://www.uxpin.com/studio/ebooks/web-ui-design-patterns-2016-volume-2/

▪ User Interface Design pattern

- http://ui-patterns.com/
Prototyping 15
Limiting Functionality: How Much to Represent?

▪ Vertical prototypes
- includes in-depth functionality for
only a few selected features
- common design ideas can be tested
in depth

▪ Horizontal prototypes
- surface layers includes the entire
user interface with limited
underlying functionality

Prototyping 16
Limiting Functionality: How Much to Represent?

Prototyping 17
Video Prototypes

▪ Use video to illustrate how people might interact with a future

technology in a realistic setting

▪ Describes relevant motivations and their activities over time

▪ The characters in the video prototype are represented as

personas or characters drawn from interviews and observations

▪ Characters placed are in a particular situation at a particular

place and time

Prototyping 18
Walkabout Project

▪ https://www.youtube.com/watch?v=kWsBvUnvCmg

Prototyping 19
 Benefits of Video Prototype

▪ Cheap and fast

▪ Great communication tools
- Help achieve common ground
- Ideally, portable and self-explanatory

▪ Can server as a ‘spec’ for developers

Image source:
https://i.pinimg.com/originals/f5/a8/22/f5a822f14b9307578adf191141c11fb5.jpg
Prototyping 20
‘Wizard-of-Oz’ Prototyping

▪ It’s difficult to prototype some piece of functionality

▪ Need: test whether it is actually good before building it!!!

▪ Solution: fake it! Make the interaction as authentic as possible

▪ Key: user has no idea that the interaction is being faked

Prototyping 21
Seinfeld - Movie Phone

▪ https://www.youtube.com/watch?v=uAb3TcSWu7Q

Prototyping 22
Example

▪ https://www.youtube.com/watch?v=s9fQxzojS7E

Prototyping 23
‘Wizard-of-Oz’ Prototyping

▪ The user thinks they are interacting with a computer, but a

developer is responding to output rather than the system.
▪ “wizard” (sometimes hidden):
interprets subjects input according to an algorithm
has computer/screen behave in appropriate manner
▪ Good for:
adding simulated and complex functionality
testing futuristic ideas
▪ Some issues
- need some means of controlling system
- may need ways to perform hard computations quickly
- must be realistic if simulating error-prone technology (e.g.,
speech recognition)

Prototyping 24
 Low vs. high Fidelity Prototypes

Advantages Disadvantages
- Fast, low development costs - Facilitator-driven
- Evaluate multiple designs - Limited error checking
- Useful communication device - Poor detailed specifications
Low
Fidelity - Useful for identifying requirements - Limited use for usability
- Quick proof-of-concept tests

- Rich functionality - More expensive to develop

- Interactive - More time-consuming
High - User-driven
Fidelity - Clearly defines navigational scheme
- Look and feel of product
- Marketing and sales tool

Prototyping 25
Which Prototyping Method is Best?

▪ Choose the method that works best for what you are trying to
achieve
- user flow » storyboard
- evaluate multiple design » paper prototypes
- overall experience » video prototype
- functionality » high fed, software/tool
- … etc.

▪ Alternately, maybe you are at different stages in the design. Early

on, use techniques that are cheap and quick; later on, use
techniques that give a stronger sense of finished idea.

Prototyping 26
Protype to Product

▪ When do you discard your prototype and move to the product?

▪ What should be your internal software life cycle vis-à-vis

prototype→product

Prototyping 27
What Did We Cover
• Low-fidelity prototyping
– Storyboards
– Paper prototyping

• High-fidelity prototyping
– Purpose
– Types

• Vertical (depth) vs. Horizontal (breadth) prototyping

• Low-Fidelity vs. High-Fidelity

Prototyping 28