Design da experiência do usuário
A integração é uma das experiências do usuário mais importantes no seu aplicativo. Uma experiência de integração de alta qualidade pode resultar em taxas de conversão acima de 90%, além de incentivar comportamentos que aumentam o engajamento e a rentabilidade.
Com o Login do Facebook, as pessoas podem começar a usar seu aplicativo de forma rápida e facilitada, além de ter experiências mais personalizadas e significativas. Neste documento, apresentamos dicas e informações para você criar uma ótima experiência do usuário com o Login do Facebook.
1. Mostre o valor antes de solicitar que as pessoas façam login
Ao decidir em que parte da experiência do usuário solicitar o login, tente identificar o momento em que as pessoas reconhecerão que seu aplicativo oferece o suficiente para confiarem as próprias informações a ele.
Em geral, isso é influenciado pela experiência das pessoas antes mesmo de baixar o aplicativo. Porém, é possível incentivar a ação de login com o design.
Veja algumas abordagens de design para incentivar o login dos usuários:
- Forneça uma explicação clara e sucinta do que seu aplicativo tem a oferecer.
- Ofereça uma amostra do conteúdo que os usuários poderão acessar após o login.
- Proporcione uma nova experiência do usuário.
- Permita que as pessoas testem seu aplicativo sem ter que criar uma conta.
Forneça uma explicação clara e sucinta do que seu aplicativo tem a oferecer
Dê uma explicação clara, sucinta e convincente sobre o que seu aplicativo tem a oferecer. Pode fazer algum tempo desde que os usuários baixaram o aplicativo ou leram sobre ele na loja de aplicativos.
Ofereça uma amostra do conteúdo que os usuários poderão acessar após o login
Antes do login, exiba uma amostra do conteúdo disponível para as pessoas, como a foto do plano de fundo deste exemplo. Não é preciso usar imagens detalhadas. Até mesmo imagens borradas do quadro de avisos do Pinterest estimulam mais pessoas a fazer login na plataforma.
Proporcione uma nova experiência do usuário
Caso seja necessário conhecer melhor o aplicativo para ter a melhor experiência possível, inclua uma demonstração em várias etapas acima do botão de login. Dessa forma, as pessoas poderão acessar outras informações ou fazer login de imediato, se estiverem prontas.
Permita que as pessoas testem seu aplicativo antes do login
Se possível, permita que as pessoas conheçam seu aplicativo antes de solicitar o login. Por exemplo, muitos aplicativos de comércio eletrônico, como o Zulily, só exigem o login quando as pessoas estão com tudo pronto para finalizar a compra.
2. Evite etapas desnecessárias
Reduzir etapas desnecessárias é uma das maneiras mais eficazes de melhorar sua taxa de conversão.
Evite solicitar que os usuários toquem primeiro em "Entrar" ou "Registrar" para acessar o botão de login do Facebook. O uso do Login do Facebook torna essa etapa desnecessária. As pessoas não precisam nem mesmo parar para pensar se têm uma conta ou não.
Além disso, depois que as pessoas entrarem com o Facebook, não solicite que criem um nome de usuário nem uma senha. Um dos maiores motivos pelos quais as pessoas usam o recurso Entrar com o Facebook é porque ele é "rápido, fácil e não exige senha". Depois de entrar com o Facebook, as pessoas não querem ser obrigadas a criar um nome de usuário ou uma senha.
3. Botão de login do Facebook
O botão de login do Facebook que acompanha nossos SDKs é fácil de integrar e inclui instruções que garantem a consistência do design e da experiência.
Para possibilitar a criação de conta e o login no Facebook, os rótulos recomendados são "Continuar com o Facebook" ou "Entrar com o Facebook", dependendo do contexto.
Uso aprovado de "Entrar com o Facebook"
Uso aprovado de "Continuar com o Facebook"
Uso aprovado de "Continuar como [Nome]"
Os designs de login acima são as opções recomendadas e serão aprovados por nossos revisores. No entanto, se houver necessidade de criar uma versão específica às suas necessidades, siga as diretrizes abaixo.
Logotipo
Para gerar reconhecimento e confiança, use sempre o logotipo "f" aprovado, disponível na Central de Recursos das Marcas do Facebook.
Ao usar o logotipo "f" no design do botão de login, exiba-o antes da chamada para ação. Não use o logotipo como parte da chamada para ação, isto é, "Entrar com 'f'".
Cores
Usar cores é uma das melhores maneiras de fazer com que as pessoas reconheçam algo rapidamente. Na perspectiva da usabilidade, o quanto antes as pessoas reconhecerem o que é o botão e o que ele faz, mais rápido elas tocarão nele e melhor será a experiência.
As cores dos botões são o branco e o azul do Facebook: 5890FF. Em todo o mundo, quando as pessoas se referem ao Login do Facebook, em geral, elas falam sobre o "botão azul". Caso não seja possível usar o azul do Facebook, aplique a opção em preto e branco.
VALORES DE COR DO AZUL DO FACEBOOK
- CMYK com revestimento: 83 / 52 / 00 / 00
- CMYK sem revestimento: 77 / 36 / 00 / 00
- PMS 2727C
- PMS 2382U
- Hex #1877F2
- R = 24; G = 119 e B = 242
Texto
Os rótulos recomendados são "Continuar com o Facebook" ou "Login com o Facebook", dependendo do contexto. Ao aplicar o logotipo "f" com uma chamada para ação, use a versão oficial disponível para download na Central de Recursos das Marcas do Facebook.
Posicione o texto da chamada para ação dentro do botão de login, não fora dele.
Escolha a fonte, a espessura de fonte e o kerning mais adequados ao seu aplicativo. Entretanto, otimize para facilidade de leitura.
Posicionamento
Seu botão de login deve ser o mais rápido e fácil possível de reconhecer e tocar. Em um dispositivo móvel, isso significa que ele deve estar próximo ao polegar e precisa ser grande o suficiente para ser tocado com facilidade. É simples, mas é verdade: os botões maiores geram mais conversões do que os menores.
Fornecemos o logotipo "f" em vários tamanhos para fins de dimensionamento do botão. Porém, é necessário manter a consistência nas proporções e no estilo de tipografia.
O que fazer e o que não fazer
USE o logotipo "f" aprovado disponível na Central de Recursos das Marcas do Facebook e siga as diretrizes de uso.
USE o rótulo recomendado "Continuar com o Facebook" ou "Login com o Facebook" no botão de login, dependendo do contexto, e verifique se o texto está dentro do espaço do botão.
NÃO modifique o logotipo "f" de nenhuma forma, seja o design, a dimensão ou qualquer outra personalização. Caso não seja possível usar a cor certa devido a limitações técnicas, aplique a opção em preto e branco.
NÃO use o logotipo "f" em um botão sem a chamada para ação adequada. Recomendamos as opções "Continuar com o Facebook" ou "Entrar com o Facebook".
NÃO coloque o texto da chamada para ação (por exemplo, "Continuar com o Facebook") fora do botão de login.
4. Permissões
Solicite apenas as permissões necessárias
Quanto menos permissões você solicitar, mais à vontade as pessoas se sentirão para conceder o acesso. Percebemos que pedir menos permissões costuma resultar em uma taxa maior de conversão.
É sempre possível solicitar outras permissões mais tarde, depois que as pessoas já tiverem testado seu aplicativo.
Outra vantagem de solicitar menos permissões é não precisar enviar seu aplicativo para a análise de login. Você só precisará enviar o aplicativo para essa análise caso solicite outras permissões além de public_profile e email.
Solicite permissões coerentes com o contexto e explique por quê
As pessoas têm maior probabilidade de aceitar solicitações de permissão quando entendem por que seu aplicativo precisa dessas informações para oferecer uma experiência otimizada. Por isso, ative essas solicitações quando as pessoas tentarem realizar uma ação que exija essa permissão específica.
Por exemplo, o aplicativo do Facebook só solicita serviços de localização quando as pessoas tocam explicitamente no botão de localização ao atualizar o status.
5. Ofereça opções para que o usuário saia
Depois que as pessoas entram, você precisa oferecer uma maneira de sair do aplicativo, se desconectar da conta ou excluir tudo. Além de ser uma cortesia, isso também é um requisito das nossas Políticas do Desenvolvedor para login.
Por exemplo, o aplicativo de encontros Tinder oferece a opção de excluir a conta, sair ou ocultar o cartão de perfil, o que impede que outras pessoas encontrem você.
6. Teste e mensure
Nem mesmo os designers mais qualificados conseguem criar o melhor fluxo de integração já na primeira tentativa. Em geral, grandes experiências de integração são o resultado de um projeto e de testes criteriosos, com várias iterações.
Antes de lançar o aplicativo, faça um teste qualitativo de usabilidade para compreender como as pessoas reagem ao que veem. Não é necessário executar um teste formal para ser útil. Porém, você precisa acompanhar as pessoas ao longo da experiência.
Além do teste qualitativo, use análises para entender se as pessoas estão concluindo o processo e avalie as taxas gerais de conversão. Os aplicativos que seguem as melhores práticas têm taxas de conversão de mais de 90%.