CHAPTER 11: Balancing Function and Fashion

1. Designing the User Interface: Strategies for Effective Human-Computer Interaction Fifth Edition Ben Shneiderman & Catherine Plaisant in collaboration withMaxine S. Cohen and Steven M. Jacobs CHAPTER 11:Balancing Function and Fashion

2. Introduction • Interface design has yet to match the high art of architecture or trendiness of clothing design. • However, we can anticipate that, as the audience for computers expands, competition over design will heighten. • Early automobiles were purely functional, but modern car designers have learned to balance function and fashion.

3. Introduction • User experiences play a critical role in influencing software acceptance • Conversational messages have their limits • Design needs to be comprehensible, predictable, and controllable • Information layout is important • Multiwindow coordination • Designing for large, fast, high-resolution color displays

4. Introduction (cont.) • User experiences play a critical role in influencing software acceptance • The wording of messages is especially important in systems designed for novice users; experts also benefit from improved messages. • Conversational messages have their limits, because people are different from computers and computers are different from people. • Design needs to be comprehensible, predictable, and controllable • Information layout is important. • cluttered displays may overwhelm even knowledgeable users, but with only modest effort we can create well-organized, information-abundant layouts that reduce search time and increase subjective satisfaction.

5. Introduction - Balancing Function & Fashion • Interface design, both graphics and interaction, not yet “high art” (Shneiderman, p.434) • Architecture and fashion are old, interfaces are not • But, not too sure how far analogy goes … • Computer interface design is “young” • Only recently (10-20 years) driven by extreme entrepeneural and style forces • Maybe better, consider that interface design is about software engineering, usability, etc. • Recall, early discussions • E.g., engineering (with explicit resource constraints) • Yet, there is style …. • And it elements can be examined • Where “style” results from the set of decisions made about graphics design, type of interaction form, wording selected, etc., that are made • Recall, guidelines constrain, etc.

6. Style in Web Page and Sites • Very similar styles • But differences in these computer site • Here, for web pages and sites, much is “page design” and “information architecture” design

7. First, GUI (WIMP, Windows, Icons, Menus, and Pointing device) “Look and Feel” • Lots of things user can interact with: • Main WIMP components • windows, menus, icons • Buttons • Dialogue boxes • Palettes • … • Collectively known as widgets • “Window gadgets” • In sum: • appearance + behavior = look and feel

8. Style and “Look and Feel” • Gui “look and feel” • appearance + behavior = look and feel • For web sites – style, as used by L&H and others, is element of “look and feel” Use Google Glass 5:25

9. User Experience, Style, and Success • Again, “balancing function and fashion” has to do with style and “look and feel” • These are design elements, but important in interface design • User experiences play a critical role in influencing software acceptance • Design needs to be “comprehensible, predictable, and controllable” • Users like that … • Conversational messages have their limits • Information layout is important • Multiwindow coordination • Large, fast, high-resolution color displays have potential … • Shneiderman examines, as elements of style: • Error messages • Nonanthropomorphic design • Display design • Window design • Color

10. Error Messages • Error message are one interface element creating “style” • E.g., “Try closing other windows and restarting program.” vs. “Core Dump” • Recall how often mentioned in heuristics, e.g., Shneiderman, Nielsen • Prompts, advisory messages, system responses (including error messages) contribute to system satisfaction - usability • Error messages or diagnostic warnings is critical • Especially when dealing with novices • Often easy and effective way to improve system • Shneiderman suggests 5 elements of error messages: • Specificity • Constructive guidance • Positive tone • User-centered style • Appropriate physical format

11. Balancing Function and Fashion • As the audience for computers expands, competition over design will heighten. • Ex. First cars were purely functional; now they are functional as well as fully customizable. • Recognition of the creative challenge of balancing function and fashion may lead to designers working even harden.

12. Error messages • A key part of interface design strategy of guidance for the user. • Should be consistent across one or multiple applications. • Different messages should not read as if they were written by different authors. • Solution: Error messages and help dialogues should be integrated into the design process and not thrown in at the end

