Créeme, soy un botón. Affordance

Nuestro modelo mental está formado por nuestras experiencias y aprendizajes inducidos, cuanto más pasen los años este modelo se hace más completo, tal es el punto que de muchos objetos que nos rodean podemos intuir su funcionalidad sin necesidad de reconocerlos.

En el diseño de interfaces sucede exactamente lo mismo con los elementos que interactúa el usuario, vale decir; botones, íconos, vínculos, desplegables, opciones, etc. Cada uno de estos elementos deben ser intuitivamente comprensibles para que tan solo al verlos nos den la idea de la acción que provocarán antes de interactuar con ellos, a ello se le denomina Affordance.

Es recomendable que al conceptualizar nuestros diseños y querer ser originales, nos centremos en conceptos que no dificulten la comprensión de nuestros usuarios y mejoren su experiencia de uso.

Les dejo algunos ejemplos que promueven una comprensión más intuitiva en nuestras interfaces.

1.La correspondencia entre la forma y su función debe ser clara.

 

Créeme, soy un botón

 

2. Hacer visible al usuario la acción primaria de los elementos de interacción

Hacer visible al usuario la acción primaria

3. Seguir estándares de uso.

Seguir estándares de uso.

4. La acción de los elementos debe ser consecuente al mapa mental de público objetivo

4. La acción de los elementos debe ser consecuente al mapa mental de público objetivo

5. Para mejorar la percepción intuitiva, Affordance, debemos apoyarnos en metáforas visuales, lo que podríamos llamar analogías de la realidad llevadas al mundo digital.

Aquí algunos ejemplos, que dieron origen al elemento de interacción, algunos de ellos aun prevalece la analogía con la realidad en nuestros tiempos, otros ya no.

 

Botones

 

Affordance en botones

 

Paginador

 

Affordance en un paginador

 

Affordances en el icono del play
Icono del play

 

Los Checks en formularios

 

Affordances en los Checks de formularios

 

Las opciones en formularios

Affordances en las opciones de formularios

 

Los desplegables en formularios y barras de navegación

 

Affordances en desplegables

 

La zona de herramientas y la paleta de colores en los graficadores y retocadores fotográficos

 

Affordances en zona de herramientas
Affordances en paleta de colores

 

Affordances es un término inventado por el Psicólogo Perceptual James J. Gibson para referirse a las relaciones que existen de forma natural entre las personas y los objetos que los rodea. Él publicó un artículo “La teoría de la Affordance” en 1977, pero en 1988 Donald Norman utilizó este término en el contexto interacción hum

ano computador en su libro “El diseño de todas las cosas”

Libros que recomiendo para profundizar en el tema:

James Gibson y la Psicologia de la percepción El diseño de todas las cosas

Puntuación: 0 / Votos: 0

8 thoughts on “Créeme, soy un botón. Affordance

  1. Es un tema bien interesante. Menciona que "las relaciones que existen de forma natural entre las personas y los objetos que los rodea". Es válido preguntarnos si a los niños o adolescentes los rodean diskettes, radios con botones que al presionar hacen "soltar" a los demás botones, cintas para grabar audio. http://bit.ly/ORLTIy

  2. Buena reflexión Franco, complementa bien este artículo. La interacción con algunos artefactos que ya no se usan sirvieron de origen a algunos elementos en nuestras interfaces. Ahora en nuestros tiempos estos niños y adolecentes solo asumirán la existencia, como los elementos de formularios.
    También están los que ya no se ven como los iconos de Grabar (disquete), Ícono de Video (cinta de video), Icono de buscar (larga vista) pero en sus tiempos fueron un claro ejemplo de Affordance.

  3. Eso me recuerda el lenguaje cinematografico, con respecto a lo visualmente creible… "Las aves siempre vuelan", si presentamos una ave que no lo haga, le quitara ese realismo, y tendriamos que invertir algun tiempo en explicar, visual y conceptualmente al publico, porque, esa ave en especial, no vuela…

  4. Así es Cesar, como has dicho, invertir tiempo en explicar a los usuarios porqué es diferente y tiempo del usuario en entender la diferencia.
    Muchas veces veo elementos comunes (no especiales) como aves con alas pero que al final no vuelan

  5. Un tema muy interesante Percy no me había percatado de la relación entre objetos y tecnología que hemos dejado de usar y los diferentes componentes de un formulario y botones actuales.

    Las paletas de colores introducidas con photostyler el actual photoshop y ahora paletas interactivas q mezclan pintura siguiendo técnicas artísticas en el.progeama painter son un si claro ejemplo de esta tendencia.

  6. Hacer de una pagina web algo intuitivo no tiene nada de evidente, a menos de reduplicar una y otra vez los mismos trucos, lo que no basta, pues se pierde algo en el camino, incluso a mi parecer en esta exelente demostration, es decir aquella revelacion que nos espera con toda (nueva) interpretacion lograda. Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *