{"id":1228,"date":"2020-09-10T22:22:46","date_gmt":"2020-09-11T02:22:46","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/48-339\/f2020\/?p=1228"},"modified":"2020-09-10T22:22:46","modified_gmt":"2020-09-11T02:22:46","slug":"class-notes-8-sep-10-sep","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/48-339\/f2020\/?p=1228","title":{"rendered":"Class Notes: 8 Sep, 10 Sep"},"content":{"rendered":"<h1><strong>\u00a0Start Visual<\/strong><\/h1>\n<h2>Administrivia<\/h2>\n<p>Crits\/projects due on Tuesdays.\u00a0 Reading\/listening\/watching assignments due Thursdays.<\/p>\n<h2><strong>Arduino \/ P5.js configuration<\/strong><\/h2>\n<p>Install Arduino, run test hello world sketch<\/p>\n<p>Install p5.js and serial control: https:\/\/github.com\/p5-serial\/p5.serialcontrol\/releases<\/p>\n<p>Dan Schiffman has great <a href=\"https:\/\/www.youtube.com\/user\/shiffman\">tutorials<\/a>.<\/p>\n<h2><strong>Discuss visual feedback<\/strong><\/h2>\n<p>The less types and amount of visual feedback you give the better<\/p>\n<p>Ex: a clock needs hours and minutes, but does it need seconds? Microseconds? Centuries?<\/p>\n<p>What do the clocks in my kitchen need to show me?\u00a0 Why do I have so many clocks in appliances that can set an action for a specific time in the future?<\/p>\n<p>Combining the visual and haptic, the <a href=\"https:\/\/www.eone-time.com\/\">Bradley watch<\/a>.<\/p>\n<p>Did Susan Kare invent emoji?\u00a0 Her <a href=\"https:\/\/www.smithsonianmag.com\/innovation\/how-susan-kare-designed-user-friendly-icons-for-first-macintosh-180973286\/\">work at Apple<\/a><\/p>\n<p>led to her work at General Magic, making &#8220;<a href=\"http:\/\/ndagallery.cooperhewitt.org\/gallery\/81139291\/General-Magic\">stamps<\/a>&#8221; for the cutting-edge <a href=\"https:\/\/www.generalmagicthemovie.com\/howtowatch\">Magic Link &#8220;PDA&#8221;<\/a>.<\/p>\n<h2>Fundamental types of visual state<\/h2>\n<ul>\n<li>color<\/li>\n<li>motion<\/li>\n<li>intensity<\/li>\n<li>type of display: led, a light, a screen, a moving object in 3 dimensions, metronome<\/li>\n<\/ul>\n<h2>Complex types of visual state<\/h2>\n<ul>\n<li>typeface<\/li>\n<li>language<\/li>\n<li>icons<\/li>\n<li>images<\/li>\n<\/ul>\n<h2><strong>Reading assignment<\/strong><\/h2>\n<p>how many lights do you have in your kitchen?<\/p>\n<p>Make It So: Forward, Chapter 1, Chapter 3. (Chapter 2 if you have time.)<\/p>\n<h1><strong>Displaying State<\/strong><\/h1>\n<p>But first, story telling<\/p>\n<p>Tell a story, not a novel, not an elevator pitch.<\/p>\n<p>A story has at least one actor, a beginning, a plot, and an end.<\/p>\n<p>In interaction design &#8220;plot&#8221; is the interaction.<\/p>\n<p>What is the plot of a doorbell?\u00a0 Someone visits, they want to get your attention (as you don&#8217;t spend all day staring at the door), they push a button, an action happens, and you know someone is at the door.<\/p>\n<p>How do doorbells work for people without hearing?\u00a0 <a href=\"https:\/\/www.arts.gov\/art-works\/2018\/look-deafspace-design-dcs-gallaudet-university\">What did we do before electricity<\/a>?<\/p>\n<h2>A brief aside on visual skeuomorphism<\/h2>\n<p>But first, visual skeuomorphism.\u00a0 A skeuomorph is a object derived from past objects and contians past visual cues that have no meaning in current culture.\u00a0 Ex: the &#8220;phone&#8221; icon on my phone that looks like the physical handsets we stopped using in the 90s.<\/p>\n<p>is a derivative object that retains ornamental <a title=\"Design\" href=\"https:\/\/en.wikipedia.org\/wiki\/Design\">design<\/a> cues (attributes) from structures that were inherent to the original.<sup id=\"cite_ref-:0_3-0\" class=\"reference\"><a href=\"https:\/\/en.wikipedia.org\/wiki\/Skeuomorph#cite_note-:0-3\">[3]<\/a><\/sup> Examples include <a title=\"Pottery\" href=\"https:\/\/en.wikipedia.org\/wiki\/Pottery\">pottery<\/a> embellished with imitation <a title=\"Rivet\" href=\"https:\/\/en.wikipedia.org\/wiki\/Rivet\">rivets<\/a> reminiscent of similar pots made of metal<sup id=\"cite_ref-4\" class=\"reference\"><a href=\"https:\/\/en.wikipedia.org\/wiki\/Skeuomorph#cite_note-4\">[4]<\/a><\/sup> and a software calendar that imitates the <a title=\"Visual appearance\" href=\"https:\/\/en.wikipedia.org\/wiki\/Visual_appearance\">appearance<\/a> of binding on a paper desk calendar.\u00a0 Or the &#8220;save&#8221; icon that looks like a floppy drive, that a Japanese student thought looked like a drink dispenser: \u00a0https:\/\/twitter.com\/fea0er\/status\/1160099135569063936<\/p>\n<p>&#8220;<a href=\"https:\/\/translate.google.com\/#view=home&amp;op=translate&amp;sl=ja&amp;tl=en&amp;text=Ekuseru%20no%20hozon%20m%C4%81ku%20ttenani%20de%20jid%C5%8D%20hanbaikinan%20desu%20ka%20ne\"><span class=\"css-901oao css-16my406 r-1qd0xha r-ad9z0x r-bcqeeo r-qvutc0\">Excel\u306e\u4fdd\u5b58\u30de\u30fc\u30af\u3063\u3066\u4f55\u3067\u81ea\u52d5\u8ca9\u58f2\u6a5f\u306a\u3093\u3067\u3059\u304b\u306d\uff1f<\/span><\/a>&#8221;<\/p>\n<p>When you are creating visual representations, are you using your culture&#8217;s history of symbolism?<\/p>\n<h2>States visualization<\/h2>\n<p>Console displays in video games &#8211; metadata about your status. health, money, power, speed.<\/p>\n<p>Why do some of the games with great graphics still use bar graphs to display raw data?\u00a0 We could hear our speed.\u00a0 Our character\/avatar could change color.\u00a0 Why do we just have bar graphs?<\/p>\n<ul>\n<li>Wipeout: https:\/\/www.youtube.com\/watch?v=m43c0OfweM4<\/li>\n<li>Rez: https:\/\/www.youtube.com\/watch?v=sMq_XSc3vzA<\/li>\n<\/ul>\n<p>What do colors mean?\u00a0 What states do they reflect?<\/p>\n<ul>\n<li>ex: white wedding dress or white funeral dress?<\/li>\n<li>colors important because they show wealth: purple for royalty, gold, dichromatic glass.\u00a0 Purple as an expensive color to make so only the rich\/powerful could afford clothes dyed purple. (&#8220;<a href=\"https:\/\/99percentinvisible.org\/episode\/the-secret-lives-of-color\/\">The Secret Lives of Color<\/a>&#8220;, &#8220;<a href=\"https:\/\/slate.com\/human-interest\/2013\/10\/blue-jeans-what-s-the-reason-behind-the-color.html\">Why are Jeans Blue?<\/a>&#8220;<\/li>\n<li>color of money &#8212; bills with different colors are easier to sort\/find<\/li>\n<li>color of food, white is good\/clean.\u00a0 In the south we have &#8220;<a href=\"http:\/\/www.cookandpost.com\/recipes-ideas-for-leftover-dirty-rice.htm\">dirty rice<\/a>&#8221; where we mix leftovers with fresh, &#8220;clean&#8221; rice.<\/li>\n<li><a href=\"https:\/\/clickamericana.com\/topics\/home-garden\/shades-past-victorian-house-paint-color-cards\">the colors of Victorian houses<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00a0Start Visual Administrivia Crits\/projects due on Tuesdays.\u00a0 Reading\/listening\/watching assignments due Thursdays. Arduino \/ P5.js configuration Install Arduino, run test hello world sketch Install p5.js and serial control: https:\/\/github.com\/p5-serial\/p5.serialcontrol\/releases Dan Schiffman has great tutorials. Discuss visual feedback The less types and amount of visual feedback you give the better Ex: a clock needs hours and minutes, &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/48-339\/f2020\/?p=1228\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Class Notes: 8 Sep, 10 Sep&#8221;<\/span><\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/f2020\/index.php?rest_route=\/wp\/v2\/posts\/1228"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/f2020\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/f2020\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/f2020\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/f2020\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1228"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/f2020\/index.php?rest_route=\/wp\/v2\/posts\/1228\/revisions"}],"predecessor-version":[{"id":1232,"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/f2020\/index.php?rest_route=\/wp\/v2\/posts\/1228\/revisions\/1232"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/f2020\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/f2020\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/48-339\/f2020\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}