16 ejemplos de pantallas de login y la psicología detrás de cada uno

Lo que encontramos

• Nueve de las 16 no muestran un campo de contraseña en la primera pantalla. Piden un correo o un número de teléfono, u ofrecen un botón, y se encargan del resto.

• Seis ofrecen una passkey (clave de acceso). Ninguna la convierte en la única forma de entrar.

• Las seis pantallas de login que todavía empiezan por la contraseña ponen "Forgot password?" en cinco lugares distintos. Solo Duolingo lo pone dentro del campo.

• El registro con correo de LinkedIn encadena tres verificaciones: una regla de contraseña, un rompecabezas y un código por correo.

Son conteos de 16 pantallas que elegimos nosotros, no un estudio. Aun así, la tendencia salta a la vista: la contraseña se está yendo de la primera pantalla.

Por qué una pantalla de login es más difícil de lo que parece

La pantalla de login es la menos glamorosa de tu producto. También es la que todos tus usuarios tienen que atravesar.

Parece sencilla. No lo es. En pocos segundos, la gente tiene que decidir por dónde entrar, recordar algo que configuró hace semanas o años y confiártelo.

Lo que más falla es la memoria. Un estudio de Microsoft Research de 2007 con medio millón de personas encontró que, en promedio, cada una tenía unas 25 cuentas protegidas con contraseña, pero solo 6,5 contraseñas.

Cada una de las pantallas que siguen facilita una de esas tres tareas, y en cada una nombramos la psicología que hay detrás. Una advertencia: la mayoría de esos efectos se midieron en laboratorios y encuestas, no en tu pantalla de login. Trata cada uno como una hipótesis y luego contrástala con lo que de verdad hacen tus usuarios. Hacia el final hay una sección que muestra cómo.

Netflix: un solo campo para iniciar sesión y registrarse

La pantalla de login de Netflix nunca te pregunta si ya tienes cuenta.

La mayoría de las pantallas de login empiezan con ese examen sorpresa: ¿iniciar sesión o registrarse?

Para responder, tienes que recordar si alguna vez creaste una cuenta aquí, y con qué correo. Mucha gente no está segura.

Netflix se lo salta. En el teléfono, la página tiene un campo, "Email or mobile number", y un botón, "Continue". Tengas cuenta o no, escribes lo mismo, y Netflix se encarga del resto.

Eso es reconocimiento en lugar de recuerdo, una de las heurísticas de usabilidad de Jakob Nielsen. Escribir el correo que usas todos los días es fácil. Recordar si te registraste en 2019 no lo es.

Este patrón suele llamarse login con identificador primero (identifier-first), y también lo usan Amazon, Booking.com, Airbnb y Dropbox.

Hay un pero. Una pantalla que reacciona distinto ante correos conocidos y desconocidos le dice a cualquier extraño qué direcciones tienen cuenta. La Authentication Cheat Sheet de OWASP advierte contra eso. Si tus cuentas son sensibles, pregúntale primero a tu equipo de seguridad.

Lo que copiaríamos: pide primero el correo y decide después qué mostrar.

Instagram: el botón grande es para quien ya tiene cuenta

A diferencia de Netflix, Instagram mantiene el inicio de sesión y el registro como dos puertas separadas. La mayoría de las apps todavía lo hace, y entonces la pregunta es qué puerta se lleva el protagonismo.

Instagram se lo da a quienes vuelven. En iPhone, primero vienen los campos de usuario y contraseña, con un botón "Log in" en azul sólido. "Create new account" es un botón con borde al final de la pantalla.

Es una apuesta sobre quién llega aquí. Instagram espera que la mayoría ya tenga cuenta.

La apuesta importa por la prominencia (saliencia visual). En pequeños experimentos de laboratorio, la gente tenía que elegir rápido entre varios snacks. Escogía el más brillante mucho más a menudo de lo que predecían sus propios gustos declarados (Milosavljevic et al., 2012). Una pantalla de login tiene solo dos o tres opciones, así que la más llamativa se lleva el beneficio de la duda.

Lo que copiaríamos no es "agranda el botón Log in". Es esto: averigua quién llega de verdad a tu pantalla y dale el botón más grande al grupo mayor.

Tinder: "Create account" primero y un teléfono en vez de contraseña

