Chapter 11 Balancing Function and Fashion

Introduction

• As the audience for computers expands, competition over design will heighten.
  • Ex. First cars were purely functional; now they are functional as well as fully customizable.
• Recognition of the creative challenge of balancing function and fashion may lead to designers working even harder.
• Chapter 11 deals with 6 design matters that are functional issues with varying solutions:
  • Error Messages
  • Nonanthropomorphic Design
  • Display Design
  • Web Page Design
  • Window Design
  • Color

Error Messages

• A key part of interface design strategy of guidance for the user.
• Should be consistent across one or multiple applications.
  • Different messages should not read as if they were written by different authors.
  • Solution: Error messages and help dialogues should be integrated into the design process and not thrown in at the end

• One problem can be that the error message does not clearly correspond to the proper corrective action.
  • Common when material has to be translated.
  • Solution: Split the error messages and help text into separate files for ease of translation and maintenance.
  • Also permits on-site local language selection.

• Prompts, messages, and system responses to user actions influence user perceptions, so phrasing is critical.
• Most errors stem from a lack of knowledge, incorrect understanding or inadvertent slips.
• Users are likely to be confused, and generic messages offer little assistance.

• Improving error messages is one of the easiest ways to improve an existing system or interface.
• Error frequency must be monitored so that designers can improve the interface.
• Error Message Guidelines
  • Specificity
  • Constructive guidance and positive tone
  • User-centered phrasing
  • Appropriate physical format

• Messages that are too general make it difficult to determine what is wrong.
• Don’t offer an error-code number corresponding to a long explanation in the user’s documentation
  • Documentation may not be available or too time consuming.
• Simple or condemning messages can be frustrating
  • They provide neither enough information about the problem or a solution.
  • Example: Poor: SYNTAX ERROR
    • Better: Unmatched left parenthesis

• Instead of condemning users for an error, messages should tell them how to correct it.
  • Example: Poor: Network connection refused
    • Better: Your password was not recognized. Please retype.
• Hostile messages can deter users.
  • Avoid words like fatal, illegal, error, and invalid
• Automatic error correction could be good or bad.
  • Would reduce errors but would create a dependency

• User-centered suggests that the user controls the interface.
• Error messages should make the users feel like they are still in control of the interface and not the other way around.
  • Example: “We’re sorry, but we were unable to complete your call as dialed. Please hand up, check your number, and dial again, or consult the operator for assistance”

• Uppercase-only messages SHOULD BE RESERVED FOR EMERGENCIES.
• Error code numbers should be avoided, or used at the end of a message for a reference.
• Message placement:
  • Over the problem?
  • Consistently near the bottom?
  • Near the problem?

• Error tone:
  • Can bring attention to the user if the error might have gone unnoticed.
  • Can embarrass or annoy the user.
• Improved messages will be of the greatest benefit to novice users, but everyone can benefit.

Non-anthropomorphic Design

Reasons for non-anthropomorphic phrasing.
* Attributes of intelligence, autonomy, free will for computers is appealing to some but others it can be frustrating.
* Use non- anthropomorphic phrasing to clarify the differences between people and computers.
* Designers must accept responsibility for misuse of computers, rather than blaming the machines
* Computers are not independent decision makers
* Computers are not evil

• Anthropomorphic interfaces can be distracting or produce anxiety.
  • “computers make me feel dumb”
  • Don’t promote the computer as a friend or partner

• Avoid giving novice users the impression that the computer system is doing some intelligent reasoning, this adds stress and disempowers the user.

Examples
* Airline reservation system says “ok, I can help with that” after you request to initiate a domestic reservation
* Automated Banking system saying “please hold, while I check you account balance”

• Speech recognition technology for these systems is not quite mature which adds to the frustration.

text based computer assisted instructions
* Earl studies with a text based computer assisted instruction task participants felt less responsible for their performance when interacting with an anthropomorphic interface
* Animated characters that have been embedded in interfaces show to increase anxiety and reduce performance.
* The thought of someone observing their work

