Application Design

1
Application Design Development (67-272)

• Dr. Kevin Stolarick

2
Agenda

• 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

3
Why Designers Go Astray

• Ignorance
• Put aesthetics first (Flash)
• Worship complexity (Flash)
• Designers forget they are not typical users
• Identify the wrong group of users
• Designers give way to creeping featurism

4
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)

5
Top 10 Usability Problems with GUIs

• 10. Complex linkage between and w/in
  applications
• 9. Single-direction linkages
• 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

6
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?

7
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

8
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

9
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 dont really need to see
  or directly interact with in the interface
• Listing object attributes
• Listing user actions on task objects

10
Step 2 Select Metaphors

• Metaphors provide the mental model for user
  connect what is known to 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, shouldnt control interface

11
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

12
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

13
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

14
Phase III Construction

• Develop prototype
• doesnt 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
• Dont lose control of prototype to marketing or
  coders
• Test prototype
• include outside parties, key stakeholders, and
  users
• careful not to be too defensive, too
  accommodating
• Document the design

15
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

16
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

17
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 decreasing usability!)
• encourage exploration

18
Examples of Poor GUI Designs

• Can be seen at http//digilander.libero.it/chiedil
  oapippo/Engineering/iarchitect/shame.htm
• Others at
• http//www.webpagesthatsuck.com/
• http//www.pixelcentric.net/x-shame/

19
Error Messages in Error