Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Chapter 12 Balancing Function and Fashion
  2. 2. Introduction <ul><li>User experiences with computer system prompts, explanations, error diagnostics, </li></ul><ul><li>and warnings play a critical role in influencing acceptance of software systems. </li></ul><ul><li>The wording of messages is especially important in systems designed for novice </li></ul><ul><li>users; experts also benefit from improved messages. Messages are sometimes </li></ul><ul><li>meant to be conversational, as modeled by human-human communications, but </li></ul><ul><li>this strategy has its limits because people are different from computers and </li></ul><ul><li>computers are different from people. </li></ul><ul><li>Another opportunity for design improvements lies in the layout of information on </li></ul><ul><li>a display. Cluttered display may overwhelm even knowledgeable users; but with </li></ul><ul><li>only modest effort, we can create well-organized information abundant layouts </li></ul><ul><li>that reduce search time and increase subjective satisfaction. Large, fast, highresolution </li></ul><ul><li>color displays offer many possibilities and challenges for designers. </li></ul>
  3. 3. Copyright © 2005, Pearson Education, Inc.
  4. 4. Error messages <ul><li>Overview </li></ul><ul><li>User experience with computer-system prompts, </li></ul><ul><li>explanations, error diagnostics, and warnings is crucial </li></ul><ul><li>in influencing acceptance of SW systems </li></ul><ul><li>Why do errors occur? </li></ul><ul><li>Lack of knowledge, incorrect understanding, inadequate slips </li></ul><ul><li>What is the consequence? </li></ul><ul><li>Users are likely to be confused, are anxious or feel inadequate </li></ul><ul><li>What is a solution? </li></ul><ul><li>Make error messages as user-friendly as possible; this is </li></ul><ul><li>especially important for novice users as they commonly have a </li></ul><ul><li>lack of knowledge, confidence, and are sometimes easily </li></ul><ul><li>frustrated or discouraged </li></ul>
  5. 5. Error messages (cont.) <ul><li>Improving Error Messages </li></ul><ul><li>Measure where errors occur frequently, focus </li></ul><ul><li>on these issues </li></ul><ul><li>Improve messages but also revise error </li></ul><ul><li>handling procedures, improve documentation </li></ul><ul><li>and training manuals, change permissible </li></ul><ul><li>actions, etc. </li></ul><ul><li>All error messages should be reviewed by </li></ul><ul><li>peers, managers, should be tested empirically, </li></ul><ul><li>and be included in user manuals </li></ul>
  6. 6. Error messages (cont.) <ul><li>Guidelines </li></ul><ul><li>Product </li></ul><ul><li>Be as specific and precise as possible </li></ul><ul><li>Be constructive: Indicate what the user needs to do </li></ul><ul><li>Use a positive tone: Avoid condemnation </li></ul><ul><li>Choose user centered phrasing </li></ul><ul><li>Consider multiple levels of messages </li></ul><ul><li>Maintain consistent grammatical forms, terminology, and abbreviations </li></ul><ul><li>Maintain consistent visual format and placement </li></ul><ul><li>Process </li></ul><ul><li>Increase attention to message design </li></ul><ul><li>Establish quality control </li></ul><ul><li>Develop guidelines </li></ul><ul><li>Carry out usability tests </li></ul><ul><li>Record the frequency of occurrence for each message </li></ul>
  7. 7. Error messages (cont.) <ul><li>Examples - 1/2 </li></ul><ul><li>Specificity </li></ul><ul><li>Avoid being too general (e.g., “Syntax Error”) </li></ul><ul><li>This makes it difficult to understand what went wrong and how </li></ul><ul><li>it can be fixed </li></ul><ul><li>Constructive Guidance and Tone </li></ul><ul><li>Avoid hostile messages and violent terminology </li></ul><ul><li>Do not only focus about what went wrong (give guidance) </li></ul><ul><li>Eliminate negative words (e.g., error, illegal, fatal, bad, </li></ul><ul><li>catastrophic) </li></ul><ul><li>Options for guidance: Automatic error correction, present </li></ul><ul><li>possible alternatives, avoid errors from occurring </li></ul>
  8. 8. Error messages (cont.) <ul><li>Examples - 2/2 </li></ul><ul><li>User Centered Phrasing </li></ul><ul><li>User initiates more than responds </li></ul><ul><li>Avoid negative and condemning tone </li></ul><ul><li>Be brief but provide more information if needed </li></ul><ul><li>Appropriate Physical Format </li></ul><ul><li>Upper vs. lower case: Use “all upper case” only in specific </li></ul><ul><li>situations </li></ul><ul><li>Never use code numbers or, if you must, place them at the end </li></ul><ul><li>of the message or hide them from users that can not deal with </li></ul><ul><li>the codes </li></ul><ul><li>Sound may be important if there is a chance that something will </li></ul><ul><li>otherwise be overlooked; however, be always careful with </li></ul><ul><li>using sound </li></ul>
  9. 9. Nonanthropomorphic Design <ul><li>Overview </li></ul><ul><li>Deals with conversational messages between </li></ul><ul><li>humans and computers </li></ul><ul><li>Meaningful design of such dialogs is crucial to </li></ul><ul><li>create comprehensible, predictable and </li></ul><ul><li>controllable interfaces </li></ul><ul><li>Questions: Why not let computers talk as they </li></ul><ul><li>were people, appear as being intelligent, </li></ul><ul><li>human, emotional, autonomous? </li></ul><ul><li>Controversy: appealing, productive vs. deceptive, </li></ul><ul><li>confusing, misleading, ... </li></ul>
  10. 10. Nonanthropomorphic Design Design <ul><li>Arguments for Nonanthropomorphic Design </li></ul><ul><li>People feel disillusionment, distrust computers </li></ul><ul><li>if they can not live up to their expectations </li></ul><ul><li>Clarification of the difference between humans </li></ul><ul><li>and computers. Can we blame the computer? </li></ul><ul><li>People feel less responsible for their </li></ul><ul><li>actions/performance if they interact with an </li></ul><ul><li>anthropomorphic interface </li></ul><ul><li>Distraction from the actual task </li></ul><ul><li>Anxiety, which leads to less accuracy in task </li></ul><ul><li>performance </li></ul>
  11. 11. Nonanthropomorphic Design Design <ul><li>Guidelines </li></ul><ul><li>Be cautious in presenting computers as people, either </li></ul><ul><li>with synthesized or cartoon characters </li></ul><ul><li>Use appropriate humans for audio or video </li></ul><ul><li>introductions or guides </li></ul><ul><li>Use cartoon characters in games or children’s software, </li></ul><ul><li>but usually not elsewhere </li></ul><ul><li>Provide user-centered overviews for orientation and </li></ul><ul><li>closure </li></ul><ul><li>Do not use “I” when the computer response to human </li></ul><ul><li>action </li></ul><ul><li>Use “you” to guide users, or just state facts </li></ul>
  12. 12. Display design <ul><li>Overview </li></ul><ul><li>Deals with layout of information on the display </li></ul><ul><li>Goal: Avoid clutter, reduce search time, increase subjective </li></ul><ul><li>satisfaction </li></ul><ul><li>Task performance goes up! </li></ul><ul><li>For most interactive systems the display is key </li></ul><ul><li>component of successful design </li></ul><ul><li>General rule: Always start with task analysis without </li></ul><ul><li>consideration of display size </li></ul><ul><li>Consider: </li></ul><ul><li>Provide all necessary data in a proper sequence to carry out </li></ul><ul><li>the task </li></ul><ul><li>Meaningful grouping of items (with labels suitable to users’ </li></ul><ul><li>knowledge) </li></ul><ul><li>Use consistent sequences of groups and orderly formats </li></ul>
  13. 13. Display design <ul><li>Example Guidelines </li></ul><ul><li>Ensure that any data a user needs, at any step in a </li></ul><ul><li>transaction sequence, are available for display </li></ul><ul><li>Display data to users in directly usable forms; do </li></ul><ul><li>not require that the users convert displayed data </li></ul><ul><li>Maintain a consistent format, for any particular type </li></ul><ul><li>of data display, from one display to another </li></ul><ul><li>Use short, simple sentences </li></ul><ul><li>Ensure that labels are sufficiently close to their data </li></ul><ul><li>fields to indicate association, yet are separated at </li></ul><ul><li>least by one space </li></ul>
  14. 14. Display design (cont.) <ul><li>Example Principles </li></ul><ul><li>1. Elegance and simplicity: Unity, refinement and </li></ul><ul><li>fitness </li></ul><ul><li>2. Scale, contrast, and proportion: Clarity, harmony, </li></ul><ul><li>activity, restraint </li></ul><ul><li>3. Organization and visual structure: Grouping, </li></ul><ul><li>hierarchy, relationship, balance </li></ul><ul><li>4. Style: Distinctiveness, integrity, comprehensiveness, </li></ul><ul><li>appropriateness </li></ul>
  15. 15. Display design (cont.)
  16. 16. Display design (cont.) <ul><li>Some specific guidelines for web-based design </li></ul><ul><li>These examples of guidelines are based on </li></ul><ul><li>studies: </li></ul><ul><li>Use a columnar organization </li></ul><ul><li>Limit the use of animated graphical adds </li></ul><ul><li>Average link text: 2-3 words </li></ul><ul><li>Use Sans-Serif fonts </li></ul><ul><li>Vary colors to highlight text and headings </li></ul>
  17. 17. Display design (cont.) <ul><li>Display-complexity : </li></ul><ul><li>The complexity of using color was demonstrated in studies of decision-making </li></ul><ul><li>tasks, rather than of simple location of information or recall, with management </li></ul><ul><li>information systems. Although color-coding was found to be beneficial and </li></ul><ul><li>preferred, there was an interaction with personality factors. Further intricate </li></ul><ul><li>relationships were found in a comparison of monochrome versus color coded pie </li></ul><ul><li>charts, bar charts, line graphs, and data tables, in which color coding sped </li></ul><ul><li>performance in all but the line graphs. </li></ul>
  18. 18. Display design (cont.) <ul><li>Layouts in which related information was clusters were found to benefit users </li></ul><ul><li>when the cognitive load on working memory was large. Accuracy increased </li></ul><ul><li>when related items were clusters, thus reducing the scanning needed to locate </li></ul><ul><li>distant items. </li></ul>
  19. 19. Window design <ul><li>Overview </li></ul><ul><li>For many tasks it is required to deal with multiple </li></ul><ul><li>documents, windows, forms </li></ul><ul><li>Problem: There is a limit of how many of such </li></ul><ul><li>documents etc. can be displayed simultaneously </li></ul><ul><li>Goal: Offer sufficient information and flexibility to </li></ul><ul><li>accomplish the task while reducing window </li></ul><ul><li>housekeeping actions and minimizing distracting </li></ul><ul><li>clutter </li></ul><ul><li>This leads to users being able to complete their </li></ul><ul><li>task more rapidly and most likely with fewer </li></ul><ul><li>mistakes </li></ul>
  20. 20. Window design <ul><li>More concrete </li></ul><ul><li>How to coordinate multiple windows? </li></ul><ul><li>Synchronized scrolling: One scrollbar (window 1) is </li></ul><ul><li>connected to another scrollbar (window 2); enables, for </li></ul><ul><li>instance, simultaneous document review </li></ul><ul><li>Hierarchical browsing (e.g., Windows Explorer) </li></ul><ul><li>Opening/closing of dependent windows </li></ul><ul><li>Saving/opening of window state </li></ul><ul><li>Image Browsing </li></ul><ul><li>Good example: Google Maps! </li></ul>
  21. 21. <ul><ul><ul><li>Zoom factors: 5-30 </li></ul></ul></ul><ul><ul><ul><ul><li>Larger suggests an intermediate view is needed </li></ul></ul></ul></ul><ul><ul><ul><li>Semantic zooming </li></ul></ul></ul><ul><ul><ul><li>Side by side placement, versus fisheye view </li></ul></ul></ul>
  22. 22. Color <ul><li>Overview </li></ul><ul><li>The use of colors can be highly influential in regard to </li></ul><ul><li>the acceptance of interfaces. With the high-resolution </li></ul><ul><li>color display that are available and common today, this </li></ul><ul><li>brings challenges for the designer </li></ul><ul><li>Influence of color: </li></ul><ul><li>Soothes or strikes the eye </li></ul><ul><li>Adds accents to an uninteresting display </li></ul><ul><li>Facilitates subtle discrimination in complex displays </li></ul><ul><li>Emphasizes the logical organization of information </li></ul><ul><li>Draws attention to warning </li></ul><ul><li>Evokes string emotional reactions of joy, excitement, fear, </li></ul><ul><li>or anger </li></ul>
  23. 23. Color <ul><li>Guidelines for alphanumeric displays, spreadsheets, graphs, ... </li></ul><ul><li>Use color conservatively </li></ul><ul><li>Limit the number of colors </li></ul><ul><li>Recognize the power of color as a coding technique </li></ul><ul><li>Ensure that color coding supports the task </li></ul><ul><li>Have color coding appear with minimal user effort </li></ul><ul><li>Place color coding under user control </li></ul><ul><li>Design for monochrome first </li></ul><ul><li>Consider the needs of color-deficient users </li></ul><ul><li>Use color to help in formatting </li></ul><ul><li>Be consistent in color coding </li></ul><ul><li>Be alert to common expectations about color codes </li></ul><ul><li>Be alert to problems with color pairings </li></ul><ul><li>Use color changes to indicate status changes </li></ul><ul><li>Use color in graphic displays for greater information density </li></ul>
  24. 24. Color <ul><li>Color a key component in style </li></ul><ul><li>Color can: </li></ul><ul><ul><li>“ Soothe or strike the eye” </li></ul></ul><ul><ul><li>Add accents to an uninteresting display </li></ul></ul><ul><ul><li>Facilitate subtle discrim. in complex displays </li></ul></ul><ul><ul><li>Emphasize logical organization of information </li></ul></ul><ul><ul><li>Draw attention to warnings </li></ul></ul><ul><ul><li>Evoke string emotional reactions of joy, excitement, fear, or anger </li></ul></ul><ul><li>Design principles and guidelines have long existed for graphics design and broader use </li></ul><ul><ul><li>E.g., red for danger, yellow for caution </li></ul></ul><ul><ul><li>In general adopted for user interface design </li></ul></ul><ul><li>Color can be misused, or, as a design element, done poorly </li></ul><ul><ul><li>Use with understanding and restraint </li></ul></ul>