User Centered Design: An Introduction to the Design, Prototyping, and Evaluation of User Interfaces

1
User Centered DesignAn Introduction to the
Design, Prototyping, and Evaluation of User
Interfaces

• IS 485, Professor Matt Thatcher

2
Interface Hall of Shame
Milltronics' Dolphin Plus (a configuration
package for industrial level and flow sensors)
3
Interface Hall of Shame
4
A Proposed Redesign
5
Interface Hall of Shame
6
Agenda

• Who am I?
• HCI introduction
• Usability defined
• Iterative, user-centered design
• Waterfall vs. prototyping
• UI designer as architect
• a discussion of the analogy
• an overview of methods and tools
• Course administration

7
Who am I?

• Associate Professor of MIS
• The Wharton School, University of Penn
• Ph.D and M.S. in Information Technology /
  Economics
• B.S. in Finance and Decision Sciences
• Research interests
• economic impact of IT on firms/industry
• IT value
• software patent policy design
• Course information
• http//faculty.unlv.edu/thatcher/is485/

8
What is HCI?

• Human
• the end-user of the program
• Computer
• the machine that the program runs on
• Interaction
• the user tells the computer what she wants
  (inputs)
• the computer communicates the results (outputs)

9
Where Does HCI Occur?
User
User Interface
Applications Software
Systems Software Data base and Telecommunications
Hardware
10
User Interfaces (UIs)

• Part of the program that allows
• users to interact with the computer
• users to carry out their tasks
• User vs. customer vs. client
• user is a term not used in many industries
• customer the person who will use the product
  you build
• client - the person/company that is paying you
  to build it
• The UI is the system to the user
• everything the user hears, sees, touches, etc.
• metaphors, organization, navigation, appearance,
  interaction
• HCI designing, prototyping, and evaluating UIs

11
What Do Users Want?

• Well designed software applications exhibit

Technical Soundness
Functionality
Usability
12
Whats the Difference?
Functionality
It works as the specs say it will
It is available and reliable (it works the same
way every time)
Technical Soundness
People can perform their tasks quickly and easily
Usability
13
Why is Usability So Important?
User
User Interface
Applications Software
Systems Software Data base and Telecommunications
Hardware
14
Measuring Usability

• Easy to learn
• how long does it take for typical users to learn
  relevant tasks?
• Easy to remember
• how easy is it to remember from one session to
  the next?
• Efficient to use
• how long does it take to perform benchmark tasks?
• Minimal error rates
• how many and what kinds of errors are commonly
  made?
• if they occur, is good feedback provided so users
  can recover
• High user satisfaction (subjectively pleasing)
• confident of success
• visually pleasing

15
Keys to Designing and Building Successful, Highly
Usable UIs

• User-centered design
• Task analysis
• Iterative UI design cycle
• design
• rapid prototyping
• evaluation
• iteration
• Programming
• Implementation...

16
User-Centered Design (UCD)(Part 1)

• A highly structured, comprehensive software
  development methodology driven by
• clearly specified, task-oriented business
  objectives
• recognition of user needs, limitations, and
  preferences
• not technology-centered

17
UCD (Part 1)Task Analysis
18
User-Centered Design (UCD)(Part 2)

• Information collected using task analysis is
  scientifically applied in the design,
  prototyping, evaluation, and implementation of
  products and services

19
UCD (Part 2)The Prototyping Model
Design
Evaluate
Prototype
20
GUI Screen Design

• Metaphors
• essential concepts conveyed through words and
  images
• Organization of content (data and functions)
• screen layout and screen sequencing
• screen controls/widgets (e.g., check boxes,
  option buttons)
• Navigation
• efficient movement along the content via menus,
  icons, dialog boxes, buttons, windows,
  hyperlinks, commands, etc.
• Appearance (the look)
• visual (typefaces, fonts, size, typesetting,
  color, etc.), auditory, ornamental background,
  etc.
• Interaction (the feel)
• effective input and feedback sequencing (physical
  I/O devices)

21
What is a Prototype?

• Smaller representation of the system
• a way to see what something will look like before
  it is built
• less reliable, robust, and complete than final
  systems
• Communicates a physical representation of the
  proposed design to the user
• Built with tools, not production code
• different construction materials than the final
  system
• much faster and cheaper to develop
• Keeps the design centered on the user
• allows user involvement in testing design ideas
• supports iterative design based on user feedback

22
A Prototype of a Palm Banking Application

• Web-based (html) representation of a software
  application for a handheld technology

23
Rapid Prototyping

• Build a mock-up of the UI design
• Low-fidelity techniques
• paper-based sketches and storyboards
• chauffeured prototypes
• Visio, SmartDraw, drawing tools, etc.
• High-Fidelity techniques
• interactive, computer-based prototypes
• Access, Dreamweaver, Frontpage, GoLive, HTML,
  Visual Basic, Director, Flash, HyperCard,
  PowerPoint, Excel, etc.

24
Evaluation