13. Error messages • Phrasing of error messages or diagnostic warnings is critical, especially when dealing with novices • Avoid • imperious tone that condemns user • messages that are too generic (e.g. WHAT? or SYNTAX ERROR) • messages that are too obscure (e.g. FAC RJCT 004004400400) • Specificity

14. Error messages (cont.) • Constructive guidance and positive tone • Messages should, where possible, indicate what users should do to correct the problem • Unnecessarily hostile messages using violent terminology can disturb non-technical users: • FATAL ERROR, RUN ABORTED • CATASTROPHIC ERROR: LOGGED WITH OPERATOR • Negative terms such as ILLEGAL, ERROR, INVALID, BAD should be eliminated or used infrequently

15. Error messages (cont.) • User-centered phrasing • Suggests user controls the interface, initializing more than responding • User should have control over amount of information system provides e.g. screen tips; a help button for context-sensitive help or an extensive online user manual • Telephone company, “We’re sorry, but we are unable to complete your call as dialed. Please hang up, check your number, or consult the operator for assistance”, versus “Illegal telephone number. Call aborted. Error number 583-2R6.9. Consult your user manual for further information.’

16. Error messages (cont.) • Appropriate physical format • use uppercase-only messages for brief, serious warnings • avoid code numbers; if required, include at end of message • debate over best location of messages. E.g. Could be: • near where problem arose • placed in consistent position on bottom of screen • near to, but not obscuring relevant information • audio signals useful, but can be embarrassing - place under user control

17. Error messages (cont.) • Development of effective messages • Messages should be evaluated by several people and tested with suitable participants • Messages should appear in user manuals and be given high visibility • Users may remember the one time when they had difficulties with a computer system rather than the 20 times when everything went well • Recommendations • Increase attention to message design • Establish quality control • Develop guidelines • Have a positive tone • Be specific and address the problem in the user's terms • Place the users in control of the situation • Have a neat, consistent, and comprehensible format • Carry out usability test • Collect user performance data

18. Error messages (cont.)

19. Anthropomorphic Design • Anthropomorphism: • “An interpretation of what is not human or personal in terms of human or personal characteristics” • More simply: “Ascribing human characteristics to non-human things” • Snheiderman: • “Children accept human-like references and qualities for almost any object, from Humpty-Dumpty to Tootle the Train. Adults reserve anthropomorphic reference for objects of special attraction, such as cars, ships, or computers.” • Anthropomorphic computer interfaces: • Benign: • Star Trek variants, … • Malevolent: • HAL in 2001: A Space Odyssey • Contemporary (forthcoming):

20. Anthropomorphic Design • Anthropomorphism • “An interpretation of what is not human or personal in terms of human or personal characteristics” • More simply: “Ascribing(credit) human characteristics to non-human things” • Snheiderman: • “Children accept human-like references and qualities for almost any object, from Humpty-Dumpty to Tootle the Train. Adults reserve anthropomorphic reference for objects of special attraction, such as cars, ships, or computers.” • Anthropomorphic computer interfaces: • Benign: • Star Trek variants, … • Malevolent: • HAL in 2001: A Space Odyssey • Contemporary (forthcoming): • So, there are arguments against:

21. Anthropomorphic Design • Concerns (Shneiderman): • Attributions of intelligence, autonomy, free will, etc. can deceive, confuse, and mislead users • Important to clarify differences between people and computers • Users and designers must accept responsibility for misuse of computers • Although attractive to some people, an anthropomorphic interface can produce anxiety in others: • Computers can make people feel dumb • Computers should be transparent and support concentrating on the task in hand • Locus of control • Anthropomorphic interfaces may distract users • Clippey was intended to provide help suggestions • Amused some, but annoyed many • Disruptive interference • Lacked appropriate emotional expressions • Why Ananova at all? • News reader