Tinder pone primero a los usuarios nuevos, la apuesta contraria a la de Instagram. En su pantalla de bienvenida, "Create account" está encima de "Sign In".

La mejor idea viene después. Tinder pide tu número de teléfono, te manda un código por SMS y eso es todo. En nuestro registro nunca apareció un campo de contraseña.

Una contraseña es un examen de memoria. Un número de teléfono y un código por SMS no lo son. La mayoría se sabe su número de memoria, y el código casi no hay que escribirlo. El iPhone lo ofrece encima del teclado, y las apps de Android pueden leerlo automáticamente.

Los códigos también le ganan a la memoria cuando hay que recuperar una cuenta. En un estudio sobre millones de intentos de recuperar cuentas de Google, los códigos de restablecimiento por SMS funcionaron más del 80 % de las veces. Cerca del 40 % de los usuarios de habla inglesa en Estados Unidos no recordaba las respuestas a sus propias preguntas de seguridad.

Eso sí, los códigos por SMS no salen gratis. La propia pantalla de Tinder advierte que "message and data rates may apply" (pueden aplicarse cargos por mensajes y datos), y la gente cambia de número.

Lo que copiaríamos: si tus usuarios viven pegados al teléfono, deja que su número sea el login. Después agrega algo más duradero, como la passkey que ofrece Uber más abajo.

Slack: un código por correo en lugar de una contraseña

La página de inicio de sesión de Slack tampoco tiene campo de contraseña. Pide tu correo de trabajo, con botones de Google, Microsoft y Apple debajo. Recibes un código por correo, lo escribes y listo.

Nadie tiene que recordar nada. Pero todos tienen que salir de la página, abrir la bandeja de entrada, encontrar el mensaje y volver.

Ese desvío tiene un precio. Los psicólogos lo llaman costo de cambio de tarea: la gente se vuelve más lenta y comete más errores justo después de cambiar de tarea (Monsell, 2003). El correo, además, puede acabar en spam.

Para Slack, es un trato justo. Sus usuarios están sentados en su escritorio, con el correo abierto en la pestaña de al lado. En un teléfono, la bandeja de entrada es otra app, y el mismo desvío cuesta más.

Lo que copiaríamos: usa códigos por correo en productos que la gente abre desde un escritorio. En el teléfono, un código por SMS o una passkey es más amable.

Uber: ofrece una passkey en cuanto el código funciona

La app de Uber abre con un campo para el número de teléfono, con Apple, Google y el correo como alternativas.

Elegimos el correo. Uber nos envió un código de 4 dígitos, lo escribimos y entonces nos pidió algo nuevo: "Create a passkey". "Not now" estaba a un toque.

Lo ingenioso es el momento.

Estábamos a punto de entrar. Ya teníamos el teléfono en la mano. Y acabábamos de rebuscar un código en la bandeja de entrada. El modelo de comportamiento de BJ Fogg dice que una petición funciona cuando la motivación y la capacidad alcanzan juntas su punto máximo, y este es ese momento.

Los números dicen que el empujón vale la pena. En las 15 empresas del Passkey Index 2026 de la FIDO Alliance, los inicios de sesión con passkey funcionaron el 93 % de las veces y ahorraron unos 27 segundos cada uno. Las contraseñas con una segunda verificación tradicional, como un código por SMS, funcionaron el 78 % de las veces. En los datos propios de Microsoft, la brecha es aún mayor: el 98 % con passkey frente al 32 % con contraseña.

Lo que copiaríamos: ofrece la passkey justo después de un inicio de sesión exitoso, cuando la gente acaba de sentir la molestia que le ahorra.

GitHub: passkeys ofrecidas, no impuestas

GitHub también ofrece passkeys, pero de forma mucho más discreta que Uber. El formulario clásico sigue al frente: usuario o correo, contraseña y un botón verde "Sign in". "Sign in with a passkey" es un simple enlace al final de todo.

GitHub ofrece passkeys a todos sus usuarios desde septiembre de 2023. Entonces, ¿por qué la passkey es lo más pequeño de la página?

