No se preocupe por el orden de los botones en una aplicación web, haz esto en su lugar

(4 de junio de 2019)

Entonces está diseñando una aplicación web. ¿Cuál debería ser el orden de los botones? Aquí hay algunas pautas para decidir cuál debe ser el orden de los botones. Y además de estos casos, no importa si sigue lo que se indica a continuación.

Para empezar, todos estamos en la misma página, clasifiquemos los botones como primarios y secundarios. En la mayoría de los contextos, las acciones primarias son acciones positivas como Guardar o Enviar y las acciones secundarias son acciones negativas como Cancelar o Eliminar.

Siga las pautas de la plataforma

Si está creando una computadora de escritorio o una aplicación móvil, la respuesta al orden de los botones es simple: siga las pautas de la plataforma.

Para una PC, esto significa acción primaria seguida de acción secundaria.

Para Mac, esto significa acción secundaria seguida de acción primaria.

Para Android, esto significa acción secundaria seguida de acción primaria también.

Eso fue fácil. Pero, ¿con qué orden de botones elige una aplicación web?

Orden de botones para aplicaciones web

Si está diseñando una aplicación web que proporciona un servicio para usuarios de una única plataforma , es una obviedad, siga de nuevo la convención de esa plataforma.

Si no, entonces las cosas se complican un poco. Los usuarios utilizan computadoras de escritorio, tabletas y teléfonos móviles. Puede tener usuarios de PC que usen iPhones o Androids y puede tener usuarios de Mac que… bueno, probablemente usen iPhones más que Androids. Sí, la cuota de mercado para iOS, Android y OSX para Windows es de alrededor de 60 a 40, pero eso no significa que optimice para el 60% de los usuarios y no para el 40% restante. ¿Por qué no optimizar para un 100% de sus usuarios?

El orden de los botones no importa si lo hace en su lugar: botones de forma y tamaño contrastados

Puede optimizar para un 100% de sus usuarios sin centrarse en absoluto en el orden de los botones. Puede seguir adelante y elegir el pedido que desee. En su lugar, céntrese en el contraste visual no solo a través de la dimensión del color, sino también a la forma y el tamaño.

Cuando tenga la acción principal como un botón normal y la acción secundaria como texto (el subrayado es opcional pero se siente mejor en mi experiencia vendiendo este estilo a los propietarios de productos), logra crear de manera efectiva un contraste suficiente para que los usuarios noten fácilmente la diferencia entre los botones primarios y secundarios.

Ellos no No se confunda a diferencia de los botones normales, que tienen la misma forma y tamaño, y solo se diferencian por el color. A continuación, se muestran ejemplos de ambos pedidos, ambos igualmente eficaces para permitir a los usuarios diferenciar entre acciones primarias y secundarias.

Cómo transformar botones regulares en botones de formas y tamaños contrastados

Si tiene un sistema de diseño, actualice sus botones de aplicaciones primarios y secundarios desde botones regulares (siempre que se coloquen uno al lado del otro y no en postes separados) para que la forma y el tamaño de los botones contrastados no sea difícil en absoluto. También debería ser fácil de vender al propietario del producto o al consejo del sistema de diseño empresarial porque pueden actualizarse sin tener que preocuparse por el posicionamiento. Lo mismo ocurre con la actualización de su CSS si está creando una web. Prácticamente, podría reemplazar los botones en su sistema de botones normales a botones de forma y tamaño contrastados sin tener que preocuparse por nada.

  1. Digamos que cualquiera de estos pares son sus botones originales.

2. Cambie el color del texto del botón secundario.

3. Muévelos uno al lado del otro para que se toquen.

3. Elimina la forma de fondo del botón secundario

4. Opcionalmente, aunque recomendado; subraya el texto del botón secundario.

Gracias por leer.

No dude en ponerse en contacto o mantenerse conectado en LinkedIn y Twitter .

Lea más sobre UX, descargue recursos de UX y obtenga citas increíbles que puede usar en su trabajo diario de UX en Árboles de conos: investigación de usuarios & Diseño y Citas de UX .

Y i este artículo es de ayuda para ti, aplaude! 👏

Créditos de imagen

Publicado originalmente en https://www.conetrees.com el 4 de junio de 2019.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *