Human Computer Interface Lecture1. Introduction. UI Hall of Fame or Hall of Shame?

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


Factors Influence

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

HumansTechnology

Task

Design


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


▣CD Jukebox

CD JukeBox


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

Clothes Shopper


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

Interactive TV Guide


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

on the net

Electronic Book Reader


▣Nutrition tracker

Nutrition Tracker


▣cUIzine▲recipe tool for the home

cUIzine


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

Tech-Support Help Desk


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

Regular Expression Builder


▣Apartment finder▲ kinda obvious!!! :)

Apartment Finder


▣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


▣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


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

move▲simulate plays

▣Customized web newspaper

Web Newspaper


▣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

Human Computer Interface Lecture1. Introduction. UI Hall of Fame or Hall of Shame?

Documents

Transcript of Human Computer Interface Lecture1. Introduction. UI Hall of Fame or Hall of Shame?