csci 588 excerpts from “specification and design of user interface software” on visual design

1-1

CSCI 588Excerpts From

“Specification and Design of

User Interface Software”On Visual Design

Courtesy Steven M. Jacobs

Fall 2007

1-2

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

Visual Design

1-3

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)

Page Design

1-4

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.

Page Design (concluded)

1-5

• 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

Links

1-6

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

Links (concluded)

1-7

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

Cascading Style Sheets

1-8

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

Page Design (response time issues)

1-9


Visual Design

1-10

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.

Content Design

1-11

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.

Content Design (concluded)

1-12


Visual Design

1-13

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.

Typography

1-14

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.

Typography 2

1-15

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

Typography 3

1-16

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

Typography 4

1-17

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

Typography 5

1-18

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

Typography 6

1-19

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

Typography 7

1-20

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

Typography 8

1-21

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

Typography 9

1-22

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

Typography 10

1-23

Another Reference: “The Anatomy of Web

Fonts”

By Andy Hume

http://usabletype.com/

http://www.sitepoint.com/article/anatomy-web-fonts

Typography 11

1-24

• Visual Design– Color

1-25

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.

Using Color in Textual Displays

1-26

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.

Using Color in Textual Displays 2

1-28

ODID Eurocontrol Air Traffic Control Study display

1-29

ODID Eurocontrol Air Traffic Control Study display

(concluded)

http://atm-seminar-97.eurocontrol.fr/graham.htm

1-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

1-31

Color 2

From “More Than Just a Pretty Interface”,

reprint from CIO Magazine, Aaron Marcus.

1-32

Aaron Marcus' 10 Commandments of Color

1. Use maximum 5 ± 2 colors2. 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"

Color 3

1-33

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

Color 4

1-35

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.

Screen Readability Factors

1-36

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.

Screen Design

1-37

Narrative

Screen DesignNarrative vs. Structured

1-38

Structured

Narrative: 8.3s, Structured: 5.0sEstimated savings: 79 person-years (Tullis, HF)

Screen DesignNarrative vs. Structured

2

1-39

Current screen

16 NASA controllers and 16 novices…Shuttle guidance, navigation and control system.

Revised screen

Screen DesignRevision

1-40

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

Screen DesignRevision 2

1-41

Comments on Screen Design?

800px-DECwindows-openvms-v7.3-1

1-42

• Visual Design– Icons

1-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

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

1-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

1-47

• Icons should be recognizable, memorable and discriminable. What do the Macintosh icons below mean?

Icons (continued 4)

1-48

• Here they are with names!

Icons (continued 5)

1-49

• Use a basic graphics alphabet from which to form icons.

• Icons created from alphabet:

Icons (continued 6)

1-50

• Action icons can represent the objects used to perform the actions:

Icons (continued 7)

1-51

• Object icons can be used to distinguish different classes of objects.– - Useful if you have relatively few

objects of any class.

Icons (continued 8)

1-52

• Object icons can be used to distinguish different classes of objects.– - Not as useful when all objects are of

the same class!

Icons (continued 9)

1-53

• Other examples, e.g. calendar icons

Icons (continued 10)

1-54

• Another examples, e.g. intranet icons of (you tell me…)


1-55

• They fixed it later…


1-56

…with HELP text


1-57

http://www.flickr.com/photos/elbewerk/376285766/


1-58

Icons (concluded 15)

Group Task Room Task Security

Devices Messages Scheduled Task

Shortcuts Help

Comments? (from a student project)

Deepak SinghParas MamaniaMahesh Bhat

1-59http://www.newegg.com/Info/IconGlossary.aspx

Icon Glossary

1-60

• Here’s the classic Macintosh Icon Editor application:

The cursor is used to turn pixels (b/w) in the left, blown-up view on and off; the smaller true-scale version of the icon is shown to the right.

Icons Traditional Editor

1-61

• And here is an updated icon editor for Windows, the famous “Microangelo” (a good pun)

Icons More Advanced Editor

1-62

Icon editorFrom http://www.icon-editor.net/

1-63

Icon editor 2From http://www.iconcool.com/

