CS 4750, Section A User Interface Design

1
CS 4750, Section AUser Interface Design
Summer 2004

• Heather Richter
• hrichter_at_cc.gatech.edu

2
Agenda

• Introductions
• Course Information
• Intro to HCI
• The good, the bad, and the ugly
• IDEO video

3
Heather Richter

• B.S. in C.S. from Michigan State in 1996
• Ph.D. expected in C.S. from Georgia Tech in
  Spring 2005
• HCI and Software engineering focus
• Projects
• Meeting capture and access
• TeamSpace
• Informal communication
• Digital picture frame
• Contact info

4
TA Gillian Hayes

• Ph.D. student in C.S. since 2002
• Specialization in HCI and Ubicomp
• Projects
• Mobile, informal capture and access
• Applications for families and caregivers of
  children with autism

5
Introductions You (Index Card)

• Name, Degree, Research Focus, your N
• What youd like to get out of the class
• Previous HCI experience
• A product/device/application you either love to
  use, or hate to use, and why

6
Course Information

• Books
• Interaction Design by Preece, Rogers, and Sharp.
  Wiley 2002.
• The Design of Everyday Things, by Donald Norman,
  2002.
• Web
• http//www.cc.gatech.edu/classes/AY2004/cs4750a_su
  mmer/
• Syllabus
• Lectures
• Team Project
• Co-web (swiki)
• HCI resources

7
Course Information

• Grading
• Quizzes (15)
• Instead of homework and class participation
• Group project, 4 parts (50)
• More to come...
• Exams (35)

8
Group project

• Half your grade, 4 parts
• Break into groups by end of 1st week, start
  thinking of ideas NOW
• Original ideas, but get LOTS of help!
• Think off the desktop and into your everyday
  lives
• Much more in future lectures

9
Course Information

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

10
Course Aims

• Consciousness raising
• Make you aware of HCI issues
• Design critic
• Question bad HCI design - of existing or proposed
• Learn Design Process
• interfaces
• Improve your HCI design evaluation skills
• Go forth and do good work!

11
Course Overview

• Requirements Gathering
• How do you know what to build?
• Human abilities
• Design
• How do you build the best UI you can?
• Evaluation
• How do you make sure people can use it?
• Also interface paradigms, groupware, ubiquitous
  computing

12
Now lets get started

• What is Human-Computer Interaction?

13
HCI

• HCI is at the interface between a human and a
  computer performing a task
• Task - write document, calculate budget, solve
  equation, learn about Bosnia, drive home, ...
• Task might be work, play, learning,
  communicating, etc etc
• Yes, thats a little simplistic
• Key points are that user has to
• Express task (execution)
• Interpret results (evaluation)
• Note not just desktop computers!

14
Why should we care?

• Computers (in one way or another) now affect
  every person in our society
• Increasing utilize computers at work and home
• Tonight - count how many in your home/apt/room
• We are surrounded by unusable and ineffective
  systems!
• Its not the users fault!!
• Product success may depend on ease of use, not
  necessarily power
• But not always Macintosh OS vs. Microsoft
  Windows

15
Famous Quotations

• It is easy to make things hard. It is hard to
  make things easy. Al Chapanis, 1982
• Learning to use a computer system is like
  learning to use a parachute if a person fails
  on the first try, odds are he wont try again.
  anonymous

16
Goals of HCI

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

17
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

18
UI Design / Develop Process

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

19
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
20
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

21
How Improve User Interfaces?

• Educate software professionals
• Do NOT wait til the end
• Good UI can not be pasted on top of
  poorly-designed functionality
• Draw upon accumulating body of knowledge
  regarding HCI interface design
• Integrate UI design methods techniques into
  standard software development methodologies now
  in place

22
Its HARD!

• Design is more difficult when the designer takes
  responsibility.
• Think about the user(s), the situation and make
  the system appropriate.
• Co-evolution makes it even harder.

23
And a little history
?
WIMP (Windows)
User Productivity
Command Line
Batch
?
1980s - Present
1960s 1970s
1940s 1950s
Time
24
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

25
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
26
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

27
PCs with GUIs

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

28
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

29
Xerox Star - 1981

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

30
Key Historical Event

• Design of the first Mac 1983-1984
• The computer for the rest of us

31
Apple Macintosh - 1984

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

32
Next Paradigms?

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

33
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,

34
Paradigm Mobile Computing

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

35
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
• Design is HARD
• 3. To teach you tools and techniques to help you
  iteratively improve your designs
• Because you can eventually get it right

36
Examples of good and bad