1. Course Overview

2. UI Hall of Fame or Hall of Shame?

3. UI Hall of Fame or Hall of Shame?
Change this example as the site doesn’t exist anymore

4. Hall of Shame! Doesn’t help user accomplish their task Takes too long
why did they come to the site?
Takes too long
most visitors will leave & never return
May be valid for entertainment, art, or branding sites
Ask the audience what is wrong with this!

5. Hall of Fame or Shame?
Page setup for printing in IE5

6. Hall of Shame! Page setup for printing in IE5 Problems
codes for header & footer information
requires recall!
want recognition
no equivalent GUI
help is the way to find out, but not obvious

7. Goals of the Course 1) Learn to design, prototype, & evaluate UIs
the needs & tasks of prospective users
cognitive/perceptual constraints that affect design
technology & techniques used to prototype UIs
techniques for evaluating a user interface design
importance of iterative design for usability
how to work together on a team project
communicate your results to a group
key to your future success
2) Understand where technology is going & what UIs of the future might be like

8. Course Format Interactive lectures Term project & homeworks
Online materials
schedule, slides, exercises, readings
(참조)
Have fun & participate!

9. How HCI Fits into CS/MM Curriculum
Most courses for learning technology
programming, multimedia systems, database, etc.
HCI concerned w/ UI design & evaluation
technology as a tool to evaluate via prototyping
skills will become very important
complex systems, large teams

10. Books Lecture Notes & Textbook 강의노트 (ppt file) : 내 홈페이지
U. Washington J. Landay 교수 강좌 참조
인간과 컴퓨터의 상호작용, 김희철 저, 사이텍미디어, 2006
전체 필독
The Design of Sites: A Pattern Language for the Web, 2nd edition, D. Van Duyne, J. Landay, J. Hong, Prentice Hall, 2006
필요부분 발췌

11. Books Recommended books
Human-Computer Interaction, 3rd edition, Alan J. Dix, et. al.,  Prentice Hall, 2004
Designing The User Interface: Strategies for Effective Human-Computer Interaction, 4th ed., Ben Shneiderman and C. Plaisant, Addison-Wesley, 2005
Interaction Design: beyond human-computer interaction, 2nd edition, H. Sharp, Y. Rogers and J. Preece, John Wiley & Sons, 2007
Human Computer Interaction 개론, 김진우 저, 안그라픽스, 2005

12. Project Description Each of you will propose an interface idea Groups
fixing something you don’t like or a new idea
Groups
2 students to a group
work with students w/ different skills/interests
groups meet with lecturer every 2 weeks
Cumulative
apply several HCI methods to a single interface

13. Grading A combination of midterm & final (30%)
individual assignments (20%)
group project (40%)
demos/presentation (group component)
project write-ups and exercises
ratings given by other team members & class
in class participation (10%)

14. Summary Project proposal idea Next lecture on Read Introduction of HCI
History of HCI
Read
인간과 컴퓨터의 상호작용, 1&2장

15. Introduction of HCI

16. Human-Computer Interaction (HCI)
the end-user of a program
the others in the organization
Computer
the machine the program runs on
often split between clients & servers
Interaction
the user tells the computer what they want
the computer communicates results
So far you have probably studied lots about Computers, but
little about Humans and Interaction.
This course will concentrate on how these three areas come together.

17. HCI Approach to UI Design
Organizational &
Social Issues
Tasks
Design
Technology
Humans
Give Examples of Tasks:
high level:
- writing a paper
- drawing a picture
low level:
- copying a word from one paragraph to another
- coloring a line

18. Factors Influence Each Other
“Now that mice are included with most computers, applications assume a mouse will be used as a the pointing device”
Organizational &
Social Issues
Tasks
Design
Technology
Humans

19. Factors Influence Each Other
“People change their knowledge as they perform, i.e., they learn”
Organizational &
Social Issues
Tasks
Design
Technology
Humans
Give Examples of Tasks:
high level:
- writing a paper
- drawing a picture
low level:
- copying a word from one paragraph to another
- coloring a line

20. User Interfaces (UIs) Part of application that allows people
to interact with computer
to carry out their task
User vs. Customer vs. Client
user is a term only used by 2 industries  bad!
customer – person who will use the product you build
client – the company who is paying you to build it
HCI = design, prototyping, evaluation, & implementation of UIs

21. Why is HCI Important? Major part of work for “real” programs
approximately 50%
Bad user interfaces cost
money
5% satisfaction  up to 85%profits
finding problems early makes them easier to fix
reputation of organization (e.g., brand loyalty)
lives (Therac-25)
User interfaces hard to get right
people are unpredictable
intuition of designers often wrong
Studies have shown that the design, programming, and evaluation of the UI can take up to 50% of the project time and cost for a wide range of commercial and in-house software
Nearly 25% of all applications projects fail. Why?
overrun budgets & management pulls plug
others complete, but are too hard to learn/use
Solution is user-centered design. Why?
easier to learn & use products sell better
can help keep a product on schedule
finding problems early makes them easier to fix!
training costs reduced

22. Who Builds UIs? A team of specialists (ideally) graphic designers
interaction / interface designers
information architects
technical writers
marketers
test engineers
usability engineers
software engineers
users
In this course you will wear the hats of many of these specialists.

