HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design...
Transcript of HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design...
![Page 1: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/1.jpg)
HCI: THE DESIGN
PROCESSDr Kami Vaniea
1
![Page 2: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/2.jpg)
First, the news…
2
Make Your UX Design Process Agile Using Google’s Methodology
https://www.interaction-design.org/literature/article/make-your-ux-design-process-agile-using-google-s-methodology
![Page 3: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/3.jpg)
Accessibility
3
![Page 4: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/4.jpg)
Basic steps to accessibility Add appropriate alt text to every image
Use headings correctly
Make your forms work with screen readers
Use a “Skip to Main Content” link at the beginning of each page
Make all content accessible by keyboard
Create significant contrast between your text and background
Use an accessible template
4
![Page 5: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/5.jpg)
Add appropriate alt text to images
5
![Page 6: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/6.jpg)
6
![Page 7: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/7.jpg)
7
Headers
Skip to content links
![Page 8: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/8.jpg)
What level of technical skill can we expect out of “average” users?
8
![Page 9: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/9.jpg)
https://www.nngroup.com/articles/computer-skill-levels/ 9
![Page 10: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/10.jpg)
Design Process
10
![Page 11: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/11.jpg)
What is wanted
Analysis
Design
Implement and deploy
Prototype
Design process
Interviews Ethnography
What is therevs. what is wanted
Scenarios Task analysis
Guidelines Principles
Precise specificationDialog
notationsEvaluationHeuristics
ArchitecturesDocumentation Help
![Page 12: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/12.jpg)
The following is part of a MSc project from last summer on re-designing permission screens for Android.
12
![Page 13: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/13.jpg)
Describing how an app uses permissions
Allowed to do
Actually does
![Page 14: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/14.jpg)
Static analysis: Breaks an app up into a control flow diagram
14
The Flashlight Advertising
openConnectionOpens a connection
to the internet
requestLocationUpdatesGet access to your location probably to send it on using
the later openConnection call
![Page 15: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/15.jpg)
The brief:
Create a new permission screen using the output from a static analysis tool that helps people understand the context in which permissions will be used.
15
![Page 16: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/16.jpg)
Problem 1:
What permissions do people worry about?
Sub-problem:
Most people don’t understand permissions enough to actually worry about them
![Page 17: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/17.jpg)
Solution:
Affinity diagram using Computer Security MSc students
![Page 18: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/18.jpg)
What is wanted
Analysis
Design
Implement and deploy
Prototype
Design process
Interviews Ethnography
What is therevs. what is wanted
Scenarios Task analysis
Guidelines Principles
Precise specificationDialog
notationsEvaluationHeuristics
ArchitecturesDocumentation Help
![Page 19: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/19.jpg)
Protocol1. Pre-print a list of Android permissions and
contexts
2. Have students brainstorm answers to questions onto sticky notes
A. Name three permissionsB. App behaviors you are not comfortable withC. Situations that would cause a permission to be used
3. Put all notes on the wall and do an affinity diagram
4. Encourage hierarchy design
5. Discuss outcome with participants as a group
![Page 20: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/20.jpg)
Pre-printed contexts
20
![Page 21: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/21.jpg)
Pre-printed contexts
21
![Page 22: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/22.jpg)
Examples of pre-printed and brainstormed sticky notes
![Page 23: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/23.jpg)
Initial sorting
23
This stage looked a lot like your tutorial
We just sorted all the notes on the wall and added a few notes where needed
![Page 24: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/24.jpg)
Then we added structure
![Page 25: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/25.jpg)
25
![Page 26: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/26.jpg)
How do we qualitatively analyze an affinity diagram?
![Page 27: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/27.jpg)
What is wanted
Analysis
Design
Implement and deploy
Prototype
Design process
Interviews Ethnography
What is therevs. what is wanted
Scenarios Task analysis
Guidelines Principles
Precise specificationDialog
notationsEvaluationHeuristics
ArchitecturesDocumentation Help
![Page 28: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/28.jpg)
![Page 29: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/29.jpg)
Camera
Location
Microphone
Accounts and device
info
Contacts
SMS
Internet combined
with read data
Calendar
Settings
Ads
Sounds
Notifications
Screen space
In the Background
![Page 30: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/30.jpg)
Outcomes “with my permission”
Button presses Opening an app
Background vs. foreground When the permission is accessed is important
Purpose Ads Uploading private data like contacts and device ID
Sensitive permissions focused on input/output
Confusing permissions
![Page 31: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/31.jpg)
What is wanted
Analysis
Design
Implement and deploy
Prototype
Design process
Interviews Ethnography
What is therevs. what is wanted
Scenarios Task analysis
Guidelines Principles
Precise specificationDialog
notationsEvaluationHeuristics
ArchitecturesDocumentation Help
![Page 32: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/32.jpg)
We designed an interface that shows permissions in context of when they can be used.
Button push required
Only when app is open
Anytime in the background(Ad software)
![Page 33: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/33.jpg)
What is wanted
Analysis
Design
Implement and deploy
Prototype
Design process
Interviews Ethnography
What is therevs. what is wanted
Scenarios Task analysis
Guidelines Principles
Precise specificationDialog
notationsEvaluationHeuristics
ArchitecturesDocumentation Help
![Page 34: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/34.jpg)
Created two interfaces to A/B test
34
![Page 35: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/35.jpg)
35
Which of the following can this app do?
![Page 36: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/36.jpg)
What is wanted
Analysis
Design
Implement and deploy
Prototype
Design process
Interviews Ethnography
What is therevs. what is wanted
Scenarios Task analysis
Guidelines Principles
Precise specificationDialog
notationsEvaluationHeuristics
ArchitecturesDocumentation Help
![Page 37: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/37.jpg)
The results:
37
![Page 38: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/38.jpg)
27% of people think they know what this screen says and are wrong.
13% are uncertain what this screen really means.
38
![Page 39: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/39.jpg)
Case study from Nielsen Grouphttps://www.nngroup.com/articles/fancy-formatting-looks-like-an-ad/
39
![Page 40: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/40.jpg)
Problem:
Why can’t people find the population of the United States on the Censes Bureau site?
![Page 41: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/41.jpg)
What is wanted
Analysis
Design
Implement and deploy
Prototype
Design process
Interviews Ethnography
What is therevs. what is wanted
Scenarios Task analysis
Guidelines Principles
Precise specificationDialog
notationsEvaluationHeuristics
ArchitecturesDocumentation Help
![Page 42: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/42.jpg)
42
86% of users failed to find the population of the US on this page.
Why?
![Page 43: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/43.jpg)
The website does quite a few things correctly Most common task is
large, obvious, and red
Sections of the page are clearly labeled
There is a search box
Lots of navigation cues
Sidebars clear
Good use of grouping
43
![Page 44: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/44.jpg)
Methodology options: Think aloud (best choice)
Good: lots of data articulated, people can tell you what they are looking for
Bad:
Heuristic Good: No need to find a participant Bad: Looking at the site there are no obvious heuristics
seriously broken, so any result would be an educated guess
GOMS – Not really appropriate
Contextual Inquiry – Unlikely to be a contextual issue
44
![Page 45: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/45.jpg)
These researchers decided to use an eye tracker in addition to asking the participant to complete the task in a lab
45
![Page 46: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/46.jpg)
46
Users looked at the population box
Users also looked at the search box
They also looked at the sidebar
If you look closely you will see that users didn’t actually read the
number. They only looked at the first three digits. They aren’t fixating, they are scanning and not finding
what they want.
![Page 47: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/47.jpg)
People didn’t use the feature
Only 14% of participants used the Population Check feature
Why? It looks like an
advertisement It uses terms like
“Population Clocks” and “Data Finder” rather than “US Population”
47
![Page 48: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/48.jpg)
48
![Page 49: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/49.jpg)
CW2 Questions
49
![Page 50: HCI: THE DESIGN PROCESS - The University of EdinburghDesign Implement and deploy Prototype Design process Interviews Ethnography What is there vs. what is wanted Scenarios Task analysis](https://reader034.fdocuments.us/reader034/viewer/2022042102/5e7efc10c6d8975e98310238/html5/thumbnails/50.jpg)
Questions?
50