Los botones en las páginas y aplicaciones web que utilizamos son una de las más importantes herramientas a la hora de dejar que el usuario establezca comunicación con nuestra aplicación web. Son el elemento primordial de la interacción usuario-aplicación, y responden a la herramienta de interacción del usuario más común y ampliamente arraigada entre cualquiera que utilice un ordenador: el click del ratón.

Algo curioso me ocurre cada vez que tengo la oportunidad de iniciar un nuevo proyecto web: En cada proyecto nuevo, termino invariablemente descubriendo algo también nuevo, o profundizando hasta lo más hondo en algo a lo que de pronto descubro no había dedicado el suficiente estudio. Normalmente me encuentro en tales casos profundizando en la usabilidad, el diseño o nuevas técnicas de programación. En este post os hablaré de algo muy concreto pero de vital importancia en la interacción del usuario con una aplicación web: Los botones; cómo organizarlos, cómo diseñarlos, cómo utilizarlos inteligentemente, y algunos de los dilemas en los que curiosamente no habíamos caído hasta que hemos leído algo como este post.

Un botón es un artilugio de cualquier aspecto que ofrece a las personas la herramienta para activar un mecanismo, un procedimiento o una función específica, de modo que las personas que lo utilizan pueden decidir, conociendo la función que ello desencadenará, cuándo pulsarlo.

• Debe tener aspecto de botón
• Debe ser suficientemente autoexplicativo en lo que a su función se refiere
• Debe funcionar tal como se espera que funcione un botón
• Debe responder de inmediato a su uso, ofreciendo un feedback suficientemente explicativo

El otro día descubrí que la luz que se enciende en rojo de mi tostadora es a la vez un botón que permite expulsar las tostadas antes de tiempo. ¡Qué descubrimiento! Tardé meses en darme cuenta.

Veamos algunos ejemplos sobre todo ello. Es curioso observar hasta qué punto no se respeta la humanidad del botón, y nos encontramos cosas como botones disfrazados de vínculos hipertextuales:

haz click aquí para confirmar los cambios realizados, o también puedes volver atrás.

Botones-icono cuyo objeto es un misterio de la usabilidad hasta que el usuario descubre que puede esperar un segundo con el puntero encima para ver el tooltip que explica su función:

Botones que confían ciegamente en la experiencia del usuario:

Por norma general, será una buena práctica tener siempre en cuenta ciertas máximas que se resumen en los siguientes bloques:

¿Hipervínculos o botón?

Un hipervínculo es por definición, de un modo u otro, un enlace a otro contenido que el usuario elige para ampliar la información que está recibiendo, o para continuar su experiencia de navegación hacia otra rama de contenido que la aplicación web le puede ofrecer.

Esto, al menos de un primer vistazo, dista bastante de nuestra definición de botón. Y no es que tengamos que hacer caso de esta definición de hipervínculo tan sólo porque lo diga la wikipedia: hagámoslo también porque es así como lo entendemos como usuarios de la web.

Por lo tanto:

• Hipervínculos: Cuando deseemos ofrecer al usuario una alternativa para obtener más información, para ampliar su flujo de navegación hacia opciones que no son imprescindibles en el proceso en que se halla inmerso, o cuando deseemos ofrecer al usuario la opción de cambiar de tema, o enlazar con una fuente externa. Por ejemplo:
  • Puedes obtener más información haciendo click aquí.
  • Apple presenta su nuevo modelo de ordenador portátil justo a tiempo para la navidad.
• Botones: Cuando la aplicación web ofrezca una función definida por la propia naturaleza del servicio que ésta ofrece, y cuando es el usuario quién debe decidir si ejecutar la acción, y cuándo hacerlo, por ejemplo:
  • aplicar cambios
  • crear un contenido
  • borrar un mensaje
  • identificarme
  • reestablecer mi contraseña

El aspecto del botón o del hipervínculo

Y no es que siempre que introduzcamos un hipervínculo debamos utilizar el recurso común de texto azul y subrayado, ni que siempre que vayamos a utilizar un botón en nuestra aplicación debamos darle el aspecto común de botón tridimensional que se hunde al ser presionado:

• Un hipervínculo común puede transformarse a la percepción del usuario en un botón si lo acompañamos de un icono representativo de su acción, o si lo ubicamos en una lista con “bullets”
• Si necesitamos establecer varios niveles de relevancia entre los botones, podemos incluso crear un estilo común para botones de menor importancia, que se integre de forma menos llamativa en el aspecto del web, y que incluso esté basado en hipervínculos “iconizados”

