CS 4750 User Interface Design

1
CS 4750User Interface Design
Spring 2004

• Jeff Pierce
• jpierce_at_cc.gatech.edu

2
Agenda

• Introductions
• Course Information
• A little about HCI its History
• Project Information

3
Introductions Jeff Pierce

• Carnegie Mellon 01, CoC GVU 02
• Human-Computer Interaction (with a CS flavor)
• Cool projects
• 3D Interaction
• DisneyQuest
• Alice
• Sensing Techniques
• for Mobile Devices
• Opportunistic Annexing

4
Introductions You (Index Card)

• Name, Degree, Research Focus, your N
• What youd like to get out of the class
• Previous HCI experience
• An interesting fact about yourself
• Pictures! (later)

5
Course Information

• Books
• Interaction Design by Preece, Rogers, and Sharp.
  Wiley 2002.
• The Design of Everyday Things, by Donald Norman.
  Currency/Doubleday, 1990.
• Web
• http//www.cc.gatech.edu/classes/AY2004/cs4750b_sp
  ring/
• Syllabus
• Lectures
• Assignments
• Co-web (swiki)
• HCI resources

6
Course Information

• Grading
• Mid-term final exams (30)
• Group project, 4 parts (40)
• More to come...
• Homeworks (20)
• Usually one week to do, 4 of them
• Participation (10)
• Class involvement
• Extra Credit (up to 5 pts on final grade)
• Case studies on co-web

7
Course Information

• Resources
• Previous courses, courses elsewhere
• Content, lectures, projects,
• Books
• Web sites
• Go further
• Move beyond lectures book
• Further courses
• Step into research

8
Course Overview

• Requirements Gathering
• How do you know what to build?
• Design
• How do you build the best UI you can?
• Evaluation
• How do you make sure people can use it?
• Human abilities
• Also interface paradigms, human abilities, case
  studies, next-generation interfaces, etc.

9
Course Aims

• 1. To make you notice interfaces, good and bad
• Youll never look at doors the same way again
• 2. To help you realize no one gets an interface
  right on the first try
• Yes, even the experts
• 3. To teach you tools and techniques to help you
  iteratively improve your designs
• Because you can eventually get it right

10
Course Evolution

• Were going to try something a little different
  this year

11
And Now A Little Background

• HCI what is it?
• Can you define / describe it?

12
HCI

• What happens when a human and a computer get
  together to perform a task
• task - write document, calculate budget, solve
  equation, learn about Bosnia, drive home,...
• Yes, thats a little simplistic.
• Key points are that user has to
• Express task (execution)
• Interpret results (evaluation)
• Note not just desktop computers!

13
Goals of HCI

• Allow users to carry out tasks
• Safely
• Effectively
• Efficiently
• Enjoyably

14
Usability

• Important issue
• Combination of
• Ease of learning
• High speed of user task performance
• Low user error rate
• Subjective user satisfaction
• User retention over time

15
UI Design / Develop Process

• User-Centered Design
• Analyze users goals tasks
• Create design alternatives
• Evaluate options
• Implement prototype
• Test
• Refine
• IMPLEMENT

16
Know Thy Users!

• Physical cognitive abilities ( special needs)
• Personality culture
• Knowledge skills
• Motivation
• Two Fatal Mistakes
• Assume all users are alike
• Assume all users are like the designer

You Are Here
17
Design Evaluation

• Both subjective and objective metrics
• Some things we can measure
• Time to learn
• Speed of performance
• Rate of errors by user
• Retention over time
• Subjective satisfaction

18
The WIMP Plateau, or Where are We Now?
?
WIMP (Windows)
User Productivity
Command Line
Batch
?
1980s - Present
1940s 1950s
1960s 1970s
Time
19
Batch Processing

• Computer had one task, performed sequentially
• No interaction between operator and computer
  after starting the run
• Punch cards, tapes for input
• Serial operations

20
Innovator Vannevar Bush

• As We May Think - 1945 Atlantic Monthly
• publication has been extended far beyond our
• present ability to make real use of the record.
• Postulated Memex device
• Stores all records/articles/communications
• Items retrieved by indexing, keywords, cross
• references (now called hyperlinks)
• (Envisioned as microfilm, not computer)
• Interactive and nonlinear components are key
• http//www.theatlantic.com/unbound/flashbks/comput
  er/bushf.htm

21
Paradigm Command Line (Mid 1960s)

