unit2.ppt - design principles - disi, university of...
TRANSCRIPT
![Page 1: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/1.jpg)
Design principles
Unit 2
![Page 2: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/2.jpg)
2
Learning outcomes
• Introduce concepts of usability and user experience
• Understand fundamental design principles • Develop
– awareness of how to apply them in design – Critical ability to evaluate other people design
![Page 3: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/3.jpg)
Usability
• “Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.” – ISO 9241-11:1998 Ergonomic requirements
for office work with visual display terminals (VDTs) -- Part 11: Guidance on usability.
3
![Page 4: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/4.jpg)
4
Usability • Usability is a quality attribute that assesses how easy user
interfaces are to use. • Five quality dimensions:
– Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
– Efficiency: Once users have learned the design, how quickly can they perform tasks?
– Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
– Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
– Satisfaction: How pleasant is it to use the design? – http://www.useit.com/
![Page 5: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/5.jpg)
5
Usability
• Quality = absence of problems – discover usability problems and reduce their
frequency and severity. – It can be measured – Objective data (performance data derived by
behavioural data, user observations) – Subjective data (self-report, questionnaire or
interview)
![Page 6: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/6.jpg)
6
• Is usability all that matters here?
![Page 7: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/7.jpg)
7
![Page 8: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/8.jpg)
8
Hierarchy of consumer needs • Jordan’s (2000) • Functionality = “a product will be
useless if it does not contain appropriate functionality, a product cannot be usable if it does not contain the functions necessary to perform the tasks for which it is needed”.
• Usability, = “once people had become used to having appropriate functionality they then wanted products that were easy to use”.
• Pleasure= “having become used to usable products, it seems inevitable that people will soon want something more: […] products that bring not only functional benefits but also emotional ones”
![Page 9: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/9.jpg)
User experience UX
• The User Experience (UX) is a complex response to the interaction with computing systems.
• This response is a consequence of – individual predispositions of the user (e.g., attitudes, motivations
and needs – characteristics of the interactive system (e.g., purpose,
functionality and usability) – contextual dependencies (e.g., task and environment).
9
![Page 10: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/10.jpg)
10
![Page 11: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/11.jpg)
11
User experience UX • Positive
– good design is more than absence of problems. – add “extra value” to design (emotion, fun, personal
fulfillment) • Holistic – Pragmatic qualities (traditional usability dimensions), – Hedonic qualities (non-task related, beauty,
challenge, stimulation and self-expression) • Subjective
– Usability focuses performance and tasks: can be objectively measured
– Hedonic attributes relate to the user’s self which issubject to deep variations among individuals.
![Page 12: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/12.jpg)
12
User experience goals – Satisfying - rewarding – Fun - support creativity – Enjoyable - emotionally fulfilling – Entertaining …and more – Helpful – Motivating – Aesthetically pleasing – Motivating – Enhancing sociability
![Page 13: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/13.jpg)
13
Design metrics UX • Usability
– Easy of use and efficiency
• Aesthetics – sensorial experience generated by the look and feel of the
interface and to the extent to which this experience matches individual preferences and goals.
• Symbolism – meanings and associations elicited by a system. – As opposed to aesthetics which can be ‘visceral’,
symbolism requires cognitive processing (the individual recognizes a symbol and associate a meaning to it).
![Page 14: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/14.jpg)
• Design principles
14
![Page 15: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/15.jpg)
15
Design principles
• Generalizable abstractions for thinking about different aspects of design
• The do’s and don’ts of interaction design – Prescriptive statements
• What to provide and what not to provide at the interface
• Derived from a mix of theory-based knowledge, experience and common-sense
![Page 16: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/16.jpg)
16
Design principles
• Visibility • Feedback • Constraint • Mapping Consistency • Affordance
![Page 17: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/17.jpg)
17
Visibility • This is a control panel for an
elevator. • How does it work? • Push a button for the floor you want?
• Nothing happens. Push any other button? Still nothing. What do you need to do?
It is not visible as to what to do! From: www.baddesigns.com
![Page 18: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/18.jpg)
18
Visibility …you need to insert your room card in the slot by the buttons to get the elevator to work!
How would you make this action more visible?
• make the card reader more obvious • provide an auditory message, that says what to do (which
language?) • provide a big label next to the card reader that flashes when
someone enters
• make relevant parts visible • make what has to be done obvious
![Page 19: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/19.jpg)
19
Transparency
• useful feedback • easy to understand • intuitive to use • clear & easy to follow instructions • appropriate online help • context sensitive guidance of how to proceed when stuck
![Page 20: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/20.jpg)
20
Feedback
• Sending information back to the user about what has been done
• Includes sound, highlighting, animation and combinations of these
– e.g. when screen button clicked on provides sound or red highlight feedback:
“ccclichhk”!
![Page 21: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/21.jpg)
21
Constraints
• Restricting the possible actions that can be performed
• Helps prevent user from selecting incorrect options
• Three main types (Norman, 1999) – Physical – cultural – Logical
![Page 22: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/22.jpg)
22
Physical constraints
• Refer to the way physical objects restrict the movement of things – E.g. only one way you can insert a key into a lock
• How many ways can you insert a CD or DVD disk into a computer?
• How physically constraining is this action? • How does it differ from the insertion of a floppy
disk into a computer?
![Page 23: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/23.jpg)
23
Affordances • Refers to an attribute of an object that allows people to know how to
use it – e.g. a mouse button invites pushing, a door handle affords pulling
• Norman (1988) used the term to discuss the design of everyday objects – Learned conventions of arbitrary mappings between action and effect at
the interface – Some mappings are better than others
• Much popularised in interaction design to discuss how to design interface objects – e.g. scrollbars to afford moving up and down, icons to afford clicking on
![Page 24: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/24.jpg)
24
Logical constraint • Exploits people’s everyday
common sense reasoning about the way the world works
– Where do you plug the mouse?
– Where do you plug the keyboard?
– Top or bottom connector?
– Do the colour coded icons help?
From: www.baddesigns.com
![Page 25: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/25.jpg)
25
How to design them more logically
(i) A provides direct adjacent mapping between icon and connector
(ii) B provides color coding to associate the connectors with the labels
From: www.baddesigns.com
![Page 26: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/26.jpg)
26
Example
![Page 27: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/27.jpg)
27
Cultural constraints
• Learned arbitrary conventions like red triangles for warning
• Can be universal or culturally specific
![Page 28: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/28.jpg)
28
Mapping
A B C D • Relationship between controls and their movements and the results in the world
![Page 29: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/29.jpg)
29
Why is this a better design?
![Page 30: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/30.jpg)
30
Consistency
• Design interfaces to have similar operations and use similar elements for similar tasks
• For example: – always use ctrl key plus first initial of the command for
an operation – ctrl+C, ctrl+S, ctrl+O • Main benefit is consistent interfaces are easier to
learn and use
![Page 31: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/31.jpg)
31
Internal and external consistency
• Internal consistency: designing operations to behave the same within an application – Difficult to achieve with complex interfaces
• External consistency: designing operations, interfaces to be the same across applications and devices – Very rarely the case, based on different designer’s
preference - Brand Identity
![Page 32: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/32.jpg)
32
Keypad numbers layout
• A case of external inconsistency
1 2 3 4 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a) phones, remote controls (b) calculators, computer keypads
![Page 33: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/33.jpg)
33
Usability principles
• Similar to design principles, except more prescriptive
• Used mainly as the basis for evaluating systems
• Provide a framework for heuristic evaluation
![Page 34: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/34.jpg)
34
Usability principles (Nielsen 2001) • Visibility of system status • Match between system and the real world • User control and freedom • Consistency and standards • Help users recognize, diagnose and recover from
errors • Error prevention • Recognition rather than recall • Flexibility and efficiency of use • Aesthetic and minimalist design • Help and documentation
http://www.useit.com/papers/heuristic/heuristic_list.html http://designingwebinterfaces.com/6-tips-for-a-great-flex-ux-
part-5
![Page 35: unit2.ppt - design principles - DISI, University of Trentodisi.unitn.it/~deangeli/homepage/lib/exe/fetch.php?media=...unit2.ppt - design principles Author Antonella De Angeli Created](https://reader031.vdocuments.mx/reader031/viewer/2022022518/5b0b2d0d7f8b9a604c8db735/html5/thumbnails/35.jpg)
35
Recommended reading
• Sharp et al. Chapter 1 • More on design principles
– Don Norman 1988 The design of everyday things
– Usability: http://www.useit.com