Así es, entonces, que podemos plantearnos la creación de nuestro kit de botones e hipervínculos de forma clasificada y homogénea, a fin de dotar a la aplicación web de una serie de recursos de usabilidad que en muchas ocasiones serán ya conocidos por el usuario con anterioridad, y en las demás ocasiones tan sólo requerirán de unos breves instantes de aprendizaje, que servirá ya para la utilización de la aplicación web al completo.

A la hora de crear los distintos niveles de relevancia para nuestros botones e hipervínculos, podemos por ejemplo comenzar con la siguiente clasificación, de menor a mayor relevancia:

• Hipervínculos estándar, que se encuentran mezclados en bloques de texto mayor, y que ofrecen la funcionalidad natural del hipervínculo por definición. Por ejemplo, el típico texto subrayado.
• Botones de menor importancia, que preveemos utilizar con asiduidad, y sin embargo no responden a acciones de gran relevancia. Es común diseñarlos como hipervínculos aislados del texto, incluyendo un icono, o un detalle de color o tipografía que los distingue de los hipervínculos estándar. Por ejemplo, el botón “leer más”.
• Botones de acción normales, que ofrecen funciones de importancia moderada, relacionadas con el mismo servicio que ofrece la aplicación web pero que no dan paso a funciones críticas. Por ejemplo: “previsualizar”, “buscar”, “siguiente”, “anterior”, etcétera.
• Botones de acción crítica, que ofrecen funciones importantes relacionadas con el mismo servicio del web, cuyas acciones repercuten directamente en aspectos importantes del servicio. Por ejemplo: “publicar”, “eliminar definitivamente”, “guardar cambios”, “comprar”, etcétera.

El feedback del botón

Un aspecto ampliamente olvidado e injustamente desaprovechado, pues las herramientas de diseño y programación actuales lo permiten fácilmente, es la integración de un sistema de feedback inmediato en la interacción usuario-aplicación.

Se trata de comunicar al usuario el resultado de sus acciones a fin de mantenerle informado sobre su proceso, y evitar la confusión que se produce a menudo cuando existen tiempos de espera intermedios entre la solicitud de una acción y la ejecución de ésta:

• Un botón debe cambiar de aspecto cuando es pulsado
• Un botón no debe poder pulsarse si aún no ha finalizado el proceso de su última pulsación
• Un botón no debe dañar a un ser humano, o por inacción, permitir que un ser humano sea dañado.

Pero más importante aún:

• El botón debe ofrecer feedback visual (o de cualquier otra clase) inmediatamente al ser pulsado, sin retardos.
• Si la ejecución del proceso desencadenado por el botón toma tiempo, debe existir un feedback visual de alguna clase sobre ello.
• Debe comunicarse al usuario mediante feedback de alguna clase la finalización del proceso desencadenado por su pulsación, y su resultado, si se aplica.

¿Qué significa todo ello? Sencillo: El usuario percibirá la fluidez y naturalidad de sus acciones si los botones cambian de aspecto cuando son pulsados (y más aún si ése aspecto sugiere el hundimiento tridimensional típico de los botones reales). Además, el usuario comprenderá que debe esperar después de pulsar un botón cuya acción toma cierto tiempo, si se le ofrece información visual de algún tipo sobre el desarrollo del proceso, incluso aunque sea un simple icono animado del tipo “loading…”

Esta comunicación íntima entre el usuario y la aplicación cambia indudablemente la percepción de la fluidez de la aplicación web: Un web puede volverse intuitivo, usable, rápido y fácil de manejar si simplemente ofrece esta clase de feedbacks en sus acciones, incluso cuando tarde lo mismo en reaccionar y cargar que la misma aplicación sin feedback.

La creación de un interfaz de usuario estandarizado

Sin duda, deberemos pensar también en nuestros botones cuando creemos el look & feel de nuestra aplicación, respetando de un modo u otro estas premisas y, sobretodo, ofreciendo al usuario un conjunto visual “look” y perceptual “feel” inteligente, que incluya, por ejemplo:

• Una tipografía legible integrada con el aspecto visual, con estilos definidos para el texto común, las cabeceras, los listados, etcétera.
• Un set de recursos visuales acordes que ofrezcan la interactividad visual del site de forma unificada en todas sus funciones: Menús, pestañas, desplegables, popups, bloques de información, bloques de publicidad, bloques destacados, etcétera.
• Un conjunto estándar de estilos para botones e hiperenlaces.

Todos estos recursos para la interfaz de usuario deben:

• Ser homogéneos y persistentes en toda la aplicación web.
• Deben adaptarse a los conocimientos estandarizados sobre usabilidad que podemos presuponer en nuestros usuarios y que son de uso común en la web.
• Deben ofrecer un método de aprendizaje para su uso intuitivo, y si es necesario, activamente didáctico.