admin
Cualquier experiencia en un sitio web es como un mosaico de decisiones y elementos de diseño más pequeños. Aquí hay uno que probablemente haya encontrado: está navegando por un sitio y hace clic en algún botón. Inmediatamente, la página se desvanece y aparece una ventana emergente en la pantalla que muestra algún mensaje o solicita una acción, como registrarse en una lista de correo electrónico o descargar una oferta de contenido.
Tal vez estaba feliz de ver esta ventana emergente, o tal vez estaba sorprendido y confundido. Pero no importa cómo haya reaccionado, esta ventana definitivamente llamó su atención. En términos de diseño web, este tipo de pantalla se denomina modal.
¿Qué es un modal?
Un modal (también llamado ventana modal o caja de luz) es un elemento de página web que se muestra delante y desactiva el resto del contenido de la página. Para volver al contenido principal, el usuario debe interactuar con el modal completando una acción o cerrándola. Los modales a menudo se usan para dirigir la atención de los usuarios a una acción o información importante en un sitio web o aplicación.
El propósito de los modales se puede resumir en una palabra: enfoque. Si necesita que los visitantes se concentren en algo simple, una ventana modal es uno de los medios más efectivos para hacerlo. Los usuarios deben cerrar el modal o completar una acción específica dentro de él (por ejemplo, leer un mensaje y hacer clic en «Aceptar», completar un formulario, etc.).
He aquí un ejemplo simple de la Neoyorquino. Este modal nos pide que nos suscribamos a su boletín.
Los modales se están polarizando entre diseñadores y usuarios por igual. Muchos encuentran valor en su capacidad para llamar rápidamente la atención sobre algo esencial, mientras que otros los consideran una interrupción no deseada de la experiencia del usuario.
En la práctica, todo depende de si el modal está bien diseñado y tiene un propósito. Cuando se hace correctamente, puede ser una técnica útil tanto para sus usuarios como para sus números: según un estudio reciente de casi 2 mil millones de ventanas emergentes modalesel 10 % de las empresas con mejor desempeño convirtieron a una tasa notable del 9,28 %.
Beneficios de los modales
Además del enfoque de canalización, los modales presentan beneficios adicionales sobre otros elementos de visualización.
Sencillez
Los modales mantienen las cosas simples. Todo permanece dentro de una pestaña, lo que ayuda a los visitantes a mantenerse conectados con lo que estaban haciendo antes de que apareciera el modal.
Visibilidad
Dado que los modales aparecen dentro de la pestaña activa del usuario, puede estar seguro de que se verá. Si, en cambio, el aviso apareciera en una nueva ventana, el usuario podría perderlo o cerrar instintivamente la nueva ventana después de haber sido condicionado por molestos anuncios emergentes.
Flexibilidad
Los modales también ayudan a preservar el espacio de la página al mostrar los medios destacados, como imágenes o videos, en una caja de luz.
Modal vs Sin modelo
Llamamos a este tipo de elemento «modal» porque introduce un «modo» secundario, o interfaz de usuario, en la página web en la que aparece. Una ventana modal desactiva la mayor parte de la página y requiere que los usuarios se concentren en una ventana específica antes de continuar. Los diseñadores web llaman a la ventana modal la ventana «secundaria» y al resto de la página la ventana «principal».
Lo opuesto a un elemento modal es un elemento «sin modo», uno que no deshabilita la ventana principal. Los usuarios siempre pueden interactuar con el contenido principal mientras un elemento sin modelo está abierto. Los ejemplos de elementos sin modelo incluyen un menú desplegable, un panel lateral o un elemento emergente que aún permite a los usuarios hacer clic en otros elementos de la página.
Modal vs emergente
A pesar de que los modales y las ventanas emergentes tienen una funcionalidad muy similar, la diferencia entre los dos se reduce a la cantidad de atención que requieren: los modales no le permiten interactuar con otros elementos en la página, lo que requiere una acción inmediata por parte del usuario. Por el contrario, si el usuario elige no interactuar con una ventana emergente, puede continuar interactuando con el sitio mientras la ventana emergente permanece en la pantalla hasta que el usuario interactúe con ella. Esto se debe a que las ventanas emergentes no tienen modelo por diseño.
¿Cuándo se usan los modales en el diseño web?
Las ventanas modales son efectivas cada vez que necesita que los usuarios vean o hagan algo específico. Por lo general (pero no siempre) aparecen después de algún evento desencadenante, como un clic de botón, un evento de desplazamiento o algún intento de salida. Los usos más comunes de los modales en el diseño web incluyen advertencias, alertas, confirmaciones, formularios, visualizaciones multimedia y procesos de varios pasos.
Advertencias, alertas y confirmaciones
Para esos momentos en que un usuario De Verdad debería ver algo, las ventanas modales son excelentes para dirigir la atención. Un modal puede contener una alerta sobre un evento o error significativo, una advertencia sobre las consecuencias de alguna acción o la confirmación de un proceso completado. Por ejemplo:
Utilice modales solo para los mensajes más críticos. Por ejemplo, los errores que impiden activamente que se complete una acción deseada (p. ej., «No pudimos completar su solicitud debido a un error del servidor. Actualice la página y vuelva a intentarlo») y las acciones que no se pueden revertir (p. ej., «Están ¿Estás seguro de que deseas continuar?”) son buenas razones para un modal. Una alerta de «política de cookies», no tanto: guarde esto para una ventana o barra de notificación sin modelo.
formularios
Si un proceso en su sitio web requiere información enviada por el usuario, puede colocar un formulario dentro de una ventana modal. Verá esto a menudo como una alternativa a una página dedicada para iniciar sesión/registrarse, o una que promueva un boletín informativo por correo electrónico, una oferta de contenido o un código de descuento.
Muchos sitios web, como el globo de bostonrestringen su contenido solo a los miembros, y esto se puede señalar a los no miembros a través de un modal:
Por lo general, el desencadenante de este tipo de modal es un clic de CTA u otro clic de botón, pero también es común que los sitios arrojen un modal después de un evento de desplazamiento. Depende de usted si considera que este desencadenante distrae demasiado, pero sepa que esto molestará a algunos visitantes si lo consideran irrelevante.
Pantallas multimedia
Los medios a menudo respaldan el contenido principal de una página web y marcan la pauta para la experiencia de navegación. Sin embargo, si una galería de imágenes o un video sirven como punto focal en su sitio, una ventana modal les permite a los visitantes verlo de forma aislada sin necesidad de abrirlo en otra página.
Por ejemplo, un usuario puede hacer clic en una miniatura en la página principal, lo que abre un modal para una galería de imágenes relacionadas, fácilmente navegable con botones de flecha en ambos lados de la ventana. Esta implementación es efectiva para exhibiciones de productos y portafolios en particular.
Una miniatura también puede abrir un modal de video, que muestra el video como su propio pequeño teatro y luego se cierra una vez que se completa el video. proveedor de servicios de Internet estrellado La página de información del sitio web enumera algunos videos que se presentan de esta manera:
Un beneficio adicional de usar modales para mostrar medios es la eficiencia del espacio. Los medios tienden a ocupar un espacio de página valioso, pero hacer que una galería o un reproductor de video sea accesible con una miniatura más pequeña ahorra espacio valioso.
Procesos de varios pasos
Para acciones más largas y que consumen más energía en su sitio web (crear un perfil de usuario, suscribirse a un servicio o completar la configuración de una herramienta), considere separar cada paso en su propia ventana modal para que la experiencia se sienta más manejable. Esta técnica es común en las aplicaciones de software en forma de «asistente» o «guía de instalación». El progreso debe mostrarse dentro de la ventana como una barra, una secuencia de pequeños puntos, números o algún otro indicador.
Pinterest lo hace bien con su proceso de creación de cuenta. Observe el indicador de progreso en la parte superior.
Prácticas recomendadas de la ventana modal
- Use modales intencionalmente y con poca frecuencia.
- Desactivar todos los elementos de fondo.
- Escriba instrucciones claras y texto de botón.
- Dar a los usuarios una salida.
- Dimensione su ventana modal apropiadamente.
- Introduce y cierra el modal con un desvanecimiento.
- Limitar modales en dispositivos móviles.
- Diseñe sus modales para la accesibilidad.
Los modales son tan comunes en la web que sus visitantes pueden distinguir un modal útil de uno sin sentido o mal diseñado. Asegúrese de que sus modales sean de alta calidad siguiendo estas ocho prácticas recomendadas para el diseño de ventanas modales:
1. Use modales intencionalmente y con poca frecuencia.
Los modales son disruptivos por diseño. Tienden a aparecer inesperadamente en el flujo de la experiencia de navegación y siempre desvían el foco de su ventana principal. Este es un alto costo para el usuario, por lo que los modales siempre deben ayudar al usuario en sus objetivos, no obstruirlos.
Para evitar que los visitantes se molesten con su sitio, solo implemente ventanas modales cuando sea absolutamente necesario, y solo si ayudan al usuario con su objetivo principal. Cualquier cosa menos, y los usuarios pueden olvidar su objetivo original y frustrarse.
Estas son algunas de las mejores prácticas para los usos modales comunes:
- Advertencias y Alertas – Solo los errores cruciales y las acciones permanentes deben generar una visualización modal.
- formularios – Apéguese a aquellos que recopilan la información requerida o al menos mejoran significativamente su experiencia en su sitio. Y todos los pasos en un proceso modal de varios pasos deben ser muy relevantes para el objetivo final de los usuarios.
- Otros elementos – Para cualquier elemento interactivo o paso que no califique, use una pantalla sin modelo en su lugar.
2. Desactivar todos los elementos de fondo.
Para atraer toda la atención de manera efectiva al modal, todos los elementos de fondo deben eliminarse visual y funcionalmente detrás de la ventana secundaria. Puedes hacer esto con:
- Efectos visuales – Los modales suelen difuminar y/o oscurecer la mayoría o todos los elementos principales. Esto da la impresión de que la ventana modal se encuentra sobre el otro contenido. algunas sombras paralelas alrededor del modal también pueden crear este efecto.
- Desactivación de la funcionalidad – Asegúrese de que no se pueda hacer clic en ningún elemento de la página fuera de la ventana modal o seleccionarlo a través del teclado, y considere deshabilitar también el desplazamiento. Cualquier funcionalidad adicional de la página principal enviará señales contradictorias sobre el propósito del modal.
Otra nota importante: dado que un modal hace que el resto del contenido de la página sea inaccesible hasta que se cierre, toda la información que los usuarios necesitan para completar el modal debe proporcionarse dentro de la ventana modal misma. Los usuarios no deberían necesitar volver a consultar el contenido principal para abordar el modal: cualquier tarea que requiera este cambio es más adecuada para una visualización sin modo.
3. Escriba instrucciones claras y texto de botón.
Para ayudar a los usuarios a adaptarse rápidamente a la pantalla modal y entender por qué está allí, haga que todo el texto sea lo más breve y claro posible. Todos los modales deben incluir un texto de título que indique la intención del modal o la acción requerida. Escriba el texto de su botón y otras indicaciones de acción para que también sea conciso e intuitivo.
