1

Managing Design Processes

Designs should be based on:

Observation of users

Task frequencies and sequences

Validation via early usability testing and acceptance tests

Iterative Design

Early test of low-fidelity prototypes

Revisions based on user feedback

Incremental refinements based on usability testing

Organizational Support of Usability

When competing products have similar functionality usability is often a differentiator

2

Managing Design Processes

Developing support for User Centered Design

ROI – Return on investment

Decreased training time (transfer of training)

Faster task completion time (e.g., short-cuts, Intellisense, navigation)

Fewer errors (required fields, error correction)

Increased customer retention

Increased market share

Fewer returned products

3

Managing Design Processes

Know you audience or “The 7 Habits of Spectacularly Unsuccessful Executives”

1. They see themselves and their companies as dominating their environment

– A lack of respect

2. They identify so completely with the company that there is no clear boundary between

their personal interests and their corporation’s interests

– A question of character

3. They think they have all the answers

–  Leader without followers

4. They ruthlessly eliminate anyone who isn’t completely behind them

– Executive departures

5. They are consummate spokespersons, obsessed with the company image

– Blatant attention-seeking

6. They underestimate obstacles

– Excessive hype

7. They stubbornly rely on what worked for them in the past

– Constantly referring to what worked in the past

4

Managing Design Processes

Waterfall

Analysis

Development

Test

Deploy

Agile

Integrated team

Sprints & Releases

Backlog

Points

Analysis

Develop

Test

Deploy

http://www.youtube.com/watch?v=kYajjGi5-qM&kw=agile&ad=7914006731&feature=pyv

Scrumming

http://www.youtube.com/watch?v=OJflDE6OaSc&feature=related

5

Managing Design Processes

UI Group Organization

Centralized vs. Decentralized

• The analysis work

• Usability testing

• Resource allocation

• Budgets & schedules

• Guidelines

– Education

– Enforcement

– Exemption

– Enhancement

• International Teams

6

Patterns in the Design Process

B C D

A F

G H

E

B C D

E A F

G H

A B C D

7

Managing Design Processes

Pattern for multi-tasking across windows

Pattern for multi-tasking across windows

8

Managing Design Processes

Pattern for multi-tasking across windows

9

Managing Design Processes

Start-Menu Pattern – Launch Applications

Launch Applications Pattern - XP

10

Context

Workflow

Pattern

Grouping

Component

Specific behaviors (e.g., click on Edit button to edit fields)

Chain of behaviors (e.g., add a phone number)

What is design efficiency of a pattern?

How does it relate to time and errors?

Patterns in the Design Process

A collection of components

The user goal (e.g., add a new patient)

11

Pt. Demographics: Personal Information

Add New PCP

Adding a Pt’s HP

Select Role

Searching for an HP

Results of Search

Select Find Add NewPopulate

Add New HP

Enter Data/OK

Foreign Addr.

Populate

HP Details

Patterns in the Design Process

12Patterns in the Design Process

13

Managing Design Processes

The Three Pillars of Design (Pillar 1) Guidelines, Documents and Processes

• Apple/Windows

• Words, Icons and Graphics

– Terminology, Character Set

– Icons, Buttons, Color

• Screen Layout

– Menu selection, Form Fillin, Dialog Formats

– Wording, Spacing

• Input/Output Devices (Mouse, Keyboard)

• Action Sequences and Patterns

– Direct Manipulation, drag/drop

– Short-cuts

– Error Handling

User Interface Software Tools

Expert Reviews & Usability Testing

14

Managing Design Processes

Guidelines (Pillar 1)

Social process involving developers

Records decisions

Promotes consistency and completeness

Levels

• Rigid standards

• Accepted practices

• Flexible guidelines Policies

• Education – how to provide it

• Enforcement – who reviews

• Exemption – who decides (e.g., new technology)

• Enhancement – how often

15

Managing Design Processes

User-interface software tools (Pillar 2)

Macromedia Flash

Microsoft Visual Basic

Revolution

Expert Reviews and Usability Testing (Pillar 3)

Controlled experiments

16

Managing Design Processes

Development Methodologies Ethnographic Observation

• Preparation

– Understand policies and work culture

– Learn about the system and its history

– Prepare questions

– Get permission to observe/interview

• Field Study

– Establish rapport with managers and users

– Observe/Interview users in the workplace

» Collect subjective/objective, quantitative/qualitative data

