Scribd
Upload
37 views37 pages

Lecture 7—Prototyping II

Uploaded by

Sophia Lindholm
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
37 views37 pages

Lecture 7—Prototyping II

Uploaded by

Sophia Lindholm
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 37

Project in Human-

Centered Computing
Lecture 7: Prototyping II

Daniel Ashbrook
User-centered design process
Today: from design to prototype (and back)

Analyze Design Prototype Test


Learning objectives
After today’s class, you’ll be able to…

• Describe the di erences between low- and high- delity


prototypes

• Discuss how to choose the level of delity for a prototype


• Convert a physical paper prototype into di erent delities of on-
screen interactive prototypes
ff
fi
ff
fi
fi
Review:

Dimensions of
prototypes
Filtering dimension
What can we learn?

A prototype lters for the properties


the designer is most interested in;
possible lters include:
• “Appearance”: for exploring
physical properties
• Data: how is data handled and
presented?
• Functionality: testing the
functions the design can perform
• Interactivity: testing user
interaction with design
• Spatial structure: how
components relate
fi
fi
Manifestation dimension
How can we make it?

A prototype is manifested—
turned from an idea into a thing
—in three ways:

• Material: what is it made of?


• Resolution (or delity): how
“realistic” is it?

• Scope: how complete is it?


Horizontal
Vertical
fi
High(er)-fidelity
prototyping
Manifestation dimension
How can we make it?

A prototype is manifested—
turned from an idea into a thing
—in three ways:

• Material: what is it made of?


• Resolution (or delity): how
“realistic” is it?

• Scope: how complete is it?


Horizontal
Vertical
fi
Manifestation dimension
How can we make it?

A prototype is manifested—
turned from an idea into a thing

• Resolution (or delity): how


“realistic” is it?

Low Medium High


fi
Manifestation dimension
How can we make it?

A prototype is manifested—
turned from an idea into a thing

• Resolution (or delity): how


“realistic” is it?

Low Medium High


fi
Increasing fidelity
Examples

• Paper-in-screen
• Wireframe
• Video
Paper-in-screen prototyping

• Moves paper prototypes into a device


• Allows in-context testing for mobile devices

1. Draw your screens 2. Take photos 3. Interact!


Try it: https://marvelapp.com/apps

Marvel
Paper-in-screen prototyping

Source: https://youtu.be/m3tNSZZgAwM
Try it: https://marvelapp.com/apps

Marvel
Paper-in-screen prototyping

• Good:
• Quick ow—sketch a screen,
take a photo, add it to ow
• Supports multiple devices,
including Apple Watch
• Authoring entirely on mobile
• Free
• Bad:
• Buggy
• Clunky UI
fl
fl
360proto
Paper prototyping for VR & AR

More info: https://www.mi2lab.com/research/360proto/


360proto
Layers of content

More info: https://www.mi2lab.com/research/360proto/


360proto
Sketched on wraparound grid

More info: https://www.mi2lab.com/research/360proto/


360proto
Paper prototyping VR & AR

More info: https://www.mi2lab.com/research/360proto/


360proto
Star Trek example video

More info: https://www.mi2lab.com/research/360proto/


Wireframe prototypes

• Wireframe: simpli ed
representation of something
• Origin: 3D graphics showing
simple, fast representations
of more-complex objects
fi
Wireframe prototypes

• Wireframe: simpli ed
representation of something

• In design, a simpli ed
representation of an app or
website ltering for:
• interactivity, especially for
navigation
• spatial structure of elements
on pages and how pages
relate to each other
fi
fi
fi
Wireframe prototypes

• Wireframe: simpli ed
representation of something

• In design, a simpli ed
representation of an app or
website ltering for
interactivity and spatial
structure

• Can vary in resolution ( delity)


• Simple placeholders
• Screenshots or images
fi
fi
fi
fi
Video prototyping
What and why

• Creating a video that shows a system working—but through the


magic of video editing
• Filters for appearance and some interactivity and spatial structure
• Bene ts:
• Demonstrate more-complex systems
• Quickly show stakeholders, clients something polished
• Illustrate future technology
• Can vary in resolution ( delity)
• Low- delity, like a video of a paper prototype
• High- delity, professional 3D graphics and production
fi
fi
fi
fi
Video prototyping
Example: low- delity

iMakeComic : Video prototype for a mobile application—https://www.youtube.com/watch?v=wbiYAqbZryA


fi
Video prototyping
Example: high- delity

Microsoft: Productivity Future Vision—https://www.youtube.com/watch?v=w-tFdreZB94


fi
Example:

Multiple prototypes,
multiple fidelities
Prototyping augmented reality
“Friend Radar”

• Research project from Yahoo! in 2012


• App idea: AR app showing where your friends from di erent
social media sites are, relative to you

• Goal: in-context mobile prototyping


• Filtering for: appearance, interaction
• Three delities of prototype, tested in the wild
• Low- delity: mixed paper + plastic, Wizard of Oz
• Medium- delity: video prototype
• High- delity: semi-working phone software
M. De Sa and E. Churchill, “Mobile augmented reality: exploring design and prototyping techniques,” in MobileHCI '12
fi
fi
fi
fi
ff
Prototyping augmented reality
Low- delity prototype
fi
Prototyping augmented reality
Medium- delity video prototype
fi
Prototyping augmented reality
High- delity semi-working prototype
fi
Using prototypes to learn
Good practices

• Roles in user tests


• User: the person who’s testing the system
• Facilitator: runs the study, interacts with user
• Observer(s): watch, take notes (can be facilitator)
• Preparation
• Make a list of tasks to be tested
• Write down what the user should do for each
• Get everything well-organized (e.g., lay out paper prototypes in order)
• Video record the evaluation
• Don’t rely on your memory!
Demonstration

Using Figma
Paper-in-screen with Figma

Microsoft
Lens
Now you try it

Medium-fidelity
prototyping exercise
Screenshot prototyping exercise
Screenshot prototyping exercise

What to do
• Pick an app or website on your phone that
you use frequently
• Decide on a task that takes 3–5 steps in
the app
• Take screenshots of each step
• Put the screenshots into Figma and
recreate the ow
• Test it out with your neighbor
Example tasks
• Make a post on social media
• Get directions from your home to KUA
• Search for and play a song
• Set a reminder for when you get home
fl
Screenshot prototyping exercise

What to do Figma tips


• Pick an app or website on your phone that • Sizing screenshots
you use frequently 1. Click New Frame (“F”) and nd your
• Decide on a task that takes 3–5 steps in phone size
the app 2. Resize each screenshot to that size
• Take screenshots of each step 3. Put screenshots in Frames (one at a
• Put the screenshots into Figma and time): push ⌘⌥G or CTRL+ALT+G
recreate the ow
• Interactivity
• Test it out with your neighbor
• You can duplicate a screenshot then
Example tasks crop it to just a button, text eld, or
slider to make it interactive
• Make a post on social media
• Get directions from your home to KUA • Use shapes like the rectangle to cover
up parts of the interface. They only
• Search for and play a song need to be in Frames if they will be
• Set a reminder for when you get home interactive.
• Visit gma.com/community for templates,
icons, tutorials
fi
fl
fi
fi

You might also like