Balancing Function and Fashion UNIT-4 Balancing Function and Fashion

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

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 ●

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

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

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 ● ● ● ●

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 ●

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

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

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 ●

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

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?

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 ● ● ● ● ●

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

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 –

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 –

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 ●

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 ●

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

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

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

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 ● ●

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 ● ● ● ●

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

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

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

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 –

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

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 ●

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 ● ●

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 ●

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

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

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!

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 ● ● ● ● ● ●

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 ● ● ●

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 ●

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

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

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 ●

Quality of Service

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

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

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

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

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

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

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

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

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

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

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

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 Email a common application, but also a common source of frustration Viruses also a problem

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.