Ch 11-12: Info Presentation Yonglei Tao School of Computing and Info Systems GVSU

Selected Guidelines The best interfaces combine powerful yet accessible functionality with a pleasing appearance. Aesthetic appeal can be substantially enhanced by attention to basic graphical design principles concerning spatial grouping, contrast, and three-dimensional representation. (Microsoft Guide)

Intuitiveness The screen becomes a visual metaphor for the real world. Objects displayed on the screen can be manipulated in ways familiar objects in the real world are manipulated. The user interface behaves as the user expects based on his or her experience with objects in the real world. (NeXTSTEP User Interface Guidelines) Define meaningful objects that the user needs, the relationships among the objects, and the properties and behaviors the objects should have. (IBM CUA Guide)

Presentation Controls Provide data Provide instructions Structure a screen

Questions to Ask for Data Presentation Is the user interested in precise information or in the relationships between different data values? How quickly do the values change? Does the user need to know the change in a value immediately? Will the user take some action in response to a change in information? Does the user need to interact with the displayed information via direct manipulation interface?

Display Static Values

Display Dynamic Values

Display Relative Values

Historical Data Matrix 3-D surface Line graph 1996 1997 1998 Slide 13 Historical Data 1996 1997 1998 Customer satisfact 7 8 9 Employee satisfact 6 4 8 Sales 12.5 14.5 15.8 Profit 2.7 1.9 0.8 . . . Matrix 96 97 98 Sales Cust. Empl. Profit 3-D surface 96 97 98 Sales Cust. Empl. Profit Line graph

Highlight Textual Info

Provide Effective Feedback All user actions must be reacted to in some way Allow to review, change, or undo before an action is performed Confirm destructive actions Feedback shapes human performance Also helps users learn about the interface

Common Feedback Types Visual feedback Audible feedback Graphical Depressed buttons, grayed fields, highlighted text, control with focus, pointer shape Textual Message boxes, message bar, and progress indicators Error processing Error messages Audible feedback

Response Time Feedback to the user from an action must occur within certain time limits Excessive delays are annoying, cause user concern, and impair productivity The optimum response time is dependent upon the task Satisfaction with response time is a function of expectation Dissatisfaction with response time is a function of one’s uncertainty about delay

Dealing with Time Delay Wait up to 10 seconds Present a “busy” signal until the operation is over Wait of 10 seconds to 1 minute Display a progress indicator Wait over 1 minute Display an estimate of the length of the wait Present an acknowledgement when it is over Long, invisible operations Allow the user to start a new activity while waiting

Error Processing De-emphasize errors Provide clear non-offensive message boxes Provide suggestions for correcting errors Incorporate error codes and messages into common library for easier maintenance Provide a modeless error box to display multiple error messages when an immediate response is not required

Audible Feedback Alert user of important events, such as task completion, input acceptance, and error occurrences Use sparingly Beeps can be annoying Overuse can reduce meaningfulness of sound Sound is transitory User should be able to turn off sound and adjust volume

Discussion Problem How to present the arrival/departure information at an airport? Identify data characteristics, tasks, and design issues

Text Reading Purposes Reading from screens vs. paper Continuous Scanning Reading from screens vs. paper

Word Shape Lowercase words have more distinctive shapes

Line Length and Spacing

Pattern of Eye Movement during Reading It shows words are the basic unit of reading. A dot indicates that the user spent time on a word as a whole, rather than reading letter by letter.

Alignment

Contrast Black and white have the highest contrast adding any color will reduce the contrast Luminance contrast is more significant than color contrast

Scrolling vs. Paging Paging Scrolling Consistent link location.

A New Logo for Google now before What is the difference and why is the change necessary (more and more people reach Google via their mobile devices) now before

Fonts Serif Sans serif Cursive Cursive text requires high-resolution screens

Web Fonts Serif fonts suffer reductions in legibility at low point sizes Sans-serif fonts maintain legibility at small sizes and are designed to facilitate reading on the Web Georgia, Verdana, Trebuchet, Tahoma, and MS Sans Serif

Text and Messages Sentences and messages must be Minimizing ambiguity Brief and simple Directly and immediately usable An affirmative statement In an active voice In the temporal sequences of events Minimizing ambiguity Allowing easy, correct, and fast interpretation

From MS Manual for Style abort - use end to refer to communication, quit for programs, and stop for hardware operations button - use “click Cancel” instead of “click the Cancel button” check - use select or clear to refer to a check box choose - use click or double-click instead legal - use allowed instead, except when referring to matters of law error message - use message instead accelerator - use shortcut instead

Presenting Text Use plain and simple fonts Choose a minimum point size of 12 to 14 Include no more than 40 to 60 characters on each line Use headings to introduce a new topic Use lists to present facts Emphasize things by positioning, boxes, bold typefaces, and indented margins

Guidelines for Info Design “Outdated or incomplete information is to be avoided” (Nielsen) It creates a poor impression with users Especially important for webpages