* A common design controversy is over the use of first person pronouns in an interface. Such interfaces are friendly but are counter productive because the can deceive, mislead
* and confuse.

* Third person singular pronouns improve user interaction.
* “You can begin the lesson b pressing RETURN” Is better than saying “I will begin the lesson when you press RETURN”

Guide lines for Nonanthropomorphic interfaces
* Be cautious in presenting computers as people, either with synthesized or cartoon characters
* Design comprehensible, predictable, and user-controlled interfaces
* Use appropriate humans for audio or video introductions or guides
* Provide user-ventured overviews for orientation and closure
* Do no use “I” when the computer responds to human actions
* Use “You” to guide users or just state facts.

Display Design

• For interactive systems, the displays are a key component of successful designs.
• Dense or cluttered displays and Inconsistent formats can provoke anger and inhibit performance

The visual aesthetics of computer interfaces are a strong determent of users’ satisfaction.

• Designers should develop a knowledge of the users’ tasks. Effective display's must provide all the necessary data in the proper sequence to carry out a task.
  • Group meaningful items,
  • Consistent sequences of groups

Principles

1. Elegance and simplicity: Unit, refinement and fitness
2. Scale, contrast, and proportion: Clarity, harmony, activity and restraint
3. Organization and visual structure: grouping, hierarch, relationship and balance.
4. Module and program: Focus, flexibility and consistent application.
5. Image and representation: Immediacy, generality, cohesiveness, and characterization.
6. Style: Distinctiveness, integrity, comprehensiveness, and appropriateness.

Guide lines

1. Ensure that an data that a user needs, at an step in a transaction sequence are available for display
2. Display data to users in directly usable forms; do not require that users convert displayed data.
3. Maintain a consistent format for an particular type of data display from one display to another
4. Use short simple sentences
5. Use affirmative statements, rather than negative statements.

Empirical results

• Guidelines for are important in Human computer Interaction research because of the importance of displays in control-room and life critical applications.
• Evolution in technology has caused the need for new empirical validated guidelines and has presented further design challenges for developers
• User control of font size, window size and brightness meant that designers had to ensure the information architecture could e understood.
• Eliminating unnecessary information, grouping related information and emphasizing information relevant to required tasks could cut performance time in half.
• Guidelines for are important in Human computer Interaction research because of the importance of displays in control-room and life critical applications.
• Evolution in technology has caused the need for new empirical validated guidelines and has presented further design challenges for developers
• User control of font size, window size and brightness meant that designers had to ensure the information architecture could e understood.
• Eliminating unnecessary information, grouping related information and emphasizing information relevant to required tasks could cut performance time in half.

Web Page Design

Performance

• User performance
  • Visual layout has a strong impact on (human) performance and is a critical factor in web page design.
  • Some specific patterns of performance with web pages reflect differences between web page and traditional GUI design.

• User performance test based on layout and language
  • Layout factors: Quantity of links, alignment, grouping indications, and density
  • Languages: Hebrew (right-to-left) and English (left-to-right)
  • Measurement: Search times and eye movement
• Conclusion:
  • Performance patterns were similar between languages
    • Poor performance in pages with many links and variable densities
    • But improved with the presence of uniform density
    • Alignment did not improve performance

• A more accurate prediction of user performance is likely to come with metrics that integrate task frequencies and sequences.
• Layout appropriateness
  • A task-dependent metric developed to asses whether the display’s spatial layout is in harmony with the user’s tasks.
  • A widget-level metric that deals with buttons, boxes, and lists
  • Designers specify the sequence of selections and the frequency for each selection
  • The layout of the widgets is evaluated by how well it matches the task
  • Used to produce a layout that minimizes visual scanning
  • Figure 11.3 on page 454

Preference

• User Preference
  • Crucial to the broader consumer-oriented audience
  • Visually compelling web sites encourage users to stay longer and buy more products
  • Designers use colorful graphics, eye-catching photos, and attention-grabbing layouts

