Affordance es un término originalmente acuñado por un psicólogo, JJ Gibson, en la década de 1970. Lo definió como la relación entre un entorno y un actor. Hoy en día, el costo se extiende más allá de la psicología conductual o cognitiva y en el diseño de interfaces digitales. Comprender affordance te permitirá comprender mejor el diseño de productos e interfaces, lo que a su vez te convertirá en un diseñador mucho mejor.
Una situación donde las características sensoriales de un objeto implican intuitivamente su funcionalidad y uso. - Crowdcube
La definición de término del profano de Crowdcube es acertada. Todos los objetos que nos rodean tienen posibilidades, algunos más obvios que otros. La conformidad es la posibilidad de una acción con un objeto; no es una propiedad del objeto en sí. En otras palabras, se puede presionar un botón; la posibilidad de presionar un botón es su affordance.
La definición original acuñada por JJ Gibson describió todas las acciones físicas posibles que podría realizar con un objeto. Con el tiempo, la definición cambió. Ahora, la definición es más amplia e incluye la detección de acciones. Este cambio se ha producido en la evolución tecnológica de las interfaces digitales. La capacidad de descubrimiento es un concepto interesante en el ámbito digital, ya que cuando utilizas una computadora, puedes descubrir acciones a través de los consejos que te dan dentro de las interfaces.
Dé un paso atrás en el mundo físico, donde verá que los objetos tienen propiedades físicas como el tamaño, la forma o el peso que brindan pistas sobre lo que podría hacer con ellos. Aquí hay algunos ejemplos clásicos. Comencemos con una taza de té; es pequeño y tiene un mango, lo que permite sostenerlo. Su forma de cuenco sumergido, lo que indica que también puede contener algo. Cuando está tomando el té, lo mejor es que puede sostener la taza de té y beber de ella. Otro ejemplo es un cepillo de dientes: tiene un mango largo pero delgado, que permite agarre, y así sucesivamente.
Los objetos físicos se pueden clasificar en tres tipos de posibilidades:
La asequibilidad perceptible es la definición básica de affordance, donde las características de un objeto implican una acción.
La accesibilidad oculta es cuando un objeto tiene posibilidades que no son tan obvias; por ejemplo, simplemente mirando una botella de cerveza no podrá decirle que puede usarla para abrir otra botella de cerveza.
False affordance es cuando hay un affordance percibido; pero no ocurren resultados de la posible acción. Por ejemplo, presionar un botón que no hace nada, como usar el control remoto de tu TV para encender el televisor, pero no funciona por alguna razón. El affordance sigue ahí, puedes presionar ese botón tanto como quieras, pero no ocurre nada, no hay función.
Las interfaces digitales son especiales. Nos permiten hacer cosas que están limitadas a un mundo bidimensional que es una pantalla de computadora. Hay tantas cosas que podríamos hacer dentro de cualquier aplicación, sitio web o programa; pero todos tienen una gran limitación paralizante: no pueden darte pistas físicas sobre lo que puedes hacer. En cambio, todos confían en pistas visuales o affordances. Esto puede ser muy complicado si no comprende la importante función que desempeña la capacidad en la creación de interfaces exitosas.
Si comprende cómo funcionan las ventajas, podrá usarlas para su beneficio. Cuando pueda hacer que affordance sea una herramienta, podrá crear diseños intuitivos y fáciles de usar. Los diseños intuitivos tienen un cierto atractivo para ellos, muy probablemente porque nos parecen tediosos y molestos muchos sitios web o aplicaciones, por lo que es realmente estimulante usarlos. Además, las conversiones de los efectos de la capacidad de pago, que importan mucho para crear un diseño exitoso.
Si quiere entender completamente cómo funcionan las ventajas en el diseño de la interfaz, debemos ser específicos. Hagámoslo ahora cubriendo seis tipos de accesibilidad diferentes que se ven en las interfaces digitales, que incluyen: explícitas, de patrones, ocultas, falsas, metafóricas y negativas.
De manera similar a la asequibilidad perceptible, la accesibilidad explícita son los consejos que se desprenden del lenguaje o la apariencia física del objeto. Un botón elevado que dice "Haga clic en mí" es un gran ejemplo de lenguaje y señales físicas. El aspecto elevado del botón indica la posibilidad de hacer clic y también lo hace el texto "Hacer clic en mí". Es obvio.
El lenguaje juega una parte tan importante de guiar a los usuarios a través de las interfaces digitales. Un campo de entrada que le pide su "Nombre completo" permite ingresar su nombre en él. El lenguaje proporciona pautas claras no solo sobre lo que debería estar haciendo, sino también sobre lo que podría estar haciendo. Ingresar letras, como su nombre, es diferente a ingresar números, como su número de teléfono y puede decir cuál puede hacer por el contexto del texto. Sin embargo, también es importante considerar qué tan obvia es su interfaz para usar sin instrucciones explícitas y detalladas. Su diseño debe ser útil e intuitivo sin tener la mano del usuario en cada paso.
Un patrón de affordance es el costo establecido por las convenciones. Un gran ejemplo sería un logotipo que se puede hacer clic en la esquina superior izquierda de una página web. Es un patrón que vemos en todas partes; entonces lo esperamos en todas partes. Se supone que un texto que es de un color diferente, a veces tal vez subrayado o cursiva, entre el texto del cuerpo sin cambios como un párrafo, es un enlace. El correo electrónico a menudo se representa con un sobre, mientras que los ajustes se representan con un engranaje.
En estos ejemplos, el correo electrónico no requiere una envoltura real, nunca lo ha hecho, y tampoco la configuración requiere el manejo de engranajes. Es un patrón metafórico al que hemos estado expuestos durante mucho, mucho tiempo; entonces se convirtió en una convención.
Los patrones son excelentes para comunicar accesos directos mentales, pero solo si los usuarios conocen estos patrones. Hay nuevos patrones introducidos todo el tiempo, por ejemplo, el menú de hamburguesas es un concepto relativamente nuevo para menús y navegación. Al diseñar con nuevos patrones en mente, debe asegurarse de que sus usuarios estén familiarizados con ellos. Pero, cuando sabe que su público ha estado expuesto anteriormente a estos patrones, tiene la capacidad de crear algunos diseños increíbles sin ser explícito.
La flexibilidad escondida en los diseños digitales es similar a la de los objetos físicos. En el mundo digital, sin embargo, la oferta real no está disponible hasta que se haya tomado una acción para revelarla. Por ejemplo, al pasar el mouse sobre un botón para ver si no está activo, y por lo tanto hacer clic. Los menús desplegables son otro ejemplo, donde no se ve el menú a menos que coloque el cursor sobre el elemento de la lista principal o haga clic en él.
A menudo se usan posibilidades escondidas para simplificar la complejidad visual de un diseño. En el ejemplo del menú desplegable, usamos el menú desplegable para ocultar todas las opciones de navegación, ya que hay demasiadas para mostrar todas a la vez. Si un usuario desea navegar en algún lugar, debe encontrarlo en el menú desplegable. Ahora bien, un gran inconveniente para las prestaciones ocultas es que requieren que el usuario encuentre el precio mientras que a veces no les da ninguna pista de su existencia. No sabes qué esperar. Es un juego de adivinanzas, por así decirlo, basado en encontrar estas posibilidades a medida que avanza.
La falsa accesibilidad en el espacio digital brinda algo inesperado, como encender las luces en lugar de la TV con el control remoto del televisor, o ninguna acción. Este tipo de accesibilidad se encuentra en toda la Web, principalmente por accidente, como un botón que se ve activo pero no hace nada, un logotipo que no está vinculado a nada, las palabras 'clic aquí' dentro del texto que no son en absoluto un enlace , o un botón rojo que hace algo bueno con un botón verde que hace algo malo.
La falsa oferta es más abundante en diseños donde los detalles se han perdido, como una situación de enlace roto. Los colores tienen asociaciones específicas con ellos. En el mundo occidental, el verde es bueno, mientras que el rojo es malo. Cuando cambies los dos, seguramente confundirás a algunos de tus usuarios, especialmente cuando los botones están uno al lado del otro. Esto no significa que no puedas hacerlo; pero debes ser precavido al hacerlo. No necesita ninguna capacidad falsa dentro de su diseño si puede evitarlo. No debes sorprender a tus usuarios así.
Skeuomorphism confió pesadamente en affordances metafórico, como imitaciones de objetos reales, para comunicarse. Los iconos son maravillosos ejemplos de esto: mapa, carrito de compras o cesta, casa, impresora, video, micrófono, teléfono, etc. Tome el concepto de correo electrónico, por ejemplo. Sus raíces están en la metáfora de una letra física; su icono suele ser un sobre. Es un gran ejemplo de asequibilidad metafórica por todas partes. Si está diseñando algo y no está seguro de cómo transmitirlo, siempre es bueno regresar al mundo físico, al menos para obtener inspiración y un punto de partida.
Ahora, no es necesario que vayas a la cima como los diseños antiguos de Apple, donde para su aplicación de juego hicieron del fondo un mantel verde. Pero, compare eso con su icono de la aplicación de juegos actual, que es solo unas pocas burbujas. ¿Qué tienen que ver con los juegos? No lo sé, la metáfora ya no está allí. Si eso es bueno o no depende de usted decidir. Si la metáfora necesita estar allí en su diseño, o no, depende de usted.
Se puede considerar que la rentabilidad negativa indica específicamente que no hay posibilidad de pago; es cuando tienes un botón inactivo o un botón que parece inactivo. La instancia más común de esto es cuando un botón o un enlace está atenuado. Ahora, aquí está la parte complicada: no es que intentes específicamente decirle a un usuario que no puedes usar este botón, aunque podría ser, pero que parece que no puedes usarlo, incluso si de hecho puedes.
Hay ciertos casos en los que desearía indicar claramente que no podría hacer algo. Por ejemplo, si un usuario completa un formulario y todavía no lo ha completado, su estado de botón podría aparecer inactivo porque no desea que continúen. Pero, si el botón parece inactivo, pero está activo, entonces es simplemente un diseño deficiente. Ten cuidado con éste.
Foto principal, imagen de affordance a través de Shutterstock.