1. Balancing Function and Fashion
UNIT-4
Balancing Function and Fashion

2. Balancing Function and Fashion
More advanced guidelines, ideas: ●
Error messages
Non-anthropomorphic design
Display design
Web page design
Window design
Colour

3. Error Messages
Error messages should be considered in the overall design of the UI, not an afterthought ●
“Hall of shame” websites exist for really poor error messages
Consistency (perhaps across multiple applications)
Error messages may have to be written by multiple authors ● ● ● –
If this is the case, what system is in place to insure some sort of consistency?
Solution: guidelines document ●

4. Error Message Issues
A program error ideally can be resolved through some corrective action(s) ●
Therefore the error message should help lead the user to the corrective action(s)
Universal usability ● ●
Language translation afforded by separating help\error text from the presentation of help\error ●
e.g. Keeping error messages in files on disk rather than coded into the program itself
Problems: too obscure, hostile, little assistance – ● ●
e.g. Illegal Error ECx012CDE123C

5. Error Message Issues ●
Poor errors can cause: anxiety, stress, reduce confidence with interface, frustration
What are some reasons errors occur? ●
Users lack knowledge Poor understanding Accidental slips ● ● ●
Suspicions about why an error occurred can guide design decisions ●
Incorrect password? Most likely just accidental slip.
File access denial? Maybe user doesn't understand. ● ●

6. Error Message Issues
Error message optimization can be an easy way to improve UI ●
Track frequency of errors, respond accordingly... ●
Modify error handling procedures, improve documentation, online help...
Empirical data can be gathered to test decisions – ●
Bases for preparing error messages: ●
Specificity Positive tone User-centred style
Appropriate physical format ● ● ● ●

7. Specificity Too general... Too specific\simple...●
How to know what has gone wrong? ●
Too specific\simple... ●
How to fix what has gone wrong? ●
Example: form-fill in interface with many fields ●
Very annoying if all fields must be re-typed for an error in one field
Worse yet if the field with an error is not specified ● ●
Give concise but meaningful feedback on what is wrong, how to fix ●

8. Constructive guidance and positive tone●
Don't use hostile terms... ● –
Fatal Abort
Catastrophic Severe Illegal
Even these words, which may technically be “true”, we still want to avoid when possible... ● –
Invalid Bad Error

9. Constructive guidance and positive tone
Dependent on knowing user intentions... Hard to know user intentions
Solution: present user with list of possible actions based on possible intentions, allow them to decide
How to “be constructive” though? ● ● ● ●
Correct errors automatically? ●
Takes away incentive to self-correct
Error correction almost becomes part of the “syntax” of the program itself in this case
Is this desirable? Depends on situation... ● ● ● –
Keep in mind: most desirable is still to prevent errors

10. User-centred phrasing
Allow users control over error message information ●
Different levels of explanation ● –
Novice, intermediate, expert Technical vs. Non-technical
Different types of information ● –
Description of issues, examples, resolution
Integrate online help into the error messages ●
Allow access to context-sensitive help as part of the error message ●

11. Appropriate physical format
Upper-case only error messages? ●
Really only appropriate if the error message is very serious, and brief
Including error codes like CExFE23DA? ● ●
Not really useful for most consumer-facing software
Maybe more useful for a compiler error, can act as a reference
If included at all, error codes should be: ● ● ● –
At the end of the error message
Accessed through a “more information” button, or similar UI element

12. Appropriate physical format
Where to display error message? ●
Near problem itself
In a spot specific for error messages ● ● –
e.g. Display bottom
Audible notification that an error has occurred? ●
e.g. bell, buzzing noise, etc.
Can help ensure that users do observe the error But can also be annoying...
May also cause embarrassment for the users if others are near by, a distraction ● ● ● ● –
What's the first thing you do when you slip on the ice?

13. Error-message guidelines
Design process guidelines ●
Increase attention to message design Establish quality control
Develop guidelines Carry out usability tests
Record the frequency of occurrence for each message ● ● ● ● ●

14. Error-message guidelines
End-product guidelines ● –
Be as specific and precise as possible. Determine necessary, relevant error messages.
Be constructive. Indicate what the user needs to do. Use a positive tone. Avid condemnation. Be courteous
Choose user-centred phrasing. State problem, cause, solution.
Consider multiple levels of messages. State brief, sufficient information to assist with corrective action.
Maintain consistent grammatical forms, terminology and abbreviations.
Maintain consistent visual format and placement. – – – –

15. Non-anthropomorphic Design●
Having human characteristics ●
Idea: model Human-Computer Interaction based on Human-Human Interaction
Lots and lots of controversy here! ● ●
Attributing qualities such as intelligence, emotion, free will to a computer are deceptive, misleading ● –
When this deception inevitably becomes uncovered as limitations are reached, users realize or feel they have been betrayed
Model of computer is obfuscated and hidden –

