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 TechnologyHumans 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” Humans Technology 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” Humans Technology Task Design Organizational & Social Issues

Factors Influence “People change their knowledge as they perform, i.e., they learn” Humans Technology Task Design Organizational & Social Issues

Factors Influence “People change their knowledge as they perform, i.e., they learn” Humans Technology 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 it HCI = 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

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, ▲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