from http://wps.aw.com/aw_shneider_dtui_11, 12 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 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 Narrowly stated: 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 Narrowly stated: 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

Display Design - 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) 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 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 Context-sensitive 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 .