I213 user interface design development
Download
1 / 30

- PowerPoint PPT Presentation


  • 264 Views
  • Updated On :

i213: User Interface Design & Development Marti Hearst Tues, March 20, 2007 Today Graphic Design Midterm Review Graphical Design in UI Design Sources: GUI Bloopers , Chapter 3 Jeff Johnson Principles of Effective Visual Communication for GUI design

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '' - MikeCarlo


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
I213 user interface design development l.jpg

i213: User Interface Design & Development

Marti Hearst

Tues, March 20, 2007


Today l.jpg
Today

  • Graphic Design

  • Midterm Review


Graphical design in ui design l.jpg
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/


Graphical design in ui design4 l.jpg
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”



A note on tools l.jpg
A Note on Tools

  • Many tools make it difficult to do layout correctly

    • Powerpoint especially!


Layout grids a design staple l.jpg
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


Layout grids l.jpg
Layout Grids

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


Two column layout grids l.jpg
Two Column Layout Grids

From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html


Three column layout grids l.jpg
Three Column Layout Grids

From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html


Symmetry vs asymmetry l.jpg
Symmetry vs. Asymmetry

Beware of too much symmetry

From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html


Four column layout grids l.jpg
Four Column Layout Grids

From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html


Layout grids13 l.jpg

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


Slide14 l.jpg

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


Visual consistency l.jpg
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


Slide16 l.jpg

Slide from

Saul Greenberg

  • Two-level Hierarchy

  • indentation

  • contrast

Logic of organizationalflow

Grouping by white space

Alignment connects visual elements in a sequence


User grouping to show relationships between screen elements l.jpg

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:


Grid layout recommendations l.jpg
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


Grid layout recommendations19 l.jpg
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


Navigational cues l.jpg
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


Slide21 l.jpg

No regard fortask order; noorganization

IBM's Aptiva Communication Center


Slide22 l.jpg

Haphazard layoutfrom mullet & sano


Slide23 l.jpg

Repairing a Haphazard layoutfrom mullet &sano


Slide24 l.jpg

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


Economy of visual elements l.jpg
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


Slide26 l.jpg

Overuse of 3-d effects makes the window unnecessarily cluttered

Slide adapted from Saul Greenberg


More guidelines l.jpg
More Guidelines cluttered

  • 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


Web page layout l.jpg
Web Page Layout cluttered

  • 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


Related issues l.jpg
Related Issues cluttered

  • Text

    • legibility

    • typefaces and typesetting

  • Color and Texture

  • Iconography

    • signs, icons, symbols; concrete to abstract

  • Visual identity

    • unique appearance

  • Animation

    • dynamics of display


Midterm review l.jpg

Midterm Review cluttered

Questions?