i213: User Interface Design & Development

1. i213: User Interface Design & Development Marti Hearst Tues, March 20, 2007

2. Today • Graphic Design • Midterm Review

3. Graphical Design in UI Design • Sources: • GUI Bloopers, Chapter 3 • Jeff Johnson • Principles of Effective Visual Communication for GUI design • Marcus in Baecker, Grudin, Buxton and Greenberg, Readings in Human-Computer Interaction: Toward the Year 2000 • Designing Visual Interfaces • Mullet & Sano, Prentice Hall • The Non-Designers Design Book • Robin Williams, Peachpit Press • The Zen of CSS Design • Dave Shea and Molly Holzschlag, New Riders • Really terrific! Design aesthetics plus how to code it. • http://www.csszengarden.com/

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

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

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

7. Layout Grids: A Design Staple • Organization • Use contrast to bring out dominant elements • Use grouping of elements by proximity • Use alignment for organization and aesthetics • Consistency • Navigational Cues The eye travels along the paths cut out for it in the work. • Paul Klee

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

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

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

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

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

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

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

15. 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 • 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

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

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

18. 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. • Method: Flow some text on to a page and get a print-out in various column widths and different font sizes From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html

19. Grid Layout Recommendations • Margins: a function of how much you need to fit on to each page • (From paper layout, not on-screen) • 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 than the bottom. • 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. • 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.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html

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

21. No regard fortask order; noorganization IBM's Aptiva Communication Center

22. Haphazard layoutfrom mullet & sano

23. Repairing a Haphazard layoutfrom mullet &sano

24. Bad alignment Poor choice of colors to distinguish labels from editable fields

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

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

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

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

29. Related Issues • Text • legibility • typefaces and typesetting • Color and Texture • Iconography • signs, icons, symbols; concrete to abstract • Visual identity • unique appearance • Animation • dynamics of display

30. Midterm Review Questions?