Mejores prácticas (y pantallas gratuitas) para el registro, el inicio de sesión y el flujo de incorporación

¿Atascado en los primeros pasos? Bueno, ahora no tendrás que hacerlo. Están las pantallas más genéricas, aunque a veces la gente falla al hacer un buen trabajo. Nadie quiere terminar perdiendo clientes debido a dificultades para registrarse o enviar mensajes después de haber descargado la aplicación.

Esto es lo que necesita para impresionar a sus clientes desde el principio.

Lo primero es lo primero — A esto lo llamo la “pantalla de bienvenida”, que proporciona al usuario una breve introducción a su aplicación, opciones de inicio de sesión sencillas y una sensación de marca. Sea breve y amable en sus mensajes.Cumplir con los estándares — Hoy en día es costumbre dar acceso a Google o Apple para que los usuarios no tengan que recordar sus contraseñas en varias aplicaciones. Esto significa que el registro a menudo pasa a un segundo plano en tal escenario, y también desea mantener sus campos al mínimo solo para evitar cualquier fricción. Lo mismo ocurre con el inicio de sesión, ya que, en primer lugar, no mucha gente habría utilizado el correo electrónico para registrarse.

Esto da las siguientes tres pantallas básicas, fíjate como el fondo restablece la marca en la pantalla de bienvenida, se podría introducir el logo en cada pantalla como se muestra en la primera. Más adelante explicaré por qué no he utilizado ninguna ilustración en estas pantallas.

Pantallas de inicio básicas para cualquier aplicación: marca, opciones sencillas de registro e inicio de sesión

Observe cómo uno puede cambiar fácilmente entre iniciar sesión y registrarse si accidentalmente llega a uno o decide lo contrario. Puede usar “registrarse” en lugar de registrarse, pero prefiero usar “Iniciar sesión” en lugar de “Iniciar sesión” para que sea lo suficientemente diferente de “Registrarse” como para causar confusión, etc. “Registrarse” e “Iniciar sesión” son buena combinación en ese caso.

Si el color de la marca lo permite, es posible que también quieras usar colores específicos para Apple y Google (negro y azul) y/o introducir sus logotipos, pero este es el diseño más limpio que he usado hasta ahora. Otra solución es utilizar fondos e ilustraciones blancos o claros como aquí. También puedes probar buenas imágenes en lugar de ilustraciones para crear una conexión.

Otro ejemplo es el uso de fondo blanco, ilustraciones y colores específicos de Apple y Google.

A continuación, debe considerar todos los estados y escenarios de error, como la contraseña olvidada. Aquí hay un modelo funcional disponible aquí.

Varios escenarios para cubrir el flujo de registro e inicio de sesión

Ahora pasemos a la siguiente parte, la incorporación, que es específica para nuevos usuarios, lo que significa que solo es visible para las personas que se registran o inician sesión por primera vez. Hay varias formas de hacer esto; recuerde mantener el tiempo total en menos de un minuto. La forma más sencilla es seleccionar las tres funciones principales de su aplicación y presentarlas como un carrusel. Esto brinda una mejor oportunidad de que el usuario al menos tenga una idea de lo que es posible con su aplicación.

Incorporación de usuarios sencilla: muestra las tres funciones principales

También puede haber varias otras formas, como ventanas emergentes en la aplicación (me parecen un poco molestas y causan fricción si alguien quiere comenzar. Una buena práctica de ux es incluir “saltar” en cada paso de la incorporación.

Vuelva a ingresar el enlace del archivo de la comunidad y también consulte la aplicación mymory si las pantallas le intrigaron.

Feliz diseño.