{"id":464,"date":"2023-12-10T20:02:57","date_gmt":"2023-12-10T20:02:57","guid":{"rendered":"https:\/\/2024.macd.work\/phoebe\/?p=464"},"modified":"2023-12-12T14:30:13","modified_gmt":"2023-12-12T14:30:13","slug":"blog-task-05","status":"publish","type":"post","link":"https:\/\/2024.macd.work\/phoebe\/2023\/12\/10\/blog-task-05\/","title":{"rendered":"Task 05_Affordances, Signifiers, and Human-Centered Design"},"content":{"rendered":"<div class=\"wp-block-group alignfull has-pale-ocean-gradient-background has-background is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding:var(--wp--preset--spacing--xs) 0 var(--wp--preset--spacing--md) 0\">\n<div style=\"height:3em\" aria-hidden=\"true\" class=\"wp-block-spacer has-display-none-mobile\"><\/div>\n\n\n<figure class=\"wp-block-image size-large\" style=\"\"><img decoding=\"async\" src=\"https:\/\/2024.macd.work\/phoebe\/wp-content\/uploads\/sites\/31\/2023\/12\/%E6%88%AA%E5%9C%96-2023-12-10-%E6%99%9A%E4%B8%8A9.41.43-1024x573.png\" alt=\"\" class=\"wp-image-468\"><\/figure>\n\n\n<p class=\"wp-block-paragraph aligncenter has-text-align-center is-style-sub-heading has-text-color wp-block-paragraph\" style=\"color:#00000066;font-size:10px\"><a href=\"https:\/\/www.youtube.com\/watch?v=MNqTmuCOC6I\" target=\"_blank\" rel=\"noreferrer noopener\">Affordance in UX Design &#8211; How to Use Affordances and Signifiers<\/a>  [Date Accessed: 10 December 2023]<\/p>\n\n\n<div class=\"wp-block-buttons alignwide is-horizontal is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-3c3e2421 wp-block-buttons-is-layout-flex\" style=\"border-style:none;border-width:0px;padding-bottom:var(--wp--preset--spacing--xxs);margin:var(--wp--preset--spacing--xs) 0\">\n<div class=\"wp-block-button has-box-shadow\" style=\"\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.youtube.com\/watch?v=yY96hTb8WgI\" target=\"_blank\" rel=\"noreferrer noopener\" style=\"\">Video 1: Bad doors<\/a><\/div>\n\n\n<div class=\"wp-block-button has-box-shadow is-style-outline is-style-outline--1\" style=\"\"><a class=\"wp-block-button__link has-base-background-color has-background wp-element-button\" href=\"https:\/\/www.youtube.com\/watch?v=MNqTmuCOC6I\" target=\"_blank\" rel=\"noreferrer noopener\" style=\"\">Video 2: Affordance in UX Design<\/a><\/div>\n\n\n<div class=\"wp-block-button has-box-shadow is-style-fill\" style=\"\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/www.youtube.com\/watch?v=UtulTXJLGOI\" target=\"_blank\" rel=\"noreferrer noopener\" style=\"\">Video 3: Design of Everyday Things<\/a><\/div>\n\n\n<div class=\"wp-block-button has-box-shadow is-style-outline is-style-outline--2\" style=\"\"><a class=\"wp-block-button__link has-base-background-color has-background wp-element-button\" href=\"https:\/\/www.interaction-design.org\/literature\/book\/the-encyclopedia-of-human-computer-interaction-2nd-ed\/affordances\" target=\"_blank\" rel=\"noreferrer noopener\" style=\"\">Article: Affordances<\/a><\/div>\n<\/div>\n\n\n<p class=\"wp-block-paragraph wp-block-paragraph\" style=\"\">In the quest for effective and pleasurable designs, understanding the concept of &#8220;affordances&#8221; becomes crucial. Affordances, as explained by design expert Don Norman, refer to the relationship between an object and an agent, determining the possible actions that can be performed. <\/p>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile alignnone\">\n<figure class=\"wp-block-media-text__media\"><img decoding=\"async\" src=\"https:\/\/2024.macd.work\/phoebe\/wp-content\/uploads\/sites\/31\/2023\/12\/%E6%88%AA%E5%9C%96-2023-12-10-%E6%99%9A%E4%B8%8A9.35.56-1024x573.png\" alt=\"\" class=\"wp-image-471 size-full\"><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph wp-block-paragraph\" style=\"\">Norman illustrates this through the example of doors, particularly those he dubs &#8220;Norman doors&#8221; &mdash; doors that confuse users with their design. <\/p>\n<\/div>\n<\/div>\n\n\n<p class=\"wp-block-paragraph wp-block-paragraph\" style=\"\">Norman emphasizes two fundamental design principles: discoverability and feedback. Discoverability involves making it obvious what operations can be performed when interacting with an object, eliminating the need for instruction manuals. Feedback ensures users understand what happened and why during an interaction.<\/p>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile alignnone\" style=\"grid-template-columns:49% auto\">\n<figure class=\"wp-block-media-text__media\"><img decoding=\"async\" src=\"https:\/\/2024.macd.work\/phoebe\/wp-content\/uploads\/sites\/31\/2023\/12\/%E6%88%AA%E5%9C%96-2023-12-11-%E5%87%8C%E6%99%A812.35.58-1024x573.png\" alt=\"\" class=\"wp-image-473 size-full\"><\/figure><div class=\"wp-block-media-text__content\">\n<figure class=\"wp-block-image size-large\" style=\"\"><img decoding=\"async\" src=\"https:\/\/2024.macd.work\/phoebe\/wp-content\/uploads\/sites\/31\/2023\/12\/%E6%88%AA%E5%9C%96-2023-12-11-%E5%87%8C%E6%99%A812.31.07-1024x573.png\" alt=\"\" class=\"wp-image-472\"><\/figure>\n<\/div>\n<\/div>\n\n\n<p class=\"wp-block-paragraph aligncenter has-text-align-center is-style-default has-link-color wp-elements-1 wp-block-paragraph\" style=\"font-size:8px;padding:0\">It&#8217;s not you. Bad doors are everywhere. Available from: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.youtube.com\/watch?v=yY96hTb8WgI\" data-type=\"link\" data-id=\"https:\/\/www.youtube.com\/watch?v=KWGBGTGryFk\" target=\"_blank\">https:\/\/www.youtube.com\/watch?v=yY96hTb8WgI<\/a> [Accessed: 10 December 2023]<\/p>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile alignnone\" style=\"grid-template-columns:49% auto\">\n<figure class=\"wp-block-media-text__media\"><img decoding=\"async\" src=\"https:\/\/2024.macd.work\/phoebe\/wp-content\/uploads\/sites\/31\/2023\/12\/%E6%88%AA%E5%9C%96-2023-12-11-%E5%87%8C%E6%99%A83.31.44-1024x573.png\" alt=\"\" class=\"wp-image-482 size-full\"><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph wp-block-paragraph\" style=\"\">Affordances define what actions are possible based on the agent&#8217;s capabilities and the object&#8217;s properties. <\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile alignnone\" style=\"grid-template-columns:49% auto\">\n<figure class=\"wp-block-media-text__media\"><img decoding=\"async\" src=\"https:\/\/2024.macd.work\/phoebe\/wp-content\/uploads\/sites\/31\/2023\/12\/%E6%88%AA%E5%9C%96-2023-12-11-%E5%87%8C%E6%99%A83.32.13-1024x573.png\" alt=\"\" class=\"wp-image-483 size-full\"><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"wp-block-paragraph wp-block-paragraph\" style=\"\">Signifier is another key concept that plays a crucial role in communication, guiding users on how to interact with a product.<\/p>\n<\/div>\n<\/div>\n\n\n<p class=\"wp-block-paragraph aligncenter has-text-align-center is-style-default has-link-color wp-elements-2 wp-block-paragraph\" style=\"font-size:8px;padding:0\">Design of Everyday Things &#8211; Affordances &amp; Signifers. Available from: <a href=\"https:\/\/www.youtube.com\/watch?v=UtulTXJLGOI\" data-type=\"link\" data-id=\"https:\/\/www.youtube.com\/watch?v=UtulTXJLGOI\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.youtube.com\/watch?v=UtulTXJLGOI<\/a> [Accessed: 10 December 2023]<\/p>\n\n\n<p class=\"wp-block-paragraph wp-block-paragraph\" style=\"\">&nbsp;Taking a broader perspective, the application of design principles extends beyond physical objects to digital interfaces and even life choices. Tim Brown, CEO of IDEO, emphasizes the value of design thinking, which is to reframe problems and understand user needs. It provides thinking tools applicable to various scenarios, making individuals, whether business professionals or artists, better problem solvers.<\/p>\n\n\n<p class=\"wp-block-paragraph wp-block-paragraph\" style=\"\">In the realm of technology, invisible signifiers guide user interactions, raising questions about good versus bad design. Cars equipped with smart features exemplify how design can simplify actions. Norman&#8217;s exploration of a car door showcases how affordances and signifiers contribute to a seamless user experience.<\/p>\n\n\n<p class=\"wp-block-paragraph wp-block-paragraph\" style=\"\">Ultimately, good design extends beyond individual products to encompass entire systems, including packaging, manuals, and user interfaces. Norman and Brown&#8217;s teachings underline the significance of human-centered design, ensuring products and experiences align with users&#8217; capabilities and expectations. It is also worth noting that design is a pervasive aspect of our daily lives, influencing how we interact with and perceive the world around us.<\/p>\n\n\n<figure class=\"wp-block-image size-large\" style=\"padding-top:var(--wp--preset--spacing--sm)\"><img decoding=\"async\" src=\"https:\/\/2024.macd.work\/phoebe\/wp-content\/uploads\/sites\/31\/2023\/12\/%E6%88%AA%E5%9C%96-2023-12-11-%E5%87%8C%E6%99%A83.19.54-1024x573.png\" alt=\"\" class=\"wp-image-478\"><\/figure>\n\n\n<p class=\"wp-block-paragraph aligncenter has-text-align-center is-style-default has-link-color wp-elements-3 wp-block-paragraph\" style=\"font-size:8px;padding:0\">It&#8217;s not you. Bad doors are everywhere. Available from: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.youtube.com\/watch?v=yY96hTb8WgI\" data-type=\"link\" data-id=\"https:\/\/www.youtube.com\/watch?v=KWGBGTGryFk\" target=\"_blank\">https:\/\/www.youtube.com\/watch?v=yY96hTb8WgI<\/a> [Accessed: 10 December 2023]<\/p>\n\n\n<p class=\"wp-block-paragraph aligncenter has-text-align-center is-style-default wp-block-paragraph\" style=\"font-size:35px;padding:var(--wp--preset--spacing--lg) 0 0 0;margin:0\"><strong>Affordances of an iPad<\/strong>:<\/p>\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-style-surface has-14-font-size is-layout-flex wp-container-core-columns-is-layout-27444643 wp-block-columns-is-layout-flex is-stacked-on-mobile\" data-columns=\"1\" style=\"--columns:1\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<ul class=\"wp-block-list is-style-default wp-block-list\">\n<li>Touch Interface: The iPad&#8217;s primary affordance is its touch-sensitive screen, allowing users to interact directly with the device using gestures like tapping, swiping, and pinching.<\/li>\n\n\n\n<li>Digital Imaging: The iPad affords the capturing and storing of digital images through its built-in cameras, enabling users to take photos and videos.<\/li>\n\n\n\n<li>Multimedia Consumption: With a vibrant display and powerful speakers, the iPad provides an excellent platform for consuming multimedia content, such as watching videos, listening to music, and viewing photos.<\/li>\n\n\n\n<li>Productivity Applications: The iPad comes equipped with a variety of productivity apps, affording users the ability to create documents, spreadsheets, and presentations, enhancing productivity on the go.<\/li>\n\n\n\n<li>Internet Browsing: The Safari browser and Wi-Fi capabilities afford seamless internet browsing, allowing users to access information, read articles, and connect with online resources.<\/li>\n\n\n\n<li>eBook Reading: The iPad serves as an eReader, affording users the ability to read digital books and documents through apps like Apple Books or other third-party eBook platforms.<\/li>\n\n\n\n<li>Communication: The iPad&#8217;s built-in microphone and camera, along with various communication apps, afford video calls, voice calls, and messaging, enabling users to stay connected with others.<\/li>\n\n\n\n<li>Split View and Slide Over (for multitasking): The ability to split the screen or overlay apps affords users multitasking capabilities.<\/li>\n\n\n\n<li>Apple Pencil Compatibility: The iPad&#8217;s compatibility with the Apple Pencil affords users the ability to draw, annotate, and interact with the screen in a more precise manner.<\/li>\n\n\n\n<li>The presence of the App Store icon affords users the ability to discover and download new applications.<\/li>\n\n\n\n<li>The physical sleep\/wake button affords users the ability to turn the device on or off and put it to sleep.<\/li>\n\n\n\n<li>The physical volume buttons afford users the ability to control the audio output.<\/li>\n\n\n\n<li>The iPad&#8217;s sensors afford responsive screen orientation changes based on device tilt or rotation.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n<p class=\"wp-block-paragraph alignwide has-text-align-wide has-text-color wp-block-paragraph\" style=\"color:#00000045\">&#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; <\/p>\n\n\n<div class=\"wp-block-group alignfull is-layout-constrained wp-block-group-is-layout-constrained\" style=\"padding:var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--xl) 0\">\n<div class=\"wp-block-columns alignwide are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-5d8cacc7 wp-block-columns-is-layout-flex is-stacked-on-mobile\" data-columns=\"2\" style=\"--columns:2\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow has-order\" style=\"--order-mobile:2\">\n<h3 class=\"wp-block-heading\" id=\"what-is-a-perceived-affordance\">What is a perceived affordance?<\/h3>\n\n\n<p class=\"wp-block-paragraph wp-block-paragraph\" style=\"\">Perceived affordance refers to the user&#8217;s interpretation or expectation of the potential actions an object offers. It is subjective and influenced by the user&#8217;s prior experiences and cultural background.<\/p>\n\n\n<p class=\"wp-block-paragraph wp-block-paragraph\" style=\"\">In design, perceived affordances play a crucial role. Users should be able to intuitively understand how to interact with a product based on its design without the need for explicit instructions. For instance, a well-designed door lever that clearly indicates whether to push or pull offers a strong perceived affordance, reducing confusion.<\/p>\n<\/div>\n\n\n<div class=\"wp-block-column is-vertically-aligned-center has-transform is-layout-flow wp-block-column-is-layout-flow has-position-relative has-z-index\" style=\"--z-index:1\">\n<div class=\"wp-block-group has-filter has-transform has-primary-light-gradient-background has-background is-layout-constrained wp-block-group-is-layout-constrained has-position-absolute has-top has-right has-bottom has-left has-z-index\" style=\"--top:0px;--right:0px;--bottom:0px;--left:0px;margin:0\"><\/div>\n\n\n<div class=\"wp-block-group is-style-surface has-surface-color has-background-background-color has-text-color has-background has-flow-block-font-family has-48-font-size has-animation is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-73541f77 wp-block-group-is-layout-flex has-position-relative has-z-index\" style=\"border-style:none;border-width:0px;border-radius:12px;line-height:1;--animation-name:fade-in-up;--z-index:1;margin:0;padding:var(--wp--preset--spacing--lg)\">\n<p class=\"wp-block-paragraph has-surface-color has-text-color has-flow-block-font-family has-42-font-size wp-block-paragraph\" style=\"\">Lorem ipsum dolor sit amet, consectetur adipis iquip ex ea Duis autLorem ipsu m adipis iquip ex ea aut<\/p>\n\n<\/div>\n\n\n<div class=\"wp-block-group is-style-surface has-background-background-color has-background has-animation is-nowrap is-layout-flex wp-container-core-group-is-layout-6ff5ae00 wp-block-group-is-layout-flex has-position-absolute has-top has-right has-z-index\" style=\"--animation-name:fade-in-up;--top:1.5em;--top-mobile:-0.7em;--right:-1.5em;--right-mobile:-0.7em;--z-index:2;margin:0\">\n<figure class=\"wp-block-image size-full is-resized\" style=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" src=\"https:\/\/2024.macd.work\/phoebe\/wp-content\/uploads\/sites\/31\/2023\/12\/target.png\" alt=\"\" class=\"wp-image-490\" style=\"aspect-ratio:1;width:56px;height:auto\" srcset=\"https:\/\/2024.macd.work\/phoebe\/wp-content\/uploads\/sites\/31\/2023\/12\/target.png 512w, https:\/\/2024.macd.work\/phoebe\/wp-content\/uploads\/sites\/31\/2023\/12\/target-300x300.png 300w, https:\/\/2024.macd.work\/phoebe\/wp-content\/uploads\/sites\/31\/2023\/12\/target-150x150.png 150w, https:\/\/2024.macd.work\/phoebe\/wp-content\/uploads\/sites\/31\/2023\/12\/target-500x500.png 500w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-32cfbcba wp-block-group-is-layout-flex\">\n<h4 class=\"wp-block-heading has-medium-font-size\" id=\"real-affordances\">Real Affordances<\/h4>\n\n<p class=\"wp-block-paragraph has-16-font-size wp-block-paragraph\" style=\"\">intimately connected to physical constraints<\/p>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"wp-block-group is-style-surface has-background-background-color has-background has-animation is-nowrap is-layout-flex wp-container-core-group-is-layout-27444643 wp-block-group-is-layout-flex has-position-absolute has-bottom has-left has-z-index\" style=\"--animation-name:fade-in-up;--bottom:1.5em;--bottom-mobile:-0.7em;--left:-1.5em;--left-mobile:-0.7em;--z-index:2\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-32cfbcba wp-block-group-is-layout-flex\">\n<h4 class=\"wp-block-heading has-medium-font-size\" id=\"perceived-affordances\">Perceived Affordances<\/h4>\n\n<p class=\"wp-block-paragraph has-16-font-size wp-block-paragraph\" style=\"\">subjective understanding or interpretation<\/p>\n\n<\/div>\n\n<figure class=\"wp-block-image size-full is-resized\" style=\"\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"512\" src=\"https:\/\/2024.macd.work\/phoebe\/wp-content\/uploads\/sites\/31\/2023\/12\/imagination.png\" alt=\"\" class=\"wp-image-491\" style=\"aspect-ratio:1;width:58px;height:auto\" srcset=\"https:\/\/2024.macd.work\/phoebe\/wp-content\/uploads\/sites\/31\/2023\/12\/imagination.png 512w, https:\/\/2024.macd.work\/phoebe\/wp-content\/uploads\/sites\/31\/2023\/12\/imagination-300x300.png 300w, https:\/\/2024.macd.work\/phoebe\/wp-content\/uploads\/sites\/31\/2023\/12\/imagination-150x150.png 150w, https:\/\/2024.macd.work\/phoebe\/wp-content\/uploads\/sites\/31\/2023\/12\/imagination-500x500.png 500w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><\/figure>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Affordance in UX Design &#8211; How to Use Affordances and Signifiers [Date Accessed: 10 December 2023] In the quest for effective and pleasurable designs, understanding the concept of &#8220;affordances&#8221; becomes crucial. Affordances, as explained by design expert Don Norman, refer to the relationship between an object and an agent, determining the possible actions that can &hellip;<\/p>\n","protected":false},"author":39,"featured_media":468,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_vp_format_video_url":"","_vp_image_focal_point":[],"footnotes":""},"categories":[32],"tags":[],"class_list":["post-464","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-semester-1"],"_links":{"self":[{"href":"https:\/\/2024.macd.work\/phoebe\/wp-json\/wp\/v2\/posts\/464","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2024.macd.work\/phoebe\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/2024.macd.work\/phoebe\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/2024.macd.work\/phoebe\/wp-json\/wp\/v2\/users\/39"}],"replies":[{"embeddable":true,"href":"https:\/\/2024.macd.work\/phoebe\/wp-json\/wp\/v2\/comments?post=464"}],"version-history":[{"count":21,"href":"https:\/\/2024.macd.work\/phoebe\/wp-json\/wp\/v2\/posts\/464\/revisions"}],"predecessor-version":[{"id":553,"href":"https:\/\/2024.macd.work\/phoebe\/wp-json\/wp\/v2\/posts\/464\/revisions\/553"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/2024.macd.work\/phoebe\/wp-json\/wp\/v2\/media\/468"}],"wp:attachment":[{"href":"https:\/\/2024.macd.work\/phoebe\/wp-json\/wp\/v2\/media?parent=464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/2024.macd.work\/phoebe\/wp-json\/wp\/v2\/categories?post=464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/2024.macd.work\/phoebe\/wp-json\/wp\/v2\/tags?post=464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}