user-centered design process - github pages · kaist fall 2018 cs408e/f: computer science project...
TRANSCRIPT
![Page 1: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/1.jpg)
KAIST Fall 2018
CS408E/F: Computer Science Project
2018.08.27Juho Kim
User-Centered Design Process
![Page 2: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/2.jpg)
CS408
Project-oriented course in which students design, develop, test, validate, and present
a software system in a team.
![Page 3: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/3.jpg)
“What goal to keep in mind as we design our 408 system?”
Usability
“What process should my team followwhile working on a 408 project?”
User-centered designas a guiding principle
![Page 4: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/4.jpg)
Twitter @wpugh/via Reuters
![Page 5: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/5.jpg)
Anthony Quintano/Civil Beat/AP, @MorganMyrmo on Twitter
![Page 6: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/6.jpg)
Hawaii Emergency Management Agency
![Page 7: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/7.jpg)
Hawaii Emergency Management Agency via Hawaii News Now
![Page 8: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/8.jpg)
Richard Rapoza / Via Hawaii Emergency Management Agency
![Page 9: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/9.jpg)
“Stupid users keep making mistakes when using this simple feature.”
“I built this really cool thing. How come nobody uses it?”
![Page 10: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/10.jpg)
Human Error?No, it’s BAD DESIGN.
![Page 11: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/11.jpg)
You’re not the user.
• System needs to communicate with users.–Users are NOT LIKE YOU.
• The user is ALWAYS RIGHT.–Usability problems are the designer’s fault.
![Page 12: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/12.jpg)
usersystem interface
HumanComputer Interaction
![Page 13: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/13.jpg)
User-centricTechnology-centric
![Page 14: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/14.jpg)
Example from https://medium.com/@vinoth3.141/mental-model-ux-64e7a9d2a03f
![Page 15: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/15.jpg)
Usability
how well users can use the system’s functionality
![Page 16: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/16.jpg)
Dimensions of Usability
• Learnability: is it easy to learn?
• Efficiency: once learned, is it fast to use?
• Safety: are errors few and recoverable?
![Page 17: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/17.jpg)
![Page 18: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/18.jpg)
Learnability
![Page 19: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/19.jpg)
![Page 20: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/20.jpg)
Photo by Hyunjong Lee
![Page 21: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/21.jpg)
Better Learnability?
![Page 22: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/22.jpg)
Metaphor
![Page 23: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/23.jpg)
Consistency
![Page 24: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/24.jpg)
External Consistency: Design Guidelinesmaterial.io/guidelines
“Develop a single underlying system that allows for a unified experience across platforms and device sizes.”
![Page 25: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/25.jpg)
Affordances
![Page 26: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/26.jpg)
Affordances
![Page 27: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/27.jpg)
![Page 28: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/28.jpg)
Feedback Matters
![Page 29: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/29.jpg)
Explanation of the system’s model
![Page 30: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/30.jpg)
Efficiency
![Page 31: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/31.jpg)
UI Techniques for Improving Efficiency
![Page 32: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/32.jpg)
Fitts’s Law
• The time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target.
![Page 33: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/33.jpg)
Mac vs Windows
![Page 34: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/34.jpg)
Personalized Interfaces
http://www.eecs.harvard.edu/~kgajos/research/supple/
![Page 35: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/35.jpg)
Safety
![Page 36: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/36.jpg)
Dangerous Actions Should be Far Apart
![Page 37: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/37.jpg)
Confirmation Dialogs: Good or Bad?
![Page 38: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/38.jpg)
Confirmation Dialogs: Use for Rare, Crucial Actions
from github
![Page 39: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/39.jpg)
Gmail Keyboard Shortcuts
![Page 40: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/40.jpg)
Error Messages
• be polite, non-blaming
• be precise
• speak user’s language
• restate the input
• suggest how to fix
![Page 41: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/41.jpg)
Intelligent Search
• Google Photos uses automated object recognition and tagging in their search interface.
![Page 42: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/42.jpg)
Intelligent Search: cost of failure
http://mashable.com/2015/07/01/google-photos-black-people-gorillas/#v3QwN6bx1uqX
![Page 43: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/43.jpg)
What Properties Does Good Software Have?
• Performance• Cost • Security• Maintainability
• Size• Reliability• Standards• Marketability
• Modularity• Intelligence
• Usability
![Page 44: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/44.jpg)
Designing Usable Software:User-Centered Approach
![Page 45: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/45.jpg)
https://divergentmba.wordpress.com/2011/03/14/sketching-user-experiences-by-bill-buxton/
![Page 46: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/46.jpg)
https://www.linkedin.com/pulse/bill-buxtons-design-funnel-frank-kloos
![Page 47: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/47.jpg)
User-Centered Design Process
![Page 48: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/48.jpg)
Needfinding
Team CCR, Stanford CS247, Winter 2009 | Stanford d.school
![Page 49: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/49.jpg)
Popular Methods for Needfinding
• Interview & Observation• Contextual Inquiry– In the user’s actual work environment, discussing actual work
products– Establish a master-apprentice relationship
• Participatory Design– Include a user directly on the design team–When domain expertise matters
![Page 50: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/50.jpg)
Users Needs Insights
![Page 51: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/51.jpg)
![Page 52: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/52.jpg)
• Focus on ONE meaningful challenge.
• “a unique, concise reframing of the problem that is grounded in user needs and insights.”
Point of View
Ideas from Stanford CS147, James Landay
![Page 53: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/53.jpg)
POV Example
• We met– a young millennial living in Daejeon.
• We were amazed to realize– he protects & preserves clothing by not washing them often.
• It’d be game-changing to– help him care for his clothes while keeping them clean.
Example from Stanford CS147, James Landay
![Page 54: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/54.jpg)
• Tide Total Care keeps your colors like new.
• Protects Colors -- Conditions wash water to help prevent damage from chlorine and mineral deposits
• Maintains Finish -- Helps maintain the smoothness and overall texture of your clothes by reducing the friction between fibers that occurs during washing and daily wear.
![Page 55: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/55.jpg)
Users Needs Insights
“We met…” “We were amazed to realize…” “It’d be game-changing to…”
![Page 56: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/56.jpg)
For each POV, come up with HMW questions
• How Might We…?• “Might” helps you defer judgment.• Go for quantity.• Encourage wild, open ideas.
• Too narrow: “HMW create a cone to eat ice cream without dripping?”
• Too broad: “HMW redesign dessert?”• Proper: “HMW redesign ice cream to be more portable?”
![Page 57: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/57.jpg)
For each HMW, come up with solution ideas
Extreme in some way• ultra-learnable• ultra-efficient• ultra-safe (preventing all errors)• for illiterate users• for blind users• for children• for the elderly• for use while driving• for other extreme users, context, situations
![Page 58: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/58.jpg)
Storyboarding
Team FoodEx, Stanford CS147, Fall 2008
![Page 59: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/59.jpg)
![Page 60: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/60.jpg)
Prototype
“A representation of a design, made before the final solution exists.”
Moggridge, Designing Interactions
![Page 61: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/61.jpg)
Prototyping a Computer
Mouse• x
https://www.youtube.com/watch?v=0LQr1FIold0
![Page 62: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/62.jpg)
• “Even best designers are wrong the first time.”
• “Multiple prototypes matter so that you can compare and test your assumptions & hypotheses.”
• “Offends engineers.”
https://www.youtube.com/watch?v=0LQr1FIold0
![Page 63: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/63.jpg)
Paper Prototyping
MIT 6.813
![Page 64: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/64.jpg)
![Page 65: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/65.jpg)
![Page 66: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/66.jpg)
![Page 67: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/67.jpg)
Hanmail Paper Prototype
• What are some of the useful techniques?
![Page 68: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/68.jpg)
Why Paper Prototyping?
• Fast to build• Easy to change– Even during a user test– No code investment
• Focuses attention on big picture– Designer doesn’t waste time on details– Customer makes more creative suggestions, not nitpicking
• Nonprogrammers can help–Only kindergarten skills are required
![Page 69: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/69.jpg)
Wizard of Oz Prototyping
http://www.slideshare.net/emanabedalwahhab/prototyping-34600987
![Page 70: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/70.jpg)
Kramer’s Moviefone
![Page 71: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/71.jpg)
Wizard of Oz Prototyping
• Simulate machine behavior with human operators• Make an interactive prototype without (much) code
• Rapidly test the prototype with people– Higher fidelity than paper– Lower cost than actual implementation
• Simulations might misrepresent, wizard training & fatigue
![Page 72: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/72.jpg)
Video Prototyping
https://www.youtube.com/watch?v=tLBOZJ1M2J4
![Page 73: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/73.jpg)
Video Prototyping
• Capture rich & real context, illustrate context of use• Great communication tool, portable• Connects UI and task• Full usage scenario needs to be thought out• Good storyboards & paper prototypes can
yield quick videos• Not interactive• Can be caught up in detail
![Page 74: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/74.jpg)
Prototype Tools
• Photoshop, Powerpoint• Balsamiq Mockup, Marvel,
InVision, proto.io, …
![Page 75: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/75.jpg)
User Testing
Team CCR, Stanford CS247 Winter 2009
![Page 76: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/76.jpg)
Types of User Testing
• Formative evaluation– Find problems during iterations– Often in lab, with chosen tasks– Qualitative observations (usability problems)
• Field study– Find problems in context– In real context, on real tasks– Mostly qualitative observations
• Controlled experiment– Tests a hypothesis (e.g., interface X is faster than interface Y)– Often in lab, with chosen tasks– Mostly quantitative observations (time, error rate, satisfaction)
![Page 77: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/77.jpg)
Presentation & Communication
Stanford CS147, Fall 2008 | HCI@KAIST 2017 Workshop
![Page 78: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/78.jpg)
![Page 79: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/79.jpg)
![Page 80: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/80.jpg)
CS374 Design Process Example
• [DP0] Week 03: Team Formation• [DP1] Week 04: Needfinding• [DP2] Week 06: Storyboards• [DP3] Week 07: Paper Prototyping• [DP4] Week 09: Lo-fi Prototyping• [DP5] Week 11: Mid-fi Prototyping• [DP6] Week 13: Hi-fi Prototyping• [DP7] Week 14: User Testing• [DP8] Week 16: Iteration & Wrap-up
![Page 81: User-Centered Design Process - GitHub Pages · KAIST Fall 2018 CS408E/F: Computer Science Project 2018.08.27 Juho Kim User-Centered Design Process](https://reader033.vdocument.in/reader033/viewer/2022050312/5f747575db9f437a5e46d6ee/html5/thumbnails/81.jpg)
Takeaway Messages
• It’s not human error. It’s bad design.• Usability: learnable, efficient, & safe (≠ good-looking)• User-centered design process– Empathize è Define è Ideate è Prototype è Test
• Use different prototyping methods for your needs.• Talk to users well before you have a final solution.• Iterate. Multiple times.