El botón de los 300 millones de dólares
¿Conocéis la vieja historia del botón de los 300 millones de dólares que contó Jared M. Spool en el 2009 (The $300 Million Button)? Es interesante. Cómo al cambiar, entre otras cosas, el texto de un botón, mejoró en 300 millones de dólares las ventas anuales en una web de comercio electrónico.
¿Qué ocurrió? ¿cómo pudo afectar tanto a las ventas el cambio de un botón?
Contexto: en una web de comercio electrónico, al comenzar el proceso de compra tras tener el carro con la compra deseada, aparecía un formulario en el que se pedía el usuario, la contraseña, y la posibilidad de entrar en la página web (para confirmar la dirección de entrega y el medio de pago) o la de darse de alta. Ah, y también el enlace de olvido de contraseña.
Es decir, algo como:
¿Qué problemas podían haber (recordemos, año 2009)? De todo tipo:
- Usuarios que no quieren registrarse en la web (sólo querían comprar).
- Usuarios dados de alta que dudan cuál es la dirección de correo electrónico que tienen como usuario.
- Usuarios que se habían dado de alta con varias direcciones de correo electrónicas diferentes.
- Usuarios que no recuerdan la contraseña.
La consecuencia: en esa página se producía un cuello de botella que impedía finalizar la compra.
La solución: tras realizar pruebas con usuarios, pasa por cambiar el literal de un botón (de «darse de alta» a «continuar»), e incluir un texto indicando que se puede comprar sin darse de alta.
El resultado: 15 millones más de ventas en un mes, y 300 millones en un año (de ahí el sugerente título del artículo para los que se excitan con dólares).
Diseñando un botón: un elemento fundamental
Siempre me ha intrigado el proceso que está detrás de la toma de decisiones en un diseño. El porqué.
Porque se supone que detrás de una decisión de diseño (particularizando en una página web: fuente, tamaño, color, posición, rejilla,…) debería haber motivos que fundamentan esa decisión. ¿Cómo ejercitar esa habilidad o conocimiento?
What if, instead of trying to design an entire page with dozens of elements (nav, text, input controls, a logo, etc.), we consciously started by designing the simplest thing possible? We deliberately limit the playing field to one, tiny thing and see what we learn? Let’s try.
What is the simplest possible element? I vote that it’s a button.
The King vs. Pawn Game of UI Design — Erik D. Kennedy
Enumeremos algunas características de un simple botón:
- tamaño
- texto
- fuente
- tamaño y efecto de la fuente
- color de fondo (¿gradiente de colores?)
- color del texto
- acompañar o no de un icono
- padding (separación del texto y el borde)
- margen (separación entre el botón y el resto de los elementos)
- forma (esquinas cuadradas, redondeadas, radio de la redondez)
- tipo de acción que realiza (continuar un proceso, acción «peligrosa», acción neutra, acción principal, acción secundaria,…)
Podemos delegar varias características al estilo por defecto que tenga el navegador (en el caso de una página web), o a algún framework con posibles síntomas de vigorexia.
O podemos diseñar un simple botón. Con el objetivo de cumplir los requisitos del proyecto (real o ficticio). Intentando argumentar cada característica. Me parece un ejercicio muy saludable.