Por costumbre, o lo que los psicólogos llaman sesgo del statu quo. En experimentos y en decisiones reales sobre planes de salud y jubilación, la gente "se aferra de forma desproporcionada al statu quo" (Samuelson y Zeckhauser, 1988). Para la mayoría, el statu quo es una contraseña, que a menudo completa un gestor de contraseñas. Una página que pusiera primero la passkey les pediría cambiar ese hábito en la puerta de entrada.

Microsoft movió la misma palanca en sentido contrario. Desde mayo de 2025, las cuentas recién creadas de Microsoft son "sin contraseña por defecto", así que los usuarios nuevos empiezan sin ninguna contraseña.

Lo que copiaríamos: ofrece la mejor opción sin imponerla. Cuándo darle más protagonismo es una pregunta para tus propios datos: ¿quién usa passkeys y con qué frecuencia fallan sus inicios de sesión?

Discord: escanea un código con el teléfono donde ya iniciaste sesión

En escritorio, el inicio de sesión de Discord tiene el formulario de siempre a la izquierda. A la derecha hay algo mejor: un código QR.

Apuntas el teléfono al código, confirmas en la app de Discord y entras. El propio blog de Discord lo dice sin rodeos. Con el acceso por código QR, "no necesitarás iniciar sesión con tu correo, tu contraseña, un código de un solo uso, ni siquiera con tu passkey".

En el modelo de Fogg, esto es capacidad: cuanto más fácil es una acción, menos motivación necesita. Para quien usa Discord en el teléfono, escanear es casi lo más fácil que existe para iniciar sesión. WhatsApp Web funciona así desde hace tiempo.

La idea tiene un límite. Solo funciona cuando la gente ya inició sesión en su teléfono. Un producto que se usa sobre todo en escritorio no tiene una sesión móvil que pedir prestada, así que un código QR solo estorbaría.

Lo que copiaríamos: si tus usuarios llevan tu app en el bolsillo, deja que el teléfono inicie sesión por ellos en todo lo demás.

Notion, Vercel y Figma: ¿cuántos botones son demasiados?

Discord muestra tres formas de entrar. Notion muestra siete, todas del mismo tamaño: Google, ChatGPT, Apple, Microsoft, Passkey, SSO y Email. Vercel empieza con un campo de correo y luego enumera cinco más. Figma se queda en Google, o correo y contraseña.

¿Siete son demasiadas? Probablemente no.

La sobrecarga de opciones es más débil que su fama. En un metaanálisis de 50 experimentos, el efecto promedio salió prácticamente nulo. Aparece sobre todo cuando las opciones son difíciles de comparar y la gente no sabe qué quiere (Chernev, Böckenholt y Goodman, 2015). Los botones de inicio de sesión son el caso fácil: cada uno es una marca que la gente reconoce, y la mayoría sabe qué cuenta usa para trabajar.

El riesgo real es un error distinto. Quien se registró con Google el año pasado y esta vez toca Apple puede acabar en una cuenta nueva y vacía.

Una lista larga tiene un costo más. En un teléfono pequeño, puede empujar la opción de correo fuera de la vista, y mucha gente sigue entrando con el correo.

Lo que copiaríamos: limita la lista a las cuentas que tus usuarios tienen de verdad y muéstrale a cada persona cuál usó la última vez.

Duolingo: "Forgot?" dentro del campo de contraseña

Duolingo pone su enlace "FORGOT?" dentro del propio campo de contraseña.

¿Por qué ahí? Tarde o temprano, en toda pantalla de login alguien olvida su contraseña, y es en el campo de contraseña donde busca ayuda.

Es la ley de proximidad de la Gestalt: lo que está cerca se percibe como parte de un mismo grupo (Wagemans et al., 2012). El enlace se lee como parte del campo. Lo encuentras justo cuando lo necesitas y lo ignoras el resto del tiempo.

Las demás apps van cada una por su lado. GitHub y Stripe ponen el enlace en la línea de la etiqueta. Discord lo pone justo debajo del campo, Instagram bajo el botón "Log in" y Figma aún más abajo, bajo su enlace de inicio de sesión único.

Ninguna está mal. Pero cuanto más lejos queda el enlace del campo de contraseña, más tiene que buscar quien se atascó.

Lo que copiaríamos: pon "Forgot password?" dentro del campo de contraseña o justo al lado.

Mailchimp: reglas de contraseña que se marcan al escribir

La pantalla de registro de Mailchimp ayuda justo cuando la gente crea su contraseña. El enlace de Duolingo solo ayuda cuando ya la olvidó.

Mientras escribes, una lista de requisitos bajo el campo se pone en verde punto por punto: una minúscula, una mayúscula, un número, un carácter especial, al menos 8 caracteres y nada de tu nombre de usuario.

Eso es prevención de errores, otra de las heurísticas de Nielsen. Ves las reglas antes de incumplirlas. El consejo de Nielsen Norman Group para crear contraseñas es mantener los requisitos a la vista todo el tiempo que el campo esté seleccionado, justo como hace Mailchimp.

La lista presenta bien las reglas. Las reglas en sí son otra historia.

El estándar estadounidense de identidad digital, NIST SP 800-63B, dice que los servicios "NO DEBEN imponer otras reglas de composición (p. ej., exigir mezclas de distintos tipos de caracteres)". En su lugar pide longitud: al menos 15 caracteres para una contraseña que se usa sola, u 8 cuando es uno de varios factores.

El campo de nombre de usuario tiene su propio costo. Reddit le contó a Google que "la presión de crear en el acto un nombre de usuario aparentemente ingenioso provoca cerca de un 30 % de abandono" (caso de estudio de Google).

Lo que copiaríamos: la lista en tiempo real. Lo que quitaríamos: las reglas de caracteres.

Una cosa más. La casilla bajo la contraseña te suscribe a los correos de marketing a menos que la marques. No hacer nada equivale a decir que sí. Ese es el poder de una opción predeterminada, y es el siguiente ejemplo.

Medium y Stripe: "Remember me" ya viene marcado

La página de inicio de sesión de Medium tiene una casilla ya marcada: "Remember me for faster sign in". Stripe también marca "Remember me on this device".

Es una casilla pequeña con un efecto grande. Un metaanálisis de 58 estudios sobre opciones predeterminadas reunió a más de 73.000 personas. Concluyó que activar la opción por defecto (opt-out) aumentó la adopción en 27 puntos porcentuales en promedio.

En una pantalla de login, esa casilla decide cuántas veces tiene que ver la gente la pantalla. Marcada, significa menos inicios de sesión, menos contraseñas olvidadas y menos ocasiones de abandonar.

No todos la marcan. El login de Atlassian para Trello deja la misma casilla vacía. Microsoft muestra una nota en su lugar: "Use private browsing if this is not your device" (usa la navegación privada si este dispositivo no es tuyo).

Lo que copiaríamos: marca la casilla en productos de bajo riesgo que se usan en dispositivos personales. Si las cuentas guardan dinero o datos de salud, combínala con una verificación del dispositivo y un segundo factor.

Temu: tranquilidad antes de los botones

Temu dedica la parte de arriba de su panel de inicio de sesión a la confianza, la tercera tarea de toda pantalla de login.

Antes de cualquier botón, un candado verde promete "All data is encrypted". Debajo hay dos ventajas de compra: sin cargos de importación en los artículos de almacenes locales y devoluciones gratis de hasta 90 días. Solo entonces llegan las cinco formas de entrar.

¿Funciona? En parte.

En un experimento de campo con 9.098 sesiones de compra, mostrar un sello de seguridad hizo más probable la compra (Özpolat et al., 2013). Pero unos investigadores quitaron las imágenes de seguridad de la página de inicio de sesión de un banco. Aun así, el 92 % de los clientes que usaban sus propias cuentas escribió su contraseña (Schechter et al., 2007).

Así que las señales de confianza tranquilizan a la gente. No la vuelven más cuidadosa.

Y solo funcionan mientras son ciertas. En nuestro análisis del onboarding, ese mismo flujo de Temu pedía más adelante un número de teléfono para enviar SMS de marketing. Eso gasta la confianza que esta pantalla construye.

Lo que copiaríamos: di lo que tranquiliza antes de pedir nada. Y no lo deshagas más adelante en el flujo.

LinkedIn: primero Google, después un rompecabezas

La app de LinkedIn para Android convierte el camino fácil en el obvio. "Continue with Google" es el botón relleno: un toque, ninguna contraseña.

Eso puede pesar mucho. Pinterest reportó un 47 % más de registros en la web y un 126 % más en Android tras agregar el aviso One Tap de Google.

Si eliges el correo, el camino se alarga. Primero, una contraseña de al menos seis caracteres. Luego, un rompecabezas, "so we know you are a real person". Después, un código por correo.

Cada una de esas verificaciones suma fricción, y la fricción frena a los bots, pero también a algunas personas reales. Un estudio de 2023 con 1.400 participantes concluyó que los bots pueden superar a las personas en los CAPTCHA comunes, tanto en velocidad como en precisión. Además, quienes tenían que resolver uno al crear una cuenta abandonaban con un 120 % más de probabilidad que quienes lo resolvían aparte (Searles et al., 2023).

Los rompecabezas también chocan con las normas de accesibilidad. Según las WCAG 2.2, ningún paso del login debe exigir "una prueba de función cognitiva (como recordar una contraseña o resolver un rompecabezas)" sin alternativa ni ayuda. El rompecabezas de LinkedIn sí ofrece una versión en audio.

La opción más ligera es una verificación que la gente nunca ve. Netflix solo menciona reCAPTCHA en la letra pequeña, y a nosotros nunca nos mostró un rompecabezas.

Lo que copiaríamos: el botón de un toque. Lo que cuestionaríamos: un rompecabezas visible para todo el que elige el correo.

Las 16 pantallas de login de un vistazo

Aquí van las 16 otra vez: lo que hace cada pantalla de login y lo que copiaríamos.

Checklist de diseño de login

Puedes aplicar todo esto sin copiar la pantalla de nadie. Este es el orden en que trabajaríamos nosotros, tanto en una app como en un sitio web.

1. Pide una cuenta solo cuando haga falta. En la encuesta de Baymard de 2026, el 18 % de los compradores estadounidenses que abandonaron un pedido lo hizo porque el sitio les exigía crear una cuenta.

2. Decide para quién es la pantalla. Dale el botón más grande al grupo mayor, sean los que vuelven o los nuevos.

3. Empieza con un solo identificador. Pide un correo o un número de teléfono y luego elige el siguiente paso. Evalúa con tu equipo de seguridad el riesgo de enumeración de cuentas.

4. Ofrece una forma de entrar sin recordar nada. Agrega passkeys y usa códigos o enlaces mágicos (magic links) donde encajen con los dispositivos de tus usuarios.

5. Limita los botones sociales a las cuentas que tus usuarios tienen de verdad. De dos a cuatro bastan para la mayoría de los productos.

6. Haz que sea fácil acertar con la contraseña. Sigue al NIST: pide longitud, quita las reglas de mezcla de caracteres y compara las contraseñas nuevas con listas de contraseñas filtradas. Permite pegar y usar gestores de contraseñas, y agrega un botón para mostrar la contraseña. Usa los valores estándar de autocomplete (username, current-password, new-password y one-time-code) para que navegadores y teléfonos completen los campos.

7. Pon la recuperación junto al campo. "Forgot password?" va dentro del campo de contraseña o justo al lado.

8. Escribe mensajes de error que digan qué hacer después. Explica qué salió mal y cómo arreglarlo, sin confirmar qué cuentas existen.

9. Decide a conciencia si "Recordarme" viene marcado. Márcalo donde el riesgo sea bajo.

10. Ponle precio a cada verificación. Empieza por comprobaciones invisibles contra bots, muestra un rompecabezas solo al tráfico que parezca de riesgo y ofrece siempre una alternativa accesible.

11. Mídelo. Haz seguimiento del éxito de inicio de sesión por método y plataforma, y mira las sesiones en las que la gente falla.

Cómo saber dónde pierde usuarios tu pantalla de login

En una revisión de diseño, una pantalla de login casi nunca parece rota. Se ve bien. Todos los botones funcionan.

El problema solo aparece en lo que hacen las personas reales. Olvidan contraseñas, escriben mal los códigos, eligen el botón social equivocado o se cansan de esperar un correo. Un panel de métricas puede decirte que los inicios de sesión bajaron. No puede decirte cuál de esas cosas pasó.

Western Governors University es un buen ejemplo. Sus estudiantes chocaban una y otra vez con errores de inicio de sesión "a pesar de usar credenciales correctas". La causa era una regla de la app: solo reconocía a los estudiantes en "estado activo" que ya habían empezado su periodo académico. Con la lógica corregida, la conversión del embudo de login pasó del 61 % al 95,6 %, y los usuarios activos mensuales, de 55.000 a 117.000.

Costa Coffee encontró un problema distinto. Cerca del 15 % de los nuevos usuarios de la app abandonaba tras escribir una contraseña rechazada. La pantalla se veía bien todas las veces, y justo por eso se le escaparía a una revisión de diseño.

Los dos equipos usaban UXCam, una plataforma de analítica de producto para apps móviles y sitios web. Registra cada toque, cada scroll y cada pantalla sin etiquetar eventos a mano.

• Los embudos muestran cuántas personas pasan de la pantalla de login a la pantalla principal, divididas por plataforma y método de inicio de sesión.

• Los mapas de calor muestran dónde toca la gente, incluidos los toques repetidos en un botón que no responde.

• Las grabaciones de sesiones muestran el momento en que alguien se rinde.

• Tara, la analista de IA de UXCam, revisa las sesiones de los usuarios cada día y señala los problemas detrás de los abandonos, con las grabaciones adjuntas.

¿Te preocupa grabar contraseñas? En iOS (UIKit), Android (Views) y la web, UXCam enmascara por defecto los campos de contraseña en el propio dispositivo (en inglés). Así nunca llegan a sus servidores. En SwiftUI, Jetpack Compose, Flutter y React Native, tú mismo marcas los campos sensibles.

Para empezar con tus propias pantallas de login y de registro:

1. Crea un embudo desde la pantalla de login hasta la primera pantalla tras iniciar sesión, dividido por método de inicio de sesión y por plataforma.

2. Busca el paso con mayor abandono y mira unas 20 sesiones de personas que llegaron a él y se fueron. Normalmente verás el patrón en las diez primeras.

3. Corrige la causa más común y luego compara el éxito de inicio de sesión de la siguiente cohorte con el de la anterior.

El curso gratuito Fundamentals (en inglés) de UXCam Academy explica este flujo de trabajo en lecciones breves en video. Para verlo en tu propia app o sitio web, empieza una prueba gratuita o reserva una demo.

Otras pantallas que vale la pena ver

Algunas pantallas de inicio de sesión más no entraron en la lista principal, pero muestran algo concreto:

• Spotify abre con "Welcome back" y un campo de correo. Da por hecho que ya eres oyente y enlaza "Sign up" para todos los demás.

• Booking.com usa un solo campo para los dos grupos: "Sign in or create an account".

• Pinterest muestra "Facebook login is no longer available". Cada botón social que agregas es uno que quizá tengas que quitar más adelante.

• Zoom muestra cinco proveedores de acceso como iconos pequeños bajo el formulario principal, y así una lista larga no ahoga el campo de correo.

• Microsoft pone "Forgot your username?" bajo el campo del identificador. La gente también olvida esa mitad del login.

Para las pantallas que vienen justo después del registro, mira nuestros ejemplos de onboarding de apps. Para el resto de la experiencia, consulta nuestras guías sobre diseño UX para móviles, tasas de abandono y optimización de la tasa de conversión en apps móviles.

Cómo elegimos y capturamos estas pantallas

Revisamos las pantallas de login y de registro de más de 30 apps y sitios web conocidos y nos quedamos con 16. Los conteos del principio salen de esas 16 pantallas. Son una foto del momento, no un estudio.

Las capturas de teléfono de Instagram, LinkedIn (Android), Temu, Tinder y Uber las hizo nuestro equipo en julio de 2025, en iPhone y Android, mientras creaba cuentas nuevas.

Capturamos las pantallas web el 6 de noviembre de 2026, sin sesión iniciada y en un navegador limpio desde Alemania. No creamos cuentas ni enviamos nada. En Mailchimp escribimos una contraseña inventada para mostrar la lista de requisitos y luego salimos de la página.

Algunos sitios le mostraron a nuestro navegador automatizado una verificación de seguridad en lugar de su página de inicio de sesión, así que los dejamos fuera. Las pantallas de login cambian a menudo, por eso cada imagen lleva su fecha de captura. Todas las capturas muestran las versiones en inglés de las apps y los sitios. Difuminamos el código QR de Discord y ocultamos los datos personales en las capturas de teléfono.

Cada cifra está enlazada a su fuente donde aparece.