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

2. 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)

3. 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)

4. Presentation Controls
Provide data
Provide instructions
Structure a screen

9. 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?

10. Display Static Values

11. Display Dynamic Values

12. Display Relative Values

13. Historical Data Matrix 3-D surface Line graph 1996 1997 1998
Slide 13
Historical Data
Customer satisfact 7 8 9
Employee satisfact 6 4 8
Sales
Profit
. . .
Matrix
Sales
Cust.
Empl.
Profit
3-D surface
Sales
Cust.
Empl.
Profit
Line graph

14. Highlight Textual Info

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

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

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

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

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

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

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

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

23. Word Shape
Lowercase words have more distinctive shapes

24. Line Length and Spacing

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

26. Alignment

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

28. Scrolling vs. Paging
Paging
Scrolling
Consistent link location.

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

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

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

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

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

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

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