Balancing Function and Fashion (Shneiderman and Plaisant, Ch. 11)

from http://wps.aw.com/aw_shneider_dtui_11

Overview

• “Balancing Function and Fashion”– Explication of interface “style” not easy – but, Shneiderman tries …

– Style in interfaces – vs. style of interface• What and why – recall, L&H for web design• Style and “look and feel”

– Design decisions influence style:• Error messages• Anthropomorphic design• Display design• Window design• Color

• “User Manuals, Online Help, and Tutorials” (maybe)– Reading from screen vs. reading from text

Introduction - Balancing Function & Fashion

• Interface design, both graphics and interaction, not yet “high art” (Shneiderman)

– Architecture and fashion are old, interfaces are not

• But, not too sure how far analogy goes …

– Computer interface design is “young”• Only recently (10-20 years) driven by extreme

entrepeneural and style forces

– Maybe better, consider that interface design is about software engineering, usability, etc.

• Recall, early discussions• E.g., engineering (with explicit resource constraints)

• Yet, there is style ….– And its elements can be examined

• Where “style” results from the set of decisions made about graphics design, type of interaction form, wording selected, etc., that are made

– Recall, guidelines constrain, etc.

Style in Web Page and Sites

• Very similar styles– But differences …

• Here, for web pages and sites, much is “page design” and “information architecture” design

• Will consider these in detail later

First, GUI (WIMP) “Look and Feel”

• Lots of things user can interact with:– Main WIMP components

• windows, menus, icons– Buttons– Dialogue boxes– Palettes– …

• Collectively known as widgets– “Window gadgets”

• In sum:– appearance + behavior = look and feel

Style and “Look and Feel”

• So, “look and feel”– appearance + behavior = look and feel

• Lots of things you can interact with:– main WIMP components (windows, menus,

icons)– Buttons– Dialogue boxes– Palettes– … widgets

• Also, graphic design and widget layout– Especially relevant for web sites

• Style is element of “look and feel”

User Experience, Style, and Success

• Again, “balancing function and fashion” has to do with style and “look and feel”

– These are design elements, but important in interface design

• User experiences play a critical role in influencing software acceptance– Design needs to be “comprehensible, predictable, and controllable”

• Users like that …– Conversational messages have their limits– Information layout is important– Multiwindow coordination– Large, fast, high-resolution color displays have potential …

• Shneiderman examines, as elements of style:– Error messages– Nonanthropomorphic design– Display design– Window design– Color

Error Messages

• Error message are one interface element creating “style”– E.g., “Try closing other windows and restarting program.” vs. “Core Dump”

• Prompts, advisory messages, system responses, including error messages, contribute to system satisfaction - usability

• Error messages, or diagnostic warnings, are critical – Especially when dealing with novices– Often easy and effective way to improve system

• Shneiderman suggests 5 elements of error messages:– Specificity– Constructive guidance– Positive tone– User-centered style – Appropriate physical format

Error Messages – 1. Specificity

• 1. Specificity

– Not too general - Provide guidance

– Examples:

 Poor: Better:

 SYNTAX ERROR Unmatched left parenthesis

ILLEGAL ENTRY  Type first letter: Send, Read, or Drop

 INVALID DATA  Days range from 1 to 31

 BAD FILE NAME  File names must begin with a letter

Error Messages - 2. Constructive Guidance

• 2. Constructive guidance and positive tone

– Should indicate what users should do to correct problem

– Hostile messages using violent terminology can disturb non-technical users:• FATAL ERROR, RUN ABORTED• CATASTROPHIC ERROR: LOGGED WITH OPERATOR• Negative terms such as ILLEGAL, ERROR, INVALID, BAD should be eliminated or used

infrequently

– Examples:

 Poor Better

 Run-Time error ‘-2147469 (800405): Method ‘Private Profile String’ of object ‘System’ failed.

Virtual memory space consumed. Close some programs and retry.

Resource Conflict Bus: 00 Device: 03 Function: 01  Remove your compact flash card and restart

 Network connection refused.  Your password was not recognized. Please retype.

 Bad date.  Drop-off date must come after pickup date.

Error Messages – 3. User-centered

• 3. User-centered phrasing

– Suggests user controls the interface • Initiating action, rather than just responding to system

– User should have control over amount of information system provides• e.g. screen tips; help button for context-sensitive help or extensive online user manual

– E.g., telephone company:

• “We’re sorry, but we are unable to complete your call as dialed. Please hang up, check your number, or consult the operator for assistance”, versus

• “Illegal telephone number. Call aborted. Error number 583-2R6.9. Consult your user manual for further information.”

Error Messages – 4. Appropriate Format

• 4. Appropriate physical format

– Examples:

– Use uppercase-only messages for brief, serious warnings

– Avoid code numbers; if required, include at end of message

