Introduction to User Interfaces: CS 349

1. Introduction to User Interfaces: CS 349 Overview of Paradigms Spring 2007

2. Overview • Administrivia • A bit about me • Quick course overview • Understanding HCI and User Interfaces • Interaction Paradigms

3. Take-Aways from this Lecture • Human-Computer Interaction versus User Interface • Interface is the vehicle • Interaction is the discourse

4. Administrivia • Note on Email: • No gmail, yahoo, hotwire accounts • Subject to seizure by US government (Patriot Act) • Violates Canadian privacy policy; professor and TAs cannot respond to emails • Use Waterloo account, please • TAs: • Jaime Ruiz • Christine Szentgryorgyi • Martin Talbot • Contact information on web

5. Apologies • Away at a conference until Saturday. • ACM CHI

6. Endpoint Prediction • Can we predict target of pointing tasks? • AND how accurately? Button 1 Button 2 Button 3 Button 4 Button 5 Button 6 User’s Motion Path Start Button 7 Button 8 Button 9 Target

7. Speed Time 90% T1 T2 Position Speed Time Approach

8. Apologies • Away at a conference until Saturday. • ACM CHI • Also this term: • No class Monday, May 28 – Wednesday, May 30th • Graphics Interface • No class Monday, July 23

9. All About Me UPEI San Francisco State Queen’s University 1990 2000 2006

10. Research • Pen Computing • Sketch Recognition • Inferring Intention • Mode-Based Interaction • Human Movement • Kinematic models • Information foraging • Browsing, etc.

11. Human Computer Interaction • Human • The user of a computer program, computerized device, or other information technology artifact • Computer • The physical device, artifact, or hardware that runs the program • Interaction • The communication between the human and the computer

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

13. Organizational & Social Issues Task Design Technology Humans What is HCI? Mice influence design

14. Organizational & Social Issues Task Design Technology Humans What is HCI? Spreadsheets create tasks

15. Organizational & Social Issues Task Design Technology Humans What is HCI? People learn to use aps

16. Human Computer Interaction “The discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them.”

17. User interfaces vs. HCI • The user interface is the vehicle for human computer interaction • HCI is the design, prototyping, evaluation and implementation of user interfaces • Users: • Only 2 industries use this term -> BAD • Think customers, clients, or even people!

18. User Interface • interface (I/F): • … • a common boundary or interconnection between systems, equipment, concepts, or human beings. • a thing or circumstance that enables separate and sometimes incompatible elements to coordinate effectively: The organization serves as an interface between the state government and the public. • Computers. • equipment or programs designed to communicate information from one system of computing devices or programs to another. • any arrangement for such communication.

19. User Interface • A program that controls a display for the user (usually on a computer monitor) and that allows the user to interact with the system • About presentation • Visual • Auditory, physical, etc. • Supports interaction between human and computer • Interaction = dialog • This course: • Building and evaluating user interfaces • Design is contained in a second course, offered last semester as CS 489

20. How do we know if we get it right? • We don’t • No one correct way • Can always be improved • Usability metrics include: • Time • Error rate • User’s satisfaction • Principles include • Learnability • Flexibility • Robustness

21. Administrivia • Syllabus • Grading scheme • Assignment 1

22. Syllabus • Part 1: Topics/Introduction • Covers some background • Gives you a feel for overall course • Gives you a feel for UI components of OS • Part 2: Input and Output Devices • Graphics and graphic display technologies • Input device taxonomies • Part 3: User centred design • Various aspects of putting it all together • Text: Olsen’s Principles of Interactive Systems • http://icie.cs.byu.edu/UIBook/

23. Course contents (1) • Graphical output and input, including: • XWindows • Display technology • Human perception of information and visual design • Input devices • Human motor performance • Event driven programming, including: • Java’s event model • Model-View-Controller architecture • Custom Events • Interaction

24. Course contents (2) • Widget Toolkits • Java Swing • Implementing custom components • Layout and Java Layout managers • Describing User Interfaces • Production Systems and Formal Languages • Evaluation • Experimental evaluation • Usability Engineering • Qualitative Evaluation

25. Course contents (3) • Introductory graphics • Affine transforms • Direct manipulation • 2D projections of 3D scenes • Selected topics • Novel interaction (e.g. handheld, pen computing, cellular phone development) • Scripting languages

26. Grading Scheme • Components • Assignments (5) • 50% • Midterm (Time TBD) • 15% • Final (Time TBD • 35% • Will this be on the mid-term? • Yes • Will this be on the final? • Yes

27. Assignments • Five assignments • XWindows (historical assignment): due Monday May 21 • Implement a simple game using XLib programming interface • Screen design with no widgets • Widget Toolkits: due Monday June 4 • Build a Visual GUI designer for the XLib interface • Should also support even handling • Designing for users: understanding undo: due Monday June 18 • Implement a UI that incorporates undo features • Custom Controls and Evaluation: due Monday July 9 • Implement a specified control • Evaluate control versus similar • Graphics and direct manipulation: due Monday July 23 • A program that incorporates rotation, scaling, intro. graphics

28. Assignment 1 • X Programming • Notes • Historical • Visual Design • Event loop • A simple maze traversal game • Keep track of fastest times (show timer) • Mazes can be pre-programmed