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

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: http://www.usernomics.com/usability.html

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

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: http://ergo.human.cornell.edu/ahtutorials/interface.html Virginia Tech: http://www.edtech.vt.edu/edtech/id/interface/ Carnegie Mellon: http://www.usernomics.com/user-interface-design.html

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)

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

Organization of a Storyboard Storyboard Sequence

A Bad Interface Storyboard

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