Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ......
Transcript of Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ......
![Page 1: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/1.jpg)
PrototypingHuman Computer Interaction
Fulvio Corno, Luigi De Russis
Academic Year 2019/2020
![Page 2: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/2.jpg)
2
Idea
• Target users
• Context (where, when, with whom, …)
• Application (for doing what)
Needfinding
• Observation
• Diaries
• Interviews
• Focus Groups
Analysis/ Ideation
• Sketches
• Storyboards
• Paper Prototypes
• Interactive Prototypes
• WoOz
…
Process recap
Human Computer Interaction
What topic do we address?
What are user needs?
How to satisfy those needs?
![Page 3: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/3.jpg)
3
▪ After the project idea:
o We want to help <<TYPE OF USER >>
o When he is in <<LOCATION>> at <<TIME>> with <<OTHER USERS>>
o While he is doing <<ACTION>>
o To accomplish <<USER GOAL>>
o Using <<DEVICES>>
▪ After needfinding:
o All user needs emerging from observation and interviews
o The most insightful 3-4 needs
o How the project would address 1-2 deep user needs, and the strategies
Previous steps
Human Computer Interaction
![Page 4: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/4.jpg)
4
▪ Envisionment: making ideas visible
o Generating new ideas
o Evaluating new ideas (within the design group)
o Testing new ideas (with users)
▪ Different tools and techniques, according to
o The stage of design (early, …, advanced, final)
o The intended audience (designers, test users, clients, management, …)
▪ Error to avoid: focusing on the user interface before focusing on the task that
the user has to accomplish
The goal
Human Computer Interaction
![Page 5: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/5.jpg)
5
▪ Techniques to explore different design alternatives
▪ Explore
o Flows of action
o Devices and their roles
o Interfaces
▪ Alternatives
o More than one possible design
o Impossible to get it right the first time
o Find the best possible solution
The method
Human Computer Interaction
![Page 6: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/6.jpg)
6
▪ Sketches
▪ Maps
▪ Scenarios
▪ Storyboards
▪ Paper prototypes
▪ Video Prototypes
▪ Hi Fidelity Prototypes
Techniques
Human Computer Interaction
![Page 7: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/7.jpg)
7
Sketches and SnapshotsQuick drawings to convey a part of the interface, or a feeling about a device
Human Computer Interaction
![Page 8: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/8.jpg)
8
Sketch
Human Computer Interaction
▪ An individual drawing showing
o A single user interface screen
o A drawing of an artifact part of the system
o The shape of an interaction object
▪ Gives a static view of a possible interaction
▪ Helps setting the interaction context
▪ Often, part of a longer representation
(e.g., a storyboard)
![Page 9: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/9.jpg)
9
Eamples
Human Computer Interaction
![Page 10: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/10.jpg)
10
MapsVisual overviews of navigation paths
Human Computer Interaction
![Page 11: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/11.jpg)
11
▪ A high-level view for the major structure of the interface
▪ Focus on how people move throughout the application
▪ Does not show the pages, only their organization and hierarchical relationship
▪ Related to the “information architecture” of the application
Navigation Map
Human Computer Interaction
![Page 12: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/12.jpg)
12
Map examples
Old-style mobile phone menus Website ‘sitemap’
Human Computer Interaction
![Page 13: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/13.jpg)
13
ScenariosPossible sequences of actions for reaching user goals
Human Computer Interaction
![Page 14: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/14.jpg)
14
▪ Scenarios are stories for design: rich stories of interaction
▪ Description of how the user engages the interactive system to solve a specific
task/goal
▪ Formats:
o Written summary, Use Case
o Graphical sketches (→ Storyboard)
o Flowcharts, Transition Diagram…
Scenario
Human Computer Interaction
![Page 15: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/15.jpg)
15
Level of details in scenarios
▪ Stories
o From needfindingo Use for understanding what people
do and what they wand
▪ Conceptual (abstract) Scenarios
o Use for generating ideas and specifying requirements
o Abstracts tasks from storieso No reference to technologyo May lead to different concrete
scenarios
▪ Concrete Scenarios
o Use for envisioning ideas and evaluation
o One possible solution to a Conceptual Scenario (may try many alternatives)
o Shows how technologies are used in the user context
o Key design features are included
▪ Use Cases
o Use for specification and implementation (→software engineering)
Human Computer Interaction
![Page 16: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/16.jpg)
16
StoryboardsComic book – like representation of user scenarios, with emphasis of how the system supports users in the development of the task
Human Computer Interaction
![Page 17: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/17.jpg)
17
Storyboard
▪ «A graphical depiction of the outward
appearance of the intended system, without
any accompanying system functionality»
▪ A hand-drawn comic that features the
execution of a task (like a concrete scenario)
▪ With a few panels (sequence of sketches) it
conveys what a person may accomplish o Always include people
▪ They communicate flow, showing what
happens at key points in time
▪ No artistic skills are requiredo Not about “nice pictures”o About communicating ideas
Human Computer Interaction
![Page 18: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/18.jpg)
18
▪ Illustrate a goal (for the task)
▪ How a task unfolds (people interacting among themselves and with devices)
o Repeated for all significant steps
▪ At the end, how they accomplish their goals (satisfactory outcome)
▪ Storyboards are all about tasks
What to find in a storyboard
Human Computer Interaction
![Page 19: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/19.jpg)
19
Example
Human Computer Interaction
This storyboard illustrates how the app had already downloaded the daily recipe to the user’s smartphone, so he could look it up and check the shopping list while on the underground, before shopping for ingredients and making a healthy meal.
http://alexmevissen.com/2014/07/16/storyboarding/
![Page 20: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/20.jpg)
20
Example
Human Computer Interaction
This storyboard illustrates how the app can show the user that a home cooked meal can be quicker than ordering food delivery, using left over ingredients in the fridge.
http://alexmevissen.com/2014/07/16/storyboarding/
![Page 21: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/21.jpg)
21
Storyboards should convey
▪ Setting
o People involvedo Environmento Task being accomplished
▪ Sequence
o What steps are involved?• Not the detailed UI• What role the UI plays in helping users
achieve their goal?
o What leads someone to use the system?• The “trigger” for the task
o What task is being illustrated?
▪ Satisfaction
o What’s the motivation for the user?• The end point to reach after all the
steps
o What’s the end result?o What need are you “satisfying”?
Human Computer Interaction
![Page 22: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/22.jpg)
22
▪ Traditional storyboarding
o “Comic book” conventions: actors, speech bubbles, background
o Notes attached to each scene explaining what is happening
▪ Scored storyboards
o When the user interface is highly dynamic, or contains specific media elements
o Add specific annotations focusing on movement, colors, sounds, …
▪ Text-only storyboards
o When the interaction behavior is too complex to compact into an illustration, use a longer text description
Handling dynamicity in storyboards
Human Computer Interaction
![Page 23: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/23.jpg)
23
Why hand-drawn?
▪ Quick
o No need to spend time in graphics tools (they would “push” you to focus on details, too
o Able to experiment different scenarios
▪ Imprecise
o Users feel free to express more comments and suggestions w.r.t.a more “polished” version
o Focus on the content (the graphics is obviously ignored)
o No distraction by fonts, colors, icons, …
Human Computer Interaction
![Page 24: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/24.jpg)
24
Drawing Sketching People
Human Computer Interaction
![Page 25: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/25.jpg)
25
▪ Emphasize how an interface accomplishes a task
▪ Focus the conversation and feedback on user tasks
▪ Get everyone on same page about the app’s goals
▪ Avoid nitpicking about user interface details (buttons etc)
Benefits of Storyboards
Human Computer Interaction
![Page 26: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/26.jpg)
26
PrototypesTangible approximations, at various levels, of system behavior and appearance, to cheaply and quickly evaluate and explore design decisions
Human Computer Interaction
![Page 27: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/27.jpg)
27
▪ «A prototype is a concrete but partial representation or implementation of a
system design»
▪ «An easily modified and extensible model (representation, simulation or
demonstration) of a planned software system, likely including its interface
and input/output functionality»
▪ One of the most powerful tools for design exploration, visualization, and
testing
▪ They let us ‘see’ and ‘feel’ interactivity (simulated or real)
Prototypes
Human Computer Interaction
![Page 28: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/28.jpg)
28
Prototypes facilitate conversations about…
Human Computer Interaction
Time
Fidelity(realism)
Storyboards
Paper prototypes
Digital mock-ups
Interactive prototypes
Final product
…user tasks
…user interactions
…visual design
…usability details
quickly test on users, get
feedback, iterate, and pivot
![Page 29: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/29.jpg)
29
Prototypes
▪ Paper designs
▪ Video prototypes
▪ Wizard-of-Oz
▪ Mockups
o Low-fidelity
o High-fidelity
▪ Preliminary versions
What
Human Computer Interaction
![Page 30: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/30.jpg)
30
Characteristics of Prototypes
Human Computer Interaction
![Page 31: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/31.jpg)
31
Characteristics of Prototypes
Human Computer Interaction
![Page 32: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/32.jpg)
32
▪ Expert analysis
▪ Check with design rules and guidelines
▪ Involve users in a controlled experiment
▪ Involve users “in the wild”
▪ …
Possible purposes for a prototype
Human Computer Interaction
![Page 33: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/33.jpg)
33
Characteristics of Prototypes
Human Computer Interaction
![Page 34: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/34.jpg)
34
Durability (1)
▪ Throw-away prototype: used to
assess some qualities of the system
(gain knowledge), then discarded
▪ Incremental prototype: the system
is developed as incremental
modules, each of them released in a
separate step
Human Computer Interaction
![Page 35: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/35.jpg)
35
Durability (2)
▪ Evolutionary prototype: the
prototype becomes the product;
each product iteration builds upon
the previous one
Human Computer Interaction
![Page 36: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/36.jpg)
36
Characteristics of Prototypes
Human Computer Interaction
![Page 37: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/37.jpg)
37
Characteristics of Prototypes
Human Computer Interaction
![Page 38: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/38.jpg)
38
Characteristics of Prototypes
Human Computer Interaction
![Page 39: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/39.jpg)
39
Fidelity: different information is conveyed
Human Computer Interaction
![Page 40: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/40.jpg)
40
Characteristics of Prototypes
Human Computer Interaction
![Page 41: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/41.jpg)
41
Paper prototypesHow to start using an application, months before implementing it
Human Computer Interaction
![Page 42: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/42.jpg)
42
▪ A hand-drawn mock-up of the user interface (usually) on multiple sheets of
paper of varying sizes
Paper prototypes
Human Computer Interaction
![Page 43: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/43.jpg)
43
▪ Interactive paper mockupo Sketches of screen appearanceo Paper pieces show windows, menus, dialog boxes
▪ Interaction is naturalo Pointing with a finger = mouse clicko Writing = typing
▪ A person simulates the computer’s operationo Putting down & picking up pieceso Writing responses on the “screen”o Describing effects that are hard to show on paper
▪ Low fidelity in look & feel
▪ High fidelity in depth (person simulates the backend)
Key features for Paper Prototypes
Human Computer Interaction
http://web.mit.edu/6.813/www/sp18/classes/11-prototyping/
![Page 44: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/44.jpg)
44
▪ Paper, Transparent paper
▪ Pens, Markers
▪ Post-It notes
▪ Glues, scotch tape, scissors
▪ Photocopies
▪ UI Stencils
▪ Reusable UI components
▪ Printouts of screenshots
Materials
Human Computer Interaction
![Page 45: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/45.jpg)
45
▪ Faster to build
o Sketching is faster than programming
▪ Easier to change
o Easy to make changes between user tests, or even *during* a user testo No code investment - everything will be thrown away (except the design)
▪ Focuses attention on big picture
o Designer doesn’t waste time on detailso Customer makes more creative suggestions, not nitpicking
▪ Nonprogrammers can help
o Only kindergarten skills are required
Why Paper Prototyping?
Human Computer Interaction
http://web.mit.edu/6.813/www/sp18/classes/11-prototyping/
![Page 46: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/46.jpg)
46
Paper prototypes: examples
Human Computer Interaction
![Page 47: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/47.jpg)
47
First ever mockup of the Windows Terminal tab bar
Human Computer Interaction
https://twitter.com/cinnamon_msft/status/1190015862201176065?s=20
![Page 48: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/48.jpg)
48
Creating flows with paper prototypes
Human Computer Interaction
https://youtu.be/GrV2SZuRPv0
![Page 49: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/49.jpg)
49
“Dynamic” Screens
Human Computer Interaction
![Page 50: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/50.jpg)
50
▪ The Design Team should cover these roles
▪ ‘Computer’ actor
o Simulates prototypeo Doesn’t give any feedback that the computer wouldn’t
▪ Facilitator
o Presents interface and tasks to the usero Encourages user to “think aloud” by asking questionso Keeps user test from getting off track
▪ Observer
o Keeps mouth shuto Takes copious notes
How to Test a Paper Prototype
Human Computer Interaction
![Page 51: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/51.jpg)
51
Learnable lessons from paper prototypes
▪ Conceptual modelo Do users understand it?
▪ Functionalityo Does it do what’s needed? Missing
features?
▪ Navigation & task flowo Can users find their way around?o Are information preconditions met?
▪ Terminologyo Do users understand labels?
▪ Screen contentso What needs to go on the screen?
▪ Look: color, font, whitespace, etc
▪ Feel: efficiency issues
▪ Response time
▪ Are small changes noticed?o Even the tiniest change to a paper
prototype is clearly visible to user
▪ Exploration vs. deliberationo Users are more deliberate with a
paper prototype; they don’t explore or thrash as much
Can Learn Can’t Learn
Human Computer Interaction
![Page 52: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/52.jpg)
52
Video PrototypesSharing a rich experience of your prototype
Human Computer Interaction
![Page 53: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/53.jpg)
53
▪ A video that conveys your storyboard and/or paper prototype concepts.
Video Prototype
Human Computer Interaction
![Page 54: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/54.jpg)
54
Prototypes facilitate conversations about…
Human Computer Interaction
Time
Fidelity(realism)
Storyboards
Paper prototypes
Digital mock-ups
Interactive prototypes
Final product
…user tasks
…user interactions
…visual design
…usability details
quickly test on users, get
feedback, iterate, and pivot
Video Prototypes
![Page 57: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/57.jpg)
57
▪ Informal, low fidelity
o Just for brainstorming
o A few minutes to create
▪ Medium fidelity
o Starting with paper prototype
o One-two hours to create
▪ High fidelity
o Need to get support from organization or client
o Expensive
Video prototype fidelity
Human Computer Interaction
![Page 58: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/58.jpg)
58
▪ Show the whole task (like a storyboard), including motivation and success
▪ Choose important tasks, that show cases when your system is performing
really well
o Tasks that you have observed
o Key tasks in the application
▪ Defines the scope for an MVP: the shown tasks are the features of the first
launch
▪ Defines the topics for the design team to argue discuss
Required content
Human Computer Interaction
![Page 59: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/59.jpg)
59
▪ Define an outline
o Or pick one of the storyboards
▪ Use minimum technology
o High-quality equipment may become distraction
o Reduce post-production and editing to a mininum
▪ Establish context
o Choose representative users
o Choose a meaningful location
▪ Focus on the message, not on the production quality
Creating a video prototype
Human Computer Interaction
![Page 60: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/60.jpg)
60
▪ Bad audio is annoying and distracting
o May also be a silent movie with “title cards” to explain what’s happening
▪ Choose the amount of interface you want to show in the video
o Real-looking interactive prototype
o Paper prototype
o No interface at all (just users)
▪ Show both success and failure
Tips for production
Human Computer Interaction
![Page 61: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/61.jpg)
61
▪ Cheap and fast
▪ Can more vividly inspire people’s imagination – Great communication tool
▪ Clean & self-explanatory – just share a YouTube link
o More portable than a paper prototype!o Good for “pitching” or “selling” to management
▪ Shows context of use: helps achieve common ground
▪ Can serve as a ‘spec’ for developers
▪ Ties interface design to user tasks
o Ensure you develop all that is needed, nothing extra
Benefits
Human Computer Interaction
![Page 62: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/62.jpg)
62
Medium Fidelity PrototypesWireframes, Powerpoints, Sketching tools
Human Computer Interaction
![Page 63: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/63.jpg)
63
▪ Interactive software simulation
o Renders user interface
o Accepts some user input
o Responds by switching pages
▪ Medium-fidelity or High-fidelity in look & feel
▪ Low-fidelity in depth
o The human operator in paper prototyping is aware of the algorithms
Computer prototypes
Human Computer Interaction
![Page 64: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/64.jpg)
64
▪ Also known as “Mockups” or “Wireframe interface”
▪ Design of a single screen or a set of connected screens (following a task)
▪ “Wavy” or “imprecise” drawing (inspired by hand drawing)
o Want to convey the impression that the design is still preliminary
o Black and white
▪ Usually static information (predefined pages, only)
▪ May suggest user device
Medium-fidelity
Human Computer Interaction
![Page 65: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/65.jpg)
65
Wireframes for the 3 interfaces
Web Desktop Mobile
Human Computer Interaction
![Page 66: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/66.jpg)
66
Human Computer Interaction
Some areas of the design may be
“active” (link to a new page)
![Page 67: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/67.jpg)
67
UI Design libraries
Human Computer Interaction
![Page 68: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/68.jpg)
68
Stencils for UI elements
Human Computer Interaction
![Page 69: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/69.jpg)
69
Some tools for wireframing
Human Computer Interaction
https://balsamiq.com/wireframes/https://balsamiq.cloud/
https://www.mockplus.com/https://moqups.com/
https://gomockingbird.com/
![Page 70: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/70.jpg)
70
Example
Human Computer Interaction
https://polito.mybalsamiq.com/projects
![Page 71: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/71.jpg)
71
Powerpoint-based Interactive mockups
Human Computer Interaction
![Page 72: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/72.jpg)
72
▪ Click, not interact
o No text entry, no data entry, no real selection of listed data
o Widgets aren’t active
▪ Paths are static
▪ The tester is engaged in a “hunt for the hotspot”, to find the (few) only
widgets that really clickable
o Good for testing understanding of the UI and the workflow
o Not good for testing the UI behavior
Wireframing tools: drawbacks
Human Computer Interaction
![Page 73: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/73.jpg)
73
Hi Fidelity PrototypesThey look like the real thing. Widget behave realistically. But it’s still an illusion.
Human Computer Interaction
![Page 74: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/74.jpg)
74
▪ Actual computer application, with final-looking layout, colors, and graphics
o May use design prototyping tools
o May use real application code
▪ Much more expensive to build
▪ More time is spent with graphic design than interaction design
Hi-Fi Prototypes (Digital Mock-ups)
Human Computer Interaction
![Page 75: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/75.jpg)
75
High-fidelity computer prototypesSemi-interactive
Human Computer Interaction
![Page 76: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/76.jpg)
76
▪ Screen layout
o Is it clear, overwhelming, distracting, complicated?o Can users find important elements?
▪ Colors, fonts, icons, other elements
o Well-chosen?
▪ Interactive feedback
o Do users notice & respond to status bar messages, cursor changes, other feedback
▪ Efficiency issues
o Controls big enough? Too close together? Scrolling list is too long?
What can we learn from hi-fi interactive prototypes?
Human Computer Interaction
![Page 77: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/77.jpg)
77
▪ Prototyping fake it till you make it
▪ By Apple Design Team
▪ https://youtu.be/3lqh-A5Jy4Q
Suggested video
Human Computer Interaction
![Page 78: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/78.jpg)
78
Some tools for interactive hi-fi prototypes
Human Computer Interaction
https://www.invisionapp.com/https://www.figma.com
https://webflow.com/https://principleformac.com/
https://froont.com/
![Page 79: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/79.jpg)
79
Wizard-of-Oz techniquesFaking a technology, or filling-in for missing functionality
Human Computer Interaction
![Page 80: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/80.jpg)
80
▪ How to test an application that is really complete…
o With finalized user interface
o With finalized algorithms
o Also including stuff that we still aren’t able to implement
▪ …but without actually writing the code
o Except for a semi-interactive ‘dumb’ prototype
Goal
Human Computer Interaction
![Page 81: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/81.jpg)
81
Remember the Mechanical Turk?
Human Computer Interaction
![Page 82: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/82.jpg)
82
▪ Software simulation with a human in the loop to help
▪ “Wizard of Oz” = “man behind the curtain”
o Simulates the machine behavior with a human operator
o Wizard is usually but not always hidden
▪ Often used to simulate future technology
o Speech recognition
o Learning
▪ Wizard may be hidden or visible
o Must always be revealed, at least at the end
Wizard-of-Oz
Human Computer Interaction
![Page 83: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/83.jpg)
83
Prototypes facilitate conversations about…
Human Computer Interaction
Time
Fidelity(realism)
Storyboards
Paper prototypes
Digital mock-ups
Interactive prototypes
Final product
…user tasks
…user interactions
…visual design
…usability details
quickly test on users, get
feedback, iterate, and pivot
Wizard-of-Oz
![Page 84: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/84.jpg)
84
▪ Choose supported tasks and scenarios
▪ Create User Interface mock-ups
o Implement a part of the system
o Leave “hooks” for the Wizard’s actions
▪ Implement a back-office interface for the Wizard
▪ Define “rules of behavior” for the Wizard
o When he should respond
o How it should respond (the “algorithm”)
Implementing a Wizard-of-Oz prototype
Human Computer Interaction
![Page 85: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/85.jpg)
85
▪ Faster and cheaper than most interactive prototypes
▪ More “real” than paper prototyping
▪ Creating multiple variations is easy
▪ Identifies bugs and issues with current design
▪ Can envision applications that are difficult to build
▪ Playing wizard allows a better understanding of algorithmic requirements
Benefits
Human Computer Interaction
![Page 86: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/86.jpg)
86
▪ May be over-optimistic
o Speech recognition that always works (instead of having an error rate)
o Super-intelligence (that will never exist)
▪ Wizard behavior is difficult
o Take into account system limitations
o Emulate expected system response
o Within acceptable timing
▪ Needs at least 2 researchers
Risks
Human Computer Interaction
![Page 87: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/87.jpg)
87
Wrap-upMany different techniques, applicable to different goals and contexts
Human Computer Interaction
![Page 88: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/88.jpg)
88
Evaluation and Feedback
Human Computer Interaction
Time
Fidelity(realism)
Storyboards
Paper prototypes
Digital mock-ups
Interactive prototypes
Final product
…user tasks
…user interactions
…visual design
…usability details
quickly test on users, get
feedback, iterate, and pivot
User Scenarios
Informal user involvement
Structured Critiques
Controlled Experiments
![Page 89: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/89.jpg)
89
▪ Google, Begin Today With Rapid prototyping,
https://www.youtube.com/playlist?list=PL9KVIdeJ2K8NDpsiyYpcbB_qifd3y5CY
Z
▪ MIT, http://web.mit.edu/6.813/www/sp18/classes/11-
prototyping/#reading_11_prototyping
▪ Scott Klemmer, Storyboards, Paper Prototypes, and Mockups,
https://youtu.be/z4glsttyxw8
References
Human Computer Interaction
![Page 90: Human Computer Interaction - polito.it · task/goal Formats: o Written summary, Use Case ... Benefits of Storyboards Human Computer Interaction. 26 Prototypes Tangible approximations,](https://reader035.fdocuments.in/reader035/viewer/2022081406/5f0f08407e708231d44226bb/html5/thumbnails/90.jpg)
90
▪ These slides are distributed under a Creative Commons license “Attribution-NonCommercial-ShareAlike 4.0
International (CC BY-NC-SA 4.0)”
▪ You are free to:o Share — copy and redistribute the material in any medium or format o Adapt — remix, transform, and build upon the material o The licensor cannot revoke these freedoms as long as you follow the license terms.
▪ Under the following terms:o Attribution — You must give appropriate credit, provide a link to the license, and indicate if changes were
made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
o NonCommercial — You may not use the material for commercial purposes. o ShareAlike — If you remix, transform, or build upon the material, you must distribute your contributions
under the same license as the original. o No additional restrictions — You may not apply legal terms or technological measures that legally restrict
others from doing anything the license permits.
▪ https://creativecommons.org/licenses/by-nc-sa/4.0/
License
Human Computer Interaction