Blog

Los mejores ejemplos y consejos de páginas de inicio de sesión

Contenidos

La experiencia del usuario no es el único aspecto que determina la eficacia de las páginas web y las aplicaciones móviles. Un formulario de inicio de sesión puede parecer una pequeña parte de la experiencia del usuario, pero en realidad desempeña un papel importante en la mayoría de los casos. Contar con una página de inicio de sesión bien diseñada aumentará el compromiso del usuario y, al mismo tiempo, las posibilidades de que un visitante que accede por primera vez se convierta en un usuario habitual.

Los clientes de hoy en día no están acostumbrados a lidiar con elaborados procesos de registro. En esta era tan acelerada, nadie tiene tiempo que perder rellenando largos formularios, sobre todo si tienen que hacerlo en la pequeña pantalla de un smartphone.

Algunos ejemplos de páginas de inicio de sesión de páginas web y aplicaciones que requieren estos formularios son el comercio online, las redes sociales, los blogs, etc. En un esfuerzo por mantener a sus usuarios cerca, varias páginas web populares y muy visitados han optado por una interfaz de inicio de sesión minimalista.

Los mejores consejos para la página de inicio de sesión y ejemplos

La accesibilidad es la clave

Si quieres que personas de todo tipo puedan utilizar tu página web, necesitas una página de inicio de sesión acogedora. Si no se construye teniendo en cuenta la accesibilidad, estarás dejando fuera a un grupo demográfico considerable de personas que dependen de lectores de pantalla y otras formas de software especializado.

Asegúrate de que la página de inicio de sesión, al igual que el resto de las páginas, permite a los visitantes desplazarse por los elementos, tiene una codificación HTML semántica, los campos y botones del formulario tienen los nombres adecuados, el contraste de colores es adecuado y se carga correctamente sin JavaScript.

Mantener el cumplimiento de la usabilidad online es conveniente si tu página ya es fácil de usar. La página de inicio de sesión para usuarios nuevos y recurrentes debe tener un diseño fácil de entender con botones como «olvidé mi contraseña» y “regístrate».

Opción de registro fácil con medios sociales externos

El registro en una nueva aplicación con las credenciales de la propia cuenta de Google, Microsoft o las redes sociales está ganando adeptos. Esto ahorra al usuario el tiempo y el esfuerzo de registrarse desde cero, y le permite empezar a utilizar el servicio inmediatamente. Los usuarios se sienten más cómodos utilizando la aplicación porque pueden registrarse con un solo clic utilizando su red social existente u otra cuenta externa.

Entrar en una aplicación utilizando una cuenta ya establecida ahorra tiempo y esfuerzo al eliminar la necesidad de registrarse en una nueva cuenta y generar una nueva contraseña para cada uso.

Separar el inicio de sesión y el registro

Hay dos recorridos de usuario distintos, el inicio de sesión y el registro. Cada usuario sólo debe registrarse una vez y después iniciar sesión cada vez que utilice el servicio. Sólo los usuarios habituales necesitan acceder a la página de inicio de sesión. Cuando un usuario visita tu web por primera vez, debería poder ir directamente al formulario de registro sin tener que pasar por el proceso de inicio de sesión.

Es una práctica común separar los procesos de inicio de sesión y registro en páginas separadas debido a las diferencias en el flujo de usuario entre los dos. En su lugar, puedes tener una sola pantalla que sirva tanto para iniciar sesión como para registrarse.

Requisito de contraseña clara

Nunca debes asumir que los usuarios están familiarizados con las mejores prácticas para crear contraseñas seguras. Las contraseñas deberían mostrarse preferiblemente cerca del mecanismo de control.

Cuando un usuario introduzca una contraseña insegura, muéstrale las políticas de contraseñas independientemente de la configuración por defecto. La fe de los usuarios en tu marca se resentirá como resultado de esto, y también perderán tiempo solucionando el problema.

Desenmascarar para ver la contraseña