• Test with real users (participants)
• user testing
• Expert reviews (evaluations w/o users)
• heuristic evaluations
• cognitive walkthroughs
• pluralistic walkthroughs
• consistency checks
• and many more

25
Iterate!
Design
Evaluate
Prototype
26
Waterfall vs. Prototyping
Initiation
Application Description
Analysis
Requirements Specification
Design
System Design
Implement
Product
27
Problems with WF

• WF lacks users perspective
• technology-driven
• focus is on the client, not the user
• does not involve user until implementation
  stage
• sees user role as finding bugs in the code or
  other minor problems
• WF has no feedback (sequential, not iterative)
• groups hand off discrete deliverables to the
  next group in the WF process
• functional specs are frozen early in the process
• high cost of fixing errors
• increases by factor of 10 at each stage
• iterative design finds these earlier

28
User-Centered Design (UCD)

• When rigorously applied, a UCD approach
• keeps the design centered on users (not
  technology)
• keep users involved throughout process (early and
  often)
• meets both user needs and the business objectives
  of the sponsoring organization

29
Why Do Iterative User-Centered Design?

• Nearly 25 of all applications projects fail.
  Why?
• overrun budgets management pulls the plug
• others complete, but are too hard to learn/use
• Solution is iterative user-centered design. Why?
• easier to learn use products sell better
• can help keep a product on/ahead of schedule
• reduces training costs, technical support,
  maintenance efforts, product updates
• satisfied users leads to reputation effects (or
  better employee retention)

30
Who Builds Interfaces?

• A team of specialists (ideally)
• graphic designers
• interaction / interface designers
• technical writers
• marketers
• technical support
• test engineers
• software engineers
• customers/users
• client
• and more

31
UI Designer as Architect (Clarifying UCD)

• Design
• users (home buyers)
• tasks (functions, activities, or units of work)
• environment (where are tasks performed?)
• technology (construction materials)
• Prototyping and evaluation
• low-fi sketches (blueprints)
• high-fi representations (small-scale models)
• Iterate
• Programming (construction)
• dont commit to brick-and-mortar too fast
• Implement (move-in)

32
What Does An Architect Want to Know Before
Designing a Home?
Environment (e.g.,climate)
Construction Materials
Home Buyer
33
The Architects Prototyping Model
Design
Evaluate
Small-scale models
Construction only after sufficient iterations
34
Summary

• UI design is about
• creating a user experience that is easy to
  understand
• keeping human concerns at the center of the
  design process
• focusing on usability
• Task analysis
• method of identifying and characterizing the
  users, their tasks, and the context
• Prototyping model
• iterative, user-centered approach that involves
  users early and often

35
Goals of the Course

• Learn to design, prototype, and evaluate UIs
• the importance of human factors in the design of
  interactive software applications
• cognitive / perceptual constraints that affect UI
  design
• task analysis and contextual inquiry to identify
  software requirements
• technology tools used to prototype UIs
• techniques used to evaluate a UI design
• importance of iterative design for usability
• real-world applications of course concepts and
  tools
• how to work together on a team project
• how to communicate your results to a group

36
How IS 485 Fits Into the MIS Curriculum?

• Most courses focus on learning technology
• programming languages, data structures,
  databases, telecommunications
• IS 485 is concerned with design and evaluation
• focus on human factors
• assume you can program and learn new languages
• technology as a tool to evaluate via prototyping
• skills will be important in any career you choose

37
Administrivia - Class Structure

• Registration
• everyone registered?
• Syllabus
• look over very carefully
• Readings
• electronic reserves
• internet readings
• downloadable documents

38
Administrivia - Class Structure

• Teaching style
• lectures
• case studies (design, prototyping, and
  evaluation)
• interactive, in-class assignments
• student presentations
• computer demonstrations and tutorials
• Grading
• project milestones (50)
• mid-term exam (30)
• attendance/participation (20)

39
Administrivia - Class Structure

• Course web-site
• http//faculty.unlv.edu/thatcher/is485/
• course materials, notes, announcements, etc.
• Regarding missed exams
• Honor code

40
Responsibilities

• Me
• make sure you understand
• keep you amused and interested in coming to class
• make this class useful to you for getting and
  keeping a job
• You
• do the readings
• come to class ready to participate
• find help when you need it
• tell me if I am going too fast/slow

41
The Quality Circle

• Feedback from YOU is critical to the success of
  the course
• 1 student -gt liaison bet. the class and me
• have lunch w/ me 4 times during the semester
• students in the class can approach (or email) the
  representatives to discuss problems or concerns
• responsible for passing the anonymous feedback to
  me
• Volunteers
• your name and email address will be posted to the
  website

42
Any Questions or Comments?
43
Next Time

• Team project
• Read through the course web site
• schedule
• syllabus
• project
• milestones
• team meetings look at Team Feedback 1

44
Teams

• One member from each team should
• go to the left side of the white board
• write down the name of each team member as of now
• Students without a team should
• go to the board
• write your name on the right hand side of the
  board
• Lets figure this out
• I need to take pictures and get emails