CSCI 588 Excerpts From “Specification and Design of User Interface Software” On Visual Design

1. CSCI 588 Excerpts From “Specification and Design of User Interface Software” On Visual Design Courtesy Steven M. Jacobs Fall 2007

2. Visual Design • Visual Design • - Page Design • - Content Design • - Typography • - Color • - Icons • - Guidelines • - Visualization

3. Page Design • Effective use of screen real estate • For example, a “Map site” with less than one-half of page being the map, the rest menus, ads and unused white space • Cross-platform design • User controlled navigation • Users accessing the web through devices or varying machine capability and resolution • Flexibility on font selection (otherwise may be unreadable)

4. Page Design (concluded) Graphical excellence and graphics integrity are discussed in Edward R. Tufte's book "The Visual Display of Quantitative Information", Graphics Press, Cheshire CT. He also published "Envisioning Information" and "Visual Explanations". He looks at the theory of data graphics and presents some interesting examples of statistical charts, graphics and tables, with a detailed analysis of how to display quantitative data for quick, precise, effective analysis.

5. Links • Length and number of links subject to debate. • Use site maps • Don’t link everything. • Ordering of links is important and can speed navigation: • - Sequencing (order) • - Clustering (grouping) • - Emphasis (highlighting) • Click here

6. Links (concluded) • Design link titles appropriately. Careful when browsers pop up help text on what the link is. • Color the links: we have evolved to blue links for unvisited and reddish/purple for visited • Some people limit links to keep you on their site. However, this violates what the web is about. • Associative links can be where you get $$$ for the referral. • Frames: “Just say No!” If you must, make them borderless.

7. Cascading Style Sheets • Tries to separate presentation and content • For every site, design the style sheets by a single design group • Majority of good website content creators will not be capable of writing or designing good style sheets without some training • Linked style sheets (kept in a separate file) vs. embedded (in the web page) is more maintainable • Use 1-2 fonts • Do not use absolute font sizes • Avoid using “!important” feature to override user preferences • Use some CLASS names for the same concept when using multiple style sheets.

8. Page Design (response time issues) • Speed up downloads. • Indicate size (time or length of large downloads) • Even if data is downloaded from some external source, delays are delays. • Design with speed in mind. Use less pixels per inch on photos and graphics, i.e. conservative use of graphics. • Know page sizes - the sum of the file sizes for all elements that make up the page • The first screenful - look at what appears first: top of page, menu choices, text first. Avoid complex tables.

9. Visual Design • Visual Design • - Page Design • - Content Design • - Typography • - Color • - Icons • - Guidelines • - Visualization

10. Content Design • Ultimately, users visit web site for content • Be succinct • Write for scanability. • Reading screens is slower than paper. • Use hypertext to split up long information into multiple pages (page chunking), but avoid splitting long text into pieces that make it difficult to read or print. • Spellcheck and grammar check, too. • Welcome letter as a home page is poor idea. • Avoid cute. • OK to highlight important items to catch your eye.

11. Content Design (concluded) • Nielsen, page 110, mentions Mainspring.com web page on case files where there is a timeline to visualize the product life-cycle they are describing. • Use plain language • Develop constructive, concise error messages. • Nielsen does not like “within page” links. • Avoid tall screens (some scroll 4 pages to see entire content) • Writing for the web is writing to be found • Every page should have a title • Write headlines. Same guidance as for journalists: write clearly, not cute, avoid teasers. Avoid “a” and “the” in page titles. First word important. • Legibility: black text on white background improves reading time than the opposite. • Color usage discussed in earlier chart. • Text should stand still.

12. Visual Design • Visual Design • - Page Design • - Content Design • - Typography • - Color • - Icons • - Guidelines • - Visualization

13. Typography Typographic principles in "The Non-Designer's Design Book" by Robin Williams, Peachpit Press, Berkeley CA, covers four key principles of graphics design that apply to screen design: 1. Contrast. The idea behind contrast is to avoid elements on the page that are merely similar. If the elements (type, color, size, line thickness, shape, space, etc.) are not the same, then make them very different. Contrast is often the most important visual attraction on a page. 2. Repetition. Repeat visual elements of the design throughout the piece. You can repeat color, shape, texture, spatial relationships, line thicknesses, sizes, etc. This helps develop the organization and strengthens the unity.

14. Typography 2 3. Alignment. Nothing should be placed on the page arbitrarily. Every element should have some visual connection with another element on the page. This creates a clean, sophisticated, fresh look. 4. Proximity. Items relating to each other should be grouped close together. When several items are in close proximity to each other, they become one visual unit rather than several separate units. This helps organize information and reduces clutter.

