User Interface Design - PowerPoint PPT Presentation

About This Presentation
Title:

User Interface Design

Description:

User Interface Design. Session 11- LBSC 790 / INFM 718B. Building the Human ... Design for monochrome displays. Provides assured access for color blind users ... – PowerPoint PPT presentation

Number of Views:33
Avg rating:3.0/5.0
Slides: 32
Provided by: doug5
Category:

less

Transcript and Presenter's Notes

Title: User Interface Design


1
User Interface Design
Cartoon removed
  • Session 11- LBSC 790 / INFM 718B
  • Building the Human-Computer Interface

2
Agenda
  • Questions
  • Testing debugging notes
  • User interface design
  • Principles
  • Practice
  • Design critique
  • Project check-in

3
Programming Best Practices
  • Design before you build
  • Focus your learning
  • Program defensively
  • Pair programming
  • Limit complexity
  • Debug syntax from the top down

4
Types of Errors
  • Syntax errors
  • Detected at compile time
  • Run time exceptions
  • Cause system-detected failures at run time
  • Logic errors
  • Cause unanticipated behavior (detected by you!)
  • Design errors
  • Fail to meet the need (detected by stakeholders)

5
Types of Testing
  • Design walkthrough
  • Does the design meet the requirements
  • Code walkthrough
  • Does the code implement the requirements?
  • Functional testing
  • Does the code do what you intended?
  • Usability testing
  • Does it do what the user needs done?

6
(No Transcript)
7
Six design principles
  • Visibility
  • Feedback
  • Constraints
  • Mapping
  • Consistency
  • Affordance

Don Norman, The Design of Everyday Things (1988)
8
Visibility An elevator control panel
9
Visibility An elevator control panel
10
Feedback
  • Sending information back to the user about what
    has been done

click
11
Physical Constraints
  • Reflect the way physical objects restrict the
    movement of things

12
Logical Constraints
  • Exploit peoples everyday common sense reasoning
    about the way the world works
  • Where do you plug the keyboard?
  • Where do you plug the mouse?

13
How to design them more logically
  • Color coding

Proximity
14
Cultural constraints
  • Learned arbitrary conventions

15
Mapping
  • Relationship between controls and their movements
    and the results in the world

16
Consistency
  • Similar tasks should have similar operations
  • For example
  • Always use ctrl key plus first initial of the
    command for an operation CtrlC, CtrlS,
    CtrlO
  • Internal vs. external consistency

17
Keypad numbers layout
  • External inconsistency

phones, remote controls
calculators, computer keypads
18
Affordance
  • A physical attribute of an object that suggests
    how to use it
  • a mouse button invites pushing
  • door handle affords pulling
  • Adapted to virtual objects
  • scrollbars suggest moving up and down
  • icons invite clicking on

19
Virtual affordances
  • How do the following screen objects afford?
  • What if you were a novice user?
  • Would you know what to do with them?

20
Usability principles(Nielsen 2001)
  • Visibility of system status
  • Match between system and the real world
  • User control and freedom
  • Consistency and standards
  • Help users recognize, diagnose and recover from
    errors
  • Error prevention
  • Recognition rather than recall
  • Flexibility and efficiency of use
  • Aesthetic and minimalist design
  • Help and documentation

21
Design Practice
  • General rules
  • Layout
  • Color
  • Size
  • Guidelines
  • Java Look Feel Guidelines
  • java.sun.com/products/jlf/
  • MS Windows Vista
  • msdn.microsoft.com/library/?url/library/en-us/U
    xGuide/UXGuide

22
Layout
  • Group things meaningfully
  • Design in a natural task-oriented flow
  • Use the corners
  • Leverage consistency
  • Similar things should look similar
  • Different things should look different
  • Encourage exploration
  • Make it obvious which way to go
  • Avoid hidden functions
  • Strive for simplicity
  • Use hierarchies judiciously to limit complexity

23
Color
  • Design for monochrome displays
  • Provides assured access for color blind users
  • Add muted colors where they help
  • Useful for rapid recognition of categories
  • Limit to 4 colors per screen (7 per application)
  • Pay attention to readability
  • Similar colors look different on another
    display
  • Different systems may have different defaults

24
Size
  • Dont make icons too small
  • Fitts Law Time f(distance, size)
  • Size can be used to illustrate quantity
  • Scale size coding by at least 1.5
  • No more than 4 font sizes

25
Design Practice
  • General rules
  • Layout
  • Color
  • Size
  • Guidelines
  • Java Look Feel Guidelines
  • java.sun.com/products/jlf/
  • MS Windows Vista
  • msdn.microsoft.com/library/?url/library/en-us/U
    xGuide/UXGuide

26
Graphical Design Critique
  • Select 2 GUIs you know and can use here
  • Work in in groups of 3 to critique each GUI
  • How do they apply the 6 design principles?
  • Find examples of features that conform or
    violate
  • Usability principles
  • Design rules

27
Suggested applications
  • MS Office Picture Manager
  • Programs-gtMS Office-gtTools-gtPicture Manager
  • ICDL Book Reader
  • www.childrenslibrary.org/library/books/readers/hr
    daxlf_00320001-comic.jnlp
  • Dr. Dobbs eMagazine reader
  • www.nxtbook.com/nxtbooks/cmp/ddj-ravenflow2
  • PDA applications

28
Six design principles
  • Visibility
  • Feedback
  • Constraints
  • Rules
  • Layout
  • Color
  • Size
  • Mapping
  • Consistency
  • Affordance

Don Norman, The Design of Everyday Things (1988)
29
Usability principles(Nielsen 2001)
  • Visibility of system status
  • Match between system and the real world
  • User control and freedom
  • Consistency and standards
  • Help users recognize, diagnose and recover from
    errors
  • Error prevention
  • Recognition rather than recall
  • Flexibility and efficiency of use
  • Aesthetic and minimalist design
  • Help and documentation

30
(No Transcript)
31
Coming up
  • Tomorrow
  • Spec 2 due (by midnight)
  • Next week
  • Information Visualization (Catherine Plaisant)
  • Interaction Design
  • Beyond
  • Nov 23 Thanksgiving - No class, but
  • Proto 2 / Spec 3 due
  • Nov 30 Applets final exam review
  • Dec 7 Project presentations
  • Dec 14 Final Exam
Write a Comment
User Comments (0)
About PowerShow.com