Los cuadros de diálogo son un elemento eficaz de la interfaz de usuario cuando se diseñan y utilizan correctamente. Pueden ayudar a sus usuarios a alcanzar sus objetivos de forma más rápida y sencilla. Pero los diálogos pueden frustrarlos cuando se hacen mal. Saber diseñar diálogos le permitirá usarlos de una manera que no moleste a sus usuarios.

¿Qué es Dialogo? Un diálogo es una superposición que requiere que el usuario interactúe con él, y es diseñado para obtener una respuesta del usuario. Los cuadros de diálogo informan a los usuarios acerca de la información crítica, requieren que los usuarios tomen decisiones o involucren múltiples tareas. Dentro de las aplicaciones, en la web e incluso en los diálogos móviles se utilizan cada vez más para dirigir la atención del usuario a una tarea específica, sin alejarlos de la pantalla actual.
Ahora veamos las mejores prácticas de diseño de cuadros de diálogo y casos de uso para ellos.

 

1. Reducir la interrupción

Utilice los diálogos con moderación porque son interruptivos. Su aparición repentina obliga a los usuarios a detener su tarea actual y centrarse en el contenido del diálogo. Los usuarios tienen que ocuparse de un diálogo antes de continuar y ya no pueden acceder a la página siguiente. A veces esto es una buena cosa, como cuando los usuarios deben confirmar una acción importante, pero la mayoría del tiempo es innecesario y a menudo es muy molesto.
Requerimiento de reconocimiento Es más lógico usar un diálogo en situaciones en las que se necesita que el usuario interactúe antes de continuar, o cuando el costo de un error podría ser muy alto.

Requerir reconocimiento, que informe al usuario sobre una situación. No abran de repente los diálogos De repente abrir un diálogo sin que el usuario haya hecho nada es una muy mala idea. Muchos sitios bombardean a los visitantes con cuadros de suscripción. Dichos diálogos generan innumerables problemas para los usuarios sin teclados. Un diálogo siempre debe abrirse cuando el usuario haga algo. Ese algo puede estar haciendo clic en un botón, siguiendo un enlace o seleccionando una opción.
Para tener en cuenta:

– No todas las opciones, ajustes o detalles justifican la interrupción.

– Las alternativas a los diálogos son los menús o la expansión en línea, que mantienen el contexto actual.

– Haga que el diálogo aparezca predecible para el usuario.

 

  1. Juego entre el diálogo y el mundo real

El dialogo debe hablar el idioma de los usuarios (usar palabras, frases y conceptos familiares para el usuario), en lugar de términos especiales del sistema.
Pregunta clara y opciones: Debe utilizar una pregunta clara o una declaración con una explicación en el área de contenido, ¿como “Borrar su almacenamiento” o “Eliminar su cuenta?” En general, debe evitar las disculpas, la ambigüedad o las preguntas, como “¡Advertencia!” O “¿Estás seguro?”
El diálogo izquierdo plantea una pregunta ambigua y su alcance de impacto no está claro. El diálogo derecho plantea una pregunta específica, describe el impacto para el usuario y proporciona acciones claras. Evite presentar a los usuarios opciones ambiguas o poco claras. Sólo debe utilizar opciones claras. En la mayoría de los casos los usuarios deben ser capaces de entender las opciones basadas en el título y solo el texto del botón.

 

Mal ejemplo: El texto de la acción despectiva “No” responde a la pregunta, pero no sugiere lo que sucederá después. Buen ejemplo: El texto de acción afirmativa “Descartar” indica claramente el resultado de la decisión.

 

Proporcionar información importante: Es importante que un diálogo no oscurezca la información que podría ser útil para los usuarios. Por ejemplo, un cuadro de diálogo pidiendo a los usuarios que confirmen la eliminación de algunos elementos, en el que debe enumerar los elementos que se están eliminando. Este diálogo expone concisamente su impacto. También evite usar una acción de “Más información” para acceder a la documentación de ayuda; En línea de expansión en el diálogo debe ser utilizado en su lugar. Si se necesita más información, hágalo antes de entrar en el diálogo.

 

Ofrezca información informativa: Cuando haya terminado un proceso, recuerde mostrar un mensaje de notificación (o retroalimentación visual). Que el usuario sepa que ella ha hecho todo lo que se necesita.

 

3. Luchar por el minimalismo Usted no debe tratar de meter demasiado en un diálogo. Manténgalo limpio y simple. Pero recuerde que lo minimalista no significa ser limitado. Toda la información debe ser valiosa y relevante.

 

