![Page 1: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/1.jpg)
Design Principles
![Page 2: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/2.jpg)
Test
High: 98 Average: 76 Median: 78
A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65
![Page 3: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/3.jpg)
Reminder: Poster Session
Sample posters on Wiki Present ideas:
– Overview of requirements such as users, features, goals– At least 3 design ideas – sketches, storyboards, scenarios,
etc., pros and cons– Everyone should be able to give brief overview of poster
and ideas Get feedback
– Figure out what you want to ask of those you talk to Give feedback
– Visit other posters and give feedback
![Page 4: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/4.jpg)
Design Principles, Guidelines, Heuristics
Guidelines, practices to help designers No “cookbooks”, no universal checklists Are neither complete nor orthogonal
– Can all be “broken”, often to satisfy another rule Have underpinnings in psychology or experience or
common sense
Understand the higher level principles that apply across situations, display types, etc.
Implement the standards and guidelines
![Page 5: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/5.jpg)
We’ve already discussed some
Affordances Mapping Visibility Feedback Constraints conceptual model
![Page 6: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/6.jpg)
Usability Principles
Categories– Learnability
Support for learning for users of all levels– Flexibility
Support for multiple ways of doing tasks– Robustness
Support for recovery
Always think about exceptions, suitability Also good for prioritizing usability evaluations
![Page 7: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/7.jpg)
1. Learnability Principles
Ease with which new users can begin effective interaction and achieve maximal performance – Predictability– Synthesizability– Familiarity Metaphor– Generalizability– Consistency
![Page 8: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/8.jpg)
1.1 Predictability
I think that this action will do….
![Page 9: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/9.jpg)
1.2 Synthesizability
Support for user in assessing the effect of past operations on current system state
![Page 10: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/10.jpg)
1.3 Familiarity
Does UI task leverage existing real-world or domain knowledge?– Really relevant to first impressions
– Use of metaphors Potential pitfalls
![Page 11: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/11.jpg)
1.4 Generalizability
Can knowledge of one system/UI be extended to other similar ones?– Example: cut & paste in different applications
– Aid: UI Developers guidelines
![Page 12: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/12.jpg)
1.5 Consistency
Likeness in behavior between similar tasks/operations/situations/terminology
– Dialogue boxes always have yes/no/cancel buttons– Saving dialogues always have Save/Cancel buttons
Avoid special cases and special rules For command line systems - consistent syntax
– Find consistency between commands, unify them - as in Unix pipes for file I/O and for process inter-communications
![Page 13: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/13.jpg)
(In)Consistency Example
Drag a file icon to:Folder on same physical disk
Folder on another physical disk
Different disk
Trash can
Result:File is moved to folder
File is copied there
File is copied there
File is discarded
![Page 14: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/14.jpg)
2. Flexibility Principles
Multiplicity of ways that users and system exchange information– Dialog Initiative– Multithreading– Substitutivity– Customizability
![Page 15: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/15.jpg)
2.1 Dialog Initiative
Not hampering the user by placing constraints on how dialog is done – User pre-emptive
User initiates actions More flexible, generally more desirable
– System pre-emptive System does all prompts, user responds Sometimes necessary
![Page 16: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/16.jpg)
2.2 Multithreading
Allowing user to perform more than one task at a time
Two types– Concurrent
Input goes to multiple tasks simultaneously– Interleaved
Many tasks, but input goes to one at a time
![Page 17: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/17.jpg)
2.3 Substitutivity
Equivalent values can be substituted for each other– Point at spreadsheet cell vs enter name– Give temperature via slider or by typing
![Page 18: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/18.jpg)
2.3 Substitutivity
Flexibility in details of operations– Allow user to choose suitable interaction methods– Allow different ways to
perform actions, specify data, configure– Allow different ways of presenting output
to suit task & user
![Page 19: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/19.jpg)
2.4 Customizability
Ability of user to modify interface– By user - adaptability
Is this a good thing?
– By system - adaptivity Is this a good thing?
![Page 20: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/20.jpg)
3. Robustness Principles
Supporting user in determining successful achievement and assessment of goals – Observability– Error Prevention– Recoverability– Responsiveness– Task Conformance
![Page 21: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/21.jpg)
3.1 Observability
Can user determine internal state of system from what he/she perceives?
– Browsability Explore current state (without changing it) Reduces memory load But don’t overwhelm user with information either
– Reachability Navigate through observable states
– Persistence How long does observable state persist?
– Observability also aids learnability
![Page 22: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/22.jpg)
![Page 23: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/23.jpg)
3.1 Observability – Forest + Trees
Acrobat Reader with ToC to give context
Forest is the bookmarks, tree is the single page
![Page 24: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/24.jpg)
3.1 Observability - Scroll Bar
Scroll bar size indicates % in view - but does not indicate absolute sizes.
Can add other info, such as
– Page 5 of 12
![Page 25: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/25.jpg)
Operation visibility
Can see avail actions– Menus vs. command line– Grayed menu items provide context
![Page 26: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/26.jpg)
Visibility Minimizes User Memory Load
Recognition is better than recall Make visible!
Describe required input format, include example and default
Date: _ _ - _ _ - _ _ (DD-MM-YY)
Also avoids errors
![Page 27: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/27.jpg)
3.2 Error Prevention
Make it hard for the user to make an error Don’t let the user do something that will lead
to an error message
![Page 28: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/28.jpg)
3.3 Recoverability
Ability to take corrective action upon recognizing error
– Forward recovery Ability to fix when we can’t undo
– Backward recovery Undo previous error(s)
– Abort operation underway Only makes sense if is a slow operation
Encourages experimentation (hence learnability) by reducing cost of making mistakes
![Page 29: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/29.jpg)
3.3. Recoverability
![Page 30: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/30.jpg)
3.4 Responsiveness
Users perception of rate of communication with system (not always right)
Response time– Time for system to respond in some way to user action(s)
Response OK if matches user expectations Once user enjoys fast response, is hard to go back
to slower response– Dial-up versus DSL or Cable Modem
![Page 31: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/31.jpg)
3.4 Responsiveness
Response to motor actions– Keyboarding, mouse movement - less than 100
msec.– Rich Human Factors literature on this
Consistency is important - experimental result– Users preferred longer but more consistent response
time– Times that differed 10% to 20% were seen as same
![Page 32: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/32.jpg)
3.4 Responsiveness
![Page 33: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/33.jpg)
3.5 Task Conformance
Does system support all tasks user wishes to perform in expected ways?– Task completeness
Can system do all tasks of interest?– Task adequacy
Can user understand how to do tasks?– Does it allow user to define new tasks?
Extensibility
![Page 34: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/34.jpg)
More Usability heuristics (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
![Page 35: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/35.jpg)
Universal design principles
equitable use flexibility in use simple and intuitive to use perceptible information tolerance for error low physical effort size and space for approach and use
http://www.design.ncsu.edu/cud/univ_design/princ_overview.htm
![Page 36: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/36.jpg)
User experience goals
– Satisfying– Fun– Entertaining– Enjoyable– Helpful– Motivating– Aesthetically
pleasing– Motivating
– Rewarding– Emotionally fulfilling– Support creativity– …and more
![Page 37: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/37.jpg)
Example
Most important usability principles for– Movie ticket kiosk– Instant messenger– Flight control
![Page 38: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/38.jpg)
Styleguides
Codify many of these principles for a particular look and feel– Mac OS, Windows, Motif, Palm, Blackberry
Developed in concert with toolkit, but go beyond toolkit
![Page 39: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/39.jpg)
Excerpt from OS X Styleguide
Drag and Drop Overview Ideally, users should be able to drag any content from any window to any other window that accepts the content’s type. If the source and destination are not visible at the same time, the user can create a clipping by dragging data to a Finder window; the clipping can then be dragged into another application window at another time.
Drag and drop should be considered an ease-of-use technique. Except in cases where drag and drop is so intrinsic to an application that no suitable alternative methods exist—dragging icons in the Finder, for example—there should always be another method for accomplishing a drag-and-drop task.
The basic steps of the drag-and-drop interaction model parallel a copy-and-paste sequence in which you select an item, choose Copy from the Edit menu, specify a destination, and then choose Paste. However, drag and drop is a distinct technique in itself and does not use the Clipboard. Users can take advantage of both the Clipboard and drag and drop without side effects from each other.
A drag-and-drop operation should provide immediate feedback at the significant points: when the data is selected, during the drag, when an appropriate destination is reached, and when the data is dropped. The data that is pasted should be target-specific. For example, if a user drags an Address Book entry to the “To” text field in Mail, only the email address is pasted, not all of the person’s address information.
You should implement Undo for any drag-and-drop operation you enable in your application. If you implement a drag-and-drop operation that is not undoable, display a confirmation dialog before implementing the drop. A confirmation dialog appears, for example, when the user attempts to drop an icon into a write-only drop box on a shared volume, because the user does not have privileges to open the drop box and undo the action.
(Color added for emphasis.)
![Page 40: Design Principles. Test High: 98 Average: 76 Median: 78 A: 85-100 (11) B: 75-84 (12) C: 65-74 D: < 65](https://reader036.vdocuments.us/reader036/viewer/2022062523/5a4d1ad07f8b9ab05997149d/html5/thumbnails/40.jpg)
Your project
Which principles or guidelines are most important for your project?
What does that principle mean for your design?
How might you measure success?