Date post: | 01-Jan-2016 |
Category: |
Documents |
Upload: | meghan-marshall |
View: | 213 times |
Download: | 0 times |
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
Balancing Form and Function
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
Balancing Form and Function
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
Balancing Form and Function
Examples
5
Balancing Form and Function
6
Balancing Form and Function
7
Balancing Form and Function
Non-anthropomorphic Design
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
Balancing Form and Function
Non-anthropomorphic Design
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
Balancing Form and Function
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
Balancing Form and Function
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
Balancing Form and Function
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
Balancing Form and Function
Display-complexity metrics – Bad Design
13
Balancing Form and Function
Display-complexity metrics – Good Design
14
Balancing Form and Function
Display-complexity metrics – Efficiency
Initial Focus
• Structure data based on relationship between objects
•Minimize eye movements
15
Balancing Form and Function
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
Balancing Form and Function
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
Balancing Form and Function
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
Balancing Form and Function
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
Balancing Form and Function
20
Balancing Form and Function
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
Balancing Form and Function
Image Browsing - Map View to Street View
22
Balancing Form and Function
Image Browsing
Fisheye views
http://www.youtube.com/watch?v=EECi-OYXQqw
23
Balancing Form and Function
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
Balancing Form and Function
Personal Role Management
Different views for different roles
Example:
• Student
• Faculty
25
Balancing Form and Function
26
Balancing Form and Function
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
Balancing Form and Function
Principles regarding the use of color
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
Balancing Form and Function
Principles regarding the use of color
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
Balancing Form and Function
Principles regarding the use of color
Use color to indicate status changes
• Applications to process control systems
User color for graphic data displays