1 / 21

SIMS 213: User Interface Design & Development

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. Graphical Design in UI Design. Sources:

blake-house
Download Presentation

SIMS 213: User Interface Design & Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

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

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

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

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

  10. No regard fortask order; noorganization IBM's Aptiva Communication Center Slide adapted from Saul Greenberg

  11. Haphazard layoutfrom mullet & sano Slide adapted from Saul Greenberg

  12. Repairing a Haphazard layoutfrom mullet &sano

  13. 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 good bad Slide adapted from Saul Greenberg

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

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

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

  17. NNNN MMMM xxx: ____ xxx: ____ MMMM xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ NNNN xxx: ____ xxx: ____ xxx: ____ xxx: ____ Economy of visual elements Bad Good Slide adapted from Saul Greenberg

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

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

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

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

More Related