Download - Hcsd talk ibm
![Page 1: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/1.jpg)
Human Centered Software Design
If it doesn’t work for people, it doesn’t work!(And now for something completely different…)
Created by: Hadar Ziv, Judy Olson, Bart KnijnenburgUniversity of California Irvine
![Page 2: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/2.jpg)
About Me
Bart Knijnenburg
– Current: UC Irvine– Institute for Software Research– Privacy and personalization
– TU Eindhoven– Human Technology Interaction
– Carnegie Mellon University– Human-Computer Interaction
Institute
@usabart -- www.usabart.nl
![Page 3: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/3.jpg)
Presentation Outline
Introduction and motivation
HCSD: Augmenting software engineering with HCD
Overview of HCD methods
Success stories
Questions and Discussion
![Page 4: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/4.jpg)
Unstoppable Innovation
0 18 36 54 72
Moore’s Law
![Page 5: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/5.jpg)
Unstoppable Innovation
![Page 6: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/6.jpg)
Unstoppable Innovation
“Threshold of Frustration”After a certain point technology gets so complex that it becomes too frustrating to use
![Page 7: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/7.jpg)
Unstoppable Innovation
![Page 8: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/8.jpg)
Hoping (and testing)… with people!
Two versions of barackobama.com– A/B testing
– Different…– Photo (rally, family, …)– Button (sign up, learn more, …)
We have a winner!– The second version…
– Collected more email addresses– $ 60 000 000 additional campaign
dollars!
![Page 9: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/9.jpg)
Usability is essential…
Expensive, safety-critical technology– Tested with real
people!
Examples:– Medical devices
![Page 10: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/10.jpg)
Usability is essential…
Expensive, safety-critical technology– Tested with real
people!
Examples:– Medical devices
– Nuclear power plant control rooms
![Page 11: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/11.jpg)
Usability is essential…
Expensive, safety-critical technology– Tested with real
people!
Examples:– Medical devices
– Nuclear power plant control rooms
– Airplane cockpits
![Page 12: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/12.jpg)
Usability (UCD) works!
User-centered design works– Simple
– Inexpensive
– Higher sales
– Higher satisfaction
Why is it not used?– Printers?
–
![Page 13: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/13.jpg)
Usability (UCD) works!
User-centered design works– Simple
– Inexpensive
– Higher sales
– Higher satisfaction
Why is it not used?– Printers?
– Car stereos?
–
![Page 14: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/14.jpg)
Usability (UCD) works!
User-centered design works– Simple
– Inexpensive
– Higher sales
– Higher satisfaction
Why is it not used?– Printers?
– Car stereos?
– Tax forms?
![Page 15: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/15.jpg)
Unstoppable Innovation
0 2 4 6 8
Moore’s Law
More!
Moore!
Mooore!
Moooore!
![Page 16: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/16.jpg)
Is this your software? Very likely…
![Page 17: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/17.jpg)
How can we solve this problem?
Answer: Human Centered Software Design!
![Page 18: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/18.jpg)
The Software Iterative Model
Business Modeling
Implementation
Test
Analysis & Design
Preliminary Iteration(s)
Iter.#1
Iter.#2
Iter.#n
Iter.#n+
1
Iter.#n+
2
Iter.#m
Iter.#m+
1
Deployment
Requirements
![Page 19: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/19.jpg)
Who here is doing this?
Business Modeling
Implementation
Test
Analysis & Design
Preliminary Iteration(s)
Iter.#1
Iter.#2
Iter.#n
Iter.#n+
1
Iter.#n+
2
Iter.#m
Iter.#m+
1
Deployment
Requirements
User Test
What is wrong with this?
![Page 20: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/20.jpg)
Testing at ALL stages
Preliminary Iteration(s)
Iter.#1
Iter.#2
Iter.#n
Iter.#n+
1
Iter.#n+
2
Iter.#m
Iter.#m+
1
User Test
![Page 21: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/21.jpg)
More than just testing
Preliminary Iteration(s)
Iter.#1
Iter.#2
Iter.#n
Iter.#n+
1
Iter.#n+
2
Iter.#m
Iter.#m+
1
User Requirements
Interaction Analysis & Design
User Test
Interviews and ObservationsPersonas
ScenariosSwimming Lane Diagrams
StoryboardsDesign guidelines
Site mapMockups
Heuristic EvaluationUser tests
![Page 22: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/22.jpg)
HCSD: A Blended Model
Business Modeling
Implementation
Test
Analysis & Design
Preliminary Iteration(s)
Iter.#1
Iter.#2
Iter.#n
Iter.#n+
1
Iter.#n+
2
Iter.#m
Iter.#m+
1
Deployment
Requirements
User Requirements
Interaction Analysis & Design
User Test
![Page 23: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/23.jpg)
HCSD: A Blended Model
Process of designing from the user’s perspective– Does the right thing
– Is easy to learn and use
– Is satisfying
Beyond business goals, fancy features, and technological capabilities
![Page 24: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/24.jpg)
Informatics at UC Irvine
University of California, Irvine– The “Best UC” in “The OC” (Orange County, CA)
– Top (#1) university in the US and #4 worldwide in a ranking of universities “under 50” (2012)
Bren School of Information and Computer Sciences– The only CS/ICS school in the UC system
– Multiple degrees, including a major in Informatics
![Page 25: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/25.jpg)
HCSD at Informatics
Capstone senior design project – Year-long (3 quarters)
– Required for the Informatics major
– Develop software for real needs of real users and stakeholders
![Page 26: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/26.jpg)
HCSD at UC Irvine
Software engineering
– Business and software requirements– Scenarios, use cases, user
stories, activity diagrams
– Software analysis and design– OOAD, UML, MVC
– Implementation– Java coding, .Net/C#,
PHP/MySQL, Python, Ruby
– Software Testing
– Project management
Human-Centered Design (HCD)
– Requirements– Interviews & observations,
Personas, Scenarios, Swimming lanes
– HC analysis and design– Site maps, Storyboards,
Guidelines, Mockups
– HC testing– Heuristic evaluation, User
testing
![Page 27: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/27.jpg)
Human Centered Design Methods
An Overview
![Page 28: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/28.jpg)
User Testing
InteractionAnalysis &
Design
User Requirements
Human Centered Design Methods
Interviews and observations of end users
Personas
Scenarios
Swimming Lane Diagrams
Storyboards
Design guidelines
Site Map / Generalized Transition Network
Mockup
Heuristic Evaluation
User testing
![Page 29: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/29.jpg)
Interviews and observations
On site– “to see”
Watch– Tacit knowledge
![Page 30: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/30.jpg)
Personas
A user-archetype– The “embodiment” of user needs, goals, desires and
limitations
– See the real purpose behind requirements
Useful during design– What would George do?
– How would Sharon use this feature?
During user testing– Bring in 3 Maries
– What tasks does she want to accomplish?
![Page 31: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/31.jpg)
CaseTrak: Persona
Angela Lee– 28 year old resident physician at the UCI
Medical Center
– passionate about becoming a better physician
– loves working in the Emergency Department
– Enthusiastic about the potential of the new Electronic Medical Records (EMR)
– Used Merlin as a student, but didn’t like it because the system took up a lot of her limited free time
– She prefers going home over staying longer at work to enter required case data into one of the computer stations
![Page 32: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/32.jpg)
Scenarios
Story of use with the new product– Leads well into use cases
– Focused on the why of each use case
Companies do this successfully– One of the main tools of the Gmail team
Our students do this successfully
![Page 33: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/33.jpg)
CaseTrak: Scenario
While eating lunch, Angela uses the new app enter information from a few of her cases today
She grabs her chart notes and starts the application
The app makes data entry a lot faster: it is structured and requires less free typing than the Merlin system
For example, there are fields for acuity, involvement level, age and gender, with all the options given
She loves that CaseTrak saves her case information, so she can go back and add a secondary diagnosis
While her peers are stuck in front of the Merlin system after work, she’ll be on her way home to relax
![Page 34: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/34.jpg)
Swimming Lane Diagrams
Introduce the software design into the scenario– What is the user’s workflow?
– What components are needed to support this workflow?
– How does the user interact with these components?
Invaluable for “groupware”!
![Page 35: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/35.jpg)
CaseTrak: Swimming Lane Diagram
Retrieve Cases for Review
Su
perv
isin
gP
hysic
ian
![Page 36: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/36.jpg)
Storyboards
Introduce the interface design into the scenario– How does the user interact with the system in
each step of her workflow?
– How can we support and improve their current workflow?
![Page 37: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/37.jpg)
CaseTrak: Storyboard
![Page 38: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/38.jpg)
CaseTrak: Storyboard
![Page 39: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/39.jpg)
Generalized Transition Network (GTN)
Integrate all storyboards into one system diagram– A “screenshot” of each step in the interaction
– All possible transitions between steps
Useful for reflection– “Remote” features, “dead ends”, infinite loops
![Page 40: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/40.jpg)
CaseTrak: GTN
![Page 41: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/41.jpg)
Mockups (using Balsamiq)
![Page 42: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/42.jpg)
CaseTrak: Mockups (before testing)
![Page 43: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/43.jpg)
Design Guidelines
![Page 44: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/44.jpg)
Heuristic Evaluation
– Visibility of system status
– Match system words to the real world
– User control and freedom
– Consistency and standards
– Error prevention
– Recognition rather than recall
– Accelerators
– Minimalist design
– Help users recognize and recover from errors
– Help and documentation
![Page 45: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/45.jpg)
User Testing
![Page 46: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/46.jpg)
CaseTrak: Mockups (after testing)
![Page 47: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/47.jpg)
User Testing
InteractionAnalysis &
Design
User Requirements
Human Centered Design Methods
Interviews and observations of end users
Personas
Scenarios
Swimming Lane Diagrams
Storyboards
Design guidelines
Site Map / Generalized Transition Network
Mockup
Heuristic Evaluation
User testing
![Page 48: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/48.jpg)
What do I get in return?Profit! Profit! Profit!
![Page 49: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/49.jpg)
![Page 50: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/50.jpg)
Apple knows…
![Page 51: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/51.jpg)
Example: breastcancer.org
![Page 52: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/52.jpg)
Return on Investment
When using HCD well– Sales increase by 100%
– It doubles
– Traffic count increases by 150%– More than doubles
– User performance increase by 160%– Cuts time by more than half
Nielsen & Gilutz 2006
![Page 53: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/53.jpg)
HCSD at UC Irvine
“This is a jewel at UCI… I feel very lucky to be involved…”
(Stew Sutton, Aerospace Corp.)
![Page 54: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/54.jpg)
HCSD at UC Irvine
“It is probably the most useful class I’ve taken at UCI…”
(A student)
![Page 55: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/55.jpg)
Summary
Usability works!– If it doesn’t work for people, it doesn’t work!
HCD Benefits:– Traffic/Sales increase
– User happiness/User productivity increase
– Customer retention/Customer loyalty increase
How?– HCD Methods
– Easy to integrate in existing software engineering processes
![Page 56: Hcsd talk ibm](https://reader031.vdocument.in/reader031/viewer/2022020116/5590ebaa1a28ab96668b45fb/html5/thumbnails/56.jpg)
Thank you!
We teach this integrated process/lifecycle
Our students follow it during a year long capstone course at UCI– CaseTrak, other projects successful
Contact us if you’d like to:– Learn more about how it (usability) works
– Participate in UCI Informatics capstone project course