16. Non-anthropomorphic Design
More controversy... ●
Computers are operated vs people have identity, autonomy ● –
May blame computer for error
Study: 24 of 29 computer science students felt that computers can “have intentions” (Friedman, 1995)
Distracting, anxiety producing ● –
It's just a fantasy that computer is a “friend”
Anxiety about how to be socially appropriate, or how to keep this “friend” happy
Unlike a tool-like interface, such as a map –

17. Non-anthropomorphic Design
Historically, anthropomorphic designs have not faired very well... ●
Tillie the Teller Harvey Wallbanker
BOB (Bank of Baltimore)
Talking cars from the 1980s... Ananova ● ● ● ● ●
Advocates of anthropomorphic design often suggest that such interfaces would be best suited to education, sales, therapy, entertainment ●

18. Non-anthropomorphic Design
Design issue: pronoun usage ●
Anthropomorphic advocates believe using “I” or “you” will make an interface “more friendly” ● –
Increased subjective satisfaction?
In practice: can slow down performance, can become annoying or silly ●

19. Non-anthropomorphic Design
Simulated natural language interface study (Brennan and Ohaeri, 1994) ●
Travel-reservation task
Simulated natural-language interface
“I”, “you” or “neutral” refereed to as anthropomorphic, fluent, telegraphic
Poor: I will book a flight to New York when you hit Enter. Better: You can book a flight to New York when you hit Enter.
Better: To book a flight to New York, press enter.
Participants didn't find the anthropomorphic version to be any more intelligent
But performance suffered... ● ● ● ● ●

20. Non-anthropomorphic Design
What about anthropomorphic design for children's educational software? ●
Cartoon characters ● –
Animated
Pointing at UI objects, giving advice and encouragement
e.g. Reader Rabbit
Some user studies support this view (Mayer, 2009) ● ●

21. Non-anthropomorphic Design
What about for adult productivity software? ●
Microsoft BOB
Meant to be an interface for non-technical users Replaced Program Manager with home analogy ● ● ●
rooms in a house to group features, furniture, decorations and icons for functionality, applications
Users found it patronizing – ● –
“Good job so far, Kevin”
Failure ● –
In Time Magazine's list of 50 Worst Inventions, CNET.com worst product of the decade

22. Non-anthropomorphic Design
What about for instructional, educational or online help material targeted at adults? ●
Use video clips of actual human being ● –
e.g. As an intro to the software
Support user control ● –
Provide options to view different video clips Allow them to repeat video clips
Allow them to decide when to move on
Other situations? ●
Japanese elder care robots
Much research, hope of $40 billion industry by 2025 ● ●

23. Non-anthropomorphic guidelines●
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
Use cartoon characters in games or children's software, but avoid them elsewhere
Provide user-centred overviews for orientation and closure ● ● ● ●

24. Non-anthropomorphic guidelines●
Do not use “I” when the computer responds to human actions
Use “you”to guide users, or just state facts ●

25. Data Display Design Display of data is a complex issue...●
Empirical data suggests visual aesthetics has strong impact on subjective satisfaction
Condensed data, or spread out?
Smith and Mosier (1986)
162 guidelines for data display ● ● ● ●
Condensed can be better, particularly for experts ●
Problem: time spent scanning for data ● –
e.g. Nurse study, search times dropped by half for densely packed one-screen data display vs. Three screen

26. Data Display Guidelines
Sample from 162 guidelines of Smith and Mosier (1986) ●
Ensure that any data a user needs, at any step in a transaction sequence, are available for display
Use short, simple sentences.
Display data to users in directly usable forms; do not require that users convert displayed data
Left-justify columns of alphabetic data to permit rapid scanning
Label each page in a multipaged display to show its relation to others
... ● ● ● ● ● ●

27. Web Page Design
Top Ten Mistakes of web-based presentation of information (Tullis, 2005) ●
Burying information too deep in a website Overloading pages with too much material Providing awkward or confusing navigation
Putting information in unexpected places on the page Not making links obvious and clear
Presenting information in bad tables
Making text so small that many users cannot read it Using bad forms
Hiding (or not providing) features that could help users –

28. Web Page Design
Web design can be broken-down into levels (Tullis, 2004) ●
Site-level issues ● –
Issues throughout entire website Navigation
Depth vs breadth of website Use of frames
Page-level issues ● –
Tables, Graphs, Forms Page layout Presentation of links

29. Web Page Design
Web design can be broken-down into levels (Tullis, 2004) ●
“special” information ● –
Site maps Search functions User assistance Feedback
Provides terminology, separation of concerns ●

