Cuándo, dónde y cómo utilizar modales en el diseño de UX

Un modal en diseño UX

Los modales se utilizan en exceso en la web hoy en día. Al observar de cerca sus casos de uso, es fácil darse cuenta de que existen ideas erróneas sobre su aplicación adecuada.

Los modales son un patrón de UX totalmente desaconsejado. Por diseño, interrumpen el flujo de trabajo del usuario. Cuando un modal está activo en una página, el usuario no puede interactuar con la página fuera del modal y no puede regresar a su flujo de trabajo a menos que complete la tarea modal o la descarte. Si bien los modales pueden ser efectivos cuando se usan correctamente, deben usarse con prudencia para limitar la interrupción del flujo de trabajo.

Los modales captan la atención inmediata de los usuarios. Deben ser audaces y reservarse para casos que merezcan toda la atención de los usuarios.

Realicé una auditoría de UX del espacio no autenticado de un sitio web público y descubrí que el uso indebido de modales está particularmente extendido.

Utilicé el modelo de diseño de doble diamante para esta investigación. Utilizando este marco, pude identificar tanto el planteamiento del problema como su solución holística. El planteamiento del problema giró en torno al uso excesivo de modales en el sitio web auditado. La solución holística tenía muchas partes, incluido un marco de decisión de modales (MDF) que informaba a los diseñadores sobre 1. alternativas a los modales, 2. casos de uso en los que los modales eran apropiados.

Para mantener el anonimato del sitio web auditado, no he incluido capturas de pantalla de ese sitio web en esta historia. En cambio, mis colaboradores y yo elaboramos esquemas en Figma, principalmente en torno a conceptos de comercio electrónico y SaaS, para proporcionar contexto en torno a los puntos de esta historia. Usamos Lorem ipsum siempre que la copia no desempeñaba un papel en el punto que se planteaba.

Al pasar por la fase de divergencia del espacio del problema, recorrí el sitio web auditado e hice observaciones esporádicas.

Figura 1: El ícono de información (i) Los modales se utilizaron para ordenar las páginas cuando otros medios de divulgación progresiva, como los acordeones, eran más apropiados. Hubo un uso excesivo del ícono de información (i) en el sitio web auditado tanto para acceder a los modales y sugerencias emergentes. Al realizar una búsqueda en Google sobre piezas de contenido de algunos de los modales de los sitios, esos modales aparecieron en los resultados de búsqueda. A veces tenían una clasificación más alta en comparación con sus páginas principales. El sitio web auditado utilizó modales considerablemente más que cualquiera de sus principales competidores comerciales. Los modales en el sitio se utilizaron para ofrecer varios tipos de contenido, incluidos texto y video. Muchos modales en el sitio auditado tenían mucho contenido y se utilizaban en lugar de diseños de página completa. A menudo tenían barras de desplazamiento verticales. Cuando se les preguntó, el equipo de diseño informó que sus clientes tenían una tendencia a proporcionar contenido detallado y orientarlos a agruparlo en modales. Algunos modales en el sitio no seguían la anatomía estándar descrita en la literatura de UX. Esta anatomía se ilustra en la Figura 2.

Figura 2: La anatomía modal

Algunas violaciones fueron:

Cargar a los usuarios con contenido extenso en modales sin proporcionar títulos claros en los encabezados para poner esa información en contexto. Colocar CTA en algún lugar dentro del cuerpo de los modales en lugar de sus pies de página.

Espacio problemático: convergencia

Al reunir todas estas observaciones, convergí en el enunciado del problema: “Los modales iniciados por el usuario se estaban utilizando excesiva y mal en este sitio web”. En el momento de la investigación, se identificaron más de 1.700 modales iniciados por usuarios en el sitio web auditado.

También me di cuenta de que los modales en el sitio auditado diferían entre sí en términos de diseño visual y de contenido, sus propiedades SEO y detalles de implementación.

¿Por qué fue un problema el uso excesivo de modales iniciados por el usuario en un sitio?

Este problema tenía tres lados: UX, SEO y estrategia de contenido.

experiencia de usuario