1-64

Icon editor 3From http://www.axialis.com/

1-65

• If you wanted to search for something, which icon would be most intuitive?

Windows XP search dialog on the left, vs. Mac OS X Sherlock tool icon on the right. Another name for this slide could be “what

does a dog have to do with search, doggone it!”

vs.

Icons Which do you prefer?

1-66

Automatic Icons

1-67

New MS Office Look…

http://www.microsoft.com/office/preview/ui/overview.mspx

http://www.microsoft.com/office/preview/ui/video.mspx

Contextual tabs

Ribbon

1-68

New MS Office Look… (continued)

From Jakob Neilsen’s Alertbox e-newletter Oct. 10, 2005 on www.useit.com:

• Macintosh-style WYSIWYG interaction design has reached its limits.

• Displaying commands in menus, toolbars, and dialog boxes works with a limited number of elements.

• Microsoft Word 2003 has 1,500 commands, and users typically have no clue where to find most of them.

• Another WYSIWYG downside is that it forces too much manual labor on users and requires a stretch of imagination to envision results in advance.

1-69

New MS Office Look… (concluded)

• The next version of Microsoft Office (code-named "Office 12") will be based on a new interaction paradigm called the results-oriented user interface.

• The new interface displays galleries of possible end-states, each of which combine many formatting operations.

• From this gallery, you select the complete look of your target -- say an org chart or an entire document -- and watch it change shape as you mouse over the alternatives in the gallery.

• The interaction paradigm has been reversed; it's now What You Get Is What You See, or WYGIWYS.

1-70

• Are everyday sounds designed to convey information about events (in the system) by analogy.

• What are they good for?– Increased redundancy of the interface helps user learn

and remember.– Can be parameterized to reflect relevant dimensions.

E.g. File trash can.

• Other issues in design of ear-cons– Mapping: How should sounds be mapped to events?– Annoyance: How can we use sounds without driving the

users crazy?

Auditory icons (ear cons)

1-71

• Types of Mapping– Iconic mapping: The display resembles a real world object

in a lawful way. • Easiest to use• E.g. delete/drop file into trash-can: Thud of something

falling into a bin. Small file v/s Larger file (louder thud).

– Metaphoric mapping: The icon forms an analogy of a real world metaphor for that event (or action).

• Easy to use• E.g. (KDE) Close window (Shutter pulled down)

– Symbolic mapping: The icon is an arbitrary sound for an event

• User learns with time.• E.g. beep • Hardest to use• Used when metaphoric or iconic icons don’t exist or are

hard to find.

Auditory icons (design)

1-72

• UI for a voice based navigation aid system. • Provide directions to the user based on his chosen

destination. • Visual senses of user are engaged in another activity.

E.g. driving a car or a visually impaired person.• Tracks the user’s position continuously- act as a

guide, comments about current location. • Provide user with information on current location and

alert him of dangerous situations. • The main UI of the system will run on a

handheld/portable device and is voice based. • Another element of our UI will be a sensor embedded

with the user.

Auditory icons

1-73

Purpose Sound Description

Notify the user of a danger (blind person colliding with a wall)

Siren is metaphorical ear-con. Commonly used as an indication of something danger in the world

Notify a user of an erroneous action he has performed

Horn metaphorical ear-con. Commonly used in the “car-world” to notify the driver of an error.

Notify an user to turn Clicking turn lights: metaphorical ear-con

Ask the user to stop Sound of a brake : metaphorical ear-con

Indicate user to go straight Marching soldiers give a perception of walking straight: metaphorical ear-con

Remind the user to perform an action

A chime from windows quiver of ear-cons. Symbolic icon.

Present some Information of interest to user

The beep is a symbolic ear-con. Mail clients to notify a new email

Auditory icons (examples)

Any ideas for more intuitive icons? information and reminder??

1-74

• Principled icon design based to increase mapping and reduce annoyance

• We have designed our icons to be metaphorical- with an analogy to the “car” world.

• Where not possible we have used familiar symbolic icons.

• Ear-cons simple, straightforward and short: Avoid annoyance

