Balancing Function and Fashion

minedesertSoftware and s/w Development

Oct 31, 2013 (3 years and 7 months ago)

104 views

Balancing Function and Fashion


(Shneiderman and Plaisant, Ch. 11 and 12)

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

Overview


“Balancing Function and Fashion”


Explication of interface “style” not easy


but, Shneiderman tries …


Recall, Lynch and Horton remark


style
emerges



Style in interfaces


vs. style
of

interface


What and why


Style and “look and feel”



Design decisions influence style:


Error messages


Anthropomorphic design


Display design


Window design


Color



From “User Manuals, Online Help, and Tutorials”


Reading from screen vs. reading from text


Introduction
-

Balancing Function & Fashion



Interface design, both graphics and
interaction,
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
style

….


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


Buttons


Dialogue boxes


Palettes







Collectively known as
widgets


“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


style,
as used by L&H
and others, 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”


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



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

usability



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:


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


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


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:


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


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 Design

MS Task Gallery


Microsoft research project


A window manager



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/

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

User Manuals, Online Help, and Tutorials

Introduction
-

User Manuals, Online Help, and Tutorials


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


Shneiderman



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

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

Introduction
-

User Manuals, Online Help, and Tutorials


Forms of online materials:


Online manual


Online help


Context
-
sensitive help


Online tutorial


Animated demonstration


Guides


FAQs


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:


Paper:

Online:

I want to
buy

it

Sales brochure, fact sheet

Animated demonstration

I want to
learn

it

Tutorial


Manual, tutorial, guide, animated demonstration

I want to
use

it

User manual


Manual, help, context
-
sensitive help

I want to
solve

a problem

FAQ


Help, FAQ, online community

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

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 …

Example


Electronic Analog to Paper


Powerpoint


Automated table of contents analog to paper manual

Shaping the Content of Manuals


Minimal manuals

encourage active involvement with hands
-
on
experiences



Carroll's
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

End


(or not)

Example: Online Tutorial


Spotfire


Guiding users while they learn the system

Guidelines for User Manuals


From
Shneiderman

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
possible


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
design

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


color


sound


animation


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




Context
-
sensitive help


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


Clippey


Hybrid approaches


Initiative is shared between the user and system


Unobtrusive advice from system, but requires space

Example


Hints, ongoing
direction, etc.

Online Tutorials


Online tutorials


Does not have to keep
shifting attention between
screen and manual


Practices skills to use
system


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


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


User
-
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
-
depth)


stop, replay, skip



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


Games often have a 30 second demonstration



Guides


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


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
maintenance



Microsoft and others actively encourages it



Frequently asked questions (FAQ) lists for newcomers

End


.