CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3....
Transcript of CREATE-BEST UI WORKSHOPcreate-best.com/wp-content/uploads/2019/02/CREATE-BEST... · 2019. 3....
CREATE-BEST UI
WORKSHOP
HUSSEIN AL OSMAN
1
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
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
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
GOAL OF THIS WORKSHOP
Simply, learn enough usability principles to avoid
this:
5
GOAL OF THIS WORKSHOP
Or this:
6
WHY STUDY USER INTERFACE
DESIGN?
To the user, the UI is often the system
7
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
KEY IDEAS IN HCI - VISIBILITY
Which Facebook app
design provides better
visibility?
9Version A Version B
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
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
KEY IDEAS IN HCI -
PERCEIVED AFFORDANCE
3D design
Flat design
12
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
KEY IDEAS IN HCI – NATURAL
MAPPING
14
Stove Top A
Controls A
Controls B
Stove Top B
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
KEY IDEAS IN HCI – NATURAL
MAPPING
16
2013 Toyota Camry SE
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
KEY IDEAS IN HCI – FORCING
FUNCTION
18
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
ICONS
Avoid:
• Icons with too many elements
• Icons that look similar
• Lack of unity in style
• Ambiguous metaphors
20
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
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
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
ITERATIVE NATURE OF UI
DESIGN
EvaluateDesignInitial Planning and
Domain analysis
Prototype/ Implement
Requirements
User Analysis
Task Analysis
24
ITERATIVE NATURE OF UI
DESIGN
EvaluateDesignInitial Planning and
Domain analysis
Prototype/ Implement
Requirements
User Analysis
Task Analysis
25
ITERATIVE NATURE OF UI
DESIGN
EvaluateDesignInitial Planning and
Domain analysis
Prototype/ Implement
Requirements
User Analysis
Task Analysis
26
ITERATIVE NATURE OF UI
DESIGN
EvaluateDesignInitial Planning and
Domain analysis
Prototype/ Implement
Requirements
User Analysis
Task Analysis
27
ITERATIVE NATURE OF UI
DESIGN
EvaluateDesignInitial Planning and
Domain analysis
Prototype/ Implement
Requirements
User Analysis
Task Analysis
28
ITERATIVE NATURE OF UI
DESIGN
EvaluateDesignInitial Planning and
Domain analysis
Prototype/ Implement
Requirements
User Analysis
Task Analysis
29
ITERATIVE NATURE OF UI
DESIGN
EvaluateDesignInitial Planning and
Domain analysis
Prototype/ Implement
Requirements
User Analysis
Task Analysis
30
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
EXAMPLE OF A SKETCH
32
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
HAND SKETCHES VS. CAD
Hand Sketch Sketch (wireframe) using a CAD tool
34
HAND SKETCHES VS. CAD
Hand Sketch Sketch (wireframe) using a CAD tool
35
CONCEPTUAL MODELS
Designer’s Model User’s Model
System image
36
MENTAL MODELS EXAMPLE:
NETFLIX
Netflix (back when it was a DVD mailing service)
worked differently than typical e-commerce sites
37
WHAT DO YOU THINK?
Accessed in 2014 38
WHAT DO YOU THINK?
Accessed in 2019 39
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
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
HEURISTICS
H1: Visibility of the system status
42
HEURISTICS
H2: Match between the system and the real world
43
HEURISTICS
H2: Match between the system and the real world
44
HEURISTICS
H3: User control and freedom
45
HEURISTICS
H4: Consistency and standards
46
HEURISTICS
H4: Consistency and standards
47
HEURISTICS
H4: Consistency and standards
48
HEURISTICS
H5: Error prevention
49
HEURISTICS
H5: Error prevention
50
HEURISTICS
H5: Error prevention
51
Opposite of error
prevention:
HEURISTICS
H6: Recognition rather than recall
52
HEURISTICS
H6: Recognition rather than recall
53
HEURISTICS
H7: Flexibility and efficiency of use
54
HEURISTICS
H7: Flexibility and efficiency of use
55
HEURISTICS
H7: Flexibility and efficiency of use
56
HEURISTICS
H8: Aesthetic and minimalist design
57
HEURISTICS
H8: Aesthetic and minimalist design
58
HEURISTICS
H9: Help users recognize, diagnose, and recover from errors
59
HEURISTICS
H9: Help users recognize, diagnose, and recover from errors
60
HEURISTICS
H9: Help users recognize, diagnose, and recover from errors
61
Windows 8Windows NT
HEURISTICS
H9: Help users recognize, diagnose, and recover from errors
62
What do you
think of these
messages?
HEURISTICS
H9: Help users recognize, diagnose, and recover from errors
63
What about
this gem?
HEURISTICS
H10: Help and documentation
64
HEURISTICS
H10: Help and documentation
65
LET’S ANALYZE…
66
Step 1
Step 2
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
IMPROVING THE DESIGN OF
AN ONLINE BANKING APP
68
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
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
THANK YOU!
QUESTIONS?
71