{"id":1478,"date":"2020-03-12T16:14:34","date_gmt":"2020-03-12T16:14:34","guid":{"rendered":"http:\/\/www.matthewmosher.org\/blog\/?p=1478"},"modified":"2021-04-09T19:50:16","modified_gmt":"2021-04-09T19:50:16","slug":"interaction-design-principles","status":"publish","type":"post","link":"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/","title":{"rendered":"Interaction Design Principles"},"content":{"rendered":"\n<p><a href=\"https:\/\/youtube.com\/playlist?list=PLsTszf0qK1ZcvsfHoe__EjykZQp4C4-7h\">Here&#8217;s a handy video playlist<\/a> of me going over the 6 principles of interaction design.  <\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Interaction Design Principles\" width=\"620\" height=\"349\" src=\"https:\/\/www.youtube.com\/embed\/videoseries?list=PLsTszf0qK1ZcvsfHoe__EjykZQp4C4-7h\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>And here&#8217;s the play by play with examples:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p><a href=\"https:\/\/youtu.be\/sjkwx5551fQ\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/youtu.be\/sjkwx5551fQ<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Feedback<\/h2>\n\n\n\n<p><a href=\"https:\/\/youtu.be\/rT79bvwXoFw\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/youtu.be\/rT79bvwXoFw<\/a><\/p>\n\n\n\n<p>Here&#8217;s a <a href=\"http:\/\/tangible.media.mit.edu\/project\/intouch\/\" target=\"_blank\" rel=\"noreferrer noopener\">great example of shared physical feedback.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Constraints<\/h2>\n\n\n\n<p><a href=\"https:\/\/youtu.be\/yaxeUZ-S3XQ\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/youtu.be\/yaxeUZ-S3XQ<\/a><\/p>\n\n\n\n<p>Check out this video on <a href=\"http:\/\/tangible.media.mit.edu\/project\/musicbottles\/\" target=\"_blank\" rel=\"noreferrer noopener\">Music Bottles<\/a>. \u00a0Notice how only so many bottles can fit on the table, and that the stoppers only fit in the necks of the bottles? \u00a0Those are physical constraints.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Visibility<\/h2>\n\n\n\n<p><a href=\"https:\/\/youtu.be\/4RRZ5D1wZJs\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/youtu.be\/4RRZ5D1wZJs<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Affordances<\/h2>\n\n\n\n<p>https:\/\/<a href=\"https:\/\/youtu.be\/Fg8Gz8dhW0M\" target=\"_blank\" rel=\"noreferrer noopener\"><a href=\"https:\/\/youtu.be\/Fg8Gz8dhW0M\" target=\"_blank\" rel=\"noreferrer noopener\">youtu.be\/Fg8Gz8dhW0M<\/a><\/a><\/p>\n\n\n\n<p>The relationship between swings, public spaces, and humans affords swinging, and <a href=\"http:\/\/www.thisiscolossal.com\/2012\/09\/musical-swings-on-the-streets-of-montreal\/\" target=\"_blank\" rel=\"noreferrer noopener\">these ones play music<\/a>. \u00a0Does that change how people use the swings?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Metaphor<\/h2>\n\n\n\n<p><a href=\"https:\/\/youtu.be\/gLjeW5rWMb8\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/youtu.be\/gLjeW5rWMb8\u00a0<\/a><\/p>\n\n\n\n<p><a href=\"http:\/\/tangible.media.mit.edu\/project\/io-brush\/\" target=\"_blank\" rel=\"noreferrer noopener\">The IO Brush<\/a> uses a very simple conceptual model of a regular paint brush to great effect.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Mapping<\/h2>\n\n\n\n<p><a href=\"https:\/\/youtu.be\/uDBxxYR3DwU\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/youtu.be\/uDBxxYR3DwU<\/a><\/p>\n\n\n\n<p>See this <a href=\"https:\/\/newatlas.com\/sangli-li-fans-hat\/32207\/\" target=\"_blank\" rel=\"noreferrer noopener\">video about a hat <\/a>that maps different sensor inputs to motion outputs to keep people from getting in your face! And see how NASA is mapping radio waves to <a href=\"http:\/\/www.nasa.gov\/mission_pages\/cassini\/multimedia\/pia07966.html\" target=\"_blank\" rel=\"noreferrer noopener\">sounds we can hear from the Cassini Saturn mission.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Closing<\/h2>\n\n\n\n<p>Now that you know the principles of interaction design, see if you can identify how each of them is used in the next interactive system you encounter.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here&#8217;s a handy video playlist of me going over the 6 principles of interaction design. And here&#8217;s the play by play with examples: Introduction https:\/\/youtu.be\/sjkwx5551fQ Feedback https:\/\/youtu.be\/rT79bvwXoFw Here&#8217;s&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1480,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[82],"tags":[81],"class_list":["post-1478","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-teaching"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Interaction Design Principles - Matthew Mosher<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Interaction Design Principles - Matthew Mosher\" \/>\n<meta property=\"og:description\" content=\"Here&#8217;s a handy video playlist of me going over the 6 principles of interaction design. And here&#8217;s the play by play with examples: Introduction https:\/\/youtu.be\/sjkwx5551fQ Feedback https:\/\/youtu.be\/rT79bvwXoFw Here&#8217;s...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/\" \/>\n<meta property=\"og:site_name\" content=\"Matthew Mosher\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/matthew.b.mosher\" \/>\n<meta property=\"article:published_time\" content=\"2020-03-12T16:14:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-04-09T19:50:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mosher.art\/blog\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-12-at-17.13.43.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2340\" \/>\n\t<meta property=\"og:image:height\" content=\"1130\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/\",\"url\":\"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/\",\"name\":\"Interaction Design Principles - Matthew Mosher\",\"isPartOf\":{\"@id\":\"https:\/\/mosher.art\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mosher.art\/blog\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-12-at-17.13.43.png\",\"datePublished\":\"2020-03-12T16:14:34+00:00\",\"dateModified\":\"2021-04-09T19:50:16+00:00\",\"author\":{\"@id\":\"https:\/\/mosher.art\/blog\/#\/schema\/person\/4e5144dcbc2af59bf63d9f3b6b862fbd\"},\"breadcrumb\":{\"@id\":\"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/#primaryimage\",\"url\":\"https:\/\/mosher.art\/blog\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-12-at-17.13.43.png\",\"contentUrl\":\"https:\/\/mosher.art\/blog\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-12-at-17.13.43.png\",\"width\":2340,\"height\":1130},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mosher.art\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Interaction Design Principles\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mosher.art\/blog\/#website\",\"url\":\"https:\/\/mosher.art\/blog\/\",\"name\":\"Matthew Mosher\",\"description\":\"Intermedia Artist\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mosher.art\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/mosher.art\/blog\/#\/schema\/person\/4e5144dcbc2af59bf63d9f3b6b862fbd\",\"name\":\"admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Interaction Design Principles - Matthew Mosher","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/","og_locale":"en_US","og_type":"article","og_title":"Interaction Design Principles - Matthew Mosher","og_description":"Here&#8217;s a handy video playlist of me going over the 6 principles of interaction design. And here&#8217;s the play by play with examples: Introduction https:\/\/youtu.be\/sjkwx5551fQ Feedback https:\/\/youtu.be\/rT79bvwXoFw Here&#8217;s...","og_url":"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/","og_site_name":"Matthew Mosher","article_publisher":"https:\/\/www.facebook.com\/matthew.b.mosher","article_published_time":"2020-03-12T16:14:34+00:00","article_modified_time":"2021-04-09T19:50:16+00:00","og_image":[{"width":2340,"height":1130,"url":"https:\/\/mosher.art\/blog\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-12-at-17.13.43.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/","url":"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/","name":"Interaction Design Principles - Matthew Mosher","isPartOf":{"@id":"https:\/\/mosher.art\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/#primaryimage"},"image":{"@id":"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/#primaryimage"},"thumbnailUrl":"https:\/\/mosher.art\/blog\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-12-at-17.13.43.png","datePublished":"2020-03-12T16:14:34+00:00","dateModified":"2021-04-09T19:50:16+00:00","author":{"@id":"https:\/\/mosher.art\/blog\/#\/schema\/person\/4e5144dcbc2af59bf63d9f3b6b862fbd"},"breadcrumb":{"@id":"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/"]}]},{"@type":"ImageObject","inLanguage":"en","@id":"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/#primaryimage","url":"https:\/\/mosher.art\/blog\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-12-at-17.13.43.png","contentUrl":"https:\/\/mosher.art\/blog\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-12-at-17.13.43.png","width":2340,"height":1130},{"@type":"BreadcrumbList","@id":"https:\/\/mosher.art\/blog\/resources\/interaction-design-principles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mosher.art\/blog\/"},{"@type":"ListItem","position":2,"name":"Interaction Design Principles"}]},{"@type":"WebSite","@id":"https:\/\/mosher.art\/blog\/#website","url":"https:\/\/mosher.art\/blog\/","name":"Matthew Mosher","description":"Intermedia Artist","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mosher.art\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en"},{"@type":"Person","@id":"https:\/\/mosher.art\/blog\/#\/schema\/person\/4e5144dcbc2af59bf63d9f3b6b862fbd","name":"admin"}]}},"_links":{"self":[{"href":"https:\/\/mosher.art\/blog\/wp-json\/wp\/v2\/posts\/1478","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mosher.art\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mosher.art\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mosher.art\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mosher.art\/blog\/wp-json\/wp\/v2\/comments?post=1478"}],"version-history":[{"count":3,"href":"https:\/\/mosher.art\/blog\/wp-json\/wp\/v2\/posts\/1478\/revisions"}],"predecessor-version":[{"id":1530,"href":"https:\/\/mosher.art\/blog\/wp-json\/wp\/v2\/posts\/1478\/revisions\/1530"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mosher.art\/blog\/wp-json\/wp\/v2\/media\/1480"}],"wp:attachment":[{"href":"https:\/\/mosher.art\/blog\/wp-json\/wp\/v2\/media?parent=1478"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mosher.art\/blog\/wp-json\/wp\/v2\/categories?post=1478"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mosher.art\/blog\/wp-json\/wp\/v2\/tags?post=1478"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}