HCI-2-Intro.pdf

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-Computer Interaction (HCI) ▣ Human ▲the end-user of a program ▲the others in the organization ▣ Computer...

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-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? Organizational & Task 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” Organizational & Task 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” Organizational & Task Social Issues Design Technology Humans Factors Influence “People change their knowledge as they perform, i.e., they learn” Organizational & Task Social Issues Design Technology Humans Factors Influence “People change their knowledge as they perform, i.e., they learn” Organizational & Task 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, 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 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 ❖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) Low-fi Prototyping & Testing ESP 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  Ed Rendezvous Josh Brian Back- end Cliff 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