COSC3461

User Interface Design in the Workplace

3461

Human Factors - Textbook Definition

Human factors is the discipline that tries to optimize the relationship between technology and the human (Kantowitz and Sorkin, 1983).

The goal of human factors is to apply knowledge in designing systems that work, accommodating the limits of human performance and exploring the advantages of the human operator in the process (Wickens, 1984).

3461

Human factors work (which encompasses UI design) has a rich history in life critical fields including:

• military• aviation• medical

However, for most consumer products are being marketed little to no human factors work has been conducted.

3461

UI work during the product cycle is often not conducted to cut costs, even though not doing so leads to much greater costs in terms of higher customer support, slower market acceptance, and lower consumer satisfaction.

(ex. Nortel in 2000-2001 laid off every human factors professional in its organization.)

Overemphasis in being first to market. (Newton vs. Palm Pilot)

3461

About Face (1995) Alan Cooper

There is a conflict of interest in the world of software development because the people who build it are also the people who design it. If carpenters designed houses, they would certainly be easier or more interesting to build, but not necessarily better to live in. The architect, besides being trained in the art of what works and what doesn't, is an advocate for the client, for the user. (p. 23)

Eventually, we will see a bifurcation in the industry: Designers will design the software and engineers will build it. This is currently considered a luxury by those development shops that haven't realized the fiscal and marketing advantages that come with professional software design. (p. 2f.)

3461

Organization- (User-Centered Roles)

Graphic Designers GUI Programmers (Software Developers) UI Designers Usability Testers Technical Writers/Documentation Marketing

3461

Comparing the skills (Graphic Designers, GUI Programmers, UI Designers, Usability Testers, Technical Writers, and Marketing)(1 of 6)

Graphic

Designer

Creating recognizable images, intuitive symbols

Aesthetic appeal Making best use of the available display

medium Conveying function graphically Visual consistency Layout

Adapted from Johnson, J. (2000) GUI Bloopers, p.419

3461

Comparing the skills (Graphic Designers, GUI Programmers, UI Designers, Usability Testers, Technical Writers, and Marketing)(2 of 6)

GUI

Programmer

Programming, implementation, internal architecture

Knowledge of GUI toolkit Maximizing performance Understanding technical constraints on

implementation

Adapted from Johnson, J. (2000) GUI Bloopers, p.419

3461

Comparing the skills (Graphic Designers, GUI Programmers, UI Designers, Usability Testers, Technical Writers, and Marketing)(3 of 6)

UI Designer Task analysis, conceptual design UI design with task flow and context Specifying real-time responsiveness

criteria Assessing conformance to usability

standards Layout

Adapted from Johnson, J. (2000) GUI Bloopers, p.419

3461

Comparing the skills (Graphic Designers, GUI Programmers, UI Designers, Usability Testers, Technical Writers, and Marketing)(4 of 6)

Usability Tester

Ability to recruit participants, users Usability evaluation, usability testing Knowledge of “thinking aloud” protocol

and “active listening” Conduct surveys, panel sessions, focus

groups, interviews, observational studies Statistical analysis, experimental design

3461

Comparing the skills (Graphic Designers, GUI Programmers, UI Designers, Usability Testers, Technical Writers, and Marketing)(5 of 6)

Technical Writer

(Documentation)

Ability to develop customer/market driven documentation

Screen readability and organization Strong writing skills, ability to convey

highly technical information clearly Variety of presentation methodologies

3461

Comparing the skills (Graphic Designers, GUI Programmers, UI Designers, Usability Testers, Technical Writers, and Marketing)(6 of 6)

Marketing Knowledge of customer (vs. user!) Economic Trend Analysis Political and Social Analysis Product and Service Analysis Market Potential Analysis Knowledge of Packaging, Pricing,

Distribution, Advertising, Promotion, Publicity

Development of Overall Strategy

3461

Examples of the kind of work UI Designers are trained to do:

Reduce the number of commands in an application from several hundred to 48

Flatten its menu hierarchy from four levels to two Decrease the total number of windows from 23 to 11 Eliminate half of the mouse actions formerly required to

complete a common task Revise the menu commands to be consistent Rewrite error messages that provide solutions rather

than merely describe problems

Adapted from Johnson, J. (2000) GUI Bloopers, p.417

3461

Usability Testing- Definition

Usability testing is a method by which users of a product are asked to perform certain tasks in an effort to measure the product's ease-of-use, task time, and the user's perception of the experience. Changes are made to the application or site based on the findings of the usability tests. Usability test participants are encouraged to think aloud and voice their every opinion. Usability testing is best used in conjunction with a user-centered design process, a method by which a product is designed according to the needs and specifications of users.

Adopted from http://searchwebmanagement.techtarget.com/sDefinition/0,,sid27_gci214526,00.html

3461

The User-Centered Design Process Three major components:

– Early focus on users and tasks– Empirical measurement– Iterative design

In practice software development often involves incremental changes rather than the creation of an entirely new product

Variety of process models in use, will now show one of them

3461

User-Centered Design Process(Usability Engineering Lifecycle)

UserProfile

TaskAnalysis

PlatformCapabilities/Constraints

GeneralDesign

Principles

UsabilityGoals

