{"id":1459,"date":"2021-05-31T20:03:51","date_gmt":"2021-05-31T18:03:51","guid":{"rendered":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/?page_id=1459"},"modified":"2021-06-01T13:13:18","modified_gmt":"2021-06-01T11:13:18","slug":"lu-7-designing-the-interaction-between-human-and-computer","status":"publish","type":"page","link":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/lu-7-designing-the-interaction-between-human-and-computer\/","title":{"rendered":"LU #7 \u2013 Designing the Interaction between Human and Computer"},"content":{"rendered":"\n<p>07-01 (box.fu,\u00a0<a href=\"https:\/\/git.imp.fu-berlin.de\/hcc\/hci1-sose-2020\/-\/wikis\/lecture\/07-01_%20Designing%20the_Interaction_between_Human_and_Computer_HCI.pdf\">gitlab<\/a>)\u00a0|\u00a007-02 (box.fu,\u00a0<a href=\"https:\/\/git.imp.fu-berlin.de\/hcc\/hci1-sose-2020\/-\/wikis\/lecture\/07-02_Interaction_Styles.pdf\">gitlab<\/a>) | 07-03 (box.fu,\u00a0<a href=\"https:\/\/git.imp.fu-berlin.de\/hcc\/hci1-sose-2020\/-\/wikis\/lecture\/07-03_User_Interface_Guidelines.pdf\">gitlab<\/a>)<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">07-01 | Designing the Interaction between Human and Computer<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>The Interaction Framework<\/li><li>Models of Interaction<\/li><li>Stages Norman\u2019s Model of Interaction (Error\/Mistake, Slips)<\/li><li>Principles of Good Design<\/li><\/ul>\n\n\n\n<p><div class=\"h5p-content\" data-content-id=\"72\"><\/div><\/p>\n\n\n\n<p><div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-75\" class=\"h5p-iframe\" data-content-id=\"75\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"07-01 | Slip and Mistakes\"><\/iframe><\/div><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">07-02 | Interaction Styles<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Affordance<\/li><li>WIMP Interface: UI Controls, Pointers, Menus, Windows, Dialog Box, Icons<\/li><\/ul>\n\n\n\n<p><div class=\"h5p-content\" data-content-id=\"73\"><\/div><\/p>\n\n\n\n<p><div class=\"h5p-iframe-wrapper\"><iframe id=\"h5p-iframe-76\" class=\"h5p-iframe\" data-content-id=\"76\" style=\"height:1px\" src=\"about:blank\" frameBorder=\"0\" scrolling=\"no\" title=\"07-02 | Affordance\"><\/iframe><\/div><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">07-03 | User Interface Guidelines<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Style guidelines<\/li><li>Accessibility guidelines<\/li><li>Reusable design patterns<\/li><\/ul>\n\n\n\n<p><div class=\"h5p-content\" data-content-id=\"74\"><\/div><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Additional Material<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Reading: In &#8222;<a href=\"http:\/\/antle.iat.sfu.ca\/wp-content\/uploads\/2018\/08\/Dix_HumanComputerInteraction_.pdf\">Human-Computer Interaction<\/a>&#8220; Chap 3 &#8222;The interaction&#8220;<\/li><li>Constantine Stephanidis:&nbsp;<a href=\"https:\/\/pdfs.semanticscholar.org\/d08a\/bee541705a0bcaedeb71344e410308a64b1d.pdf\">User Interfaces for All: New perspectives into Human-Computer Interaction<\/a>. In C. Stephanidis (Ed.), User Interfaces for All &#8211; Concepts, Methods, and Tools (pp. 3-17). Mahwah, NJ: Lawrence Erlbaum Associates (ISBN 0-8058-2967-9, 760 pages).<\/li><li>Accessibility Personas mit unterschiedlichen Behinderungen<a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/behinderte-personas\/\">: https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/entwicklung-und-design\/behinderte-personas\/<\/a><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">User Interface Guidelines<\/h4>\n\n\n\n<ul class=\"wp-block-list\"><li>Human Interface Guidelines (GNOME)<a href=\"https:\/\/developer.gnome.org\/hig\/stable\/\">&nbsp;https:\/\/developer.gnome.org\/hig\/stable\/<\/a><\/li><li>Human Interface Guidelines (Apple)<a href=\"https:\/\/developer.apple.com\/ios\/human-interface-guidelines\">&nbsp;https:\/\/developer.apple.com\/ios\/human-interface-guidelines<\/a><\/li><li>Fluent Design System (Microsoft)<a href=\"https:\/\/www.microsoft.com\/design\/fluent\/#\/\">&nbsp;https:\/\/www.microsoft.com\/design\/fluent\/#\/<\/a><\/li><li>GDS Design Principles<br><a rel=\"noreferrer noopener\" href=\"https:\/\/www.gov.uk\/guidance\/government-design-principles#first\" target=\"_blank\">https:\/\/www.gov.uk\/guidance\/government-design-principles#first<\/a><\/li><li>Material Design<br>(Google)<a href=\"https:\/\/material.io\/\">&nbsp;https:\/\/material.io\/<\/a> <a rel=\"noreferrer noopener\" href=\"https:\/\/material.io\/design\" target=\"_blank\">https:\/\/material.io\/design<\/a><\/li><li>Facebook<br><a rel=\"noreferrer noopener\" href=\"https:\/\/en.facebookbrand.com\/\" target=\"_blank\">https:\/\/en.facebookbrand.com\/<\/a><\/li><li>AirBnB Design system (visual language):<br><a rel=\"noreferrer noopener\" href=\"https:\/\/airbnb.design\/building-a-visual-language\/\" target=\"_blank\">https:\/\/airbnb.design\/building-a-visual-language\/<\/a><\/li><li>Pinterest Design Principles:<br><a rel=\"noreferrer noopener\" href=\"https:\/\/medium.com\/@suprb\/redesigning-pinterest-block-by-block-6040a00d80a3\" target=\"_blank\">https:\/\/medium.com\/@suprb\/redesigning-pinterest-block-by-block-6040a00d80a3<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>07-01 (box.fu,\u00a0gitlab)\u00a0|\u00a007-02 (box.fu,\u00a0gitlab) | 07-03 (box.fu,\u00a0gitlab) 07-01 | Designing the Interaction between Human and Computer The Interaction Framework Models of Interaction Stages Norman\u2019s Model of Interaction (Error\/Mistake, Slips) Principles of Good Design 07-02 | Interaction Styles Affordance WIMP Interface: UI Controls, Pointers, Menus, Windows, Dialog Box, Icons 07-03 | User Interface Guidelines Style guidelines Accessibility &hellip; <a href=\"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/lu-7-designing-the-interaction-between-human-and-computer\/\" class=\"more-link\"><span class=\"screen-reader-text\">\u201eLU #7 \u2013 Designing the Interaction between Human and Computer\u201c<\/span> weiterlesen<\/a><\/p>\n","protected":false},"author":4293,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-1459","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/pages\/1459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/users\/4293"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/comments?post=1459"}],"version-history":[{"count":5,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/pages\/1459\/revisions"}],"predecessor-version":[{"id":1487,"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/pages\/1459\/revisions\/1487"}],"wp:attachment":[{"href":"https:\/\/blogs.fu-berlin.de\/hci1-sose2021\/wp-json\/wp\/v2\/media?parent=1459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}