Affordance: un botón es un botón

La elección del elemento de interacción más adecuado para la interfaz es clave en el diseño centrado en el usuario. En pruebas de evocación o recuerdo, lo que más recuerdan tus usuarios son esos elementos. Cuídalos.
De la misma forma que, cuando dialogamos con una persona, nos quedamos con la referencia de sus ojos, su nariz, su tez, etc. Cuando usamos la web nuestra memoria a corto plazo lo que más recuerda son los elementos de interacción: checks, radio buttons, combos, campos de texto, enlaces y el resto de componentes que hacen que el ser humano “dialogue” con una máquina introduciéndole inputs.

Elegir el elemento que mejor se adapte al contexto que estamos desarrollando es importante. En palabras de Don Norman, estos elementos deben dar una idea de la acción que provocan antes de interactuar con él: lo que él demonina Affordance (y que no tiene traducción literal en castellano).

Este término fue inventado por el psicólogo perceptual J.J. Gibson para referirse a las propiedades que existen entre un actor (persona o animal) y su entorno. Para Gibson “Affordance” equivale a relaciones. Existen de forma natural: no son visibles, conocidas ni deseables, pero están ahí.

Norman reutilizó este concepto y desarrolló la idea es su libro” POET“. Para él, Affordance se refiere a cómo un elemento de interacción, ya sea botón, link, check, o lo que sea, habla por si mismo para darnos una idea de la acción que genera sin interactuar con dicho elemento.

Cuando la elección de dicho elemento no es la más acertada, provocamos malas experiencias de uso que pueden perjudicarnos. Don Norman da algunos consejos:

1. Sigue estándares de uso. Introducir nuevas convenciones que no aún no han sido probadas puede llevarnos al fracaso;
2. Utiliza palabras para describir las acciones deseadas.
3. Emplea metáforas;
4. Sigue un modelo conceptual coherente. De esta forma el aprendizaje de un proceso concreto se puede aplicar a otras partes.

Y algunos más de la casa:

• Evita enlaces tipo “haz click aquí”, “más info”, “ver más”, etc. No indican al usuario qué es lo que se va a encontrar a continuación, provocando dudas en su navegación.
• Sé cauto cuando emplees tecnología AJAX. Cuidado cuando emplees, por ejemplo, enlaces que despliegan cajas y no lo que llevan haciendo desde siempre: navegar hacia otra página de contenidos.
• Los enlaces y botones con etiquetas de entre 7 y 12 palabras funcionan mejor. Cuida las etiquetas de dichos botones y trata de dar a entender al usuario qué es lo que se va a encontrar a continuación.
• Ten muy clara cuál es la tarea del usuario en el flujo de pantallas que estás definiendo. Conociendo bien el objetivo tendrás más claro qué elemento de interacción se adapta mejor a lo que estás definiendo. Parece de perogrullo, pero muchas veces definiendo lo olvidas (ahí están la creación de personas para no perder el foco, pero éso ya es otra entrada).

Son algunas de las ideas que presenté en la Charla sobre “Usabilidad y Web 2.0” del User Interface Workshop de Evolucy y Eduardo Manchón.