23. How to Design and Build UIs
UI Development process
Usability goals
User-centered design
Task analysis & contextual inquiry
Rapid prototyping
Evaluation
Programming

24. User Interface Development Process
Customers, Products,
Business, Marketing
Customers, Products,
Business, Marketing
Customers, Products,
Business, Marketing
Design
Discovery
Design
Exploration
Evaluate
Execute
Customers:
- Roles (Who)
- Tasks (What)
- Context (Stories)
Marketing:
- Business Priorities
- Messages
Technology:
- Products
- Architecture
Design:
- Leading/competing
technologies
Work together to
realize the design
in detail.
Evaluate with
Customers
Storyboard
Review & Iterate
Design Definition:
- Design Problem Statement
- Targeted User Roles (Who)
- Targeted User Tasks (What)
- Design Direction Statements
Proposal:
Demos/
Lo Fi Prototypes
(How)
Specification:
Hi Fidelity, Refined Design
- Based on customer feedback
- Foundation in product reality
- Refined Design description
based on slide by Sara Redpath, IBM & Thyra Trauch, Tivoli

25. Iteration - interface design cycle
At every stage!
Design
Prototype
Evaluate

26. Design Design is driven by requirements
what the artifact is for
not how it is to be implemented
e.g., PDA not as important as “mobile” app.
A design represents the artifact
for UIs these representations include (?)
screen sketches or storyboards
flow diagrams/outline showing task structure
executable prototypes
representations simplify
Write essay
start word processor
write outline
fill out outline
Start word processor
find word processor icon
double click on icon
Write outline
write down high-level ideas .

27. Web Design Representations
Site Maps
Storyboards
Designers create representations of sites at multiple levels of detail
Web designs are iteratively refined at all levels of detail
Schematics
Mock-ups

28. Usability
According to the ISO: The effectiveness, efficiency, and satisfaction with which specified users achieve specified goals in particular environments
This does not mean you have to create a “dry” design or something that is only good for novices – it all depends on your goals

29. Usability Goals Set goals early & later use to measure progress
Goals often have tradeoffs, so prioritize
Example goals
Learnable
faster the 2nd time & so on
Memorable
from session to session
Flexible
multiple ways to accomplish tasks
Efficient
perform tasks quickly
Robust
minimal error rates
good feedback so user can recover
Pleasing
high user satisfaction
Fun

30. User-centered Design “Know thy User” Cognitive abilities
perception
physical manipulation
memory
Organizational / job abilities
Keep users involved throughout
developers working with target users
think of the world in users terms
not technology-centered/feature driven `

31. Task Analysis & Contextual Inquiry
Observe existing work practices
Create examples and scenarios of actual use
“Try-out”new ideas before building software ?

32. Rapid Prototyping Build a mock-up of design so you can test
Fantasy Basketball
Build a mock-up of design so you can test
Low fidelity techniques
paper sketches
cut, copy, paste
Interactive prototyping tools
HTML, Visual Basic, Flash, DENIM, etc.
UI builders
Visual Studio .NET, JBuilder…

33. Evaluation Test with real users (participants) Build models
w/ interactive prototype
low-fi with paper “computer”
Build models
GOMS
Low-cost techniques
expert evaluation
walkthroughs
online testing
ESP

34. Project Process Overview
Project proposal (group) due on this week
Project task analysis & “sketches”
i.e., rough proposals that can & will change
based on field work with ESM tool on phone
In class presentations & critiques
Low fidelity prototyping & user testing
Rapid prototype using tools & user test
Heuristic evaluations (individual)
Heuristic evaluation summary
Final presentations & project fair with industry guests

35. Project Examples (cont.)
SiteSketch
web page design
sketch-based

36. SiteSketch

37. Project Examples (cont.)
Clothes Shopper
online shopping
knows your prefs & sizes

38. Clothes Shopper

39. Project Examples (cont.)
Electronic book reader
take advantage of all the online texts on the net

40. Electronic Book Reader

41. Project Examples (cont.)
Nutrition tracker

42. Nutrition Tracker

43. Project Examples (cont.)
cUIzine
recipe tool for the home

44. cUIzine

45. Project Examples (cont.)
Read WWW over phone
find structure in pages & build voice menus
navigation problem
cache common paths & reorder?
PDA brainstorming tool
small portable computers in a group meeting (say Palm Pilots)

46. Project Examples (cont.)
Runner’s training log
input daily workouts
reports
reminders
PDA for shopping
scan in UPC & tells you whether a good price
Home entertainment control -“no more remotes”

47. Total Entertainment Control

48. Project Examples (cont.)
PDA Baseball score keeper
have stats of the players on your PDA
keep track of what happens during the game
upload stats after the game

49. PDA Baseball Scorekeeper

50. PalmStock
PalmStock
brings up a FOCUS screen
entire line is selectable

51. InkChat

52. Nutrition/Exercise Tracker

53. Trippin’

54. Traffic Monitor

55. Traffic Monitor

56. (radio buttton metaphor)
Traffic Monitor
Congestion Information
(traffic light metaphor)
Alert icons
Volume
Pan
Audible reports about alerts
Zoom
ZOOMED IN IMAGES
Center on
driver
Driver’s location
Map view presets
(radio buttton metaphor)

57. Otto: Location-based Photos
Navigation breadcrumbs buggy and use confused evaluators
Colored in current breadcrumb

58. Bus Buddy

59. Bus Buddy