1. CS3205, HCI in Software Development
Course Introduction
Summer 2012

2. There must be a problem because…
SIS

3. What’s the Course About?
In one sentence:
Human-computer interaction (HCI) and user-centered design in the context of SW engineering
Note the target audience:
Students who may be involved in SW development
HCI is important to others: HW designers and engineers, Web designers, psychologists, etc.
But CS3205 targets SW development

4. What is HCI? More soon… Human-Computer interface
Where people “meet” or come together with machines or computer-based systems
Physical interface (e.g. buttons, screens, menus, etc.)
Logical interface
The model a system presents a user
Set of tasks available and how they’re organized

5. From the SIGCHI Website
HCI is…
An inter-disciplinary discipline (engineering, CS, psychology, graphic design, ergonomics, etc.)
Concerned with design, evaluation, and implementation
Addresses people’s needs, capabilities, limitations

6. SIGCHI curriculum definition site
Human-computer interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them.

7. What is an interface? ?

8. What is the User Interface?
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?
Is it the code?

9. Evolution of HCI ‘interfaces’
50s - Interface at the hardware level for engineers - switch panels
60-70s - interface at the programming level - COBOL, FORTRAN
70-90s - Interface at the terminal level - command languages
80s - Interface at the interaction dialogue level - GUIs, multimedia
90s - Interface at the work setting - networked systems, groupware
00s - Interface becomes pervasive
RF tags, Bluetooth technology, mobile devices, consumer electronics, interactive screens, embedded technology, information appliances
Late 00s – computing becomes more ubiquitous
Internet use becomes the norm
Web applications become richer. “The Cloud.”
Mobile devices like smartphones & tablets become mainstream

10. User Execute Tasks, Interpret Information or Results
HCI is at the interface between a human and a computer performing a task
Task - write document, calculate budget, filter , register for course, find best route, ...
Task might be work, play, learning, communicating, etc etc
Essential user activities:
Express task (execution)
Interpret results (evaluation)
Not just on the desktop! (How many computers in your family home, including the garage?)

11. HCI: Wide Range of Concerns
Make an interactive system be useful for a task, and support that task effectively
Easy to use, easy to learn, avoid errors
Must understand users, understand users’ tasks
Create a usable logical interface
A user’s conceptual model of the system
Overall design of how we interact
Physical and low-level design
Physical interface: buttons, keys, screens
SW interface: menus, screens, colors
Evaluating usability
During development, after completion

12. High-level Terms HCI, CHI Usability User-centered Design
An approach to design (SW, Web, other) that involves the user a great deal, in many phases
Interaction Design (ID)
Something different than HCI? Maybe.
Our current textbook is an “ID” text

13. Usability A definition from ISO standard 9241 Effectiveness:
The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.
Effectiveness:
accuracy and completeness in achieving goals
Efficiency:
resources expended…
Satisfaction:
comfort, acceptability (happiness, pleasure)

14. Discussion Effectiveness, efficiency and satisfaction:
Are all of these equally important?
All the time?

16. What is User-Centered Design?
An approach to UI development and system development.
Focuses on understanding:
Users, and
Their goals and tasks, and
The environment (physical, organizational, social)
Pay attention to these throughout development

17. ISO on User-centered Design
ISO describes human-centered design processes for interactive systems
Principles of human-centered design:
Active involvement of users
Appropriate allocation of function between user and system
Iteration of design solutions
Multidisciplinary design teams

18. ISO on User-centered Design (2)
Essential activities in human-centered design:
Understand and specify the context of use
Specify the user and organizational requirements
Produce design solutions (prototypes)
Evaluate designs with users against requirements

19. Are You Experienced? (in UC Design, I mean)
Think about a significantly complex software project you’ve been involved in
Work, research, CS3240, etc.
Did it seem like an example of user-centered design?
How did it, or how did it not?

21. What is interaction design?
Designing interactive products to support people in their everyday and working lives
Sharp, Rogers and Preece (2002)
The design of spaces for human communication and interaction
Winograd (1997)

22. Goals of interaction design
Develop usable products
Usability means easy to learn, effective to use and provide an enjoyable experience
Involve users in the design process

23. Unclear about what ID is?
Not surprising!
We’ll read:
What is Interaction Design and What Does It Mean to Information Designers? by Craig Marion
and
From Computing Machinery to Interaction Design by Terry Winograd

24. From HCI to Interaction Design
Human-computer interaction (HCI) is: “concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them” (ACM SIGCHI, 1992, p.6)
Interaction design (ID) is: “the design of spaces for human communication and interaction” (Winograd, 1997)
One distinction: more application areas, more technologies and more issues to consider when designing ‘interfaces’

25. Relationship between ID, HCI and other fields
Academic
disciplines
(e.g. computer science,
psychology)
Design practices
(e.g. graphic design)
Interaction
Design
Interdisciplinary fields
(e.g HCI, CSCW)

26. Relationship between ID, HCI and other fields
Academic disciplines contributing to ID:
Psychology
Social Sciences
Computing Sciences
Engineering
Ergonomics
Informatics

27. Relationship between ID, HCI and other fields
Design practices contributing to ID:
Graphic design
Product design
Artist-design
Industrial design
Film industry

28. Relationship between ID, HCI and other fields
Interdisciplinary fields that ‘do’ interaction design:
HCI
Human Factors
Cognitive Engineering
Cognitive Ergonomics
Computer Supported Co-operative Work
Information Systems

29. What do professionals do in the HCI or ID business?
interaction designers - ??
usability engineers - ??
web designers – (we know this one!)
information architects - ??
user experience designers - ??

30. What do professionals do in the HCI or ID business?
interaction designers - people involved in the design of all the interactive aspects of a product
usability engineers - people who focus on evaluating products, using usability methods and principles
web designers - people who develop and create the visual design of websites, such as layouts
information architects - people who come up with ideas of how to plan and structure interactive products
user experience designers - people who do all the above but who may also carry out field studies to inform the design of products

31. Reminder: What is involved in the process of UC/ID design
Identify needs and establish requirements
Functionality, goals, tasks
Develop alternative designs
Build interactive prototypes that can be communicated and assessed
“test”, refine, iterate
Evaluate what is being built throughout the process (This is what you’ll do this semester!)

32. Rules about Developing for Users
Rule #1: All users are not like you.
Rule #2: All users are not alike.
Consider:
Physical & cognitive abilities & special needs
Personality & culture
Knowledge & skills
Motivation

33. Class Activity Question: Think-Pair-Share:
Pairs write down differences
Pairs merge results
Instructor calls on pairs to share answers
Question:
Think about a hard-to-use software product (or computer-based system).
In what way does it have poor usability?
General problems
Specific examples

34. Bad Interfaces, Summer 2012 Collab: scroll bars in scrollbars
SIS: not intuitive, steep learning curve, hard to find where things are, timeout, SB in SB, can’t use back button, some tasks req. >1 window
Photoshop: very hard for novice, buttons not intuitive (what do they represent), easy to mess up selecting pixels/colors
Mathcad: not intuitive, too much info, user not directed to what’s needed. Not clear what icons do

35. Bad Interfaces, Summer 2012
Word: has unnecesary commands, too many buttons, can’t control indentation, corrects when you don’t want it to, format of pasted text doesn’t match doc
Blender: (image/graphics app) not intuitive, hard to figure out what you want to do, how to do it
Sony alarm clock: setting time, network/GPS/something, time off by 5 minutes

36. Bad Interfaces, Summer 2012 Blackberry: slow to respond
Android phone: slow, IMs delayed, easy to hit buttons on screen
Emacs: hard to switch windows, scroll too far problem

37. Bad Interfaces, Spring 2012 Windows Mobile 6.1
Small buttons, inaccurate key presses
Made for stylus (not used often)
Remotes for DirectTV, Satelite
Too many buttons
Needs shortcuts for frequents
All first person shooters
Motion sicknesss
Standalone GPS devices
Onscreen keyboards don’t match conventions
Too many clicks to do a task

38. Bad Interfaces, Spring 2012 Playstation’s DVD functionality
Using controller (w/o remote), wrong button sends you out of DVD mode, back to main
Google’s multiple account signin
Can’t see all of them, use temp account
Doesn’t show all information. Limited.
Virtual Box
Hard to share files between host and guest
Facebook newsfeed auto update
Frequent updates move you back to top (even when scrolling)

39. Bad Interfaces, Spring 2012 Web interfaces with long list of data
Need to click through all pages to find something
Smartphone keyboards
Qwerty may not be best, button size, autocorrection
Link in facebook app doesn’t take you to specific link but to top-level page
Can’t like a specific comment.
Entering text with a game controller or without a keyboard

40. Bad Interfaces, Spring 2011 IBCM (web-based version) SMOK
Hard to learn. Can’t always right- or left-click
Scroll disabled depending on Zoom level
Canvas won’t resize.
Looks cluttered.
Lines don’t move with objects when you move them.
IBCM (web-based version)
Freezes if stuck in a loop. Must restart browser (not in Chrome)

41. Voice mail or audio-based systems
Not visual. Slower to navigate.
UVa registrar: listen to long set of options. Not able to skip if you know what to do
Not clear / visible what commands are
Voice recognition helps, but pronouncing international names is hard for many
Facebook app for Blackberry
Scroll down through notifications, but must scroll all the way back to top
Look at photos from the beginnning (always)
To scroll up in message, must go to the bottom and then scroll up
Etc. etc. etc.

42. World of Warcraft Emacs
Abilities on action bars that cover bottom and right side of screen. Must scroll quickly
Health info in two different places
Must look in many places to be efficient
No effective key mapping
Emacs
Hard to learn key-strokes
Relies on key-strokes, not visual
Interaction between undo and redo

43. Blender (3D animation modeling…)
Word 2008 (Mac)
Unstable, location/use of toolbars
Adobe CS Suite
Undo in photoshop is just a toggle
Others more like undo/redo
Unstable
Blender (3D animation modeling…)
Steep learning curving
Not like any others. Learning others doesn’t help. Tries to be different.
Too many options, windows, hotkeys

44. SIS One window at a time. Info distribted across multipe winodws
Nested scrollable windows
Time out is irritating
Too many clicks to do simple tasks
To search, must choose dept from drop-down and there are a LOT of departments
Can’t enroll in class from search windown
Can’t go on waitlist from search window
To change, sometimes must drop
Edit may work. Bad name. Swap not what you want.

45. SIS (page 2 of ?)
Left-hand side useless info. Better if it showed where you are in interface, supported quicker navigation
Transcript request fails (if downloads, doesn’t make it clear it)
Missing ability to see how one of multi sections fits your schedule

46. iMovie 2006 version than later versions More intuitive
More restrictive

47. Bad Interfaces, Spr 08 SMOK Add tings and file is lost
Zooming hard, not intuitive
Do it too much, overlap, too much scrolling
Sometimes right-click, other times do something else
Some commands buried
Default when adding component bad, things overlap,
Things you need to find not labeled well
Too much zooming, search to find things
Add tings and file is lost
Components/things easily deleted by mistake
Failed to always load file correctly
Demands advance planning, otherwise hard to change things later
Hard to distinguish arrows between components where there are many

48. Excel Copy and paste from Word puts stuff in just one cell
Hard to change details in graphs
Wizard great, but hard to see how to customize
2D graphs
Print formatting
Steep learning curve
Hard for beginners needing advanced features
Click on cell, selects all, and you may delete it when you mean to edit it
Formulas: hard to follow which cells are referenced
Floating point accuracy

49. Fake iPod Different buttons are used to select at different times
Mistake takes you back to beginning instead of back one
Can’t define order of songs when playing

50. ISIS Type in year/semester: use odd format
Could default to “logical” semester
Doesn’t have all info in it to be good
Need COD which isn’t there
Waitlist isn’t well integrated
Availability: closed at certain times (?)
Can’t press enter to login in, must click
Also, tab order isn’t logical
Must return back to main menu always, even when there’s a logical other window you want to do
Can’t use Backspace/Back to go back
Close window causes it to chide you
Audit have this request/wait/return option
Seems unfriendly, unresponsive
Timer period too short since you have to use >1 system
Refresh -- F5 logs you out

51. Examples of non-usable systems
Kroger’s self-checkout
Use of the scale is confusing, not enough room for stuff
Slow scanners, not as efficient as you’d hope
Slow to scan/place/wait, so takes longer
Default fix is “get cashier”, no other suggestions
Poor error recovery
Why can’t I swipe student ID? Didn’t check if you were a student once
Ableton-Live or similar recording/audio software
doesn’t look like standard Windows program, so hard to find GUI controls
might look cool but makes it less efficient

52. Games that used keyboard commands only and used card-board cut-out
Chem151 HW checker program
Can’t backtrack in the steps you have to do
Crashes a lot
Didn’t accept numeric answers missing x.0
No feedback on why
UVa’s Webmail
Ugly to look at, not pleasing
hard to keep mail organized in folders
Must explicitly copy and move
Slow
Useless spam filter
Must log into webmail/toolkit even when you’ve logged into a machine
Filters out mail headers / not clear you can control this
Indents messages in a thread, but if too deep you don’t see enough of the message

53. Mathcad hard to learn at first
hard to keep track of variable / whole thing fails because of one small error / not good at explaining source of errors
use of arrow-keys vs. space-bar to move things in an equation
expected arrow keys to work
4+ different versions of the equals-sign / hard to distinguish on the screen
new version can’t read files from other versions
hard to remember after not using it for a while (lots of tricks needed, hard to remember)

54. ISIS pops up a window, pop-up blocker problems
can’t use browser’s back button
gives course instructor number instead of name
must enter schedule-number instead of clicking on course ID and number
Must use semester as a code, and if you get this wrong it’s confusing what’s wrong
Interface has pictures/images for links, not the conventional under-lined links
not integrated into COD, so must copy info over from COD to ISIS
Kicks you off too quickly
Too often overloaded, too many users
Unavailability at certain hours / don’t know when it’s unavailable / status not visible easily
Links on main page are too similar
SSN number use

55. Spring 06: Examples of non-usable systems
Eclipse
Hard learning curve, bad for beginners
Too many windows, confusing layout, too much going on (advanced options)
Mathcad
Interface not intuitive
Not monkey-proof (let’s you make mistakes that crash it, make it unstable)
Saving didn’t always work well
Mouse scrolling caused program to crash

56. Grad school application sites
Main UVa website
Cluttered, too much stuff
Random, not organized
Things you need small, hard to find – must search for
[User-base…]
Grad school application sites
Multiple systems, not standard
Important info not clear, not consistent (deadlines)
Geometer’s Sketchpad
Hard to figure out how to use (sit down, can’t figure out what to do). Need to read instruction book. Bad help

57. AOL IM vi Flashing movies, ads Opens up another window
Unwanted info, windows, distracting
Adds buddies to your buddy list (can’t remove) vi
Not intuitive, need instructions
Simple function but needlessly complex

58. End of lecture 1