15. Typography 3 • Robin Williams and John Tollett developed The Non-Designer’s Web Book which takes these Typographic and print media principles expanding them to “an easy guide to creating, designing, and posting your own web site”. • They cover typography issues and expand it for the web. • One pet peeve I have is that web designers forget the relationship of the printed web page vs. what is displayed. • Williams and Tollett cover issues in a lucid format including checklists to recognize good and bad design (Page 152-154 of their book). • They also address issues such as server selection, preparing images for the web, advanced tips and tricks. Lastly they address testing, revising, uploading and updating your web site.

16. Typography 4 In "Designing Visual Interfaces: Communications Oriented Techniques", by Kevin Mullet and Darrell Sano, Prentice-Hall, they examine techniques to enhance the visual quality of GUI's, data displays, and multimedia productions. They combine communication-oriented graphic design, industrial design, and architecture. Mullet and Sano cover six areas...

17. Typography 5 • Elegance and simplicity. • - Elegant solutions reduce the design to its essence and reveal an intimate understanding of the problem. • - Simplicity is defined in three principles: • * elements of the design must be unified to produce a coherent whole, • * the parts (as well as the whole) must be refined to focus the viewer's attention on their essential aspects, and • * the fitness of solution to the communication problem must be ensured at every level. • Mullet & Sano discuss reducing a design to its essence, regularizing the elements of a design, and combining elements for maximum leverage.

18. Typography 6 • Scale, Contrast and Proportion. • - Scale is the relevant size or magnitude of a given design element in relation to other design elements and the composition as a whole. • - Contrast results from noticeable differences along a common visual dimension that can be observed between elements in a composition. • * Contrast proved the basis for visual distinctions. • - Proportion deals in ratios rather than fixed sizes. • Principles are clarity, harmony, activity and restraint. • They discuss establishing perceptual layers, sharpening visual distinctions and integrating figure and ground.

19. Typography 7 • Organization and Visual Structure. • - Organization does not occurs naturally and must be induced by establishing relationships among components of the design. • - Visual structure ties even highly disparate design elements together and allows them to work in concert toward a common communication goal. • Principles are grouping, hierarchy, relationship and balance. • They discuss using symmetry to ensure balance, using alignment to establish visual relationships, optical adjustment for human vision, and shaping the display with negative space.

20. Typography 8 • Module and Program. These are the development of comprehensive systems of organization. • Principles are focus, flexibility, and consistent application. • They discuss reinforcing structure thorough repetition, establishing modular units, and creating grid-based layout programs.

21. Typography 9 • Image and Representation. • - Imagery is essential for communication. • - Representations introduce meaning to the visual display. • Principles are immediacy, generality, cohesiveness, characterization and communicability. • They discuss selecting the right vehicle, refinement through progressive abstraction, and coordination to ensure visual consistency.

22. Typography 10 • Style. All the characteristics of a particular approach to problem solving that distinguish one design from other solutions of the same problem. • Principles are distinctiveness, integrity, comprehensiveness and appropriateness. • They discuss mastering the style, working across styles, and extending and evolving the style.

23. Typography 11 Another Reference: “The Anatomy of Web Fonts” By Andy Hume http://usabletype.com/ http://www.sitepoint.com/article/anatomy-web-fonts

24. Visual Design • Color

25. Using Color in Textual Displays Design monochrome first. • Basic spatial layout must make sense. • User fonts, type size, inverse video, blinking. • 8% of males are color deficient. • Color displays are not always available. Use color to highlight and motivate. • Highlight specific features or fields. • Show relationship among fields. • Speed recognition with color coding.

26. Using Color in Textual Displays 2 Consider familiar conventions carefully. • Red: danger, stop, failure. • Yellow: warning, information. • Green: safe, go. User color conservatively. • Excessive color is confusing. • Incorrect colors are misleading. • Non-colored relationships may be harder to spot. • Blue text is hard to read. Robertson, IBM.

28. ODID Eurocontrol Air Traffic Control Study display

29. ODID Eurocontrol Air Traffic Control Study display (concluded) http://atm-seminar-97.eurocontrol.fr/graham.htm

30. Color Color is defined in terms of: - Hue: spectral wavelength - Value: lightness/darkness, a.k.a. intensity - Chroma: purity, from gray to most vivid * Variation/mixture of these three factors result in what we see Color...highlights, identifies, differentiates, is appealing, shows quantity/status, can depict logic/relationships Color...disadvantages include color-deficient people (up to 8% Caucasian males) and can cause confusion and fatigue

