En el mundo físico, las affordances se describen como las propiedades o características percibidas y reales de un objeto que dictan su uso sin explicación: una ranura para monedas, el ojo de una cerradura, el asa de una maleta, el pomo de una puerta; cosas cotidianas que entendemos automáticamente para qué sirven y cómo usarlas.
En el mundo digital, del mismo modo, las affordances de UX son los elementos interactivos de un sitio web, aplicación o producto que crean operaciones intuitivas, permitiéndonos centrarnos en el contenido que necesitamos y no en el funcionamiento de la plataforma.
Como investigadores de UX, comprendemos el verdadero valor y las ventajas de estas funciones intuitivas e innovadoras y cómo distinguen entre un diseño visual fuerte y uno débil. En realidad, los usuarios no deberían fijarse en las mejores affordances, sino aceptarlas automáticamente porque ya entienden el lenguaje visual en el que funcionan: los menús de hamburguesa, las funciones del carrito de la compra, el correo electrónico o los iconos de las redes sociales son todas affordances cristalinas cuya función prevista es obvia, lo que hace que sus interacciones digitales sean instintivas e inconscientes.
Sin embargo, como investigadores de UX, hemos comprobado que una interfaz de usuario puede volverse confusa o problemática si no cuenta con los elementos necesarios para que sus usuarios la entiendan.
A través de la investigación y las pruebas de UX, descubrimos los problemas de funcionamiento de los productos donde los usuarios:
- No sabe qué hacer
- No ver un posible siguiente paso
- No reconocer una posible oportunidad de resultado
- Perder el control de una función
- Perder el control de la navegación
- Perder confianza en tareas complejas
- No detectar las señales visuales
Como ocurre con todos los componentes y funciones de UX y UI, la única forma realista de eliminar errores y malentendidos es mediante un diseño basado en datos y pruebas periódicas. El término asequibilidad se refiere a las propiedades fundamentales de un elemento y, en primer lugar, esas propiedades fundamentales deben guiar al usuario por una ruta específica destinada a mejorar la experiencia. Sólo a través de las pruebas podemos saber si nuestros productos se ajustan a su propósito.
Asequibilidad efectiva en los mercados internacionales
Ya se trate de un mercado local, cultural o global, las mejores interfaces de usuario incluyen todo tipo de elementos que el público reconoce fácilmente para ofrecer interacciones instintivas. La investigación y las pruebas desempeñan un papel fundamental a la hora de abrirse paso en los mercados globales, ya que muchos elementos gráficos o metafóricos no se convierten en realidad, confunden o, peor aún, ofenden.
Definición y explicación de la asequibilidad en el diseño UX
La asequibilidad es una propiedad o característica de un objeto que presenta una indicación o pista visual de lo que hace ese elemento para lograr un resultado determinado.
Importancia de la accesibilidad en el diseño de UX
- Orienta el comportamiento de los usuarios ? Unas astucias bien diseñadas y situadas dirigen a los usuarios a donde tienen que estar... de forma sencilla e instintiva.
- Mejora la usabilidad ? Al igual que ocurre con la asequibilidad de los objetos físicos, estos componentes, a menudo minúsculos, desempeñan un papel fundamental en una experiencia digital fluida, ya que facilitan nuestra interacción con ellos. Esta mayor facilidad de uso se traduce en un mayor compromiso y en mayores tasas de conversión.
- Crea una experiencia de usuario coherente ? La coherencia es esencial para el éxito de cualquier interfaz digital. Mantener la coherencia con los formatos que nuestros usuarios entienden, esperan y disfrutan garantiza que seguirán interactuando con ellos repetidamente.
- La asequibilidad mejora la experiencia del usuario ? Todo lo que hacemos tiene como objetivo ofrecer una mejor experiencia a clientes y usuarios. Este tipo de asequibilidad nos permite crear diseños fáciles de usar.
- La UX y la UI se vuelven más intuitivas y agradables de usar ? El verdadero objetivo de nuestro trabajo.
Tipos de asequibilidad en el diseño de UX
Asequibilidades explícitas
Las asequibilidades explícitas están claramente etiquetadas para garantizar un uso obvio, a menudo mediante una etiqueta con imagen o instrucciones de texto.
Por ejemploun botón con una descripción de texto, "haga clic aquí para obtener más información", "añadir a la cesta" o "enviar formulario".
Asequibilidades implícitas
Las asequibilidades implícitas se refieren a elementos que no tienen señales visuales o etiquetas obvias, pero que se reconocen como oportunidades debido a su diseño común a través del contexto de posición o apariencia.
Por ejemplouna fila de iconos de redes sociales o logotipos de clientes.
Capacidades ocultas
Los affordances ocultos permanecen fuera de la vista hasta que el usuario realiza la acción necesaria para revelarlos.
Por ejemploun menú desplegable que aparece cuando el usuario pasa el ratón por encima del elemento del menú superior (o cuando hace clic en un menú hamburguesa en pantallas más pequeñas) o un campo de texto que sólo aparece al hacer clic en un icono de función de búsqueda.
Atributos gráficos y metafóricos
Este tipo de affordances son iconos o imágenes que representan a un homólogo de la vida real. Pueden ser iconos, ilustraciones o fotos.
Por ejemploEl icono de la lupa puede representar una barra de búsqueda o utilizarse como función de zoom, un icono de sobre para el correo electrónico, una cesta de la compra para, bueno, una cesta de la compra digital, o una bandera para cambiar de idioma o de ubicación.
Astucias skeuomórficas
Las affordances skeuomórficas tienen el mismo aspecto y funcionamiento que sus homólogas del mundo físico.
Por ejemploPor ejemplo, un libro digital con páginas que se pueden girar, un calendario que se desplaza o pasa de un mes a otro, o elementos que se pueden arrastrar a nuevas posiciones.
Asequibilidad de los patrones
Las posibilidades de los patrones se basan en métodos y patrones de interfaz de usuario ya reconocibles.
Por ejemploPor ejemplo, menús de navegación en la parte superior o inferior de las páginas, logotipos de sitios web que devuelven a los usuarios a la página de inicio o texto subrayado en un color diferente que representa un enlace.
Astucias negativas
Las affordances negativas representan elementos de diseño inactivos.
Por ejemploEn el caso de las pestañas de opciones, los botones aparecen en gris, los campos de entrada se rellenan automáticamente o los botones que quedan sin resaltar.
Falsos affordances
Las falsas affordances parecen dictar una acción concreta, pero ofrecen algo distinto de lo esperado o nada en absoluto.
Por ejemploTexto coloreado y subrayado que no ofrece un enlace en el que se pueda hacer clic o un botón en gris que sigue funcionando cuando se hace clic.
Principios clave para diseñar asequibilidades eficaces
Poner a los usuarios en el centro del diseño
La investigación y las pruebas mostrarán qué versiones u opciones entienden los usuarios de forma instintiva, ofreciendo los resultados y rendimientos más regulares y satisfactorios. Para entender mejor a tus usuarios, define personas y adapta tus diseños a ellas para crear asequibilidades eficaces.
Seguir las buenas convenciones de diseño ? Coherencia, familiaridad y lógica
Manténgase dentro de las convenciones reconocibles de la asequibilidad de los patrones y las convenciones comunes de diseño. Una nueva aplicación o función nos resultará familiar si los elementos que incluye siguen un formato al que estamos acostumbrados.
Visibilidad y reacciones
Un diseño limpio y claro significa mantener la sencillez y representar objetivos claros a partir de la asequibilidad de un elemento. Asegúrate de que las affordances de notificación funcionan cuando tus usuarios necesitan confirmación o feedback sobre una acción.
Claridad e intuición
La claridad y el funcionamiento intuitivo de una interfaz de usuario se traducen en una experiencia fluida para el usuario, que pasa de una acción o área a otra. Los sitios web y las aplicaciones deben ser lo suficientemente intuitivos y familiares como para guiar a los usuarios hacia el contenido que necesitan y facilitar las conversiones.
Elementos de interfaz de usuario que utilizan Affordance UX
Botones
Los botones son nuestros elementos de llamada a la acción más potentes, por lo que es imprescindible que su función sea obvia y fácilmente reconocible. La forma, el tamaño, el color, las etiquetas, el contraste y el texto pueden desempeñar un papel importante.
Iconos
Por ejemplo, los iconos de favoritos y reacciones en las redes sociales, o los iconos de correo electrónico, descarga o uso compartido. A pesar de las diferencias en el estilo de las marcas, muchos iconos seguirán un formato universal (o al menos geográfico) que entendemos automáticamente.
Campos de entrada
Sabemos que se espera de nosotros que añadamos datos cuando nos enfrentamos a un campo de entrada. Suelen incluir un affordance explícito de copia de muestra en un color pálido y un affordance de notificación cuando se rellena correctamente.
Animaciones
Los affordances animados pueden mostrar a los usuarios cómo manejar una función u opción concreta. Por otra parte, un botón tembloroso nos muestra que hemos hecho algo mal y que tenemos que solucionar un problema para continuar... todo ello sin una larga explicación textual.
Notificaciones
Las notificaciones indican un cambio o una acción necesaria. Pueden ser una marca de verificación junto a un campo rellenado de un formulario, una actualización del número de artículos de una cesta o los círculos rojos numerados sobre las aplicaciones del iPhone.
Retos y dificultades habituales en la aplicación de la accesibilidad
Equilibrio entre simplicidad y complejidad
La verdadera belleza del diseño de affordances reside en su sencillez. Sin embargo, cada elemento interactivo puede controlar algo increíblemente complejo. El arte del buen diseño consiste en encontrar un equilibrio entre ambos, produciendo la forma más sencilla de realizar las tareas más complejas.
Evitar atributos falsos o engañosos
Las affordances falsas pueden inducir a error a los usuarios, causando confusión en su funcionamiento. Sabemos con qué facilidad los clientes abandonan carritos y aplicaciones a medio llenar cuando se encuentran con puntos problemáticos, por lo que eliminar elementos confusos o dejar claro dónde encontrar el siguiente paso o instancias de affordances ocultas se convierte en una necesidad.
Buenas prácticas para crear un diseño de accesibilidad sin fisuras
Investigación y pruebas para optimizar la experiencia del usuario
Como investigadores de UX, estamos perfectamente situados para decirle lo importante que es nuestro trabajo en este ámbito. Las pruebas continuas y la iteración a lo largo de etapas y procesos son necesarias en cada paso del diseño de productos digitales. Con affordances, trabajamos con elementos tan sencillos como las pruebas A-B (ofrecer opciones basadas en datos que conviertan) hasta pruebas de UX internacionales, en las que las diferencias culturales y geográficas pueden inutilizar un proceso, una interfaz de usuario o incluso toda una aplicación.
Manténgase al día sobre patrones de diseño y convenciones
Con la tecnología y el diseño en constante evolución, los diseñadores deben mantenerse a la vanguardia. Estar al día de las convenciones populares, las nuevas herramientas, las innovaciones y las modas mantendrá sus interfaces digitales operativas y en línea con las expectativas de los usuarios.
Conclusiones: El poder de la asequibilidad efectiva para transformar la experiencia del usuario
Ahora comprenderá lo importantes que son el aspecto físico y las propiedades fundamentales de las affordances. Llevando a cabo una investigación UX significativa es como encontramos los problemas y cuestiones con nuestras aplicaciones y productos y cuáles de nuestras soluciones devuelven los resultados ideales.
A pesar de parecer pequeñas partes de un vasto sistema, el diseño de la experiencia del usuario se basa en gran medida en la asequibilidad efectiva para ofrecer los proyectos de mejor rendimiento. Las astucias ayudan a evitar o prevenir errores del usuario y a sortear las limitaciones del software, ya sean actualizaciones de copias básicas o representaciones de objetos reales u originales; aprovechar las astucias se ha convertido en todo un arte.
Si quiere saber más sobre cómo dar el control a sus clientes, envíenos un correo electrónico a hello@ux247.com.