{"id":18185,"date":"2020-06-07T11:01:37","date_gmt":"2020-06-07T15:01:37","guid":{"rendered":"http:\/\/studentwork.prattsi.org\/infovis\/?p=18185"},"modified":"2020-06-07T11:06:27","modified_gmt":"2020-06-07T15:06:27","slug":"the-history-of-user-experience","status":"publish","type":"post","link":"https:\/\/studentwork.prattsi.org\/infovis\/labs\/the-history-of-user-experience\/","title":{"rendered":"The History of user Experience"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"398\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/User-Experience-1.jpg?resize=840%2C398&#038;ssl=1\" alt=\"User Experience Image (https:\/\/www.reachfirst.com\/how-user-experience-can-impact-your-digital-marketing-strategy\/)\" class=\"wp-image-18190\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/User-Experience-1.jpg?w=845&amp;ssl=1 845w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/User-Experience-1.jpg?resize=300%2C142&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/User-Experience-1.jpg?resize=768%2C364&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/User-Experience-1.jpg?resize=800%2C379&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/User-Experience-1.jpg?resize=380%2C180&amp;ssl=1 380w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption>Image Credit: <a href=\"https:\/\/www.reachfirst.com\/how-user-experience-can-impact-your-digital-marketing-strategy\/\" target=\"_blank\" rel=\"noreferrer noopener\">Reach First<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>The history of User Experience is a rich history that includes a lot more than just the computer industry.&nbsp;&nbsp;Most things we use as a human has evolved to be simpler and easier for us to use.&nbsp;&nbsp;Even without realizing it the practice of User Experience has been put into everything we create.&nbsp;&nbsp;The goal of User Experience is to create products that are easy for a human to use. This is true whether in the physical or digital realm.&nbsp;&nbsp;This project attempts to explore some of the key historic events that showcase the evolution of User Experience from the early ages of China and Greece to the modern age of Donald Norman keying the terminology that has created a booming profession.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Material<\/h2>\n\n\n\n<p>To demonstrate the history of User Experience as a simple to interpret timeline a tool called <a href=\"https:\/\/timeline.knightlab.com\" target=\"_blank\" rel=\"noreferrer noopener\">Timeline.JS<\/a> was utilized.&nbsp;&nbsp;This is an open source JavaScript library that is maintained by a team at <a href=\"https:\/\/www.northwestern.edu\" target=\"_blank\" rel=\"noreferrer noopener\">Northwestern University<\/a>.&nbsp;&nbsp;This tool is simple to use and takes in a <a href=\"https:\/\/sheets.google.com\" target=\"_blank\" rel=\"noreferrer noopener\">Google Sheets<\/a> document; which is a spreadsheet style document, to render the timeline.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1404\" height=\"504\" src=\"https:\/\/i1.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/TimeLineJS-Logo.png?fit=840%2C302&amp;ssl=1\" alt=\"Timeline.JS Logo\" class=\"wp-image-18186\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/TimeLineJS-Logo.png?w=1404&amp;ssl=1 1404w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/TimeLineJS-Logo.png?resize=300%2C108&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/TimeLineJS-Logo.png?resize=1024%2C368&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/TimeLineJS-Logo.png?resize=768%2C276&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/TimeLineJS-Logo.png?resize=800%2C287&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/TimeLineJS-Logo.png?resize=400%2C144&amp;ssl=1 400w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><\/figure><\/div>\n\n\n\n<p>The material presented was sourced from the different places, however the majority of the content came from articles reviewing the evolution and history of User Experience.&nbsp;&nbsp;Sites like <a rel=\"noreferrer noopener\" href=\"https:\/\/careerfoundry.com\/en\/blog\/ux-design\/the-fascinating-history-of-ux-design-a-definitive-timeline\/\" target=\"_blank\">CareerFoundry<\/a> and <a rel=\"noreferrer noopener\" href=\"https:\/\/www.fastcompany.com\/3043024\/a-brief-history-of-user-experience-design\" target=\"_blank\">Fast Company<\/a> both offered useful reviews on the subject and their information was used to create a timeline based on the history presented of User Experience.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Process<\/h2>\n\n\n\n<p>Reviewing the articles describing the history of User Experience their content was taken and drawn out in a timeline format to get the order of the history down.&nbsp;&nbsp;Then the data was researched on its own to get more insight and to validate the claims of its place in the history of User Experience.&nbsp;&nbsp;This data was placed in a Google Spreadsheet utilizing the example template provided by Timeline.JS.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"3360\" height=\"1648\" src=\"https:\/\/i2.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/Spreadsheet-1.png?fit=840%2C412&amp;ssl=1\" alt=\"Google Sheets Spreadsheet with the data.\" class=\"wp-image-18188\" srcset=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/Spreadsheet-1.png?w=3360&amp;ssl=1 3360w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/Spreadsheet-1.png?resize=300%2C147&amp;ssl=1 300w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/Spreadsheet-1.png?resize=1024%2C502&amp;ssl=1 1024w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/Spreadsheet-1.png?resize=768%2C377&amp;ssl=1 768w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/Spreadsheet-1.png?resize=1536%2C753&amp;ssl=1 1536w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/Spreadsheet-1.png?resize=2048%2C1004&amp;ssl=1 2048w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/Spreadsheet-1.png?resize=800%2C392&amp;ssl=1 800w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/Spreadsheet-1.png?resize=367%2C180&amp;ssl=1 367w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/Spreadsheet-1.png?w=1680 1680w, https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/Spreadsheet-1.png?w=2520 2520w\" sizes=\"auto, (max-width: 840px) 100vw, 840px\" \/><figcaption><a rel=\"noreferrer noopener\" href=\"https:\/\/docs.google.com\/spreadsheets\/d\/e\/2PACX-1vSuE4V68luWBpjo3UgXsdzoerky2ebCJvNR0PYN68vllY30T3871qau_4j1GZLfH0bsoymDasTGoagf\/pubhtml?gid=0&amp;single=true\" target=\"_blank\">The spreadsheet data can be viewed here<\/a>.<\/figcaption><\/figure><\/div>\n\n\n\n<p>With the core data in the system the timeline was rendered and validated.&nbsp;&nbsp;Some finetuning of the options were done to get a better initial zoom level to match the data ranges used.&nbsp;&nbsp;After the data was defined, images on the topic were searched for from across the Internet.&nbsp;&nbsp;The goal was to find an image for each entry that was visually appealing within the Timeline.JS system and represented the topic appropriately and had the closes support to trigger instant recognition to the end user using this timeline.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Outcome<\/h2>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"840\" height=\"421\" src=\"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/final.gif?resize=840%2C421&#038;ssl=1\" alt=\"\" class=\"wp-image-18191\" \/><figcaption><a rel=\"noreferrer noopener\" href=\"https:\/\/cdn.knightlab.com\/libs\/timeline3\/latest\/embed\/index.html?source=10LCpOTKsHpzJ5RS8K6nlimRKCKSP9R0HV1TH5TPO5Zw&amp;font=Default&amp;lang=en&amp;initial_zoom=5&amp;height=750\" target=\"_blank\">The final project can be viewed here<\/a>.<\/figcaption><\/figure><\/div>\n\n\n\n<p>The final outcome yielded a simple to follow timeline going from ancient China with the use of layout to alter the feeling and usability of a user\u2019s environment to the current use of User Experience in social media to help users understand real verse fake information.&nbsp;&nbsp;As the timeline approaches the modern age the influence of Donald Norman becomes more and more notable as User Experience applies to the digital age.&nbsp;&nbsp;<\/p>\n\n\n\n<p>While User Experience has been used throughout history, even without realizing it, the digital realm required more research and process to create a usable product.&nbsp;&nbsp;For example, creating a kitchen table that is the height a user needs to be able to sit comfortably at it and use items on it seems like an obvious requirement; it is still utilizing User Experience principles and research. However, in the digital realm these requirements are not as clear since the user will use a computer or other device to perform the interactions meaning no ergonomic principles are defined.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Reflections<\/h2>\n\n\n\n<p>Reviewing the history of User Experience was an interesting topic and uncovered many aspects showing that User Experience design has been around for centuries even if it did not yet have a name.&nbsp;&nbsp;While this timeline ended up being a bit skewed toward the modern age it still introduced the use of User Experience in the ancient times and the industrial revolution.&nbsp;&nbsp;Although I am certain that many innovations during the industrial revolution would qualify for user experience this timeline only covered a few.&nbsp;&nbsp;With more time a more detailed timeline could be crafted showcasing the inventions that simplified the life of either the workers at factories or the final consumer.&nbsp;<\/p>\n\n\n\n<p>There are many speculations about where User Experience will go and with the current trend of artificial intelligence, self-driving cars and virtual reality the future of User Experience should be rich with innovations leading to better and simplified lives for humanity.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Works Cited<\/h3>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.nngroup.com\/videos\/don-norman-term-ux\/\" target=\"_blank\">Nielsen Norman Group &#8211; Don Norman on the term &#8220;UX&#8221;<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.fastcompany.com\/3043024\/a-brief-history-of-user-experience-design\" target=\"_blank\">Fast Company &#8211; A Brief History of User Experience Design<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/careerfoundry.com\/en\/blog\/ux-design\/the-fascinating-history-of-ux-design-a-definitive-timeline\/\" target=\"_blank\">CareerFoundry &#8211; The Fascinating History of UX Design &#8211; A Definitive Timeline<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.pbs.org\/wgbh\/theymadeamerica\/whomade\/taylor_hi.html\" target=\"_blank\">PBS &#8211; Who Made America? &#8211; Frederick Winslow Taylor<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/global.toyota\/en\/company\/vision-and-philosophy\/production-system\/\" target=\"_blank\">Toyota &#8211; Toyota Production System<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.idsa.org\/content\/henry-dreyfuss-fidsa\" target=\"_blank\">Industrial Designers Society of America &#8211; Henry Dreyfuss<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.nngroup.com\/books\/design-everyday-things-revised\/\" target=\"_blank\">Nielsen Norman Group &#8211; Design of Everyday Things<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Introduction The history of User Experience is a rich history that includes a lot more than just the computer industry.&nbsp;&nbsp;Most things we use as a human has evolved to be simpler and easier for us to use.&nbsp;&nbsp;Even without realizing it the practice of User Experience has been put into everything we create.&nbsp;&nbsp;The goal of User&hellip;<\/p>\n","protected":false},"author":717,"featured_media":18195,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[149,339],"tags":[],"coauthors":[528],"class_list":["post-18185","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-labs","category-timelines"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/studentwork.prattsi.org\/infovis\/wp-content\/uploads\/sites\/3\/2020\/06\/User-Experience-2.jpg?fit=845%2C400&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/paBdcV-4Jj","_links":{"self":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/18185","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/users\/717"}],"replies":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/comments?post=18185"}],"version-history":[{"count":2,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/18185\/revisions"}],"predecessor-version":[{"id":18194,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/posts\/18185\/revisions\/18194"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media\/18195"}],"wp:attachment":[{"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/media?parent=18185"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/categories?post=18185"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/tags?post=18185"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/studentwork.prattsi.org\/infovis\/wp-json\/wp\/v2\/coauthors?post=18185"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}