Balancing Function and Fashion

Size: px

Start display at page:

Download "Balancing Function and Fashion"

Alison Collins
5 years ago
Views:

1 Balancing Function and Fashion CS4HC3 / SE4HC3/ SE6DO3 Fall 2011 Instructor: Kevin Browne brownek@mcmaster.ca Slide content is based heavily on Chapter 11 of the textbook: Designing the User Interface: Strategies for Effective Human-Computer Interaction / 5 th edition, by Ben Schneiderman & Catherine Plaisant

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 File access denial? Maybe user doesn't understand. 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.

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... 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 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 How to be constructive though? 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 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 Anthropomorphic 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 usercontrolled 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... Smith and Mosier (1986) 162 guidelines for data display Empirical data suggests visual aesthetics has strong impact on subjective satisfaction Condensed data, or spread out? 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 Commercial desire to improve satisfaction, performance with websites Race existed to create coolest designs, attentiongrabbing layouts Market researchers aimed to have users stay longer, buy more products 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 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 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

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

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

36 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)

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

38 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

39 References Designing the User Interface: Strategies for Effective Human-Computer Interaction / 5 th edition, by Ben Schneiderman & Catherine Plaisant (2010) Brennan, Susan E. and Ohaeri, Justina O., Effects of message style on users' attributions towards agents, Proc. CHI '94 Conference: Human Factors in Computing Systems, ACM Press, New York (1994), Friedman, Batya, It's the computer's fault - Reasoning about computers as moral agents, Proc. CHI '95 Conference: Human Factors in Computing Systems, ACM Press, New York (1995), Ivory, M.Y. and Hearst, M.A., Statistical profiles of highly-related web site interfaces, Proc. CHI 2002 Confernece: Human Factors in Computing Systems, ACM Press, New York (2002), Mayer, Richard E., Multimedia Learning, Second Edition, Cambridge University Press, New York (2009). Smith, Sid L. and Mosier, Jane N., Guidelines for Designing User Interface Software, Report ESD-TR , Electronic Systems Division, MITRE Corporation, Bedford, MA (1986). Tullis, T.S., Information presentaiton, in Proctor, R. and Vu, K. (Editors), Handbook of Human Factors in Web Design, Routledge, New York (2004).

40 References Tullus, T.S., Web-based presentation of information: The top ten mistakes and why they are mistakes, Proc. HCI International 2005, Las Vegas, NV, LAwrence Erlbaum Associates (July 2005).

COMP 388/441 HCI: 09 - Balancing Function and Fashion Balancing Function and Fashion

COMP 388/441 HCI: 09 - Balancing Function and Fashion Balancing Function and Fashion 09 - Balancing Function and Fashion Lecture 09 - Overview This lecture deals with five design matters that are functional issues [...] but also leave room for varying styles to suite a variety of users.