1. Balancing Function and Fashion (Shneiderman and Plaisant, Ch. 11)
from

2. Overview “Balancing Function and Fashion”
Explication of interface “style” not easy – but, Shneiderman tries …
Style in interfaces – vs. style of interface
What and why – Much more later about web design
Style and “look and feel”
Design decisions influence style:
Error messages
Anthropomorphic design
Display design
Window design
Color
“User Manuals, Online Help, and Tutorials” (maybe)
Reading from screen vs. reading from text

3. Introduction - Balancing Function & Fashion
Interface design, both graphics and interaction, not yet “high art” (Shneiderman)
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.

4. Style in Web Page and Sites
Very similar styles
But differences …
Here, for web pages and sites, much is “page design” and “information architecture” design
Will consider these in detail later

5. Style and “Look and Feel”
Recall, “look and feel”
appearance + behavior = look and feel
Lots of things you can interact with:
main WIMP components (windows, menus, icons)
Buttons
Dialogue boxes
Palettes
… widgets
Also, graphic design and widget layout
Style is element of “look and feel”

6. 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

7. Error Messages
Error message are one interface element creating “style”
E.g., “Try closing other windows and restarting program.” vs. “Core Dump”
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

8. 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

9. 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 ‘ (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.

10. 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.”

11. 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

12. 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

13. 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
Historical (forthcoming):

14. 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
Historical (forthcoming):
So, there are arguments against:

15. 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?
New reader

16. 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.

17. 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”

18. 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

19. FYI - Display Design – Data Display
Samples from 162 data-display guidelines from Smith and Mosier (1986)
If you need to …
More detail in Shneiderman

20. 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

21. 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

22. 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

23. FYI - Display Design - Complexity Metrics - Sears
Sears (1993) developed task-dependent metric
Called layout appropriateness to assess whether spatial layout is in accord 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

24. 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

25. 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

26. Window Design – MS Task Gallery
Microsoft research project
A window manager
Future imagined 10+ years ago
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.

27. Window Design – MS Task Gallery
“Palette” of windows
3D navigation
Window controls
Move Bring Ordered Loose Add to Maximize Close
Forward Stack Stack Selection

28. 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

29. 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.

30. 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.

31. 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,

32. 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

33. End .