– Consider best location of messages. • E.g. Could be:

– Near where problem arose – Placed in consistent position on bottom of screen – Near to, but not obscuring relevant information

– Audio signals useful, but can be embarrassing - place under user control

Error Messages – 5. Effective Messages

• 5. Development of effective messages

– Should be evaluated by several people and tested with suitable participants– Messages should appear in user manuals and be given high visibility

• Or, contextual help

– Users may remember the one time when they had difficulties with a computer system rather than the 20 times when everything went well

– Recommendations for developing effective messages:1. Increase attention to message design 2. Establish quality control 3. Develop guidelines

– Have a positive tone – Be specific and address the problem in the user's terms – Place the users in control of the situation Have a neat, consistent, and comprehensible format

4. Carry out usability test 5. Collect user performance data

Anthropomorphic Design

• Anthropomorphism:– “An interpretation of what is not human or personal in terms of human or

personal characteristics”– More simply: “Ascribing human characteristics to non-human things”

• Snheiderman:– “Children accept human-like references and qualities for almost any object, from

Humpty-Dumpty to Tootle the Train. Adults reserve anthropomorphic reference for objects of special attraction, such as cars, ships, or computers.”

• Anthropomorphic computer interfaces:– Benign:

• Star Trek variants, …

– Malevolent:• HAL in 2001: A Space Odyssey

– Historical (forthcoming):

Anthropomorphic Design

• Anthropomorphism– “An interpretation of what is not human or personal in terms of human or personal

characteristics”– More simply: “Ascribing human characteristics to non-human things”

• Snheiderman:– “Children accept human-like references and qualities for almost any object, from

Humpty-Dumpty to Tootle the Train. Adults reserve anthropomorphic reference for objects of special attraction, such as cars, ships, or computers.”

• Anthropomorphic computer interfaces:– Benign:

• Star Trek variants, …

– Malevolent:• HAL in 2001: A Space Odyssey

– Historical (forthcoming):

• So, there are arguments against:

Anthropomorphic Design

• Concerns (Shneiderman):– Attributions of intelligence, autonomy, free will, etc. can deceive, confuse, and

mislead users – Important to clarify differences between people and computers – Users and designers must accept responsibility for misuse of computers– Although attractive to some people, an anthropomorphic interface can produce

anxiety in others:• Computers can make people feel dumb

• Computers should be transparent and support concentrating on the task in hand

– Locus of control

• Anthropomorphic interfaces may distract users– Clippey was intended to provide help suggestions

• Amused some, but annoyed many

• Disruptive interference

• Lacked appropriate emotional expressions

– Why Ananova at all?• News reader

Anthropomorphic Design (cont.)

• Advocates of anthropomorphic interfaces suggest that they may be most useful as:

– Teachers?– Salespeople?– Therapists?– Entertainment figures?

• An alternative design …– Present (real) human through prerecorded audio or video

• Guidelines (Shneiderman):– Be cautious in presenting computers as people. – Design comprehensible, predictable, and controllable interfaces. – Use appropriate humans for introductions or guides. – Use cartoon characters in games or children’s software, but usually not elsewhere– Provide user-centered overviews for orientation and closure. – Do not use 'I' pronouns when the computer responds to human actions. – Use "you" to guide users, or just state facts.

Display Design

• Display design– Key component in perception of

system usability• Includes aesthetics and functionality

• E.g., clutter vs. clean Yahoo vs. Google

• (and maybe do something about IE toolbar, too)

– Screen graphics, graphic design, element positioning, etc.

• Narrowly stated: – “Effective display designs must

provide all necessary data in proper sequence to carry out task”

Display Design

• Display design– Key component in perception of

system usability• Includes aesthetics and functionality

• E.g., clutter vs. clean Yahoo vs. Google

• (and maybe do something about IE toolbar, too)

– Screen graphics, graphic design, element positioning, etc.

• Narrowly stated: – “Effective display designs must

provide all necessary data in proper sequence to carry out task”

Display Design Principles• Mullet and Sano's categories of design

principles – schema for understanding:

– Elegance and Simplicity: • unity, refinement and fitness

– Scale, Contrast, and Proportion: • clarity, harmony, activity, and restraint

– Organization and Visual Structure: • grouping, hierarchy, relationship, and balance

– Module and Program: • focus, flexibility, and consistent application

– Image and Representation: • immediacy, generality, cohesiveness, and

characterization

– Style: • distinctiveness, integrity, comprehensiveness,

appropriateness

FYI - Display Design – Data Display

• Samples from 162 data-display guidelines from Smith and Mosier (1986)– If you need to …

• More detail in Shneiderman

FYI - Display Design - Data Display (cont.)

