Guia Completa para Criação de Wireframes para Aplicações Móveis

Tempo estimado: 1-2 horas. Eu recomendo fazer este exercício com os principais interessados.

Comecemos com a premissa de que você foi incumbido de criar uma aplicação móvel. A primeira coisa que você deve perguntar é: “Que problema estou resolvendo e para quem estou resolvendo”? As respostas a esta pergunta composta estabelecerão a base para o seu design, pois fornecerão insights que poderão impulsionar as características e funções dos seus designs. Estas respostas certamente também o ajudarão a decidir qual será o MVP (produto mínimo viável) para o seu design.

Por exemplo, você pode ter muitas funcionalidades no roadmap do produto, mas você só precisa se concentrar nas funcionalidades essenciais para lançar com sucesso a primeira versão do aplicativo. Você pode começar perguntando “Que características e funções precisamos criar para que nosso público-alvo possa completar seu objetivo/tarefa?”

Para responder esta pergunta, você pode criar um fluxo de usuários baseado no “caminho feliz” de seu usuário principal (você pode focar em todos os casos de borda mais tarde). Eu recomendo um quadro branco onde você primeiro escreve todos os passos-chave do usuário. Uma vez escritos esses passos-chave, você pode começar a criar esboços de alto nível desses passos. Isto ajuda a determinar que recursos o usuário precisa em cada etapa do caminho e mantém o escopo à distância.

Note: Tente parar de esboçar sem primeiro escrever o fluxo do usuário. Nossas mentes podem ficar muito criativas e fora do caminho se pularmos diretamente para o esboço.

Aqui está como este exercício pode ficar depois de você ter escrito seu fluxo de usuários e criado esboços grosseiros por baixo dele. Lembre-se, não precisa ser bonito, mas deve transmitir suas idéias o suficiente para que você passe para o próximo passo, as wireframes digitais.

Exemplo 1

Exemplo 2

Exemplo 3

Segundo passo: Wireframes digitais de baixa fidelidade

Tempo estimado: 2-3 dias, dependendo do escopo do MVP.

>

Após você ter seus wireflows MVP descobertos, o próximo passo é criar wireframes um pouco mais detalhados. Você poderia criar um protótipo em papel ou ir direto para wireframes digitais (se a velocidade for essencial, eu normalmente pulo para wireframes digitais).

Nota: Se você estiver trabalhando com uma marca estabelecida, pode ser possível usar componentes de um sistema de design existente e você poderia pular direto para alta fidelidade, Passo 3, abaixo.

Eu recomendo a criação de artboards para as telas chave que você descobriu no seu exercício de esboço. O número de telas que você precisa irá aumentar à medida que você se move através do processo de wireframing de esboços, wireframes de baixa fidelidade, para wireframes de alta fidelidade.

Para os wireframes digitais de baixa fidelidade, use a ferramenta de design de sua escolha para criar formas simples e use fontes básicas para criar seus wireframes. Há também muitos kits de IU por aí que podem acelerar este processo e criar designs de baixa fidelidade que são um pouco mais atraentes visualmente. Eu também recomendo usar um tamanho médio de placa de arte que poderia funcionar na maioria dos tamanhos de tela do telefone. Se você tem os dados da sua demografia alvo e que tamanho de telefone é predominantemente usado por eles, então vá com esse tamanho de tela.

Eu uso um tamanho de 875 x 667px de artboard ao usar o Adobe XD (ou qualquer ferramenta de design, pois a maioria tem tamanhos predefinidos incorporados), pois é o “caminho do meio” dos tamanhos de tela (especialmente para o iPhone). Eu acho que este tamanho funciona bem para o iPhone 8 e iPhone X, e acho que funciona bem para o Android também.

Aqui está um exemplo de telas de baixa fidelidade em ação:

Após ter criado as suas telas de baixa fidelidade, testado os seus designs com os utilizadores e recebido o signoff dos interessados, está agora pronto para criar as telas de alta fidelidade.

Terceiro passo: Quadros de fio digitais de alta fidelidade

Tempo estimado: 1+ semanas. Isto dependerá se você tem um sistema de design no lugar ou se você está criando a partir do zero enquanto você vai. Este passo também leva mais tempo, pois provavelmente haverá mais telas adicionadas do que na fase de baixa fidelidade.

Este passo é onde seus designs ganham vida! É também a fase em que seus designs realmente começam a parecer um aplicativo móvel funcional que você pode fazer protótipos, testar, iterar, obter aprovação e, em seguida, finalmente, passar para a equipe de desenvolvimento.

Considerations:

• Se o produto em que você está trabalhando já tem uma marca estabelecida, você provavelmente irá puxar cores, ícones e fontes das diretrizes da marca.
• Se o produto em que você está trabalhando não tem uma marca completamente estabelecida, você pode usar o find and use um kit UI para acelerar o seu processo de design.

A próxima consideração é com que telas você começa? Você pode começar com:

• Telas-chave para cada seção de sua navegação principal, ou;
• Fluxos de usuários-chave para o usuário, ou;
• Priorizar as telas que você desenha com base na ordem do cronograma de desenvolvimento (é normalmente onde eu começo, para que eu possa trabalhar em um método ágil, certificando-se de ter as telas prontas para a entrega, conforme a equipe de desenvolvimento precisar delas).

Neste exemplo, vou mostrar o processo de utilização de um kit de UI estabelecido no Adobe XD. E vou começar com o login/sign up de usuários e criação de perfis porque as equipes de desenvolvimento com as quais trabalhei normalmente começam com gerenciamento de usuários em seu processo de desenvolvimento de aplicativos.

O kit de IU que escolhi já tem uma paleta de cores estabelecida, estilos de caracteres e elementos de IU comuns (também conhecidos como componentes) que podem ser copiados e colados em todos os wireframes.

Note: No início, recomendo transformar quaisquer elementos que você planeja reutilizar em componentes (ou símbolos). Desta forma, se você precisar mudar a seta para trás de uma seta ” ← ” para uma cenoura “<“, você pode mudá-la através do componente mestre e fazer com que ela seja atualizada em todos os wireframes vs. ter que copiar e colar a edição em cada tela que precisa ser atualizada.

Exemplo de cores, estilos de caracteres e componentes:

Para começar o processo, eu começaria a construir as telas de onboarding, de login e de perfil de usuário:

Próximo, eu começaria a construir os elementos de navegação global:

4399>

Após isso, começaria a criar fios de alta fidelidade para todos os fluxos de usuários para o aplicativo, começando com fluxos priorizados baseados na entrega ao desenvolvimento (ou para quaisquer itens que ainda necessitem de testes de usuários).

Eu recomendo criar arquivos de design separados para cada um dos fluxos de usuários chave para que você possa facilmente fazer protótipos e compartilhar com o desenvolvimento quando estiver trabalhando em um método ágil (ou seja, um arquivo para inscrição de usuários e criação de contas, um arquivo para mensagens, um arquivo para experiência de busca, etc.).

Como os designs são aprovados e entregues ao desenvolvimento, eu recomendo criar um arquivo mestre com todas as telas e componentes mestre. Ao trabalhar em equipe, eu normalmente recomendo que uma pessoa esteja a cargo do arquivo mestre, de modo a reduzir a confusão. Desta forma, cada membro da equipe sabe que está puxando do arquivo master aprovado quando estiver trabalhando na criação de novas funcionalidades e fluxos para o app.

Por exemplo, aqui está uma visão aérea de um arquivo master para um dos meus projetos. Note que eu agrupei e ordenei as telas por fluxo de usuários e prioridade de desenvolvimento. Continuarei a adicionar a este arquivo mestre enquanto construo a próxima seqüência de fluxos de usuários.

Alguns princípios orientadores para criar melhores aplicativos móveis

