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” .

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 http://hotwired.com/webmonkey/98/28/index4a_page2.html?tw=design .lycos.

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

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

ndirect.co. Asymmetry Beware of too much symmetry From http://www.uk/MUHome/cshtml/print/grids.cultsock.Symmetry vs.html .

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

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 have.cultsock.co. 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 centre.co. 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