Embed Size (px)
Citation preview
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 Messages1. 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 Messages5. 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 DesignGeneral 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 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 DesignMS 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 DesignMS 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 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).
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
• .