Agora que você saiba como começar a criar wireframes para suas experiências digitais, é hora de nivelar sua abordagem de design. Se você está criando uma experiência para dispositivos móveis, em sistemas operacionais como iOS e Android, há algumas considerações importantes a ter em mente. Aqui estão algumas dicas gerais (e algumas opiniões pessoais) sobre como projetar aplicativos móveis e como gastar menos tempo projetando para cada tipo de dispositivo no mercado. Se você está procurando por mais inspiração, você também pode conferir esses exemplos de wireframe para websites e aplicativos móveis.

Eu tenho uma forte convicção de que um design deve ser o mais onipresente possível. Portanto, sempre que possível, eu encorajo um design agnóstico do sistema operacional. Eis porque:

• Se um usuário muda de um telefone Android para um iPhone, ele não deve ter que aprender duas maneiras diferentes de usar um aplicativo que está resolvendo a mesma necessidade. A solução deve continuar a ser a mesma. Agora, eu sei que pode haver diferenças de gestos e de custo específico do dispositivo, mas eu acredito que um aplicativo deve oferecer a mesma IU e fluxo de usuários, independentemente do seu sistema operacional. E funções importantes não devem ser escondidas muito profundamente em menus contextuais; isso é apenas UX.
• É caro desenhar, desenvolver e manter duas (ou mais) experiências totalmente diferentes (especialmente quando a experiência pode ser a mesma independentemente da plataforma).
• Ao desenhar e manter as diferentes experiências, as experiências podem começar a tornar-se muito diferentes. Isto pode prejudicar a marca e tornar mais difícil o acompanhamento e implementação de feedback e recursos.

Então como criar designs onipresentes e ser agnóstico de dispositivos? Aqui está como eu faço:

1. Trate meus designs móveis como se eu estivesse projetando para a web móvel. Meus designs são responsivos porque há infinitos tamanhos de tela e densidades de pixels (estes mudam tão rápido quanto as empresas podem engendrá-los). Como designers, não temos tempo para desenhar para cada densidade de pixels e acho que meus clientes não querem pagar por esse tempo, de qualquer forma. Então, eu uso uma largura de artboard de 375, que funciona para a maioria dos modelos modernos de iPhone e Android.
2. Eu lido com a forma estranha da tela do iPhone X e iPhone 11 dizendo à equipe de desenvolvimento para apenas estender a cor de fundo do cabeçalho para o topo.
3. Eu tenho sorte de ter vários tipos diferentes de telefones ao meu alcance para que eu possa então testar meus designs através do aplicativo móvel XD usando um USB. Isto é útil porque eu posso testar tamanhos de fonte, pontos de toque UI, e a visibilidade do conteúdo da tela quando o teclado está ligado. Também posso testar a linha “dobrar” e ter certeza de que conteúdos importantes, como CTAs e conteúdos importantes, permanecem visíveis e não desaparecem da parte inferior da tela.
4. Tento usar apenas gestos que são universais, por exemplo, tocar, deslizar, pressionar e segurar. Acho que devemos ser capazes de nos concentrar na melhor experiência do utilizador independentemente do SO.
5. Utilizo SVGs para todos os ícones e logótipos para que fiquem óptimos em qualquer resolução de ecrã.
6. Utilizo estruturas de navegação e menu que são universais e não muito específicas do SO.

A única vez que tenho de desenhar wireframes que são específicos do dispositivo é quando estou a fazer protótipos e a chamar uma função de dispositivo nativo, como a câmara. Mesmo isso pode variar de telefone para telefone e OS.

A maioria dos meus clientes começa com iOS. Nós testamos e validamos o design e, uma vez que está no caminho certo, então nós desenvolvemos para Android. E sabe de uma coisa? Tentamos não alterar a interface, ou o usuário flui. Em vez disso, nós focamos na marca, aparência, características e funções, e fluxos de usuários. Tudo volta ao mais importante: a experiência principal do usuário.