7 Guía de diseño de Botones de WordPress que necesita saber

Crear las guías de diseño de botones puede parecer redundante. Después de todo, ya sabes cómo son los botones del sitio, ¿no? Entonces, ¿realmente necesitas ayuda para crearlos? No importa cuán comunes sean los botones, no debe olvidarse para ser una parte central del diseño web con funciones importantes:
Los botones a menudo representan el llamado principal a la acción
Los botones de compra influyen mucho en los ingresos
Los botones de inscripción por correo electrónico lo ayudan a construir su lista
Los formularios de envío de botones son importantes para generar clientes potenciales
Los botones sociales te ayudan a distribuir tu contenido
Por esta razón, en esta publicación, le ofreceremos una serie de pautas para el diseño de los botones y las mejores prácticas. El objetivo es ayudarlo a crear botones para convertirlo y acercarlo a alcanzar el objetivo de su sitio.
Solo una breve advertencia: aunque las mejores prácticas a continuación lo ayudarán a crear mejores botones, para saber realmente qué aumentará su tasa de conversión, debe usar las pruebas divididas A/B. Solo probando diferentes alternativas ¿Descubrirá qué tipo de botón mejorará su sitio? La guía para diseñar los botones para ayudarlo a crear mejores botones a continuación lo ayudará a crear botones y la atención de los usuarios. 1. Asegúrese de que vayan bien con su sitio y la calificación de los botones deben salir (para que los usuarios hagan clic en ellos), pero de manera positiva.
Por esta razón, al respetar las instrucciones para diseñar los botones, asegúrese de que el resultado se integre bien en el contexto en el que aparece. Considere su marca y diseño existentes y asegúrese de que sus botones se armonicen con su paleta de colores y estilo. Una mancha de color en negrita podría ser exactamente lo que su sitio necesita para aumentar las conversiones. 2. Respeta las convenciones de diseño dedicadas Este punto debe explicarse por sí mismos, pero a menudo no lo es. Para que los usuarios hagan clic en los botones, deben ser conscientes de que esta opción realmente existe. Si su diseño está demasiado lejos de las convenciones ordinarias, podría evitar que los usuarios reconocan incluso la existencia de un botón. Entonces, ¿cuáles son esas convenciones? El primero es la forma. Debido a la larga evolución de las computadoras, la forma más conocida es un rectángulo (con o sin esquinas redondeadas). Solo mira a WordPress.
Los usuarios han estado expuestos al estilo tanto tiempo que lo reconocerán fácilmente. Por supuesto, hasta ahora se han establecido otros y hay otro buen lugar para comenzar.

Además, una importante indicación de diseño para los botones son paraguas y luces. Las sombras se han convertido en la señal universal de que puede hacer clic en algo o toques. Por lo tanto, no olvide hacer que sus botones se vean más convexos.

Independientemente de la forma y el diseño del botón que elija para su sitio web, asegúrese de permanecer consistente. Si sus botones difieren demasiado, confundirán a los usuarios y les impedirán tomar medidas. 3. Use etiquetas claras El siguiente punto en nuestras guías de diseño de botones son las etiquetas. Sin una indicación de lo que hace un botón, los usuarios no tienen forma de determinar si el clico tiene sentido para ellos. Vea el botón Publicar arriba. No necesariamente tiene que ser texto, los íconos pueden ser suficientes. Puede ver esto en los botones de intercambio social que se han vuelto omnipresentes. Además, es posible una combinación de texto e imágenes. Lo único que importa es que el usuario pueda identificar el efecto de que un botón tendrá un botón. Si no lo hacen, probablemente no tomarán las medidas deseadas. Asegúrese de hacer sus etiquetas descriptivas y específicas, use verbos que describan la acción que realizará (como comprar) y crear urgencia con palabras como ahora. Esto es particularmente importante para las exhortaciones a la acción, que a menudo son la parte central de cualquier página web. 4. El tamaño de los botones y el espacio de obtener los espacios y dimensiones correctos es particularmente importante para el diseño móvil. El uso de un sitio web de dedo es menos preciso que con un mouse, simplemente porque el “cursor” es mucho más grande.
La parte importante aquí es crear botones para que a) hacerlos utilizables yb) para evitar que los usuarios toquen accidentalmente algo incorrecto. Cuando se trata de tamaño, la punta promedio del dedo humano es de 16-20 mm. Esto es alrededor de 45 a 57 píxeles. Para adaptarse a esto, Apple recomienda un tamaño del botón de al menos 44 x 44 píxeles (haga estos puntos para pantallas retinianas). El enlace también contiene recomendaciones de otros fabricantes, la mayoría dice alrededor de 10 mm. Parece que no hay reglas concretas para el espacio. Solo asegúrese de que sus botones estén organizados de una manera que sea poco probable que se presione en uno equivocado. Proporcionar espacio suficiente también puede ayudar a diferenciar los botones más importantes, como la urgencia. Implemente comentarios Una vez que haya diseñado sus botones de una manera que los usuarios puedan identificarlos claramente, el trabajo no se detiene. La siguiente pregunta es: ¿Qué sucede cuando uso un botón? Resulta que estos elementos de diseño tienen varios estados:

