En un entorno como el actual, donde la innovación y la disrupción se valoran enormemente, a veces nos pasamos de creativos. Y para muestra, un botón. Si hay algo que debemos tener presente en el mundo del UI/UX es la usabilidad. Y un factor importante de ésta son los botones. Y la sociedad ya tiene un aprendizaje sobre cómo funciona la navegación dentro de las apps y web y qué elementos debe buscar para avanzar en su objetivo. ¿Qué pasa si nos ponemos en modo artista para ofrecer un estilo propio y único? Pues lo que puede pasar es que las personas no encuentren en la app nada de lo que buscan, no lo entiendan, se cansen y se vayan. Imagínate si encima nos ponemos a inventar y jugar con el kit de botones, la conversión puede caer en picado. Y tu no quieres eso ¿Verdad? Por eso hoy, nuestra Visual Designer, Maria Arnó, nos cuenta que seis errores garrafales no puedes cometer a la hora de ponerte creativo al diseñar un botón.
Solo podrás sacar el Dalí que llevas dentro si te aseguras de que en tus botones no vas a cometer ninguno de estos 6 errores. Le puedes dar un toque personal, sí. Pero sin obviar el aprendizaje y recorrido que tiene la sociedad en cuanto al clik!
Error 1 al diseñar un botón: Que ni siquiera parezcan botones
¿Te parece obvio? Pues de verdad que esto pasa. Si la innovación no tiene en cuenta que el usuario pueda interpretar de manera rápida qué opciones son clickables y cuáles no, ¿quién va a ser capaz de dar el siguiente paso? Un diseño fácilmente reconocible le guiará hacia lo que anda buscando.
Error 2 al diseñar un botón: Las mil y una formas
Piénsalo bien antes de crear un botón en forma de estrella. Lo más probable es que te acabes estrellando tú cuando tengas que pasar cuentas sobre el porcentaje de conversión igual a cero. La forma más asociada al botón es el rectángulo, con y sin corner radius. Así no habrá duda de dónde tiene que hacer click si quiere añadir a la cesta, por ejemplo.
Error 3 al diseñar un botón: Ignorar la estructura básica
No se puede crear un botón si ni siquiera se conoce su esqueleto. Para que un botón destaque y sea equilibrado, debe tener una estructura mínima. Aquí puedes hacer de más o de menos, según el estilo gráfico de la marca. Siempre debes pensar bien en cada uno de los siguientes puntos y tomar decisiones que sumen.
Elementos de un botón
- Padding: es la distancia de margen entre el copy del botón y los bordes.
- Espacio de seguridad: es el espacio que delimita la zona que no puede ser invadida por ningún otro elemento. Deja un área libre para resaltar entre todos los elementos.
- Tamaño y tipo de letra: El tamaño del botón marcará un poco el tamaño de la letra. Éste no debería ser en ningún caso inferior a 12pts. si no quieres que Google aplique sus penalizaciones sobre tu interfaz. ¡No te la juegues!
- Esquinas en radio: el border radius es algo totalmente subjetivo. Deberás decidir según tus gustos. Aunque hay una norma no escrita (que bien podrías saltártela si quisieras) que dice: «para diseños más minimalistas, elegantes o serios es preferible usar muy poco o nada de border radius. En cambio, si queremos un diseño más dinámico, fresco o divertido puedes potenciarlo usando botones con los corners totalmente redondeados.» Ya decides tu lo rebelde que quieres con este punto.
- Color destacado: si decimos destacado es porque tiene que destacar. Puede ser un color sólido o usar algún tipo de degradado. Siempre debemos tener en cuenta la paleta de colores corporativa de la marca. Puede estar en armonía, dándole prioridad a un color concreto; o que éste contraste con el resto de colores. Tener en cuenta la teoría del color y las tríadas puede ayudarte.
- Sombra: Este elemento no es obligatorio, va según gustos. Puede ayudarte a darle un volumen que ayude a identificar esa interacción del elemento. También ayuda a dar feedback de la acción.
Error 4 al diseñar un botón: Pensar que «sí» y «no», siempre se entienden
Estamos acostumbrados a dar respuestas con monosílabos. Es práctico y claro. Sin embargo, cuando hay que tomar decisiones o acciones es preferible reforzar el mensaje de los botones con la acción que se quiere hacer. En entornos con muchos estímulos o con fatiga visual, no siempre se lee el mensaje de forma correcta. Así que despejemos todo tipo de duda dejando de lado el «sí» y el «no» como opciones de respuesta.
Error 5 al diseñar un botón: Repensar el orden para sorprender
Se suele decir que para impactar debes sorprender. Eso seguro. Pero se trata de impactar en positivo. No olvides lo comentado: los usuarios vienen con un aprendizaje previo. Así, por ejemplo, el botón de «saber más» no lo van a buscar al principio ni en el medio de la explicación. Deberíamos mantener los botones en el lugar que se suelen buscar. En este caso, justo después de una explicación. Para facilitar la localización de la acción que nos interesa, debemos ponerla en valor por encima de las otras en cuanto a visualización y jerarquía. User centric siempre, pero con un poco de vista que vivimos de los clicks.
Error 6 al diseñar un botón: No dar feedback
No dar feedback o no dar suficiente feedback. Este error es muy común sobre todo en aplicaciones móviles. Cuando una interfaz es para usarla desde el móvil, pierde un elemento de feedback muy importante: el hover. Ya sea con sombras, movimiento, etc., es una ayuda visual que sí da pie a la parte artística. Pero en móviles, como no podemos usar esta opción, debes darle mucha importancia al feedback postclick. Dejar claro que se ha efectuado la acción. Y si podemos concretar que con éxito, mejor. Si me compro un vuelo a La Habana, necesito saber que le he dado bien a comprar antes de ilusionarme. Puedes cambiar el color, el copy, que el rectángulo se convierta en un avión ¡o lo que quieras! Pero que quede claro, que me voy a Cuba.
Y porque una imagen vale más que mil palabra, te dejo esta chuleta resumen para no cagarla. Debe ir directa a tu corcho de inspiración.