30. Web Page Design
Race existed to create coolest designs, attention- grabbing layouts
Market researchers aimed to have users stay longer, buy more products
Commercial desire to improve satisfaction, performance with websites ● ● ●
Design trade-off with increased download times, especially in the era of dial-up modems
Webby Awards – ●
Conjectures based on analysis of winning pages (Ivory and Hearst, 2002)
e.g. Average link text should be kept to 2-3 words ● ●

31. Web Page Design Good approach: user task focused Also...●
Analyze task sequences, frequencies Layout page according to this data
e.g. Top-to-bottom movement through display more efficient than having to move around top to bottom all over the screen
Goal is to minimize visual scanning time, movement time ● ● ● ●
Also... ●
Guidelines documents are numerous ●

32. Web Page Design Web page design guidelines document examples●
The Java Look and Feel Design Guidelines (Sun, 2001)
Sun's Web Design Guide (Sun, 2008)
The World Wide Web Consortium's Web Accessibility Initiative (WAI, 2008)
The Web Style Guide (Lynch and Horton, 2008) ● ● ● ●

33. Window Design Overview
For many tasks it is required to deal with multiple documents, windows, forms
Problem: There is a limit of how many of such documents etc. can be displayed simultaneously
Goal: Offer sufficient information and flexibility to accomplish the task while reducing window housekeeping actions and minimizing distracting clutter
This leads to users being able to complete their task more rapidly and most likely with fewer mistakes

34. Window Design More concrete How to coordinate multiple windows?
Synchronized scrolling: One scrollbar (window 1) is connected to another scrollbar (window 2); enables, for instance, simultaneous document review
Hierarchical browsing (e.g., Windows Explorer)
Opening/closing of dependent windows
Saving/opening of window state
Image Browsing
Good example: Google Maps!

35. Colour Benefits of using colour●
Various colours are soothing or striking to the eye Colour can improve an uninteresting display
Colour facilitates subtle discrimination in complex displays
A colour code can emphasize the logical organization of information
Certain colours can draw attention to warnings
Colour coding can evoke more emotional reactions of joy, excitement, fear or anger ● ● ● ● ● ●

36. Colour Dangers of using colour Colour pairings may cause problems●
Colour pairings may cause problems
Colour fidelity may degrade on other hardware
Printing or conversion to other media may be a problem ● ● ●

37. Colour Guidelines Use colour conservatively●
Too many different colours can confuse novice users
Recognize the power of colour as a coding technique
Too much colour can confuse or misdirect users ●
Limit the number of colours ● ● ●
Colour increases recognition speed for many tasks ●
Ensure that colour coding supports the task ●
e.g. Wrong data is highlighted for search task ●

38. Colour Guidelines Have colour coding appear with minimal user effort●
Colour coding should in general be automatic when users perform a task
Place colour coding under user control ● ●
Users should still be able to turn off colour coding ●
Design for monochrome first ●
Layout data in a logical manner first, before colouring (universal usability, black\white monitors, colour blind users) ●

39. Colour Guidelines Consider the needs of colour-deficient users●
Readability, universal usability issue ●
Use colour to help in formatting ●
Useful for densely packed displays ●
Be consistent in colour coding ●
Some error messages in red? Then don't use yellow for others!
Be alert to common expectations about colour codes ● ●
e.g. Red – danger, stop, etc. ●

40. Colour Guidelines Be alert to problems with colour pairings●
e.g. Red on blue displays ●
Use colour changes to indicate status changes ●
Can be an attention-getting method ●
Use colour in graphic displays for greater information density ●
e.g. Graphs with multiple plots ●

41. Quality of Service

42. Quality of Service Introduction
1960s: mathematical computation association with computation time
World wide web: means graphics, & network congestion effect response time
Time is precious
Lengthy or unexpected system response time can produce:
Frustration
Annoyance
Eventual anger
Speedy and quickly done work can result in users:
learning less
reading with lower comprehension
making more ill-considered decisions
committing more data-entry errors

43. Models of response-time impacts
The number of seconds it takes from the moment users initiate an activity until the computer presents results on the display
User think time
The number of seconds the user thinks before entering the next action

44. Models of response-time impacts
Designers of response times and display rates in HCI must consider:
complex interaction of technical feasibility
cost
task complexity
user expectations
speed of task performance
error rates
error handling procedures
Overall majority of users prefer rapid interactions
Lengthy response times (15 seconds) are detrimental to productivity
Rapid response times (1 second or less) are preferable, but can increase errors for complex tasks

45. Models of response-time impacts
Display Rate
Alphanumeric displays: The speed in characters per second at which characters appear for the user to read
World Wide Web Applications: Display rate may be limited by network transmission speed or server performance
Reading textual information from a screen is a challenging cognitive and perceptual task
Users relax when the screen fills instantly- beyond a speed where someone may feel compelled to keep up
Cognitive human performance would be useful for:
making predictions
designing systems
formulating management policies

