Prueba Velneo Gratis

Te ofrecemos todo el poder de Velneo durante 1 mes para desarrollar la aplicación que tu empresa necesita.

Saber más
Thank you! Check your email for confirmation.

Tip 14. Diseño interfaz: Usa "Affordance"

Emplea elementos que sugieran cómo usarlos

“Affordance” es un palabro en inglés, que no tiene una traducción literal al castellano.

Viene a significar algo así como “sugerir” o “intuir”.

En el diseño de interacción, “Affordance” se refiere a cómo un elemento de interacción, ya sea botón, link, desplegable, control, etc. nos da una idea de la acción que genera, antes incluso de interactuar con él.

Diseñar "falsos Affordances” produce frustración en el usuario y por lo tanto una mala experiencia.

Claves

  • Usar convenciones y seguir estándares de interacción. La relación entre forma y función debe ser clara.
  • La acción de interacción debe ser coherente con el mapa mental del público objetivo. El icono de una casa no significa lo mismo para un niño que para un adulto.
  • La acción que realiza debe ser coherente con el “Affordance”. Si por ejemplo un botón incluye una flecha a la derecha, esta sugiere que habrá un avance, no un retroceso.

Algunos ejemplos

Ejemplo El característico botón de “Desbloquear” (1) de iOS, de los iPhone y los iPad, es un claro ejemplo de elemento con “Affordance”.

El propio elemento con su posición en la pantalla, la flecha indicadora a la derecha, el efecto hueco y el sutil destello del texto nos sugiere su uso.

Tip14-a

Ejemplo Las metáforas visuales son Affordances que se reconocen de inmediato. Los botones de una interfaz son reconocidos, porque en el mundo físico ya hemos interactuado con múltiples sistemas con botones, como los del ascensor.

Tip14-b

Referencias

Affordance: Diseñar invitando a la interacciónProyectando affordances o affordances invisiblesAffordance: un botón es un botónCréme, soy un botón. Affordance

Dani Costas
12/6/2013
Regístrate ahora y nuestro equipo se pondrá en contacto muy pronto