1 balancing form and function form and function high usability aesthetically pleasing error...

1

Balancing Form and Function

Form and Function

High Usability

Aesthetically Pleasing

Error Messages

Non-anthropomorphic Design

Design Display Guidelines

Display Efficiency

Display Complexity

Multiple Windows

Image Browsing

Use of Color

2


Error Messages

Capture errors as a basis for design enhancements to avoid errors

Error messages should provide constructive guidance in a positive tone

Specificity

• Be specific and precise

• Indicate what the user needs to do

• Choose user center phrasing

– SYNTAX ERROR vs. Unmatched left parenthesis

– ILLEGAL ENTRY vs. Type first letter: Send, Read, Drop

– INVALID DATA vs. Days range from 1 to 31

– BAD DATE vs. Drop-off date must come after pickup date Maintain consistent grammatical forms, terminology and abbreviations

3


Error Messages

Maintain consistent visual format and placement

• Mixed case

• Avoid error codes, or place at the end of the message

• Location

– On the display near the error

– On the bottom of the display

– Dialog box

– Solution: allow the user to customize the placement Developing effective messages

• Pay more attention to message design

• Quality control with programmers, users and usability specialists

• Develop guidelines

• Usability tests

• Record frequency of error messages

4


Examples

5


6


7



Computers communicating like people

The user should feel they are in control

Such interfaces are distracting and create anxiety

The computer should be transparent

Is this guy annoying?

Computer messages

• Poor: I will begin the lesson when you press RETURN

• Better: You can begin the lesson by pressing RETURN

• Better: To begin the lesson, press RETURN

– Avoids overuse of pronouns

http://www.youtube.com/watch?v=jQggTfZIstk&feature=related

8



Interfaces should neither compliment or condemn users, but provide comprehensible feedback to assist users in achieving their goals

Human author to guide through training is sometimes acceptable to end users

9


Display Design Guidelines

Provide all necessary data in the proper sequence

Provide meaningful groupings with labels familiar to the users

Justifications (left/right)

Alignment of decimal points

Do not require the user to convert data

Order lists alphabetically if no other order applies

Left-justify columns of alphabetic data to permit rapid scanning

Of course there many more…

10


Empirical Results

Expert users may prefer dense displays

Performance times may be shorter with fewer but denser displays than with more numerous but sparse displays

This is especially true for tasks that require comparison of information across displays

Staggers (1993)

• A study of nurses reading laboratory reports on three different screens

– Three-screen version

– Two-screen version

– Densely packed one-screen version

– Results: Search times dropped by half over five blocks for novice compared to experience users

– Due to a strong learning effect

– High cost of switching windows and reorienting

11


Display-complexity metrics (Tullis 1997)

Overall density – the number of filled character spaces as a percentage of total spaces available

Local density – the average number of filled character spaces in five degree visual angle around each character

• At normal viewing distances from displays, this area translates into a circle approximately 15 characters wide and 7 characters high

Grouping – the number of groups of “connected” characters

Layout complexity – based on information theory, the distribution of horizontal and vertical distances of each label and data item from a standard point on the display

Studies indicate that effective display design contains a middle number of groups (6 to 15) that are neatly laid out, surrounded by blanks, and similarly structured

Grouping reduces scanning time

12


Display-complexity metrics – Bad Design

13


Display-complexity metrics – Good Design

14


Display-complexity metrics – Efficiency

Initial Focus

• Structure data based on relationship between objects

•Minimize eye movements

15


User preferred web sites based on the following criteria (Ivory and Hearst – Webby Awards)

Columnar organization

Limit animated graphical ads

Average link text was kept to two to three words

San serif fonts were used

Varied colors were used to highlight text as well as headings

Columns

16


Window Design

If window-housekeeping actions can be reduced, users can complete their tasks more rapidly, and with fewer mistakes

Coordinating multiple windows Example: Insurance Claims Processing

• Agent retrieves information for a patient

– Primary window: patient address, TN, MRN

– Second window: patient’s medical history

– Third window: the record of previous claims

– Synchronous scrolls across related windows

» E.g., medical history window with the previous claims window

– When finished, data in all windows is saved and all windows closed

17


Coordinating multiple windows

Coordination: objects changing on user actions

Synchronized scrolling: scroll bars from two different windows are synchronized

Hierarchical browsing: e.g., one window contains a table of contents, and a second window the chapter is displayed

18


Coordinating multiple windows

Opening/closing of dependent windows

Saving/opening of window state

• “Save screen layout as…”

Primary Window 2nd window

3rd window

4th window

19


20


Image Browsing

Hierarchical view: users see an overview in one window and details in the second window

• Zoom Factor: Magnification from the overview to the detail view (often the zoom factor is between 5 and 30)

Overview

21


Image Browsing - Map View to Street View

22


Image Browsing

Fisheye views

http://www.youtube.com/watch?v=EECi-OYXQqw

23


Image Browsing

The design should be governed by the user’s task

• Open-ended exploration: browse to gain and understanding of the image

• Diagnostic: scan for flaws

• Navigation: seeking details (e.g., highway)

• Monitoring: watch in overview mode, then zoom in on details

24


Personal Role Management

Different views for different roles

Example:

• Student

• Faculty

25


26


Color – Form and Function

Soothe or strike the eye

Make a display more interesting

Evoke emotion

Provide discrimination of objects in a complex display

Facilitate the logical organization of information

Use to indicate abnormal conditions

Principles regarding the use of color

Use color conservatively: overuse can lead users to seek relationships that do not exit

Limit the number of colors: between 4 and 7

Consider the power as a coding method: e.g., red = warning, green = stable state

27



Match color coding to the task

• Accounting: if accounts overdue are red Design for monochrome first

• Forces to layout the information in a logical pattern Color deficiency

• 8% of males have some type of color-blindness

• Use double encoding Use for formatting

• Police cars responding to emergencies coded red Be consistent in color coding

28



Consider problems with color pairings

• Red on Blue

• Blue on Red

• Yellow on Purple

• Yellow on White lacks contrast

Very difficult to read

Eye muscles are strained attempt to create a sharp focus

Difficult to read

Difficult to read

29



Use color to indicate status changes

• Applications to process control systems

User color for graphic data displays

1 balancing form and function form and function high usability aesthetically pleasing error...

Documents