Balancing Function and Fashion

minedesertSoftware and s/w Development

Oct 31, 2013 (4 years and 8 months ago)


Balancing Function and Fashion

(Shneiderman and Plaisant, Ch. 11 and 12)

from, 12


“Balancing Function and Fashion”

Explication of interface “style” not easy

but, Shneiderman tries …

Recall, Lynch and Horton remark


Style in interfaces

vs. style


What and why

Style and “look and feel”

Design decisions influence style:

Error messages

Anthropomorphic design

Display design

Window design


From “User Manuals, Online Help, and Tutorials”

Reading from screen vs. reading from text


Balancing Function & Fashion

Interface design, both graphics and
not yet “high art”
(Shneiderman, p.434)

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


And it 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 in these computer site

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

First, GUI (WIMP) “Look and Feel”

Lots of things user can interact with:

Main WIMP components

windows, menus, icons


Dialogue boxes


Collectively known as

“Window gadgets”

In sum:

appearance + behavior =
look and feel

Style and “Look and Feel”

Gui “look and feel”

appearance + behavior =
look and feel

For web sites

as used by L&H
and others, is element of “look and

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


Error Messages

Error message are one interface element creating “style”

E.g., “Try closing other windows and restarting program.” vs. “Core Dump”

Recall how often mentioned in heuristics, e.g., Shneiderman, Nielsen

Prompts, advisory messages, system responses (including error
messages) contribute to system satisfaction


Error messages or diagnostic warnings is critical

Especially when dealing with novices

Often easy and effective way to improve system

Shneiderman suggests 5 elements of error messages:


Constructive guidance

Positive tone

centered style

Appropriate physical format

Error Messages

1. Specificity

1. Specificity

Not too general

Provide guidance





Unmatched left parenthesis


Type first letter: Send, Read, or Drop


Days range from 1 to 31


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:



Negative terms such as ILLEGAL, ERROR, INVALID, BAD should be eliminated or used




Time error

2147469 (800405): Method

Private Profile String

of object



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.

off date must come after pickup date.

Error Messages

3. User

3. User
centered phrasing

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


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


“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”


“Children accept human
like references and qualities for almost any object, from
Dumpty to Tootle the Train. Adults reserve anthropomorphic reference
for objects of special attraction, such as cars, ships, or computers.”

Anthropomorphic computer interfaces:


Star Trek variants, …


HAL in 2001: A Space Odyssey

Contemporary (forthcoming):

Anthropomorphic Design


“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”


“Children accept human
like references and qualities for almost any object, from
Dumpty to Tootle the Train. Adults reserve anthropomorphic reference
for objects of special attraction, such as cars, ships, or computers.”

Anthropomorphic computer interfaces:


Star Trek variants, …


HAL in 2001: A Space Odyssey