46. Tune World Wide Web applications to improve performance
Designers can optimize web pages to reduce byte counts and numbers of files
or provide previews of materials available in digital libraries or archives
to help reduce the number of queries and accesses to the network

47. Models of response-time impacts
Limitations of short-term and working memory
Any cognitive model must emerge from an understanding of human problem-solving abilities
Magic number seven - plus or minus two
The average person can rapidly recognize seven chunks of information at a time
This information can be held for 15 to 30 seconds in short-term memory
Size of the chunks depends on the person' s familiarity with the material
Short-term memory and working memory are used in conjunction for processing information and problem solving
Short-term memory processes perceptual input
Working memory generates and implements solutions
People learn to cope with complex problems by developing higher-level concepts using several lower-level concepts brought together into a single chunk
Short term and working memory are highly volatile
Disruptions cause loss of memory
Delays require that memory be refreshed

48. Models of response-time impacts
Source of errors
Solutions to problems must be recorded to memory or implemented
Chance of error increases when solutions are recorded
When using an interactive computer system users may formulate plans and have to wait for execution time of each step
Long (1976) found unskilled and skilled typists worked more slowly and made more errors with longer response times
For a given user and task, there is a preferred response time
Conditions for optimum problem solving
Longer response time causes uneasiness in the user because the penalty for error increases
Shorter response time may cause the user to fail to comprehend the presented materials
Progress indicators shorten perceived elapsed time and heighten satisfaction:
graphical indicators
blinking messages
numeric seconds left for completion

49. Models of response-time impacts
Conditions for optimum problem solving (cont.)
Rapid task performance, low error rates, and high satisfaction can come from:
Users have adequate knowledge of the objects and actions necessary for the problem-solving task
The solution plan can be carries out without delays
Distractions are eliminated
User anxiety is low
There is feedback about progress toward solution
Errors can be avoided or handled easily
Other conjectures in choosing the optimum interaction speed
Novices may exhibit better performance with slower response time
Novices prefer to work at slower speeds
With little penalty for an error, users prefer to work more quickly
When the task is familiar and easily comprehended, users prefer more rapid action
If users have experienced rapid performance previously, they will expect in future situations

50. Expectations and attitudes
Related design issues may clarify the question of acceptable response time
E.g. how long before hearing a dial-tone
Two-second limit (Miller, 1968) appropriate for many tasks
But users have adapted a working style and expectation based on responses within a fraction of a second
People can detect 8% changes in a 2-4 second response time
Response-time choke
A system is slowed down when the load is light and potential performance high
Makes the response time more uniform over time and across users, avoiding expectations that can’t always be met
Response time across web sites varies
It effects user interest and quality assessment
Three things influence response-time:
Previous experiences
The individual's tolerance for delays
Task complexity

51. User productivity
Repetitive tasks
Nature of the task has a strong influence on whether changes in response time alter user productivity
Shorter response time means users responds more quickly, but decisions may not be optimal
Goodman and Spence (1981) – reduced response time lead to more productivity
Teal and Rudnecky (1992) – slower response time lead to more accuracy
Problem solving tasks
Users will adapt their work style to the response time
Users will change their work habits as the response time changes
Grossberg, Wiesen, and Yntema (1976) – the time to solution was invariant with respect to response time
Summary
Users pick up the pace of the system to work more quickly with shorter response time
Higher throughput of work demands more attention must be paid to minimizing the cost of delay of error recovery

52. Variability
People are willing to pay substantial amounts of money to reduce the variability in their life, e.g. insurance
Goodman and Spence (1981)
Subjects took more advantage of fast response time by making their subsequent commands immediately and balancing the time lost in waiting for slower responses
Modest variations in response time (plus or minus 50% of the mean) appear to be tolerable
It may be useful to slow down unexpected fast responses

53. Frustrating experiences
(Ceaparu et al., 2004) 46% to 53% of users’ time was seen as being wasted
Recommendations include improving the quality of service and changes by the user
Poor quality of service is more difficult in emerging markets and developing nations
User training can help
a common application, but also a common source of frustration
Viruses also a problem

54. Frustrating experiences (cont.)
Since frustration, distractions, and interruptions can impede smooth progress, design strategies should enable users to maintain concentration.
Three initial strategies can reduce user frustration:
Reduce short-term and working memory load
Provide information abundant interfaces
Increase automaticity
Automaticity in this context is the processing of information (in response to stimuli) in a way that is automatic and involuntary, occurring without conscious control.
An example is when a user performs a complex sequence of actions with only a light cognitive load, like a driver following a familiar route to work with little apparent effort.