Design de login e cadastro móvel: torne clara a etapa da conta

Escolha o momento em que uma conta se torna útil

Comece com o trabalho que a pessoa veio fazer. Se a experiência principal puder funcionar sem uma conta, permita que as pessoas explorem primeiro e solicitem login quando chegarem a um recurso que precise de preferências salvas, acesso entre dispositivos, colaboração ou uma transação. As Diretrizes de Interface Humana da Apple recomendam adiar o login sempre que possível e explicar o benefício quando uma conta for necessária.

Uma solicitação contextual é mais fácil de entender do que uma barreira exibida na abertura do aplicativo. Por exemplo, um aplicativo de leitura pode permitir que alguém navegue pelos títulos e, em seguida, peça que crie uma conta quando optar por sincronizar uma lista de leitura. Se a criação de conta é essencial desde o início, diga o porquê antes de apresentar os campos. Mantenha a explicação concreta e proporcional: “Crie uma conta para salvar seus projetos e abra-os em outro dispositivo” é mais útil do que “Junte-se à nossa comunidade”.

• Separe as informações obrigatórias dos detalhes opcionais do perfil.
• Para check-out de convidado ou uma tarefa única, considere se a criação da conta pode esperar até que o valor imediato seja entregue.
• Depois que a autenticação for bem-sucedida, leve as pessoas à ação que pretendiam realizar.

Torne as escolhas de login claras e reconhecíveis

Uma pessoa deve ser capaz de saber se está criando uma conta ou retornando para ela. Dê rótulos distintos às duas rotas, mantenha a ação principal visualmente clara e coloque métodos alternativos onde possam ser comparados sem sobrecarregar a tela. Use nomes de provedores e tratamentos de botões aprovados pela plataforma quando relevante; um rótulo genérico “Continuar” por si só não explica o que acontece a seguir.

Ofereça apenas métodos que o produto suporta e pode manter. E-mail, uma chave de acesso ou uma opção de identidade de plataforma podem se adequar a públicos diferentes. Apresente-os como escolhas, não como uma afirmação de que um método é universalmente mais fácil ou mais seguro. Explique quaisquer informações adicionais necessárias.

Os usuários recorrentes podem não se lembrar do método de login. Torne a recuperação e o login alternativo detectáveis ​​e explique o que fazer se um email estiver associado a um método diferente. As orientações sobre vinculação de contas podem ajudar as pessoas a manter o acesso a uma conta existente.

Mantenha os formulários focados e compatíveis com as ferramentas das pessoas

Solicite apenas os campos necessários para criar ou acessar a conta. Use rótulos persistentes em vez de confiar no texto do placeholder como único rótulo, escolha um tipo de entrada e teclado apropriados e deixe clara a próxima ação. Se a inscrição precisar de várias informações, agrupe os campos relacionados e adie as preferências opcionais até que a pessoa chegue ao produto.

A autenticação deve funcionar com gerenciadores de preenchimento automático e senhas. Use nomes de campo e semântica padrão e evite comportamentos personalizados que impeçam o preenchimento de credenciais. Não bloqueie a colagem de senhas: as pessoas podem usar um gerenciador de senhas ou outra ferramenta. A orientação WCAG exige que navegadores e gerenciadores de senhas de terceiros preencham os campos de login.

O comportamento pode variar entre dispositivos e gerenciadores de senhas, portanto verifique o fluxo nas plataformas suportadas e permita a correção manual. Após uma tentativa fracassada, preserve valores úteis e não confidenciais, como um endereço de e-mail, quando for prático.

• Use um rótulo visível, como “Endereço de e-mail” e um rótulo de senha claro.
• Permitir que as pessoas revelem ou verifiquem uma senha quando apropriado, sem fazer desse controle a única forma de digitação correta.
• Mantenha o botão principal próximo aos campos e atribua a ele um rótulo específico da ação, como “Criar conta” ou “Entrar”.

Projete para erros, recuperação e a próxima visita

Um erro útil identifica o campo afetado ou a etapa com falha no texto e informa à pessoa como continuar. “Algo deu errado” não é suficiente quando um formato de e-mail é inválido ou um campo está vazio. O Critério de Sucesso 3.3.1 das WCAG 2.2 exige que os erros de entrada detectados sejam identificados e descritos em texto; uma cor ou um ícone não devem transmitir a mensagem sozinhos.

Use uma linguagem neutra e coloque orientações específicas do campo próximas ao campo. Por exemplo, um exemplo de texto de um endereço malformado pode dizer: “Insira um endereço de e-mail no formato [email protected]”. Se o login não for bem-sucedido, um produto poderá dizer: "Não foi possível fazer login com esses detalhes. Verifique seu e-mail e senha ou redefina sua senha". Evite expor informações confidenciais da conta em mensagens de erro; escolha um texto que atenda às necessidades de privacidade e prevenção de abuso do produto.

Explique o que acontece depois que alguém solicita uma redefinição, forneça um caminho de volta para fazer login e ajude as pessoas a encontrar o método usado antes. Em visitas posteriores, mostre claramente o estado de login e forneça um caminho para configurações da conta, saída e ajuda. Se as contas puderem ser criadas no aplicativo, facilite a localização da exclusão da conta.

• Associe um erro ao campo que ele descreve e torne-o perceptível apenas sem cor.
• Mantenha as ações de recuperação próximas ao formulário de login e evite fazer com que os usuários reiniciem desnecessariamente.
• Revise os estados de primeiro uso e de retorno do usuário, incluindo endereços de e-mail alterados e métodos de login indisponíveis.

Uma revisão prática do fluxo da conta

Percorra o fluxo como uma nova pessoa, uma pessoa que retorna e alguém que recupera o acesso. Verifique as telas no contexto. A biblioteca de padrões móveis pode ajudar as equipes a comparar como os formulários organizam entradas, rótulos e ações.

• As pessoas podem alcançar o valor útil do produto antes de fazer login, quando a conta não é essencial?
• A tela informa por que uma conta é necessária e quais informações são necessárias?
• Uma pessoa consegue distinguir inscrição, login, métodos alternativos e recuperação de conta?
• Os rótulos dos campos permanecem visíveis e podem preencher e colar automaticamente as credenciais?
• Os erros nomeiam o problema em texto, preservam informações úteis e sugerem um próximo passo?
• Após o sucesso, a pessoa retorna à tarefa que iniciou?