{"id":15218,"date":"2020-12-15T12:45:30","date_gmt":"2020-12-15T10:45:30","guid":{"rendered":"http:\/\/design-toolkit.recursos.uoc.edu\/affordance\/"},"modified":"2021-02-09T14:13:12","modified_gmt":"2021-02-09T12:13:12","slug":"affordance","status":"publish","type":"post","link":"http:\/\/design-toolkit-test.uoc.edu\/es\/affordance\/","title":{"rendered":"<em>Affordance<\/em>"},"content":{"rendered":"<h2>\u00bfQu\u00e9 es?<\/h2>\n<p>El t\u00e9rmino <strong><em>affordance<\/em><\/strong> es un neologismo que tiene sus ra\u00edces en el verbo ingl\u00e9s <em>to afford<\/em> (que, traducido al espa\u00f1ol, significa \u2018permitir\u2019, \u2018ofrecer\u2019). Existen multitud de definiciones, si bien una de las m\u00e1s utilizadas es la de \u00abcapacidad de un objeto de sugerir su propia utilizaci\u00f3n\u00bb. La expresi\u00f3n fue utilizada por primera vez en 1977 por el psic\u00f3logo James J. Gibson, en su obra <em>The Theory of Affordances<\/em>, en la que la define como la relaci\u00f3n natural entre un individuo y su entorno.<\/p>\n<p>En 1988, Donald Norman aplic\u00f3 este t\u00e9rmino a las interfaces hombre-m\u00e1quina en su obra <em>The Design of Everyday Things<\/em>, donde defiende que el <em>affordance<\/em> no depende \u00fanicamente de los atributos f\u00edsicos del objeto, sino tambi\u00e9n del contexto, objetivo, experiencias pasadas y percepciones cognitivas por parte del usuario. Seg\u00fan William Gaver (1991), en el mundo existen tres grupos de <em>affordances<\/em> posibles: perceptibles, ocultas y falsas (figura 1):<\/p>\n<ul>\n<li><strong>Perceptibles<\/strong>: son las m\u00e1s comunes, y corresponden a aquellas que incluyen informaci\u00f3n perceptual para el <em>affordance<\/em>. Por ejemplo, una silla adecuadamente dise\u00f1ada promueve de manera clara que la acci\u00f3n consecuente sea sentarse en ella.<\/li>\n<li><strong>Ocultas<\/strong>: no existe informaci\u00f3n disponible para un <em>affordance<\/em> existente, est\u00e1 oculta y debe deducirse a partir de otra evidencia (el objeto contiene un <em>affordance<\/em>, pero no es obvio). Por ejemplo, una botella de cerveza no tiene ninguna se\u00f1al que indique que puede servir para abrir otra botella.<\/li>\n<li><strong>Falsas<\/strong>: la informaci\u00f3n sugiere un <em>affordance<\/em> inexistente, sobre la cual las personas pueden equivocarse al interactuar. Por ejemplo, una puerta corredera con tirador muestra informaci\u00f3n equ\u00edvoca, porque esperaremos usar el tirador para abrir la puerta hacia nosotros, y no para desplazarla a un lado.<\/li>\n<li><strong>Rechazo correcto<\/strong>: corresponde a los casos en que no existe informaci\u00f3n perceptible ni <em>affordance<\/em>.<\/li>\n<\/ul>\n<div id=\"attachment_11840\" style=\"width: 510px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-11840\" loading=\"lazy\" class=\"my-image wp-image-11840 size-full\" src=\"\/wp-content\/uploads\/2020\/12\/75590_09.jpg\" alt=\"\" width=\"500\" height=\"302\" \/><p id=\"caption-attachment-11840\" class=\"wp-caption-text\">Figura 1. Categor\u00edas de <em>affordances<\/em> <br \/>Fuente: elaboraci\u00f3n propia.<\/p><\/div>\n<h2>Aplicaci\u00f3n<\/h2>\n<p>El objetivo del dise\u00f1ador es intentar plantear la mejor experiencia posible al usuario final. Las ideas sobre soluciones de dise\u00f1o emergen una vez se han analizado previamente las expectativas y necesidades de los usuarios objetivos. Una vez identificada toda esta informaci\u00f3n, puede comenzar el proceso de ideaci\u00f3n de un producto, f\u00edsico o digital, adecuado.<\/p>\n<p>En el caso de productos digitales \u2013por ejemplo, una web o una <em>app<\/em>\u2013, el usuario final ha de poder acceder f\u00e1cil y r\u00e1pidamente a contenidos y funcionalidades, de manera que obtenga una experiencia positiva y agradable del producto. Seg\u00fan Jakob Nielsen en <em>Banner blindness: Old and new findings<\/em>, un internauta com\u00fan adquiere inconscientemente, a lo largo del tiempo, ciertas conductas y reflejos que le permiten relacionar <em>affordances<\/em> de forma natural y l\u00f3gica. En cambio, un usuario con menos experiencia tendr\u00e1 m\u00e1s dificultades a la hora de interactuar con los mismos elementos. De ah\u00ed la importancia de la definici\u00f3n previa del usuario objetivo, contexto y entorno de uso, as\u00ed como de la realizaci\u00f3n, a lo largo del proceso de dise\u00f1o, de pruebas de usuario que permitan comprobar si se han dise\u00f1ado correctamente los elementos de interacci\u00f3n.<\/p>\n<p>En el dise\u00f1o, el <em>affordance<\/em> perceptible debe sugerir la funci\u00f3n de los elementos de interfaz, para lo que el dise\u00f1ador puede \u00abjugar\u00bb con los sentidos del usuario final (vista, sonido, tacto, etc.). Concretamente, en el \u00e1mbito digital existen elementos que promueven el <em>affordance<\/em>:<\/p>\n<ul>\n<li>Objetos como los botones, definidos seg\u00fan su forma, contraste, texturas o relieves, que incitan al usuario a pulsarlos.<\/li>\n<li>Mensajes textuales\/ling\u00fc\u00edsticos para guiar en la acci\u00f3n a realizar.<\/li>\n<li>Convenciones que indican que un elemento es interactivo, como lupas o texto subrayado en otro color (para los hiperv\u00ednculos). Estas convenciones son conocidas en ingl\u00e9s como <em>pattern affordances<\/em>.<\/li>\n<li>S\u00edmbolos\/iconos universales que representan una funci\u00f3n, como podr\u00eda ser el icono de impresora, <em>play<\/em>\/<em>pause<\/em>, <em>tweet<\/em>, compartir, etc.<\/li>\n<li>Im\u00e1genes\/fotos\/ilustraciones.<\/li>\n<\/ul>\n<p>Los botones de acci\u00f3n (o en ingl\u00e9s, CTA, <em>call to action<\/em>) se han convertido en un elemento frecuentemente utilizado por los dise\u00f1adores. A trav\u00e9s de estos botones, un usuario puede ejecutar acciones clave \u2013como comprar un producto, pedir un presupuesto, contactar con el proveedor de alg\u00fan servicio, registrarse o descargarse un documento o aplicaci\u00f3n en un entorno digital\u2013, por lo que es indispensable reforzar su <em>affordance<\/em>. Escoger un verbo o un color adecuado, a\u00f1adir un elemento gr\u00e1fico significativo o dise\u00f1ar un efecto de relieve son aspectos que ayudar\u00e1n a mejorar el <em>affordance<\/em> de un bot\u00f3n de acci\u00f3n.<\/p>\n<p>En el \u00e1mbito de dise\u00f1o de interfaces de usuario (GUI), se han realizado aplicaciones del <em>affordance<\/em> que han derivado en enfoques tales como el <em>skeumorfismo<\/em>, el dise\u00f1o plano o el dise\u00f1o material.<\/p>\n<p><strong><em>Skeuomorfismo<\/em><\/strong><\/p>\n<p>El <em>skeuomorfismo<\/em>, del griego <em>skeuos<\/em> (herramienta) y <em>morphe<\/em> (forma), se refiere a dise\u00f1ar un objeto o elemento imitando la apariencia de un objeto f\u00edsico que tenga funcionalidades similares, para hacerlo as\u00ed lo m\u00e1s familiar posible para el usuario. Apple aplic\u00f3 este enfoque por primera vez en 2007, en algunas de sus aplicaciones, como su plataforma de libros electr\u00f3nicos que imitaba las caracter\u00edsticas f\u00edsicas de una biblioteca real y tradicional, su calculadora (figura 2) o el bloc de notas. El dise\u00f1o <em>skeuom\u00f3rfico<\/em> presenta dos ventajas principales: por una parte, da sentido, al hacer comprensible la funci\u00f3n del objeto; por otra parte, promueve una emoci\u00f3n al querer interactuar con el objeto. Sin embargo, pueden aparecer inconvenientes relativos a la existencia de incoherencias funcionales respecto al referente, o una carga gr\u00e1fica no optimizada, que requiera mucho tiempo de descarga o exija demasiados recursos del sistema. Cabe destacar que desde el lanzamiento de iOS 7 en 2012, y coincidiendo con la salida de Apple del responsable de dise\u00f1o de interfaces, se decidi\u00f3 dejar de utilizar este enfoque.<\/p>\n<div id=\"attachment_11838\" style=\"width: 410px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-11838\" loading=\"lazy\" class=\"my-image wp-image-11838\" src=\"\/wp-content\/uploads\/2020\/12\/75590_10.jpg\" alt=\"\" width=\"400\" height=\"266\" \/><p id=\"caption-attachment-11838\" class=\"wp-caption-text\">Figura 2. Calculadora de dispositivos iOS <br \/>Fuente: Flickr.<\/p><\/div>\n<p><strong>Dise\u00f1o plano (<em>flat design<\/em>)<\/strong><\/p>\n<p>Es un enfoque m\u00e1s reciente que el <em>skeuomorfismo<\/em>, que se aleja de la imitaci\u00f3n de elementos reales y se caracteriza por un lenguaje visual minimalista orientado a ofrecer el m\u00e1ximo sentido con el m\u00ednimo de elementos (figura 3). La evoluci\u00f3n hacia este enfoque se basa en que, si anteriormente los usuarios digitales necesitaban un punto de referencia en el uso de ciertos elementos debido a su desconocimiento, actualmente las nuevas generaciones ya conocen estos c\u00f3digos.<\/p>\n<div id=\"attachment_11836\" style=\"width: 510px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-11836\" loading=\"lazy\" class=\"my-image wp-image-11836\" src=\"\/wp-content\/uploads\/2020\/12\/75590_11.jpg\" alt=\"\" width=\"500\" height=\"282\" \/><p id=\"caption-attachment-11836\" class=\"wp-caption-text\">Figura 3. Dise\u00f1o plano en el men\u00fa de inicio de Windows 10 <br \/>Fuente: Flickr.<\/p><\/div>\n<p><strong>Dise\u00f1o material (<em>material design<\/em>)<\/strong><\/p>\n<p>A partir del enfoque del dise\u00f1o plano, Google presenta una evoluci\u00f3n, estableciendo lo que se ha convertido en un nuevo est\u00e1ndar en dise\u00f1o: el <strong>dise\u00f1o material<\/strong>. En este caso, el dise\u00f1ador busca poder dar m\u00e1s profundidad, perspectiva y movimiento a los elementos aplicando nuevos efectos en los bordes, luces, sombras y colores. Este enfoque incluye frecuentemente animaciones para reforzar el <em>affordance<\/em> de los elementos de la interfaz: por ejemplo, los botones flotantes que al ser clicados despliegan breves efectos de animaci\u00f3n.<\/p>\n<div id=\"attachment_11834\" style=\"width: 179px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-11834\" loading=\"lazy\" class=\"my-image wp-image-11834 size-medium\" src=\"\/wp-content\/uploads\/2020\/12\/75590_12-169x300-1.jpg\" alt=\"\" width=\"169\" height=\"300\" \/><p id=\"caption-attachment-11834\" class=\"wp-caption-text\">Figura 4. Dise\u00f1o material en sistemas Android <br \/>Fuente: Wikimedia.<\/p><\/div>\n<h2>Ejemplos<\/h2>\n<p>Realizando una comparativa con la clasificaci\u00f3n que realiza Gaver, y m\u00e1s concretamente en el dise\u00f1o de interfaces, podemos clasificar los <em>affordances<\/em> digitales como:<\/p>\n<ul>\n<li><strong>Por patrones (<em>pattern affordances<\/em>)<\/strong>: el elemento u objeto presenta una caracter\u00edstica que el usuario tiene generalmente interiorizada como interactuable. Un ejemplo es el subrayado de una frase, que normalmente indica un hiperv\u00ednculo: el usuario comprende inmediatamente que clicando sobre esta frase el v\u00ednculo lo redirigir\u00e1 hacia otro lugar (figura 5).<\/li>\n<\/ul>\n<div id=\"attachment_11832\" style=\"width: 498px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-11832\" loading=\"lazy\" class=\"my-image wp-image-11832 \" src=\"\/wp-content\/uploads\/2020\/12\/75590_13.jpg\" alt=\"\" width=\"488\" height=\"65\" \/><p id=\"caption-attachment-11832\" class=\"wp-caption-text\">Figura 5. <em>Affordance<\/em> por patrones: hiperv\u00ednculo <br \/>Fuente: elaboraci\u00f3n propia.<\/p><\/div>\n<ul>\n<li><strong>Expl\u00edcita<\/strong>: es obvia, ya que comunica la acci\u00f3n exacta que debe ejecutar el usuario. Un bot\u00f3n que anuncie \u00abclic aqu\u00ed\u00bb es un ejemplo de <em>affordance<\/em> expl\u00edcito (figura 6).<\/li>\n<\/ul>\n<div id=\"attachment_11830\" style=\"width: 210px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-11830\" loading=\"lazy\" class=\"my-image wp-image-11830\" src=\"\/wp-content\/uploads\/2020\/12\/75590_14.jpg\" alt=\"\" width=\"200\" height=\"81\" \/><p id=\"caption-attachment-11830\" class=\"wp-caption-text\">Figura 6. <em>Affordance<\/em> expl\u00edcito <br \/>Fuente: elaboraci\u00f3n propia.<\/p><\/div>\n<ul>\n<li><strong>Falsa<\/strong>: parece proporcionar una acci\u00f3n concreta, pero en realidad ofrece otra diferente o ninguna, generalmente de manera accidental. Un ejemplo es el de un elemento con forma de bot\u00f3n acompa\u00f1ado con el texto \u00ab\u00a1Suscr\u00edbete ahora!\u00bb que invite a ser clicado, pero que en realidad no ejecute ninguna acci\u00f3n (figura 7).<\/li>\n<\/ul>\n<div id=\"attachment_11828\" style=\"width: 210px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-11828\" loading=\"lazy\" class=\"my-image wp-image-11828\" src=\"\/wp-content\/uploads\/2020\/12\/75590_15.jpg\" alt=\"\" width=\"200\" height=\"65\" \/><p id=\"caption-attachment-11828\" class=\"wp-caption-text\">Figura 7. Ejemplo de <em>affordance<\/em> falso <br \/>Fuente: elaboraci\u00f3n propia.<\/p><\/div>\n<ul>\n<li><strong>Metaf\u00f3rica<\/strong>: se basa en tomar como referentes objetos del mundo f\u00edsico para comunicar una acci\u00f3n en el proceso de dise\u00f1o. Los iconos son ejemplos de este tipo de <em>affordances<\/em>: un carrito de compras, una impresora, un micr\u00f3fono, un tel\u00e9fono, etc. (figura 8).<\/li>\n<\/ul>\n<div id=\"attachment_11826\" style=\"width: 310px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-11826\" loading=\"lazy\" class=\"my-image wp-image-11826 size-medium\" src=\"\/wp-content\/uploads\/2020\/12\/75590_16-300x235-1.jpg\" alt=\"\" width=\"300\" height=\"235\" \/><p id=\"caption-attachment-11826\" class=\"wp-caption-text\">Figura 8. <em>Affordance<\/em> metaf\u00f3rico <br \/>Fuente: Flickr.<\/p><\/div>\n<ul>\n<li><strong>Oculta<\/strong>: la acci\u00f3n est\u00e1 oculta hasta que el usuario interacciona con el elemento. Encontramos un ejemplo en las webs de comercio electr\u00f3nico cuando, al pasar el cursor del rat\u00f3n por encima de un producto, aparecen nuevos iconos para obtener m\u00e1s informaci\u00f3n o una imagen ampliada.<\/li>\n<\/ul>\n<div id=\"attachment_11824\" style=\"width: 310px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-11824\" loading=\"lazy\" class=\"my-image wp-image-11824 size-medium\" src=\"\/wp-content\/uploads\/2020\/12\/05590_17-300x157-1.jpg\" alt=\"\" width=\"300\" height=\"157\" \/><p id=\"caption-attachment-11824\" class=\"wp-caption-text\">Figura 9. Ejemplo de <em>affordance<\/em> oculto <br \/>Fuente: elaboraci\u00f3n propia.<\/p><\/div>\n<h2>Referencias<\/h2>\n<p><strong>Gaver, W.<\/strong>\u00a0(1991). \u00abTechnology affordances\u00bb. <em>Proceedings of the SIGCHI conference on Human factors in computing systems<\/em> (p\u00e1gs. 79-84). ACM.<\/p>\n<p><strong>Gibson, J.<\/strong> (1977). <em>The theory of affordances. Perceiving, acting, and knowing: Toward an ecological psychology<\/em>. Nueva Jersey: John Wiley &amp; Sons Inc.<\/p>\n<p><strong>Nielsen, J.<\/strong> (2007). \u00abBanner blindness: Old and new findings\u00bb. Jakob Nielsen&#8217;s alertbox. ISSN 1548-5552.<br \/>\n&lt;<a href=\"https:\/\/www.researchgate.net\/publication\/236157163_Banner_Blindness_Old_and_New_Findings\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.researchgate.net\/publication\/236157163_Banner_Blindness_Old_and_New_Findings<\/a>&gt;. [Fecha de consulta: 25 de enero de 2021].<\/p>\n<p><strong>Norman, D.<\/strong> (1988). <em>The Design of Everyday Things<\/em>. Nueva York: Basic Books.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfQu\u00e9 es? El t\u00e9rmino affordance es un neologismo que tiene sus ra\u00edces en el verbo ingl\u00e9s to afford (que, traducido al espa\u00f1ol, significa \u2018permitir\u2019, \u2018ofrecer\u2019). Existen multitud de definiciones, si bien una de las m\u00e1s utilizadas es la de \u00abcapacidad de un objeto de sugerir su propia utilizaci\u00f3n\u00bb. La expresi\u00f3n fue utilizada por primera vez [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":18059,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[28,27],"tags":[],"_links":{"self":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15218\/"}],"collection":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/"}],"about":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/types\/post\/"}],"author":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/users\/4\/"}],"replies":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/comments\/?post=15218"}],"version-history":[{"count":7,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15218\/revisions\/"}],"predecessor-version":[{"id":17976,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/posts\/15218\/revisions\/17976\/"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/18059\/"}],"wp:attachment":[{"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/media\/?parent=15218"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/categories\/?post=15218"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/design-toolkit-test.uoc.edu\/es\/wp-json\/wp\/v2\/tags\/?post=15218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}