Diseño de la experiencia del usuario
La experiencia inicial con la app es una de las más importantes para el usuario. Una experiencia inicial de alta calidad se puede traducir en tasas de conversión superiores al 90% y anima a las personas a participar y generar ingresos.
El inicio de sesión con Facebook permite a las personas empezar a utilizar tu app de manera rápida y sencilla, y disfrutar de experiencias más personalizadas y significativas. En este documento, ofrecemos consejos y consideraciones para crear una gran experiencia de inicio de sesión con Facebook para el usuario.
1. Muestra el valor antes de solicitar a las personas que inicien sesión
Cuando decidas en qué parte de la experiencia del usuario solicitarás el inicio de sesión, debes preguntarte en qué momento las personas apreciarán lo suficiente lo que la app ofrece como para confiarle su información.
Lo que el usuario experimenta incluso antes de descargar la app puede tener un efecto aquí. Sin embargo, el diseño dentro de la app te ayudará a tener una influencia mayor en esta decisión.
Las siguientes son algunas propuestas de diseño para animar a las personas a iniciar sesión:
- Incluye una declaración clara y breve de lo que ofrece la app
- Muestra parte del contenido que se verá al iniciar sesión
- Proporciona una nueva experiencia del usuario
- Permite que las personas usen la app sin una cuenta
Incluye una declaración clara y breve de lo que ofrece la app
Incluye una declaración clara, breve y convincente de lo que ofrece la app. Tal vez ya pasó un tiempo considerable desde que la persona la descargó o leyó sobre ella en la tienda de apps.
Muestra parte del contenido que se obtendrá al iniciar sesión
Ofrece un vistazo del contenido disponible antes de que las personas inicien sesión, como la foto de fondo de este ejemplo. No tiene por qué ser contenido detallado: incluso unas imágenes borrosas pueden animar a las personas a iniciar sesión en Pinterest.
Proporciona una nueva experiencia del usuario
Si tu app requiere formación adicional para lograr la mejor experiencia, puedes agregar una demostración de varios pasos en la parte superior del botón "Iniciar sesión". De este modo, ofreces la opción de obtener más información o iniciar sesión directamente, si la persona está lista para hacerlo.
Permite que las personas usen la app antes de iniciar sesión
Si es posible, permite que las personas experimenten con tu app antes de pedirles que inicien sesión en ella. Por ejemplo, muchas apps de comercio electrónico, como Zulily, no solicitan el inicio de sesión hasta el momento de completar el proceso de compra.
2. Evita pasos innecesarios
Una de las maneras más eficaces de mejorar el porcentaje de conversiones es reducir la cantidad de pasos innecesarios.
No pidas a los usuarios que toquen "Iniciar sesión" o "Registrarte" para llegar al botón de inicio de sesión con Facebook. Con el inicio de sesión con Facebook, es un paso innecesario. Las personas ni siquiera necesitan detenerse a pensar si tienen una cuenta o no.
Tampoco les pidas que creen un nombre de usuario o una contraseña una vez que hayan iniciado sesión con Facebook. Uno de los motivos más populares por el que las personas inician sesión con Facebook es que "es fácil y rápido, y no se necesita ingresar una contraseña". Después de iniciar sesión con Facebook, si hay algo que las personas no quieren hacer, es crear un nombre de usuario o una contraseña.
3. Botón de inicio de sesión con Facebook
El botón de inicio de sesión con Facebook que contienen nuestros SDK es fácil de integrar e incluye información que garantiza un diseño y una experiencia coherentes.
Para activar la creación de cuentas y el inicio de sesión con Facebook, las etiquetas recomendadas son "Continuar con Facebook" o "Iniciar sesión con Facebook", según el contexto.
Uso aprobado de "Iniciar sesión con Facebook"
Uso aprobado de "Continuar con Facebook"
Uso aprobado de "Continuar como [Nombre]"
Los diseños de inicio de sesión anteriores son los recomendados y los que aprobarán nuestros revisores. Sin embargo, si necesitas compilar una versión que se ajuste a tus necesidades, debes seguir las normas que aparecen a continuación.
Logotipo
A fin de generar reconocimiento y confianza, usa siempre el logotipo "f" aprobado disponible en el Centro de recursos de marcas de Facebook.
Cuando uses el logotipo "f" en el diseño del botón de inicio de sesión, debe aparecer antes de la llamada a la acción. No lo uses como parte de la llamada a la acción: no debe decir "Iniciar sesión con [logotipo 'f']".
Color
Una de las mejores maneras para lograr que las personas reconozcan algo rápidamente es utilizar un color. Desde el punto de vista de la facilidad de uso, cuanto más rápido reconozcan las personas qué es y qué hace el botón, más rápido lo tocarán y más fluida será su experiencia.
Los colores del botón son el blanco y el azul oficial de Facebook: 5890FF. En todo el mundo, cuando las personas hablan sobre el inicio de sesión con Facebook, a menudo lo llaman "el botón azul". Si no puedes usar el azul oficial de Facebook, usa blanco y negro.
VALORES DE COLOR DEL AZUL OFICIAL DE FACEBOOK
- CYMK estucado: 83 / 52 / 00 / 00
- CYMK no estucado: 77 / 36 / 00 / 00
- PMS 2727C
- PMS 2382U
- Hex #1877F2
- R = 24 V = 119 A = 242
Texto
Las etiquetas recomendadas son "Continuar con Facebook" o "Iniciar sesión con Facebook", según el contexto. Si usas el logotipo "f" con una llamada a la acción, utiliza la versión oficial disponible, que puede descargarse del Centro de recursos de marcas de Facebook.
Ubica el texto de la llamada a la acción dentro del botón de inicio de sesión; no debe aparecer fuera de este.
Elige la fuente, el grosor de fuente y el interletraje que se vean mejor en tu app, pero concéntrate en que el texto se pueda leer fácilmente.
Ubicación
El botón de inicio de sesión debe ser tan fácil y rápido de reconocer y tocar como sea posible. En un dispositivo móvil, por ejemplo, debe estar cerca del pulgar y ser lo bastante grande como para tocarlo sin dificultad. Es simple, pero cierto: los botones grandes logran más inicios de sesión que los pequeños.
El logotipo "f" se ofrece en varios tamaños para facilitar su redimensionamiento, pero las proporciones y la tipografía deben ser coherentes.
Qué se debe hacer y qué no se debe hacer
DEBES usar el logotipo "f" aprobado disponible en el Centro de recursos de marcas de Facebook y respetar las normas de uso.
DEBES usar las etiquetas recomendadas "Continuar con Facebook" o "Iniciar sesión con Facebook" en el botón de inicio de sesión, según el contexto, y asegurarte de que el texto quede dentro del diseño del botón.
NO DEBES modificar el logotipo "f" de ningún modo, por ejemplo, cambiando el diseño, las dimensiones, el color o cualquier otra característica personalizada. Si por razones técnicas no puedes usar el color adecuado, usa blanco y negro.
NO DEBES usar el logotipo "f" en un botón sin una llamada a la acción adecuada (preferiblemente, "Continuar con Facebook" o "Iniciar sesión con Facebook").
NO DEBES colocar el texto de la llamada a la acción (por ejemplo, "Continuar con Facebook") fuera del botón de inicio de sesión.
4. Permisos
Pide solo los permisos que necesitas
Cuantos menos permisos pidas, más cómodas se sentirán las personas al concederlos. Sabemos que pedir menos permisos da como resultado un mayor porcentaje de conversión.
Puedes pedir permisos adicionales más adelante, cuando las personas ya hayan probado la app.
Otra ventaja de hacerlo así es que tal vez no necesites solicitar la revisión del inicio de sesión. Solo tienes que solicitar esta revisión si pides otros permisos además de public_profile y email.
Pide los permisos en contexto y explica el motivo
Es más probable que alguien acepte solicitudes de permisos cuando entiende por qué la app necesita la información para ofrecer una mejor experiencia. Activa las solicitudes de permisos cuando las personas intenten realizar una acción en la app que requiera ese permiso específico.
Por ejemplo, la app de Facebook solamente solicita los servicios de ubicación cuando alguien toca explícitamente el botón de ubicación al actualizar su estado.
5. Proporciona un modo de cerrar sesión
Una vez que las personas inicien sesión, proporciónales un modo de cerrarla y de desconectar, o incluso eliminar, su cuenta. Además de ser una cuestión de cortesía, se trata de un requisito de nuestras Políticas de inicio de sesión para desarrolladores.
La app de citas Tinder, por ejemplo, te da la opción de ocultar tu foto del perfil para impedir que te encuentren, así como de cerrar sesión o de eliminar la cuenta.
6. Prueba y mide
Ni siquiera los mejores diseñadores logran crear una experiencia inicial perfecta al primer intento. Este resultado suele ser fruto de un meticuloso proceso de diseño, prueba y repetición.
Antes de lanzar tu app, realiza pruebas de uso cualitativas para comprender cómo reaccionan las personas ante lo que ven. No necesita ser formal para ser útil, pero asegúrate de ver a las personas mientras prueban la experiencia.
Además de estas pruebas, realiza análisis para determinar si las personas completan el proceso y cuál es el porcentaje de conversión global. Las apps que siguen las prácticas recomendadas tienen porcentajes de conversión que superan el 90%.