Usabilidad para Dummies: cuáles deberían ser los botones en el sitio

Los botones ideales son cuando los visitantes del sitio no se distraen con ellos, pero se les hace clic constantemente. Un buen botón debe tener un aspecto natural y orgánico, para que el usuario no lo califique en un nivel consciente, sino que siga automáticamente la llamada especificada. En este artículo, aprenderá cuáles deberían ser los botones perfectos en el sitio.

Cuándo usar botones en lugar de enlaces

Prácticamente en cualquier recurso encontrarás más enlaces que botones. Los botones son imágenes que se deben gastar para crearlos. Se puede hacer un enlace en un segundo. En este caso, los enlaces y botones resuelven tareas casi idénticas. ¿Cuándo debo usar los botones y cuándo puedo usar los enlaces?

Si la página usa demasiados botones, se carga lentamente. Además, el usuario puede confundirse después de ver varias llamadas a la acción. Por lo tanto, use los botones cuando necesite alentar al usuario a realizar una acción importante para usted: comprar, descargar, registrarse, etc. En todos los demás casos, enlaces adecuados.

¿Cómo distinguir una acción importante de una menos importante? Pregúntese: "¿Tiene el efecto deseado en mi negocio o en mi sitio?"

Las acciones importantes generalmente requieren un esfuerzo activo por parte del usuario. Debe inscribirse, comentar, realizar un pedido, etc. Acciones menos importantes no requieren esfuerzos activos. El usuario se mueve de una página a otra y consume contenido.

Cómo usar los gradientes correctamente

Los diseñadores utilizan gradientes para proporcionar un aspecto natural a los elementos de la interfaz. Cuando una fuente de luz ilumina un objeto desde arriba, crea un efecto de luz natural y le da profundidad a los objetos. El usuario percibe las áreas iluminadas del objeto como cercanas a la fuente de luz, y las áreas oscuras como remotas.

Al crear botones, recuerda:

  • Una persona percibe un botón iluminado en la parte superior y oscurecido en la parte inferior, como convexo.
  • Una persona percibe un botón que se ilumina en la parte inferior y se oscurece en la parte superior, como cóncavo o presionado.

El usuario debería ver un botón levantado hasta que lo haya presionado. Si el usuario presiona un botón, debería verlo cóncavo. Este efecto se puede lograr utilizando gradientes.

Cómo hacer que el botón sea persuasivo

Los botones casi siempre contienen CTA, pero los usuarios no siempre hacen clic en ellos. Para aumentar la capacidad de clic, debe hacer que los botones sean convincentes. ¿Qué significa esto en términos de usabilidad?

  • Use degradados, sombras y esquinas redondeadas para hacer que el botón sea realista.

Cuanto más realista se ve el botón, más a menudo los usuarios hacen clic en él. Puede lograr el efecto de un botón tridimensional con degradados, sombras y esquinas redondeadas. Una persona presiona automáticamente docenas de botones durante el día: llama al ascensor, enciende el televisor o el aire acondicionado, responde llamadas telefónicas, etc. Cuanto más real sea el botón en el sitio, mayor será la posibilidad de que el usuario haga clic en él automáticamente.

  • Usa colores contrastantes.

El color de contraste atrae la atención del usuario. El color ideal es el que inmediatamente hace que el visitante note el botón. Tenga en cuenta que el color del botón debe contrastar tanto con el fondo del sitio como con el color del texto en el mismo botón.

  • Haz el botón lo suficientemente grande, pero no demasiado grande.

El tamaño importa cuando se trata de botones. Cuanto más grande sea el botón, más fácil atraerá la atención del usuario. Cuando aumente el botón, no olvide aumentar proporcionalmente el tamaño de la fuente CTA. No te excedas con el tamaño. El botón no debe absorber visualmente el contenido.

  • Usa palabras urgentes

Ahora, hoy, inmediatamente, en un clic, estas y otras palabras crean un efecto de urgencia. Úsalos en el texto del botón para estimular los clics.

  • Suavizar CTA

Los usuarios pueden rechazar su oferta por varias razones. Por ejemplo, consideran que el producto es demasiado caro, no comprenden sus valores y su esencia. En este caso, ayudará a una llamada suave a la acción. Ofrezca a los usuarios una versión de demostración, un período de uso gratuito, obtenga más información sobre el producto, etc.

  • Usa letras mayúsculas y minúsculas correctamente.

Si su CTA consta de dos palabras, escriba ambas con una letra mayúscula. Las letras mayúsculas hacen que el texto se lo pida. Si su CTA consta de tres palabras o más, escriba la primera palabra con una letra mayúscula y escriba el resto en minúscula. En este caso, el texto se percibe como un diálogo. Las fórmulas se ven así: una CTA dura = una o dos palabras + cada palabra con mayúscula; CTA suave = tres palabras o más + con mayúscula solo la primera.

  • Ilustrar llamadas a la acción.

Esto se puede hacer usando iconos, flechas y otros elementos. Hacen que la CTA sea más convincente. Por ejemplo, la flecha en el botón muestra al usuario que después de hacer clic irá a otra página.

  • Usa efectos de desplazamiento

