¿Qué debe tener un buen formulario de inicio de sesión?
¿Cómo puedes entender si algún formulario de login es lo suficientemente bueno?
A continuación, enumeramos los puntos en los que debes centrarte para crear una buena experiencia de usuario con tu formulario.
1.1 Asegúrate de que el formulario tenga etiquetas que indiquen el objetivo de cada campo
Sin etiquetas nadie entenderá qué se espera que haga con un determinado campo y qué tipo de datos debe ingresar. Los campos son similares y los visitantes de tu sitio web no deben perder su tiempo en adivinar dónde hacer qué. Pues, añade etiquetas.
1.2 Haz que los campos sean lo suficientemente grandes
Los campos deben ser fáciles de percibir y agradables a la vista. No debes obligar a los usuarios a escribir textos en pequeños campos. Todo el proceso debe ser sencillo y suave y el texto escrito debe ser bien visible para el usuario.
1.3 Piensa en la experiencia móvil
Debes vincular tus etiquetas a los campos de formulario particulares. En las pantallas pequeñas las etiquetas cliqueables funcionan mejor. Cuando no sea posible hacer una etiqueta de este tipo, asegúrate de que el campo es lo suficientemente grande para que el usuario del móvil pueda verlo sin dificultades.
1.4 Asegúrate de que el botón se destaca
Los usuarios deben de inmediato ver el botón de llamada a la acción y estar motivados a hacer clic en él. Pues, los botones deben ser lo suficientemente grandes y la llamada a la acción debe ser clara y personalizada. No escribas sólo "Enviar"; sería mejor que el texto del botón indique el propósito de la acción, como "Iniciar sesión", "Registrarse", "Unirse a nosotros", etc.
1.5 El formulario debe ser fácil de encontrar en la página
Es mucho mejor cuando los usuarios no tienen que hacer un trabajo adicional, es decir, hacer clics en pestañas o enlaces para iniciar sesión. Si tu página de inmediato muestra los campos de entrada, más personas estarán dispuestas a proporcionarte sus datos.
1.6 Los paneles de inicio de sesión y de registro deben ser separados
¿Alguna vez has escrito tu email en un formulario solo para descubrir que estás utilizando el incorrecto? Es una molestía. Asegúrate de que es absolutamente claro dónde está el formulario de registro y dónde se puede iniciar sesión en una cuenta ya existente. No muestres dos formularios a la vez para evitar confusiones.
1.6 No te olvides del login a través de redes sociales
Iniciar sesión a través de alguna red social es rápido y fácil, especialmente cuando un sitio web se usa muchas veces al día. Ofrece a tus usuarios la oportunidad de iniciar sesión a través de recursos web externos, pero nunca la conviertas en la única opción. Siempre hay personas que no están dispuestas a compartir los detalles de sus cuentas de redes sociales.
1.7 Pídeles que usen emails
Si quieres que tus visitantes recuerden sus datos de inicio de sesión, no les pidas que creen nombres de usuario. Siempre olvidan esos nombres.
1.8 Haz que las contraseñas sean visibles
¿Recuerdas cuántas veces escribiste mal tus contraseñas? Siempre ofrece a los usuarios una opción para ver lo que están escribiendo en el cuadro. Y, por supuesto, los usuarios de dispositivos móviles tendrán que ser muy, muy cuidadosos para ingresar contraseñas con un teclado más pequeño y sin errores. Ayúdalos con la opción "Mostrar contraseña".
1.9 Ayuda a los usuarios a restaurar contraseñas
La opción “¿Olvidó su contraseña?” debe ser clara y fácil de encontrar. Asegúrate de que los usuarios de inmediato reciban los emails de restablecimiento de contraseña y piensa en añadir preguntas de seguridad o una autorización móvil de dos pasos.
Sign-Up/Login Form
Examina Sign-Up/Login Form por Eric (@ehermanson) en CodePen.
Este es un formulario moderno y minimalista. Su diseño es neutral, por lo que se adapta bien a cualquier tipo de sitio web.
Material Login Form
Examina HTML, SCSS y JS de Material Login Form por Andy Tran (@andytran).
Este es un buen ejemplo de cómo el diseño impresionante interactúa con el usuario para crear una experiencia muy especial.
Responsive Login Form
Examina HTML, CSS y JS de Responsive Login Form por Dominic Francois (@DominicFrancois).
Esta es una herramienta brillante y atractiva adecuada para todo tipo de proyectos. El formulario es adaptable y responsive.
Flat HTML5/CSS3 Login Form
Examina HTML, CSS y JS de Flat HTML5/CSS3 Login Form por Aigars Silkalns (@colorlib).
El diseño plano está siempre de moda. Ajusta este producto a tu sitio o aplicación web y obtendrás un formulario 2 en 1 tanto para iniciar sesión, como para registrarse.
Login Form
Examina HTML, CSS y JS de Login Form por Tyler Fry (@frytyler).
Este producto agradable y minimalista se creó para WordPress. El autor dice que hizo este para sus múltiples proyectos y funciona muy bien. ¡Comprueba por ti mismo!
Animated login form
Examina HTML, SCSS y JS de Animated login form por Mohamed Boudra (@boudra).
Este formulario incluye una animación sencilla y funciona maravillosamente en diferentes recursos web.
Animated Login Form
Examina HTML (Haml), CSS (Sass) y JS (CoffeeScript) de Animated Login Form por Che (@code_dependant).
Este formulario se abre cuando pasas el ratón sobre él. El autor nos promete crear más formularios de registro invisibles pronto.
Elegant Login Form
Examina HTML, CSS (Less) y JS de Elegant Login Form por Victor Hugo Matias (@reidark).
Hay nada extra en éste, es simplemente un formulario de login en HTML elegante.
Login Form - Modal
Examina HTML, SCSS y JS de Login Form - Modal por Andy Tran (@andytran).
El panel de registro invisible aparecerá cuando se hace clic en él. Selecciona la pestaña azul a la derecha e ingresa tus datos de registro.
Sleek Login Form
Examina HTML y SCSS de Sleek Login Form por emma (@boltaway).
¡Es muy bonito! Éste es un formulario minimalista, pero muy atractivo con líneas sutiles y un fondo elegante.
10:24
Tags :
#Computacion #informática
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments