Un visitante llega a tu web y hace clic en "Iniciar sesión". Espera una experiencia de acceso fluida. En su lugar, se encuentra con un formulario que le frustra. Los requisitos de la contraseña no se muestran hasta enviar. El campo de contraseña es pequeño y difícil de escribir. No hay opción de "Mostrar contraseña", así que no puede comprobar lo que ha escrito. Se equivoca con la contraseña. Hace clic en "¿Olvidaste tu contraseña?" y llega a un flujo de restablecimiento confuso. Unos minutos después, se rinde y no vuelve.
Los formularios de acceso y de restablecimiento de contraseña son puntos de contacto críticos. Estos formularios están entre un visitante que vuelve y su cuenta. Si la experiencia es mala, no solo se va. Asume que tu web no es de fiar. Este capítulo explica cómo crear formularios de acceso y de restablecimiento de contraseña que sean seguros, intuitivos y respeten el tiempo de tus usuarios.
¿Qué campos necesita un formulario de acceso?
Un formulario de acceso necesita exactamente tres cosas. Primero, una forma de identificar quién es la persona. Segundo, una forma de verificar su identidad. Tercero, una forma de mantener la sesión iniciada. Eso significa tres campos como mínimo.
El campo de correo
Usa el correo, no un nombre de usuario. El correo es más sencillo. Los usuarios olvidan los nombres de usuario. No olvidan su dirección de correo. Haz que este campo acepte una dirección de correo y etiquétalo claramente como "Dirección de correo". Usa el `type="email"` de HTML para que los teclados del móvil muestren el símbolo @ y la validación del correo se haga automáticamente. En el atributo HTML, añade `autocomplete="username"` para que los navegadores y los gestores de contraseñas sepan que aquí va el identificador de acceso y puedan rellenarlo a los usuarios que tengan credenciales guardadas.
El campo de contraseña
Usa `type="password"` para que el texto quede oculto. Añade `id="current-password"` y `autocomplete="current-password"` para que los gestores de contraseñas identifiquen este campo y rellenen las contraseñas guardadas. Permite pegar. Los expertos en seguridad coinciden en que desactivar el pegado en los campos de contraseña no evita ataques. Solo frustra a quienes usan gestores de contraseñas.
Haz que el campo de contraseña tenga visualmente al menos 10 caracteres de ancho. Un campo pequeño se siente apretado. Los usuarios dudan de que quepa su contraseña larga. Un campo más ancho genera confianza y reduce los errores de envío.
Botón para mostrar la contraseña
Incluye un botón de "Mostrar contraseña" o "Revelar contraseña" (normalmente un icono de ojo o una casilla). Al activarlo, el campo de contraseña pasa a `type="text"` para que los usuarios vean lo que han escrito. No es un riesgo de seguridad. Es una función de usabilidad que reduce los errores de envío y la frustración. Los usuarios escriben las contraseñas con cuidado y quieren comprobarlas antes de pulsar enviar.
Casilla "Recuérdame" (opcional pero recomendable)
Una casilla de "Recordarme en este dispositivo" o "Mantener la sesión iniciada" es opcional, pero mejora la experiencia. Al marcarla, la sesión dura más o el navegador guarda un token de acceso persistente (de forma segura). Esto significa que los usuarios no tienen que iniciar sesión cada vez que visitan. En cuentas de bajo riesgo, es seguro. En cuentas de alta seguridad (financieras, de salud, paneles de administración), no la incluyas o exige volver a autenticarse para acciones sensibles.
Si incluyes una casilla de recordar, sé explícito sobre lo que hace. "Recordarme durante 30 días" es más claro que solo "Recordarme".
Enlace de contraseña olvidada
Coloca un enlace de "¿Olvidaste tu contraseña?" justo debajo del campo de contraseña o a su derecha. No es opcional. Los usuarios olvidan las contraseñas. Ofrece un camino evidente para restablecerla. Si no encuentran el enlace, se van de la web y quizá no vuelvan.
¿Cómo debe funcionar un formulario de restablecimiento de contraseña?
Un flujo de restablecimiento de contraseña tiene varios pasos. Cada paso importa. Cada paso es un lugar donde los usuarios pueden confundirse y abandonar.
Paso uno: pedir la verificación del correo
El flujo de restablecimiento empieza cuando un usuario hace clic en "¿Olvidaste tu contraseña?" en el formulario de acceso. Llega a una página que dice algo como "Introduce tu dirección de correo para restablecer tu contraseña". Aparece un solo campo de correo. Eso es todo. Sin campos extra. Sin pedir el nombre de usuario ni preguntas de seguridad. Solo el correo.
El botón debería decir algo claro y orientado a la acción. "Enviar enlace de restablecimiento" o "Recibir instrucciones" les dice qué ocurre después. "Enviar" es vago.
Paso dos: enviar el enlace de restablecimiento por correo
Cuando envían su correo, tu sistema les manda de inmediato un correo de restablecimiento de contraseña. El correo debería llegar en segundos, no en minutos. La rapidez importa. Si el correo tarda 10 minutos, los usuarios suponen que no funcionó y lo intentan de nuevo o, peor, se van.
El correo de restablecimiento contiene un enlace único (o un código que se introduce en la página siguiente). Ese enlace debería caducar pasado un tiempo, normalmente 24 horas. Un enlace que nunca caduca es un riesgo de seguridad si alguien accede a su correo.
Paso tres: verificar el enlace y mostrar el formulario de nueva contraseña
Cuando hacen clic en el enlace de restablecimiento del correo, llegan al formulario de restablecimiento de contraseña. Esta página debería confirmar claramente lo que está pasando: "Restablece tu contraseña" o "Crea una contraseña nueva". Sin dudas sobre si están en el sitio correcto.
Muestra la dirección de correo para la que están restableciendo la contraseña. "Estás restableciendo la contraseña de example@email.com." Esto les tranquiliza: están restableciendo la cuenta correcta.
Paso cuatro: indicar con claridad los requisitos de la contraseña antes de enviar
Muestra los requisitos de la contraseña en el formulario de restablecimiento ANTES de que intenten enviarlo. No les hagas adivinar. "Tu contraseña debe tener al menos 12 caracteres e incluir una letra mayúscula, un número y un carácter especial." Sé concreto. Muestra ejemplos de lo que cumple.
Un indicador de seguridad de la contraseña (una barra que muestra débil, media, fuerte) ayuda a los usuarios a entender si su contraseña cumple los requisitos sin enviar y recibir un error. A algunos usuarios les resulta útil. A otros les frustra si los requisitos no están claros. Si usas un medidor de seguridad, acompáñalo con requisitos explícitos en texto.
Paso cinco: campo de contraseña y confirmación
Pide una contraseña nueva. Luego pide que la confirmen escribiéndola otra vez. Este paso de confirmación detecta erratas. El inconveniente es que un campo de confirmación añade fricción. Las investigaciones indican que quitar el campo de confirmación de contraseña aumenta las tasas de finalización. Si lo mantienes, haz que ambos campos tengan un botón de "Revelar contraseña" para que puedan comprobar que ambas entradas coinciden antes de enviar.
Paso seis: confirmación inmediata y siguientes pasos
Cuando restablecen la contraseña con éxito, muestra un mensaje de éxito. "Tu contraseña se ha restablecido. Ya puedes iniciar sesión con tu nueva contraseña." Luego ofrece un enlace de vuelta al formulario de acceso o un botón que diga "Ir al acceso" para que no tengan que navegar ni buscar.
Envíales también un correo de confirmación. "Tu contraseña se restableció hace poco. Si no fuiste tú, haz clic aquí para proteger tu cuenta." Esto les avisa si otra persona restableció su contraseña y les da una forma de deshacerlo.
¿Dónde van los formularios de acceso en tu web?
Los formularios de acceso no son decorativos. Deben poder encontrarse sin buscar.
Cabecera o navegación
El lugar más visible es la cabecera. Un enlace (o botón) de "Iniciar sesión" arriba a la derecha de tu web es donde los usuarios lo esperan. Al hacer clic, llévalos a una página de acceso propia o abre una ventana modal con el formulario de acceso. Los usuarios de móvil esperan la opción de iniciar sesión en el menú de hamburguesa. No la escondas nunca tras capas de navegación.
Página de acceso propia
Crea una página propia en `/login` o `/sign-in`. Esta página contiene el formulario de acceso y nada más. Sin entradas de blog. Sin textos de marketing. Solo el formulario y el texto de ayuda necesario. Una página limpia y centrada convierte mejor que incrustar el formulario de acceso en una página general.
Página de restablecimiento de contraseña
El formulario de restablecimiento de contraseña debería estar en una URL propia como `/reset-password` o `/forgot-password`. Esta página solo se alcanza desde el formulario de acceso o desde un enlace del correo de restablecimiento. No debería indexarse en los buscadores. Añade `noindex` a esta página en tu HTML o en robots.txt para que Google no intente posicionarla.
Errores comunes en el diseño de formularios de acceso
Incluso los formularios de acceso bien intencionados suelen tener problemas que dañan la experiencia del usuario.
Demasiados campos antes del acceso
Algunas webs piden nombre de usuario, correo, teléfono y respuesta de seguridad en el propio formulario de acceso. No lo hagas. Acceder no es registrarse. Pide solo correo y contraseña. Todo lo demás es fricción extra.
Requisitos de contraseña ocultos o poco claros
Si los requisitos de la contraseña están ocultos hasta enviar, los usuarios se frustran. Escriben una contraseña. Pulsan enviar. Aparece un error: "La contraseña debe tener 12 caracteres e incluir un número". Ahora tienen que intentarlo de nuevo. Muestra los requisitos desde el principio.
Sin opción de mostrar la contraseña
Los usuarios no pueden ver lo que han escrito. Envían. Se equivocan. Lo intentan de nuevo. Se equivocan otra vez. Un sencillo botón evita esta frustración.
Mensajes de error confusos
No digas nunca a los usuarios "Acceso no válido". No ayuda. ¿Usan el correo equivocado? ¿La contraseña equivocada? ¿La cuenta no está activada? Sé concreto. "No hay ninguna cuenta con esta dirección de correo" o "La contraseña es incorrecta" les dice qué arreglar. O, si quieres ser vago por motivos de seguridad, dales un camino de recuperación. "El correo y la contraseña no coinciden. Inténtalo de nuevo o restablece tu contraseña."
El enlace de restablecimiento caduca demasiado pronto
Un enlace de restablecimiento que caduca en 15 minutos frustra a los usuarios. Revisan su correo al salir del trabajo. El enlace está muerto. Tienen que empezar de nuevo. Dales al menos 24 horas.
El flujo de restablecimiento lleva a una página confusa
Algunos flujos de restablecimiento envían a los usuarios a una página que no dice con claridad qué hacer. Hacen clic en el enlace de restablecimiento. Llegan a una página con texto poco claro y sin formulario. Piensan que algo ha ido mal. Hazlo evidente. "Restablece tu contraseña de example@email.com" con un campo de contraseña y un botón de enviar.
Consideraciones de seguridad para el acceso y el restablecimiento de contraseña
Un formulario de acceso es una parte crítica para la seguridad de tu web. Protégelo bien.
Usa HTTPS para todo el tráfico de acceso
Tu página de acceso debe servirse por HTTPS, no por HTTP. HTTPS cifra los datos en tránsito para que los hackers no puedan leer el correo y la contraseña mientras viajan a tu servidor. Es innegociable. Si tu web no tiene un certificado SSL, consíguelo. La mayoría de los proveedores de hosting ofrecen ahora certificados SSL gratuitos.
Valida la seguridad de la contraseña en el servidor
La validación en el navegador ayuda a los usuarios, pero no te fíes solo de ella. La validación con JavaScript se puede saltar. Valida la contraseña en tu servidor. Comprueba que cumple tus requisitos. Acepta solo contraseñas que cumplan tus estándares de seguridad.
Aplica hash y salt a las contraseñas en tu base de datos
No guardes nunca contraseñas en texto plano. Usa un algoritmo de hash seguro (como bcrypt o Argon2) con salt. Aunque alguien acceda a tu base de datos, no puede leer las contraseñas. Una contraseña con hash correcto no se puede convertir de nuevo en la contraseña original.
Limita los intentos de acceso
Si alguien intenta iniciar sesión 10 veces en un minuto, bloquéalo. Limitar la frecuencia evita los ataques de fuerza bruta en los que los hackers prueban miles de combinaciones de contraseñas. Tras unos pocos intentos fallidos, haz una pausa de 15 minutos antes de permitir más intentos.
Haz que los tokens de restablecimiento caduquen pronto
Un token de restablecimiento de contraseña que funciona 24 horas es lo habitual. Los tokens que funcionan 7 días o más aumentan el riesgo de que una cuenta de correo comprometida lleve a una cuenta de la web comprometida. Mantén los tokens de corta duración.
Registra la actividad de acceso para detectar fraudes
Guarda un registro de los intentos de acceso correctos y fallidos. Si alguien inicia sesión desde un país nuevo o a una hora inusual, márcalo. Algunos sistemas envían un correo cuando una cuenta inicia sesión desde un dispositivo nuevo. Esto avisa al titular de la cuenta si alguien más accedió.
Formularios de acceso en el móvil: qué cambia
El móvil cambia cómo deben funcionar los formularios de acceso.
Zonas táctiles y tamaño de los botones
En el móvil, los dedos no son tan precisos como los cursores. Los botones y los campos de entrada deben ser más grandes. El botón de enviar debería tener al menos 44 píxeles de alto. Los campos de entrada deberían ser lo bastante altos para escribir con comodidad. Apunta a una altura de 44 a 48 píxeles.
Teclados del móvil y tipos de entrada
Usa `type="email"` para el campo de correo. Esto indica a los dispositivos móviles que muestren el teclado de correo con los símbolos @ y . Sin él, los usuarios tienen que cambiar de modo de teclado. Usa `type="password"` para el campo de contraseña para que el teclado se corresponda. Este pequeño detalle ahorra toques y frustración.
Autocompletado y gestores de contraseñas
Los navegadores móviles y las apps gestoras de contraseñas pueden rellenar las credenciales de acceso. Asegúrate de que tus atributos HTML lo permiten. Incluye `autocomplete="username"` en el campo de correo y `autocomplete="current-password"` en el campo de contraseña. Es una gran comodidad en el móvil, donde escribir es más lento.
Diseño del formulario en pantallas pequeñas
Apila los campos en vertical. No pongas correo y contraseña lado a lado en una pantalla de móvil. Un campo por fila. El formulario debería usar todo el ancho con márgenes adecuados. Un formulario que se siente apretado en el móvil no se completa.
Evita que el teclado del móvil tape el formulario
Cuando aparece el teclado del móvil, cubre la mitad de la pantalla. Asegúrate de que el botón de acceso se ve por encima del teclado o ofrece una forma de cerrar el teclado con facilidad. Algunas webs muestran el botón solo después de que se cierra el teclado. Eso frustra a los usuarios. Mantén el botón visible.
Preguntas frecuentes
¿Cuántos requisitos de contraseña debo pedir?
¿Debo mostrar un indicador de seguridad de la contraseña?
¿Y si alguien olvida su contraseña Y su dirección de correo?
¿Necesito autenticación en dos pasos en mi formulario de acceso?
¿Cada cuánto debería alguien restablecer su contraseña?
¿Es mejor pedir nombre de usuario o dirección de correo?
Cómo te ayuda WEMASY con los formularios de acceso y restablecimiento de contraseña
El creador de formularios de WEMASY admite flujos seguros de acceso y de restablecimiento de contraseña. Crea un formulario de acceso con campos de correo y contraseña. Añade un botón de mostrar contraseña con un clic. Define los requisitos de la contraseña (longitud, mayúsculas, números, caracteres especiales). Usa lógica condicional para mostrar una casilla de recordarme u omitirla según tus necesidades de seguridad. Conéctalo con el sistema de autenticación de WEMASY o intégralo con proveedores de autenticación externos mediante API. WEMASY gestiona automáticamente el hash de contraseñas, la limitación de intentos y la gestión de sesiones. Los correos de restablecimiento de contraseña se envían de forma segura desde tu dominio. Los tokens de restablecimiento caducan a las 24 horas. Mira qué incluyen los planes de WEMASY.