Human Computer Interface Lecture 1 Introduction UI Hall

Human Computer Interface Lecture 1. Introduction

UI Hall of Fame or Hall of Shame?

UI Hall of Shame! ▣How do you cancel?

Outline ▣HCI introduction ▣Course overview

Human-Computer Interaction (HCI) ▣ 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

What is HCI? Task Organizational & Social Issues Design Technology Humans

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

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

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

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

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, Hyper. Card, Director, etc. ▣ UI builders ▲ Fusion, Ne. XT, 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 At every stage! Design Prototype Evaluate

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 vkey 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 1 st interactive prototype ▣ In class presentations & critiques ▣ Heuristic evaluations (individual)

Low-fi Prototyping & Testing ESP

Project Process Overview (cont. ) ▣ Heuristic evaluation summary ▣ Build 2 nd interactive prototype ▣ In lab demo & critiques ▣ Customer testing of 2 nd prototype ▣ In class presentation & critiques ▣ Build 3 rd prototype ▲“real” interface, but not necessarily “real” app.

Research Notebook (Example)

Project Examples (cont. ) ▣ Site. Sketch ▲web page design ▲sketch-based

Site. Sketch

Project Examples (cont. ) ▣CD Jukebox

CD Juke. Box

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 ▲ take book reader advantage of all the online texts on the net

Electronic Book Reader

Project Examples (cont. ) ▣ Nutrition tracker

Nutrition Tracker

Project Examples (cont. ) ▣ c. UIzine ▲recipe tool for the home

c. UIzine

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 ▲ kinda finder 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 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

Palm. Stock

Ink. Chat

Ed Rendezvous Josh Brian Backend Cliff

Nutrition/Exercise Tracker

Trippin’

Books ▣Two recommended textbooks ▲Human-Computer Interaction by Alan Dix, et al. , 2 nd 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%) vdemos/presentation (group component) vproject write-ups and exercises