172 Hearst Graphic-Design

8/9/2019 172 Hearst Graphic-Design

1/28

SIMS 213:

User Interface Design &Development

Marti HearstThur, Mar 4, 2004


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


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


4/28

From http://www.warrenkramer.com/design/1/index.shtml


5/28

A Note on Tools

Most tools make it difficultto dolayout correctly

Powerpoint especially!!


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


7/28

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

Layout Grids


8/28

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

Two Column Layout Grids


9/28


Three Column Layout

Grids


10/28


Symmetry vs. Asymmetry

Beware of too much symmetry


11/28


Four Column Layout Grids


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


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


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


15/28

Two-level Hierarchyindentationcontrast

Grouping

by white

space

Alignment connects

visual elements in a

sequence

Logic of organizational

flow

Slide from

Saul Greenberg


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:


17/28


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.


18/28


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


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


20/28

IBM'sAptiva Communication Center

No regard for

task order; no

organization


21/28

Haphazard layout

from mullet & sano


22/28

Repairing a

Haphazard layout

from mullet &

sano


23/28

Bad alignment

Poor choice of colors to distinguish labels from editable fields


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


25/28

Overuse of 3-d effects makes the window unnecessarily cluttered

Slide adapted from Saul Greenberg


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


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


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

Documents

172 Hearst Graphic-Design