Las ventanas modales se crearon inicialmente como alertas de eventos importantes o esenciales que se mostraban dentro de las interfaces de usuario. A medida que el mundo del diseño avanzaba cada vez más, las empresas exploraron las múltiples formas de recopilar los datos que necesitaban para ampliar su audiencia. Una de esas prácticas incluía estos prácticos cuadros emergentes (muchos de los cuales bloquean por completo el contenido de la página principal), de los que posteriormente se ha abusado y se ha hecho un mal uso, doblegados a los deseos de diseñadores, partes interesadas y profesionales del marketing, y tristemente, a costa de una buena UX.
He aquí cómo.
A nadie le gusta que le interrumpan, pero a veces esa interrupción merece las molestias.
¿Sus pantallas modales son interrupciones necesarias o gratuitas?
Por ejemplo, si estás manteniendo una conversación importante y alguien te interrumpe para decirte que alguien está entrando en tu coche o que tu casa se está incendiando, le darías las gracias profusamente y te pondrías manos a la obra para resolver la emergencia.
Sin embargo, si alguien interrumpiera esa misma conversación importante para preguntarle por el tiempo o su color favorito, probablemente se sentiría bastante molesto por una intromisión tan innecesaria.
Lo mismo ocurre con diálogos modales (o diálogos). Cuando se usan correctamente, salvan vidas (bueno, benefician al usuario, al menos); cuando se abusa de ellos, son molestos, inhiben el flujo de trabajo y perjudican la experiencia del usuario.
En el artículo de hoy, explicaremos qué es una ventana modal y por qué es importante que su uso muestre respeto a tus usuarios y visitantes para mantener las mejores prácticas ideales de UX.
Modalidad y UX
En cuanto a la modalidad, los diseñadores de UX deben mostrar siempre un especial respeto por el flujo de trabajo del usuario e interrumpirlo sólo con la información esencial.
Como el Grupo Nielsen Norman estados:
Los diálogos modales interrumpen al usuario y exigen una acción. Son apropiados cuando es necesario dirigir la atención del usuario hacia información importante.
Lo que determina la "información importante" puede ser, en el mejor de los casos, polémico. Sin duda, para que la experiencia del usuario sea óptima, esa decisión debe estar en sus manos. Si no puede respetar el concepto básico o no está seguro de qué esencial significa para sus usuarios, unas pruebas sencillas pueden proporcionar los datos necesarios para impulsar el uso adecuado de las ventanas modales.
¿Qué es la modalidad?
Una ventana modal aparece dentro o encima de la pantalla principal, dejando inactivos todos los elementos funcionales de la página. El sitio diálogo modal está diseñado para alertar a los usuarios de un evento específico, lo que requiere la interacción del usuario para cerrar la ventana antes de que puedan seguir interactuando con el contenido o el software como antes.
Modalidad en acción
Es bastante sencillo ver lo importante que es un guardar diálogo es la ventana modal. Cuando aparece este cuadro de diálogo modal, te pregunta si quieres guardar los cambios realizados en un documento antes de cerrarlo. Todos hemos sido víctimas de la pérdida de trabajo por no guardar los documentos, así que esta opción se convierte en una ayuda bienvenida para cualquiera que cree documentos importantes. Con opciones para guardar, cancelar o no guardar antes de continuar, la decisión puede detener las operaciones, pero merece la pena. Cualquiera que haya experimentado la frustración de perder trabajo se alegrará de tener su trabajo a salvo gracias a esta ventana modal iniciada por el sistema.
En el otro extremo de la escala, una ventana emergente que aparece a los pocos segundos de visitar una nueva página web solicitando que te unas a su lista de correo o que les permitas acosarte con notificaciones antes de que puedas llegar al contenido que quieres leer no es tan esencial o importante para el usuario. Es un inconveniente leve, pero no por ello deja de ser un inconveniente que, en diseño UX, no merece interrumpir el flujo de trabajo del usuario.
Como opción adicional para recopilar nuevos contactos, se puede entender por qué a los profesionales del marketing les encanta esta acción, pero en lo que respecta a la UX, hay fuertes argumentos sobre el uso correcto de dicho componente y debate en torno a cómo se abusa de la función.
Tipos de modalidades
Diálogos modales
Los siguientes ejemplos muestran cómo se utilizan las ventanas modales en los entornos digitales actuales:
- Pop-ups y lightboxes que llenan toda la pantalla
- Alertas y notificaciones (incluido el cuadro de diálogo de guardar, que salva vidas, y otras pantallas modales que evitan errores del usuario).
- Advertencias e instrucciones en el software y en el navegador
- Opciones de acción y flujos de trabajo complejos
- Recopilación de datos de entrada necesarios, como el inicio de sesión en cuentas y métodos de pago, o concesión de acceso a cámaras de teléfonos móviles, álbumes de fotos, etc.
- Algunos tooltips
- Confirmación de una acción, como el envío correcto de un formulario
- Asistentes de incorporación o alertas de nuevas funciones al abrir una aplicación o un sitio web
- Solicitudes de marketing, como suscripciones a boletines, cuentas y descuentos/ofertas.
Diálogos sin modelo
Como investigadores de UX, queremos fomentar la participación de los usuarios, pero sin afectar a la fluidez ni al disfrute de nuestros productos.
Las alternativas a las ventanas modales son opciones que pueden hacer el mismo trabajo sin ser tan intrusivas y sin bloquear el contenido de la página principal. Conocidas como ventanas de diálogo sin modelo o ventanas no modalesEstas opciones no ocupan toda la pantalla ni la interfaz de usuario y suelen aparecer en la misma página. Dejan al usuario la libertad de continuar con lo que está haciendo mientras ignoran cualquier solicitud adicional o la dejan para más tarde.
En dispositivos móviles, cuando el espacio es limitado, una pantalla modal y las ventanas no modales pueden tener un aspecto muy similar, ya que ambas ocuparán la pantalla para mostrar su mensaje. Sin embargo, la principal diferencia radica en la barra de navegación y la cabecera, que permanecen visibles en las ventanas no modales. Dentro de las pantallas modales, éstas tienen su propio encabezado o pie de página con opciones para cancelar o avanzar proporcionando la entrada solicitada o requerida; en las alternativas de ventanas no modales, la barra de navegación permanece intacta, permitiendo muchas de las mismas opciones que antes.
¿Qué aspecto tiene una ventana no modal en comparación con una pantalla modal? He aquí algunos ejemplos de las que probablemente vea y utilice a diario:
- Cuadros de diálogo dentro de la página, como cuadros de chat y funciones de búsqueda
- Advertencias en línea, como entradas incorrectas en campos de formularios
- Colocar información en una página separada utilizando el botón de enlace externo
- Entradas en línea, encuestas y cuadros de comentarios
- Pases de diapositivas y reproductores de vídeo en línea
- Notificaciones de cookies en una barra emergente en la parte superior o inferior de la página
- Contenido visible en la página
- Menús de pestañas
- Acordeones
- Crear mensaje de correo electrónico emergente
- Cajas de búsqueda
- Diálogos emergentes en la barra lateral
Ventajas de utilizar ventanas modales
- Atención al usuario ? Las ventanas modales mantienen al usuario centrado en lo que el diseñador de la página considera más importante, alertándole de eventos críticos relacionados con el contenido o el funcionamiento.
- Finalización de tareas ? El diseñador incluye una ventana modal que solicita información para completar un proceso, como el inicio de sesión en una cuenta, sin la cual el flujo de trabajo o el viaje digital no pueden continuar.
- Prevención de errores ? De nuevo, una importante pantalla modal que evita errores críticos al exigir la atención del usuario para tomar una decisión esencial.
- Escenas modales que dividen los flujos de trabajo complejos en pasos manejables ? Por ejemplo, en autoedición, las ventanas modales presentan al usuario un conjunto contenido de opciones para aplicar formato, filtros u otros ajustes.
Retos e inconvenientes
- Frustración del usuario ? Las ventanas emergentes innecesarias interrumpen el flujo del usuario, a menudo haciéndole perder la concentración o su lugar en un documento o distrayéndole por completo de lo que estaba haciendo.
- Interrupciones innecesarias ? Añadir una tarea irrelevante a la operación actual del usuario es desagradable y distrae.
- Bloquean el acceso a los contenidos ? Deshabilitar la página principal podría impedir que el usuario accediera a la información necesaria para completar la solicitud establecida en la ventana modal.
- Accesibilidad ? La accesibilidad es un aspecto clave en las ventanas modales. ¿Puede todo el mundo navegar por la interrupción, participar en ella o descartarla, sea cual sea su situación personal?
Buenas prácticas para la aplicación de las modalidades
Nos gustaría sugerir que las mejores prácticas deberían ser de sentido común; sin embargo, somos conscientes de lo mucho que les gusta a las partes interesadas y a los profesionales del marketing ávidos de objetivos captar la atención de los usuarios con sus últimas promociones o ejercicios de recopilación de datos.
Garantizar que las pantallas modales funcionen con valores UX saludables:
- Tener un objetivo claro y crucial ? Dada la distracción que generan las vistas modales a pantalla completa, asegúrate de no interrumpir innecesariamente la concentración o el contacto de tus usuarios con la pantalla principal.
- Control del usuario ? Si debe utilizar una vista modal, asegúrese de que los usuarios puedan descartarla fácilmente. Dar a los usuarios el control sobre la forma de consumir contenidos y proporcionar información debe ser una prioridad en el diseño de la experiencia del usuario.
- Accesibilidad ? Asegúrese de que cada tarea modal proporciona el etiquetado, el acceso y el funcionamiento necesarios para los usuarios de teclado y los lectores de pantalla. También es crucial guardar el último estado activo del usuario para que pueda retomarlo donde lo dejó, una vez solucionados dichos modales.
- Pruebas y comentarios ? Dada la importancia de la iteración en las pruebas de usuario y la recopilación de opiniones mediante la investigación periódica de UX, no deberíamos tener que decirle lo importante que es esto. Nuestros usuarios deben estar en el centro de todos los recorridos de usuario.
Conclusión
Cuando se utilizan correctamente, las ventanas modales pueden ser increíblemente positivas y eficaces. Desempeñan un papel vital en paquetes de software, SaaS, sitios web y aplicaciones. Sin embargo, como ya hemos comentado, el uso excesivo de los modales puede tener serios inconvenientes en la experiencia de usuario cuando se utilizan sin respetar a nuestros usuarios y visitantes del sitio web.
Para garantizar una experiencia de diseño de IU positiva, debemos comprender qué es lo suficientemente importante como para limitar el acceso al contenido hasta que el usuario interactúe explícitamente con el diálogo modal. Aunque podemos consultar varios marcos de decisión para considerar si una ventana modal es realmente necesaria, quizá la mejor forma de ofrecer lo que el usuario quiere, como en toda buena investigación de UX, sea preguntarle.
Nuestros expertos en investigación de usuarios están a su disposición para ayudarle a acercarse a sus clientes. Si desea concertar una llamada sin compromiso, póngase en contacto con nosotros enviando un correo electrónico a hello@ux247.com o indíquenos sus necesidades a través del siguiente formulario.
