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

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

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 14914 – Software ergonomics ISO 13407 – Human-centered design process ISO 20282 – Operation of everyday products UIDE Chapter 9

ISO 13407 Human-Centered Design Processes for Interactive Systems ISO 13407 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

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

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

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

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

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

Simplicity Fig 9.1 UIDE Chapter 9

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

Fig 9.3 Sample of poor structure UIDE Chapter 9

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

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

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

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

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

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

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

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

Chapter 10 Interaction design

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

Human Action Cycle (7 Stages) UIDE Chapter 10

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

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

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

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

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

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