El cambio visual del botón cuando se desplaza el cursor sobre él convence al usuario para que realice una acción. ¿Qué debería cambiar? Estos pueden ser gradientes, cambiar el color de la fuente o cambiar la apariencia del cursor. Por ejemplo, cuando se desplaza sobre un botón, el cursor puede cambiarse de una flecha neutral a una mano en un gesto de apuntar.

¿Por qué los botones OK ya no están bien?

Los desarrolladores de interfaces a menudo utilizan botones como "Aceptar", "Cancelar", "Sí", "No", etc. Si usas una PC, ves estos botones todos los días.

Estos botones no tienen nada que ver con la acción que realiza el usuario. Para que su señal sea más clara y convincente, asocie el CTA con la acción del usuario deseada / planificada.

Por qué los botones de conversión se deben colocar en la parte inferior derecha de la página

Puedes responder a esta pregunta después de estudiar la tabla de Gutenberg.

El diagrama muestra que la página está dividida en cuatro partes. Las flechas indican el movimiento de los visitantes. Los cuadrantes superior izquierdo y derecho de la página reciben la mayor atención del usuario. El cuadrante inferior izquierdo recibe la menor atención. Por lo tanto, es mejor colocar el botón de conversión en la parte inferior derecha de la página.

Por qué en los cuadros de diálogo el botón de la acción deseada debe estar a la derecha

En los cuadros de diálogo, los botones de la acción deseada ("Comprar", "Realizar Pedido", "Sí", "Aceptar", etc.) funcionan mejor cuando se encuentran a la derecha. Tenga en cuenta la siguiente ilustración:

Si el botón de la acción deseada está a la izquierda, el usuario lo nota primero. Sin embargo, no lo presiona hasta que haya explorado todas las opciones disponibles. El visitante nota el botón de la acción deseada y luego llama la atención sobre el botón de la acción alternativa. Para que pueda elegir la opción "Sí", su atención debe regresar al botón de la acción deseada.

Cuando el botón para la acción deseada está a la derecha, la ruta de conversión se acorta en un paso:

Cuando el botón para la acción deseada está a la derecha, la atención del usuario primero se detiene en la opción secundaria y luego se mueve a la opción deseada.

Cuando el botón para la acción deseada está a la izquierda, el usuario encuentra tres soluciones visuales en el camino hacia la conversión. Cuando el botón de la acción deseada está a la derecha, el número de fijaciones visuales se reduce a dos.

Cómo seleccionar el botón de la acción deseada.

En los cuadros de diálogo tiene sentido resaltar visualmente el botón de la acción deseada. En este caso, atrae y capta la atención del usuario.

Para resaltar visualmente el botón de conversión puede usar los siguientes métodos:

  • Use un color intenso para el botón de la acción deseada y una acción alternativa para el botón que está insaturado.
  • Utilice el color de fondo para el botón de acción alternativa. Observe el cuadro de diálogo de Skype en las ilustraciones anteriores. El botón de acción alternativa "Salir" se fusiona con el fondo.
  • Haciendo un botón de acción alternativo como enlace.
  • Utilizando el efecto de transparencia, gracias a lo cual el botón de acción alternativa se ve inactivo.

¿Por qué los iconos deben tener un fondo transparente?

Los iconos mejoran la eficiencia de la interfaz de usuario. La gente percibe los patrones visuales de los iconos decenas de miles de veces más rápido que el texto. Esto es cierto cuando las figuras se representan en un fondo transparente.

Cuando el fondo de los iconos es opaco, la velocidad de percepción de la información por parte del usuario cae bruscamente. El fondo crea un ruido visual que hace que todos los iconos sean iguales. En lugar de escanear instantáneamente información visual, el usuario tiene que leer e interpretar imágenes, lo cual es típico para trabajar con texto.

El uso de un fondo opaco para los iconos se puede comparar con el texto escrito en mayúsculas: esto dificulta la exploración de patrones visuales y reduce la velocidad de la percepción.

Cómo usar flechas y puntos

Las flechas en los botones indican al usuario que complete la acción después de la transición. Por ejemplo, al hacer clic en un botón, un visitante puede hacer un pedido, seleccionar un producto y suscribirse a un boletín.

Las flechas en el menú indican la disponibilidad de opciones adicionales.

Los puntos en los botones y en el menú indican la disponibilidad de opciones adicionales y lo incompleto de la acción.

Las flechas y los puntos hacen que los botones y los menús sean intuitivos.

Los botones deben ser visibles y persuasivos.

Para hacer esto, los diseñadores deben elegir el diseño de botón correcto, usar degradados y colores ricos, aplicar efectos de desplazamiento, contrastes y llamadas a la acción correctas. La efectividad de los botones se ha mejorado con la ayuda de flechas, elipsis y otros elementos visuales. Los botones deben ser lo suficientemente grandes, pero no deben absorber visualmente el texto circundante.

Loading...

Deja Tu Comentario