• Field layout– Blank spaces and separate lines can distinguish fields. – Names in chronological order, alignment of dates, familiar date separators. – Labels are helpful for all but frequent users. – Distinguish labels from data with case, boldfacing, etc. – If boxes are available they can be used to make a more appealing display, but they

consume screen space. – Specify the date format for international audiences– Other coding categories – background shading, color, and graphic icons

• Empirical results– structured form superior to narrative form – improving data labels, clustering related information, using appropriate indentation and

underlining, aligning numeric values, and eliminating extraneous characters improves performance

– performance times improve with fewer, denser displays for expert users – screen contents should contain only task-relevant information – consistent location, structure, and terminology across displays important – sequences of displays should be similar throughout the system for similar tasks – sequences of displays should be similar throughout the system for similar tasks

Display Design - Display-complexity Metrics

• Display-complexity metrics– Although knowledge of the users’ tasks and abilities is key to designing effective

screen displays, objective and automatable metrics of screen complexity are attractive aids

• Tullis (1997) developed four task-independent metrics for alphanumeric displays:

(next slide)– 1. Overall Density– 2. Local Density – 3. Grouping – 4. Layout Complexity

Display Design - Complexity Metrics – Tullis(Quick Look)

• Task-independent metrics for alphanumeric displays:

– 1. Overall Density• Number of filled character spaces as a percentage of

total spaces available

– 2. Local Density • Average number of filled character spaces in a five-

degree visual angle around each character, expressed as percentage of available spaces in the circles and weighted by distance from the character

– 3. Grouping • (1) Number of groups of “connected” characters,

where a connection is any pair of characters separated by less than twice the mean of the distances between each character and its nearest neighbor

• (2) Average visual angle subtended by groups and weighted by the number of characters in the group

– 4. Layout Complexity • Complexity, as defined in information theory, of the

distribution of horizontal and vertical distances of each label and data item from a standard point on the display

FYI - Display Design - Complexity Metrics - Sears

• Sears (1993) developed task-dependent metric

• Called layout appropriateness to assess whether spatial layout is in accord with users’ tasks

– Focuses on how user moves through elements of the display when performing task

– Optimal layout minimizes visual scanning

– However, may conflict with expectations about placement of fields, etc.

– In figure, solid most frequent

Window Design – General Considerations

• Users need to consult multiple sources rapidly

– Must minimally disrupt user's task – With large displays, eye-head movement

and visibility are problems – With small displays, windows too small to

be effective

• Multiple window display strategy often appropriate

– Move among relatively independent subtasks

• Need to offer users sufficient information and flexibility to accomplish task, while reducing window housekeeping actions, distracting clutter, eye-head movement

– opening, closing, moving, changing size – time spent manipulating windows instead of

on task

• Can apply direct-manipulation strategy to windows

Window Design – Coordinate Windows

• Coordinating multiple windows

• Shneiderman - Next generation of window managers?

– Coordinate windows• Windows appear, change contents, and close as a direct result of user

actions in the task domain

– Such sequences of actions can be established by designers, or by users with end-user programming tools

– A careful study of user tasks can lead to task-specific coordinations based on sequences of actions

– Important coordinations:• Synchronized scrolling• Hierarchical browsing

– E.g., opening toc in sidebar has contents in main• Opening/closing of dependent windows• Saving/opening of window state

Window DesignCoordinate Windows

• Coordinating multiple windows

• Shneiderman - Next generation of window managers?

– Coordinate windows• Windows appear, change contents, and close as a direct result of user actions

in the task domain

Window DesignCoordinate Windows

• Coordinating multiple windows

• Shneiderman - Next generation of window managers?

– Coordinate windows• Windows appear, change contents, and close as a direct result of user actions

in the task domain

– Such sequences of actions can be established by designers, or by users with end-user programming tools

– A careful study of user tasks can lead to task-specific coordinations based on sequences of actions

– Important coordinations:• Synchronized scrolling• Hierarchical browsing

– E.g., opening toc in sidebar has contents in main• Opening/closing of dependent windows• Saving/opening of window state

Window Design – MS Task GalleryA historical note

• Microsoft research project– A window manager

• Future imagined 10+ years ago

• Design Premise– 3D virtual environments

can more effectively engage spatial cognition and perception

• Goals– Task Management– Simultaneous Document

Comparison

• Features– 3D Graphics– Ability to host any 2-D

Windows Application without any change.

Window Design – MS Task Gallery

• “Palette” of windows

• 3D navigation

• Window controls

Move Bring Ordered Loose Add to Maximize Close

Forward Stack Stack Selection

FYI - Window Design – Image Browsing(more in Information Visualization)

• Image browsing– Like hierarchical browsing– Work with large images

• Detail + Context– Overview in one window (context), detail in

another (focus)– Field of view box in the overview– Panning in the detail view, changes the field

of view box– Matched aspect ratios between field of view

