sims 213 user interface design development
Download
Skip this Video
Download Presentation
SIMS 213: User Interface Design & Development

Loading in 2 Seconds...

play fullscreen
1 / 28

SIMS 213: User Interface Design & Development - PowerPoint PPT Presentation


  • 115 Views
  • Uploaded on

SIMS 213: User Interface Design & Development. Marti Hearst Thurs, Feb 27, 2003. 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

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 'SIMS 213: User Interface Design & Development' - devon


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
sims 213 user interface design development

SIMS 213: User Interface Design & Development

Marti Hearst

Thurs, Feb 27, 2003

graphical design in ui design
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 design1
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
A Note on Tools
  • Most tools make it difficult to do layout correctly
  • Powerpoint especially!!
layout grids a design staple
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.

    • Paul Klee
layout grids
Layout Grids

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

two column layout grids
Two Column Layout Grids

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

three column layout grids
Three Column Layout Grids

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

symmetry vs asymmetry
Symmetry vs. Asymmetry

Beware of too much symmetry

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

four column layout grids
Four Column Layout Grids

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

layout grids1
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
slide13
Slide from

Saul Greenberg

Message text in Arial 14, left adjusted

Standard icon set

Apply

The file was destroyed

Cancel

No

Ok

Good:

Do you really want to delete the file “myfile.doc” from the folder “junk”?

?

No

Ok

Bad:

visual consistency
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
slide15
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
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
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 ('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.

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

grid layout recommendations1
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), 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. Thus, if elements are situated exactly equally on either side of the optical centre, we tend to see them as too low down. For that reason, when setting up a page, 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.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html

navigational cues
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

slide20
No regard fortask order; noorganization

IBM's Aptiva Communication Center

economy of visual elements
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
slide25
Overuse of 3-d effects makes the window unnecessarily cluttered

Slide adapted from Saul Greenberg

more guidelines
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
web page layout
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
related issues
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
ad