1. Concepts, Principles, Guidelines
Usability Principles
Concepts, Principles, Guidelines

2. Agenda Usability Principles Why? Systems of categorization
Levels of detail
Example system of Principles

3. Why Principles & Guidelines?
…Because, well, not everything goes…
Intended to prevent many bad designs, before they begin, or evaluate existing designs on a scientific basis
Guidelines based on previous designs, experimental findings
Rules can all be “broken” (but usually in order to satisfy another principle)

4. Concepts, Principles, Guidelines
No “cookbooks”
No simple, universal checklists
There are many concepts, principles, and guidelines
Understand the higher level principles that apply across situations, display types, etc.
Implement the standards and guidelines
…a few details…
There are no cookbooks, but there are plenty of concepts, principles, and guidelines.
Next time I will talk about those. But for now, I want to let you try out the steps of user centered design
For now, the process is the key. Learn by doing.

5. Levels of Consideration
Meta-display level
Apply to the whole system, across media & across displays
Focus on this in Basic Layout Stage
Display Layout
Apply to groups of elements in a display
Focus on this in Prototyping and Redesign
Element level
Details about specific parts of a display
Colors, sound attributes, symbols
Principles that apply to all types of displays in your system, or to all of the displays of a given type, I refer to as “meta-display” principles. You need to consider the meta-display concepts during the basic layout stage, We’ll see some examples in a moment.
Principles that apply within a given display, for example a given screen of a piece of software, I call “Display-level” concepts. These refer to the relationships between the elements in a given display. On example would be principles that determine how to connect the similar elements in a display. These principles come into play more in the prototyping iteration, when you are specifying how the displays will actually sound or look This is more macroscopic than the next level of analysis.
The “element-level” principles are more specific guidelines that inform our choices about the details of a display. For example, how do we choose the text to put on the label on a button? Or how do we determine how loud to make a sound? These guidelines are often more medium-specific, or modality-specific. In addition, these element guidelines will flow out of, and be dependent on, the higher-level function allocation, the basic layout, and the earlier prototyping iterations.

6. UI Design Principles (Dix et al.)
Categories
Learnability
support for learning for users of all levels
Flexibility
support for multiple ways of doing tasks
Robustness
support for recovery
Think about these in terms of meta-display, display, and element levels
Design principles fit into one of the three main categories

7. 1. Learnability Principles
Ease with which new users can begin effective interaction and achieve maximal performance
Predictability
Synthesizability
Familiarity
Generalizability
Consistency

8. Predictability What will this action do?….
Operation visibility - can see avail actions
grayed menu items
menus vs. command shell
Will the action complete the application?
Seeing grayed menu items lets the user know what is provided but not currently available – gives hints about the state

9. Synthesizability
Support for user in assessing the effect of past operations on current system state
Moving a file in UNIX shell vs. GUI
Is same feedback needed for all users, all apps?
Can the user figure out
what caused this error?
The Unix copy failed, but why? The temp directory probably does not exist, but that requires significant Unix knowledge.

10. Familiarity
Does UI task leverage existing real-world or domain knowledge?
Really relevant to first impressions
Use of metaphors
Potential pitfalls (see next page)
Are there limitations on familiarity?
(e.g. parking lot colors and traffic light)
The traffic light metaphor is used frequently - red, yellow green meaning stop, caution, go

11. Familiarity ?
Very confusing – which traffic light is the “right” one? What about the long stack on the left?

12. Generalizability
Can knowledge of one system/UI be extended to other similar ones?
Example: cut & paste in different applications
Does knowledge of one aspect of a UI apply to rest of the UI?
e.g. file browser in OS, file locater in MS-Word
Aid: UI Developers guidelines
Font modifiers bold, italic, underline are typically the same in all applications

13. Consistency
Likeness in behavior between similar tasks/operations/situations
In different things
interacting
output
screen layout
Is this always desirable for all systems, all users?
Cut and paste in powerpoint does the same thing as cut and paste in excel, although they are different apps

14. 2. Flexibility Principles
Multiplicity of ways that users and system exchange information
Dialog Initiative
Multithreading
Task migratability
Substitutivity
Customizability

15. 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
Typical GUI – user- preemptive (also called user initiated)
Typical command language – system preemptive or system initiated (ie, Unix)

16. Multithreading Allowing user to perform more than one task at a time
Two types
Concurrent
Input to multiple tasks simultaneously
Interleaved
Many tasks, but input to one at a time
We’ve had this for a long time - Windows