Según las mejores prácticas de UX, los modales son deliberadamente disruptivos y deben usarse con moderación por estos motivos:

En comparación con el contenido de la página, los modales en el sitio auditado a menudo ocultaban detalles esenciales que necesitaban los usuarios para completar sus tareas. Un ejemplo es ocultar los detalles de los planes de suscripción en un modal que aparecía solo después de que los usuarios hacían clic en el ícono (i) que se muestra en el siguiente GIF. Esta mala práctica podría haber impactado negativamente en la conversión, especialmente cuando la información oculta era crítica para los procesos de toma de decisiones de los usuarios.

Figura 3: En esta página, se esperaba que los usuarios cambiaran al plan de suscripción que mejor se adaptara a sus necesidades mediante las CTA “Comenzar”. Sin embargo, los detalles de los planes estaban ocultos en un modal que no aparecería a menos que los usuarios hicieran clic en el ícono (i) junto a “Encuentre el mejor plan para usted”. En comparación con el contenido de la página, los usuarios necesitan un clic adicional para acceder al contenido. se ofrecen en modales y esto los ralentiza y podría afectar negativamente la conversión. El GIF de arriba muestra un ejemplo de esto. Los modales se representan como superposiciones, por lo que los usuarios no pueden ver fácilmente su contenido y la página principal al mismo tiempo. Esta limitación se vuelve especialmente problemática cuando se utilizan modales para proporcionar explicaciones adicionales sobre un término específico en la página. Por otro lado, las sugerencias emergentes permiten a los usuarios ver su contenido y la página principal al mismo tiempo, ofreciendo una mejor alternativa para este tipo de ayuda contextual. La Figura 4 es un ejemplo de uso indebido de modales para elaborar un acrónimo.

Figura 4: Si los usuarios necesitaban ayuda para comprender el acrónimo “CRM”, podían hacer clic en el icono (i) de la página. Esto abrió un modal que tenía la definición. El problema era que los usuarios no podían ver el contenido del modal y la página principal al mismo tiempo. Los usuarios no pueden ver el contenido presentado en dos modales en paralelo. Por ejemplo, los detalles de diferentes programas no deben incluirse dentro de los modales, ya que esto elimina la capacidad del usuario de ver múltiples opciones simultáneamente y compararlas. El siguiente GIF muestra un ejemplo de uso indebido de modales para este propósito.

Figura 5: En esta página, los detalles de cada programa se ofrecieron en un modal separado al que se podía acceder a través de “Más información”. Por lo tanto, un usuario no podría ver los detalles de varios programas al mismo tiempo y compararlos. Los modales por diseño no tienen URL independientes que se puedan compartir y a las que puedan acceder los usuarios. Por lo tanto, si un usuario encuentra útil la información de un modal y quiere compartirla con otra persona, debe proporcionar la URL de la página principal, así como instrucciones para acceder al modal desde esa página. La Figura 5 muestra un caso de uso en el que era necesario compartir información y definitivamente se prefería tener una forma más directa de compartir información. Otra limitación causada por no tener URL independientes para los modales es que no se pueden marcar como favoritos para facilitar el acceso en el futuro. Los clics no deseados fuera de los modales en la página principal o los clics incorrectos en sus botones de cierre podrían tener consecuencias no deseadas para los usuarios. Con los modales en el sitio auditado utilizados como contenedores para reproducir videos, como en la Figura 6, los usuarios podrían perder su lugar en el video y verse obligados a reproducirlo desde el principio si se producen estos clics involuntarios o erróneos mientras se reproduce el video. Por cierto, a diferencia de los vídeos, las imágenes son discretas. Por lo tanto, usar un modal para mostrar una versión ampliada de una imagen no impediría a los usuarios hacerlo de la misma manera. Con modales utilizados para mostrar información crítica a los usuarios, como números de pedido/solicitud después de haber completado formularios y enviados, como en la Figura 7, estos clics no intencionados o incorrectos podrían significar que los usuarios pierdan acceso a información crítica.

Figura 6: Cuando los usuarios hacían clic en el botón de reproducción a la izquierda del enlace del video en la página principal, se abría un modal como contenedor para reproducir ese video. Los usuarios habrían tenido que empezar el vídeo de nuevo si accidentalmente hacían clic fuera del modal mientras se reproducía.

