+ All Categories
Transcript
Page 1: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Lecture 2: Usability, HCI and User-Centered Design Methodology

Lecture prepared for Interface Design DMS 546/DMS 446

This lecture is based on chapters 1 and 3 of User-Centered Website Development (McCracken and Wolfe), chapter 1 of Designing Web Usability (Jakob Nielsen), “Human-Computer Interaction and Your Site” (Nicky Danino - http://www.sitepoint.com/article/computer-interaction-site), on a Powerpoint presentation at http://www.vtc.edu.hk/ive/ty/ict/, a Powerpoint presentation by Franz J. Kurfess at http://users.csc.calpoly.edu/~fkurfess/Courses/484/W07/Slides and slides provided with Interaction Design (Preece, Rogers, Sharp)

Page 2: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Focusing on Usability

The benefits of making a website more usable

The importance of understanding users' needs

The history and goals of Human-Computer Interaction

The methodology of user-centered development

Page 3: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Introduction

Have you ever been unable to find something in a website that you know is there?

Have you ever been enraged by a useless or misleading error message?

Have you ever wondered why a website needs to know your e-mail address, and left the site for fear it might be misused?

Page 4: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

It doesn’t have to be that way

You can design websites and software products that...

are pleasant and convenient for your users

let them accomplish their goals

The key is to think about your users...

learn about them

watch them work, in their workplace

interview them, also in their workplace

Page 5: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Logical design or ambiguous design?

Where do you plug the mouse?

Where do you plug the keyboard?

top or bottom connector?

Do the color coded icons help?from: www.baddesigns.com

Page 6: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

How to design them more logically

(1) A provides direct adjacent mapping between icon and connector

(2) B provides color coding to associate the connectors with the labels

from: www.baddesigns.com

Page 7: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Benefits of Usable Software and Websites

Gaining a competitive edge

Reducing development and maintenance costs

Improving productivity

Lowering support costs

Reduced training costs

Page 8: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Gaining a competitive edge

websites:

purpose of site - ?

AmazonExpediamySpaceYouTube

Page 9: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Gaining a competitive edge

Usability is a major factor in the conversion rate of a site...

Page 10: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Gaining a competitive edge

Conversion rate refers to “the percentage of visitors who take action on the site”

Getting the user to take an action...

...converting visitors to purchasers, registered users, etc.

Page 11: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Gaining a competitive edge

In physical product design and packaged software design...

users buy first and experience usability after...

on the web, users typically experience usability first and buy later.

(Jakob Nielsen)

Page 12: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Gaining a competitive edge

BAD USABILITY = NO CUSTOMERS

(Jakob Nielsen)

Page 13: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Gaining a competitive edge

Amazon - making it simple to find things and order

Ease of use is the most important driver of high conversion rates

Page 14: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Gaining a competitive edge

The average conversion rate for shopping sites is 3- 5% (McCracken and Wolfe)

Increasing the conversion rate lowers the cost of individual sales

Page 15: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Gaining a competitive edge

Example Scenario:

You spend $2500 on advertising that generates 5000 visits to a shopping site.

Suppose the conversion rate is 2%...

2% of 5000 visits = 100 purchases

$2500/100 = each purchase cost $25 in advertising.

Page 16: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Gaining a competitive edge

If the conversion rate is 4%, then you attract200 purchases...

...each purchase would cost $12.50 in advertising.

Page 17: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Gaining a competitive edge

The higher the conversion rate, the better the sales and the greater the profit margins.

(Gurley cited in McCracken and Wolfe)

Page 18: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Gaining a competitive edge

When IBM launched the “ShopIBM” website their hits went up 120%, but sales went up 400%.

(Battey 1999 cited in McCracken and Wolfe)

Page 19: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Gaining a competitive edge

Usable websites have highest conversion rates.

Difficulty finding item or figuring out how to buy it leads to frustration and no sale.

An enjoyable experience leads to more time spent on site, more purchases, and repeat purchases

Page 20: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Gaining a competitive edge

Usability and Software Development

what is the purpose of:QuickbooksWS-FTPFinalCut Pro

Page 21: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Gaining a competitive edge

Software products provide a service, allow people to achieve a certain goal.

Usable software is a better value for customer.

Usability is a major factor in:

attracting users retaining usersselling upgrades & extensions

Page 22: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Reducing development and maintenance costs

Learn about users first, and you will avoid:

implementing features users don’t want

creating features that are annoying or inefficient

high cost of making changes late in the development cycle

Page 23: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Improved productivity

Shopping site:

customers are able to buy easier

Intranet or custom software solution:

employees are able to be more efficient

Page 24: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Lower support costs

calls to customer support can cost the company $12 to $100 or more per call

avoid user problems by making the site more usable

Page 25: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

HCI Origins

Page 26: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

HCI Origins

Scenario:

$3,000,000 mainframe computer (1966)compared to the cost of the computer, salaries

are cheap. Therefore train an expert to operate the computer. Relatively few computer operators are needed.

Page 27: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

HCI Origins

But with the expanding computer market(IBM Personal Computer for home and small

business released in 1981...) cheaper computers are operated by people who are not technicians or computer scientists.

Page 28: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

HCI Origins

ease of use becomes an issue

industry needs to find ways to make the computer usable by a broad market

Page 29: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

HCI Origins

HCI has roots in

Human Factors (machinery operation - origins in WWII-era aviation)

ergonomics (usually more associated with workplace and repetitive tasks)

Page 30: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

What is HCI?

“Human Computer Interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of the major phenomena surrounding them.” (ACM SIGCHI working definition)

Page 31: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Goals of HCI

To develop or improve the

Safety

Utility

Effectiveness

Efficiency

Usability

Appeal

. . . of systems that include computers

Page 32: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Safety

safety of users, safety of data (or both)

Page 33: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Utility

services the system provides

information

instruction

purchases

etc.

Page 34: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Effectiveness

User's ability to use the services:

find desired information

enter credit card data

etc.

Page 35: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Efficiency

How quickly users can accomplish goals or finish work using the system

Page 36: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Usability

ease of learning

ease of use

Page 37: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Appeal

How well users like the system

first impressions

long-term satisfaction

Page 38: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Design Process Overview

Page 39: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Design Process Overview

Need to take into account:Who the users areWhat activities are being carried outWhere the interaction is taking place

Need to optimise the interactions users have with a product

Such that they match the users activities and needs

Page 40: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Design Process OverviewUnderstanding users’ needs

Need to take into account what people are good and bad at

Consider what might help people in the way they currently do things

Listen to what people want and get them involved

Use tried and tested user-based methods

Page 41: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Design Process OverviewWhat is involved in the process of HCI design?

Identify needs and establish requirements

Develop alternative designs

Build interactive prototypes that can be communicated and assessed

Evaluate what is being built throughout the process

Page 42: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Design Process OverviewCore characteristics of interaction design

users should be involved through the development of the project

specific usability and user experience goals need to be identified, clearly documented and agreed at the beginning of the project

iteration is needed through the core activities

Page 43: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

User-Centered Development

Page 44: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

User-Centered Development

Characteristics of User-Centered Development:

iterative process

Design -> Prototype -> Evaluate if it passes evaluation of usability specifications, it is ready to implement

if it fails, then repeat the Design -> Prototype -> Evaluate process

Page 45: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

User-Centered Development

Needs AnalysisUser and Task AnalysisFunctional AnalysisRequirements AnalysisSetting Usability SpecificationsDesignPrototypingEvaluation

Page 46: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

User-Centered Development

Needs Analysis

A few sentences summarizing nature and purpose of the proposed system.

Page 47: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

User-Centered Development

Needs Analysis

example: “The redesigned website for the Plains Art Council

in Burkmere, SD will foster greater participation in the arts in the local community by providing a comprehensive listing of available art programs and services and by creating an online gallery for local artists.”

Q: who is the audience for this site?

Page 48: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

User-Centered Development

User and Task Analysis

User Analysis characterizes the people who will use your site.

age, education, familiarity with computers,

experience or expectations with similar software or sites

Page 49: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

User-Centered Development

User and Task AnalysisTask Analysis looks at what the users will want

to accomplish using the software or site goals:

buy shoescommunicate with friends

specific tasks:search, view images, compare prices, purchase send and receive messages, upload and view photos, etc

Page 50: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

User-Centered Development

Functional AnalysisThe computer services that will be needed for the tasks.

search and sort capability

“shopping cart,” secure credit card transaction

at this stage – make decisions about how much functionality to build (could just put a telephone number instead of online reservation, etc.)

Page 51: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

User-Centered Development

Requirements AnalysisFormal specifications...

may include:Data DictionariesEntity Relationship DiagramsObject-Oriented Modelling

Page 52: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

User-Centered Development

Setting Usability Specifications

performance measures

preference measures

Page 53: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

User-Centered Development

Setting Usability Specificationsperformance measures are directly observable

examples:time to fill out billing an shipping informationnumber of clicks to locate what is playing at a specific movie theater# of tasks completed correctly / # of errorshow many times did user need to type additional info on a form? # of negative comments or facial expressions(?)what parts of the screen the user looked at (eyetracking)

Page 54: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

User-Centered Development

Setting Usability Specificationspreference measures

interview or questionnaire

usefulness of some aspect?ease of use overall?appearance?convenience?first impression?did website meet expectations?

Page 55: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

User-Centered Development

Setting Usability Specificationspreference measures

Scale of 1-5 1 = strongly disagree 2 = disagree 3 = neutral 4 = agree 5 = strongly agree

Overall the site is easy to use _____

When I searched for an item the results were useful to me_____

I could pay for my purchase quickly_____

Page 56: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

User-Centered Development

Setting Usability Specifications

Setting usability specifications means setting a target number for performance and preference measures.

Don't just pick arbitrary goals!

Work from evaluations of the existing site or software interface or from information about the quality of comparable products.

Page 57: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

User-Centered Development

Design

Organization and Appearance

organize content according to user's expectations

navigation

look and feel

Page 58: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

User-Centered Development

PrototypingA model from which the product will be implemented

global prototypinglocal prototyping

evolutionarythrow-away

high-fidelityLow-fidelity

pros & cons / pitfalls...

Page 59: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

User-Centered Development

Evaluation

testing the prototype

user-based evaluation (developers observe users)

expert-based evaluation(experts critique usability)

Page 60: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

HCI Methodology for WebsiteDevelopment ( Nicki Danino)

Page 61: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

HCI Methodology for WebsiteDevelopment

1. Requirements AnalysisEstablish the goals for the website from the standpoint of the user and the business.

Agree on the users' needs and aim for usability requirements.

Appraise existing versions of the website (if any).

Carry out an analysis of the competition.

Complete discussions with potential users and questionnaires.

Page 62: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

HCI Methodology for WebsiteDevelopment

2. Conceptual Proposal

Outline site design and architecture at an abstract level.

Perform a task analysis to identify essential features.

Page 63: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

HCI Methodology for WebsiteDevelopment

3. Prototyping

Create visual representations (mock ups) or interactive representations (prototypes) of the website.

Evaluate usability using a proven method.

Using the results, create more mock ups or improve the prototypes.

Repeat this process until the design and usability goals are met.

Page 64: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

HCI Methodology for WebsiteDevelopment

4. Development

Create the final product.

Evaluate functionality through testing, quality assurance, usability testing, and field testing.

Use the evaluation results to improve the product.

Repeat this process until the business goals are met.

Page 65: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

HCI Methodology for WebsiteDevelopment

5. Launch and Housekeeping

Launch the Website.

Maintain and tweak with user feedback (housekeeping).

Use the feedback to create new requirements, and begin major design improvements (system iteration).

Page 66: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

More on HCI Methodology

Chart with process broken down into tasks, purposes, techniques and deliverables:

http://www.knabedesign.com/articles/methodology.html

Page 67: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Something to think about.

Page 68: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Something to think about.

Who Does HCI Serve?

Page 69: Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design DMS 546/DMS 446 This lecture is based on chapters.

Top Related