StyleGuide

WorkRe-

engineering

ConceptualModel (CM)

Design

CMMockups

IterativeCM

Evaluation

EliminatedMajor Flaws?

Screen DesignStandards

(SDS)

SDSPrototyping

IterativeSDS

Evaluation

Met UsabilityGoals?

Detailed UserInterface

Design (DUID)

Met UsabilityGoals?

IterativeDUID

Evaluation

All FunctionalityAddressed?

No Yes

StyleGuide

No

StyleGuide

Yes

No

No

Yes

Requirements Analysis

Design, Testing, & Development

From Mayhew, Deborah J. (199) The Usability Engineering Lifecycle

3461

Requirements Analysis (1 of 2)

From Mayhew, Deborah J. (199) The Usability Engineering Lifecycle

UserProfile

TaskAnalysis

PlatformCapabilities/Constraints

GeneralDesign

Principles

UsabilityGoals

StyleGuide

On toDesign/Testing/Development

3461

Requirements Analysis (2 of 2)

From Mayhew, Deborah J. (199) The Usability Engineering Lifecycle

User Profile: A description of the specific user characteristics relevant to UI design.

Contextual Task Analysis: A study of user’s current tasks, work-flow patterns.

Platform Capabilities and Constraints: Hardware, operating system, toolkits.

Usability Goal Setting: Minimal acceptable user performance and satisfaction criteria defined.

Style Guide: Documentation of Requirements Analysis

3461

Design/Testing/Development (1 of 4)

From Mayhew, Deborah J. (199) The Usability Engineering Lifecycle

WorkRe-

engineering

ConceptualModel (CM)

Design

CMMockups

IterativeCM

Evaluation

EliminatedMajor Flaws?

Screen DesignStandards

(SDS)

SDSPrototyping

IterativeSDS

Evaluation

Met UsabilityGoals?

Detailed UserInterface

Design (DUID)

Met UsabilityGoals?

IterativeDUID

Evaluation

All FunctionalityAddressed?

No Yes

StyleGuide

No

StyleGuide

Yes

No

No

RequirementsAnalysis

Yes

3461

Design/Testing/Development (2 of 4)

From Mayhew, Deborah J. (199) The Usability Engineering Lifecycle

Work Reengineering: User task redesign, reorganization of functionality, and work-flow design. No user interface design in this step

Conceptual Model Design: Based upon previous tasks high-level design alternatives are generated.

Conceptual Model Mockups: Generate low-fidelity mock-ups for selected subsets of product functionality.

Iterative Conceptual Model Evaluation: Low-fidelity user testing with redesign & reevaluate iterations.

3461

Design/Testing/Development (3 of 4)

From Mayhew, Deborah J. (199) The Usability Engineering Lifecycle

Screen Design Standards: Development of a set of product-specific standards and conventions for all aspects of detailed screen design.

Screen Design Standards Prototyping: Implement a running prototype for selected subsets of product functionality based on the Screen Design Standards.

Iterative Screen Design Standards Evaluation: Formal usability testing with redesign/reevaluate iterations until all major usability bugs are eliminated and usability goals seem within reach.

3461

Design/Testing/Development (4 of 4)

From Mayhew, Deborah J. (199) The Usability Engineering Lifecycle

Detailed User Interface Design: Detailed design of the complete product user interface based on Conceptual Model and Screen Design Standards detailed in the Style Guide.

Iterative Detailed User Interface Design Evaluation: Formal usability testing conducted during product development to include unassessed subsets of functionality and categories of users.

3461

The most important factor leading to the development of usable software is:

An understanding of user needs The right development team In-house design standards Early usability testing Management buy-in

http://www.humanfactors.com/library/usabilityquiz.asp

3461

Bottom-line Benefits of User-Centered Design Process

Greater profits due to more competitive products/services

Decreased overall development and maintenance costs

Decreased customer support costs More follow-on due to satisfied

customers

From Mayhew, Deborah J. (199) The Usability Engineering Lifecycle

3461

Designing for Ease of Use

Three Models User’s Conceptual Model Designer’s Model Programmer's Model

http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/569

3461

User’s Conceptual Model

A mental image that each user subconsciously forms as he or she interacts with the system. People create mental models by putting together sets of perceived rules and patterns in a way that explains a situation.

When users first interact with a new interface, they are likely to attempt to understand its operation in terms of roles and relationships they already understand (metaphors)

http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/569

3461

Designer’s Model The interface components and relationships intended to be

seen by users and intended to become part of each user's conceptual model are described in the designer's model. This model represents the designer's intent in terms of components users will see and how they will use the components to

accomplish their tasks. The designer's model identifies objects, how those objects are

represented to users, and how users interact with those objects. User oriented objects are defined in terms of

properties, behaviors, and relationships with other objects.

http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/569

3461

Programmer’s Model Describes the system internals used to implement the designer's

model. For example, the designer's model might include a directory

object that consists of people's names, addresses, office numbers, and so forth. The programmer’s model of the directory object might consist of records in a file, with one record for each directory entry; or, it could be a complex organization of multiple records from multiple files.

The programmer’s model implementation details from the should not be evident in the designer's model and are therefore transparent to users.

http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/569