17. Task migratability
Ability to move performance of task to entity (user or system) who can do it better
Auto-pilot/FMC in planes
Spell-checking
Safety controls in plant
For what kinds of tasks should the user be in control?
A Flight Management Computer (FMC) can reduce human error
User in control – requires human decision

18. Substitutivity Flexibility in details of operations
Allow user to choose interaction methods
Allow different ways to
perform actions
specify data
configure
Allow different ways of presenting output
to suit task, user
Move a file – can drag and drop, or copy and paste

19. Customizability Ability of user to modify interface
By user - adaptability
Is this a good thing?
By system - adaptivity
Can lead to inconsistencies – ie, users unable to help others because of custom interfaces

20. 3. Robustness Principles
Supporting user in determining successful achievement and assessment of goals
Observability
Recoverability
Responsiveness
Task Conformance
Robustness – did it work?

21. Observability
Can user determine internal state of system from what she perceives?
Browsability
Explore current state (without changing it)
Reachability
Navigate through observable states
Persistence
How long does observable state persist?
Did a file copy succeed? Is the operation completed or still working? Is the system hung?

22. Recoverability
Ability to take corrective action upon recognizing error
“UNDO”
Difficulty of recovery procedure should relate to difficulty of original task
Forward recovery
Ability to fix when we can’t undo
Backward recovery
Undo previous error(s)
Critical for user exploration

23. Responsiveness Users perception of rate of communication with system
Response time
Time for system to respond in some way to user action(s)
Users perceptions not always right
Consistency important
Response OK if matches user expectations
There are limits of human waiting – will cover this later, but used to be 10 seconds. Now closer to 4.

24. 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?

25. Application of Principles
In doing design and implementation of your project, revisit this list
Assess your design against these usability principles
REMEMBER: There are other principles!

26. Upcoming
Human Capabilities
Physical
Cognitive

27. Some Practical Principles
The following pages contain a number of different, practical guidelines at each of the three levels (meta, display, and element levels)
Some are the same or similar to ones we have discussed in class
Some are more specific
They have proven useful to me, but, of course, your mileage may vary

28. Meta-display Principles, I
Navigation model
Decide on one navigation metaphor (e.g., menu structure vs. home page), and use it consistently.
Consistent navigation cues
Families of logos, color schemes, and sounds used to indicate displays are related. Be subtle, consistent, and don’t forget aesthetics!
Fail-safe design principle
Allow user to go back to previous items, steps, screens, etc. Allow user to undo as many actions as possible. Provide a true “Quit” or “Cancel” option.
Let’s look at a few examples of meta-display principles. Keep in mind that while these apply to all types of displays, they are sometimes easier to explain or understand in the context of a particular modality.
Navigation model
Decide on one navigation metaphor (e.g., menu structure vs. home page), and use it consistently.
For example, either the menu structure like in a software package, or else the home-page with links model, but not both.
Consistent navigation cues
Within the navigation model, use the same navigation cues throughout. For example, if you use blue underlined text to indicate fresh links, and red text to indicate viewed links, keep that consistent throughout the application.
Families of logos, color schemes, and sounds used to indicate displays are related. Be subtle, consistent, and don’t forget aesthetics!
Fail-safe design principle
Allow user to go back to previous items, steps, screens, etc. Allow user to undo as many actions as possible. Provide a true “Quit” o “Cancel” option. Try to be consistent and economical and consistent on this. For example, in a telephone-based reservation system, * could always mean “Cancel” or “Quit”.

29. Meta-display Principles, II
Open-ended vs. Task completion model
Distinguish between browsing (open-ended) interaction, and task completion behavior.
Concert vs. Conversation model
A continuum of interaction types from passive recipient of the information (“concert”) to ask-and-respond dialog between the user and the system (“conversation”).
Computer vs. Appliance model
May need to avoid “computerese” and jargon.
Open-ended vs. Task completion model
Distinguish between browsing (open-ended) interaction, and task completion behavior. For example, finding out about different fishing spots is generally browsing behavior that is self-directed and may be stopped at any time, at any stage by the user. On the other hand, obtaining a fishing license will typically require the completion of a fixed number of steps, where the system needs to drive the process. See also concert/conversation model, below.
Concert vs. Conversation model
Distinguish between the concert mode of interactions and the conversation mode, where there is bi-directional information flow. Note that these two interaction types represent the ends of a continuum of interaction types. In the concert mode, give more control to the system; turn on all the bells and whistles, etc. In conversational mode, provide even amounts of control, and simplify the interface.
Computer vs. Appliance model
Is the system to be treated like a computer, like technology, or like an appliance? A data-exploration software package may be well suited to use terms like File, Save, Delete, and so on. But a WebTV application is treated in a different way, so it may require different terms of reference and a different interaction style.
May need to avoid “computerese” and jargon.