Debería ser posible mostrar la contraseña al usuario si éste lo solicita. Si un usuario comete un error al introducir su contraseña, puede corregirlo fácilmente aquí. Asegúrate de que el enmascaramiento de la contraseña está activado por defecto. Proporciona al usuario la opción de revelar la contraseña mediante una casilla de verificación o un conmutador.

Utilizar el correo electrónico/número de teléfono para iniciar sesión. 

Es una decisión inteligente proporcionar algo más que el nombre de usuario y la contraseña de inicio de sesión para la aplicación móvil/página web. Aunque exija a los clientes que elijan un nombre de usuario y una contraseña excepcionales al registrarse, es importante. No es raro que la gente olvide sus credenciales de acceso.

Haz que el inicio de sesión sea tan sencillo como el ABC añadiendo nuevas opciones de inicio de sesión, como una dirección de correo electrónico o un número de teléfono.

Indicación de contraseña no válida

Dejar que el usuario especule sobre por qué su contraseña es incorrecta no es una política inteligente. Siempre que un usuario introduzca una contraseña incorrecta, el mensaje de error debe incluir una explicación clara de por qué es incorrecta junto con instrucciones claras para solucionar el problema.

Las contraseñas que los usuarios intentan escribir incorrectamente de forma repetida se convertirán rápidamente en una fuente importante de frustración. Debido a esto, la experiencia del usuario se resiente.

Fácil recuperación de contraseñas

Los usuarios suelen tener dificultades para iniciar sesión por correo electrónico y contraseña porque no recuerdan su contraseña. Una contraseña olvidada debería poder recuperarse a través de la interfaz de la página de inicio de sesión. Por lo tanto, proporciona un enlace a «¿Has olvidado tu contraseña?» en la página de inicio de sesión, donde los usuarios lo vean claramente.

Esta opción guiará a los clientes fácilmente a través del procedimiento para recuperar su contraseña, proporcionando un enlace de restablecimiento de contraseña a la cuenta de correo electrónico asociada o un código específico a su número de teléfono móvil asociado.

Advertir a los usuarios cuando el BLOQUEO DE MAYÚSCULAS está activado

Los usuarios pueden evitar el uso innecesario de mayúsculas si se les avisa de que el BLOQUEO DE MAYÚSCULAS está activado. Puedes colocar la alerta junto al cuadro de texto o dentro de él. Es importante avisar a los usuarios cuando la tecla de bloqueo de mayúsculas está activada.

Opción “Recuérdame”

Los usuarios pueden comunicar más claramente su deseo de que la web o app guarde sus inicios de sesión seleccionando la opción “Recuérdame”. Si optan por no permitir que la web o app recuerde su cuenta de gmail, lo que facilitaría a otra persona adivinar sus contraseñas, pueden anular la selección de la opción.

Puedes hacerlo de dos maneras:

  • Si un usuario marca la casilla que le pide «recordarme» durante el registro, no tendrá que volver a escribir su correo electrónico la otra vez que inicie sesión.
  • Después de iniciar sesión, los usuarios tienen la opción de que el sistema recuerde su cuenta de correo electrónico. En lugar de tener que introducir manualmente su dirección de correo electrónico cada vez, el sistema la recordará por ellos.

Validación de entradas

Puedes mejorar la accesibilidad de tus páginas de registro e inicio de sesión implementando la validación instantánea de entradas. Los usuarios serán alertados de cualquier problema con el formulario antes de que lo envíen. Podrán realizar los ajustes necesarios de forma rápida y sencilla gracias a la respuesta inmediata que recibirán tras introducir sus datos.

A la hora de ofrecer una validación inmediata práctica, hay que tener en cuenta algunas consideraciones clave. El usuario acaba de salir del cuadro de introducción de datos, por lo tanto, muestra el mensaje sólo en ese momento. La confianza de un usuario en tu producto puede verse reforzada por un mensaje de error útil. Además, el mensaje de error tiene que dar una descripción clara del problema y proporcionar instrucciones para solucionarlo.

Artículos destacados

From offline to online.

Comparte tus ideas con nosotros