Habilita el acceso rápido: Patrones de UX del modo de IU inmediato

Eiji Kitamura

Publicado: 30 de septiembre de 2026, última actualización: 7 de octubre de 2026

Descripción general

El modo de IU inmediato resuelve la pérdida de contexto y el abandono de usuarios que se producen al navegar a una página de acceso dedicada. Permite acceder rápidamente, lo que permite a los usuarios completar el acceso con llaves de acceso o contraseñas guardadas directamente en la página que están viendo o en la que están trabajando sin salir de su contexto.

A diferencia de la IU condicional, que muestra sugerencias de autocompletar cuando un usuario enfoca un campo de entrada de texto, el modo de IU inmediata invoca de inmediato el diálogo de autenticación del navegador en respuesta a un clic en un botón o un vínculo (por el momento, uiMode solo acepta "immediate", pero esto puede cambiar en el futuro).

Tres características principales hacen que el modo de IU inmediata sea excepcionalmente eficaz para los accesos rápidos:

  • Se omiten los códigos QR multidispositivo: Si existen llaves de acceso o contraseñas guardadas disponibles de inmediato en el dispositivo, el navegador muestra el diálogo de autenticación de inmediato. Si no existe ninguno, sale de inmediato sin mostrar una pantalla de código QR multidispositivo para smartphones. Esto permite que tu sitio realice una transición natural a su navegación de resguardo normal (por ejemplo, que se mueva a la página de acceso).
  • IU intuitiva centrada en la selección de cuentas: En lugar de mostrar una lista de tipos mixtos de credenciales de forma individual, oculta las diferencias subyacentes entre las llaves de acceso y las contraseñas para presentar un selector de cuentas intuitivo que se centra en la cuenta con la que el usuario desea acceder.
  • Mejora progresiva segura: Si bien solo se admite en los navegadores Google Chrome y Chromium, el uso de la detección de funciones te permite ofrecer inicios de sesión rápidos a los usuarios en entornos compatibles sin interrumpir los flujos de acceso existentes para los usuarios en navegadores no compatibles (como Safari o Firefox) o en modo Incógnito.

Para obtener detalles sobre cómo funciona la API y cómo implementar la detección de funciones, consulta Modo de IU inmediato para inicios de sesión. En este documento, exploramos los patrones de UX recomendados que aumentan las conversiones con el modo de IU inmediata, junto con los antipatrones de diseño que se deben evitar.

El lugar más eficaz para usar el modo de IU inmediata es la interceptación justo antes de la navegación de páginas. Cada vez que un usuario no autenticado (o con sesión vencida) hace clic en un vínculo o botón de acción que normalmente lo llevaría a una página de acceso, invocar el modo de IU inmediata en ese momento exacto crea una UX fluida que nunca interrumpe su flujo de trabajo.

La mayoría de los sitios web colocan un vínculo "Acceder" en el encabezado global en la parte superior de la pantalla que navega a la página de acceso dedicada. Cuando un usuario hace clic en este vínculo en la página que está navegando, pausar la navegación y activar el modo de IU inmediata permite que el navegador muestre un diálogo de selección de cuenta directamente sobre la página actual si existen credenciales en el dispositivo.

Una vez que el usuario selecciona su cuenta y completa la autenticación, el encabezado se actualiza al estado de acceso en el mismo lugar sin ninguna navegación de página, lo que le permite seguir navegando sin alejarse de la página que estaba viendo. Por el contrario, si no existen credenciales en el dispositivo, no se muestra la IU del navegador y el usuario navega sin problemas a la página de acceso tal como lo tenía previsto originalmente.

Acceso dinámico en la confirmación de compra (comercio electrónico)

En los sitios de comercio electrónico, la transición del carrito de compras a la confirmación de compra es uno de los puntos más comunes de abandono del carrito debido a la fricción en la navegación de páginas. Cuando se invoca el modo de IU inmediata en el momento en que un comprador no autenticado hace clic en el botón de confirmación de compra en la pantalla del carrito, aparece un diálogo de selección de cuenta justo donde se hizo clic en el botón, lo que completa la autenticación con un solo toque.

Cuando la autenticación se realiza correctamente, el comprador omite por completo la página de acceso y llega directamente a la pantalla final de confirmación de envío y pago (página de confirmación de compra), lo que reduce drásticamente los pasos necesarios para completar una compra. Si no existen credenciales, el comprador pasa normalmente a la pantalla de selección de acceso convencional o de compra como invitado. Puedes diseñar tu sitio para permitir la compra como invitado o requerir el acceso según los requisitos de tu empresa. El modo de IU inmediato sirve para eliminar la fricción en la confirmación de la compra para los clientes recurrentes.

Acceso intercalado para microacciones (Me gusta, agregar a favoritos, guardar)

Cuando los visitantes navegan por los feeds de redes sociales, los sitios de comunidades o los catálogos de productos de comercio electrónico, forzar un redireccionamiento de página completa a la página de acceso cada vez que intentan "Me gusta" en una publicación o "Agregar a favoritos" un elemento puede hacer que algunos usuarios abandonen la acción.

Cuando un visitante que no accedió a su cuenta hace clic en un botón de acción, como Me gusta, Marcar o Guardar, presentar un diálogo en modo de IU inmediato en el lugar correcto permite que se complete la verificación de identidad y se active de inmediato el registro de la acción y la animación de la IU (como el ícono de corazón que se vuelve rojo). La posición de desplazamiento no se mueve ni un solo píxel, lo que preserva por completo la inmersión en la navegación. Si no existen credenciales, en lugar de navegar fuera de la página de inmediato, puedes mostrar un modal de acceso intercalado ligero sobre la pantalla actual o guiar al usuario a la página de acceso de manera que regrese a su lugar original después de acceder.

