CHAPTER 8 - User Interface Design

Consistency, memorization, help, context sensitivity, response, arcane

Typical Design Errors

− lack of ___________

− too much ____________

− no guidance / ____

− no _______ ___________

− poor ________

− ______/unfriendly

Golden Rules

• Place the user in control

• Reduce the user's memory load

• Make the interface consistent

Place the User in Control

golden rule.

• Define interaction modes in a way that does not force a user into unnecessary or undesired actions.

• Provide for flexible interaction.

• Allow user interaction to be interruptible and undoable.

• Streamline interaction as skill levels advance and allow the interaction to be customized.

• Hide technical internals from the casual user.

• Design for direct interaction with objects that appear on the screen.

Reduce the User's Memory Load

golden rule.

• Reduce demand on short-term memory.

• Establish meaningful defaults.

• Define shortcuts that are intuitive.

• The visual layout of the interface should be based on a real world metaphor.

• Disclose information in a progressive fashion.

Make the Interface Consistent

golden rule.

• Allow user to put the current task into a meaningful context.

• Maintain consistency across a family of applications.

• If past interactive models have created user expectations, do not make changes unless there is a compelling reason to do so.

User, design, mental, implementation

4 ui design models (udmp, ___ model)

User model

ui design model. a profile of all end users of the system

Design model

ui design model. a design realization of the user model

Mental model

ui design model. (system perception) the user's mental image of what the interface is

Implementation model

ui design model. the interface "look and feel" coupled with supporting information that describe interface syntax and semantics

Interface analysis

What means understanding the people who will interact with the system, the tasks they must perform, the content presented, and the environment?

End-users, tasks, content, and environment

What four things must be understood in interface analysis?

Consistency, memorization, help, context sensitivity, response, arcane

Typical Design Errors

− lack of ___________

− too much ____________

− no guidance / ____

− no _______ ___________

− poor ________

− ______/unfriendly

User Analysis

What analysis asks questions about users' training, education, typing skills, age, gender, compensation, work hours, and expertise?

Trained professionals, technician, clerical, or manufacturing workers

user analysis question. Are users _______?

Level of formal education

user analysis question. What _____ does the average user have?

Written materials or classroom training

user analysis question. Are users capable of learning from _______ or have they expressed a desire for ________?

Expert typists or keyboard phobic

user analysis question. Are users ________?

Age range

user analysis question. What is the ____ of the user community?

Gender

user analysis question. Will the users be represented predominately by one ______?

Compensation

user analysis question. How are users _________ for the work they perform?

Normal office hours or until the job is done

user analysis question. Do users work _______?

Integral part or occasionally

user analysis question. Is the software to be an _______ of the work users do or will it be used only _________?

Primary spoken language

user analysis question. What is the _______ among users?

Consequences of mistakes

user analysis question. What are the _________ if a user makes a mistake using the system?

Subject matter expertise

user analysis question. Are users experts in the _______ that is addressed by the system?

Technology behind interface

user analysis question. Do users want to know the _________ that sits behind the interface?

Task Analysis and Modeling

answers the following questions:

− What work will the user perform in specific circumstances?

− What tasks and subtasks will be performed?

− What specific problem domain objects will the user manipulate?

− What is the sequence of work tasks—the workflow?

− What is the hierarchy of tasks?

Use-cases

task analysis technique. Define basic interaction

Task elaboration

task analysis technique. Refines interactive tasks

Object elaboration

task analysis technique. Identifies interface objects (classes)

Workflow analysis

task analysis technique. Defines how a work process is completed when several people (and roles) are involved

Analysis of Display Content

asks questions about:

− data location consistency

− user customization

− on-screen identification

− report partitioning

− summary information access

− graphical scaling

− color usage

− error message presentation

Geographic locations

display content. Are different types of data assigned to consistent ________ on the screen?

Customize screen location

display content. Can the user _______ for content?

On-screen identification

