En 1966, James J. Gibson introdujo el concepto de affordance vinculado a la percepción, como el conjunto de posibilidades que un individuo percibe en el entorno, en función del contexto y sus intenciones. En 1988, en su libro «El diseño de las cosas de todos los días» (*) Donald Norman adaptó el termino «affordance» al Diseño de la Interacción, definiéndolo como el conjunto de posibilidades de acción o uso que un objeto le transmite al individuo que lo usa.

Donald Norman adaptó el termino «affordance» al Diseño de la Interacción, definiéndolo como el conjunto de posibilidades de acción o uso que un objeto le transmite al individuo que lo usa.

El concepto se popularizó rápidamente en el ámbito del Diseño de interacciones y es hoy un requisito obligatorio de una buena interfaz que sus componentes tengan «affordance», es decir, que la comprensión de las acciones aplicables a ellos se resuelvan a nivel Miro y Entiendo. Hacer click en un objeto es una de las centrales.

La prehistoria: doble click vs click a secas

Antes de la expansión de la Web, es decir antes de 1995 (los eruditos afirman que en aquella época pretérita reinaba Windows y que Bill Gates hablaba mucho de software y nada de vacunas), el criterio de clickeabilidad de los escritorios, que era la única interfaz gráfica disponible, era muy sencillo:

• botones y opciones de menú: un click
• íconos: doble click
• resto del mundo: indeterminado

La Web revolucionó radicalmente este esquema: en el HTML no existe el concepto de doble click, por lo que todo se clickea una vez. En esa época, en los test era muy frecuente ver a los usuarios hacer doble click sobre los vínculos y las imágenes clickeables, pero no sobre los botones, trasladando su aprendizaje del escritorio a la novel plataforma.

La Web introdujo además un affordance estándar para el texto clickeable: azul subrayado. Amado por los expertos en Usabilidad y denostado y combatido por los diseñadores gráficos, el azul subrayado como affordance de clickeable tuvo su momento de gloria en la primera década del siglo XXI y viene decayendo lentamente.

Amado por los expertos en Usabilidad y denostado y combatido por los diseñadores gráficos, el azul subrayado como affordance de clickeable tuvo su momento de gloria en la primera década del siglo XXI y viene decayendo lentamente.

Otro elemento sustantivo que agregó la Web es la universalización del uso del Mouse Over, esa funcionalidad que aporta una breve explicación sobre el vínculo al posar encima el puntero del mouse.

La revolución móvil

Con la aparición del iPhone en 2007 nace la Web Móvil y el mundo de las Apps, que dan un nuevo giro a las affordances en general y a la clickeabilidad en particular.

A diferencia de lo que sucede en el escritorio, donde la separación entre sí de las aplicaciones y de éstas con el sistema operativo es notorio, en el móvil la interfaz se presenta como un continuo único. Por ejemplo, en el escritorio abrir un vínculo desde una aplicación es una acción explícita, que no solo invoca al navegador predefinido, sino que muchas veces dispara advertencias de seguridad. En el móvil muchas aplicaciones despliegan las páginas en su propio contexto manejando tras bambalinas, y de forma invisible para el usuario, la relación con el navegador. Si bien hay dos Apps involucradas, el usuario no lo nota.

Además de la unificación conceptual de la interfaz en un todo continuo, o sensiblemente más continuo que en el escritorio, el móvil trajo la universalización de las pantallas touch, que eliminaron la precisión del puntero: el mouse clickea un solo punto de la pantalla, el dedo lo hace sobre un gran conjunto de pixeles, y el usuario no tiene un buen control ni de los bordes de este conjunto ni de su centro (además el conjunto no es circular, por lo que determinar el centro es una discusión cuasi filosófica).

Para completar la lista, en el móvil no hay Mouse Over, una ayuda significativa para la clickeabilidad, porque los usuarios determinan usándolo si un objeto es o no clickeable sin necesidad de clickear. Y como bonus track obtienen información sobre el vínculo de forma gratuita.