22. Anthropomorphic Design (cont.) • Advocates of anthropomorphic interfaces suggest that they may be most useful as: • Teachers? • Salespeople? • Therapists? • Entertainment figures? • An alternative design … • Present (real) human through prerecorded audio or video • Guidelines (Shneiderman): • Be cautious in presenting computers as people. • Design comprehensible, predictable, and controllable interfaces. • Use appropriate humans for introductions or guides. • Use cartoon characters in games or children’s software, but usually not elsewhere • Provide user-centered overviews for orientation and closure. • Do not use 'I' pronouns when the computer responds to human actions. • Use "you" to guide users, or just state facts.

23. Display Design • Display design • Key component in perception of system usability • Includes aesthetics and functionality • E.g., clutter vs. clean Yahoo vs. Google • (and maybe do something about IE toolbar, too) • Screen graphics, graphic design, element positioning, etc. • Narrowly stated: • “Effective display designs must provide all necessary data in proper sequence to carry out task”

24. Display Design • Display design • Key component in perception of system usability • Includes aesthetics and functionality • E.g., clutter vs. clean Yahoo vs. Google • (and maybe do something about IE toolbar, too) • Screen graphics, graphic design, element positioning, etc. • Narrowly stated: • “Effective display designs must provide all necessary data in proper sequence to carry out task”

25. FYI - Display Design - Data Display (cont.) • Field layout • Blank spaces and separate lines can distinguish fields. • Names in chronological order, alignment of dates, familiar date separators. • Labels are helpful for all but frequent users. • Distinguish labels from data with case, boldfacing, etc. • If boxes are available they can be used to make a more appealing display, but they consume screen space. • Specify the date format for international audiences • Other coding categories – background shading, color, and graphic icons • Empirical results • structured form superior to narrative form • improving data labels, clustering related information, using appropriate indentation and underlining, aligning numeric values, and eliminating extraneous characters improves performance • performance times improve with fewer, denser displays for expert users • screen contents should contain only task-relevant information • consistent location, structure, and terminology across displays important • sequences of displays should be similar throughout the system for similar tasks • sequences of displays should be similar throughout the system for similar tasks

26. Nonanthropomorphic design • Concerns • attributions of intelligence, autonomy, free will, etc can deceive, confuse, and mislead users • important to clarify differences between people and computers • users and designers must accept responsibility for misuse of computers • although attractive to some people, an anthropomorphic interface can produce anxiety in others • computers can make people feel dumb • computers should be transparent and support concentrating on the task in hand • mature technology should avoid Mumford's obstacle of animism • anthropomorphic interfaces may distract users • Microsoft’s ill-fated Clippet character was intended to provide help suggestions • Amused some, but annoyed many • Disruptive interference • Lacked appropriate emotional expressions

27. Nonanthropomorphic design (cont.) • Advocates of anthropomorphic interfaces suggest that they may be most useful as teachers, salespeople, therapists, or entertainment figures • An alternative design is to present a human author of a package through prerecorded audio or video • Guidelines • Be cautious in presenting computers as people. • Design comprehensible, predictable, and controllable interfaces. • Use appropriate humans for introductions or guides. • Use cartoon characters in games or children’s software, but usually not elsewhere • Provide user-centered overviews for orientation and closure. • Do not use 'I' pronouns when the computer responds to human actions. • Use "you" to guide users, or just state facts.

28. Display design • Effective display designs must provide all the necessary data in the proper sequence to carry out the task • Mullet and Sano's categories of design principles: • Elegance and Simplicity: unity, refinement and fitness • Scale, Contrast, and Proportion: clarity, harmony, activity, and restraint • Organization and Visual Structure: grouping, hierarchy, relationship, and balance • Module and Program: focus, flexibility, and consistent application • Image and Representation: immediacy, generality, cohesiveness, and characterization • Style: distinctiveness, integrity, comprehensiveness, and appropriateness Function and Fashion Weblink

29. Samples of the 162 data-display guidelines from Smith and Mosier