» Rating scales, rankings, critical incidents

• Analysis

– Compile data in numerical, textual and multimedia databases

– Reduce and interpret data

• Reporting

17

Managing Design Processes

Development Methodologies

Participatory Design

• Plastic Interface for Collaborative Technology Initiatives through Video

Exploration (PICTIVE)

• Physical cut-outs of UI objects

• Walk through a scenario and video tape

• User develops a stake in the design

• Cost of time Druin’s Model of Four Levels of User Participation

• User

• Tester

• Informant

• Design Partner

18

Managing Design Processes

Development Methodologies

Scenario Development – Task Frequency

Role Collects Demo Info

Collects Ins. Info

Accesses National DBs

Face-to-Face with Pt.

Bed Board User

EMS Interaction

IP Reg Yes Yes No 7 minutes No No

ER Reg Yes Yes No 4 minutes No No

Pt. Loc No No No No Yes Yes

Med Rec No No Yes No No No

IDX Sched Yes Yes No No No No

Enc Prep Yes Yes No No No No

Financial Counseling

No No Yes Yes No No

Radiology Reg

Yes Yes No 7 minutes No No

Transplants No No Yes No No No

Dispatch No No No No No Yes

19

Managing Design Processes

Development Methodologies

Scenario Development – App Frequency

20

Managing Design Processes

Development Methodologies

Scenario Development

• A day-in-the-life scenario (users performing a typical task)

• Collect data regarding current performance

• New systems – write scenarios and then act them out

• Tognazzini at Sun Microsystems - Starfire Project

– http://www.idemployee.id.tue.nl/g.w.m.rauterberg/movies/SUN-Starfire.mpg

• What functions are being portrayed in the video?

• What are the alternatives today?

21

Managing Design Processes

Development Methodologies

Diary Study

• Participants go about their normal lives

• Except that they report (in an electronic or paper diary) at some interval, signal, or event, what

they’ve done or experienced (via questionnaire or freeform),

• They do this multiple times over days or weeks.

22

Managing Design Processes

Development Methodologies

Social Impact Statements for Early Design Review

• “Technopoly eliminates alternatives to itself. It consists in the deification of technology,

which means that the culture seeks its authorization in technology, finds its satisfactions

in technology, and takes its orders from technology” (Postman 1993)

• Issues to consider:

– Convey the high level goals of the new system

– Identify the stakeholders

– Identify the benefits

– Anticipate changes in job functions and potential layoffs

– Address security and privacy issues

– Preserve democratic principles

– Review the impact statement with a panel with authority for enforcement (GAO,

NRC, FAA)

23

Managing Design Processes

Development Methodologies

Legal Issues

• Privacy related to data storage or monitoring by computers

• Avoid illegal tampering, inadvertent loss, malicious mischief– Medical, Legal, Financial

• Safety and Reliability– Aircraft, automobiles, medical equipment, utility control rooms– Copyright or patent protection for software

» Open Source Initiative – “when programmers can read, redistribute, and modify the source code for a piece of software, the software evolves.”

– Copyright protection for online information, images or music– Freedom of speech in electronic environments

» Should network operators be responsible for or prohibited from eliminating offensive or obscene jokes, stories, or images?

– Equal access to computers for disabled users

Consider the legal implications of your design decisions (intellectual property)

24

Managing Design Processes

Speaking of legal Apple, Samsung, Google patent war (Oct 2011)

Steve Jobs:  ”I’m going to destroy Android, because it’s a stolen product. I’m willing to go thermonuclear war on this.”

Google co-founder Eric Schmidt sat on the board of Apple for many years

The future of many phone makers, especially Samsung, and the future of Google’s rising influence in the mobile OS business would all be at stake

OR - Apple’s underhanded attempt to stymie competition in the mobile and tablet markets and protect its iPad and iPhone dominance

25

Graphical Screen Designby Saul Greenberg

CRAP – contrast, repetition, alignment, proximity

Grids are an essential tool for graphical design

Other visual design concepts

consistency relationships

organization legibility and readabilitynavigational cues appropriate imagery

familiar idioms

Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known.

Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press

26

Contrast make different things different

brings out dominant elements

mutes lesser elements

Repetition repeat design throughout the interface

consistency

creates unity

Alignment

visually connects elements

creates a visual flow

Proximity groups related elements

separates unrelated ones

Robin Williams Non-Designers Design Book, Peachpit Press

