SIMS 213:

User Interface Design &

Development
Marti Hearst
Thur, Mar 4, 2004
 Graphical Design in UI
Design
Sources:
• GUI Bloopers, Chapter 3
– Jeff Johnson
• Principle of Effective Visual Communication for GUI
design
– Marcus in Baecker, Grudin, Buxton and Greenberg
• Designing Visual Interfaces
– Mullet & Sano, Prentice Hall
• The Non-Designers Design Book
– Robin Williams, Peachpit Press
 Graphical Design in UI
Design
Graphical Design must account for:
– A comprehensible mental image
– Appropriate organization of data, functions,
tasks and roles
– High-quality appearances
• The “look”
– Effective interaction sequencing
• The “feel”
From http://www.warrenkramer.com/design/1/index.shtml
 A Note on Tools

Most tools make it difficult to do

layout correctly
Powerpoint especially!!
 Layout Grids: A Design
Staple
Organization
– contrast to bring out dominant elements
– grouping of elements by proximity
– alignment
Consistency
Navigational Cues
The eye travels along the paths cut out for it in the
work.
– Paul Klee
 Layout Grids

http://hotwired.lycos.com/webmonkey/98/28/index4a_page2.html?tw=design
Two Column Layout Grids

From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Three Column Layout
Grids

From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Symmetry vs. Asymmetry

Beware of too much symmetry

From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Four Column Layout Grids

From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
 Layout Grids

Format of
variable
contents
Widget to
widget Standard Message text in
spacing icon set Arial 14, left
adjusted

Window to
widget
spacing
No Ok

Fixed
components
 Slide from
Good: Saul Greenberg

Standard Message text in

icon set Arial 14, left
adjusted

? Do you really want

to delete the file
“myfile.doc” from
No Ok the folder “junk”?

No Ok
Bad:

Apply
The file was
destroyed
Cancel

 
 Visual Consistency
Internal consistency
– Same conventions and rules for all elements of the GUI (unless strong
reason to do otherwise)
– Enforced by a set of application-specific grids
External consistency
– Follow platform and interface style conventions
– Use platform and widget-specific grids
– Deviate from conventions only when it provides a clear benefit to user
 Slide from
Saul Greenberg

Two-level Hierarchy
Logic of organizational
•indentation
flow
•contrast

Alignment connects Grouping

visual elements in a by white
sequence space
 User grouping to show
relationships between screen
elements

Bad Good
Good
Mmmm: Mmmm: Mmmm:
Mmmm:
Mmmm: Mmmm:

Mmmm:
Mmmm: Mmmm:
Mmmm:
Mmmm: Mmmm:
Mmmm: Mmmm: Mmmm:
 Grid Layout
Recommendations
Number of lines per page
– # of lines you can fit on each page in your chosen font is divisible by
the number of grid sections you intend to have.

– Method: Flow some text ('printer's Latin' for example) on to a page

and get a print-out in various column widths and different font sizes

Facing pages
– when setting up the pages, always consider what two
facing pages will look like together.

From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
 Grid Layout
Recommendations
Margins: a function of how much you need to fit
on to each page
• foredge (also known as outside margin): should be an
average of head (top margin) and foot (bottom margin)
• foot (also known as bottom margin): should always be bigger
than the head (top margin), at least 50% bigger
– (this is due an optical illusion called the optical centre -- we tend to see
the centre of a page as being slightly higher than the actual centre.
Thus, if elements are situated exactly equally on either side of the
optical centre, we tend to see them as too low down. For that reason,
when setting up a page, we normally set up the bottom margin around
50% bigger than the top margin)
• back (also known as inside or gutter margin): the two back
margins taken together should be roughly as wide as the
foredge
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
 Navigational cues
Provide initial focus
Direct attention to important, secondary, or
peripheral items as appropriate
Assist in navigation through material
Order should follow a user’s conceptual model
of sequences

bad good
 No regard for
task order; no
organization

IBM's Aptiva Communication Center

Haphazard layout
from mullet & sano
Repairing a
Haphazard layout
from mullet &
sano
Bad alignment
Poor choice of colors to distinguish labels from editable fields
 Economy of visual
elements
– Minimize number of controls

– Include only those that are necessary

• eliminate, or relegate others to secondary
windows
• (but don’t want too many extra windows!)

– Minimize clutter
• so information is not hidden
Overuse of 3-d effects makes the window unnecessarily cluttered

Slide adapted from Saul Greenberg

 More Guidelines
From Chapter 3 of GUI Bloopers
– Missing group boxes
– Inconsistent group box style
– Inconsistent separator style
– Shoddy labeling and spacing
• Radiobutton spacing
• Inconsistent property label alignment
• Very long labels
• Poor label placement
• Unlabeld container components
– Inconsistent fonts
– Tiny fonts
 Web Page Layout
– Controversies about:
• Should users scroll?
• How much whitespace?
– Spool’s claims
• Users scroll if the top part of the page contains useful information.
– (If it contains branding, ads, etc, they assume more of the same below.)
• Whitespace negatively correlated with usefulness
– Viewing a page through a browser is like putting a small hole in a piece of
paper and holding over the middle of a magazine page
– Layout design is different for the web than print
– Our studies suggest:
• Text and link clustering is favored
• Others claim this aids scannability
 Related Issues

Text
– legibility
– typefaces and typesetting
Color and Texture
Iconography
– signs, icons, symbols; concrete to abstract
Visual identity
– unique appearance
Animation
– dynamics of display