30. Display design (cont.) • Field layout • Blank spaces and separate lines can distinguish fields. • Names in chronological order, alignment of dates, familiar date separators. • Labels are helpful for all but frequent users. • Distinguish labels from data with case, boldfacing, etc. • If boxes are available they can be used to make a more appealing display, but they consume screen space. • Specify the date format for international audiences • Other coding categories – background shading, color, and graphic icons

31. Display design (cont.) • Empirical results • structured form superior to narrative form • improving data labels, clustering related information, using appropriate indentation and underlining, aligning numeric values, and eliminating extraneous characters improves performance • performance times improve with fewer, denser displays for expert users • screen contents should contain only task-relevant information • consistent location, structure, and terminology across displays important • sequences of displays should be similar throughout the system for similar tasks • sequences of displays should be similar throughout the system for similar tasks

32. Display design (cont.) • Display-complexity metrics • Although knowledge of the users’ tasks and abilities is key to designing effective screen displays, objective and automatable metrics of screen complexity are attractive aids • Tullis (1997) developed four task-independent metrics for alphanumeric displays: • Overall Density • Local Density • Grouping • Layout Complexity

33. Display design (cont.) • Sears (1993) developed a task-dependent metric called layout appropriateness to assess whether the spatial layout is in harmony with the users’ tasks

34. Window DesignGeneral Considerations • Users need to consult multiple sources rapidly • Must minimally disrupt user's task • With large displays, eye-head movement and visibility are problems • With small displays, windows too small to be effective • Multiple window display strategy often appropriate • Move among relatively independent subtasks • Need to offer users sufficient information and flexibility to accomplish task, while reducing window housekeeping actions, distracting clutter, eye-head movement • opening, closing, moving, changing size • time spent manipulating windows instead of on task • Can apply direct-manipulation strategy to windows

35. Window DesignCoordinate Windows • Coordinating multiple windows • Shneiderman - Next generation of window managers? • Coordinate windows • Windows appear, change contents, and close as a direct result of user actions in the task domain

36. Window DesignCoordinate Windows • Coordinating multiple windows • Shneiderman - Next generation of window managers? • Coordinate windows • Windows appear, change contents, and close as a direct result of user actions in the task domain • Such sequences of actions can be established by designers, or by users with end-user programming tools • A careful study of user tasks can lead to task-specific coordinations based on sequences of actions • Important coordinations: • Synchronized scrolling • Hierarchical browsing • E.g., opening toc in sidebar has contents in main • Opening/closing of dependent windows • Saving/opening of window state

37. Window DesignMS Task Gallery • Microsoft research project • A window manager • Design Premise • 3D virtual environments can more effectively engage spatial cognition and perception • Goals • Task Management • Simultaneous Document Comparison • Features • 3D Graphics • Ability to host any 2-D Windows Application without any change.

38. Window DesignMS Task Gallery • “Palette” of windows • 3D navigation • Window controls Move Bring Ordered Loose Add to Maximize Close Forward Stack Stack Selection

39. FYI - Window Design – Image Browsing(more in Information Visualization) • Image browsing • Like hierarchical browsing • Work with large images • Detail + Context • Overview in one window (context), detail in another (focus) • Field of view box in the overview • Panning in the detail view, changes the field of view box • Matched aspect ratios between field of view box and the detail view • Zoom factors: 5-30 • Larger suggests an intermediate view is needed • Semantic zooming • Side by side placement, versus fisheye view • The design of image browsers should be governed by the users’ tasks, which can be classified as follows: • Image generation • Open-ended exploration • Diagnostics • Navigation • Monitoring

40. FYI – Win. Design - Personal Role Management • Personal role management • Role centered design emphasizes users’ tasks, rather than the applications and documents • Vision statement • What you’re doing and using • Set of people • Task hierarchy • Schedule • Set of documents • The requirements for personal role management include: • Support a unified framework for information organization according to users' roles • Provide a visual, spatial layout that matches tasks • Support multi-window actions for fast arrangement of information • Support information access with partial knowledge of its nominal, spatial, temporal, and visual attributes and relationships to other pieces of information. • Allow fast switching and resumption among roles • Free user's cognitive resources to work on task domain actions rather than interface domain actions. • Use screen space efficiently and productively for tasks.