box and the detail view– Zoom factors: 5-30

• Larger suggests an intermediate view is needed

• Semantic zooming• Side by side placement, versus fisheye

view• The design of image browsers should be

governed by the users’ tasks, which can be classified as follows:

– Image generation– Open-ended exploration– Diagnostics– Navigation– Monitoring

FYI – Win. Design - Personal Role Management • Personal role management

– Role centered design emphasizes users’ tasks, rather than the applications and documents

• Vision statement – What you’re doing and using

• Set of people • Task hierarchy • Schedule • Set of documents

– The requirements for personal role management include: • Support a unified framework for information organization according to users' roles • Provide a visual, spatial layout that matches tasks • Support multi-window actions for fast arrangement of information • Support information access with partial knowledge of its nominal, spatial, temporal, and

visual attributes and relationships to other pieces of information. • Allow fast switching and resumption among roles • Free user's cognitive resources to work on task domain actions rather than interface

domain actions. • Use screen space efficiently and productively for tasks.

FYI – Win. Design - Personal Role Management

Figure 5: An illustration of later implementation of a University Professor role manager prototyped with Elastic Windows. This professor is advisor to a number of graduate students in a number of research projects (3 recent ones and 5 earlier projects are represented here). He teaches two courses this semester at the university (CMSC 434 and 828S), is industry liaison to three companies, and has personal duties.

Color• Color a key component in style

• Color can: – “Soothe or strike the eye”– Add accents to an uninteresting display – Facilitate subtle discrim. in complex displays – Emphasize logical organization of information – Draw attention to warnings – Evoke string emotional reactions of joy,

excitement, fear, or anger

• Design principles and guidelines have long existed for graphics design and broader use

– E.g., red for danger, yellow for caution– In general adopted for user interface design

• Color can be misused, or, as a design element, done poorly

– Use with understanding and restraint– (similarly with animation,

http://www.globalaigs.org/

Color• Color a key component in style

• Color can: – “Soothe or strike the eye”– Add accents to an uninteresting display – Facilitate subtle discrim. in complex displays – Emphasize logical organization of information – Draw attention to warnings – Evoke string emotional reactions of joy,

excitement, fear, or anger

• Design principles and guidelines have long existed for graphics design and broader use

– E.g., red for danger, yellow for caution– In general adopted for user interface design

• Color can be misused, or, as a design element, done poorly

– Use with understanding and restraint– (similarly with animation,

http://www.globalaigs.org/

FYI - Color Guidelines

• Basic guidelines (Shneiderman):

– Use color conservatively

– Limit the number of colors

– Recognize the power of color as a coding technique

– Ensure that color coding supports the task

– Have color coding appear with minimal user effort

– Place color coding under user control

– Design for monochrome first

– Consider the needs of color-deficient user

– Use color to help in formatting

– Be consistent in color coding

– Be alert to common expectations about color codes

– Be alert to problems with color pairings

– Use color changes to indicate status changes

– Use color in graphic displays for greater information density

Paper versus Online Manuals

• Reasons to have online manuals:– Physical advantages– Navigation features– Interactive services– Economic advantages

• But, advantages can be compromised by potentially negative side effects

– Displays may not be as readable as paper manuals– Each display may contain substantially less information than a sheet of paper

• Screen display, in general, has advantages and disadvantages

– User interface of online help systems may be novel and confusing to novices• Possibly, yet another interface …

– Extra mental effort required for navigating through many screens may interfere with concentration and learning, and annotation can be difficult

– Splitting display between work and help or tutorial windows reduces the space for work displays

– Small devices such as cell phones do not have enough display space to provide online help

Reading from Paper vs. Displays

• Empirically,15% to 30% slower task times for comprehension or proofreading of text on computer displays, compared to on paper

• Potential Disadvantages in Reading from Displays

– Poor fonts, especially on low resolution displays – Low contrast between characters and the background – Fuzzy character boundaries – Emitted light from displays may be more difficult to read by than reflected light from paper – Glare may be greater on displays – Screen flicker can be a problem – Curved display surface may be problem – Small displays require more frequent page turning – Reading distance can be greater than for paper – Displays are fixed in place – Display placement may be too high for comfortable reading – Layout and formatting problems – Reduced hand and body motions with displays as compared to paper may be fatiguing – Rigid posture for displays may also be fatiguing – Unfamiliarity of displays and the anxiety that the image may disappear can increase stress

Reading from Paper vs. Displays

The heatmaps from the eyetracking study. Red indicates the area where the userlooked most, yellow indicates fewer views, and blue indicates the fewest views.

Gray is used for areas that were not viewed. The image on the left is from an articlein the “About us” section of a corporate web site, the center image is a productpage on an e-commerce web site, and the image on the right is from a search

engine results page (Jakob Nielson).

End

• .