SIMS 213: User Interface Design & Development Marti Hearst Thurs Feb 8, 2001

Project Announcements FANTASTIC job on last assignment!!! Deadline extended for next assignment DENIM is now new and improved

Slide adapted from Saul Greenberg Graphical Design in UI Design Sources: Principle of Effective Visual Communication for GUI design – Marcus in Baecker, Grudin, Buxton and Greenberg Designing Visual Interfaces – Mullet & Sano, Prentice Hall Must account for: – a comprehensible mental image metaphor – appropriate organization of data, functions, tasks and roles cognitive model – quality appearance characteristics the “look” – effective interaction sequencing the “feel”

Slide adapted from Saul Greenberg Layout Grids: A Design Staple Organization – contrast to bring out dominant elements – grouping of elements by proximity – show organizational structure – alignment Consistency

Slide adapted from Saul Greenberg Grids Window to widget spacing Widget to widget spacing NoOk Message text in Arial 14, left adjusted Standard icon set Fixed components Format of variable contents

Slide adapted from Saul Greenberg Visual Consistency – internal consistency same conventions and rules for all elements of the GUI unless strong reason set of application-specific grids enforce this – 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

NoOk Message text in Arial 14, left adjusted Standard icon set NoOk Do you really want to delete the file “myfile.doc” from the folder “junk”? ?  Ok Cannot move the file “myfile.doc” to the folder “junk” because the disc is full. !  Apply Cancel The file was destroyed Bad: Good: Slide from Saul Greenberg

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

Slide adapted from Saul Greenberg User grouping to show relationships between screen elements Bad Good Good Mmmm:

Slide adapted from Saul Greenberg IBM's Aptiva Communication Center No regard for task order; no organization

Slide adapted from Saul Greenberg Haphazard layout from mullet & sano

Repairing a Haphazard layout from mullet & sano

Slide adapted from Saul Greenberg 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

Slide adapted from Saul Greenberg Bad alignment Poor choice of colors to distinguish labels from editable fields

Slide adapted from Saul Greenberg Redesigning a layout using alignment and factoring from mullet & sano

Slide adapted from Saul Greenberg Economy of visual elements – minimize number of controls – include only those that are necessary eliminate, or relegate others to secondary windows – minimize clutter so information is not hidden

Slide adapted from Saul Greenberg Economy of visual elements BadGood NNNN MMMM xxx: ____ MMMM NNNN

Overuse of 3-d effects makes the window unnecessarily cluttered Slide adapted from Saul Greenberg

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

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

Slide adapted from Saul Greenberg Related Issues Layout – formats, proportions, and grids Text – legibility – typefaces and typesetting Color and Texture Iconography – signs, icons, symbols; concrete to abstract Visual identity – unique appearance Animation – dynamics of display