i213: User Interface Design - PowerPoint PPT Presentation

Loading...

PPT – i213: User Interface Design PowerPoint presentation | free to download - id: 21fd1-MzU2M



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

i213: User Interface Design

Description:

User Interface Design & Development. Marti Hearst. Tues, March 20, 2007. Today. Graphic Design ... Principles of Effective Visual Communication for GUI design ... – PowerPoint PPT presentation

Number of Views:101
Avg rating:3.0/5.0
Slides: 31
Provided by: hea4
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: i213: User Interface Design


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.sh
tml
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
9
Two Column Layout Grids
10
Three Column Layout Grids
11
Symmetry vs. Asymmetry
Beware of too much symmetry
12
Four Column Layout Grids
13
Layout Grids
14
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
Alignment connects visual elements in a sequence
17
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

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

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 users 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 dont 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?
  • Spools 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?
About PowerShow.com