Número de Elementos y Opción

Los cuadros de diálogo nunca deben aparecer parcialmente en la pantalla. No debería utilizar un diálogo que contenga contenido de desplazamiento.
Ejemplo defectuoso: el diálogo de procesamiento de pagos de Barclays Bank tiene muchas opciones y elementos, una parte de esas opciones sólo está disponible con el desplazamiento (especialmente para dispositivos móviles que normalmente tienen propiedades de pantalla relativamente pequeñas).

 

Número de acciones:

Los cuadros de diálogo no deben incluir más de dos acciones. Una tercera acción, como “Más información”, se aleja del diálogo, dejando la tarea inacabada. La acción “Más información” se aleja de este diálogo, dejándolo en un estado indeterminado.

 

No incluir varios pasos en el cuadro de diálogo: Romper una tarea compleja en pasos múltiples es una gran idea, pero también es generalmente una señal de que algo es demasiado complejo para pedir a los usuarios que lo completen dentro de los confines de un diálogo.

 

Si una interacción es lo suficientemente compleja como para requerir múltiples pasos, entonces es lo suficientemente compleja como para justificar su propia página.

 

A tener en cuenta:

– Si usted encuentra que está tratando de meter muchos elementos en un diálogo, entonces generalmente significa que un diálogo no es la mejor solución de diseño. – Simplifique los diálogos eliminando elementos innecesarios o contenido que no admita tareas de usuario. – Intente evitar diálogos con varios pasos.

 

4. Seleccione Tipo de diálogo adecuado

Los diálogos vienen en dos tipos principales. El primer tipo son cuadros de diálogo de búsqueda de atención que obligan al usuario a interactuar con ellos antes de continuar. El diálogo modal usualmente se usa para procesos discretos de bloqueo donde: – El contexto circundante no es necesario para decidir qué acciones tomar.

– Requiere una acción explícita de “aceptar” o “cancelar” para cerrarla. No cierra cuando se hace clic en el área fuera de ella.

– No es aceptable que el progreso del usuario se deje en un estado parcialmente terminado. El segundo tipo es el diálogo no modal que permite a los usuarios hacer clic o tocar fuera de ellos para descartarlos.

Debe utilizar los diálogos modales (el primer tipo) sólo para interacciones muy importantes (por ejemplo, eliminar cuenta, aceptar los términos y condiciones).

 

Cuadro de diálogo modal:

 

El usuario debe confirmar una acción de eliminación escribiendo efectivamente borrar.

 

También los diálogos del sistema móvil (nativos) son modales y normalmente tienen los siguientes elementos básicos: contenido, acciones y título.

 

5. Consistencia visual

Al abrir un diálogo, es importante que la página que hay detrás se oscurezca ligeramente. Esto hace dos trabajos. En primer lugar, llama la atención sobre la superposición y, en segundo lugar, permite al usuario saber que la página no está activa actualmente.

 

Opción Cerrar Cerrar

Debe haber una opción cercana para un diálogo en la esquina superior derecha. Muchos de los diálogos tienen un botón ‘x’ en la esquina de la ventana que usan los usuarios para salir de la ventana. Sin embargo, este botón ‘x’ no es una ruta de escape fácil para el usuario medio. Por lo general, se necesita más tiempo y esfuerzo para hacer clic en la “x” porque es más pequeño en tamaño y el usuario tiene que detectar y hacer clic (toque) en ella. Es una buena idea permitir a los usuarios salir de la ventana no modal cuando hacen clic en el área de fondo fuera de ella. Evitar los diálogos que abren cuadros de diálogo Los diálogos deben evitar el lanzamiento de diálogos simples adicionales, ya que aumentan la profundidad percibida del sitio o de la aplicación, y agregan complejidad visual.

 

Para tener en cuenta: – Permita que los usuarios hagan clic (o toque) para cerrar el diálogo en la mayoría de los casos (excepto cuadros de diálogo modales). – Los diálogos deben evitar el lanzamiento de diálogos simples adicionales.

 

Conclusión

Espero que estas mejores prácticas sean interesantes y que sean útiles durante la creación de prototipos. Recuerde, la experiencia del usuario es sobre los seres humanos, no sobre la tecnología. Es bastante fácil averiguar qué es lo mejor para sus usuarios y sus tareas: imitar los diálogos principales y probarlos con un puñado de usuarios.

 

“Relucir tus iconos, hará que tu ilustración se vea más ilustrativa”.