En todos los sitios que ofrecen servicios sobre Internet el registro de usuarios es una parte crítica. Los sistemas deben ser sencillos, eficaces y amigables para los usuarios. Estas son las ideas generales del documento «Patterns for Sign Up & Ramp Up» producido por la prestigiosa consultora Adaptative Path. En este post, bastante demorado por cierto, voy a comentar algunas ideas generales del segundo capítulo. Si no leíste la primera parte, te recomiendo que lo hagas antes de continuar.
Si anteriormente el foco estaba en dar buenas razones a los usuarios para registrarse, el segundo momento consiste en que cuando el usuario tomó la decisión de hacer su registro este sea lo más sencillo posible. La gente de Adaptative Path lo explica en cuatro puntos.
1. Hacer un registro inicial simple. Los grandes protagonistas de la web 2.0 son los datos. Prácticamente todos los servicios nos exigen completar perfiles con información de todo tipo, subir fotografías o poner datos de nuestro currículum. Sin embargo, el fundamental que el primer paso sea muy sencillo.
Si vamos a requerir la introducción de mucha información no conviene atormentar al usuario con una largísma pantalla de campos a rellener sino reducir la pantalla inicial a lo imprescindible. Por ejemplo: email, clave y aceptar las condicione del servicio. Lo recomendable es tener entre 3 y 6 campos, que sean sencillos y no exigan esfuerzo.
Ejemplo: El registro en Tumblr solicita lo impresindible. Una vez completada la pantalla inicial, accedemos a la edición de nuestro perfil donde se puede agregar la información que deseamos.
Clic sobre la imagen para agrandar
2. Solicitar datos de forma exahustiva. Superado el umbral de resistencia inicial, la inercia hace que el usuario esté mejor predispuesto a continuar con el proceso de introducción de datos. En este punto hay que ser directo y pedir los datos que se necesitan para aprovechar todas las ventajas del servicio. Como probablemente sea bastante información, conviene agrupar la solicitud de datos desde un punto de vista conceptual. Por ejemplo, primero los datos personales, luego los estudios y finalmente la experiencia profesional.
Si algún campo es particularmente confuso debe explicarse en esa misma pantalla qué es exactamente lo que queremos que introduzca. Si hace falta, se agrega una ayuda adicional para dejarlo bien claro. Otra cuestión a tener en cuenta es contar por qué se piden esos datos y qué uso se hará de los mismos (si se mostrarán a todo el mundo, solamente a otros usuarios o serán privados).
Ejemplo: Luego de la pantalla inicial, la red de contacto profesionales LinkedIn solicita solamente aquella información que es necesaria para usar el sistema. A la derecha se explica qué permite hacer el sistema con los datos introducidos. Los campos del formulario están alineados y conservan un tamaño uniforme para que sea fácil recorrerlos visualmente. Un asterisco grande y de color marca claramente los campos obligatorios de los opcionales.
Clic sobre la imagen para agrandar
3. Asistente de configuración. Es otra forma de recoger datos que resulta útil cuando el usuario tiene que centrar su atención en una única tarea. El asistente permite comunicar el valor y propósito de cada paso de manera clara y evita que el usuario se distraiga con otras opciones. Sin embargo, debe utilizarse solamente cuando tenga sentido la intervención del usuario entre paso y paso; de lo contrario conviene emplear pantallas con formularios de manera tradicional.
A la hora de diseñar asistentes es mantener el número de pasos en 3 (o lo más cerca posible). Un indicador de progreso o un checklist que indique las acciones completadas y lo que falta por delante ayuda a reducir el nivel de ansiedad. Gráficamente debe haber consistencia entre cada pantalla para que puedan ser identificadas como partes de un mismo proceso.
Ejemplo: El registro de ShareThis es un caso de manual. Muestran claramente los tres pasos del asistente, cuentan rápidamente qué se hace en cada etapa y mantienen la consitencia a lo largo de las pantallas.
Clic sobre la imagen para agrandar
4. Informar y validar a nivel del campo. Si tenemos que mostrar algún mensaje explicativo, de confirmación o un error no tenemos que esperar a que el usuario envío el formulario. Colocar la información al nivel del campo permite comunicarnos con el usuario sin agregar ruido y evita la frustración de tener una problema luego que se completó la acción que se pedía. Si hay algo que decir, mejor decirlo en el momento.
De todos modos, la validación en línea no sustituye a las clásicas páginas de control sino que las complementan. A la hora de mostrar la información es bueno asociar cada tipo de mensaje con iconos fácilmente identificables que permitan distinguir una confirmación de un error, por ejemplo. Algo que debemos evitar es marcar como error un campo que se ha dejado en blanco hasta que se produzca el envío: puede que el usuario quiera pensar con qué dirección de correo se da de alta pero mientras tanto completa el resto de la información.
Ejemplo: Otro caso de manual es el registro en Radar.net. Al poner el cursor en el campo nos dice qué debemos introducir, al cambiar el foco al campo siguiente válida el anterior y nos muestra un icono de correcto o incorrecto. En este último caso, agrega un texto descriptivo sobre el error.
Clic sobre la imagen para agrandar
Nota: Si llegasta hasta acá sin haber leído la primera parte, sería bueno que lo hagas. Si lo hiciste, te recuerdo que esto es solamente un resumen de un documento que tiene 70 páginas por lo que la lectura del original aporta mucho más información.
Actualización: Ya están listas todas las partes.
- Dar al usuario buenas razones para registrarse (parte 1).
- Hacer el proceso de registro fácil (parte 2).
- No dejar a tus nuevos usuarios colgados (parte 3).
- Acelerar las conexiones iniciales (parte 4).