• Research that quantified design-feature impacts on preference showed that high preferences could be expected if large pages had:
  • Columnar organization
  • Limited animated graphical ads
  • Two to three words for link text
  • Sans-serif fonts
  • Varied colors to highlight text and headings
• These results support design goals for high preference
  • Comprehensibility, predictability, familiarity, visual appeal, and relevant content

Mistakes and Issues

Top ten mistakes in presenting information on the web

1. Burying information too deep in a web page
2. Overloading pages with too much material
3. Providing awkward or confusing navigation
4. Putting information in unexpected places in the page
5. Not making links obvious and clear
6. Presenting information in bad tables
7. Making text so small that many users cannot read it
8. Using color combination for text that many users cannot read
9. Using bad forms
10. Hiding (or not providing) features that could help users

• Web content issues can be broken up into:
  • Site-level issues - are apparent throughout the entire site
    • They include the depth versus the breadth of the site
    • The use of frames
    • The presentation of navigation options
  • Page-level issues – observed at the individual page
    • They include components of pages
    • Tables, graphs, forms, and controls
    • Also page layout and the presentation of links
  • Special types of information
    • Site maps, search functions, user assistance, and feedback

Guidelines

• Numerous guidelines exists that ensure consistency and adherence to standards
  • The Java Look and Feel Design Guidelines
  • Sun’s Web Design Guide
  • The National Cancer Institute’s Research-Based Web Design & Usability Guidelines
  • The World Wide Web Consortium’s Web Accessibility Initiative
  • The Web Style Guide
• Web sites that address web design
  • Web 2.0 How-To Design Guide
  • Web Bloopers
  • KillerSites.com

Mash-ups

• Mash-ups – web pages or applications that integrate complementary elements from two or more sources
  • Part of an ongoing shift towards a more interactive and participatory WWW
  • Aimed at enhancing creativity, collaboration, and functionality
  • Often created using Ajax
  • Examples include integrated maps and geo-positioned photographs, maps of real-estate or rental property, book websites and hiking information resources,…
    • Flash Earth, Housingmaps.com

• Mash-ups and open-source software are driving new practices in development
• Designers can rapidly create web applications by combining pre-existing software components
• This allows for:
  • Rapid user-interface prototyping and application development
  • Reduced development risk
  • Reduced time-to-market

Window Design

• Computer users frequently have to consult documents, forms, e-mail messages, and more to complete their tasks.
• Designers struggle to:
  • Offer users sufficient information and flexibility to accomplish their task
  • Reduce window-housekeeping actions (stretch, move, and scroll a window)
  • Minimize distracting clutter

• Overlapping, draggable, resizable windows on a broad desktop have become the standard
• The dynamics of windows have a strong effect on user perceptions, animations for transitions must be designed carefully
  • Zooming boxes
  • Repainting when a window is opened or closed
  • Blinking outlines
  • Highlighting during dragging
• Advanced users working on multiple tasks can switch among collections of windows called “workspaces” or “rooms”

Coordinating Multiple Windows

• Coordinated Windows:
  • Windows that appear, change contents, and close as a direct result of user actions in the task domain
  • Example – medical insurance claims processing application
    • An agent retrieves information about a patient and fields with contact and membership information are automatically filled
    • At the same time another window opens containing the patients medical history
    • Also, a third window appears that contains the patients previous claims
    • Scrolling in the medical history windows also causes the previous claims window to scroll

• Coordination's for developers to consider:
  • Synchronized scrolling – the scroll bar of one window is coupled to the scroll bar of another
  • Hierarchical browsing – Windows Explorer and Outlook
  • Opening/closing of dependent windows – simultaneously open dependant windows in another convenient location
  • Saving/opening of window state – save the current state of the display with all the windows and their contents. “Save screen as…”
  • Tabbed browsing – view multiple web pages without opening a new browser window
  • Tiled windows – automatically resize and arrange windows so they do not overlap
  • Ribbon interface – Microsoft Office 2007

• Categories of interface schemes according to the interface mechanisms used to separate and blend views
  • Spatial separation
    • Typified by overview + detail interface
  • Temporal separation
    • Typified by zoomable interfaces
  • Seamless focus + context
    • Typified by fish-eye views
  • Cue-based techniques
    • Selectively highlight or suppress items within the information space

