Diseño de la experiencia del usuario
La experiencia inicial con la aplicación es una de las más importantes para el usuario. Una primera experiencia de alta calidad puede traducirse en tasas de conversión superiores al 90 % y animar a las personas a participar y generar ingresos.
El inicio de sesión con Facebook permite a las personas empezar a utilizar tu aplicación de forma rápida y sencilla, de modo que disfruten de experiencias más personalizadas y significativas. En este documento ofrecemos sugerencias y consideraciones para crear una experiencia de inicio de sesión ideal con Facebook.
1. Muestra valor antes de solicitar a la persona que inicie sesión
Al decidir en qué parte de la experiencia solicitar el inicio de sesión, pregúntate en qué momento la persona apreciará lo suficiente lo que la aplicación le ofrece como para que le confíe su información.
Aquí puede influir lo que se experimenta antes incluso de descargar la aplicación, aunque dispones de muchas opciones de diseño para influir en el comportamiento.
Estos son algunos enfoques de diseño que fomentan el inicio de sesión:
- Incluye una declaración clara y breve de lo que ofrece la aplicación.
- Muestra parte del contenido que se obtiene al iniciar sesión.
- Ofrece una nueva experiencia de usuario
- Permite a la persona descubrir la aplicación sin necesidad de tener una cuenta.
Incluye una declaración clara y breve de lo que ofrece la aplicación.
Incluye una declaración clara, breve y convincente de lo que ofrece la aplicación. Tal vez haya pasado un tiempo desde que el usuario la descargó o leyó sobre ella en la tienda de aplicaciones.
Muestra parte del contenido que se obtiene al iniciar sesión
Permite echar un vistazo al contenido disponible para las personas antes de que 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 los usuarios a iniciar sesión en Pinterest.
Ofrece una nueva experiencia de usuario
Si tu aplicación requiere formación adicional para lograr la mejor experiencia, puedes ofrecer una demostración en varios pasos encima del botón “Iniciar sesión”. De este modo, los usuarios puede obtener más información o iniciar sesión directamente si está listos.
Permite a los usuarios descubrir la aplicación antes de iniciar sesión
Si es posible, permite a la persona utilizar la aplicación antes de pedirle que inicie sesión. Por ejemplo, en muchas aplicaciones de comercio electrónico como Zully no es necesario que las personas inicien sesión hasta que estén listas para realizar el pago.
2. Evita pasos innecesarios
Reducir los pasos innecesarios es uno de los modos más eficaces de mejorar la tasa de conversión.
No pidas a los usuarios que toquen “Iniciar sesión” o “Registrarte” para poder llegar al botón de inicio de sesión con Facebook. En este caso, es un paso innecesario. Los usuarios no necesitan siquiera pararse a pensar si tienen una cuenta o no.
Además, cuando un usuario inicie sesión con Facebook, no le pidas que cree un nombre de usuario o una contraseña. Uno de los motivos más populares por los que las personas inician sesión con Facebook es que “es fácil y rápido, y no tengo que introducir una contraseña”. Después de iniciar sesión con Facebook, las personas son especialmente reacias a crear un nombre de usuario o una contraseña.
3. Botón "Iniciar sesión" de Facebook
El botón “Iniciar sesión” de Facebook que se incluye en nuestros SDK es fácil de integrar y contiene instrucciones que garantiza un diseño y una experiencia coherentes.
Para habilitar la creación de cuentas y el inicio de sesión con Facebook, las etiquetas preferidas son “Continuar con Facebook” o “Iniciar sesión con Facebook”, en función del 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 preferidos y nuestros revisores los aprobarán. Sin embargo, si necesitas crear una versión adaptada a tus necesidades, sigue las instrucciones siguientes.
Logotipo
Para generar reconocimiento y confianza, utiliza siempre el logotipo “f” aprobado disponible en el Centro de recursos de marcas de Facebook.
Si utilizas el logotipo "f" aprobado en el diseño del botón de inicio de sesión, este debe aparecer antes de la llamada a la acción. No lo utilices como parte de la llamada a la acción diciendo: Iniciar sesión con el logotipo “f”.
Color
El color es una de las mejores maneras de reconocer algo rápidamente. Desde el punto de vista de la facilidad de uso, cuanto más rápido reconozcan los usuarios qué es y qué hace el botón, antes lo tocarán y mejor será su experiencia.
Los colores de los botones son el blanco y el azul de Facebook: 5890FF. En todo el mundo, quienes hablan del inicio de sesión con Facebook suelen referirse a este como “el botón azul”. Si no puedes utilizar el azul de Facebook, vuelve al blanco y negro.
VALORES DEL COLOR AZUL DE FACEBOOK
- CMYK brillante: 83 / 52 / 00 / 00
- CMYK mate: 77 / 36 / 00 / 00
- PMS 2727C
- PMS 2382U
- Hex #1877F2
- R = 24 G = 119 B = 242
Texto
Las etiquetas preferidas son "Continuar con Facebook" o "Iniciar sesión con Facebook", en función del contexto. Si utilizas el logotipo “f” con una llamada a la acción, utiliza la versión oficial disponible para descarga en el Centro de recursos de marcas de Facebook.
Sitúa la copia de la llamada a la acción en el botón de inicio de sesión. No debe colocarse fuera de este.
Elige una fuente, su grosor y el interletraje convenientes para la aplicación, pero trata de optimizar la legibilidad.
Ubicación
El botón de inicio de sesión debe ser lo más rápido y fácil posible de reconocer y tocar. En un dispositivo móvil, esto significa que 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 conversiones que los pequeños.
El logotipo “f” se proporciona en varios tamaños para facilitar su escalado de cara a su uso en botones, pero las proporciones y la tipografía deben ser coherentes.
Acciones recomendadas y no recomendadas
Utiliza el logotipo “f” aprobado que encontrarás en el Centro de recursos de marcas de Facebook y sigue las instrucciones de uso.
Utiliza la etiqueta preferida "Continuar con Facebook" o "Iniciar sesión con Facebook" en el botón de inicio de sesión según el contexto, y asegúrate de que la copia se encuentre dentro del diseño del botón.
No modifiques el logotipo "f" de ningún modo, como un cambio de diseño, escala, color o cualquier otra variación personalizada. Si, por razones técnicas, no puedes utilizar el color adecuado, utiliza blanco y negro.
No utilices 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 coloques la copia de la llamada a la acción (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, las personas estarán más dispuestas a concederlos. Hemos comprobado que, al pedir menos permisos, normalmente, aumenta la tasa de conversión.
Si lo consideras necesario, puedes pedir permisos adicionales más adelante, cuando ya hayan probado la aplicación.
Otro beneficio de solicitar pocos permisos es que quizá te ahorrarás la necesidad de enviar la aplicación al proceso de revisión de la aplicación. Solo tienes que enviarla para la revisión del inicio de sesión si solicitas permisos distintos de public_profile y email.
Pide los permisos en contexto y explica el motivo
Las personas están más abiertas a conceder permisos cuando entienden por qué la aplicación necesita la información para ofrecer una mejor experiencia. Por tanto, activa la solicitud de permisos cuando una persona intente realizar una acción con la aplicación que requiera ese permiso específico.
Por ejemplo, la aplicación de Facebook únicamente solicita los servicios de ubicación cuando una persona toca explícitamente el botón de ubicación al actualizar su estado.
5. Facilita una vía para cerrar sesión.
Después de que hayan iniciado sesión, debes ofrecer a las personas una forma de cerrarla, de desconectar su cuenta o de eliminarla por completo. Además de ser un gesto de cortesía, este también es un requisito de nuestras políticas para desarrolladores sobre el inicio de sesión.
La aplicación de citas Tinder, por ejemplo, te da la opción de ocultar tu tarjeta del perfil para impedir que otras personas te encuentren, de cerrar sesión o de eliminar la cuenta por completo.
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 refinamiento con diversas variaciones.
Antes de lanzar la aplicación, realiza una prueba de uso cualitativa para comprender cómo reaccionan las personas ante lo que ven. No tiene por qué ser formal para resultar útil, pero asegúrate de ver la experiencia de las personas.
Además de estas pruebas, utiliza las estadísticas para determinar si las personas completan el proceso y cuál es la tasa total de conversión. Las aplicaciones que cumplen las prácticas recomendadas registran tasas de conversión superiores al 90 %.