Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design...

transcript

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)

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

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?

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

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

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

Benefits of Usable Software and Websites

Gaining a competitive edge

Reducing development and maintenance costs

Improving productivity

Lowering support costs

Reduced training costs

websites:

purpose of site - ?

AmazonExpediamySpaceYouTube

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

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.

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)

BAD USABILITY = NO CUSTOMERS

(Jakob Nielsen)

Amazon - making it simple to find things and order

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

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

Increasing the conversion rate lowers the cost of individual sales

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.

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

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

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

(Gurley cited in McCracken and Wolfe)

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

(Battey 1999 cited in McCracken and Wolfe)

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

Usability and Software Development

what is the purpose of:QuickbooksWS-FTPFinalCut Pro

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

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

Improved productivity

Shopping site:

customers are able to buy easier

Intranet or custom software solution:

employees are able to be more efficient

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

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.

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.

HCI Origins

ease of use becomes an issue

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

HCI Origins

HCI has roots in

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

ergonomics (usually more associated with workplace and repetitive tasks)

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)

Goals of HCI

To develop or improve the

Safety

Utility

Effectiveness

Efficiency

Usability

Appeal

. . . of systems that include computers

Safety

safety of users, safety of data (or both)

Utility

services the system provides

information

instruction

purchases

Effectiveness

User's ability to use the services:

find desired information

enter credit card data

Efficiency

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

Usability

ease of learning

ease of use

Appeal

How well users like the system

first impressions

long-term satisfaction

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

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

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

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

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

Needs AnalysisUser and Task AnalysisFunctional AnalysisRequirements AnalysisSetting Usability SpecificationsDesignPrototypingEvaluation

Needs Analysis

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

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?

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

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

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

Requirements AnalysisFormal specifications...

may include:Data DictionariesEntity Relationship DiagramsObject-Oriented Modelling

Setting Usability Specifications

performance measures

preference measures

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)

Setting Usability Specificationspreference measures

interview or questionnaire

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

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_____

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.

Design

Organization and Appearance

organize content according to user's expectations

navigation

look and feel

PrototypingA model from which the product will be implemented

global prototypinglocal prototyping

evolutionarythrow-away

high-fidelityLow-fidelity

pros & cons / pitfalls...

Evaluation

testing the prototype

user-based evaluation (developers observe users)

expert-based evaluation(experts critique usability)

HCI Methodology for WebsiteDevelopment ( Nicki Danino)

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.

2. Conceptual Proposal

Outline site design and architecture at an abstract level.

Perform a task analysis to identify essential features.

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.

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.

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

Lecture 2: Usability, HCI and User-Centered Design Methodology Lecture prepared for Interface Design...

Documents