Embed Size (px)
Citation preview
Design Principles
Oct 17, 2016
Announcements
Milestone 2 will be posted by the end of today
Due Oct 31 at the start of class
Assignment 2 marks are available
Fall 2016 Comp 3020 2
Midterm
Next class: Midterm
True and false (10 x 1 mark)
Multiple choice (5 x 1 mark)
Short answer (5 questions, ~26 marks)
Fall 2016 Comp 3020 3
Midterm
Exam will be closed book
Arrive early
Be concise in your answers
Draw on material from lectures
You must write the midterm for your section
No makeups
Fall 2016 Comp 3020 4
Questions
Fall 2016 Comp 3020 5
Overview of Today’s Lecture
Design principles
Fall 2016 6Comp 3020
Design Principles
Generic “rules of thumb” that describe features of “usable” systems
Guidelines concerning what to include and what not to include in an interface
Derived from practice, theory, and research
Used later in heuristic evaluation and referred to then as usability principles
Conducted by experts (user involvement not required)
Very effective at catching design flaws early in design process
Fall 2016 Comp 3020 7
Design Principles
VisibilityConstraintsFeedbackMappingConsistencyAffordanceSimplicityMatchingMinimize memory loadDiagnose/recover from errorsControl and freedomFlexibilityProvide Help
Fall 2016 Comp 3020 8
Design Principle #1: Visibility
Visibility
Make core user functions clearly apparent
(e.g., toolbars vs. Menus)
Hide secondary user functions
Visible properties guide users as to what to do next
Structure enhances visibility
Fall 2016 Comp 3020 9
Design Principle #1: Visibility
Fall 2016 Comp 3020 10
Structure Can Enhance Visibility
Fall 2016 Comp 3020 11
Design Principle #2: Constraints
Fall 2016 Comp 3020 12
Constraints
Restrict the kinds of user actions that can take place for any given mode of interaction
Provide people with a range of usage possibilities
Design Principle #2: Constraints
Fall 2016 Comp 3020 13
Input Constraints
If constraints don’t make sense, try to at least guide user input
E.g., steering, input masks
Fall 2016 Comp 3020 14
Design Principle #3: Feedback
Feedback
Continuously inform the user about what the system is doing
How the system is interpreting the user’s input
User should at all times be aware of what is going on
Fall 2016 Comp 3020 15
Design Principles #3: Feedback
What type of feedback is being provided here?
1. What item was selected
2. What mode the user is in now
3. How the system is interpreting the users actions
Fall 2016 Comp 3020 16
Design Principle #3: Feedback
Lack of feedback relates directly to one of Don Norman’s gulfs
Which one is it and why?
Gulf of evaluation
User does not receive enough information from the system to construct a proper mental model
User has trouble interpreting system output in light of his/her goals
Fall 2016 Comp 3020 17
Design Principle #3: Feedback
Feedback should be as specific as possible based on user input
And ideally provided in the context of the user’s action
Fall 2016 Comp 3020 18
vs.
Fall 2016 Comp 3020 19
Design Principle #3: Feedback
With longer jobs, the more detail you can provide on the status, the better
Fall 2016 Comp 3020 20
vs.
Design Principle #3: Feedback
Response time
How users perceive delays
0.1 second max: perceived as “instantaneous”
1 second max: user’s flow of thought stays uninterrupted, but delay noticed
10 seconds: limit for keeping user’s attention focused on the dialog
> 10 seconds: user will want to perform other tasks while waiting, i.e. get a cup of coffee
Fall 2016 Comp 3020 21
Design Principle #3: Feedback
Feedback during long delays:
Cursors
for short transactions
Percent done dialogs
for longer transactions
how much left
estimated time
what it is doing…
Fall 2016 Comp 3020 22
Dealing with long delays
Other parts of the interface should continue working (if possible) as the long task completes
Should be possible to pause/cancel long jobs
How you design your code will impact your ability to do this at the interface
Fall 2016 Comp 3020 23
Reliance on “good” connectivity
Not everybody has a fast or reliable connection
E.g., communities, remote areas of the country, developing parts of the world, rural
Another instance of why it is important to “know thy user”
Types of delays:
Accessing a backend database
Downloading large amount of content (e.g., a long video)
Lengthy downloads actually change users’ perception of the quality of the content [Ramsay 1998, Jacko 2000]
Fall 2016 Comp 3020 24
Strategies for Dealing with Connectivity-Related Delays
Providing appropriate feedback
E.g., Where, what, quantity of data, estimated time remaining
Ensuring that the content that downloads first is meaningful
E.g., Descriptive tops of pages, informative ALT text labels for images, selective downloading
Users may be able to get what they need without the large content
Enabling offline operations
Fall 2016 Comp 3020 25
Design Principle #4: Mapping
Relate controls to the intuitive understanding of how they should be used
Fall 2016 Comp 3020 26
Mapping
Fall 2016 Comp 3020 27
backright
frontleft
backleft
frontright
24 possibilities, requires: -visible labels, memory
arbitrary full mapping
backfront front back
2 possibilities per side =4 total possibilities
paired
Design Principle #4: Mapping
In terms of mapping, how intuitive is a scroll bar?
How do the down and up arrows on a scroll bar map to the movement of a document on a screen
Fall 2016 Comp 3020 28
Design Principle #4: Mapping
Two metrics from Michel Beaudouin-Lafon’s “Instrumental Interaction”
– Degree of Integration
– Degree of Compatibility
Fall 2016 Comp 3020 29
Instrumental Interaction: Terminology
Domain object
Data (object) of interest
Text in a text editor
Shapes in a drawing program…
Instrument
Method by which domain objects are manipulated
Fall 2016 Comp 3020 30
Degree of Integration
Ratio of degrees of freedom (DoF) of instrument to DoF of input device
i.e., instrument DoF / device DoF
Indicates degree to which the input devices map onto the logical part of the interface instrument
Example: Scrollbars and mouse: ½
What would yield 3/2?
Ratios >1 indicate more effort required on part of user
Why?
Fall 2016 Comp 3020 31
Degree of Compatibility
Similarity between physical action and response of the object
Dragging object has high degree of compatibility
What about inputting numbers to change font size?
Fall 2016 32Comp 3020
Design Principle #5: Consistency
Many types of consistency are important in interface design
We need to consider both appearance and interaction
Fall 2016 Comp 3020 33
Design Principle #5: Consistency
Consistent appearance
Consistent language/terminology
Consistent graphics
Same information/controls in same location on all screens dialog boxes
Forms, pages, etc. follow boiler plate
Especially important for websites: helps user know they are still on the same site
Fall 2016 Comp 3020 34
Design Principle #5: Consistency
Consistent interaction
Consistent results
Same commands, actions will always have the same effect in equivalent situations
Consistent results lead to predictability
Consistent input
Consistent syntax across complete system
“Ctrl+C”/“Ctrl+V” for Copy/Paste in Windows
Fall 2016 Comp 3020 35
Design Principles #5: Consistency
Fall 2016 Comp 3020 36
Design Principle #5: Consistency
Inconsistent use of controls
E.g., what is wrong with these checkboxes?
Fall 2016 Comp 3020 37
Design Principle #5: Consistency
Inconsistency can lead to
User frustration
Increased learning time
Errors
Disorientation (Web)
Any inconsistencies should be carefully considered
Fall 2016 38Comp 3020
Design Principle #6: Affordances
Properties of an object "suggest" how the object may be interacted with
a door panel affords pushing
a door handle affords pulling
Fall 2010 39COMP 3020
Affordances
Fall 2010 40COMP 3020
Design Principle #6: Affordance
Appearance indicates how the object should be used
chair for sittingtable for placing things onknobs for turningslots for inserting things intobuttons for pushing
Complex things may need explaining, but simple things should not
Real affordances apply to physical objects (i.e. grasping), but interfaces exhibit perceived affordances
Fall 2010 COMP 3020 41
Design Principle #6: Affordance
Can use metaphors to suggest affordances
Metaphor of desktop, files, folders, trash can, etc
But remember affordances may not transfer from physical to digital world
Don’t blindly mimic real-world controls
Fall 2011 42COMP 3020
Example: Rotary Knob
Why does a digital recreation of rotary knob fail to transfer affordances with current WIMP interfaces?
Fall 2011 43COMP 3020