display content. Is proper ________ assigned to all content?

Partitioned

display content. If a large report is to be presented, how should it be ________ for ease of understanding?

Summary information

display content. Will mechanisms be available for moving directly to ________?

Scaled

display content. Will graphical output be _______ to fit within the bounds of the display device?

Color

display content. How will _____ be used to enhance understanding?

Error messages and warnings

display content. How will ________ be presented to the user?

Interface Design Steps

1. Define interface objects and actions

2. Define events that will cause UI state changes

3. Depict each interface state as it will look to end-user

4. Indicate how user interprets system state

Response time, help facilities, error handling, menu and command labeling, application accessibility, internationalization

Design Issues

Where am I?

WebApp interface question. The interface should:

− provide an indication the WebApp has been accessed

− inform the user of her location in the content hierarchy

What can I do now?

WebApp interface question. The interface should help the user understand current options:

− what functions are available?

− what links are live?

− what content is relevant?

Where have I been, where am I going?

WebApp interface question. The interface must facilitate navigation and provide a "map"

Bruce Tognozzi

Who suggested principles for effective WebApp interfaces?

Visually apparent, forgiving, sense of control

Effective interfaces (Tognozzi). Are _______ and ________, instilling in users a _______

Inner workings, saved, undo

Effective interfaces (Tognozzi). Do not concern the user with the _______ of the system. Work is continuously ______, with full option to ____ any activity

Maximum work, minimum information

Effective applications (Tognozzi). Perform a _______ of work, while requiring _______ from users

Anticipation

WebApp design principle. A WebApp should be designed so that it anticipates the user's next move

Communication

WebApp design principle. The interface should communicate the status of any activity initiated by the user

Consistency

WebApp design principle. The use of navigation controls, menus, icons, and aesthetics (e.g., color, shape, layout)

Controlled autonomy

WebApp design principle. Facilitate user movement while enforcing navigation conventions

Efficiency

WebApp design principle. Optimize the user's work efficiency, not the efficiency of the Web engineer or client-server environment

Focus

WebApp design principle. The interface should stay focused on the user task(s) at hand

Fitt's Law

"The time to acquire a target is a function of the distance to and size of the target"

Human interface objects

WebApp design principle. A vast library of reusable objects developed for WebApps

Latency reduction

WebApp design principle. Use multi-tasking that lets the user proceed with work as if the operation has been completed

Learnability

WebApp design principle. Minimize learning time, and once learned, minimize relearning when WebApp is revisited

Maintain work product integrity

WebApp design principle. A work product must be automatically saved so it will not be lost if an error occurs

Readability

WebApp design principle. All information presented should be readable by young and old

Track state

WebApp design principle. Track user interaction state so user can logoff and return later to pick up where she left off

Visible navigation

WebApp design principle. Provide "the illusion that users are in the same place, with the work brought to them"

Interface Design Workflow

1. Review information in analysis model

2. Develop rough sketch of interface layout

3. Map user objectives into specific interface actions

4. Define set of user tasks for each action

5. Storyboard screen images for each interface action

6. Refine layout using input from aesthetic design

7. Identify user interface objects required

8. Develop procedural representation of user's interaction

9. Develop behavioral representation of interface

10. Describe interface layout for each state

11. Refine and review interface design model

Aesthetic Design

• Don't be afraid of white space

• Emphasize content

• Organize layout elements from top-left to bottom right

• Group navigation, content, and function geographically

• Don't extend real estate with scrolling bar

• Consider resolution and browser window size

White space

aesthetic design principle. Don't be afraid of ______

Content

aesthetic design principle. Emphasize _______

Top-left to bottom right

aesthetic design principle. Organize layout elements from _______

Geographically

aesthetic design principle. Group navigation, content, and function _______ within the page

Scrolling bar

aesthetic design principle. Don't extend your real estate with the _______

Resolution and browser window size

aesthetic design principle. Consider _______ when designing layout