Diseño de botones: seis reglas que debe seguir

Agregar botones a su sitio es una necesidad absoluta.No solo ayuda a los usuarios a interactuar con su sitio, sino que los alienta y pasar más tiempo.En algunos casos, los botones no parecen jugar demasiado, pero encontrar un buen lugar para ellos puede aumentar las ventas y hacer que la experiencia del usuario sea más agradable.Continúe leyendo más sobre este tema en este artículo creado por el equipo de Amelia (el mejor enchufe de reserva de WordPress).Los elementos básicos de un diseño de botón

Como en la mayoría de los trabajos de diseño, hay un conjunto de reglas que deben seguirse independientemente del tipo de botón que desee crear.Todos los botones personalizados deben seguir estas reglas básicas, y el botón que cree debe ser elegante de acuerdo con su propósito en la página.
Sobre todo, los botones deben dirigirles la atención del usuario. Como tal, los botones a menudo van acompañados de una declaración de acción, alentando al usuario a hacer clic en ella. Pero solo CTA no puede basarse en el usuario para atraer al usuario, y las reglas de diseño tradicionales no harán que sus botones se destaquen del resto, por lo que tendrá que ser creativo. Esta es una guía breve que lo ayudará a comprender los botones y enumerará seis reglas diferentes que garantizarán el éxito de los botones. Tipos de botones Los botones vienen en diferentes tipos, porque se pueden usar para diferentes fines. Se pueden colocar en cualquier lugar de la interfaz del sitio y, para obtener el mejor efecto, debe elegir el tipo de botón más adecuado para su sitio para crear sus propios botones, elija uno de los siguientes tipos: Texto
Este es probablemente el tipo de botón más común. Parecen simples bloques de texto acentuados. En el diseño de los botones, el botón de texto no es muy efectivo porque no están suficientemente subrayados, sin embargo, se pueden usar cuando este es exactamente el efecto que desea lograr. El fantasma

Los botones de fantasmas también se llaman botones delineados y son un poco más difíciles de diseñar. Normalmente se usan para acciones que son menos importantes, en comparación con los botones de texto que están diseñados para las acciones principales. El proceso de diseño del botón para el tipo de fantasma es un poco más complejo que el tipo de texto.

Recogido
Los botones elevados también se conocen como botones contenidos y puede reconocerlos por la forma rectangular que tiene un efecto 3D. El efecto 3D se obtiene usando una sombra debajo. Esto lo hace parecer más un botón en la vida real, por lo que es más intuitivo presionarlo. El cambio de botón de conmutación es utilizado por aquellos que desean agrupar más acciones en un solo botón o presentar una serie de configuraciones. En el primer caso, el usuario hace clic en el botón y elija una sola opción a la vez. Cada vez que se selecciona una opción, no se puede agregar una segunda opción. Si hace clic en otra opción, la primera se anulará automáticamente.

En el último caso, el botón Switch permite la activación o desactivación de diferentes configuraciones. FLOTANTE

Los botones de acción flotantes a menudo se conocen como Fab. Se utilizan para acciones de interfaz comunes. Por lo general, se colocan muy visiblemente, por encima del contenido. En la mayoría de las situaciones, tienen una forma circular, pero no es obligatorio. Al diseñar los botones, elegir el tipo correcto es esencial, ya que determinará qué tan fácil se puede usar la interfaz en un teléfono móvil, en una PC, en una tableta, etc. Por ejemplo, el uso de un botón de texto no es tan fácil de usar como el uso de un botón alto para usuarios móviles, pero estaría bien en una computadora. Los argumentos para cada tipo de botón son numerosos, así que tome tiempo para tomar una decisión apropiada.
Color y contraste

La psicología del color juega un papel importante en el diseño de los botones. Cada color tiene el poder de influir en una persona de una forma u otra. Deberá diferenciar los botones de su sitio de acuerdo con su propósito. Debe tener en cuenta tanto la psicología de los colores como los principios estéticos. Recomendamos que los pelee de la siguiente manera: Acciones primarias: color sólido, alto contraste
Acciones secundarias: color transparente, contorno sólido

Acciones terciarias – Texto subrayado
Cada color tiene su propio poder. Vea los logotipos de las marcas más grandes allí y comprenderá su papel. El rojo generalmente se asocia con pasión, hambre o energía. Los colores amarillos u otros colores descoloridos son perfectos para los botones que conducen a páginas informativas. El verde o el azul son buenos para los botones que indican una acción positiva (por ejemplo, donado).
Las seis reglas de oro 1. Manténgalo tradicionalmente
No te vuelvas demasiado loco por las formas. Los botones aún deben parecer botones. De lo contrario, los visitantes de su sitio podrían confundirse y podrían evitar el extraño elemento de forma que colocó allí. Trate de mantenerlo tradicionalmente cuando se trata de modelar. Al diseñar los botones, debe considerar los principios básicos. Por ejemplo, si su sitio web contiene elementos cuadrados, elija el mismo modelo con sus botones. Si su sitio está más en el lado redondo, rodee los bordes para los botones o use botones circulares.
Independientemente de la forma que elija, asegúrese de que sea visible y atraiga los ojos del usuario. Una vez que haya elegido una forma, manténgala por toda la interfaz porque de lo contrario no logrará un efecto estético. Además, el usuario estará familiarizado con la forma del botón y escaneará más a medida que use la interfaz.2. Hacerlos visibles

No tiene sentido crear un botón si no sale del resto de los elementos. Los usuarios ignorarán por completo un botón que no se destaque de ninguna manera. Trate de colocarlo en un lugar visible, en una posición donde los visitantes puedan observarlo fácilmente.

Ponte en la piel de un visitante: ¿Qué área del sitio nota por primera vez cuando entra? Este es el lugar donde quieres ser tu botón. La ubicación convencional es uno de los aspectos más importantes del diseño de los botones, por lo que no lo pasa por alto. Use espacio en blanco y colores contrastantes para enfatizar la presencia del botón. 3. Etiquétalos
No puede crear un botón sin etiquetarlo. De lo contrario, las personas no sabrán qué hacer con él, incluso si pudieran explicarlo durante el contenido de la copia. Agregar una etiqueta clara al botón que diseñó permitirá a los usuarios saber qué esperar al hacer clic en ella.
El tamaño mínimo de fuente que debe usar para los botones es de 16 px. Cualquier cosa menos que eso no es lo suficientemente visible. Considere esto al diseñar el botón. Además, deje suficiente espacio libre alrededor de la etiqueta para que el botón se vea bien. 4. Dimensión

Como se mencionó anteriormente, no puede incluir etiquetas que tengan menos de 16 píxeles. Eso debería darle una idea de cuán grandes deberían ser los botones en una página. Puede usar el tamaño para establecer la prioridad. En el diseño de los botones, el más grande tiene la mayor importancia y es la más fácil de presionar. Las botellas más pequeñas se atribuyen a acciones menos importantes. Use Myth Touch Lab como un instrumento que puede ayudarlo en este proceso. El tamaño recomendado por ellos es de 10 mm x 10 mm, pero puede jugar con él de acuerdo con el espacio disponible en su interfaz. 5. No uses demasiado
No debe incluir muchos botones en un sitio, incluso si pudiera ser tentador. Muchas aplicaciones móviles e interfaces de sitios web incluyen botones de una sola página. Esto no hará que los usuarios hagan clic en ellos. En cambio, los usuarios podrían irse en un momento porque la interfaz está demasiado llena. Un botón en la página es el objetivo para el que debe hacer esfuerzos. Tal vez dos, si es absolutamente necesario. 6. Agregar retroalimentación