Este tipo de sutileza en los objetos clickeables, típica del escritorio, es imposible en el móvil con las herramientas que existen hoy

Por estas razones, y algunas otras, las áreas clickeables se agrandaron sensiblemente. Si bien en parte se mantienen el azul y el subrayado como affordance de clickeable es difícil encontrar diseños hoy que utilicen ambos en forma simultanea y aumentó significativamente la cantidad de objetos clickeables.

De hecho, hay en general una cantidad mayor de áreas y objetos clickeables en la pantalla, y muchos sitios Web y Apps adoptan el criterio de 100% clickeable: todos los elementos de la interfaz tienen funcionalidad al hacer click.

Muchos sitios Web y Apps adoptan el criterio de 100% clickeable: todos los elementos de la interfaz tienen funcionalidad al hacer click.

Hoy es frecuente el diseño con 100% de la pantalla clickeable, como en esta App de Twitter

El affordance de clickeabilidad hoy en día

Llegados a este punto, y no porque mantener el criterio de que resolver la clickeabilidad a nivel Miro y Entiendo no siga siendo relevante, sino porque la evolución del diseño nos trajo hasta acá, con las buenas y con las malas que eso signifique, hay que admitir que las viejas reglas de clickeabilidad no tienen ya la fuerza que tenían, y es previsible que sigan perdiéndola hasta desvanecerse.

Aferrarnos a los links azules subrayados, cuando dejaron de ser un estándar de facto solo nos ancla al pasado, nos separa del problema real que enfrenta el diseño hoy en día y hace que nuestros clientes y usuarios nos miren como dinosaurios: seres míticos que integraron la prehistoria del Diseño.

Aferrarnos a los links azules subrayados, cuando dejaron de ser un estándar de facto solo nos ancla al pasado. Hace que nuestros clientes y usuarios nos miren como dinosaurios: seres míticos que integraron la prehistoria del Diseño.

Pero que la vieja clickeabilidad pierda fuerza no implica que no haya reglas y criterios a seguir, por el contrario, se está gestando un nuevo estándar de facto, del que podemos citar algunos puntos que se pueden considerar apoyos sólidos:

• Los botones mantienen su affordance: todo lo que parece un botón es percibido como clickeable. Inclusive vale el truco de rodear un texto con un rectángulo exterior de puntas apenas redondeadas, para mostrarlo clickeable.
• El doble click es historia: tal vez le encontremos un nuevo uso, pero como estándar perdió su vigencia.
• Las imágenes son clickeables: las que pertenecen a la interfaz tienen una función, y las que pertenecen al contenido o hacen zoom para ampliar, o llevan al contenido que ilustran, pero en general todos los elementos gráficos de una interfaz son clikeables.
• Azul o subrayado es clickeable: El texto azul sin subrayar en mayor medida y el de cualquier otro color subrayado en menor medida implican aún clickeabilidad, muchos sitios Web y Apps de altísimo tráfico (Google, Wikipedia, Facebook) utilizan textos azules para mostrar clickeabilidad. Lo contrario vale: no usar texto azul o subrayado para texto no clickeable.
• En el escritorio tanto la ayuda como subrayar el texto al hacer mouse over siguen completamente vigentes.
• Agregar un ícono pequeño como una flechita, un mayor o similar al final de un texto le aporta clickeabilidad.

En resumen, la clickeabilidad ya no es lo que era. Hemos retrocedido un poco, y no queda claro que los nuevos estándares que se están consolidando recuperen ese terreno perdido. Pero de nada sirve lamentarse: hay que entender la nueva realidad y hacer como siempre, el mayor esfuerzo para entregar a nuestros clientes un gran diseño.

(*) The Design of Everyday Things – Donald Norman Basic Books – 1988

____

Calendario de cursos 2024

Ya está disponible el calendario de cursos de 2024, con los siguientes cursos.

• Psicología Cognitiva y Experiencia de Usuario
• Taller Intensivo de Diseño de la Interacción
• Accesibilidad: Herramientas de evaluación WCAG 2.2

Si querés saber más, o hablar con los docentes, no dudes en contactarnos.