1. 1 Balancing Form and Function  Form and Function  High Usability  Aesthetically Pleasing  Error Messages  Non-anthropomorphic Design  Design Display Guidelines  Display Efficiency  Display Complexity  Multiple Windows  Image Browsing  Use of Color

2. 2 Balancing Form and Function  Error Messages  Capture errors as a basis for design enhancements to avoid errors  Error messages should provide constructive guidance in a positive tone  Specificity Be specific and precise Indicate what the user needs to do Choose user center phrasing –SYNTAX ERROR vs. Unmatched left parenthesis –ILLEGAL ENTRY vs. Type first letter: Send, Read, Drop –INVALID DATA vs. Days range from 1 to 31 –BAD DATE vs. Drop-off date must come after pickup date  Maintain consistent grammatical forms, terminology and abbreviations

3. 3 Balancing Form and Function  Error Messages  Maintain consistent visual format and placement Mixed case Avoid error codes, or place at the end of the message Location –On the display near the error –On the bottom of the display –Dialog box –Solution: allow the user to customize the placement  Developing effective messages Pay more attention to message design Quality control with programmers, users and usability specialists Develop guidelines Usability tests Record frequency of error messages

4. 4 Balancing Form and Function  Examples

5. 5 Balancing Form and Function

6. 6

7. 7  Non-anthropomorphic Design  Computers communicating like people  The user should feel they are in control  Such interfaces are distracting and create anxiety  The computer should be transparent  Is this guy annoying?  Computer messages Poor: I will begin the lesson when you press RETURN Better: You can begin the lesson by pressing RETURN Better: To begin the lesson, press RETURN –Avoids overuse of pronouns http://www.youtube.com/watch?v=jQggTfZIstk&feature=related

8. 8 Balancing Form and Function  Non-anthropomorphic Design  Interfaces should neither compliment or condemn users, but provide comprehensible feedback to assist users in achieving their goals  Human author to guide through training is sometimes acceptable to end users

9. 9 Balancing Form and Function  Display Design Guidelines  Provide all necessary data in the proper sequence  Provide meaningful groupings with labels familiar to the users  Justifications (left/right)  Alignment of decimal points  Do not require the user to convert data  Order lists alphabetically if no other order applies  Left-justify columns of alphabetic data to permit rapid scanning  Of course there many more…

10. 10 Balancing Form and Function  Empirical Results  Expert users may prefer dense displays  Performance times may be shorter with fewer but denser displays than with more numerous but sparse displays  This is especially true for tasks that require comparison of information across displays  Staggers (1993) A study of nurses reading laboratory reports on three different screens –Three-screen version –Two-screen version –Densely packed one-screen version –Results: Search times dropped by half over five blocks for novice compared to experience users –Due to a strong learning effect –High cost of switching windows and reorienting

11. 11 Balancing Form and Function  Display-complexity metrics (Tullis 1997)  Overall density – the number of filled character spaces as a percentage of total spaces available  Local density – the average number of filled character spaces in five degree visual angle around each character At normal viewing distances from displays, this area translates into a circle approximately 15 characters wide and 7 characters high  Grouping – the number of groups of “connected” characters  Layout complexity – based on information theory, the distribution of horizontal and vertical distances of each label and data item from a standard point on the display  Studies indicate that effective display design contains a middle number of groups (6 to 15) that are neatly laid out, surrounded by blanks, and similarly structured  Grouping reduces scanning time

12. 12 Balancing Form and Function  Display-complexity metrics – Bad Design

13. 13 Balancing Form and Function  Display-complexity metrics – Good Design

14. 14 Balancing Form and Function  Display-complexity metrics – Efficiency Initial Focus Structure data based on relationship between objects Minimize eye movements

15. 15 Balancing Form and Function  User preferred web sites based on the following criteria (Ivory and Hearst – Webby Awards)  Columnar organization  Limit animated graphical ads  Average link text was kept to two to three words  San serif fonts were used  Varied colors were used to highlight text as well as headings Columns

16. 16 Balancing Form and Function  Window Design  If window-housekeeping actions can be reduced, users can complete their tasks more rapidly, and with fewer mistakes  Coordinating multiple windows  Example: Insurance Claims Processing Agent retrieves information for a patient –Primary window: patient address, TN, MRN –Second window: patient’s medical history –Third window: the record of previous claims –Synchronous scrolls across related windows »E.g., medical history window with the previous claims window –When finished, data in all windows is saved and all windows closed

17. 17 Balancing Form and Function  Coordinating multiple windows  Coordination: objects changing on user actions  Synchronized scrolling: scroll bars from two different windows are synchronized  Hierarchical browsing: e.g., one window contains a table of contents, and a second window the chapter is displayed

18. 18 Balancing Form and Function  Coordinating multiple windows  Opening/closing of dependent windows  Saving/opening of window state “Save screen layout as…” Primary Window 2 nd window 3 rd window 4 th window

19. 19 Balancing Form and Function

20. 20 Balancing Form and Function  Image Browsing  Hierarchical view: users see an overview in one window and details in the second window Zoom Factor: Magnification from the overview to the detail view (often the zoom factor is between 5 and 30) Overview

21. 21 Balancing Form and Function  Image Browsing - Map View to Street View

22. 22 Balancing Form and Function  Image Browsing  Fisheye views http://www.youtube.com/ watch?v=EECi-OYXQqw

23. 23 Balancing Form and Function  Image Browsing  The design should be governed by the user’s task Open-ended exploration: browse to gain and understanding of the image Diagnostic: scan for flaws Navigation: seeking details (e.g., highway) Monitoring: watch in overview mode, then zoom in on details

24. 24 Balancing Form and Function  Personal Role Management  Different views for different roles  Example: Student Faculty

25. 25 Balancing Form and Function

26. 26 Balancing Form and Function  Color – Form and Function  Soothe or strike the eye  Make a display more interesting  Evoke emotion  Provide discrimination of objects in a complex display  Facilitate the logical organization of information  Use to indicate abnormal conditions  Principles regarding the use of color  Use color conservatively: overuse can lead users to seek relationships that do not exit  Limit the number of colors: between 4 and 7  Consider the power as a coding method: e.g., red = warning, green = stable state

27. 27 Balancing Form and Function  Principles regarding the use of color  Match color coding to the task Accounting: if accounts overdue are red  Design for monochrome first Forces to layout the information in a logical pattern  Color deficiency 8% of males have some type of color-blindness Use double encoding  Use for formatting Police cars responding to emergencies coded red  Be consistent in color coding

28. 28 Balancing Form and Function  Principles regarding the use of color  Consider problems with color pairings Red on Blue Blue on Red Yellow on Purple Yellow on White lacks contrast Very difficult to read Eye muscles are strained attempt to create a sharp focus Difficult to read

29. 29 Balancing Form and Function  Principles regarding the use of color  Use color to indicate status changes Applications to process control systems  User color for graphic data displays