create-best ui workshopcreate-best.com/wp-content/uploads/2019/02/create-best... · 2019. 3....
TRANSCRIPT
![Page 1: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/1.jpg)
CREATE-BEST UI
WORKSHOP
HUSSEIN AL OSMAN
1
![Page 2: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/2.jpg)
ABOUT ME
• Hussein Al Osman
o Assistant Professor in Software Engineering, EECS
• Background
o Undergraduate and Graduate studies at the University of
Ottawa
o Industry: Nortel and Avaya (Software Developer and
Project Manager)
• Research Interest
o Affective Computing
o Human Computer Interaction
o Serious Gaming
2
![Page 3: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/3.jpg)
WHAT WE WILL DO TODAY
The workshop is divided into five sections:
• Section 1: I will cover the core principles of UI design
• Section 2: I will discuss briefly the various UI Evaluation
methods and focus in particular on heuristic evaluation
• Section 3: Using a prototyping tool, I will improve the design of
a simple application
• Section 4: The students will design their own UI for a simple
application
• Section 5: The students will evaluate each other’s designs
3
![Page 4: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/4.jpg)
USABILITY GOALS
Effectiveness: can the user complete their goals with a high
degree of accuracy?
Efficiency: how fast can the user get the job done?
Engagement: does the user finds the product pleasant and
gratifying to use?
Error Tolerance: can the user effectively recover from an
error?
Ease of Learning: how quickly can the user learn to use the
system?4
![Page 5: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/5.jpg)
GOAL OF THIS WORKSHOP
Simply, learn enough usability principles to avoid
this:
5
![Page 6: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/6.jpg)
GOAL OF THIS WORKSHOP
Or this:
6
![Page 7: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/7.jpg)
WHY STUDY USER INTERFACE
DESIGN?
To the user, the UI is often the system
7
![Page 8: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/8.jpg)
KEY IDEAS IN HCI - VISIBILITY
The UI should help the user always understand...
• The current state of the system
• What operations can be done
8
![Page 9: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/9.jpg)
KEY IDEAS IN HCI - VISIBILITY
Which Facebook app
design provides better
visibility?
9Version A Version B
![Page 10: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/10.jpg)
KEY IDEAS IN HCI - FEEDBACK
Give the users an indication that an action was performed
Activational feedback: evidence that control was activated successfully
Behavioral feedback: evidence that the action has had some effect on the system
10
![Page 11: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/11.jpg)
KEY IDEAS IN HCI –
PERCEIVED AFFORDANCE
The set of operations and procedures that can be done to an object
‘Perceived affordance’ is what typical users think can be done to an object
11
![Page 12: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/12.jpg)
KEY IDEAS IN HCI -
PERCEIVED AFFORDANCE
3D design
Flat design
12
![Page 13: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/13.jpg)
KEY IDEAS IN HCI – NATURAL
MAPPING
Indicates the relationship between the action of the
user and the result
• The user’s natural understanding of action results
• Steering the wheel (direct association)
• Zooming in and out on a smart phone
• Controls of stove burners (logical association)
13
![Page 14: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/14.jpg)
KEY IDEAS IN HCI – NATURAL
MAPPING
14
Stove Top A
Controls A
Controls B
Stove Top B
![Page 15: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/15.jpg)
KEY IDEAS IN HCI – NATURAL
MAPPING
15
Change Case
lowercase
UPPERCASE
Title Case
tOGGLE cASE
OKCancel
X Change Case
Lowercase
UppercaseTitle CaseToggle Case
OKCancel
X
Option A Option B
![Page 16: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/16.jpg)
KEY IDEAS IN HCI – NATURAL
MAPPING
16
2013 Toyota Camry SE
![Page 17: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/17.jpg)
KEY IDEAS IN HCI – FORCING
FUNCTION
Design that prevents users from taking actions which are
inappropriate or which would lead to error
• Appliance shut off when opened
• Microwaves
• Washing Machines
• Radio buttons
• Choose one and one only
Good example of a forcing function design:
• Menu bar - grays out and prevents the selection of those items inapplicable
to the current context
New
Open
Close
Save
Save as... 17
![Page 18: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/18.jpg)
KEY IDEAS IN HCI – FORCING
FUNCTION
18
![Page 19: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/19.jpg)
KEY IDEAS IN HCI –
METAPHORS
Application of familiar concepts to represent more
abstract system concepts
• Help the user use prior knowledge to understand a system
• Make abstract ideas more concrete
19
![Page 20: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/20.jpg)
ICONS
Avoid:
• Icons with too many elements
• Icons that look similar
• Lack of unity in style
• Ambiguous metaphors
20
![Page 21: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/21.jpg)
HUMAN COGNITIVE SYSTEM
Attention limitations
• People can be readily distracted: provide cues about what to focus on
• People get lost in complexity
• Structure information so it is easy to browse through
• People multitask
• Make the ‘state’ clear so users can jump backwards and forwards
21
![Page 22: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/22.jpg)
HUMAN COGNITIVE SYSTEM
Memory limitations
• Short term memory can contain 7±2 ‘chunks’
• The more meaningful, the more easily remembered (familiarity, imagery and consistency contribute to meaningfulness)
• Icons can be analogies, examples or abstract, but not arbitrary
• Watch out for cultural differences (e.g. washroom symbols)
22
![Page 23: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/23.jpg)
USER-CENTERED DESIGN
(UCD)
Central question:
“How to design user interfaces that:
• Allow users to effectively accomplish their tasks
• Do not waste the user’s time”
23
![Page 24: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/24.jpg)
ITERATIVE NATURE OF UI
DESIGN
EvaluateDesignInitial Planning and
Domain analysis
Prototype/ Implement
Requirements
User Analysis
Task Analysis
24
![Page 25: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/25.jpg)
ITERATIVE NATURE OF UI
DESIGN
EvaluateDesignInitial Planning and
Domain analysis
Prototype/ Implement
Requirements
User Analysis
Task Analysis
25
![Page 26: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/26.jpg)
ITERATIVE NATURE OF UI
DESIGN
EvaluateDesignInitial Planning and
Domain analysis
Prototype/ Implement
Requirements
User Analysis
Task Analysis
26
![Page 27: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/27.jpg)
ITERATIVE NATURE OF UI
DESIGN
EvaluateDesignInitial Planning and
Domain analysis
Prototype/ Implement
Requirements
User Analysis
Task Analysis
27
![Page 28: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/28.jpg)
ITERATIVE NATURE OF UI
DESIGN
EvaluateDesignInitial Planning and
Domain analysis
Prototype/ Implement
Requirements
User Analysis
Task Analysis
28
![Page 29: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/29.jpg)
ITERATIVE NATURE OF UI
DESIGN
EvaluateDesignInitial Planning and
Domain analysis
Prototype/ Implement
Requirements
User Analysis
Task Analysis
29
![Page 30: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/30.jpg)
ITERATIVE NATURE OF UI
DESIGN
EvaluateDesignInitial Planning and
Domain analysis
Prototype/ Implement
Requirements
User Analysis
Task Analysis
30
![Page 31: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/31.jpg)
SKETCHING
Probably the most important design technique
Don’t try to picture your user interface mentally
• Draw pictures (you do not need a lot of talent)
Lay out many ideas on a big table or stick them on a wall
Generate many ideas
• Don’t fixate on an early vision and stop brainstorming
Design in a group
• Maybe group members can come up with ideas before hand
31
![Page 32: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/32.jpg)
EXAMPLE OF A SKETCH
32
![Page 33: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/33.jpg)
WIREFRAMING
Some people consider paper sketching and wireframing to be
synonymous
• Others like to draw on the distinctions between them
Typically, a wireframe is refined version of the paper sketch
• Paper sketches are typically faster to create
• Some previously eliminated details are added (font, spacing,
possibly colors…)
• Takes into account device screen size, resolutions and
limitations
• CAD tools are typically used (although not necessarily)
33
![Page 34: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/34.jpg)
HAND SKETCHES VS. CAD
Hand Sketch Sketch (wireframe) using a CAD tool
34
![Page 35: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/35.jpg)
HAND SKETCHES VS. CAD
Hand Sketch Sketch (wireframe) using a CAD tool
35
![Page 36: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/36.jpg)
CONCEPTUAL MODELS
Designer’s Model User’s Model
System image
36
![Page 37: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/37.jpg)
MENTAL MODELS EXAMPLE:
NETFLIX
Netflix (back when it was a DVD mailing service)
worked differently than typical e-commerce sites
37
![Page 38: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/38.jpg)
WHAT DO YOU THINK?
Accessed in 2014 38
![Page 39: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/39.jpg)
WHAT DO YOU THINK?
Accessed in 2019 39
![Page 40: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/40.jpg)
UI EVALUATION
UI Evaluation
Passive Evaluation Active Evaluation Predictive Evaluation
Videotaped Evaluation
Experiments
Heuristic Evaluation
Cognitive Walkthrough
Notification by user
Logging mechanism
Questionnaires/ surveys
40
![Page 41: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/41.jpg)
HEURISTICS
H1: Visibility of the system status
H2: Match between the system and the real world
H3: User control and freedom
H4: Consistency and standards
H5: Error prevention
H6: Recognition rather than recall
H7: Flexibility and efficiency of use
H8: Aesthetic and minimalist design
H9: Help users recognize, diagnose, and recover from errors
H10: Help and documentation
41
![Page 42: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/42.jpg)
HEURISTICS
H1: Visibility of the system status
42
![Page 43: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/43.jpg)
HEURISTICS
H2: Match between the system and the real world
43
![Page 44: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/44.jpg)
HEURISTICS
H2: Match between the system and the real world
44
![Page 45: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/45.jpg)
HEURISTICS
H3: User control and freedom
45
![Page 46: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/46.jpg)
HEURISTICS
H4: Consistency and standards
46
![Page 47: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/47.jpg)
HEURISTICS
H4: Consistency and standards
47
![Page 48: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/48.jpg)
HEURISTICS
H4: Consistency and standards
48
![Page 49: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/49.jpg)
HEURISTICS
H5: Error prevention
49
![Page 50: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/50.jpg)
HEURISTICS
H5: Error prevention
50
![Page 51: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/51.jpg)
HEURISTICS
H5: Error prevention
51
Opposite of error
prevention:
![Page 52: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/52.jpg)
HEURISTICS
H6: Recognition rather than recall
52
![Page 53: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/53.jpg)
HEURISTICS
H6: Recognition rather than recall
53
![Page 54: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/54.jpg)
HEURISTICS
H7: Flexibility and efficiency of use
54
![Page 55: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/55.jpg)
HEURISTICS
H7: Flexibility and efficiency of use
55
![Page 56: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/56.jpg)
HEURISTICS
H7: Flexibility and efficiency of use
56
![Page 57: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/57.jpg)
HEURISTICS
H8: Aesthetic and minimalist design
57
![Page 58: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/58.jpg)
HEURISTICS
H8: Aesthetic and minimalist design
58
![Page 59: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/59.jpg)
HEURISTICS
H9: Help users recognize, diagnose, and recover from errors
59
![Page 60: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/60.jpg)
HEURISTICS
H9: Help users recognize, diagnose, and recover from errors
60
![Page 61: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/61.jpg)
HEURISTICS
H9: Help users recognize, diagnose, and recover from errors
61
Windows 8Windows NT
![Page 62: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/62.jpg)
HEURISTICS
H9: Help users recognize, diagnose, and recover from errors
62
What do you
think of these
messages?
![Page 63: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/63.jpg)
HEURISTICS
H9: Help users recognize, diagnose, and recover from errors
63
What about
this gem?
![Page 64: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/64.jpg)
HEURISTICS
H10: Help and documentation
64
![Page 65: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/65.jpg)
HEURISTICS
H10: Help and documentation
65
![Page 66: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/66.jpg)
LET’S ANALYZE…
66
Step 1
Step 2
![Page 67: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/67.jpg)
LET’S ANALYZE…
67
Step 1
Step 2
H1: Visibility of the system statusH2: Match between the system and the real worldH3: User control and freedomH4: Consistency and standardsH5: Error preventionH6: Recognition rather than recallH7: Flexibility and efficiency of useH8: Aesthetic and minimalist designH9: Help users recognize, diagnose, and recover from errors
H10: Help and documentation
Heuristic Principals
• Visibility• Feedback• Perceived affordance• Natural Mapping• Forcing Functions• Metaphors
Key HCI Ideas
• Effectiveness• Efficiency• Engagement• Error Tolerance• Ease of Learning
Usability Goals
![Page 68: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/68.jpg)
IMPROVING THE DESIGN OF
AN ONLINE BANKING APP
68
![Page 69: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/69.jpg)
IT’S YOUR TURN TO DESIGN
You will design the user interface for a Pill Reminder mobile app to notify users when they should take their
medication. The app is intended mostly for senior citizens, which might not be as technically adept as
younger users. Therefore, you need to pay special attention to the user interface design to ensure it is easy
to learn.
The app should allow the user to: 1) add a pill reminder, 2) edit a pill reminder, and 3) delete a pill reminder.
When the user adds a pill reminder, they should be able to enter the following details (you can add more
details in your design):
• Times of the day when the pill should be taken (e.g. 9:00 AM and 9:00 PM)
• Whether the reminder should be repeated and for how long (and if yes, what days and until when?)
• How should the user be notified (e.g. play an alarm sound, vibrate, or both)
• Notes about the pill that popup when the user receives the notification
Sketch the series of screens that allows the user to
• Task 1: add a pill reminder
• Task 2: edit a pill reminder
• Task 3: delete a pill reminder
The sketches should show the user interface from the moment the user launches the application to the
point they complete the three tasks.
69
![Page 70: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/70.jpg)
IT’S EVALUATION TIME!
70
H1: Visibility of the system statusH2: Match between the system and the real worldH3: User control and freedomH4: Consistency and standardsH5: Error preventionH6: Recognition rather than recallH7: Flexibility and efficiency of useH8: Aesthetic and minimalist designH9: Help users recognize, diagnose, and recover from errorsH10: Help and documentation
Heuristic Principals
• Visibility• Feedback• Perceived affordance• Natural Mapping• Forcing Functions• Metaphors
Key HCI Ideas
• Effectiveness• Efficiency• Engagement• Error Tolerance• Ease of Learning
Usability Goals
![Page 71: CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3. 16. · WHAT WE WILL DO TODAY The workshop is divided into five sections: • Section](https://reader035.vdocuments.site/reader035/viewer/2022071006/5fc314a0331c234f8e091642/html5/thumbnails/71.jpg)
THANK YOU!
QUESTIONS?
71