Contrast, Repetition, Alignment and Proximity

27

Contrast, Repetition, Alignment and Proximity

Original

28

Proximity

Contrast, Repetition, Alignment and Proximity

•Groups related elements•Separate unrelated ones

Move

Separate

Group

Group

Group

Separate

29

Alignment

Contrast, Repetition, Alignment and Proximity

•visually connect elements•create a visual flow

Move

Move

Move

30

Contrast, Repetition, Alignment and Proximity

Contrast•make different things different

•brings out dominant Elements

•mutes lesser elements

Font

Font

Font

Font Color

31

Repetition•repeat design throughout the interface

•consistency

Contrast, Repetition, Alignment and Proximity

Font Font

32

Horizontal and vertical lines to locate window components

aligns related components

Organization

contrast for dominant elements

element groupings by proximity

organizational structure

alignment

Consistency

location

format

element repetition

organizationwindow to

widget spacing

Widget to widget

spacing

No Ok

Message text in Arial 14, left adjusted

Standard icon set

Fixed components

Format of variable contents

Grids

33

Two-level Hierarchy•indentation•contrast

Grouping by white space

Alignment connects visual elements in a sequence

Logic of organizationalflow

Grids

34

internal consistency

elements follow same conventions and rules

set of application-specific grids enforce this

external consistency

follow platform and interface style conventions

use platform and widget-specific grids

deviate only when it provides a clear benefit to user

Warning

mmmm mmmmmm

Okay

!

Help

mmmm mmmmmm mmm

Okay

?

Tip of the day: Monday, Mar 12

mmmm mmmmmm

Dismiss

Visual Consistency (Repetition)

35

proximal clusters

alignment

white (negative) space

explicit structure

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Relating Screen Elements

36

No regard for order andorganization

Example of Bad Layout

37

Mullet & Sano

Example of Bad Layout

38

Mullet & Sano

Improved Layout

39

Overuse of 3-d effects makes the window unnecessarily cluttered

WebForms

Example of Bad Design

40

How do you chose when you cannot discriminate screen elements from each other?

GIF Construction Set Microsoft Access 2.0

Example of Bad Design

41

Navigational cues

Provide initial focus

Direct attention as appropriate to important secondary, or peripheral items as appropriate

Order should follow a user’s conceptual model of sequences

42

minimize number of controls

include only those that are necessary

eliminate, or relegate others to secondary windows

minimize clutter

so information is not hidden

NNNN

MMMM

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

MMMM

NNNN

Economy of Visual Elements

43

Mullet & Sano

Reduce Excessive Display Density

44

Characters, symbols, graphical elements should be easily noticable and distinguishable

Text set in Braggadocio

Text set in Helvetica

Text set in Courier

TEXT SET INCAPITOLS

Text set in Times Roman

Legibility and Readability

45

Proper use of typography

1-2 typefaces (3 max)

normal, italics, bold

1-3 sizes max

LargeMediumSmall

Readable

Design components to be inviting and attractive

Design components to be inviting and attractive

Unreadable

Design components to be inviting and attractive

Design components to be inviting and attractive

Legibility and Readability

46

typesetting

point size

word and line spacing

line length

Indentation

color

Readable

Design components to be inviting and attractive

Design components to be inviting and attractive

Unreadable: Design components to be easy to interpret andunderstand. Design components to be inviting and attractive

Legibility and Readability

47

These choices must be really important, or are they?

Time & Chaos

Legibility and Readability and Significance

48

Greyed-out example text hard to read.Why not make it black?

Regional preferences in Windows 95

Legibility and Readability and Significance

49

Text orientation difficult to read

Microsoft Word

Legibility and Readability

50

Signs, icons, symbols

right choice within spectrum from concrete to abstract

Icon design very hard

except for most familiar, always label them

Image position and type should be related

image “family”

Consistent and relevant image use

identifies situations, offerings...

Partial icon family

Imagery

51

What do these images mean? • no tooltips included• one of the tabs is a glossary explaining these images!

which one?

Novell GroupWise 5.1

Imagery

52

Familiar ways of using GUI components

appropriate for casual to expert users

builds upon computer literacy

must be applied carefully in walk up and use systems

Pulldown menus Cascading menu

Dialog box item

Toolbars and tooltips

Window manipulation

Standardtypographic controls

Files

What you see is what you get displays

Microsoft Powerpoint

Idioms