30. Meta-display Principles, III
Logo/icon principle
Top level has a logo (or melody). Lower levels have icon version of logo (or “theme” of melody).
Family of logos principle
Related applications have icons (and earcons) that form a “family;” in fact, a simple symbolic language to help users navigate.
Process preview and progress indicators
Provide a preview or summary of what is to come, and provide an indication of how far along the user is at all times.
Logo/icon principle
Top level of an application should have a logo (or melody which is simple, and which clearly defines the purpose f that application (or sub-application). Sub-pages should contain a smaller version of the logo to indicate that the pages are related. The initial display could have a melody introduction, then subsequent pages displays might have a shorter motif or theme based on the main melody.
Family of logos principle
Related applications have icons (and earcons) that form a “family;” in fact, a simple symbolic language to help users navigate. For example, fishing information, fishing locations, fishing tips, and getting a fishing license should all form a family of applications, and thereby have a family of logos.
Process preview and progress indicators
Provide a preview or summary of what is to come, and provide an indication of how far along the user is at all times.
The information in the preview should contain (1) the steps involved in completing the task (numbered, to help in the progress preview); (2) what the user needs to complete the task; and (3) an estimate of the time or resources required to complete the task.
The progress indicators should follow the logo/icon principle, in that the progress indicators should resemble the original steps listed in the preview.

31. Display Level Principles, I
Compatibility (cognitive and physical)
Left is left, up is up. Align display dimensions (in all modalities!) with real-world data dimensions.
Familiarity principle
Provide users with interface items that relate to their real world.
Appropriate medium/modality
Choose the best medium to display a given type of information (like function allocation).
Population stereotypes and mappings
Where possible, build on the expectancies of your user population (red = stop; high pitch = hot).

32. Display Level Principles, II
Process flow = display flow
(Western) readers work left-to-right, top-to-bottom. If there is a most frequent order of actions, design display to correspond (left or up = “back;” right or down = “continue”).
Conceptual size = hierarchical position
Items, objects, groups that are larger (even conceptually) or hierarchy are displayed before smaller items (take note of process flow).
Group like items
Items similar in content or function should be grouped together n space or time. They should share spatial, physical, or temporal attributes.

33. Display Level Principles, III
Continuous vs. Discrete data
Does data “flow” or is it displayed in “chunks”?
Object + action vs. Action + object (action grammar)
Is an object selected, then an action indicated, or vice versa?
Most important info in “center”
Center the important info in the display space (both visual and auditory). Controls in the periphery.
Avoid modes
Each display should have one meaning only, and certainly only one meaning with a screen’s context.

34. Element Level Guidelines, I
A few “controls” guidelines…
Label-Action match
Controls say what they do, and do what they say. Consistent both within and across applications. Note: “OK” is not okay!
Button location / icon /action compatibility
(1) Control icon is compatible with action
(2) Control location is compatible with the action (and with the icon)
Consistent menus
Menus should be consistent within and across applications. Most frequently used options located to the top and left.

35. Element Level Guidelines, II
Several auditory guidelines…
Duration: 100 ms minimum
Loudness: dB over ambient; max 90 dB
Onset (“attack”) rate: 1-5 dB per second; 20 ms minimum
Frequency: Hz. Varies with age.
Levels of data in a dimension:
Intensity (pure tones) 4-5
Frequency 4-7
Duration 2-3

36. Element Level Guidelines, III
More auditory guidelines…
Appropriate spectrum
Complex spectral features for warning or detection; transients for localization; simple spectrum for discrimination
Avoid similar frequencies
(Leads to “beating”, poor discrimination)
Use population expectancies for mappings
Louder, brighter, faster, higher pitch = “more” or “up”
Rising pitch = “moving up” or “getting full”
Major key, bright spectrum = “happy” or “good”
Note: Make sure you know which population stereotypes apply (e.g., sighted vs. blind listeners)