1. ITEC 334 Fall 2009 Computer Programming in the Web Era
Usability and User Interface
Professor J. Alberto Espinosa

2. Usability
Derives from the industrial engineering field of “ergonomics” – how to design things so they are easy to use. It refers to the “quality of a user's experience when interacting with a product or system … and how well users can learn and use a product to achieve their goals and how satisfied they are with that process ... people who use the product can do so quickly and easily to accomplish their tasks” – usability.gov
Other references:

3. Interface
“The place at which independent and often unrelated systems meet and act on or communicate with each other” – Webster dictionary
Network
Hardware
System
User
Software
Software

4. User Interface Design
Also referred to as “human computer interaction” (HCI) – is what the usability specialists do to build systems that are easy to use.
HCI also derives from the field of “ergonomics” often referred to these days as “human factors” to include digital and virtual interaction, in addition to physical interaction.
Other references: Cornell Univ: Virginia Tech: Carnegie Mellon:

5. A User Interface Can Be For:
Input into the system by the user for data entry or to query information from the system
A display output (on screen or other output device) by the system to the user
A printed output (on a printer or other output device)

6. Diagramming the Interface: with “Storyboards”
User interfaces can be diagrammed as “storyboards”
A storyboard is a series of drawings that depict how the system looks at the start of the operation and after each significant change to the look of the interface
Is like a sequence of screenshots that follows the use case execution sequence

7. Organization of a Storyboard
Storyboard Sequence

8. A Bad Interface Storyboard

9. General Quality Attributes for Usability in User Interface Design
Ease of use
Intuitive use and navigation
Consistency across screens
Simplicity – e.g., no clutter, no information overload, no busy graphics
Exit/cancel options for users
Forgiving
Businesslike appearance
Readable and good color contrast