Los botones son elementos indispensables en cualquier diseño de interacción. Si no tienes un botón efectivo en tu producto digital, los usuarios se sentirán perdidos y en consiguiente, frustrados. En definitiva, crear una línea abierta de comunicación entre el usuario y el sistema dependerá de si tus botones son útiles o no.
Dada esa importancia hoy hemos hablado con nuestras UX Designer Lucía Macasoli y Paloma Plaza y nos han facilitado 5 reglas de oro para diseñar un botón efectivo.
Pero antes, nos aclaran que “no hay una receta para que desde el principio haya un botón perfecto”. Encontrar la fórmula mágica que nos diga qué, cómo y cuándo va a funcionar un botón, no existe. En primer lugar detectar por qué el usuario necesita ese elemento y a dónde se le quiere dirigir con él. “Si el usuario no interactúa, o no sabe qué está pasando en esa página, el botón no está funcionando”, aclara Paloma.
Dicho esto ¡comenzamos!
¡Precisión!
Definir con precisión qué necesidad tienen los usuarios y qué acción queremos que suceda cuando hagan click sobre el botón. A pesar de que los botones sean elementos con los que interactuamos a diario, es necesario tener en cuenta y dejar muy claro para qué está diseñado y cuál es su función.
¡Cuidar el copy!
Lo principal es que sea claro y específico, el usuario debe entender, qué va a suceder al presionarlo. ¡No asumas que es obvio!
Puedes incluso ponerles nombres y apellidos para una mayor compresión. Por ejemplo, si estás dentro de un proceso de compra, en lugar de poner “añadir” sé más específico y coloca “añadir al carrito”. ¡Sí, esto es UX writing! No se trata de utilizar una sola palabra si no que se complemente con otros términos que ayuden a entender de manera más específica y clara. Además debes evitar ambigüedades.
¡Bendita ubicación!
Los botones deben ubicarse donde los usuarios puedan encontrarlos ¡No hay más! Debes elegir la ubicación correcta dentro del espacio digital. Eso sí, respetando las normas básicas de espaciado entre elementos y tamaño. Además recuerda que leemos de izquierda a derecha, por lo que sí hay mucho texto es bueno colocarlos en forma de F y si hay poco texto en forma de Z.
También hay que tener en cuenta si la pantalla es táctil y cómo la utilizarían tanto diestros como zurdos. Y lo más importante, ¡si los usuarios entran a la interfaz y no encuentra un botón, no sabrán que existe!
“Un botón con forma de botón”
La apariencia es muy importante. Los usuarios deben saber al momento dónde puede clicar y dónde no. Si tu botón no consigue esto, no valdrá de nada. Por eso, déjate de innovar en su forma y color y sigue los patrones convencionales para asegurar una buena usabilidad, es decir, “un botón con forma de botón”.
Es indispensable que el botón contraste con el fondo, siempre pensando en la accesibilidad, que su tamaño sea lo suficientemente grande para destacar y que a su vez sea proporcional con la página. Es importante que se refleje la prioridad de este elemento en pantalla, además de crear distintos estados: en reposo, over y el clicado.
Y por último…
Medir su funcionamiento, hacer testing y evaluar su conversión. La mejor forma de mejorar tu elemento es pensar muy bien en las acciones que quieres que el usuario haga, establecer prioridades del botón e ir testeando con él. O lo que es lo mismo, darles pautas a los usuarios y ver si son capaces de lograr su objetivo. Por ejemplo, si el objetivo es hacer una compra, darle varios pasos para su ejecución y ver si el usuario lo consigue. En tal caso, ese botón ha resultado exitoso 😎.
