172 hearst graphic-design
TRANSCRIPT
-
8/9/2019 172 Hearst Graphic-Design
1/28
SIMS 213:
User Interface Design &Development
Marti HearstThur, Mar 4, 2004
-
8/9/2019 172 Hearst Graphic-Design
2/28
Graphical Design in UI
DesignSources:
GUI Bloopers, Chapter 3
Jeff Johnson
Principle of Effective Visual Communication for GUIdesign
Marcus in Baecker, Grudin, Buxton and Greenberg
Designing Visual Interfaces
Mullet & Sano, Prentice Hall
The Non-Designers Design Book
Robin Williams, Peachpit Press
-
8/9/2019 172 Hearst Graphic-Design
3/28
Graphical Design in UI
DesignGraphical Design must account for: A comprehensible mental image
Appropriate organization of data, functions,tasks and roles
High-quality appearancesThe look
Effective interaction sequencingThe feel
-
8/9/2019 172 Hearst Graphic-Design
4/28
From http://www.warrenkramer.com/design/1/index.shtml
-
8/9/2019 172 Hearst Graphic-Design
5/28
A Note on Tools
Most tools make it difficultto dolayout correctly
Powerpoint especially!!
-
8/9/2019 172 Hearst Graphic-Design
6/28
Layout Grids: A Design
StapleOrganization 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 thework.
Paul Klee
-
8/9/2019 172 Hearst Graphic-Design
7/28
http://hotwired.lycos.com/webmonkey/98/28/index4a_page2.html?tw=design
Layout Grids
-
8/9/2019 172 Hearst Graphic-Design
8/28
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Two Column Layout Grids
-
8/9/2019 172 Hearst Graphic-Design
9/28
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Three Column Layout
Grids
-
8/9/2019 172 Hearst Graphic-Design
10/28
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Symmetry vs. Asymmetry
Beware of too much symmetry
-
8/9/2019 172 Hearst Graphic-Design
11/28
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Four Column Layout Grids
-
8/9/2019 172 Hearst Graphic-Design
12/28
Layout Grids
Window to
widget
spacing
Widget towidget
spacing
No Ok
Message text in
Arial 14, left
adjusted
Standard
icon set
Fixed
components
Format of
variable
contents
-
8/9/2019 172 Hearst Graphic-Design
13/28
No Ok
Message text in
Arial 14, left
adjusted
Standard
icon set
No Ok
Do you really want
to delete the file
myfile.doc from
the folder junk?
?
Apply
Cancel
The file wasdestroyed
Bad:
Good:Slide from
Saul Greenberg
-
8/9/2019 172 Hearst Graphic-Design
14/28
Visual Consistency
Internal consistency
Same conventions and rules for all elements of the GUI (unless strongreason 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
-
8/9/2019 172 Hearst Graphic-Design
15/28
Two-level Hierarchyindentationcontrast
Grouping
by white
space
Alignment connects
visual elements in a
sequence
Logic of organizational
flow
Slide from
Saul Greenberg
-
8/9/2019 172 Hearst Graphic-Design
16/28
User grouping to showrelationships between screen
elements
Bad Good
Good Mmmm:Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
-
8/9/2019 172 Hearst Graphic-Design
17/28
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Grid Layout
RecommendationsNumber 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 pageand 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.
-
8/9/2019 172 Hearst Graphic-Design
18/28
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Grid Layout
RecommendationsMargins: a function of how much you need to fiton 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 theoptical 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 around50% bigger than the top margin)
back (also known as inside or gutter margin): the two backmargins taken together should be roughly as wide as theforedge
-
8/9/2019 172 Hearst Graphic-Design
19/28
Navigational cuesProvide initial focus
Direct attention to important, secondary, orperipheral items as appropriate
Assist in navigation through materialOrder should follow a users conceptual modelof sequences
bad good
-
8/9/2019 172 Hearst Graphic-Design
20/28
IBM'sAptiva Communication Center
No regard for
task order; no
organization
-
8/9/2019 172 Hearst Graphic-Design
21/28
Haphazard layout
from mullet & sano
-
8/9/2019 172 Hearst Graphic-Design
22/28
Repairing a
Haphazard layout
from mullet &
sano
-
8/9/2019 172 Hearst Graphic-Design
23/28
Bad alignment
Poor choice of colors to distinguish labels from editable fields
-
8/9/2019 172 Hearst Graphic-Design
24/28
Economy of visual
elements Minimize number of controls
Include only those that are necessaryeliminate, or relegate others to secondary
windows
(but dont want too many extra windows!)
Minimize clutter
so information is not hidden
-
8/9/2019 172 Hearst Graphic-Design
25/28
Overuse of 3-d effects makes the window unnecessarily cluttered
Slide adapted from Saul Greenberg
-
8/9/2019 172 Hearst Graphic-Design
26/28
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
-
8/9/2019 172 Hearst Graphic-Design
27/28
Web Page Layout
Controversies about:
Should users scroll?
How much whitespace?
Spools 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 ofpaper 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
-
8/9/2019 172 Hearst Graphic-Design
28/28
Related Issues
Text legibility
typefaces and typesettingColor and Texture
Iconography signs, icons, symbols; concrete to abstract
Visual identity unique appearance
Animation dynamics of display