La affordance permite interactuar con objetos sin conocimiento previo, ya que su funcionalidad se intuye a través de su apariencia y características físicas, no solo visuales.
Los objetos comunican su uso mediante su diseño - formas, dimensiones, colores, texturas y materiales. Por ejemplo, en una puerta, un pomo sugiere "tirar" mientras que una placa lisa sugiere "empujar", eliminando la necesidad de señalización.
Dos conceptos clave definen esta relación:
- Visibilidad. El objeto y sus elementos interactivos deben estar visibles y accesibles. Por ejemplo, un pomo de puerta debe estar a una altura manipulable.
- Comprensión intuitiva. Debe ser evidente cómo interactuar con el objeto. La forma sugiere naturalmente el uso correcto, como en el caso de un cuchillo o una palanca.
Los usuarios pueden descubrir usos alternativos según sus necesidades, como usar un encendedor para abrir botellas.
Definición
Propiedades de un objeto que sugieren cómo puede ser usado
Concepto desarrollado por James J. Gibson y adaptado por Don Norman
Principios Básicos
- Perceptibles: son las más comunes, y corresponden a aquellas que incluyen información perceptual para el affordance. Por ejemplo, una silla adecuadamente diseñada promueve de manera clara que la acción consecuente sea sentarse en ella.
- Ocultas: no existe información disponible para un affordance existente, está oculta y debe deducirse a partir de otra evidencia (el objeto contiene un affordance, pero no es obvio). Por ejemplo, una botella de cerveza no tiene ninguna señal que indique que puede servir para abrir otra botella.
- Falsas: la información sugiere un affordance inexistente, sobre la cual las personas pueden equivocarse al interactuar. Por ejemplo, una puerta corredera con tirador muestra información equívoca, porque esperaremos usar el tirador para abrir la puerta hacia nosotros, y no para desplazarla a un lado.
- Rechazo correcto: corresponde a los casos en que no existe información perceptible ni affordance.
Affordances en UX UI:
El diseñador debe crear la mejor experiencia posible para el usuario final, basándose en el análisis previo de expectativas y necesidades
En productos digitales, es fundamental que el usuario pueda acceder fácil y rápidamente a contenidos y funcionalidades
Los usuarios experimentados desarrollan conductas que les permiten reconocer affordances naturalmente, mientras que los novatos pueden tener más dificultades
El affordance perceptible debe sugerir la función de los elementos de interfaz, utilizando diferentes sentidos del usuario (vista, sonido, tacto)
EJEMPLOS:
- Objetos como los botones, definidos según su forma, contraste, texturas o relieves, que incitan al usuario a pulsarlos.
- Mensajes textuales/lingüísticos para guiar en la acción a realizar.
- Convenciones que indican que un elemento es interactivo, como lupas o texto subrayado en otro color (para los hipervínculos). Estas convenciones son conocidas en inglés como pattern affordances.
- Símbolos/iconos universales que representan una función, como podría ser el icono de impresora, play/pause, tweet, compartir, etc.
- Imágenes/fotos/ilustraciones.
Tipos de affordances:
- Por patrones: usa patrones que ya sabemos cómo funcionan y sabemos reconocer. Ej: los links subrayados
- Explícita: indica de forma textual explícita qué hacer. Ej: “Haz click aquí”.
- Falsa: Percibimos la affordance pero no funciona como pensábamos. Ej: botones que no accionan nada.
- Negativa: indican que no tenemos disponible la affordance. Ej: botones en gris claro que no podemos accionar hasta que hagamos otra acción requerida. Se usa en formularios o para acciones premium.
- Metafórica: ejerce una metáfora visual para que identifiquemos la acción con un símil que ya conocemos. Ej: los primeros lectores de ebook simulaban el pasar de las páginas.
- Oculta: No podemos ver la affordance, pero hay algo accionable. Ej: opciones que aparecen cuando hago hover con el ratón por encima.
Skeuomorfismo - diseño plano - material design.
Introducción al Skeuomorfismo
El skeuomorfismo es una técnica de diseño que consiste en crear elementos digitales que imitan la apariencia y funcionalidad de objetos físicos. Este enfoque busca hacer que las interfaces sean más familiares y comprensibles para los usuarios. Apple fue una de las empresas que más prominentemente utilizó el skeuomorfismo en sus sistemas operativos, como iOS y OS X, desde su introducción en 2007 hasta su declive en 2013139.
Ventajas y Desventajas del Skeuomorfismo
Ventajas:
- Familiaridad: Facilita la comprensión de las funciones digitales al imitar objetos del mundo real.
- Engagement: Puede aumentar el interés del usuario al ofrecer una experiencia visualmente atractiva.
Desventajas:
- Coherencia funcional: Puede generar confusión si los elementos digitales no se comportan exactamente como sus contrapartes físicas.
- Sobrecarga gráfica: Los elementos realistas pueden sobrecargar visualmente la interfaz, dificultando la navegación45.
Transición al Diseño Plano
En 2013, con el lanzamiento de iOS 7, Apple abandonó el skeuomorfismo en favor del diseño plano (flat design). Este estilo se centra en la simplicidad, la claridad y la funcionalidad, eliminando texturas y efectos realistas para ofrecer una experiencia más minimalista y eficiente28.
Características del Diseño Plano:
- Simplicidad: Elimina elementos innecesarios para mejorar la legibilidad y la usabilidad.
- Claridad: Utiliza colores planos y tipografía clara para facilitar la comprensión.
- Funcionalidad: Prioriza la interacción intuitiva y rápida28.
Evolución hacia el Material Design
Aunque el diseño plano fue una respuesta al skeuomorfismo, pronto se identificaron problemas de usabilidad, como la falta de indicadores visuales claros para las interacciones. Para abordar estos desafíos, Google introdujo el Material Design en 2014. Este sistema combina elementos del diseño plano con capas y sombras para dar una sensación de profundidad y tactilidad, mejorando la experiencia del usuario45.
Características del Material Design:
- Capas y sombras: Simulan la interacción física para mejorar la usabilidad.
- Elementos interactivos: Indican claramente dónde se puede hacer clic o interactuar.
- Flexibilidad: Permite adaptarse a diferentes dispositivos y pantallas5.
Conclusión
La evolución desde el skeuomorfismo al diseño plano y finalmente al Material Design refleja la búsqueda continua de un equilibrio entre la estética, la funcionalidad y la usabilidad en las interfaces gráficas. Cada estilo ha contribuido a mejorar la experiencia del usuario, pero también ha presentado desafíos que han llevado a nuevas innovaciones en el diseño digital.
Citations:
IMPORTANCIA de las affordances
Usabilidad: Los sistemas con affordance claras son intuitivos y no requieren instrucciones.
Inducir comportamientos deseados: El diseño puede guiar naturalmente al usuario hacia las acciones deseadas mediante pistas visuales intuitivas.
Evitar usos inconvenientes: El diseño puede sugerir intuitivamente los límites de uso mediante restricciones ("constraints").
Diseño para la emergencia: Las pistas pueden permitir a los usuarios descubrir usos no previstos, fomentando su autonomía.
Falsas affordance: Evitar elementos que sugieran acciones imposibles, lo cual genera frustración.
Affordance ocultas: Hacer más evidentes las funciones relevantes que no son percibidas intuitivamente.