Designing Appropriate User Interfaces Professor Larry Heimann Carnegie Mellon University Lecture Notes — Fall 1999

Agenda & Announcements Announcements What is the Purpose of an Interface? Top Usability Problems with GUIs The Interface Development Process Golden Rules of GUI Design Examples of Poor GUI Design

Purposes of a Software Interface A tool for accomplishing tasks A search mechanism to find files, data A learning tool An entertainment vehicle (e.g., playing games)

Top Usability Problems with GUIs (with apologies to Letterman and thanks to the IBM Usability Lab) 10. Complex linkage between and w/in applications 9. Single-direction languages 8. Input and direct-manipulation limits 7. Highlighting and selection limitations 6. Unclear step sequences 5. More steps to manage the interface than to do tasks 4. Lack of system anticipation and intelligence 3. Inadequate feedback and confirmation 2. Ambiguous menus and icons 1. Inadequate error messages, help, tutorials, & documentation

The Interface Development Process 3 stage process for developing user interfaces –Analysis –Design –Construction Cyclical process in developing an interface Does the interface development occur: –in advance of software coding and design? –concurrently with software coding and design? –towards the end of software coding and design?

Phase I: Analysis Purpose of the analysis phase is to develop complete picture of interface requirements Steps in analysis phase: –Identifying scope –Developing user profiles –Gathering data –Documenting current tasks –Documenting opportunities –Describing future tasks –Developing usability specs –Developing scenarios

Phase II: Design Process Design stage is usually a team effort; tends to involve lots of creativity & brainstorming –interface designers (to translate tasks into objects, metaphors, etc.) –users (to address team questions and give design feedback) –technical personnel (to provide guidance on technical constraints) –graphical designers (sketch ideas; work on aesthetics) –training/support/documentation specialist Typically begin these design sessions looking at the most frequent/critical tasks

Design Step 1: Choose Major User Objects for Interface User objects are not GUI objects Using the use cases to identify objects –look for things (nouns, objects) that user has to manipulate or takes some action on (view, edit, enter, etc.) –identify those items which are really sub-objects of other items in the interface –eliminate objects users don’t really need to see or directly interact with in the interface Listing object attributes Listing user actions on task objects

Example of an Object- Action Table

Step 2: Select Metaphors Metaphors provide the mental model for user; connect what is known w/ what is unfamiliar Keys to effective metaphors: –metaphors should hold up to users’ primary assumptions –does not have to be a full visual representation –best metaphors are simple; may not be unique –can find effective metaphors in the physical world –more than one is okay; often more are necessary Metaphors assist, shouldn’t control interface

Step 3: Storyboard Storyboards are quick sketches of objects, actions, metaphors and representation ideas. Key points on storyboarding –sketch on an erasable medium –keep storyboards rough –whole team needs to be involved (users, technical people) –begin with most frequent tasks Storyboards are an opportunity to look at a variety of design options that connect objects

Step 4: Create High Level Design Select or adapt a style/standard Identify main windows and related actions Identify home bases and launching pads Identify how users access main windows Assign user actions for main windows Create design mockups Review and revise high-level design as needed

Step 5: Develop Support Plan Identify user knowledge and skill deficiencies –user profiles can reveal potential deficiencies –seeing users working w/ prototypes can also be revealing Generate support plan, which may include: –job aids (quick reference cards, keyboard templates) –classroom or on-the-job training –computer-based training (tutorials, cue cards) –online manuals –video courses –hot lines

Phase III: Construction Develop prototype –doesn’t need to do data processing, but should allow users to navigate within the interface and use controls –careful not to develop unrealistic expectations of system capabilities –Don’t lose control of prototype to marketing or coders Test prototype –include outside parties, key stakeholders, and users –careful not to be too defensive, too accomodating Document the design

Golden Rule 1: Place Users in Control Some things that help keep users in control: –use modes judiciously –allow users to use either keyboard or mouse –allow users to change focus –display descriptive text and messages –provide feedback and allow for reversible actions –provide meaningful paths and exits –accommodate users of different skill levels –allow users to customize interface –allow direct manipulation of interface objects

Golden Rule 2: Reduce Users’ Memory Load Some things that reduce user memory load: –relieve short-term memory –rely on recognition, not recall –provide visual cues –provide defaults, undo, and redo –provide interface shortcuts –promote an object-action syntax –use appropriate metaphors –use progressive disclosures –promote visual clarity

Golden Rule 3: Make Interface Consistent Some things that help promote consistency: –sustain the context of the users’ tasks –maintain consistency within and across products –keep interaction results the same –provide aesthetic appeal and integrity (but never at the cost of dcreasing usability!) –encourage exploration

Examples of Poor GUI Designs Windows not even following MS guidelines IBM Real Phone -- overdoing metaphors Error Messages from Heck (the kingdom of insufficient light)