Como ter sucesso no design de wireframe

Na maioria das vezes, tendemos a subestimar coisas que nos são familiares. Também é muito provável que subestimemos aquelas coisas que, embora novas, parecem muito simples de processar. E isso está correto até certo ponto. Mas, quando nos deparamos com casos complexos e todas as medidas são tomadas, uma boa e sólida compreensão do básico pode nos ajudar a encontrar as soluções certas.

Neste artigo, vamos dar uma olhada mais profunda em uma das atividades mais simples e muitas vezes subestimadas no desenvolvimento web que é o design de wireframes. Vamos descobrir o que são wireframes, por que precisamos projetá-los, como tirar o máximo proveito do design de wireframes e como levá-lo ao próximo nível.

De acordo com o relatório The Top 20 Reasons Startups Fail da CB Insights, 17% das startups relataram a falta de facilidade de uso como o motivo de seu fracasso. Projetar uma interface amigável não é uma tarefa trivial, principalmente para produtos grandes e complexos onde existem muitas entidades, dependências e elementos a serem organizados. Para projetar produtos tão complexos, você deve seguir uma abordagem de cima para baixo e o design de wireframes é a melhor técnica que pode ajudá-lo com isso.

Primeiro, vamos definir os termos

Wireframe — também conhecido como esquema de página ou plano de tela, e é um guia visual que representa a estrutura esquelética de um site ou aplicativo.

A definição adicional que veremos é o wireframing – um processo de criação de um wireframe e comumente usado para apresentar conteúdo e funcionalidade em uma página que leva em consideração as necessidades e jornadas do usuário. Os wireframes são usados ​​no início do processo de desenvolvimento para estabelecer a estrutura básica de uma página antes que o design visual e o conteúdo sejam adicionados.

À primeira vista, o wireframe parece simples. E aqui reside o grande problema: que tendemos a não prestar atenção suficiente às coisas simples. Uma maneira de nos ajudar a obter o máximo de benefícios do wireframing é definir os objetivos do produto ou serviço.

O principal objetivo do wireframing que conseguimos é mostrar à equipe e aos stakeholders quais entidades, páginas e componentes o aplicativo terá e como esses elementos do produto digital irão interagir entre si.

A partir da definição do objetivo podemos ver o quão grande é o impacto do wireframing tanto para o processo de desenvolvimento quanto para o produto final.

Quando temos em mente os objetivos do processo de wireframes, ainda precisamos prestar atenção em quais são as armadilhas comuns a serem evitadas durante o design de wireframes.

Erros de wireframe que queremos evitar

• Criação de wireframes para 'verificação de caixa';
• Ignorando o estágio de wireframes;
• Preparação de wireframes após os designs visuais;
• Não entendendo por que usar wireframes.

Os wireframes devem preceder o estágio de design visual, e não vice-versa. É como decidir sobre a pilha de tecnologia para seu aplicativo depois de ter o código escrito.

O design de estrutura de arame estabelece a base para a qualidade do design e, quanto melhor entendermos o objetivo desta fase, mais benefícios poderemos obter. Então vamos mergulhar mais fundo e descobrir por que precisamos projetar wireframes e quais valores essa técnica traz.

As empresas que não têm conhecimento do design do produto podem dar boas-vindas à prática de pular o design do wireframe, pois permite reduzir os custos do projeto, mas essa decisão pode levar a um possível fracasso a longo prazo. E você, como designer, deve explicar por que estamos fazendo isso, como isso ajudará o produto final e como isso pode até economizar despesas futuras.

Em seguida, vamos verificar alguns pontos que podem ajudá-lo a entender melhor por que precisamos de wireframes e ver como os wireframes ajudam a obter feedback de seus desenvolvedores, clientes e futuros usuários do seu produto.

Por que você deve projetar wireframes

Ajude sua equipe a estimar e refinar o escopo do trabalho

Os wireframes permitem que os designers criem rapidamente uma representação visual do produto futuro e o demonstrem à equipe para as revisões necessárias. Os wireframes também ajudam você a mostrar à sua equipe quais telas o aplicativo terá, quais elementos e controles estarão em cada tela e como todos os elementos irão interagir entre si. Além disso, olhar através de wireframes é muito mais rápido do que ler especificações. Além disso, nos ajuda a evitar discrepâncias de escopo entre as estimativas iniciais e as finais.

Envolva todos os membros da equipe no estágio de design do produto

Todos nós estivemos na posição de ter criado um design de alto nível, apenas para enfrentar restrições de desenvolvimento. O uso de wireframes nos permite envolver os desenvolvedores na discussão dos designs nos estágios iniciais, permitindo que eles forneçam feedback e sugira mudanças antes de começar a trabalhar no design visual. Dessa forma, você pode acelerar o processo de design e evitar desperdício de tempo e dinheiro.

Faça uma demonstração para clientes

Obter feedback rápido de seus clientes e partes interessadas é um componente importante do processo de design. Além disso, todos nós experimentamos vários pedidos de mudança de nossos stakeholders e isso é normal. Com wireframes, poderíamos tornar esse processo mais eficiente. Fazer alterações em protótipos requer mais tempo e esforço do que fazer alterações em wireframes, isso permitirá que você seja mais ágil e não perca tempo extra com retrabalho.

Realizar testes de usuário

De acordo com Eric Ries, autor de Lean Startup, quanto mais cedo você realizar o teste do usuário, melhor – ninguém quer lançar um aplicativo e descobrir que os usuários não sabem como usá-lo corretamente. Os wireframes podem ajudar os designers a obter feedback valioso de usuários em potencial e não perder tempo desenvolvendo protótipos interativos complexos quando não são necessários.

O fato de designers de UI/UX usarem wireframes não significa necessariamente que eles fazem isso certo. Para isso, você deve se lembrar e seguir as melhores práticas.

Práticas recomendadas de wireframe

Para trazer os melhores resultados e servir uma base sólida para uma interface de usuário adicional, você precisa seguir várias regras simples:

1. Minimize o uso de cores em wireframes

Se você estiver usando paletas de cores ricas em seus wireframes, lembre-se do objetivo do wireframe (mostrar quais elementos o produto terá e como eles devem interagir uns com os outros) e pense se cores extras ajudam você a alcançá-lo .

Em alguns casos, eles poderiam. Mas, em geral, adicionar cores aos seus wireframes pode distrair a atenção do espectador e certamente dificultará as atualizações. Além disso, há outra questão importante a ser considerada – nem todos os clientes têm um bom entendimento das técnicas de UX e podem usar wireframes coloridos para projetos finais.

No entanto, isso não significa que você nunca deve usar cores em wireframes e ficar estritamente com a paleta preto e branco. Às vezes, o uso de cores para destacar componentes específicos é justificado. Por exemplo, você pode usar vermelho para estados de erro ou azul para notas, etc.

2. Use Design Simples de Componentes

Quando você adiciona componentes aos seus wireframes, opte por designs básicos. Os wireframes não se destinam a conter componentes totalmente projetados e detalhados. Em vez disso, eles devem ser facilmente reconhecidos pelos membros de sua equipe e partes interessadas. Adicionar componentes detalhados custará muito tempo e esforço sem ser particularmente útil.

3. Mantenha a consistência

Componentes semelhantes devem ter a mesma aparência em todos os seus wireframes. Se os mesmos componentes parecerem diferentes, os desenvolvedores provavelmente questionarão se eles são realmente os mesmos e até adicionarão mais tempo às estimativas por causa de designs diferentes. Ao trabalhar em wireframes, lembre-se de uma regra simples: seja consistente e tente não criar confusão.

4. Use conteúdo real

De tempos em tempos, pudemos ver que os designers de UI/UX não adicionam conteúdo real nos wireframes e usam lorem ipsum . Esse é um erro comum que poucos designers percebem que cometem. Você pode se opor e dizer que o conteúdo não está disponível no estágio de design. Bem, basta usar a versão de rascunho do conteúdo.

O conteúdo afeta o design que você criará, e o conteúdo do rascunho o ajudará a tomar as decisões certas e entregar o design excelente. Se você usar lorem ipsum , no entanto, não verá a imagem completa e provavelmente precisará fazer muitos ajustes na interface do usuário ou, pior ainda, criará um design que não funcionará. Além disso, o conteúdo real agregará valor aos seus wireframes, explicará melhor o contexto e talvez indique que você precisa começar a reunir o conteúdo real já.

5. Use anotações

Pode acontecer que algumas soluções de design não possam ser visualmente ilustradas, de modo que as partes interessadas ou os desenvolvedores possam ter dúvidas sobre elas. Por exemplo, a lógica por trás de alguns controles. Nesses casos, você pode fornecer anotações na tela para explicar a lógica por trás disso. Dessa forma, sua equipe entenderá suas soluções e você não precisará perder tempo discutindo-as.

6. Baixa a Alta Fidelidade

Não existe uma regra rígida. Às vezes, você deve optar por wireframes de baixa fidelidade, enquanto alguns projetos podem exigir outros de alta fidelidade. Depende do projeto, então se você quiser adicionar mais detalhes aos wireframes, não hesite em fazê-lo. Mas, de acordo com Eric Ries, não faça trabalho extra quando isso não agregar valor, comece do básico e adicione detalhes enquanto forem necessários. Por exemplo, se você precisar chamar a atenção dos desenvolvedores para alguma solução personalizada, adicione mais detalhes para ilustrá-la em seus wireframes.

7. Estenda Wireframes para Protótipos

Como designers trabalhamos com produtos diferentes, alguns deles têm interações simples e comuns, e alguns deles têm interações bastante avançadas. Às vezes, os wireframes não são suficientes para ilustrar a interação de interfaces complexas e incomuns, mas em vez de escrever longas notas e gastar horas em explicações, você pode estender seus wireframes para protótipos interativos.

A boa notícia é que hoje temos uma ampla gama de ferramentas simples, mas muito poderosas, como Figma, Invision, Adobe XD, UXPin, Axure, Moqups, etc. desenvolvimento de protótipos simples.

Ferramentas de design de estrutura de arame

Agora é hora de escolher uma excelente ferramenta de wireframing que o ajudará a criar designs incríveis e otimizar seu fluxo de trabalho. Existem muitas opções diferentes que você pode usar para wireframes, e você pode ter usado algumas delas antes. Eu gostaria de lhe dar uma compreensão básica de como eles são diferentes.

A maioria das ferramentas de wireframe são adaptadas para:

• Simplicidade
  Eles têm uma barreira de entrada baixa e são perfeitos para pessoas que dão os primeiros passos no design de UI/UX e não têm experiência no uso de softwares mais sofisticados.
• Colaboração
  Estes são embalados com uma rica funcionalidade para trabalho em equipe. A colaboração é a espinha dorsal do desenvolvimento de software moderno, portanto, as melhores ferramentas de wireframing não apenas fornecem muitos recursos, mas permitem uma colaboração eficiente e fácil entre todos os membros da equipe envolvidos no processo de design.

Aqui estão as ferramentas de wireframe mais usadas sob medida para colaboração:

• Figma
  Uma poderosa ferramenta baseada em nuvem que vem em uma versão web e aplicativos de desktop para Windows e macOS. O Figma vem com muitos recursos poderosos para construir wireframes, protótipos, UIs e muito mais (veja a tabela abaixo).
• Esboço
  Esta ferramenta é extremamente popular entre os designers de UI/UX. Se você precisar ir além do conjunto de ferramentas padrão do Sketch, poderá usar dezenas de plugins para obter funções extras. Ao contrário de muitos de seus concorrentes, o Sketch está disponível apenas no macOS e você precisará de uma solução de terceiros para colaboração.

Existem muitos aplicativos que você pode usar para projetar wireframes. Você não deve fazer uma escolha com base apenas nos recursos fornecidos no aplicativo. Em vez disso, eu aconselho você a tentar explorar todos eles e decidir qual funciona melhor para você. Abaixo, você pode encontrar uma lista de algumas das ferramentas mais populares para começar.

Como exemplo do poder das ferramentas de design modernas, gostaria de compartilhar minha própria experiência e mostrar como configuramos um processo de design de wireframing eficaz com uma das ferramentas acima.

Estudo de caso: como configuramos um processo de wireframe em várias equipes

Contexto

A empresa em que trabalhei estava construindo produtos digitais fintech complexos. Além da equipe de design, havia uma equipe profissional de analistas de negócios (BAs). Eles prepararam os requisitos e criaram wireframes de baixa fidelidade que passaram para nossa equipe de design.

Escolhendo a ferramenta

Precisávamos escolher uma ferramenta completa para as equipes de BA e de design. Como a maioria dos analistas de negócios tem habilidades de design bastante baixas, queríamos encontrar uma ferramenta que fosse simples o suficiente para BAs e – ao mesmo tempo – poderosa o suficiente para designers. Além disso, a colaboração fácil era a prioridade de nossa equipe. Com base nesses critérios, optamos pelo Figma.

Criando a biblioteca de componentes

Para agilizar o processo de design do produto, criamos uma biblioteca personalizada de componentes que a equipe de BA poderia usar. Isso nos permitiu acelerar o wireframe, pois os analistas de negócios podiam usar rapidamente blocos prontos em vez de desenhar seus próprios.

Treinando a equipe

Para mostrar como usar o Figma e a biblioteca de componentes, realizamos um workshop para nossa equipe de BA. Também achamos importante ensinar a eles alguns recursos extras, como prototipagem.

Resultado

No nosso caso, o Figma provou ser eficiente para wireframing e colaboração, embora os membros da equipe estivessem localizados na Ucrânia, Austrália e Filipinas. Atualmente usamos o Figma para o canal de comunicação — provou ser mais conveniente colaborar nos wireframes por correio ou em mensageiros.

Resumindo

Sendo uma prática simples, o design de wireframes geralmente não recebe atenção suficiente de nós, designers, quando os enfrentamos pela primeira vez.

Como resultado, a falta de atenção para esta técnica leva a uma série de falhas, quando adicionamos muita decoração aos wireframes ou criamos wireframes low-fi para fins de check-box quando o projeto requer uma solução mais detalhada , ou até mesmo pule esta etapa e vá direto para o design visual da interface do usuário.

Normalmente, todos esses erros são resultado de uma má compreensão dos objetivos de design de ambos os wireframes ( ou seja, mostrar quais elementos o produto terá e como eles devem interagir entre si ), bem como uma má compreensão de quando os wireframes podem ajude-nos, como:

• Os wireframes podem ajudar a equipe a obter estimativas mais precisas do projeto.
• Os wireframes podem ajudar a envolver todos os membros da equipe para projetar processos e evitar erros de engenharia que afetarão o processo de desenvolvimento.
• Os wireframes podem nos ajudar a fazer apresentações antecipadas para clientes, partes interessadas e conduzir sessões de teste de usuários para obter feedback o mais rápido possível e economizar tempo no desenvolvimento de soluções ruins.

Hoje, como designers, temos mais sorte do que nunca, porque existem dezenas de ferramentas disponíveis para projetarmos wireframes e também integrar essa atividade sem problemas em nosso processo geral de design.

A única coisa que precisamos fazer é gastar algum tempo para incorporar tanto a técnica quanto as ferramentas em nosso próprio processo de design e encontrar uma maneira de fazê-los funcionar para que possamos levar nosso processo de design de produto para o próximo nível. Isso eles certamente podem.