Figura 7: A los usuarios que completaron y enviaron el formulario de consulta se les presentó un número único en un modal para fines de seguimiento. Podrían cerrar accidentalmente el modal al hacer clic mal y perder el acceso a información importante de esa manera. El uso frecuente de modales puede hacer que los usuarios los descarten intencionalmente sin prestar mucha atención; esto se conoce como “fatiga modal”. Esto podría ser especialmente problemático en casos como el que se muestra en la Figura 7, cuando partes importantes de información se presentan en modales.

SEO

Las propiedades SEO de los modales en el sitio auditado se establecieron de dos maneras, las cuales fueron polémicas:

Modales no buscables que no tenían índice y/o no seguimiento como propiedades SEO: Cuando las propiedades SEO de los modales se configuraban de esta manera, su contenido no contribuía a la clasificación SEO del sitio.Modales buscables: Cuando las propiedades SEO de los modales se configuraban de esta manera, el tráfico de la búsqueda de Google se dirigía a páginas sin marca, sin salida y fuera de contexto. Estas páginas se consideraban sin marca ya que, a diferencia de los diseños de página completa, no tenían encabezados ni pies de página con la marca del sitio, lo que significaba que los usuarios no tenían forma de navegar desde ellas a otros en el sitio. Además, la ausencia de CTA en la mayoría de estos modales los convirtió en un callejón sin salida, ya que los usuarios no tenían otra acción que tomar.
Además, al ofrecer a los usuarios acceso directo a estos modales iniciados por el usuario en SERP, no tendrían el contexto ofrecido en las páginas principales de los modales y se perderían el viaje que tuvieron que realizar en el sitio para llegar a ellos. En otras palabras, estos modales fueron diseñados para ser parte de un flujo y no tenía sentido que los usuarios accedieran a ellos directamente. Un ejemplo fue un modal que apareció en SERP cuando hice una búsqueda de marca en Google con el nombre de uno de los formularios del sitio. El contenido de este modal reconoció que se recibió la solicitud comercial del usuario y agradeció por enviarla. También mencionó cómo la empresa podría responder a la solicitud recibida. Este ejemplo demostró claramente el problema. Los modales iniciados por el usuario deben mostrarse a los usuarios después de haber seguido un par de pasos y parecen aleatorios cuando se accede a ellos directamente en SERP.
Estos modales aparecieron en SERP porque fueron desarrollados para ser páginas independientes con sus propias URL en el backend y sus propiedades SEO se configuraron de manera que se pudieran buscar.
Lo que es peor es que en muchos casos, las páginas principales de estos modales y los procesos de negocios que solían respaldar fueron desmantelados hace mucho tiempo y debido a que estos modales eran páginas independientes con sus propias URL en el backend, hubo un descuido al garantizar que también fueron eliminados. Esto significaba que los usuarios eran dirigidos a páginas obsoletas a través de SERP.

estrategia de contenido

Desde una perspectiva de estrategia de contenido, pensar en los modales como cofres para ocultar contenido puede tener consecuencias no deseadas.

Se estaban utilizando modales en el sitio auditado para replicar contenido que existía en otras partes del sitio. Esto se volvió problemático desde una perspectiva de mantenimiento, especialmente cuando contenían lógica de negocios, como requisitos de elegibilidad, que cambiaban con el tiempo y debían actualizarse en varios lugares. El siguiente GIF muestra un ejemplo de esto.

Figura 8: En esta página, los requisitos de elegibilidad para la opción de tarifa de $0 se enumeraron en una modalidad accesible a través del ícono (i) al lado de “requisitos” en la página principal. Estos requisitos cambian con el tiempo y deben actualizarse en todos los modos del sitio después de cada cambio. Esta actualización consumía mucho tiempo y era propensa a errores. Dado que los modales podían adaptarse a contenido extenso, los diseñadores del sitio auditado generalmente estaban menos inclinados a considerar recortar el contenido y usar un lenguaje conciso y más fácil de usar si fueran…