Experiencia de usuario: el arte de colocar botones en un website

Los botones han sido siempre motivo de numerosos debates en el pequeño mundo del web design y de la experiencia de usuario. Estos debates tienen mucho sentido en la medida que los botones son (esquemáticamente) elementos de interfaz que favorecen o penalizan una venta online. Un simple cambio en un botón puede tener una enorme repercusión en la conversión de un site (ver mi post “Cambia un botón y gana 300 millones”).

Hace poco he leido tres artículos muy interesantes en UX Movement respecto a los botones y la forma de optimizar su posicionamiento:

• Why Users Click Right Call to Actions More Than Left Ones, donde el autor explica que los botones situados a la derecha se cliquean más que los que están situados en la zona final del recorrido de la lectura visual del usuario.

                                                 Recorrido óptimo de la vista

• Why ‘Ok’ Buttons in Dialog Boxes Work Best on the Right, donde el autor explica que el botón de validación debe estar colocado a la derecha del de anulación ya que de esta forma evitamos que la vista tenga que volver para atrás.

• The Visual Weight of Primary and Secondary Action Buttons, este artículo viene a reforzar el anterior. Se explica como destacar los botones “call to action” en los pop-up o ventanas modales de “validación / acción”, y como colocar el botón de acción principal a la derecha pero teniendo en cuenta el contexto.

A pesar de que estos tres artículos están muy argumentados, el debate entorno a los botones en ecommerce seguirá presente. En este campo, todo es cuestión de «prueba-error», de experimentación y audacia: jugar con los tamaños, las formas, la presentación de las promociones, etc. Ahí va otra ristra de artículos:

• Call To Action Buttons: Does Size Matter?.

• Can Unusual Shaped Buttons Increase Conversion?.

• Showing Percent Discount on Cart Buttons.

Pero a pesar de todo, creo que existen una serie de consejos sobre los botones que podrían generalizar para todo tipo de websites:

1. Colocar el botón de pasar a la acción o como dirían los ingleses “call to action”, en una zona caliente (generalmente abajo a la derecha). Pero tener mucho cuidado de no situar muchos “call to actions” en la misma parte del site o de la página, ya que se puede producir una canibalización de los botones.
2. Usar colores atractivos (amarillo, naranja o verde).
3. Usar los términos adecuados para convencer y dar seguridad (no poner simplemente “validar”, por ejemplo)
4. Jugar con los contrastes y los espacios en blanco para resaltar el botón del resto de la página.
5. No dudar en poner un botón grande y un formato de letra grueso (no tengas miedo de vender).
6. Intentar ayudar al usuario a anticipar las siguientes etapas para darle seguridad.

Estos 6 consejos básicos, resultado de mi experiencia en el mundo online, pueden parecer de sentido común, pero distan mucho de estar siendo aplicados en todos los sites. Como dice el refranero español “el sentido común es el menos común de los sentidos”.

Personalmente, a mi me gustan los botones grandes con formas clásicas, pero que no sean excesivamente refinados en su formato de letra y en su estilo gráfico (simple y eficaz). Pero como siempre, todo es cuestión del contexto (en base al universo gráfico de cada marca) y de la experiencia (tests A/B o multivariable para encontrar la combinación óptima).

Para ilustrar todo el abanico de posibilidades e inspiraros en la búsqueda, os recomiendo esta amplia colección de botones (es del 2006, pero sigue siendo muy actual): 107 Add to Cart Buttons of the Top Online Retailers.

Como conclusión, se podría decir que no existe realmente una regla establecida en materia de concepción de botones, más bien una conjunto de buenas prácticas de concepción en base al contexto: ventana modal, formulario, ecommerce, aplicacion online, etc.

Por cierto, a los que os guste la experiencia de usuario, la usabilidad, la ergonomía web, etc., el site UXMovement es una página muy a tener en cuenta.

Y para los que os habéis quedado con ganas de seguir leyendo sobre botones 🙂 hay va otra batería de artículos: Killer Buttons That Increased Conversion Rates, Call to Action Buttons: Examples and Best Practices, How to Design Buttons to Help Improve Usability, Web Design Trends: Call To Action Buttons y Good Call to Action Buttons. ¡Que los disfrutéis!

Related posts:

Usabilidad vs Experiencia de Usuario Leyendas urbanas sobre la experiencia de usuario (3ª parte) Experiencia de usuario: «no me hagas recordar, prefiero reconocer». Internauta, ¡ayúdame a mejorar la experiencia de usuario de mi web! Leyendas urbanas sobre la experiencia de usuario (1ª parte)