Arte de Matt Rae
Ao iniciar um projeto de design de aplicativo para dispositivos móveis, convém começar criando os wireframes, ou segmentos, da experiência antes de começar a usar modelos de fidelidade mais alta. O processo de criação de wireframes pode ajudar a identificar lacunas no fluxo do usuário ou a realçar pontos de atrito antes de investir tempo nos detalhes mais minuciosos da interface.
Neste tutorial, você acompanha a criação de wireframes para um fluxo de cadastro de aplicativos para dispositivos móveis. Com o uso de formas básicas e uma paleta de cores em tons de cinza, você criará o layout de várias telas em um fluxo que permitirá validar e testar a experiência antes da inclusão de detalhes, como cor, gráficos e tipografia final.
Criação de elementos básicos
Um wireframe é composto por uma série de elementos simples, geralmente com tons de cinza ou cores esmaecidas, e é simplificado em formas básicas, como retângulos e elipses. Como muitos desses objetos são usados com frequência, pode ser criada uma biblioteca básica de elementos reutilizáveis.
Para isso, primeiro desenhe um retângulo e estilize-o conforme desejar para representar um elemento específico, como um botão. Pode ser útil adicionar um alocador de espaço de texto a um botão, dependendo da fidelidade do design. Como os botões são usados em um fluxo de cadastro para avançar para o próximo estágio do processo, adicione uma caixa de texto e centralize-a na forma do botão usando as ferramentas de alinhamento.
Em seguida, combine esses elementos em um grupo e transforme-os em um componente usando as opções de menu de clique com o botão direito. Depois disso, o elemento pode ser arrastado e utilizado várias vezes, eliminando a necessidade de recomeçar do zero sempre que um elemento de botão for necessário.
Repita esse processo com outros elementos comuns, como barras de navegação, alocadores de espaço de imagem e blocos gerais. Configurar elementos comuns agora economizará tempo ao longo do processo, e esses componentes podem ser usados para dar ao seu design uma fidelidade mais alta quando chegar o momento certo.
Como alternativa, plug-ins e kits de interface podem ser usados para a criação desses elementos. Os plug-ins, como o Quick Mockup, oferecem uma coleção de elementos de wireframe que podem ser convertidos rapidamente em componentes ou utilizados diretamente.
Etapas importantes do fluxo de cadastro
Para este fluxo de cadastro, a primeira etapa é criar pranchetas para cada uma das várias telas ou etapas do processo. Um fluxo de cadastro típico incluirá, entre outros itens:
Página inicial: geralmente, essa página inclui uma mensagem de boas-vindas ou um logotipo do aplicativo, além de opções de logon ou cadastro no serviço.
Página de cadastro: essa pode ser uma única página ou uma série de páginas usadas para coletar informações, como endereço de email, nome e outras informações necessárias para a criação de contas.
Páginas de sucesso e erro: essas páginas são essenciais para fornecer feedback ao usuário sobre o status da criação da conta, informar se o processo foi bem-sucedido ou falhou e explicar como é possível corrigir o erro.
Este tutorial se concentrará no fluxo de cadastro, permitindo que novos clientes se registrem para obter uma conta. O mesmo processo mostrado aqui pode ser aplicado à criação de um design de página de logon para usuários com contas existentes. No entanto, em vez de inserir todas as informações para criar a conta, eles simplesmente inseririam o nome de usuário e a senha para concluir o processo de logon.
Layout da página inicial
A página inicial, ou tela inicial, tem alguns elementos-chave que devem ser incluídos. Lembre-se de que seu caso de uso específico pode ter requisitos ou objetivos diferentes. Portanto, seu design deve refletir esses requisitos. Normalmente, os itens incluídos são os seguintes:
• Logotipo do aplicativo
• Mensagem de boas-vindas
• Opções de cadastro ou link para a página de cadastro
• Opções de logon ou link para a página de logon
Nessa página, as opções de logon ou de cadastro são geralmente enfatizadas. Nesse caso, para capturar registros de novos usuários com mais facilidade, as opções de cadastro serão enfatizadas neste fluxo de trabalho, deixando as opções de logon disponíveis, porém em segundo plano, na parte inferior da página.
Comece arrastando um componente de bloco geral criado anteriormente e estenda-o pela parte superior da tela, criando um alocador de espaço para o relógio, o indicador de sinal e outros detalhes do SO. Em seguida, crie um retângulo básico ou um alocador de espaço de imagem e desenhe um alocador de espaço para um logotipo, centralizado na tela.
Adicione um alocador de espaço para uma mensagem de boas-vindas. Esse texto pode ser escrito com a ferramenta de texto ou simplesmente representado por retângulos arredondados simples. Nos estágios iniciais do design, talvez seja mais fácil simplesmente criar blocos para esse texto usando formas do que se preocupar em escrever o texto.
A parte inferior da página incluirá as opções de cadastro (criação de uma conta) ou logon, se o usuário já tiver uma conta. Seu design pode exigir opções para serviços de autenticação de terceiros, como Entrar com o Google ou Entrar com o Facebook; se esse for o caso, o design incluirá vários botões de cadastro para fornecer essas opções específicas.
Neste tutorial, será criado um único botão Create an Account. Esse é o botão que levará o usuário para a próxima tela, permitindo que ele insira seus detalhes para criar uma conta.
Posicione o elemento de botão no terço inferior da página, centralizado horizontalmente abaixo da mensagem de boas-vindas. Abaixo dele, desenhe uma linha horizontal na página com a mesma largura do botão e adicione outro botão com o texto Log in abaixo da linha. Esse botão será uma opção secundária, e o estilo do botão pode ser alterado para refletir isso.
Criação do formulário de cadastro
Com a página principal agora concluída, a próxima visualização do fluxo pode ser criada. Os usuários navegam até essa página depois de clicarem no botão Create an Account criado na tela anterior. Nessa página, os usuários inserirão várias informações, como nome, email e senha, para criar uma conta.
Nessa visualização, alguns elementos de texto serão adicionados para indicar a que se referem os campos, assim como fizemos com os rótulos dos botões da tela anterior. Você pode optar por adicionar texto ao título da página ou simplesmente duplicar o alocador de espaço de texto e posicioná-lo na parte superior da página.
Abaixo do título, haverá vários elementos de forma. Para simplificar, o elemento de bloco básico pode ser usado aqui. Ou você pode criar um específico para os campos de entrada, incluindo uma borda. Posicione um desses elementos centralizado na página e, em seguida, usando a ferramenta de texto, adicione um rótulo à parte superior esquerda, com o texto Name. Isso funcionará como o rótulo desse campo de entrada. O texto deve ser curto o suficiente para não se parecer com um título.
Em seguida, copie e cole os elementos do campo de entrada novamente para criar campos adicionais para email, senha e quaisquer outros campos que representem os dados que você deseja coletar no cadastro. Agrupar os elementos facilitará esse processo. Adicione um elemento de botão à parte inferior a ser utilizado para o envio e a conclusão do preenchimento do formulário.
Nos fluxos de registro, lembre-se de que formulários longos e perguntas em excesso podem desencorajar os usuários de se cadastrarem, reduzindo a taxa de conversão. Por isso, mantenha esse formulário claro e conciso. Uma abordagem alternativa seria dividir os formulários individuais em visualizações separadas, mantendo a atenção do usuário em uma única etapa em cada tela. Nesse caso, a visualização teria um único campo de entrada, com um botão Continue ou Next. Tente criar fluxos utilizando cada um dos métodos e faça testes para ver qual deles funciona melhor com seu público-alvo.
Conexão por links de protótipo
Um dos muitos benefícios da criação de wireframes no Adobe XD é que os fluxos que você cria podem ser transformados em protótipos em tempo real, sem a necessidade de exportar os designs para outro aplicativo.
Para configurar um link de protótipo, alterne para o modo Protótipo usando as guias na parte superior da tela. No modo Protótipo, clicar em uma prancheta ou um elemento exibirá uma seta azul que pode ser arrastada para um destino de sua escolha.
Experimente fazer isso com as telas que acabamos de criar. Use um acionador Tocar e teste as diferentes ações. Para um design no estágio de wireframe, mantenha o design simples usando Dissolver ou Deslizar. Usar animações mais complexas pode causar distrações para o que você está tentando testar nesta fase do design.
Conclusão do fluxo
Com o fluxo de cadastro praticamente concluído, mais um conjunto de telas deve ser adicionado para fornecer feedback ao usuário sobre o sucesso ou não do cadastro. Mensagens de sucesso e erro são essenciais para uma boa experiência e não devem ser deixadas de fora nos wireframes.
A mensagem de sucesso fica muito bem em uma página independente que é exibida quando o botão Submit é clicado. Haverá uma tela de processamento e, depois, a mensagem de sucesso poderá ser exibida. A mensagem de erro funciona de maneira semelhante, mas é mais útil mostrar o erro dentro do contexto sempre que possível. Ou seja, se houver um problema com o email ou a senha, realce o campo de entrada relacionado e forneça feedback sobre o que pode ser corrigido.
Criação da tela de sucesso
A tela de sucesso pode ser criada simplesmente copiando a primeira tela e removendo o botão de cadastro e a linha horizontal. Em seguida, substituiremos o alocador de espaço quadrado por um ícone de marca de seleção para indicar o sucesso. Se quiser, você também pode substituir os alocadores de espaço de texto por uma mensagem real, como "Success, registration is complete.".
Criação da tela de erro
Para criar a tela de erro, duplique a página de formulário. Como os erros devem ser exibidos com contexto, essa página pode ser manipulada para mostrar o erro. Neste exemplo, o campo de email será o culpado. Selecione esse bloco e estilize o campo de entrada para incluir uma borda cinza escura (ela provavelmente será vermelha no design final). Com a ferramenta de texto, adicione uma caixa de texto abaixo do campo de entrada com a mensagem "Error: invalid email format" ou outra mensagem apropriada que reflita o erro que está sendo testado.
Outros elementos da página, como o botão Submit, podem ser modificados para refletir o erro ou impedir que o processo continue até que o erro seja resolvido.
Para conectar as telas de erro ou sucesso ao protótipo, você pode conectar uma por vez ou duplicar as outras telas do fluxo e criar dois fluxos separados, um para erro e outro para sucesso. Isso permitirá que você teste os dois fluxos de trabalho com os usuários e faça a iteração.
Como alternativa, você pode usar retângulos transparentes como pontos de destino sobre o botão Submit, cada um apontando para a tela de sucesso ou erro, para criar um pouco de mistério durante o teste.
Este é um wireframe de fidelidade bastante baixa e seu objetivo é ajudar a entender como várias telas e visualizações se conectam para criar uma jornada do usuário. Começar pelo agrupamento de elementos básicos em componentes para reutilização facilitará a transição para uma fidelidade mais alta. Os componentes podem ser estilizados novamente para cada estágio do projeto e aplicados a todo o design, tornando mais eficiente a iteração pelo projeto.
Compartilhamento do wireframe para feedback
Finalmente, usando o modo Compartilhar do Adobe XD, esse fluxo pode ser compartilhado para testes com usuários remotos ou para feedback geral do design. Com o fluxo selecionado, escolha Revisão de design ou Teste de usuário no menu suspenso de tipos de link. Esse link pode ser, então, distribuído e facilmente atualizado com um clique à medida que as iterações forem concluídas.
Parabéns! Você acabou de criar o wireframe de um fluxo de cadastro no Adobe XD. Agora, aplique o que aprendeu para criar a parte do fluxo de logon desse design de aplicativo.
