design principles - department of computer scienceumdubo26/comp3020/lecture15_designprin… ·...
TRANSCRIPT
![Page 1: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/1.jpg)
Design Principles
Oct 17, 2016
![Page 2: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/2.jpg)
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
![Page 3: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/3.jpg)
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
![Page 4: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/4.jpg)
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
![Page 5: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/5.jpg)
Questions
Fall 2016 Comp 3020 5
![Page 6: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/6.jpg)
Overview of Today’s Lecture
Design principles
Fall 2016 6Comp 3020
![Page 7: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/7.jpg)
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
![Page 8: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/8.jpg)
Design Principles
VisibilityConstraintsFeedbackMappingConsistencyAffordanceSimplicityMatchingMinimize memory loadDiagnose/recover from errorsControl and freedomFlexibilityProvide Help
Fall 2016 Comp 3020 8
![Page 9: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/9.jpg)
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
![Page 10: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/10.jpg)
Design Principle #1: Visibility
Fall 2016 Comp 3020 10
![Page 11: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/11.jpg)
Structure Can Enhance Visibility
Fall 2016 Comp 3020 11
![Page 12: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/12.jpg)
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
![Page 13: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/13.jpg)
Design Principle #2: Constraints
Fall 2016 Comp 3020 13
![Page 14: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/14.jpg)
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
![Page 15: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/15.jpg)
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
![Page 16: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/16.jpg)
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
![Page 17: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/17.jpg)
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
![Page 18: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/18.jpg)
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.
![Page 19: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/19.jpg)
Fall 2016 Comp 3020 19
![Page 20: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/20.jpg)
Design Principle #3: Feedback
With longer jobs, the more detail you can provide on the status, the better
Fall 2016 Comp 3020 20
vs.
![Page 21: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/21.jpg)
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
![Page 22: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/22.jpg)
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
![Page 23: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/23.jpg)
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
![Page 24: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/24.jpg)
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
![Page 25: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/25.jpg)
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
![Page 26: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/26.jpg)
Design Principle #4: Mapping
Relate controls to the intuitive understanding of how they should be used
Fall 2016 Comp 3020 26
![Page 27: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/27.jpg)
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
![Page 28: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/28.jpg)
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
![Page 29: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/29.jpg)
Design Principle #4: Mapping
Two metrics from Michel Beaudouin-Lafon’s “Instrumental Interaction”
– Degree of Integration
– Degree of Compatibility
Fall 2016 Comp 3020 29
![Page 30: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/30.jpg)
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
![Page 31: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/31.jpg)
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
![Page 32: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/32.jpg)
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
![Page 33: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/33.jpg)
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
![Page 34: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/34.jpg)
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
![Page 35: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/35.jpg)
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
![Page 36: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/36.jpg)
Design Principles #5: Consistency
Fall 2016 Comp 3020 36
![Page 37: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/37.jpg)
Design Principle #5: Consistency
Inconsistent use of controls
E.g., what is wrong with these checkboxes?
Fall 2016 Comp 3020 37
![Page 38: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/38.jpg)
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
![Page 39: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/39.jpg)
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
![Page 40: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/40.jpg)
Affordances
Fall 2010 40COMP 3020
![Page 41: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/41.jpg)
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
![Page 42: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/42.jpg)
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
![Page 43: Design Principles - Department of Computer Scienceumdubo26/COMP3020/lecture15_DesignPrin… · Design Principle #1: Visibility Visibility Make core user functions clearly apparent](https://reader034.vdocument.in/reader034/viewer/2022042303/5ece7423fd8feb36f147975e/html5/thumbnails/43.jpg)
Example: Rotary Knob
Why does a digital recreation of rotary knob fail to transfer affordances with current WIMP interfaces?
Fall 2011 43COMP 3020