Ch. 9 Design guidance anddesign rationale

Ch. 10 Interaction Design

UIDE Chapter 9 2

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

Sources of Design Guidance

UIDE Chapter 9 3

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

User Interface Standards

UIDE Chapter 9 4

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

ISO 13407 Human-Centered Design Processes for Interactive Systems

UIDE Chapter 9 5

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

ISO 13407Human-Centered Design Processes for

Interactive Systems

UIDE Chapter 9 6

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

Style Guides

UIDE Chapter 9 7

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

Commercial Style Guides

UIDE Chapter 9 8

Helps focus on design issues early Enables use of principles and guidelines Steer decision making and serve as record Ensures consistency

Customizes Style Guides

UIDE Chapter 9 9

Design Principles: Simplicity, Structure, Consistency, and Tolerance◦Simplicity

◦Structure

◦Consistency

◦Tolerance

UIDE Chapter 9 10

Simplicity

Fig 9.1

UIDE Chapter 9 11

Organization of the UI in a meaningful way

Structure

Fig 9.2

UIDE Chapter 9 12

Fig 9.3 Sample of poor structure

UIDE Chapter 9 13

Uniformity in appearance, placement, and behavior

Consistency

UIDE Chapter 9 14

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

Tolerance

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

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

7 Principles of Universal Design

UIDE Chapter 9 17

W3c Web Content Accessibility Guidelines◦ 14 general principles of accessible design1. Provide alternatives to auditory and visual

content2. Don’t rely on color alone3. Use markup and style sheets properly4. Clarify natural language usage5. Create tables that transform gracefully6. New technology pages transform gracefully

W3c Web Content Guidelines

UIDE Chapter 9 18

7. Ensure user control of time-sensitive content changes

8. Ensure direct accessibility of embedded user interfaces

9. Design for device independence10. Use interim solutions (for older browsers to

function)11. Use W3C technologies and guidelines12. Provide context and or entation information13. Provide clear navigation mechanisms14. Ensure that documents are clear and simple

W3c Web Content Guidelines

UIDE Chapter 9 19

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.

Section 508.gov

UIDE Chapter 9 20

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

Design Rationale

Chapter 10

Interaction design

UIDE Chapter 10

The Human Action Cycle◦ 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

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

Using the Human Action Cycle to Influence the Design Process

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

Designer’s Model

System Image

How the User Interface Enables the User to Develop an Accurate Mental Model

Communicating the Designer’s Understanding of the System

UIDE Chapter 10

Designer’s Model: An explicit and consciously developed model

User’s Model: Mainly functional information System Image: UI, documentation, training.

Communicating the Designer’s Understanding of the System

UIDE Chapter 10

The Benefits of Metaphor

Problems with Metaphor

Choosing a Suitable Metaphor or Set of Metaphors

Using Metaphors to Develop Accurate Mental Models

UIDE Chapter 10

“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

Metaphor