Saltar navegación
Contacto: (+34) 670 230 483

Usted está en: Inicio > Publicaciones > Artículos > La etiqueta de los botones de acción

La etiqueta de los botones de acción: una oportunidad para ayudar al usuario

Julio 2003

Los botones de acción (por ejemplo, aceptar, enviar, cancelar, etc.) son uno de los elementos más importantes en las páginas web: muchas de las interacciones entre los usuarios y el sitio se realizan a través de ellos.

En el diseño de botones de acción adecuados influyen muchos factores: su aspecto visual, su situación en la página, la etiqueta que describe la acción que desencadenan, etc.

En este artículo nos centramos en la etiqueta, en el texto de la acción que desencadenan. Este es un elemento fundamental para que el usuario tome la decisión de pulsarlo o no. El aspecto visual del botón puede atraer la atención, pero el texto del botón es lo que hace que el usuario acabe pinchándolo.

Veamos algunas recomendaciones para obtener etiquetas eficaces, a la luz de los problemas más habituales encontrados en su uso.

1. Escribir etiquetas descriptivas

En muchos sitios web abundan las etiquetas genéricas. Por ejemplo, son frecuentes los textos "enviar" o "aceptar" que normalmente dan poca información de la acción que va a realizar el usuario.

Nuestra recomendación principal sobre la etiqueta es que debe ser lo más descriptiva posible de la acción que desencadena, debe explicar qué ocurre después de ser pulsado el botón. La aplicación de esta recomendación puede ser de gran ayuda para los usuarios. Veamos porqué:

  • Por un lado, es evidente que mientras mejor se describa la acción a la que da paso el botón, más seguro y confiado se sentirá el usuario, menos incertidumbre tendrá sobre lo que va a hacer y en menos ocasiones se producirá un efecto no deseado tras pulsarlo.

  • También debe tenerse en cuenta que los usuarios no suelen leer las instrucciones que se le ofrecen en las páginas. Dirigen inmediatamente su atención y su interacción a las cajas de texto o controles y a los botones de acción. De esta forma, si la etiqueta del botón es suficientemente clara y descriptiva de la acción que desencadena se evitarán errores del usuario o esfuerzo del usuario por tener que leer las instrucciones.

En la figura 1 se muestra una página de consulta de movimientos de tarjetas que ofrece un filtro para seleccionar el rango de movimientos deseados. Para realizar la acción se ofrece la etiqueta "aceptar". Este es un texto que no da una idea nítida de la acción que desencadenará al pulsarlo (consultar los movimientos). Aunque se muestran instrucciones que explican su función, los usuarios no suelen leerlas, dirigen su atención y su interacción a las cajas de texto y a los botones.


Figura 1.


En la figura 2 se muestra cómo verían los usuarios en un primer vistazo la página. Un usuario no muy experto tendrá bastante inseguridad e incertidumbre sobre la acción que desencadena el botón "aceptar" sin leer las instrucciones. No se le ofrece información suficiente para deducir la acción que realizará con el botón "aceptar".


Figura 2.


Hubiera sido más acertado utilizar la etiqueta "consultar" (figura 3). De esta manera el usuario ya tendría la información necesaria sin recurrir a las instrucciones.


Figura 3.


Además de "enviar" o "aceptar", son también muy usados botones con la etiqueta "cancelar". Es frecuente su uso para realizar la acción de borrar los datos capturados en formularios. Muchos usuarios no asocian el término "cancelar" a esta función, lo asocian más a cancelar la tarea que se está llevando a cabo.

Aunque son bastante habituales los botones de acción formados por una sola palabra, creemos que es una buena práctica utilizar más de una si con ello se gana en claridad sobre la acción que se desencadena.

Observe el ejemplo de la figura 4, con sólo mirar los botones el usuario puede saber las alternativas que se le ofrecen.


Figura 4.



2. Mostrar continuidad en los botones de las páginas que forman parte de un proceso

Por otro lado, creemos adecuado que en las tareas con más de una página (por ejemplo, en un proceso de alta o una transferencia), los botones de acción que se utilicen para dar paso a una nueva página de la tarea, den idea de que la tarea no ha terminado en esa página. Por eso, es mejor "Continuar alta" o simplemente "Continuar" que "Aceptar" o "Enviar".

Los usuarios pueden pensar al ver un botón como "Aceptar" que la tarea finaliza, siendo en realidad un botón que simplemente da paso a una nueva página de la tarea. Antes de pulsar los botones que impliquen la finalización los usuarios piensan y evalúan lo que van a hacer, si algo no les encaja pueden dudar y abandonar.

Para mejorar la ayuda a los usuarios, sugerimos reforzar el texto de la etiqueta con comentarios expuestos fuera del botón que expliquen y anticipen los resultados de pulsar el botón, véase la figura 5.


Figura 5.



De la misma forma, el botón de acción que se utiliza para finalizar la tarea debe también indicar claramente dicha finalización ( "Ejecutar alta" , "Finalizar alta", etc ).

3. Ofrecer etiquetas que estimulen la acción

También es una buena práctica usar textos en las etiquetas para estimular la acción de los usuarios, para provocar su pulsación, como se hace en los botones destacados en rojo de la figura 6.


Figura 6.



4. Ser precisos en las etiquetas y no utilizar textos que no reflejan el resultado de pulsar el botón

Veamos un ejemplo. Venimos observando que se utilizan frecuentemente botones de acción con la etiqueta "contratar" para acciones que no implican la contratación real del producto, sino simplemente la solicitud de contratación, realizándose la contratación efectiva del producto fuera de la web.

Somos partidarios de no utilizar este tipo de etiquetas para estas acciones. Los usuarios pueden no pulsarlas por el "vértigo" o temor que les puede suponer pincharlas.

En lugar de la etiqueta "Contratar" (cuando realmente no se produce la contratación) somos partidarios de utilizar, por ejemplo, "Solicitar contratación", incluso apoyado por un texto que diga que la solicitud no implica la contratación definitiva (véase la figura 7).


Figura 7.




Conozca nuestro estudio 50 problemas habituales de los usuarios en sitios web de banca. Recomendaciones para su solución.


Contacte con nosotros

Si desea más información sobre alguno de nuestros servicios, envíenos un correo electrónico o llámenos al: (+34) 670 230 483

Conózcanos un poco más

Descárguese el dossier explicativo sobre nuestros servicios en formato PDF.

Blog

Actualidad en usabilidad, diseño y experiencia de usuario. Últimos comentarios en el blog:

13 Ago
¿Qué es un test de usabilidad?

2 Jul
Todo es táctil

27 Jun
Localización de los kioscos: si Mahoma no va a la montaña...

Ir al blog

Suscripción newsletter

Recibe un aviso por correo electrónico de nuestros artículos y novedades.

Borrarse como suscriptor.