Post on 05-Jun-2020
Introduction to Human-Computer-Interaction
VU Visual Data Science
Johanna Schmidt
WS 2019/20
2
Human-Computer-Interaction
• Research on design and usage of technical (computer) systems
• Focus on the interface between machine and user• Graphical user interfaces (GUIs)
• Voice user interfaces (VUIs)
[1]
3
Human-Computer-Interaction
• Research on design and usage of technical (computer) systems
• Focus on the interface between machine and user• Graphical user interfaces (GUIs)
• Voice user interfaces (VUIs)
• Research directions• Requirement analysis, task specification
• User interface design
• Perception, usability
• Evaluation
[1]
4
Human-Computer-Interaction
• Research on design and usage of technical (computer) systems
• Focus on the interface between machine and user• Graphical user interfaces (GUIs)
• Voice user interfaces (VUIs)
• Research directions• Requirement analysis, task specification
• User interface design
• Perception, usability
• Evaluation
[1]
5
Human-Computer-Interaction
• Requirement analysis, task specification
• Perception, usability
6
Human-Computer-Interaction
• Requirement analysis, task specification
• Perception, usability
7
Requirement Analysis
• Part of the design process when designing new user interfaces
• Understand• Users
• Tasks
• Requirements
• To maximize usability
8
Human-Centered Design
[2]
9
Human-Centered Design
[2]
10
Examples
• Colgate toothbrush
• Aalto injector
• User interfaces• Google Search
• Trello
11
Examples
• Colgate toothbrush
• Aalto injector
• User interfaces• Google Search
• Trello
[3]
12
Examples
• Colgate toothbrush
• Aalto injector
• User interfaces• Google Search
• Trello
[4]
13
Examples
• Colgate toothbrush
• Aalto injector
• User interfaces• Google Search
• Trello[5]
14
Examples
• Colgate toothbrush
• Aalto injector
• User interfaces• Google Search
• Trello
[6]
15
Human-Centered Design
[2]
16
Who are the Users?
• Clear understanding of target users
• Different user groups with different requirements and background
[7]
17
Personas
• Introduced by Alan Cooper in 1999
• Persona = Fictive person• Represents a larger number of users
• Defines• Characteristics
• Expectiations
• Motivation
• Background
[8]
18
Personas
• Requirement analysis targeted towards defined Personas
• Persona decription should be as detailed as possible
• Personas are shared across teams forcommon understanding
• Used to describe typicaluse-case scenarios
[8]
19
Personas
• Persona description consists of• Age
• Gender
• (Family status)
• Education
• Job title
• Work experience
• Use-case scenarios
[8]
20
Personas
[9]
21
Personas
• Basis for defining tasks
22
Human-Centered Design
[2]
23
What is the Context?
• Context analysis• Environment the system will be used in
• System usage• While seated / standing / in the field / …
• Frequently / rarely
• Hectic, fast decisions / calm, long time for decision making
24
What are the Tasks?
• Users think in tasks
• Task = smaller part of user activities with a meaningful outcome
• Task = use-case, scenario
• Task analysis• Understand the tasks users need to perform
• Understand how often tasks need to be performed
[10]
25
Tasks
• Tasks ≠ Functions
• Task: „I need to change my address“
• Functions:• I need to login
• I need to click on the tab „Settings“
• I need to find the „Change Address“ button
• I need to enter the new address
• I need to click „Save“
[10]
26
Tasks
• Design process triggered by tasks that should be supported
• Task frequency should influence design decisions• More frequent tasks should be easies to access
[10]
27
Requirement Analysis
• Interviews
• Sketches
• Workflow Analysis
28
Requirement Analysis
• Contextual Inquiry• Semi-structured interviews
• Standard questions and observation of workflows
29
Requirement Analysis
• Contextual Inquiry
• Rapid Prototyping• First user interface prototypes for testing
• Get fast feedback from users
[11]
30
Requirement Analysis
• Contextual Inquiry
• Rapid Prototyping
• User Studies• Evaluate user performance on new user interfaces
• Controlled studies
31
Human-Computer-Interaction
• Requirement analysis, task specification
• Perception, usability
32
Human-Computer-Interaction
• Requirement analysis, task specification
• Perception, usability
33
Human-Centered Design
[2]
34
Usability
The effectiveness, efficiency and satisfaction with which specified users achieve specified goals in particular environments. (ISO 9241)
• Effectiveness: The accuracy and completeness with which specified users can achieve specified goals in particular environments.
• Efficiency: The resources expended in relation to the accuracy and completeness of goals achieved.
• Satisfaction: The comfort and acceptability of the work system to its users and other people affected by its use.
35
Usability Heuristics
1. Visibility of system status2. Match between system and the real world3. User control and freedom4. Consistency and standards5. Error prevention6. Recognition rather than recall7. Flexibility and efficiency of use8. Aesthetic and minimalist design9. Help users recognize, diagnose, and recover from errors10. Help and documentation
Jakob Nielsen, 1994 [2]
36
Usability Heuristics
1. Visibility of system status2. Match between system and the real world3. User control and freedom4. Consistency and standards5. Error prevention6. Recognition rather than recall7. Flexibility and efficiency of use8. Aesthetic and minimalist design9. Help users recognize, diagnose, and recover from errors10. Help and documentation
Jakob Nielsen, 1994 [2]
37
Usability Heuristics
2. Match between system and the real world
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
Jakob Nielsen, 1994 [2]
38
Usability Heuristics
4. Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing.
Jakob Nielsen, 1994 [2]
39
Usability Heuristics
5. Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
Jakob Nielsen, 1994 [2]
40
Usability Heuristics
6. Recognition rather than recall
Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
Jakob Nielsen, 1994 [2]
41
Human-Computer-Interaction
• Requirement analysis, task specification
• Perception, usability
42
Human-Centered Design
[2]
43
Visual Perception
• Human visual perception needs to be considered when designing visualisations
• Visual perception influences choice of visual elements
• Impacted by physial conditions (e.g., light), function of eye, andprocessing in the brain
[13]
44
Visual Perception
• Low-level vision well understood
• High-level vision still subject to research
[14]
45
Visual Perception
• Perception principles important for visualisation• Shapes
• Gestalt laws
• Colours
46
Visual Perception
• Perception principles important for visualisation• Shapes
• Gestalt laws
• Colours
47
Shapes
• Mapping geometric elements to data attributes• Color/position/size for additional information
[15]
48
Shapes
• Mapping geometric elements to data attributes• Colour/position/size for additional information
• When using shapes to encode quantitative attributes, it is importantto remember that the area of the shape has to be adjusted, not thediameter (size)
[15]
49
[16]
50
[16]
51
Shapes
• Mapping geometric features to data attributes
• More complex geometric objects allow to mapmultivariate attributes
[15]
[17]
52
Complex shapes
[18]
53
Shapes
• Fewer different shapes is better than many
• Shape parameters (size, angle, aspect ratio) can be mapped to dataattributes for multivariate data
• Always adjust area, not diameter/size when visualising quantitative attributes
54
Visual Perception
• Perception principles important for visualisation• Shapes
• Gestalt laws
• Colours
55
Gestalt Laws
• Laws from visual perception theory (1920)
• Define how humans perceive shapes based on size and location
• Define laws for low-level pattern recognition
56
Gestalt Laws
• Examples
[19]
57
Gestalt Laws
• Examples
[19]
58
Gestalt Laws
• Important for UI design• How do humans perceive design creations?
• How does mind react to visual messages?
59
Gestalt Laws
• Gestalt laws1. Law of Proximity
2. Law of Similarity
3. Law of Continuity
4. Law of Closure
5. Law of Simplicity
60
Gestalt Laws
1. Law of ProximitySpatially close elements appear as grouped and as one.
[19]
61
Gestalt Laws
1. Law of ProximitySpatially close elements appear as grouped and as one.
[19]
62
Gestalt Laws
2. Law of SimilarityWhen things appear to be similar to each other, we group them together. We also tend to think they have the same function.
[19]
63
Gestalt Laws
2. Law of SimilarityWhen things appear to be similar to each other, we group them together. We also tend to think they have the same function.
[19]
64
Gestalt Laws
3. Law of ContinuityElements that are arranged on a line or curve are perceived to be more related than elements not on the line or curve.
[19]
65
Gestalt Laws
3. Law of ContinuityElements that are arranged on a line or curve are perceived to be more related than elements not on the line or curve.
[19]
66
Gestalt Laws
4. Law of ClosureWhen we look at a complex arrangement of visual elements, we tend to look for a single, recognizable pattern.
[19]
67
Gestalt Laws
4. Law of ClosureWhen we look at a complex arrangement of visual elements, we tend to look for a single, recognizable pattern.
[19]
68
Gestalt Laws
4. Law of ClosureWhen we look at a complex arrangement of visual elements, we tend to look for a single, recognizable pattern.
[19]
69
Gestalt Laws
5. Law of SimplicityWhen we see convoluted shapes in adesign, the eye simplifies these bytransforming them into a single,unified shape.
[21]
[20]
70
Visual Perception
• Perception principles important for visualisation• Shapes
• Gestalt laws
• Colours
71
Colour
[22]
72
Colour
• Strong visual channel to transport information
[23]
73
Colour
• Strong visual channel to transport information
• Several aspects have to be considered• Similar/dissimilar colors for similar/dissimilar attributes
• Psychological effects (e.g., red vs. blue for alerts)
• Consider colour blindness
[24]
74
Colour
• Do not use too many colours in one chart
[25]
75
Colour
• Consider relation and size of elements
[25]
76
Colour
• Do not use gradient colours for categorical data
[25]
77
Colour
• Use intuitive colours
[25]
78
Colour
• Carefully design colour maps
[25]
79
Colour
• Suggestions for colour maps• Colorbrewer (http://colorbrewer2.org)
• Tableau (http://tableaufriction.blogspot.com/2012/11/finally-you-can-use-tableau-data-colors.html)
[26]
80
Colour
• Rainbow colour maps• Very prominent, but should not be used in data visualisation
• Produce hard borders and may mislead interpretation
[27]
81
Colour
• Rainbow colour maps
[28]
82
Colour
• Rainbow color maps• Very prominent, but should not be used in data visualisation
• Produce hard borders and may mislead interpretation
• Many other (perceptially uniform) color maps available
[29]
83
Colour
• Fewer colours better than many
• Contrast vs. size/relation of elements
• Consider intuitive colours
• Consider alternative color maps to the rainbow color map
• Colour blindness
84
Summary
• Introduction to human-computer-interaction
• Introduction to human perception
85
Summary
• Lab Part 2• Visualisations
• Consider rules for colour and shape selection
• Consider rules for chart selection (next lecture)
• Dashboard• Create Personas
• Define tasks
• Consider rules for colour and shape selection
• Consider rules for chart selection (next lecture)
• Consider Gestalt laws
86
References
[1] https://soic.iupui.edu/files/bolchini-user-lab.jpg
[2] https://www.dalberg.com/what-human-centered-design
[3] http://breaking.in/product-design/philip-leung-work/
[4] https://www.yankodesign.com/2019/04/01/a-perfect-example-of-user-centered-design/
[5] https://static.businessinsider.com/image/4f299e29eab8ea280200000a-1200/image.jpg
[6] https://trello.com
[7] https://cdn.helpsystems.com/styles/crop_general/storage-api-public/rb-60-ibm-i-user-grous-and-communities-join-blog-1900x744-banner_0.png?itok=hPQyXJlJ
[8] https://www.themandarin.com.au/content/uploads/2016/09/personas.png
[9] https://buffer.com/library/marketing-personas-beginners-guide
[10] https://www.hosting-linux.org/wp-content/uploads/2018/09/components.png
[11] https://cdn-media-1.freecodecamp.org/images/ffihuZ-4Elgt58YaSRiAUnSscAya9MRQU8rP
[12] https://www.nngroup.com/articles/ten-usability-heuristics/
[13] https://previews.123rf.com/images/sangoiri/sangoiri1508/sangoiri150800059/44333680-visual-perception-the-impact-of-computer-use-on-the-cognitive-and-visual-development-of-children.jpg
[14] https://byjus.com/physics/structure-human-eye-functioning/
[15] https://www.slideshare.net/eamonnmag/principles-of-data-visualization-71834041
[16] http://coolinfographics.com/blog/2014/8/29/false-visualizations-sizing-circles-in-infographics.html
[17] https://www.winwaed.com/blog/wp-content/uploads/2018/06/multiple.svg
87
References
[18] http://www.ii.uib.no/vis/publications/publication/2009/lie09glyphBased3Dvisualization
[19] https://www.usertesting.com/blog/gestalt-principles/
[20] http://vda.univie.ac.at/Teaching/HCI/19s/LectureNotes/06_1_Wahrnehmung.pdf
[21] https://public-media.interaction-design.org/images/uploads/34373c7bf91a69342b0bb48872d77cce.jpg
[22] https://scienceblogs.com/files/startswithabang/files/2011/09/Visible-spectrum.jpeg
[23] Maureen Stone: Choosing Colors for Data Visualization, 2006
[24] http://htprofile.com/d3-color-scheme
[25] https://www.dataquest.io/blog/what-to-consider-when-choosing-colors-for-data-visualization/
[26] http://tableaufriction.blogspot.com/2012/11/finally-you-can-use-tableau-data-colors.html
[27] https://courses.washington.edu/engageuw/why-you-should-dump-the-rainbow/
[28] https://eagereyes.org/basics/rainbow-color-map
[29] https://blogs.mathworks.com/steve/2014/10/13/a-new-colormap-for-matlab-part-1-introduction/