Lecture 1 A Programming Approach to HCI Tue, Apr 2, 2002 CS377A • Spring Quarter 2002 Jan Borchers, Stanford University http://cs377a.stanford.edu/ CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 1 CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 2 Questionnaire Welcome to CS377A! We will start with the course in a few minutes. Instructor: Jan Borchers Meanwhile, please complete the questionnaire; it Acting Assistant Professor, Interactivity Lab helps us with admission if necessary, and lets us tune Research: Post-desktop and multimedia UIs (Personal the course to your background. Orchestra,...) Teaching: HCI since '96, CS247A (3x), CS377C PhD CS Darmstadt, MS,BS CS Karlsruhe&London TA: David Merrill MSCS student, BS SymSys Research: music & speech interfaces, facial animation Teaching: TA since '99 (CS147, CS108, teaching CS193J) CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 3 CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 4 Administrative Information Course organization Course times: Tue+Thu 9:15-10:45 Requirements: CS147, Java (CS193J or equivalent) Course location: Meyer 143 Enrollment: limited to 20 students due to project- Others as announced via mailing list oriented course; we will email you within 24hrs Course home page: http://cs377a.stanford.edu/ Credits: 3 (Letter or CR/NC) Mailing list: Automatic upon registering for the course Substitutes CS247A requirement this academic year Email: Please use [email protected] Grading: which reaches both David and Jan Lab project assignments throughout Quarter (80%) Jan's Open Office: Tue 3:30-4:30, Gates 201 Final exam (20%) CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 5 CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 6 Course Topic Course Topic What makes a UI tick? Part III: UIs Beyond The Desktop Technical concepts, software paradigms and Think beyond today's GUI desktop metaphor technologies behind HCI and user interface E.g.: UIs for CSCW, Ubicomp development The Lab Part I: Key concepts of UI systems Part I: Implementing Simple Reference Window System Window System Architecture Model Part II: Development using several existing GUI toolkits Part II: Review and comparison of seminal systems (such as Java/Swing, InterfaceBuilder) Smalltalk, Mac, X/Motif, AWT/Swing, NeXT/OS X,… Part III: Working with Stanford's Interactive Room OS Paradigms & problems, design future UI systems Overview of UI prototyping tools, with focus on Tcl/Tk CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 7 CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 8 Assignment 0: Reading Assignment "Hello Window System" Use the GraphicsEventSystem library to implement a For Thursday, please read the following article minimalistic window system Stuart K. Card, Jock D. Mackinlay and George G. Creates and displays empty background (desktop) on Robertson: "A morphological analysis of the design space of input devices", ACM Transactions on Information Systems, the screen 9(2), 99-122, 1991 In-class exercise Available from the ACM Digital Library Work in groups as needed (http://www.acm.org/dl/ - Stanford has a site license) or the course home page Instructions: see assignment Submit via upload by end of class, or by midnight if you cannot finish it in class CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 9 CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 10 Review 3-Part course structure I: Theory, II: Systems, III: Future Lecture 2 Accompanying lab assignments Started Simple Reference Window System Thu, Apr 4, 2002 Register in Axess for mailing list http://cs377a.stanford.edu/ CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 11 CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 12 CS377A & HCI A Brief History of User Interfaces 247B Batch-processing No interactive capabilities 448 All user input specified in advance (punch cards, ...) 378 Cog M250 All system output collected at end of program run 277 Hap (printouts,...) -> Applications have no user interface component 377B Cog distinguishable from File I/O 147 547 377A Job Control Languages (example: IBM3090–JCL, anyone?): specify job and parameters 377D Eth 247A CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 13 CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 14 A Brief History of User Interfaces A Brief History of User Interfaces Time-sharing Systems Command-line based interaction with simple terminal Menu-based systems Shorter turnaround (per-line), but similar program structure Discover "Read & Select" over "Memorize & Type" advantage -> Applications read arguments from the command line, return results Still text-based! Example: still visible in Unix commands Example: UCSD Pascal Development Environment Full-screen textual interfaces -> Applications have explicit UI component But: choices are limited to a particular menu item at a time Shorter turnaround (per-character) (hierarchical selection) Interaction starts to feel "real-time" (example: vi) -> Application still "in control" -> Applications receive UI input and react immediately in main "loop" (threading becomes important) CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 15 CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 16 A Brief History of User Interfaces Design Space of Input Devices Graphical User Interface Systems From character generator to bitmap display (Alto/Star/Lisa..) Card, Mackinlay, Robertson 1991 Pointing devices in addition to keyboard Goal: Understand input device design space -> Event-based program structure Insight in space, grouping, performance reasoning, new Most dramatic paradigm shift for application development design ideas User is "in control" Idea: Characterize input devices according to Application only reacts to user (or system) events physical/mechanical/spatial properties Callback paradigm Morphological approach Event handling device designs=points in parameterized design space Initially application-explicit combine primitive moves and composition operators Later system-implicit CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 17 CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 18 Primitive Movements Radio Example Input device maps physical world to application logic Input device := <M, In, S, R, Out, W> Manipulation operator P, dP R, dR Input domain F, dF T, dT Device State Resolution function In->Out Output domain Additional work properties CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 19 CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 20 Composition Design Merge Space Result=cross product (partial E.g., mouse x & y Layout viz.!) Spatial collocation E.g., mouse xy & buttons Complete space How different from merge? := {all possible Connect combinations of Chaining primitives and E.g., mouse output & cursor composition Virtual devices operators}. Mouse=1 point! CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 21 In-Class Group Exercise: Is This Space Complete? Lightning II Place the Lightning II No – it focuses on mechanical movement infrared baton system into the design space Voice Two batons in user's hands, Other senses (touch, smell, ...) 1 tracker in front of user But: Already proposes new devices Batons can be moved in Put circles into the diagram and connect them space freely, but only horizontal and vertical position are detected with 7 bit accuracy (not distance from tracker) Each baton has an on/action button and an off button CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 23 CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 24 Testing Points Effectiveness How well can the intention be communicated? Evaluate mappings according to Various figures of merit possible Expressiveness (conveys meaning exactly) Performance-related Effectiveness (felicity) Device bandwidth (influences time to select target, Visual displays easily express unintended meanings ergonomics and cognitive load) For input devices, expressiveness suffers if |In|≠|Out| Precision Error (% missed, final distance, statistical derivatives) |In|<|Out|: Cannot specify all legal values Learning time |In|>|Out|: Can specify illegal values Mounting / grasping time Pragmatic Device footprint, subjective preferences, cost,... CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 25 CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 26 Example: Device Footprint Assignments Circle size:=device footprint For Tuesday: Black: with 12" monitor Read Window System Architecture chapter from Gosling's White: with 19" monitor NeWS book (James Gosling, David S. H. Rosenthal, and What do we see? Michelle J. Arden, "The NeWS Book", Springer-Verlag, Tablet, mouse expensive 1989, Chapter 3; see paper handout) Worse with larger displays For Thursday: But: Implement basic Window class (see assignment handout) Mouse Acceleration alleviates this (model of C:D ratio?) Higher resolution mice CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 27 CS377A: A Programming Approach to HCI • Jan Borchers • Spring 2002 28 Window Systems: Basic Tasks Basic window system tasks: Input handling: Pass user