Norma: puede ver claramente un botón, el elemento invita a la interacción
Concentrados, generalmente los efectos del ratón, confirme que la interacción con el elemento es posible
Presionado: recompensa al usuario por acción, confirme que sucede algo
Ocupado: muestra la actividad que tiene lugar en segundo plano
Discapacitado: muestre claramente que otras acciones son posibles pero no actualmente
Fuente: Tutsplus que ofrece comentarios, puede hacer que la interacción sea aún más interesante. Es una recompensa visual para los usuarios ver que su acción tiene un efecto.
6. Coloque visiblemente, por supuesto, cuando haya diseñado sus botones, el paso final es asegurarse de que los usuarios puedan encontrarlos. De lo contrario, ¿cómo harán clic en ellos? Por esta razón, elegir la ubicación correcta del botón también es importante. Y aquí es lógico ir con las convenciones establecidas. Por ejemplo, la mayoría de las personas esperan que el principal impulso de acción esté en el redil, por lo que es un buen lugar para decirlo. Otros botones también pueden tener convenciones como esta, como el sótano de las redes sociales del sótano.
Fuente: Orbit Media Aunque puede tener sentido violar las convenciones de vez en cuando, siempre corre el riesgo de confundir a los usuarios. Esto, a su vez, afecta en gran medida su percepción de su sitio. Pruebe diferentes posibilidades para determinar la que funciona mejor.

7. contrasta con el resto del diseño para colocar bien sus botones también significa proporcionar suficiente contraste. Al hacer que los botones se destaquen por el resto del diseño, aclare que la interacción es posible y deseada. También evita la pérdida de sus botones aquí son las herramientas generales para crear contraste:

Color: use colores contrastantes, incluso para la etiqueta del botón

Tamaño: los elementos más grandes salen más

Tipografía: el texto engrosado o el uso de una fuente diferente pueden llamar la atención
Espacio en blanco: más espacio para respirar alrededor de un elemento significa más concentración en él
Una buena manera de averiguar si el contraste es lo suficientemente alto es usar la prueba extraña. Para hacer esto, simplemente retírate de la pantalla, pon los ojos y vea si el botón se destaca. Cómo crear botones en WordPress ahora que sabe cómo hacer que los botones se vean bien, la pregunta es cómo los trae a su sitio. Afortunadamente, el nuevo editor de Gutenberg hace esto muy fácil. 1. Cree el elemento de bloque Puede crear un botón en Gutenberg como cualquier otro elemento de bloque. Simplemente haga clic en el símbolo más a la izquierda. Cuando se abre el menú, desplácese hacia abajo hasta los elementos de apariencia para encontrar el botón.
Haga clic para agregarlo a su página 2. Configure el texto del botón y el destino para hacer clic, WordPress abre este menú.
Tenga las siguientes opciones aquí:
Cambie la orientación: use los símbolos en la parte superior para alinear el botón a la izquierda, al centro o a la derecha de la página
Edite el texto del botón: simplemente haga clic en el botón para cambiar el texto en lo que desea, también es posible establecer el texto en Aldin, cursive o Barat

Destino de la introducción: donde escribe URL o tipo de pegado, puede determinar dónde tomará el botón de los visitantes

3. Edite el diseño una vez terminado con este es el momento para la peluquería. Para hacer esto, busque la opción de cambiar el botón de texto y el color con solo unos pocos clics a la derecha.

Seleccione una de las opciones disponibles o use el selector de color para generar un nuevo tono. También puede ingresar un código hexadecimal con un cierto tono deseado. El editor le advierte incluso si elige una combinación de colores que serán difíciles de leer. Además, en Advanced, puede agregar una clase CSS personalizada al botón. De esta manera, puede crear un diseño personalizado con algunas marcas de CSS, incluidos el mouse y más efectos de pasaje. Y esa es la forma más fácil de agregar un botón a WordPress. Los botones de la guía de diseño de botones se pueden marginar ligeramente en el diseño web, porque muchos los consideran elementos comunes. Sin embargo, el papel que desempeña no debe subestimarse. Los botones influyen en todo, desde las conversiones y las ventas hasta el registro por correo electrónico. Arriba, le he ofrecido instrucciones para diseñar los botones que puede usar para hacer que los suyos sean más eficientes. Recapitulémonos muy rápidamente: asegúrese de que sus botones vayan bien con el resto de su sitio
Hacerlos claramente identificables como botones
Agregar etiquetado claro y distintivo
Agregar suficiente tamaño y espacio
Ofrecer comentarios visuales a los usuarios

Coloque los botones visibles en su página
Establezca suficiente contraste con el resto de la página