1. Ch. 9 Design guidance and design rationale Ch. 10 Interaction Design

2. Sources of Design Guidance
Great user interface design is like great architecture. It fits beautifully with its environment and its purpose, with room for creative flavor and artistry.
Standards
User interface standard – is a set of internationally agreed design principles
Design Guidelines
Style Guide
UIDE Chapter 9

3. User Interface Standards
Official, publicly available documents that define standards for user interface design
ISO 9241 – Ergonomic requirements for office work with visual display terminals
ISO – Software ergonomics
ISO – Human-centered design process
ISO – Operation of everyday products
UIDE Chapter 9

4. ISO 13407 Human-Centered Design Processes for Interactive Systems
ISO is a description of best practice in user centered design. It provides guidance on design activities that take place throughout the life cycle of interactive systems. It describes an iterative development cycle where product requirements specifications correctly account for user and organizational requirements as well as specifying the context in which the product is to be used.
Benefits:
Systems are easier to understand and use
Discomfort and stress are reduced
User satisfaction is improved
Productivity and efficiency is improved
Quality, aesthetics and impact are improved
Review the Cost and Benefit to add ULAB to a company
UIDE Chapter 9

5. ISO 13407 Human-Centered Design Processes for Interactive Systems
Essential Elements
Active involvement of and clear understanding of users
Appropriate allocation of functions between users and technology
Iteration of design solutions
Multidisciplinary design perspective
Next: Style Guides
UIDE Chapter 9

6. Style Guides A typical guide includes:
Description of required interaction styles and user interface controls
Guidance on when and how to use the various styles or controls
Illustrations of styles and controls
Screen templates
UIDE Chapter 9

7. Commercial Style Guides
Apple Interface Guidelines
Microsoft Windows XP UI Guidelines
IBM’s Common User Access
Motif Style Guide
Sun Microsystems’ Java Look and Feel
K Desktop Environment
UIDE Chapter 9

8. Customizes Style Guides
Helps focus on design issues early
Enables use of principles and guidelines
Steer decision making and serve as record
Ensures consistency
UIDE Chapter 9

9. Design Principles: Simplicity, Structure, Consistency, and Tolerance
UIDE Chapter 9

10. Simplicity
Fig 9.1
UIDE Chapter 9

11. Structure Organization of the UI in a meaningful way Fig 9.2
UIDE Chapter 9

12. Fig 9.3 Sample of poor structure
UIDE Chapter 9

13. Consistency Uniformity in appearance, placement, and behavior
UIDE Chapter 9

14. Tolerance Prevent user from making mistakes Prevention Recoverability
Forward error recovery - system accepts the error and helps the user to accomplish their goal
Backward error recovery – undo the effects of the previous interaction
UIDE Chapter 9

15. Accessibility The Principles of Universal Design
W3C Web Content Accessibility Guidelines
Section 508
The Limitations of Guidelines
UIDE Chapter 9

16. 7 Principles of Universal Design
Equitable use – useful to diverse abilities
Flexibility in use – accommodates a wide range
Simple and intuitive use – easy to use & learn
Perceptible information – communicates effectively
Tolerance for error - minimizes
Low physical effort – minimum fatigue
Size and space for approach and use
UIDE Chapter 9

17. W3c Web Content Guidelines
W3c Web Content Accessibility Guidelines
14 general principles of accessible design
Provide alternatives to auditory and visual content
Don’t rely on color alone
Use markup and style sheets properly
Clarify natural language usage
Create tables that transform gracefully
New technology pages transform gracefully
UIDE Chapter 9

18. W3c Web Content Guidelines
Ensure user control of time-sensitive content changes
Ensure direct accessibility of embedded user interfaces
Design for device independence
Use interim solutions (for older browsers to function)
Use W3C technologies and guidelines
Provide context and or entation information
Provide clear navigation mechanisms
Ensure that documents are clear and simple
UIDE Chapter 9

19. Section 508.gov
In 1998, Congress amended the Rehabilitation Act of 1973 to require Federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities. Inaccessible technology interferes with an ability to obtain and use information quickly and easily. Section 508 was enacted to eliminate barriers in information technology, open new opportunities for people with disabilities, and encourage development of technologies that will help achieve these goals. The law applies to all Federal agencies when they develop, procure, maintain, or use electronic and information technology. Under Section 508 (29 U.S.C. ‘794 d), agencies must give disabled employees and members of the public access to information that is comparable to access available to others. It is recommended that you review the laws and regulations listed below to further your understanding about Section 508 and how you can support implementation.
UIDE Chapter 9

20. Design Rationale How to Record Design Decisions
The Benefits of Recording Design Decisions
Maintains decision process
Valuable to justify design decisions
How to Record Design Decisions
Document only key decisions
Tabular design is easiest to comprehend
Categorized by date
UIDE Chapter 9

21. Chapter 10 Interaction design

22. The Human Action Cycle Form a goal
The Details of the Human Action Cycle
Form a goal
Creates/executes actions that move toward that goal.
Perceives and interprets the outcome
Recognizes possible need to reformulate
Using the Human Action Cycle to Influence the Design Process
UIDE Chapter 10

23. Human Action Cycle (7 Stages)
UIDE Chapter 10

24. Using the Human Action Cycle to Influence the Design Process
Walk through the prototype
May be able to predict user difficulties
May be able to suggest suitable changes
May be able to suggest skills for the user
May be able to devise new requirements for the UI design
UIDE Chapter 10

25. Using the Human Action Cycle to Influence the Design Process
What are the steps to lowering the volume?
Suggest changes to the design of the volume and channel control
UIDE Chapter 10

26. Communicating the Designer’s Understanding of the System
Designer’s Model
System Image
How the User Interface Enables the User to Develop an Accurate Mental Model
UIDE Chapter 10

27. Communicating the Designer’s Understanding of the System
Designer’s Model: An explicit and consciously developed model
User’s Model: Mainly functional information
System Image: UI, documentation, training.
UIDE Chapter 10

28. Using Metaphors to Develop Accurate Mental Models
The Benefits of Metaphor
Problems with Metaphor
Choosing a Suitable Metaphor or Set of Metaphors
UIDE Chapter 10

29. Metaphor
“a figure of speech in which a word or phrase denoting one king of object or action is used in place of another to suggest a likeness or analogy between them”
Common UI Metaphors
Words on the screen
Static images and icons
Interactive graphics
UIDE Chapter 10