Contemporary (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:




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

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


distinctiveness, integrity, comprehensiveness,


Display Design

Data Display

Samples from 162 data
guidelines from Smith and
Mosier (1986)

If you need to …

More detail in Shneiderman


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 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

complexity Metrics

complexity metrics

Although knowledge of the users’ tasks and abilities is key to designing effective
screen displays, objective and

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


(Quick Look)


for alphanumeric

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 Design

Complexity Metrics


Sears (1993) developed task
dependent metric

layout appropriateness
assess whether spatial layout is in
harmony with users’ tasks

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

Optimal layout minimizes visual

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

Must minimally disrupt user's task

With large displays, eye
head movement and
visibility are problems

With small displays, windows too small to be

Multiple window display strategy

Move among relatively independent subtasks

Need to offer users sufficient
information and flexibility to accomplish
task, while reducing

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


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 Design

Coordinate Windows

Coordinating multiple windows


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 Gallery

Microsoft research project

A window manager

Design Premise

3D virtual environments
can more effectively
engage spatial cognition
and perception


Task Management

Simultaneous Document


3D Graphics

Ability to host any 2
Windows Application
without any change

Window Design

MS Task Gallery

“Palette” of

3D navigation




Ordered Loose Add to Maximize Close

Forward Stack Stack Selection


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

Larger suggests an intermediate view is needed

Semantic zooming

Side by side placement, versus fisheye

The design of image browsers should be
governed by the users’ tasks, which can be
classified as follows:

Image generation

ended exploration





Win. Design

Personal Role Management

Personal role management

Role centered design
emphasizes users’

rather than the applications and

Vision statement

What you’re doing and using

Set of people

Task hierarchy


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

information access

with partial knowledge of its nominal, spatial, temporal, and
visual attributes and relationships to other pieces of information.

fast switching


among roles

Free user's
cognitive resources

to work on
task domain actions

rather than interface
domain actions.

screen space

efficiently and productively for tasks.


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


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,


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

User Manuals, Online Help, and Tutorials


User Manuals, Online Help, and Tutorials

“In learning about computer systems many people experience
anxiety, frustration, and disappointment.”


Even though increasing attention is being paid to improving interface
design, complex systems can still benefit

paper and online help

According to Shneiderman

We’ll take a really quick look at some issues …

Forms of paper user manuals

each has its utility:

Install manual

Brief getting
started notes

Introductory tutorial

Thorough tutorial

Detailed reference manual

Quick reference card

Conversation manual


User Manuals, Online Help, and Tutorials

Forms of online materials:

Online manual

Online help

sensitive help

Online tutorial

Animated demonstration



Online communities, newsgroups, listservers, e
mail, chat, and instant messaging

Again, both paper and online useful

Consider use of documentation and the user’s goal:

User’s Goal:



I want to


Sales brochure, fact sheet

Animated demonstration

I want to



Manual, tutorial, guide, animated demonstration

I want to


User manual

Manual, help, context
sensitive help

I want to

a problem


Help, FAQ, online community

Paper versus Online Manuals

Reasons to have online manuals:

Physical advantages

Navigation features

Interactive services

Economic advantages

, 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

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

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 user

looked 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 article

in the “About us” section of a corporate web site, the center image is a product

page on an e
commerce web site, and the image on the right is from a search

engine results page (Jakob Nielson).

Shaping the Content of Manuals

Traditionally, training and reference material often written by junior
member of development team

manuals were often poorly written

were not suited to the background of the users

were delayed or incomplete

were not tested adequately

The benefits of

manuals include shorter learning
times, better user performance, increased user satisfaction, and few
calls for support

The “active user paradox”:

Users’ eagerness to conduct meaningful activities often stops them from
spending time “just” learning, and therefore their skills remain mediocre

Applicable to all task in fact …


Electronic Analog to Paper


Automated table of contents analog to paper manual

Shaping the Content of Manuals

Minimal manuals

encourage active involvement with hands

guided exploration:

choose an action
oriented approach

anchor the tool in the task domain

support error recognition and recovery

support reading to do, study, and locate

Show numerous well
chosen screen prints that demonstrate typical
uses (
predictive model

Components of well designed manuals:

Table of contents and index required

Glossaries for clarifying technical terms

Appendices for error messages


(or not)

Example: Online Tutorial


Guiding users while they learn the system

Guidelines for User Manuals


Use of OAI Model to Design Manuals

(See Figures 13.4,5,6)

Introductory tutorial

task training first

learn the hierarchy of objects, from high level down to the atomic

recognize the range of high
level intentions down to specific action steps

learn about the interface representations

start with familiar objects and actions

link these concepts to high
level interface objects and actions

show syntax needed to accomplish each task

Conversion manual

users knowledgeable about task domain, but unfamiliar with specific software

need presentation showing relationship between metaphors and already known plans and
the new ones required by the new software

Quick reference

user knowledgeable about task and interface objects and actions

needs details to convert their plans into detailed actions

Sample sessions for giving portrait of system features and interaction styles

Flow diagrams provide visual overviews that orients users to transitions from one
activity to another

(Basic) Organization and Writing Style

Precise statement of educational objectives

Present concepts in a logical sequence with increasing order of difficulty

Ensure that each concept is used in subsequent sections

Avoid forward references

Construct sections with approximately equal amounts of new material

Need sufficient examples and complete sample sessions

Choice of words and phrases important

Style guides for organizations attempt to ensure consistency and high quality

Writing style should match users' reading ability

Online Help

Kearsley's guidelines for online
help systems:

Make system easy to access
and easy to return from

Make help as specific as

Collect data to determine what
help is needed

Give users as much control as
possible over the help system

Make help messages accurate
and complete

Do not use help to
compensate for poor interface

Online Manuals, 1

Online Manuals:

Reproduction of printed manuals online

paper page layouts may not convert well

dealing with figures problematic

attractive if users have large enough display (full page)

close match between printed and online versions useful

Enhanced by special online features

string search

multiple indices

multiple tables of contents

tables of figures

electronic bookmarks

electronic annotations

hypertext traversal

automatic history keeping

Online Manuals, 2

Online Manuals (cont.)

Most effective if manuals redesigned to fit electronic medium to take
advantage of

multiple windows

text highlighting




string search with relevance feedback

Properly designed table of contents that can remain visible to side of
text page vital

Novices need tutorials

Intermittent knowledgeable users can handle concise descriptions of
interface syntax and semantics

Keyword lists improved by clustering into meaningful categories

Online Help

Online Help

Traditionally, little information about how to assemble actions to perform tasks

Users expect to be able to search the full text of online documents

Expanding and contracting table of contents can be combined with search

The online help and support center for Microsoft Windows XP contains
articles/topics and search options

An answer wizard can respond to natural language requests

sensitive help

controlled, interactive object help

Small pop
up box

Dedicated portion of the display

Intelligent help:

Users’ interaction history, a model of user population, and a representation of their
tasks to make assumptions about what users want

Development of intelligent help systems face serious usability challenges


Hybrid approaches

Initiative is shared between the user and system

Unobtrusive advice from system, but requires space


Hints, ongoing
direction, etc.

Online Tutorials

Online tutorials

Does not have to keep
shifting attention between
screen and manual

Practices skills to use

Can work alone at an
individual pace and without
the embarrassment of
mistakes made in front of

up tips

Online Demonstrations and Guides

Demonstration systems

Distributed on disk, CD
ROM, or over Internet

Designed to attract potential users

Typically show off system features using animation, color graphics, sound, etc.

interface requirements are to

capture and maintain user interest

convey information

build positive product image

Typical controls

automatic or manual pacing

length of demonstration (short versus in

stop, replay, skip

A screen capture animation is easy to produce with standard tools such as Camtasia

Games often have a 30 second demonstration


Audio and video recording of human guides or cartoon figures to lead users through

GUIDES 3.0 project

Audio tours of art galleries

Audio or video lectures may be played on a computer or a separate system

Video Professor

Online Communities for User Assistance

Help networks using email

sent to designated help desk or staff person

sent to general list within organization

users must publicly expose their lack of knowledge

risk of getting incorrect advice

Communal approach means low cost for software

Microsoft and others actively encourages it

Frequently asked questions (FAQ) lists for newcomers