Image Browsing

• Image browsing enables users to work with large maps, circuit diagrams, magazine layouts, photos, or artwork
• How is this accomplished an a display with a fixed size?
  • Users see an overview in one window and the details in a second window
  • Users move a field-of-view box in the overview to adjust the detail-view content
  • If the user pans within the detail view, the field-of-view box should move in the overview window

• The magnification from the overview to the detail view is called the zoom factor
• Semantic zooming – the way in which objects are represented changes depending on their magnification

• Side-by-side placement of the overview and detail view is most common
• Some systems provide a single view
  • Either zooming smoothly to move in on a selected point
  • Or replacing the overview with the detail view
• Another option is to overlap the overview and detail view

• Fisheye views
  • Interest comes from trying to provide detail views (focus) and overviews (context) without obscuring anything
  • Provides a “focus + context” view of information
  • The focus area is magnified to show detail while preserving the context all in a single display
  • Examples: Dock on MAC OS X, AWN and Cairo Dock for Linux

• The design for image browsers should be governed by the user’s tasks, which can be classified as follows:
  • Image generation – paint or construct a large image or diagram
  • Open-ended exploration – browse to gain an understanding of the map or image
  • Diagnostics – scan for flaws in an entire diagram, image, or layout
  • Navigation – have knowledge of the overview, but need to pursue details along a highway or vain
  • Monitoring – watch the overview and, when a problem occurs, zoom in on the detail

Personal Role Management

• The current GUI offers a desktop with applications represented as icons and documents organized in folders
• The next progression is towards role-centered design
• Users focus on their roles rather than arranging windows
• A personal role manager
  • Used instead of a window manager
  • Could improve performance and reduce distraction while the user is working in a given role
  • Could facilitate shifting of attention from one role to another
• Could simplify and accelerate the performance of common coordination tasks, in the same way that GUIs simplify file-management tasks

• Organization Overviews and Role Management: Inspiration for Future Desktop Environments
  • [http://hcil.cs.umd.edu/trs/95-11/95-11.html]
  • Can you guess the authors’ names… Catherine Plaisant and Ben Shneiderman
• Each role has a vision statement that describes responsibilities and goals
• Each role also has a set of people, a task hierarchy, a schedule, and a set of documents
• Screen management is a key feature
  • All roles should be visible but the current focus of attention is on the current role
  • As the user shifts attention to the second role, the current one shrinks and the second grows to fill the screen

• Requirements for a personal role manager:
  • A unified framework for information organization according to users’ roles
  • A visual, spatial layout that matches tasks
  • Multi-window actions for fast arrangement of information
  • Information access with partial knowledge of an information item’s nominal, spatial, temporal, and visual attributes and its relationship to other information pieces
  • Fast switching and resumption of roles
  • Free users’ cognitive resources to work on task-domain actions, rather than making users concentrate on interface-domain actions
  • Use screen space efficiently and productively for tasks

Color

Color displays are attractive to users and can often improve task performance, but the danger of misuse is high.

Colors offer the following:

• Soothe or strike the Eye
• Add accents to an uninteresting display
• Facilitate subtle discriminations in complex displays
• Emphasize the logical organization of information
• Draw attention to warnings
• Evoke strong emotional rations of joy, excitement, fear, or anger

Color Guidelines for Designers

• Use color conservatively – too much color can be counterproductive and misleading
• Limit the Number of Colors – limit single displays to 4 colors and entire sequence displays to 7. Too much may cause confusion.
• Recognize the power of color as a coding technique – Ex Red means stop, overdue tasks. Green means go, completed tasks.
• Ensure that color coding supports the tasks
• Have color coding appear with minimal user effort
• Place color coding under user control – Users should be able to turn off or correct color coding
• Design for monochrome first
• Consider the needs of color-deficient users
• 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 – Ex. Red and Blue
• User color changes to indicate status changes
• Use color in graphic displays for greater information density