Notes for Design - Intro to UX By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 2 Slides: https://granneman.com/downloads/web-dev/Design-Intro-to-UX.pdf Notes: https://granneman.com/downloads/web-dev/Design-Intro-to-UX.txt ## Slide 3 https://www.granneman.com/presentations/all-presentations ## Slide 4 Off Kilter, Janet. “Push Or Pull?”. Just A Little Off Kilter...., 2 Oct. 2012, https://janetoffkilter.blogspot.com/2012/10/push-or-pull.html. Accessed 17 January 2022. Original image linked to http://www.etsy.com/listing/106094783/funny-door-sign-push-pull. ## Slide 8 Rochester Institute of Technology. “File:Saul Bass gesturing, RIT NandE Vol11Num19 1979 May10 Complete.jpg”. Wikipedia, The Free Encyclopedia, 1 Jan. 2023, https://en.wikipedia.org/wiki/File:Saul_Bass_gesturing,_RIT_NandE_Vol11Num19_1979_May10_Complete.jpg. Accessed 12 Jan 2024. Public domain. ## Slide 11 bhofack2. “Healthy Alphabet Soup in Tomato Sauce”. Can Stock Photo, https://www.canstockphoto.com/healthy-alphabet-soup-in-tomato-sauce-55522395.html. Accessed 18 Jan. 2022. Purchased from CanStockPhoto 18 Jan. 2022. ## Slide 14 Wikipedia contributors. “Graphic design”. Wikipedia, The Free Encyclopedia, 7 Sep. 2024, https://en.wikipedia.org/wiki/Graphic_design. Accessed 11 Sep. 2024. ## Slide 15 Wikipedia contributors. “Graphic design”. Wikipedia, The Free Encyclopedia, 7 Sep. 2024, https://en.wikipedia.org/wiki/Graphic_design. Accessed 11 Sep. 2024. ## Slide 16 Wikipedia contributors. “Graphic design”. Wikipedia, The Free Encyclopedia, 7 Sep. 2024, https://en.wikipedia.org/wiki/Graphic_design. Accessed 11 Sep. 2024. ## Slide 17 “Graphic Designers”. U.S. Bureau of Labor Statistics. Occupational Outlook Handbook, 29 Aug. 2024, https://www.bls.gov/ooh/arts-and-design/graphic-designers.htm. Accessed 12 Sep. 2024. ## Slide 19 “What Is Industrial Design?”. Industrial Designers Society of America, https://www.idsa.org/about-idsa/advocacy/what-industrial-design/. Accessed 12 Sep. 2024. ## Slide 20 “What Is Industrial Design?”. Industrial Designers Society of America, https://www.idsa.org/about-idsa/advocacy/what-industrial-design/. Accessed 12 Sep. 2024. ## Slide 22 “Industrial Designers”. U.S. Bureau of Labor Statistics. Occupational Outlook Handbook, 29 Aug. 2024, https://www.bls.gov/ooh/arts-and-design/industrial-designers.htm. Accessed 12 Sep. 2024. ## Slide 24 Knemeyer, Dirk and Eric Svoboda. “39. User Experience - UX”. From The Glossary of Human Computer Interaction. Interaction Design Foundation, https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/user-experience-ux. Accessed 18 January 2022. ## Slide 26 Norman, Don and Jakob Nielsen. “The Definition of User Experience (UX)”. Nielsen Norman Group, https://www.nngroup.com/articles/definition-user-experience/. Accessed 17 January 2022. ## Slide 27 Norman, Don and Jakob Nielsen. “The Definition of User Experience (UX)”. Nielsen Norman Group, https://www.nngroup.com/articles/definition-user-experience/. Accessed 17 January 2022. ## Slide 28 Norman, Don and Jakob Nielsen. “The Definition of User Experience (UX)”. Nielsen Norman Group, https://www.nngroup.com/articles/definition-user-experience/. Accessed 17 January 2022. ## Slide 29 Interaction Design Foundation. The Basics of User Experience Design. 5. https://www.interaction-design.org/ebook. ## Slide 30 Stull, Edward. Excerpt from chapter 1, “UX is Unavoidable”. UX Fundamentals for Non-UX Professionals. Apress (2018). Finan, Christopher M. Excerpt from chapter 6, “The Fight for Artistic Freedom, 1945–1966”. *From the Palmer Raids to the Patriot Act: A History of the Fight for Free Speech in America*. Boston: Beacon Press (2007). 192–203. ## Slide 31 Knemeyer, Dirk and Eric Svoboda. “39. User Experience - UX”. From The Glossary of Human Computer Interaction. Interaction Design Foundation, https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/user-experience-ux. Accessed 18 January 2022. ## Slide 32 NNgroup. “Don Norman: The term ‘UX’”. YouTube, 2 July 2016, https://www.youtube.com/watch?v=9BdtGjoIN4E. Accessed 17 January 2022. ## Slide 34 Wikipedia contributors. “Usability”. Wikipedia, The Free Encyclopedia, 19 Sep. 2021, https://en.wikipedia.org/w/index.php?title=Usability&oldid=1045303534. Accessed 18 Jan. 2022. ## Slide 41 Interaction Design Foundation. “User Interface Design ”. Interaction Design Foundation, https://www.interaction-design.org/literature/topics/ui-design. Accessed 18 January 2022. Rams, Dieter & Dietrich Lubs. Braun ET 66 calculator first introduced in 1987. https://www.manufactum.com/calculator-braun-a67529/. Accessed 7 Dec 2023. ## Slide 45 Apple. “Apple Reimagines the iPhone Experience with iOS 14.” Apple Newsroom, 22 June 2020, https://www.apple.com/newsroom/2020/06/apple-reimagines-the-iphone-experience-with-ios-14/. Accessed 22 Sept. 2025. ## Slide 59 Wikipedia contributors. “User experience design”. Wikipedia, The Free Encyclopedia, 13 Jan. 2022, https://en.wikipedia.org/w/index.php?title=User_experience_design&oldid=1065517912. Accessed 18 Jan. 2022. ## Slide 60 Wikipedia contributors. “User experience design”. Wikipedia, The Free Encyclopedia, 13 Jan. 2022, https://en.wikipedia.org/w/index.php?title=User_experience_design&oldid=1065517912. Accessed 18 Jan. 2022. ## Slide 62 Athena L.M. [@alilly@solarpunk.moe]. “Every time you redesign your app, you vaporize all the experience built up by everyone who's been using the current version. It better be fucking worth it.”. Mastodon. solarpunk.moe, 5 Dec 2023, https://solarpunk.moe/@alilly/111528976477126837. Accessed 7 Dec 2023. Martin, Athena Lilith. “Athena Lilith Martin”. Athena’s Site, https://www.alm.website/me. Accessed 7 Dec 2023. ## Slide 64 Knemeyer, Dirk and Eric Svoboda. “39. User Experience - UX”. From The Glossary of Human Computer Interaction. Interaction Design Foundation, https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/user-experience-ux. Accessed 18 January 2022. ## Slide 65 Wikipedia contributors. “User-centered design”. Wikipedia, The Free Encyclopedia, 11 Nov. 2021, https://en.wikipedia.org/w/index.php?title=User-centered_design&oldid=1054617536. Accessed 18 Jan. 2022. ## Slide 66 Wikipedia contributors. “User-centered design”. Wikipedia, The Free Encyclopedia, 11 Nov. 2021, https://en.wikipedia.org/w/index.php?title=User-centered_design&oldid=1054617536. Accessed 18 Jan. 2022. ## Slide 68 KirstinH. “UCD, UX,Usability – So What’s the Difference?”. User Experience at the University of Oregon, 20 Sept. 2013, https://blogs.uoregon.edu/uxuo/2013/09/20/ucd-ux-usability-so-whats-the-difference/. Accessed 18 January 2022. ## Slide 70 Interaction Design Foundation. “Human-Centered Design”. Interaction Design Foundation, https://www.interaction-design.org/literature/topics/human-centered-design. Accessed 18 January 2022. ## Slide 71 NNgroup. “Principles of Human-Centered Design (Don Norman)”. YouTube, 10 Aug. 2018, https://www.youtube.com/watch?v=rmM0kRf8Dbk. Accessed 18 January 2022. ## Slide 72 Norman, Don. “Why We Have Evolved From User-Centered Design to People-, Human- and Humanity-Centered Design”. Interaction Design Foundation, https://www.interaction-design.org/literature/topics/human-centered-design. Accessed 18 January 2022. ## Slide 74 Hewett, Baecker, Card, Carey, Gasen, Mantei, Perlman, Strong, and Verplank. “CHAPTER 2: Human-Computer Interaction {p. 5}”. ACM SIGCHI Curricula for Human-Computer Interaction, 29 July 2009, https://web.archive.org/web/20170606122229/http://old.sigchi.org/cdg/cdg2.html. Accessed 18 January 2022. ## Slide 77 Wikipedia contributors. “Programmable logic controller”. Wikipedia, The Free Encyclopedia, 10 Feb. 2024, https://en.wikipedia.org/wiki/Programmable_logic_controller. Accessed 26 Feb. 2024. Pierre75000. “File:Automate industriel WAGO pour un système de monitoring en industrie pharmaceutique.jpg”. Wikipedia, The Free Encyclopedia, 9 Nov. 2016, https://en.wikipedia.org/wiki/File:Automate_industriel_WAGO_pour_un_syst%C3%A8me_de_monitoring_en_industrie_pharmaceutique.jpg. Accessed 26 Feb 2024. Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/. Modified by converting to the WebP format. ## Slide 78 “human-machine interface”. National Institute of Standards and Technology. Computer Security Resource Center, , https://csrc.nist.gov/glossary/term/human_machine_interface. Accessed 25 Feb. 2024. Editor. “What is a Human Machine Interface (HMI)? Types, Advantages” Automation Community, 30 Dec. 2023, https://automationcommunity.com/human-machine-interface/. Accessed 26 Feb 2024. ## Slide 79 Buehler, Greg. “Recommended best practices for industrial interface design?”. UX Stack Exchange, 24 May 2011, https://ux.stackexchange.com/questions/7470/recommended-best-practices-for-industrial-interface-design. Accessed 26 Feb 2024. Fair use. Modified by converting to the WebP format. ## Slide 80 “HMI: Human-Machine Interface”. Induction Automation, 10 Aug. 2018, https://inductiveautomation.com/resources/article/what-is-hmi. Accessed 26 Feb 2024. Fair use. Modified by converting to the WebP format. ## Slide 81 “HMI: Human-Machine Interface”. Induction Automation, 10 Aug. 2018, https://inductiveautomation.com/resources/article/what-is-hmi. Accessed 26 Feb 2024. Fair use. Modified by converting to the WebP format. ## Slide 82 “HMI: Human-Machine Interface”. Inductive Automation, 10 Aug. 2018, https://inductiveautomation.com/resources/article/what-is-hmi. Accessed 26 Feb 2024. ## Slide 85 Knemeyer, Dirk and Eric Svoboda. “39. User Experience - UX”. From The Glossary of Human Computer Interaction. Interaction Design Foundation, https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/user-experience-ux. Accessed 18 January 2022. ## Slide 86 Van Gogh Exhibition: The Immersive Experience, https://vangoghexpo.com/. Accessed 18 January 2022. ## Slide 88 Photos by Scott Granneman ## Slide 89 Norman, Don. The Design of Everyday Things. New York: Basic Books (2013). 247. Image: Nielsen Norman Group Photos. jnd.org, Don Norman, 2 July 2003, https://jnd.org/photographs-suitable-for-publication/. Accessed Accessed 17 Jan. 2022. “Permission for use is hereby granted.” ## Slide 90 Norman, Don. The Design of Everyday Things. New York: Basic Books (2013). 255–256. ## Slide 95 Ptrump16. “File:Siemens Magnetom Aera MRI scanner.jpg”. Wikimedia Commons, 9 Oct. 2017, https://commons.wikimedia.org/wiki/File:Siemens_Magnetom_Aera_MRI_scanner.jpg. Accessed 17 January 2022. Licensed CC BY-SA 4.0. ## Slide 98 Ex’s: acknowledgment required before permanently deleting a file from a computer, safeties on pistols and rifles, and pins in fire extinguishers ## Slide 99 Fire extinguisher: Rainbow International. Flickr, 25 Jan. 2019, https://www.flickr.com/photos/167863103@N02/32994431058. Accessed 17 January 2022 Licensed CC BY 2.0. www.rainbow-int.co.uk. Pistol safety: Petesimon2. “Vzor Cz 70 Pistol Left Side safety off hammer forward”. Wikimedia Commons, 17 May 2014, https://commons.wikimedia.org/wiki/File:Vzor_Cz_70_Pistol_Left_Side_safety_off_hammer_forward_2014-05-17.jpg. Accessed 17 January 2022. Licensed CC BY-SA 3.0. Screenshot from macOS 12.1 Monterey. Taken by Scott Granneman. Licensed Public Domain. ## Slide 101 See https://en.wikipedia.org/wiki/Two-man_rule for more info ## Slide 102 Costin, Bryan. “Child Proof”. Flickr, 22 July 2006, https://www.flickr.com/photos/bcostin/199150793. Accessed 17 January 2022. Licensed CC BY-NC-SA 2.0. ## Slide 103 Xerenogan. “Let's Play Half-Life- Episode 28- Core teleport sequence”. YouTube, 22 Mar. 2011, https://www.youtube.com/watch?v=AWvLZ4E04TM. Accessed 17 January 2022. ## Slide 104 Norman, Don. The Design of Everyday Things. New York: Basic Books (2013). 256. ## Slide 106 Garrett, Jesse James. “The Elements of User Experience”. Jesse James Garrett: jjg.net, 30 Mar. 2000, http://uxdesign.com/assets/Elements-of-User-Experience.pdf. Accessed 18 January 2022. ## Slide 108 Norman, Don. The Design of Everyday Things. New York: Basic Books (2013). 236. Image: Jepson, Erik. jnd.org, Don Norman, 11 Nov. 2018, https://jnd.org/photographs-suitable-for-publication/. Accessed Accessed 17 Jan. 2022. “Permission for use is hereby granted.” ## Slide 110 Wikipedia contributors. “Five why’s”. Wikipedia, The Free Encyclopedia, 22 Oct. 2021, https://en.wikipedia.org/w/index.php?title=Five_whys&oldid=1051238331. Accessed 18 Jan. 2022. ## Slide 111 Wikipedia contributors. “Five why’s”. Wikipedia, The Free Encyclopedia, 22 Oct. 2021, https://en.wikipedia.org/w/index.php?title=Five_whys&oldid=1051238331. Accessed 18 Jan. 2022. ## Slide 112 Interaction Design Foundation. “What is 5 Whys?” Interaction Design Foundation, https://www.interaction-design.org/literature/topics/5-whys. Accessed 18 January 2022. ## Slide 113 Bulsuk, Karn. “An Introduction to 5-why”. Karn Bulsuk, 2 Apr. 2009, https://www.bulsuk.com/2009/03/5-why-finding-root-causes.html. Accessed 18 January 2022. ## Slide 114 Wikipedia contributors. “Five why’s”. Wikipedia, The Free Encyclopedia, 22 Oct. 2021, https://en.wikipedia.org/w/index.php?title=Five_whys&oldid=1051238331. Accessed 18 Jan. 2022. ## Slide 117 Norman, Don. “The 5 Whys Method: How to Identify the Root Causes of a Problem by Investigating the Entire System”. From “What is 5 Whys?” Interaction Design Foundation, https://www.interaction-design.org/literature/topics/5-whys. Accessed 18 January 2022. ## Slide 118 Wikipedia contributors. “Ishikawa diagram.” Wikipedia, The Free Encyclopedia, 29 Dec. 2021, https://en.wikipedia.org/w/index.php?title=Ishikawa_diagram&oldid=1062692912. Accessed 18 Jan. 2022. ## Slide 119 Bulsuk, Karn. “Using a Fishbone (or Ishikawa) Diagram to Perform 5-why Analysis”. Karn Bulsuk, 15 Aug. 2009, https://www.bulsuk.com/2009/08/using-fishbone-diagram-to-perform-5-why.html. Accessed 18 January 2022. ## Slide 120 Bulsuk, Karn. “Using a Fishbone (or Ishikawa) Diagram to Perform 5-why Analysis”. Karn Bulsuk, 15 Aug. 2009, https://www.bulsuk.com/2009/08/using-fishbone-diagram-to-perform-5-why.html. Accessed 18 January 2022. ## Slide 121 Bulsuk, Karn. “Using a Fishbone (or Ishikawa) Diagram to Perform 5-why Analysis”. Karn Bulsuk, 15 Aug. 2009, https://www.bulsuk.com/2009/08/using-fishbone-diagram-to-perform-5-why.html. Accessed 18 January 2022. ## Slide 123 Bulsuk, Karn. “5-whys Analysis using an Excel Spreadsheet Table”. Karn Bulsuk, 7 July 2009, https://www.bulsuk.com/2009/07/5-why-analysis-using-table.html. Accessed 18 January 2022. ## Slide 124 Bulsuk, Karn. “5-whys Analysis using an Excel Spreadsheet Table”. Karn Bulsuk, 7 July 2009, https://www.bulsuk.com/2009/07/5-why-analysis-using-table.html. Accessed 18 January 2022. ## Slide 125 Bulsuk, Karn. “5-whys Analysis using an Excel Spreadsheet Table”. Karn Bulsuk, 7 July 2009, https://www.bulsuk.com/2009/07/5-why-analysis-using-table.html. Accessed 18 January 2022. ## Slide 126 Bulsuk, Karn. “5-whys Analysis using an Excel Spreadsheet Table”. Karn Bulsuk, 7 July 2009, https://www.bulsuk.com/2009/07/5-why-analysis-using-table.html. Accessed 18 January 2022. ## Slide 127 Bulsuk, Karn. “5-whys Analysis using an Excel Spreadsheet Table”. Karn Bulsuk, 7 July 2009, https://www.bulsuk.com/2009/07/5-why-analysis-using-table.html. Accessed 18 January 2022. ## Slide 130 Fitz-Patrick, Molly. “10 Reasons To Become A UX Designer in 2022”. Interaction Design Foundation, 21 December 2021, https://www.interaction-design.org/literature/article/10-reasons-to-become-a-ux-designer-in-2022. Accessed 18 January 2022. ## Slide 131 “UX Designer salary in US”. Built In, https://builtin.com/salaries/design-ux/ux-designer#salary-career-info-content. Accessed 12 Sep. 2024. ## Slide 132 NNgroup. “Exciting Times Ahead for UX (Don Norman)”. YouTube, 19 Oct. 2018, https://www.youtube.com/watch?v=se53F8rHTHg. Accessed 18 January 2022. ## Slide 133 charlota [@0xCharlota]. “I see many designers of my generation frustrated because UX boot camps and design thinking courses made us believe we'd all guide organizations towards user-centred solutions, only to realize many companies hire us to execute, not to transform.”. X, 29 Aug. 2024, https://x.com/0xCharlota/status/1829133626191106365. Accessed 2 Sep. 2024. ## Slide 137 Image captured by me, 26 Jan. 2015 ## Slide 138 Image captured by me, 26 Jan. 2015 ## Slide 144 Yurick, Patrick. “‘Taste vs Ability’ by Ira Glass”. YouTube, 3 Apr 2016, https://www.youtube.com/watch?v=ieEQ21mCOJA. Accessed 1 Nov 2023. Fair use. ## Slide 146 Slides: https://granneman.com/downloads/web-dev/Design-Intro-to-UX.pdf Notes: https://granneman.com/downloads/web-dev/Design-Intro-to-UX.txt ## Slide 147 https://www.granneman.com/presentations/all-presentations