Un sitio típico o un formulario de aplicación (o cuadro de diálogo) generalmente tiene varias opciones. En la mayoría de los casos, los usuarios ven dos opciones: una representa una primaria para la tarea del usuario y otra, que tiende a ser menos utilizada, representa una tarea secundaria (por ejemplo, permite a los usuarios retraer los datos que han ingresado en forma o cancelar la conversación). En este artículo presentamos los momentos básicos de UX para los botones de acción y respondemos a la pregunta más común entre los diseñadores “Qué botón debe aparecer primero -” Aceptar “o” Cancelar “).

 

Prevención de errores

Como dice la heurística de usabilidad de Jakob Nielsen: “El diseño cuidadoso evita que ocurra un problema en primer lugar”. Debería tratar de eliminar las condiciones propensas a errores que pueden suceder cuando los usuarios seleccionan accidentalmente una opción incorrecta. Peso visual. Para hacer una distinción clara entre dos opciones, usted tiene que utilizar el peso visual diferente para los botones. El botón con el peso visual más fuerte recibirá más atención.

Distinción visual para el botón ‘Enviar’. Crédito de la imagen: Lukew Etiqueta clara y distinta. Un buen cuadro de diálogo no se trata sólo de preguntar a los usuarios qué acción quieren realizar. También se trata de hacer que cada opción sea lo más clara posible. Por eso es tan importante tener una etiqueta distinta para cada opción. Una etiqueta explícita sirve como “ayuda de just-in-time”, dando a los usuarios más confianza en la selección de la acción correcta: A menudo es mejor nombrar un botón para explicar lo que hace que usar una etiqueta genérica (como “Aceptar”).
Utilice un verbo siempre que sea posible en lugar de “Sí” o “Aceptar” porque sus botones tendrán sentido fuera de contexto con el texto explicativo o título. A continuación se muestra un muy buen ejemplo de lo que no se debe hacer:

Nunca utilice ‘Sí’ o ‘Aceptar’ cuando podría usar un verbo en su lugar. Aquí hay otro ejemplo de diálogo: en el primer ejemplo, el texto de la acción despectiva ‘No’ responde a la pregunta, pero no sugiere lo que sucederá después. Un mejor par de acciones sería un ‘Cancelar’ y ‘Desechar’. El texto de acción afirmativa ‘Descartar’ indica claramente el resultado de la decisión.

Crédito de la imagen:

Material Design Cuando una acción primaria es positiva (‘Enviar’ o ‘Enviar’) La acción primaria asociada con un formulario necesita llevar un peso visual más fuerte. Las acciones secundarias deben tener el peso visual más débil, porque la reducción de la prominencia visual de las acciones secundarias minimiza el riesgo de posibles errores y dirige a las personas hacia un resultado exitoso.

‘Guardar’ es un botón de acción primario positivo Cuando una acción principal es negativa (‘Reemplazar’ o ‘Eliminar’) En este caso, dando al botón que significa acción irreversible un peso más visual es peligroso. El usuario puede elegir la acción irreversible como una opción segura y proceder por error.

Por ejemplo, cuando se trata de reemplazar un archivo, la velocidad de un procesamiento de tareas no es importante. Lo que es realmente importante es elegir la acción apropiada para que los usuarios no lamenten su decisión.

‘Cancelar’ es una acción secundaria en este diálogo pero tiene un peso más visual Las operaciones ‘Eliminar’ y ‘Borrar’ requieren atención adicional. ¿Cuántas veces has borrado algo accidentalmente y has encontrado que no puedes recuperarlo? A menudo, los usuarios no leen el diálogo de confirmación y simplemente pulsan el botón. Pero a veces realmente leen la notificación, pero incluso después de que accidentalmente haga clic en el botón equivocado (‘Eliminar’ cuando en realidad significaba hacer clic en ‘Cancelar’). Debe proporcionar una única y obvia acción de confirmación que el usuario puede tomar sin la preocupación perturbadora por la accesibilidad, el sesgo cultural y la confusión de decisión que puede venir de dividir las opciones por el color solo. El diálogo de LinkedIn es muy claro y no deja ambigüedad, sin embargo, debe diseñar un mecanismo fundamentalmente diferente para operaciones críticas con datos de usuario valiosos. En lugar de utilizar un botón de acción que los usuarios podrían presionar accidentalmente, debe proporcionar un campo de texto y solicitar que escriba la palabra “eliminar” para confirmar la operación.

 

Acciones secundarias como botones desactivados:

Los botones inactivos (o deshabilitados) son útiles cuando es necesario que los usuarios sepan que la acción es posible. Incluso si el botón no está en contexto, el usuario tiene la oportunidad de saber que la opción está disponible. Incluso puede tener una sugerencia que explique los criterios de uso de un botón inhabilitado Otro buen caso de uso para un botón desactivado es una “salida de emergencia” de una situación que los usuarios pueden haber ingresado.

