Jim Foley Andy Pruett foley@cc.gatech.edu
andy.pruett@gatech.edu
This material has been developed by Georgia Tech HCI faculty, and continues to evolve.
Contributors include Gregory Abowd, Jim Foley, Elizabeth Mynatt, Jeff Pierce, Colin Potts,
Chris Shaw, John Stasko, and Bruce Walker. Comments directed to foley@cc.gatech.edu
are encouraged. Permission is granted to use with acknowledgement for non-profit purposes. Last revision: January 2012.
• Introductions
• Course Information
• Project Information
• Homework
CS/PSYC 3750/6750 2
• Founded GVU Center @ GT in 1991
• Industry and consulting and education
• Direct MS-HCI
• Research Interests
HCI - now focused on technology in education
Information Visualization
Computer Graphics (four books, no more!)
• Office hours
I ’ m available a lot – almost always after class down the hall
No one ever comes to my office in TSRB 355
Arrange other times via email; foley@cc.gatech.edu
• Something about me …..
3
4
5
Half Dome at
Yosemite
National Park
MSHCI ‘14
BS CS, Physics. UGA
Summer Intern at
Ebay
Interests in InfoVis,
Agile, Natural-UI
I collect vinyl records, electric guitars, and coffee makers.
andy.pruett@gatech.edu
• Learn a four-step process for designing, prototyping and testing user-computer interfaces
• Learn theories, principles and methods relevant to the four steps
How to understand users and their needs
Principles involved in designing computer interfaces.
useful and usable user-
UI styles and technologies
Human perceptual and cognitive capabilities and how they apply to UI design
Critique UIs in the context of user goals and objectives
CS/PSYC 3750/6750 7
• Requirements Gathering
• Human abilities
• Design
• Prototyping
• Evaluation (without users)
• Evaluation (with users)
• Dialog & interaction styles
CS/PSYC 3750/6750 8
• At least your degree program’s first programming course
• More is better
CS/PSYC 3750/6750 9
•
•
, Third Edition, by
Preece, Rogers and Sharp. Wiley, 2011.
, by Donald
Norman. Currency/Doubleday.
Any edition OK; new one preferred
CS/PSYC 3750/6750 10
• Grading
Test 1
Test 2
Test 3
Homework
Pop Quizzes
Group project (4 parts)
– 10% per part
12%
12%
12%
20%
4%
40%
• Attendance and participation
Expected
CS/PSYC 3750/6750 11
• No late homework accepted without documented personal issues (serious illness, family emergency, etc.)
Late = 0
• HWs done individually
• Group projects are the work of your group alone
Talk to others for feedback; look at other systems for ideas; group synthesizes an original design
• Review the Georgia Tech Academic Honor Code
http://www.deanofstudents.gatech.edu/Honor/
CS/PSYC 3750/6750 12
• T-Square for turn-ins and grades
• Wordpress for assignments, schedule, class notes
http://6750hcidesigngeorgiatech.wordpress.com/
CS/PSYC 3750/6750 13
• What is the
?
Is it the screen layout?
Is it the documentation?
Is it the interaction devices and techniques?
Is it what the application does?
Is it the help system?
CS/PSYC 3750/6750 14
• What is the
?
Is it the screen layout?
Is it the documentation?
Is it the interaction devices and techniques?
Is it what the application does?
Is it the help system?
• It is ALL of the above, and more..
UX
CS/PSYC 3750/6750 15
• Lots of other examples, such as
http://www.youtube.com/watch?v=o4zSWaoEREM
• How many computationally-enabled devices are in your home?
CS/PSYC 3750/6750 16
• Allow users to carry out tasks
Safely (Three-mile Island, ATC)
Effectively
Efficiently
Enjoyably
• Bottom line
Lives or dollars or intangibles
CS/PSYC 3750/6750 17
• User-friendly interfaces and
• Programmer-friendly interfaces?
CS/PSYC 3750/6750 18
“ 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 won ’ t try again.
”
(anonymous)
“ Pay Now or Pay Later. ” J. Foley
CS/PSYC 3750/6750 19
How Does UI Design Fit in Overall
Software Development Process?
• UI design MUST start at beginning
Do NOT wait ‘ til the end
Good UI can not be pasted on top of poorly-designed functionality
• Integrate UI design methods, techniques and knowledge into standard software development methodologies
• Good paper “ How To Get Amazing Software Out
The Door Fast ” from Macadamian
To retrieve, Google “ How To Get Amazing Software
Out The Door Fast ”
CS/PSYC 3750/6750 20
• In the early days: Please evaluate our user interface and
• The early enlightenment: Please help us design this user
• The age of reason: Please help us find what the users interface
• The VC dream: Look at this area of life and find us
Panu Korhonen as reported by Liam Bannon “ Reimagining
HCI: Toward a More Human-Centered Perspective, ”
ACM Interactions, July+August 2011
CS/PSYC 3750/6750 21
CS/PSYC 3750/6750 22
• …when a reporter asked Jobs how much market research Apple had done before introducing the iPad , he responded, “ None. It isn ’ t the consumers ’ job to know what they want.
”
– http://www.nytimes.com/2011/10/07/opinion/the-man-whoinspired-jobs.html?emc=eta1
• “ It is in Apple ’ s DNA that technology alone is not enough—it ’ s technology married with liberal arts, married with the humanities, that yields us the results that make our heart sing.
”
– http://www.newyorker.com/online/blogs/newsdesk/2011/10/ steve-jobs-pixar.html#ixzz1aINBFKjx
CS/PSYC 3750/6750 23
• Focus of User Experience (UX) design is usability
– being able to get something done without too much effort
• You are like your users
• People always use your system the way you imagined they would.
• People can tell you what they want
• Icons always enhance usability
• Design is about making a user interface look good
CS/PSYC 3750/6750 24
• User-Centered Design If you are Steve
Analyze (or imagine) user ’ s goals & tasks
Create design alternatives
Evaluate options (fail early, fail often)
Implement prototype
Test
Refine
IMPLEMENT THE REAL SYSTEM
Be prepared for further iterative refinement
• This is NOT the classic waterfall development process!!!!!
CS/PSYC 3750/6750 25
• Physical & cognitive abilities & special needs
• Personality & culture
• Knowledge & skills
• Motivation
• Two Fatal Mistakes:
Assume all users are alike
Assume all users are like you
– Please leave your ego at the door
You Are Here
CS/PSYC 3750/6750 26
• “ Looks good to me ” is not good enough!
• Both subjective and objective metrics
• We can measure
Time to learn
Speed of performance
Rate of errors by user
Retention over time
Subjective satisfaction
CS/PSYC 3750/6750 27
CS/PSYC 3750/6750 28
1.
Aaa
2.
Bbb
3.
Ccc
4.
Ddd
5.
Etc
CS/PSYC 3750/6750 29
CS/PSYC 3750/6750 30
• Basektball scorekeeper
• Pool tournament manager
• Movie selector
• Manage tasks in shared apartment
• Manage wine cellar
• Improved parking meter
• Improved MARTA ticket dispenser
• Fast food self-service ordering kiosk
• Tablet menu ordering
• Baby book builder/advisor
• Diabetes monitoring/insulin injector
• Google glass app for police
• Fitness tracker / game
• Home resource usage / competition
CS/PSYC 3750/6750 31
• Diabetes test & meal planning
• Smart cupboard - food, menus, recipes, preferences
• Improved class scheduling system
• Google Glass XXX
• Smart Phone App for XXX
• Integrated social network manager
• Personal medical record manager
• PDA/GPS for about town to locate places
• Metro trip planner
• Kiosk for homeless to find resources
• Group picture share/organizer
• Backpackers planning kiosk at camp sites
• Project could be front-end of a Convergence Innovation Competition entry for this spring – for more ideas and info, see
http://cic.gatech.edu/spring-2014/
• Automobile navigator
• Improved cell phone UI
• Wardrobe planner
• Teacher-parent communicator
• Tourist guide
• Vacation planner
• Menu planning / grocery list creation
• Shopping list creator and store guide
• Calendar agent (speech)
CS/PSYC 3750/6750 33
• 4 people
Self-forming but MUST be diverse w/r to
– Skills, gender, major
Group formation facilitated in next few classes
CS/PSYC 3750/6750 34
• Design and evaluate an interface
0 - Team formation & topic choice
1 - Understand the problem
2 - Design alternatives
3 - Prototype & evaluation plan
4 - Evaluation
• Parts 1-4 count 10% each
CS/PSYC 3750/6750 35
• Part 0 - Topic definition
Identify team & topic, create web notebook
• Part 1 - Understanding the problem
Describe tasks, users, environment, social context
CS/PSYC 3750/6750 36
• Part 2 - Design alternatives
Storyboards, mock-ups for multiple different designs
Poster session 1-3pm (combined with a 3750 section)
• Part 3 - System prototype & eval plan
Semi-working interface functionality - enough to evaluate
Plan for conducting evaluation
In-class walkthrough
CS/PSYC 3750/6750 37
• Part 4
Conduct evaluation with typical users
Characterize pros and cons of the UI
Fix the easy to fix UI problems
• Present results to class
Last few class meetings
PPts plus demo
CS/PSYC 3750/6750 38
• Do all teams work on same project? NO, each team works on project of interest to them. Several teams may tackle the same general issue, coming up with different approaches.
• Can we pre-form a team or partial team? YES, but with caveat. No team can have all CS majors. No team can have more than one member who is neither CS nor CM.
• Do you do peer reviews on project participation. YES, AND I DO
ADJUST GRADES BASED ON PEER FEEDBACK.
• Can we get extra credit for doing a back-end to our system? NO, emphasis is on project stages – how well you do each. Building the prototype is just one of four steps, and there emphasis is on UI quality, not overall functionality.
CS/PSYC 3750/6750 39
• Wednesday – sit where you expect to sit for rest of semester
Name in big letters on folded paper tent
Helps me associate names and faces :-)
• Be on look-out for really good or really bad Uis - Hall of Fame / Hall of Shame
• Don’t forget HW0 – be ready with 30second “elevator pitch”
CS/PSYC 3750/6750 40
CS/PSYC 3750/6750 41
Some users expect the computer-based system to be just like the old system….
CS/PSYC 3750/6750 42
Other users expect the system to work magic…..
CS/PSYC 3750/6750 43