41. FYI – Win. Design - Personal Role Management Figure 5: An illustration of later implementation of a University Professor role manager prototyped with Elastic Windows. This professor is advisor to a number of graduate students in a number of research projects (3 recent ones and 5 earlier projects are represented here). He teaches two courses this semester at the university (CMSC 434 and 828S), is industry liaison to three companies, and has personal duties.

42. Color • Color a key component in style • Color can: • “Soothe or strike the eye” • Add accents to an uninteresting display • Facilitate subtle discrim. in complex displays • Emphasize logical organization of information • Draw attention to warnings • Evoke string emotional reactions of joy, excitement, fear, or anger • Design principles and guidelines have long existed for graphics design and broader use • E.g., red for danger, yellow for caution • In general adopted for user interface design • Color can be misused, or, as a design element, done poorly • Use with understanding and restraint • (similarly with animation, http://www.globalaigs.org/

43. Web page design The top ten mistakes of web-based presentation of information (Tullis)

44. Web page design (cont.) • Numerous guidelines for web designers are available on the Web and can be incorporated into your design process to ensure consistency and adherence to emerging standards. • Examples include, but are not limited to: • The Java Look and Feel Design Guidelines, Second Edition (Sun, 2001) • Sun’s Web Design Guide (Sun, 2008) • The National Cancer Institute’s Research-Based Web Design & Usability Guidelines (NCI, 2008) • The World Wide Web Consortium’s Web Accessibility Initiative (WAI, 2008) • The Web Style Guide (Lynch and Horton, 2008) • There are numerous web sites that address web design, some of which were created as companions to relevant books: • Web 2.0 How-To Design Guide (Hunt, 2008) • Web Bloopers (Johnson, 2003) • KillerSites.com (Siegel, 1997)

45. Web page design (cont.) Mash-ups are web pages or applications that integrate complementary elements from two or more sources (for example, Craigslist and Google Maps™

46. Window design • Introduction • Users need to consult multiple sources rapidly • Must minimally disrupt user's task • With large displays, eye-head movement and visibility are problems • With small displays, windows too small to be effective • Need to offer users sufficient information and flexibility to accomplish task, while reducing window housekeeping actions, distracting clutter, eye-head movement • opening, closing, moving, changing size • time spent manipulating windows instead of on task • Can apply direct-manipulation strategy to windows • Rooms - a form of window macro that enables users to specify actions on several windows at once

47. Window design • Coordinating multiple windows • Designers may break through to the next generation of window managers by developing coordinate windows, in which windows appear, change contents, and close as a direct result of user actions in the task domain • Such sequences of actions can be established by designers, or by users with end-user programming tools • A careful study of user tasks can lead to task-specific coordinations based on sequences of actions • Important coordinations: • Synchronized scrolling • Hierarchical browsing • Opening/closing of dependent windows • Saving/opening of window state

48. Window design Hierarchical browsing has been integrated into Windows Explorer to allow users to browse hierarchical directories, into Outlook to enable browsing of folders of e-mails and into many other applications. Hierarchical browsing in the XperCASE tool example here (now called EasyCASE with EasyCODE). The specification is on the left. As users click on components (DoubleAttrWebAdapter), the detail view appears on the right in a Nassi-Shneiderman chart.

49. Window design • Image browsing • A two-dimensional cousin of hierarchical browsing • Work with large images • Overview in one window (context), detail in another (focus) • Field of view box in the overview • Panning in the detail view, changes the field of view box • Matched aspect ratios between field of view box and the detail view

50. Zoom factors: 5-30 • Larger suggests an intermediate view is needed • Semantic zooming • Side by side placement, versus fisheye view