• Computers too expensive for individuals -gt
  timesharing
• increased accessibility
• interactive systems, not jobs
• text processing, editing
• email, shared file system

Need for HCI
22
Innovator Ivan Sutherland

• SketchPad - 63 PhD thesis at MIT
• Hierarchy - pictures subpictures
• Master picture with instances (ie, OOP)
• Constraints
• Icons
• Copying
• Light pen as input device
• Recursive operations

23
Innovator Douglas Englebart

• Landmark system/demo
• hierarchical hypertext, multimedia, mouse,
  high-res display, windows, shared files,
  electronic messaging, CSCW, teleconferencing, ...

Inventor of mouse
24
Innovator Alan Kay

• Dynabook - Notebook sized computer loaded with
  multimedia and can store everything
• Personal
• computing
• Desktop
• interface
• Overlapping
• windows

25
Paradigm WIMP / GUI

• Windows, Icons, Menus, Pointers
• Graphical User Interface
• Timesharingmulti-user now we need multitasking
• WIMP interface allows you to do several things
  simultaneously
• Has become the familiar GUI interface
• Xerox Alto, Star early Apples

26
PCs with GUIs

• Xerox PARC - mid 1970s
• Alto
• local processor, bitmap display, mouse
• Precursor to modern GUI,windows, menus,
  scrollbars
• LAN - Ethernet

27
Xerox Star - 1981

• First commercial PC designed for business
  professionals
• desktop metaphor, pointing, WYSIWYG, high degree
  of consistency and simplicity
• First system based on usability engineering
• Paper prototyping and analysis
• Usability testing and iterative refinement

28
Xerox Star - 1981

• Commercial flop
• 15k cost
• closed architecture
• lacking key functionality(spreadsheet)

29
Apple Lisa - 1982

• Based on ideas of Star
• More personal rather than office tool
• Still
• Failure

30
Apple Macintosh - 1984

• Aggressive pricing - 2500
• Not trailblazer, smart copier
• Good interface guidelines
• 3rd party applications
• High quality graphics and laser printer

31
Next Paradigms?

• Several candidates, including
• Ubiquitous Computing
• Mobile Computing
• 3D Interaction

32
Paradigm Ubiquitous Computing

• Person is no longer user of single device but
  occupant of computationally-rich environment
• Can no longer neglect macro-social aspects
• Desktops, laptops, PDAs, cell phones,

33
Paradigm Mobile Computing

• Devices used in a variety of contexts
• Employ sensors to understand how user is working
  with devices

34
Paradigm 3D Interaction

• Six degree-of-freedom input
• Draw on spatial memory, proprioception,
  kinesthesis, two-handed interaction

35

• And now more about that project thing.

36
Project Structure

• Design and evaluate an interface
• 0 - Team formation topic choice
• 1 - Understand the problem
• 2 - Design alternatives
• 3 - Prototype evaluation plan
• 4 Evaluation revision
• Main 4 parts worth 10 each

37
Project Details

• Part 0 - Topic definition 1/15
• Identify team topic, create swiki page
• Part 1 - Understanding the problem 2/5
• Describe tasks, users, environment, social
  context
• What are implications for design?

38
Project Details

• Part 2 - Design alternatives 2/26
• Storyboards, mock-ups for multiple different
  designs
• Explain decisions
• Part 3 - System prototype eval plan - 3/25
• Semi-working interface functionality
• Plan for conducting evaluation

39
Project Details

• Part 4 Evaluation Revision 4/22
• Conduct evaluation with example users
• Characterize whats working and whats not
• Fix what you can, explain how youd fix the rest

40
Project Groups

• 4 people
• You decide
• Diverse is best!
• Consider schedules
• Cool name
• Thursday brainstorm idea, meet potential group
  members

41
Project Presentations

• Informal poster session
• Feedback on ideas, both class periods
• Feb. 24
• Other students and expert gallery
• Formal project presentation
• Final week of classes
• 10-15 minute summary

42
What Makes a Good Project

• Access to domain experts users
• Real clients
• Interesting human issues
• Rich domain for design

43
Previous Project Topics

• Mobile/handheld (cars, tour guides, etc.)
• Wedding planner
• Calendar agent (speech)
• Audio / Web sites
• More on Class Co-Web
• http//swiki.cc.gatech.edu8080/cs4750

44
Whats Next

• Overview of Interaction Design
• Project Brainstorming
• Start reading (ch. 6)