31. Color 2 From “More Than Just a Pretty Interface”, reprint from CIO Magazine, Aaron Marcus.

32. Color 3 Aaron Marcus' 10 Commandments of Color 1. Use maximum 5 ± 2 colors 2. Use foveal (central) and peripheral colors appropriately, e.g.: - blue is a good background color - red/green in the center of the view - difficult to differentiate "close" colors 3. Use a color area that exhibits a minimum shift in color and/or size if the color area changes in size, e.g.: light letters on dark background, for slides and video 4. Do not use simultaneously high-chroma, spectrally extreme colors, e.g.: - can cause vibrations, illusion of shadows, or "after images"

33. Color 4 5. Use familiar, consistent color codings with appropriate references, e.g.: - red is stop - blue sky or background - yellow warning 6. Use the same color for grouping related elements 7. Use the same color code for training, testing, application and publication 8. Use high-value, high chroma colors to attract attention 9. Use redundant coding of shape, as well as color, if possible 10. Use color to enhance black-and-white information People don't learn more from a color display, but they think they do. Color is more enjoyable

35. Screen Readability Factors Character formation. • Upper vs. lower case. • Proportional fonts. • Point size, font design. • Dot-matrix layout. Spacing. • Inter-character, inter-line. • Justification, margins. Perceptual issues. • Contrast, color, glare. • Distance, screen position. • Bloom, flicker, polarity. Presentation issues. • Display rate, scrolling vs. paging. • Smooth scrolling, scroll bars. • User control, screen size. • Search strategies, highlighting.

36. Screen Design Provide information to support the task. Create meaningful and consistent: • Field labels. • Groups. • Layout of each screen: titles, page numbers, command entry, windows, errors. • Sequencing through multiple screens. Offer error messages at chunk boundaries. Facilitate error correction: • Characters, fields, records, session. Provide lucid instructions and help. See Sid Smith’s Design Guidelines, MITRE, Bedford, MA.

37. Screen DesignNarrative vs. Structured Narrative

38. Screen DesignNarrative vs. Structured 2 Structured Narrative: 8.3s, Structured: 5.0sEstimated savings: 79 person-years (Tullis, HF)

39. Screen DesignRevision 16 NASA controllers and 16 novices…Shuttle guidance, navigation and control system. Current screen Revised screen

40. Screen DesignRevision 2 Results of the Shuttle screen revision study: • Experts worked equally fast on both screens. • Novices worked faster with revised screen. • Experts and novices were more accurate with revised screen. • Novices performed like experts with the revised screen. Burns, Warren & Rudisill

41. Comments on Screen Design? 800px-DECwindows-openvms-v7.3-1

42. Visual Design • Icons

44. Icons Symbolism includes signs, symbols, icons, cursors and other specialized graphics · An icon is something that looks like it means · Icons are clever and appealing · Icons take less space than text · Icons aid in comprehension · Design with consistency, clarity, simplicity, and familiarity. Design issues: - Lexical: size, attributes, color limits available on machine - Syntactic: size, color, patterns, orientation, location, and modular parts - Semantic: abstract/concrete objects - Pragmatic: recognition, esthetics, legibility

45. Icons (continued 2) • Guidelines for icons design: • - Relate verbal and graphical terms/use • - Sketch first • - Sort into styles • - Develop grid • - Simplify appearance • - Make objects recognizable • - Use color with discretion. • Design black & white first. • - Evaluate designs with users • Icons represent ideas graphically using text identifiers (e.g “!”). Icon design is influenced by spatial arrangement, geometric properties, similarities, depth, borders, backgrounds, labels, etc.

46. Icons (continued 3) • Design an icon language, e.g. familiar folder open or closed or the famous recycle bin full or emptied • Watch international distinctions (part of internationalization discussion) and subtleties • Be aware of industry standard symbologies • Test the icons (usability test them) • Horton (Pg. 304) has a checklist to make sure icons are: understandable, unambiguous, informative, distinct, memorable, coherent, familiar, legible, few, compact, attractive and extensible • References: - Graphic Design for Electronic Documents and User Interfaces, by Aaron Marcus • - The Icon Book: Visual Symbols for Computer Systems and Documentation, by William Horton

47. Icons (continued 4) • Icons should be recognizable, memorable and discriminable. What do the Macintosh icons below mean?

48. Icons (continued 5) • Here they are with names!

49. Icons (continued 6) • Use a basic graphics alphabet from which to form icons. • Icons created from alphabet:

50. Icons (continued 7) • Action icons can represent the objects used to perform the actions: