Um guia passo a passo para criar wireframes de aplicativos móveis

uxplanet.org em UX Planet Seguir 9 de jul · 7 min ler

Os wireframes são o backbone de qualquer projeto e o design de aplicativos móveis não é uma exceção. Os wireframes servem como um meio termo entre esboços de baixa fidelidade e primeiros protótipos interativos. O processo real de wireframing para celular varia drasticamente. Designers diferentes abordam o wireframing e sua tradução para o design de alta fidelidade de diferentes maneiras. Enquanto algumas empresas defendem o código diretamente dos esboços , o processo de design típico contém as seguintes etapas: Esboço (nível conceitual) ? Wireframe (nível de componente) ? Mock / Prototype (nível de estilos / nível de interações) ? Código.

É importante lembrar que o design do produto é um processo de várias etapas, e o wireframing não deve ser o primeiro passo nesse processo. Antes de criar wireframes, é essencial investir tempo suficiente na pesquisa de usuários . Os dados qualitativos e quantitativos da pesquisa servirão de referência durante o wireframing.

Para este guia, vou criar wireframes de um aplicativo móvel nativo do iOS para entrega de comida.

Antes de criar wireframes

Mapeie um fluxo de usuários de destino

Antes de iniciar o wireframing, você precisa ter uma ideia clara em várias telas que precisará projetar e como os usuários interagirão com elas. É muito mais fácil obter essa compreensão quando você tem um fluxo de usuário tangível.

Um fluxo de usuários é uma série de etapas que um usuário executa para atingir uma meta específica. O objetivo do usuário é um elemento fundamental do fluxo do usuário. Para atingir um objetivo específico, um usuário pode tentar alguns caminhos diferentes; é por isso que os fluxos de usuários podem não ser lineares.

Fluxos de usuários irão ajudá-lo a entender quais wireframes você precisará criar e como eles devem ser conectados.

É possível visualizar o fluxo usando objetos básicos, como caixas e setas. Os fluxos de usuários podem ser criados em papel ou em uma ferramenta digital. Abaixo está uma amostra de um fluxo de usuários para o aplicativo de entrega de comida criado usando o Balsamiq:

Fluxo do usuário de um processo de pedidos de alimentos

Esboce o núcleo do fluxo do usuário

O próximo passo depois de definir o fluxo do usuário é visualizá-lo. Pode ser tentador usar a ferramenta de prototipagem digital para isso, mas é melhor resistir a essa tentação. O objetivo deste passo é deixar sua criatividade brilhar e explorar várias direções de design . Em muitos casos, esboçar no papel ou usar uma ferramenta de desenho digital funciona melhor para isso.

Os esboços permitem criar conceitos rápidos que você pode compartilhar com outras pessoas , obter feedback e iterar sobre ele. Quando esboçar, sempre tente pensar a partir da perspectiva do usuário – pense no objetivo que um usuário deseja realizar. O objetivo de uma pessoa que usa um aplicativo de entrega de comida é obter comida saborosa o mais rápido possível. Para cada tela projetada, pergunte:

  • Qual é o propósito desta página?
  • Como esta página ajuda um usuário / empresa a alcançar seu (s) objetivo (s)?

Abaixo está um esboço de uma tela inicial criada em Balsamiq. Observe que todas as seções importantes desta página são representadas como um retângulo.

Desenhar é uma ótima maneira de concretizar idéias

Wireframing

Os esboços que você cria formarão uma base para seus wireframes. Quando se trata de wireframing, esforce-se para criar wireframes de média fidelidade . Os wireframes de média fidelidade são muito úteis durante as discussões com outros designers e desenvolvedores.

Definir um quadro móvel

Embora seja possível usar um retângulo simples como um quadro para seu design móvel , é muito melhor selecionar o quadro que tem dimensões de um dispositivo real para o qual você projeta. Primeiro, o quadro funcionará como uma restrição natural – ele impedirá que você coloque muitos elementos na tela. Em segundo lugar, um quadro criará uma ilusão de um design real.

Normalmente, você tem uma variedade de dispositivos que você precisa projetar. É recomendável começar com o dispositivo com um tamanho de tela médio . Por exemplo, se você desenvolver um aplicativo para iOS em 2019, poderá usar um quadro do iPhone XS.

Molduras para dispositivos iOS móveis em Balsamiq

Determinar Layout Com Caixas

Nos estágios iniciais do wireframe, seu objetivo é criar uma hierarquia visual clara – definir layout e estrutura. Nesse estágio, você não se concentra no conteúdo em si, precisa pensar em como ele é apresentado. Planeje o layout de acordo com o modo como você deseja que o usuário processe as informações e comece desenhando caixas na tela.

Coloque um grande foco na ordem das informações que você deseja apresentar aos usuários. Observe que as pessoas verificam páginas da Web e telas de telefone de cima para baixo, da esquerda para a direita (o padrão em forma de F funciona tanto para telas de desktop quanto de celular).

Abaixo está um exemplo de um wireframe para a tela inicial do nosso aplicativo. Observe como definimos a hierarquia de elementos usando o tamanho dos objetos.

Criando uma hierarquia visual usando formas básicas

Use padrões de design

A familiaridade é uma das propriedades mais importantes do bom design UX. Quando as pessoas vêem elementos da interface do usuário familiares em um novo produto, eles podem confiar em sua experiência anterior ao interagir com esse produto. Tanto o Android quanto o iOS possuem padrões de design nativos que simplificam a tarefa de criar uma experiência familiar para designers. Padrões de design agem como blocos de conteúdo reutilizáveis – é possível usá-los para resolver problemas comuns (como navegação global).

Padrões de design Android no Balsamiq

A barra de guias inferior, a gaveta lateral e o botão de ação flutuante (FAB) são os padrões usados com mais frequência para a navegação móvel de nível superior. Se você deseja criar caminhos de navegação simples e claros, use um desses padrões no seu aplicativo.

Navegação da barra de guia inferior

Trazer cópia real

Depois que você estiver satisfeito com sua hierarquia visual, comece substituindo espaços reservados e texto fictício por conteúdo real (cópia real ou relevante para o usuário). Há uma razão importante pela qual devemos evitar textos falsos neste estágio – Lorem Ipsum não comunica como a página ajuda os usuários a alcançar seus objetivos. Além disso, muitos elementos visuais que criamos são baseados no conteúdo que temos em nossos produtos. Ao começar a adicionar conteúdo real, você perceberá que alguns elementos da interface do usuário (ou até mesmo as seções da interface do usuário) não são necessários para o seu produto.

Às vezes, ao preencher seus wireframes com detalhes reais, você pode perceber que o layout que você tem não está funcionando bem. Nesse caso, é importante iterar e encontrar uma maneira melhor de representar as informações que você está tentando comunicar.

Depois de preencher a página com a cópia real, teste se a página flui para o usuário. Algum conteúdo da sua página pode estar com defeito. Este é o momento perfeito para reorganizar o conteúdo da página e melhorar a composição.

Abaixo está um exemplo de nosso wireframe para nossa tela inicial que possui dados reais. Tamanhos de fonte diferentes são usados para priorizar alguns blocos de interface do usuário (como categorias de alimentos).

Ao adicionar conteúdo real em seus wireframes, você entenderá se a informação está sendo bem estruturada ou não.

Certifique-se de que seu conteúdo seja bem dimensionado

Se o seu design parece ótimo em uma tela de telefone de tamanho médio como o iPhone XS, isso não significa que os usuários do iPhone 5 e do iPhone XS Max terão a mesma ótima experiência. Embora seja absolutamente bom começar com uma tela de tamanho médio quando se trabalha com wireframe, também é essencial verificar a aparência do conteúdo em diferentes tamanhos de tela (telas menores e maiores) e ajustá-lo, se necessário.

O design da tela inicial no iPhone XS e no iPhone 5

Conecte as páginas juntas para criar um fluxo

Embora seja possível enviar seu design como uma coleção de telas individuais, é melhor criar um fluxo a partir delas. Os fluxos de UX facilitam para a equipe compreender os detalhes dos cenários de interação – eles comunicam como as pessoas devem interagir com um produto.

Os fluxos de UX também farão você pensar na funcionalidade do aplicativo como um todo. Por exemplo, depois de visualizar o fluxo de UX, você pode notar que precisa introduzir um estado extra entre a tela inicial e uma página com resultados de pesquisa (porque o back-end de seu sistema levará alguns segundos para retornar os resultados).

Também é uma boa ideia dar a cada tela um número de referência. Os números de referência facilitarão muito a sua vida ao discutir o projeto com outros membros da equipe ou partes interessadas.

Criando um fluxo simples

Teste suas decisões de projeto

O teste é a etapa final (e uma das mais importantes) do wireframing. O teste implica em interações do usuário e é por isso que esse termo é frequentemente usado no contexto de protótipos. Mas é possível realizar testes simples para um fluxo criado a partir de wireframes . Usando o Balsamiq, é possível criar protótipos clicáveis simples, ligando wireframes juntos. O objetivo desse teste é verificar se as telas funcionam juntas.

Conclusão

O objetivo final do wireframing é identificar o esboço do conteúdo e criar uma base sólida para as etapas futuras do processo de design. Wireframes bem projetados facilitam muito o design visual e de interação.

Como em qualquer atividade de design, gaste tempo suficiente experimentando diferentes ferramentas e processos e você encontrará seu próprio estilo para wireframing. A prática leva à perfeição.

Palavras de Nick Babich

Originalmente publicado no site de educação UI da Balsamiq