1. Note 19: UX 4 Copyright © Robert W. Hasker, 2005-2015
Based on About Face 3: Cooper, Reimann, Cronin

2. Visual Interface Design
About Face 3: Ch. 14
How to organize elements on page?
Reasonable:

3. a somewhat chaotic interface
No clear flow
Obscure items
How many people care about morpheus?
“Advanced” allows selecting “PCL Optimization”
“Summarize Comments” is actually a switch

4. a somewhat chaotic interface
In contrast:

5. Visual Interface Design
So how to organize elements on page?
Clearly a sub-discipline in it's own right
Need understanding of graphic arts design!
Domain where specialized training is needed
Unfortunately(?), SW developers are often called upon to make decisions in this arena.

6. Interface Building Blocks
Obvious element: position
But are other elements important, useful?
Shape
1st thing used to recognize objects
Paradoxically: requires careful attention of view
Example: distinguish between iPhoto, iWeb on Mac:
Similar textures
Similar colors
Shape not obvious

7. Interface Building Blocks
Another example of difficulty of seeing shape quickly: icons on Office Picture Manager:
Rotation icons:
have to examine closely
Selecting view:
Simple to interpret
Suggests texture may be more important than shape!

8. Size Can organize by size
Large objects: draw attention, suggest foreground
An example of an element with a built-in hierarchy
MSWord: hints about what to select first in themes, page layout
Newspaper: larger fonts suggest increased importance

9. Value Lightness/darkness Value contrast: quickly perceived Is ordered
See Wikipedia picture to right
Value contrast: quickly perceived
good tool for drawing attention to an element
Is ordered
Darker typically means “more”
deeper water, higher population, more severe storm

10. Hue Red, yellow, orange - our basic notion of color
Differences in hue draw attention quickly
Good way to convey information implicitly:
red = stop/danger, white = purity/peace
But these are Western concepts
China: red = good luck; Asia: white = funeral/death
Color blindness is quite common,
can't depend on people being able to differentiate, especially red/green and blue/green
Use judiciously
Be especially cautious for international products

11. Orientation Directional information
Often difficult to perceive
Old GhostView option panel 
Light buttons: in = pushed
Dark buttons: out = unselected
Checkbox: positive feedback
Can be useful, but handle with care

12. Texture and Position Texture Position Cannot convey a lot of meaning
Ridges/bumps: something can be "gripped" (dragable) –
Eg: see bottom right of Firefox window
Drop shadows on buttons: more “clickable”
Position
Ordered, quantitative
Useful to convey information about hierarchies
Can reflect real world relationships

13. Interface Building Blocks (summary)
Elements:
Shape
Size
Value
Hue
Orienation
Texture
Position
Usually: combination
Vary shape with value, position to emphasize relationships
Color: a powerful tool for setting “mood”
See Color Harmony Workbook
[Rockport Publishers]

14. Principles: grouping, hierarchy
How to use visual elements to group, structure
Hierarchy: often to distinguish between primary, secondary controls
Based on stories!
Hue, saturation, value, size, position give hierarchy
Important elements
One of larger, greater contrast, more saturated
Groups: set by position, hue
Minimize differences within groups, maximize between groups

15. Grouping by Layering Another tool: layering Cues for background:
Separates foreground from background
Focuses viewer on key elements
Cues for background:
Small elements
Dark, cool colors
Foreground cues:
Large elements
Position
Light, warm, saturated colors

16. Identifying Layering Basic tool: squinting
Used by quilters to see structure
Important elements stand out
Close an eye, squint at screen
What pops out?
What is grouped?
Alternatives: use mirror, view upside down

17. Visual structure, flow at ea. level
Basic tool: grid
Align labels, controls w/in group
Grid structure for large elements, too (panels, screens)
Example: Mozilla print dialog

18. Flow Western countries: left to right, top to bottom
Eye should flow naturally across the form
Below: Cooper, Fig. 14-3
Western countries: left to right, top to bottom
Generally, minimize eye movement

19. Vertical, horizontal, diagonal
Symmetry
Balance expected in displays
Vertical, horizontal, diagonal

20. Spatial harmony, whitespace
Harmony: pleasing ratios
classic example: Golden Ratio: phi = (sqrt(5) + 1) / 2 or about 1.618
Claim: used in Parthenon – see here
Common ratio in nature as well
Parthenon from (allposters)
Generally: want pleasing ratios
Include whitespace, but
Don’t be wasteful!
Rule: avoid nearly square, double square

21. Icons Cultural differences & images Guidelines
Red: not a warning to Chinese
Stop signs: US only
Thumbs up: insulting in Turkey
“Ok” sign: insulting in Brazil, other countries
Pigs: inappropriate in middle east
Guidelines
Combine action & object (verb + noun)
Verb alone ambiguous (eg, scissors for “cut”)
Show results: eg print icon w/ page coming out

22. More on Icons Keep them simple – minimal room for detail Consider
photorealistic
Mac icons:
“Show all”,
Network,
Startup vague
Hard drive,
light bulb,
switch: obscure
Does realism help?

23. Avoid Visual Noise, Clutter
Visual noise: superfluous visual elements distracting user from goals
Clutter: trying to make everything available at once
Key: keep it simple, stupid
simple geometric forms, minimal contours, less- saturated colors
not too many font variations
one or two type faces at a few different sizes
spacing: variation can be distracting
efficiency: try removing elements and see if still accomplish goals