Deshacer opciones es realmente uno de los mayores avances en la usabilidad, porque los usuarios suelen preferir utilizar el botón Atrás cuando quieren escapar de un estado no deseado. Deshacer es una salida de emergencia para un estado no deseado ‘Aceptar’ – ‘Cancelar’ o ‘Cancelar’ – ‘Aceptar’? El debate “OK” / “Cancelar” es muy popular entre los diseñadores: “¿Debería aparecer el botón de acción primario antes o después del botón de acción secundario?” En realidad no hay una diferencia significativa en el rendimiento ni en la preferencia del usuario.

Directrices de Apple, Google y Microsoft – La consistencia con las convenciones de la plataforma es la cosa más importante a considerar al diseñar los botones del diálogo. Lamentablemente, las directrices para la experiencia del usuario de Windows difieren de las directrices de la interfaz humana de Apple y las guías de Google para Android cuando se trata de la secuencia de botones ‘Aceptar’ / ‘Cancelar’: Las directrices de Microsoft para Windows sugieren el siguiente orden: ‘Aceptar’ / [Hacerlo] / ‘Sí’ [No lo hagas] / ‘No’ ‘Cancelar’ Así que ‘Cancelar’ siempre está a la derecha del botón OK para la plataforma Windows.
Cuadro de diálogo en Microsoft Windows Apple MacOS Guidelines dice que “Un botón que inicia una acción está más a la derecha. El botón Cancelar está a la izquierda de este botón. “Para los usuarios de MacOS, ‘Cancelar’ está a la izquierda del botón ‘Aceptar’. Cuadro de diálogo Apple MacOS. Crédito de la imagen: Apple Google Guideline de Android dice: “La acción desdeñosa de un diálogo siempre está a la izquierda. Las acciones despreciables devuelven al usuario al estado anterior. Las acciones afirmativas están a la derecha. Las acciones afirmativas continúan avanzando hacia el objetivo del usuario que activó el diálogo. “Y esto significa que, para Android, ‘Cancelar’ está a la izquierda del botón ‘Aceptar’. Cuadro de diálogo Google Android. Crédito de la imagen: Material Design

Si está diseñando una aplicación para una de estas plataformas, su elección es bastante obvia: Haga lo que el propietario de la plataforma le diga que haga. ¿Por qué? Debido a que aplicar un diseño coherente que sigue las expectativas de los usuarios ahorra mucho más tiempo que hacer algo que podría ser un poco más óptimo para su aplicación, pero introduce una inconsistencia.

Desviarse de la norma, y fácilmente costará a los usuarios varios minutos (o horas si fue un error fatal) ya que pasar por alto o mal uso del botón.
Plataformas basadas en Web

Si está diseñando una aplicación basada en la web, la decisión es más difícil, lo más probable es que vaya con la plataforma preferida por la mayoría de sus usuarios. Puede utilizar la analítica web para encontrar la plataforma más utilizada para su producto, pero cualquiera que sea la secuencia de botones que elija, no será coherente para todos sus usuarios debido a los diferentes sistemas operativos. En este caso, la secuencia de botones debe seleccionarse en función de la perspectiva de usabilidad. Imaginemos momentos muy básicos sobre la comprensión de la información por parte de los usuarios.

OK – La dirección de la cancelación apoya el flujo de lectura normal y la estructura de la oración para la cultura occidental, donde hacemos una pregunta: “¿Estás de acuerdo conmigo, sí o no?”. La opción positiva viene primero, la negativa viene en segundo lugar. Además, suponiendo que los usuarios necesitan ‘OK’ mucho más frecuentemente que ‘Cancelar’, es mejor colocar esta opción primero para que los usuarios que accedan a los botones con teclado puedan acceder a su opción preferida con una tecla menos.

 

Por otro lado, Cancel – OK mejora el flujo lógico, porque el diálogo “termina” con su conclusión y el elemento final con el que interactúa es un botón de acción principal. La flecha verde muestra la dirección de escaneado Cualquiera de las opciones tiene buenos argumentos a su favor, y ninguna opción es probable que cause catástrofes de usabilidad.

 

Conclusión

El botón está destinado a dirigir a los usuarios a tomar la acción que desea que tomen. Ése es porqué el diseño del botón UX debe siempre estar sobre reconocimiento y claridad. Piense en el sitio o la aplicación como una conversación iniciada por un usuario ocupado. El botón desempeña un papel crucial en esta conversación.

 

“Selecciona una buena lista de iconos para tu próximo proyecto, esto siempre será una necesidad”.