Human Computer Interface

Lecture1. Introduction

UI Hall of Fame or Hall of Shame?

UI Hall of Shame!

▣How do you cancel?

Outline

▣HCI introduction▣Course overview

▣ Human▲ the end-user of a program▲ the others in the organization

▣ Computer▲ the machine the program runs on▲ often split between clients & servers

▣ Interaction▲ the user tells the computer what they want▲ the computer communicates results

Human-Computer Interaction (HCI)

What is HCI?

Design

Organizational & Social Issues

Technology Humans

Task

These Factors Influence Each Other & Design

“Now that mice are included with most computers, applications assume a mouse will be used as a the pointing device”

HumansTechnology

Task

Design

Organizational & Social Issues

These Factors Influence Each Other & Design

“Now that mice are included with most computers, applications assume a mouse will be used as a the pointing device”

HumansTechnology

Task

Design

Organizational & Social Issues

Factors Influence

“People change their knowledge as they perform, i.e., they learn”

HumansTechnology

Task

Design

Organizational & Social Issues

Factors Influence

“People change their knowledge as they perform, i.e., they learn”

HumansTechnology

Task

Design

Organizational & Social Issues

User Interfaces (UIs)

▣ Part of application that allows people▲ to interact with computer▲ to carry out their task

▣ User vs. Customer vs. Client▲ user is a term only used by 2 industries -> bad!▲ customer – the person who will use the product

you build▲ client – the person/company who is paying you

to build itHCI = design, prototyping, evaluation, &

implementation of UIs

Why Study User Interfaces?

▣ Major part of work for “real” programs

▲ approximately 50%

▣ You will work on “real” software

▲ intended for people other than yourself

▣ Bad user interfaces cost

▲ money (5% satisfaction -> up to 85% profits)

▲ lives (Therac-25)

▣ User interfaces hard to get right

▲ people are unpredictable

What is Usability?▣Ease of learning

▲ faster the second time and so on...

▣Recall▲ remember how from one session to the next

▣Productivity▲ perform tasks quickly and efficiently

▣Minimal error rates▲ if they occur, good feedback so user can recover

▣High user satisfaction▲ confident of success

Interface Hall of Shame or Fame?

Interface Hall of Shame

▣Hard to tell the difference between the two icons & names

Who Builds Interfaces?

▣A team of specialists (ideally)▲graphic designers▲interaction / interface designers▲technical writers▲marketers▲test engineers▲software engineers▲customers

Keys to Designing & Building Successful Interfaces

▣Design cycle▣Customer-centered design▣Task analysis & contextual inquiry▣Rapid prototyping▣Evaluation▣Programming▣Iteration

Interface Design Cycle

Design

Prototype

Evaluate

Customer-centered Design

“Know thy Customer”▣Cognitive abilities

▲visual & aural perception

▲physical manipulation

▲memory

▣Organizational / job abilities

▣Keep customers involved throughout project

Task Analysis & Contextual Inquiry

▣Observe existing work practices▣Create scenarios of actual use▣Try-out new ideas before building

software

?

Rapid Prototyping

▣ Build a mock-up of design

▣ Low fidelity techniques▲ paper sketches▲ cut, copy, paste▲ video segments

▣ Interactive prototyping tools▲ HTML, Visual Basic,

HyperCard, Director, etc.

▣ UI builders▲ Fusion, NeXT, Visual Cafe

Fantasy Basketball

Evaluation

▣Test with real customers (participants)

▣Build models▣Low-cost techniques

▲expert evaluation▲walkthroughs

Programming

▣Toolkits▣UI Builders▣Event models▣Input / Output models▣etc.

Iteration

Design

Prototype

Evaluate

At every stage!

Goals of the Course

▣ Learn to design, prototype, & evaluate interfaces▲ discover the tasks of prospective customers▲ cognitive/perceptual constraints that affect design▲ techniques for evaluating an interface design▲ importance of iterative design for usability▲ technology used to prototype & implement UI code▲ how to work together on a team project▲ communicate your results to a group

key to your future success

Project Description

▣ Each of you will propose an interface idea

▲ fixing something you don’t like or a new idea

▣ Groups

▲ 3 students in one group

▲ work with students w/ different skills/interests

▣ Cumulative

▲ apply several HCI methods to a single interface

Project Process Overview

▣ Project proposal (individual)

▣ Break-up into groups

▣ Project task analysis & “sketches”

▲ i.e., rough proposals that can & will change

▣ Low fidelity prototyping & testing

▣ Build 1st interactive prototype

▣ In class presentations & critiques

▣ Heuristic evaluations (individual)

ESP

Low-fi Prototyping & Testing

Project Process Overview (cont.)

▣ Heuristic evaluation summary

▣ Build 2nd interactive prototype

▣ In lab demo & critiques

▣ Customer testing of 2nd prototype

▣ In class presentation & critiques

▣ Build 3rd prototype

▲ “real” interface, but not necessarily “real”

app.

Research Notebook (Example)

Project Examples (cont.)

▣SiteSketch▲web page design▲sketch-based

SiteSketch

Project Examples (cont.)

▣CD Jukebox

CD JukeBox

Project Examples (cont.)

▣Clothes Shopper▲online shopping▲knows your prefs & sizes

Clothes Shopper

Project Examples (cont.)

▣ Interactive TV Guide▲find shows, program VCR to record, etc.

Interactive TV Guide

Project Examples (cont.)

▣Electronic book reader▲ take advantage of all the online texts

on the net

Electronic Book Reader

Project Examples (cont.)

▣Nutrition tracker

Nutrition Tracker

Project Examples (cont.)

▣cUIzine▲recipe tool for the home

cUIzine

Project Examples (cont.)

▣Tech support help desk▲ avoid using the phone for getting help

Tech-Support Help Desk

Project Examples (cont.)

▣Regular expression builder▲visual tool▲lets beginners build regular expression

Regular Expression Builder

Project Examples (cont.)

▣Apartment finder▲ kinda obvious!!! :)

Apartment Finder

Project Examples (cont.)

▣Read WWW over phone▲find structure in pages & build voice

menus▲navigation problem▲cache common paths & reorder?

▣PDA brainstorming tool▲small portable computers in a group

meeting (say Palm Pilots)

PDA Brainstorming

Project Examples (cont.)

▣Runner’s training log▲input daily workouts▲reports▲reminders

▣PDA for shopping▲scan in UPC & tells you whether a good price

▣Home entertainment control -“no more remotes”

Total Entertainment Control

Project Examples (cont.)

▣Football play design program▲sketch players & show how they will

move▲simulate plays

▣Customized web newspaper

Web Newspaper

Project Examples (cont.)

▣PDA Baseball score keeper▲have stats of the players on your PDA▲keep track of what happens during the

game▲upload stats after the game

PDA Baseball Scorekeeper

PalmStock

PalmStock

InkChat

Josh

Back-end

Ed

Brian

Cliff

Rendezvous

Nutrition/Exercise Tracker

Trippin’

Books

▣Two recommended textbooks▲Human-Computer Interaction by Alan

Dix, et al., 2nd edition, 1998.▲Developing User Interfaces by Dan

Olsen, 1998.

Assignments (tentative)

▣Individual▲2-3 written

▣Group▲3-4 written assignments▲all group work handed in on Web (group

web site)

Grading

▣A combination of▲TEST (30%)▲individual assignments,

participation(40%)▲group project (30%)

demos/presentation (group component)project write-ups and exercises