• Not considered “psychoacoustics” of sounds– Frequency, amplitude, speed, rhythm, pitch etc affects

user perception. E.g. higher frequency sounds greater urgency

Reference: http://www.billbuxton.com/AudioUI06icons.pdf

Auditory icons:Case Study

1-75

References1. "AUDITORY INTERFACES: The Use of Non-Speech Audio at

the Interface". Available at:http://www.billbuxton.com/Audio.TOC.html

2. Ramakrishna Soma, discussion on “Auditory icons” from a former student team project & CSCI 588 T.A.

Auditory icons (concluded)

1-76

• Military Standard symbols: MIL-STD-2525B with change2 DoD Common Warfighting Symbology 07_March_07.pdf

• Medical symbols: http://www.designofsignage.com/application/symbol/hospital/index.html

• U.S. National Park Service symbols: http://www.get2testing.com/Pics_NPS_E.htm

Symbols

1-78

• Site Design• Website Performance• Guidelines• Visualization

1-79

Once users arrive at a page, they can usually figure out what to do there. If only they would take a little time.

• One study: start from home page and solve a problem. Users had to find a specific page to get an answer on the web site.

- They only could do it 42% of the time. - Another study had an even lower score!

Web site usability suffers once we leave the home page. The flagship of the site is designed differently from the remaining pages.

Site Design

1-80

Avoid splash screens.

The site’s web pages should answer: “What does this site do?” and provide:

1) summary of site and main contact areas2) summary of important news and promotions3) search

For example, compare United Airlines and American Airlines home pages next.

Metaphors can be overused.

Site Design 2

1-81

American Airlines Web Sitewww.aa.com

1-82

United Airlines Web Sitewww.united.com

1-83

Strong Metaphor example 1

1-84

Strong Metaphor example 2

1-85

You Tube Design 1http://www.time.com/time/personoftheyear/2006/photoessay/youtube/

1-86

You Tube Design 2http://www.time.com/time/personoftheyear/2006/photoessay/youtube/

1-87

Metaphors can be overused but we understand the concepts. e.g. a TV screen border around a video window or a shopping cart!

Navigation comes up again in site design.You want to be able to quickly answer:

Where am I?Where have I been?Where can I go?

Site maps help

Site Design

1-88

Navigation breadth vs. depthReducing navigation clutter

- aggregation- summarization- filtering- truncation- example based representations

Search improvementsDesign URL nameSingle item represents collection of smaller onesCan use visualizationShow what is really necessaryShow first few keywordsShow examplesVariety in style in search engines show that there is still room to grow

Site Design (concluded)

1-89

• 72 pixels/inch graphics OK. More pixels do not buy more clarity, but affect download.

• Don’t put sound effects on the home page.

• There are methods to get your site picked up by search engines better and faster.

• Use simple graphics.

• Use limited colors with, e.g. 216 colors on the palette, not special colors.

• Pick color by number rather than by name (faster).

• Specify graphic size so the system does not have to guess to display it.

• Use graphic tools (PhotoShop, Paintshop) to resize images. HTML tool shrink the image, not the file size.

Web site performance trade-offs

1-90

• Use colors consistently for product recognition, especially primary colors with high contrast. For some products you think of their color right away, like IBM blue, Sun Microsystems lavender or Kellogg’s red “K”

• GIFs vs. JPGs (line art, buttons, etc. vs. more complex colors)

• Be a bit bandit! Reduce number of colors to speed things up.

• In animated GIFs (series of still pictures, reduce the number of layers of pictures. Watch the number of shots to improve performance).

• Animation running a long time can be annoying.

• Watch for “browser bloat”. One author strips out unnecessary text that HTML tools generators create.

• Use HTML validators.

Web site performance trade-offs 2

1-91

• Type the last “/”. Speeds up the detection of the end of a URL.

• Use Netmechanic.com to check performance.

• Cache graphics on clients machine. Use same filename for graphics used in multiple pages.

• Pre-load graphics for frequently followed links.

• The first line of page should include the !DOCTYPE tag to specify HTML version used in page.

Web site performance trade-offs 3