Desbloqueo del muro de pago del sitio del publicador

Las plataformas de contenido y los medios de noticias adoptan ampliamente un modelo en el que los párrafos iniciales de un artículo son de acceso libre, mientras que se presenta un muro de pago flexible o un desenfoque solo para miembros a mitad de la página a medida que el lector se desplaza.

Cuando un lector se desplaza hacia abajo en un artículo, llega al muro de pago y hace clic en el botón Continuar leyendo con tu cuenta, invocar el modo de IU inmediata muestra el diálogo de autenticación justo sobre la posición de desplazamiento exacta en la que se detuvo el lector. En cuanto se completa la autenticación, el desenfoque del artículo se disuelve sin problemas y sin que se vuelva a cargar la página, lo que permite que el lector siga leyendo sin perder la línea de texto que estaba mirando. Si no existen credenciales, expande un formulario de registro o acceso intercalado dentro de la sección del muro de pago.

Antipatrones que se deben evitar

Si bien el modo de IU inmediata ofrece un valor increíble cuando se usa antes de la navegación de la página, colocarlo en la ubicación incorrecta o aplicarlo a flujos no admitidos perjudicará activamente la experiencia de acceso del usuario.

Evita el modo de IU inmediata en los botones de acceso de las páginas de acceso dedicadas

Dado que el modo de IU inmediata controla tanto las llaves de acceso como las contraseñas en un solo diálogo pulido, puede ser tentador usarlo en el botón "Acceder" ubicado en tu página de acceso dedicada. Sin embargo, debes evitar usarlo aquí. En primer lugar, el modo de IU inmediata requiere estrictamente la activación del usuario (como un clic o un toque), lo que lo hace incómodo en una página de acceso en la que los usuarios podrían esperar que las opciones de acceso estén disponibles de inmediato en el momento de la carga de la página. En segundo lugar, la página de acceso es el destino final al que llegan los usuarios cuando no tienen credenciales locales en su dispositivo o cuando intentan acceder con una llave de acceso en su dispositivo móvil (autenticación multidispositivo) o una llave de seguridad física haciendo clic en "Acceder con una llave de acceso". Si usas el modo de IU inmediato aquí, el navegador suprimirá los códigos QR multidispositivo y las claves de seguridad de resguardo, y se cerrará de inmediato en cuanto no encuentre credenciales locales en el dispositivo, lo que atrapará al usuario en un callejón sin salida en el que hacer clic en el botón no hará nada en una página sin más destino.

En una página de acceso en la que cada método de autenticación debe funcionar de manera confiable, la práctica recomendada es configurar la IU condicional (integración de Autocompletar) en los campos de entrada para garantizar la comodidad de las llaves de acceso locales, y vincular los botones explícitos "Acceder con una llave de acceso" con métodos de invocación estándar que muestren de manera confiable las opciones de código QR y llave de seguridad multidispositivo.

Evita el modo de IU inmediato para la reautenticación de nivel superior

Cuando un usuario accede a su cuenta y realiza una operación sensible, como cambiar una contraseña, actualizar una dirección de envío, editar formas de pago guardadas o agregar una llave de acceso nueva, los sitios suelen requerir una reautenticación reforzada para verificar la identidad del usuario. Dado que el usuario ya accedió, los flujos de reautenticación suelen pasar una lista allowCredentials no vacía para restringir la autenticación a las credenciales que pertenecen a ese usuario específico.

Sin embargo, no uses el modo de IU inmediata para la reautenticación. El modo de IU inmediato está diseñado exclusivamente para flujos de acceso no autenticados en los que aún no se conoce la identidad del usuario. Si un usuario de confianza pudiera consultar una lista específica de IDs de credenciales en el modo de IU inmediata y observar si existe una credencial, podría inferir si el usuario interactuó previamente con el sitio y hacer un seguimiento del usuario en diferentes sesiones. Para evitar este riesgo de seguimiento entre sesiones, los navegadores rechazan de inmediato cualquier solicitud de modo de IU inmediato que incluya una lista allowCredentials no vacía y arrojan un NotAllowedError. Por el contrario, omitir allowCredentials durante la reautenticación también es problemático, ya que el navegador presenta todas las credenciales guardadas en el dispositivo para tu sitio, lo que permite que el usuario seleccione inadvertidamente una cuenta diferente de la que accedió en ese momento.

Para la reautenticación de nivel superior en la que ya se conoce la identidad del usuario, usa una solicitud modal estándar de WebAuthn (navigator.credentials.get() sin uiMode: 'immediate') con allowCredentials completado con las credenciales registradas del usuario que accedió a su cuenta o dirige al usuario a la pantalla de desafío de reautenticación estándar.

Conclusión

El modo de IU inmediato es una potente herramienta de UX para eliminar desvíos innecesarios a las páginas de acceso y lograr accesos rápidos que se completen y conserven el contexto. Si interceptas los momentos de intención clara del usuario (como los vínculos de acceso del encabezado, los botones de confirmación de compra, las microacciones y los muros de pago de artículos) justo antes de que se produzca la navegación de la página, puedes evitar el abandono y brindar una experiencia del usuario fluida.

Al mismo tiempo, recuerda que el modo de IU inmediata es estrictamente una mejora progresiva para los usuarios no autenticados antes de la navegación de la página. Evita aplicarlo a los botones de la página de acceso de destino final para que tu diseño siga siendo abierto y accesible para los usuarios multidispositivo (código QR), y evita usarlo para los flujos de reautenticación que requieren allowCredentials.

Para obtener más detalles sobre la implementación de llaves de acceso y las funciones más recientes de Web Identity, explora los siguientes recursos: