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

User Interface Design

Session 11- LBSC 790 / INFM 718BBuilding the Human-Computer Interface

Cartoon removed

Agenda

• Questions

• Testing & debugging notes

• User interface design – Principles

– Practice

• Design critique

• Project check-in

Programming Best Practices

• Design before you build

• Focus your learning

• Program defensively

• Pair programming

• Limit complexity

• Debug syntax from the top down

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)

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?

Six design principles

• Visibility• Feedback• Constraints

• Mapping• Consistency• Affordance

Don Norman, The Design of Everyday Things (1988)

Visibility – An elevator control panel

Visibility – An elevator control panel

Feedback

• Sending information back to the user about what has been done

click

Physical Constraints

• Reflect the way physical objects restrict the movement of things

Logical Constraints

• Exploit people’s everyday common sense reasoning about the way the world works

• Where do you plug the keyboard?

• Where do you plug the mouse?

How to design them more logically

Color codingProximity

• Learned arbitrary conventions

Cultural constraints

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

Mapping

Consistency

• Similar tasks should have similar operations For example:– Always use ctrl key plus first initial of the

command for an operation:Ctrl+C, Ctrl+S, Ctrl+O

• Internal vs. external consistency

Keypad numbers layout

• External inconsistency

phones, remote controls calculators, computer keypads

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

Virtual affordances

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

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

Design Practice

• General rules– Layout– Color– Size

• Guidelines– Java Look & Feel Guidelines

java.sun.com/products/jlf/

– MS Windows Vistamsdn.microsoft.com/library/?url=/library/en-us/

UxGuide/UXGuide

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

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

Size

• Don’t 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

Design Practice

• General rules– Layout– Color– Size

• Guidelines– Java Look & Feel Guidelines

java.sun.com/products/jlf/

– MS Windows Vistamsdn.microsoft.com/library/?url=/library/en-us/

UxGuide/UXGuide

Graphical Design Critique• Select 2 GUI’s 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

Suggested applications

• MS Office Picture ManagerPrograms->MS Office->…Tools->Picture Manager

• ICDL Book Readerwww.childrenslibrary.org/library/books/readers/hrdaxlf_00320001-comic.jnlp

• Dr. Dobb’s eMagazine readerwww.nxtbook.com/nxtbooks/cmp/ddj-ravenflow2

• PDA applications

Six design principles

• Visibility• Feedback• Constraints

• Rules– Layout– Color– Size

• Mapping• Consistency• Affordance

Don Norman, The Design of Everyday Things (1988)

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

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