24. Avoiding visual noise in text
Use least number of words necessary
Navigation: short words, easily recognized, easily remembered
Avoid abbreviations or use only std. abbrevs.
Maximize readability
Reasonably large fonts – follow standard applications
Sans-serif for commands/short output
Serif font for paragraphs
ALL CAPS: DIFFICULT TO READ
Mixed case: more redundant information
High contrast with background:
Eg: no
green text on blue

25. Color Draws attention, improves navigation, visual grouping
Too many (over 7?): decreased performance

26. Color Draws attention, improves navigation, visual grouping
Too many (over 7?): decreased performance
This box illustrates why you should not try to use lots of different colors at the same time.

27. Color Draws attention, improves navigation, visual grouping
Too many (over 7?): decreased performance
This box illustrates why you should not try to use lots of different colors at the same time.
Watch out for visual effects
Example: chromostereopsis: visual "vibration“
caused by colors from
ROYGBIV
Another issue: color bleed
the
extreme
ends of
spectrum
color bleed
vs.

28. Color Draws attention, improves navigation, visual grouping
Too many (over 7?): decreased performance
This box illustrates why you should not try to use lots of different colors at the same time.
Watch out for visual effects
Example: chromostereopsis: visual "vibration“
caused by colors from
ROYGBIV
Another issue: color bleed
Fix: add
the
extreme
ends of
spectrum
black
borders
color bleed
vs.

29. Color, continued Also: be careful with highly saturated colors
saturation: distance from gray
garish, draws attention
leads to chromostereopsis
Amish Bars, from Amish: The Art of the Quilt, by Robert Hughes and Julie Silber, Callaway, 1993: Plate 39, Unknown Amish quiltmaker, American, Lancaster County, Pennsylvania, circa 1915

30. Color, continued Also: be careful with highly saturated colors
saturation: distance from gray
garish, draws attention
leads to chromostereopsis
At the same time, avoid inadequate contrast
colored text on colored backgrounds typically lowers contrast
Amish Bars, from Amish: The Art of the Quilt, by Robert Hughes and Julie Silber, Callaway, 1993: Plate 39, Unknown Amish quiltmaker, American, Lancaster County, Pennsylvania, circa 1915

31. Color impairment 10% of males have some degree of color-blindness
Red-green hues especially prone to cause problems
Note red and green have nearly the same brightness!
Vary saturation, brightness as well
If distinguishable in gray scale, then distinguishable to color impaired
From

32. Visual Interface Principles (summary)
Use visual properties to group elements and provide a clear hierarchy
Hue, saturation, value, size, layering: create hierarchy
Squint to check
Provide visual structure, flow at each level of organization
Use grid, natural eye flow, symmetry, balance
Use cohesive, consistent, and appropriate imagery
Culturally sensitive icons; commands = verb + object
Are photorealisitic icons useful?
Avoid visual noise and clutter
Keep design simple
Use color, but thoughtfully
Keep text easy-to-read

33. Other Issues See Ch. 19 MDI vs. SDI
MDI: multiple document interface
Designed to have more than one instance of a document open in an app at same time
Examples: simple, Rose
Popular solution when resources were scarce
not needed today

34. Menus (Ch. 22) Command-line interface Basic, required menus Optional
Why not? Are there advantages?
Basic, required menus
File, Edit, Windows, Help
Optional
View, Insert, Settings, Format, Tools
Avoid
Cascading menus – violates avoiding hierarchies
Expanding menus – discourages exploration
Bang menus: instant anger
hard-hat stuff
Cascading menu from Windows95
Expanding menu from Word 2003 (Windows)

35. Dialogs (Ch. 24) Dialogs break flow; avoid if can, but can't always
good uses: infrequently-used functions, settings
easier to move potentially harmful items out-of-sight
concentrating information related to a particular object in one place
Modal vs. modeless/application modal vs. system modal
avoid system modal at all costs! - reserve for os (eg: disk melting)
modeless typically harder to understand because unclear scope for operations
better modeless dialogs
clearly distinguish from modal dialogs (eg, different background/border, distinctive icons, close buttons in different place, no cancel)
consistent terminology for close: not OK in one place and Done in another
don't dynamically change legends of buttons (to say, "Apply" rather than "Close")
More radical solution: make modeless dialogs into toolbars!
add/remove toolbars at will

36. Dialog Etiquette Always include title bar makes dialog movable
remind user of operation in effect
caption with verb + noun (noun may not be appropriate)
Transient posture
compact
easy-to-understand/read buttons
Reduce excise
remember settings from last use
Modal dialogs: OK and Cancel buttons; Apply might be acceptable
Cooper: don't include close button on title bar - but I'm not so sure about that!
Have shortcuts
Tabs ok, but not stacked tabs

37. Dialog Etiquette
Expanding dialogs: good, but remember if expanded (in the registry)
example: find dialog in Word2003
Cascading dialogs: don’t!
difficult to know context, lots of excise in moving windows around to find things
biggest issue: what's the scope of a Cancel or OK?
an example of a design that makes sense to programmers (call-return model) but not most users

38. Visual Interface Design - Review
Building blocks
shape, size, value, hue, orientation, texture, position
Principles
Grouping, structure, visual flow, symmetry, spatial harmony, imagery, low noise/clutter
MDI vs. SDI
Menus
Dialogs