SIMS 213: User Interface Design & Development

Marti Hearst Thur, Mar 4, 2004

Graphical Design in UI Design
• 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” .

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

A Note on Tools Most tools make it difficult to do layout correctly Powerpoint especially!! .

– Paul Klee .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.

Layout Grids .lycos. .Two Column Layout Grids From

html .uk/MUHome/cshtml/print/grids.ndirect.cultsock.Three Column Layout Grids From Asymmetry Beware of too much symmetry From vs.html .

Four Column Layout Grids From

Layout Grids Format of variable contents Standard icon set Message text in Arial 14. left adjusted Widget to widget spacing Window to widget spacing No Ok Fixed components .

doc” from the folder “junk”? Bad: No Ok The file was destroyed Apply Cancel   .Good: Standard icon set Message text in Arial 14. left adjusted Slide from Saul Greenberg ? No Ok Do you really want to delete the file “myfile.

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 – Follow platform and interface style conventions – Use platform and widget-specific grids – Deviate from conventions only when it provides a clear benefit to user External consistency .

Slide from Saul Greenberg Two-level Hierarchy •indentation •contrast Logic of organizational flow Alignment connects visual elements in a sequence Grouping by white space .

User grouping to show relationships between screen elements Bad Good Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Good Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: .

– 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.html .uk/MUHome/cshtml/print/grids.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 From http://www.ndirect.

ndirect. Thus. 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. we tend to see them as too low down.html .uk/MUHome/cshtml/print/grids. when setting up a page. For that reason. if elements are situated exactly equally on either side of the optical 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.cultsock.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).

or peripheral items as appropriate Assist in navigation through material Order should follow a user’s conceptual model of sequences bad good .Navigational cues Provide initial focus Direct attention to important. secondary.

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 .

or relegate others to secondary windows • (but don’t want too many extra windows!) – Minimize clutter • so information is not hidden .Economy of visual elements – Minimize number of controls – Include only those that are necessary • eliminate.

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 .

etc. they assume more of the same below. ads.Web Page Layout – Controversies about: – Spool’s claims • Should users scroll? • How much whitespace? • Users scroll if the top part of the page contains useful information. • Whitespace negatively correlated with usefulness – (If it contains branding.) – 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. concrete to abstract Visual identity – unique appearance Animation – dynamics of display . symbols.

Sign up to vote on this title
UsefulNot useful