Processo de criação de wireframes em 5 passos para criar produtos melhores

Estou confiante de que já ouviu falar dos benefícios dos wireframes, seja nos seus cursos de gestão de produto, seja através de colegas ou pares. Também presumo que já tenha tentado introduzir algum tipo de processo de criação de wireframes no seu produto.

Mas será que o seu processo está a funcionar bem? Está a conseguir tirar o máximo partido dos seus wireframes com a forma como os cria atualmente? Bem, isso depende realmente do processo que está a utilizar.

Para o ajudar a aumentar a eficácia da criação de wireframes, deixe-me partilhar a minha experiência e falar-lhe de um processo de criação de wireframes que considero ser o melhor que existe.

A Criação de Wireframes É Uma Parte Essencial do Processo de Design UX

Os wireframes são representações visuais de alto nível do seu produto que pode utilizar para ilustrar o aspeto e o funcionamento que pretende para o produto. Com estas representações visuais, consegue testar e iterar a sua ideia antes de pedir aos seus engenheiros que intervenham e iniciem o processo de desenvolvimento — poupando tempo e dinheiro.

Gosto particularmente da definição de criação de wireframes dos especialistas em experiência do utilizador da NN/g, pois evidencia o principal benefício que obtém com esta prática.

Técnica rápida e económica para identificar precocemente os principais problemas de usabilidade através de esboços e papel. É perfeita para processos Ágeis e Lean.

Independentemente do método de criação de wireframes que escolher (desenhar em papel é perfeitamente aceitável!) ou da ferramenta de criação de wireframes que decidir utilizar (para isso, consulte a nossa lista das melhores ferramentas de criação de wireframes), recomendo que siga este processo, que descobri depois de experimentar praticamente todos os processos de criação de wireframes que existem.

Passo n.º 1: Certifique-se de que Conhece Suficientemente Bem os Seus Utilizadores

Um bom design começa com uma equipa que conhece bem os seus utilizadores. Afinal, quem precisa do seu design e do produto que este representa se não for capaz de responder adequadamente às necessidades das pessoas a quem se destina? Por isso, o passo mais importante que deve dar antes de iniciar a criação de wireframes é a investigação de utilizadores.

Na realidade, a investigação de utilizadores deve continuar durante todo o ciclo de vida do seu processo de criação de wireframes (e também depois disso), mas vamos concentrar-nos na fase inicial, quando está a tentar compreender as necessidades e a realidade quotidiana dos seus futuros clientes.

Eis algumas das atividades importantes que recomendo realizar durante esta fase:

Entrevistas Exploratórias: Quer saber o que os seus utilizadores querem? Então, que tal perguntar-lhes diretamente? Pode começar por elaborar uma lista de perguntas que ajude os seus utilizadores a falar sobre os problemas que estão a enfrentar e as soluções que estão a utilizar para resolver esses problemas.

Depois, pode contactar e recrutar potenciais utilizadores através das redes sociais, de plataformas especializadas como a Userinterviews ou a Respondent, ou até conhecê-los em feiras profissionais.

Por fim, realiza a entrevista com um gravador (para a poder analisar mais tarde) ou com um colega de entrevista sentado ao seu lado e a tomar notas.

Nota: Idealmente, fará ambas as coisas.

Inquéritos: Embora as entrevistas sejam uma excelente fonte de dados qualitativos que ajudam a descobrir as razões por detrás das necessidades e do comportamento dos utilizadores, os inquéritos fornecem-lhe uma combinação de dados qualitativos e quantitativos, permitindo-lhe validar as conclusões com significância estatística.

Não vou aprofundar demasiado este tema aqui, pois temos um guia completo sobre perguntas para inquéritos que pode consultar.

Estudos de Campo: Neste caso, observa os seus utilizadores no seu “habitat natural”. Isto significa que está presente, virtual ou fisicamente, no ambiente onde os seus utilizadores-alvo enfrentam os problemas que pretende resolver.

Por exemplo, imagine que está a criar uma ferramenta que facilite a edição de vídeos para as redes sociais. O seu estudo de campo consistiria em observar o processo de um influenciador das redes sociais a gravar um vídeo para o TikTok, a editá-lo e a carregá-lo no seu canal.

Embora os estudos de campo sejam relativamente difíceis de organizar (nem todos os utilizadores se sentirão à vontade com a observação das suas atividades diárias), proporcionam-lhe o contexto e os conhecimentos mais ricos sobre os seus utilizadores.

Workshops de Descoberta com as Partes Interessadas: Sim, um excelente design da experiência do utilizador é construído em torno das necessidades dos utilizadores, mas também não devemos esquecer as suas principais partes interessadas. Embora os seus utilizadores também sejam partes interessadas, utilizarei este termo para representar os seus fundadores/órgãos de direção, os seus investidores, qualquer entidade jurídica ou regulamentar com a qual tenha de trabalhar, etc.

Por vezes, toma decisões de design não com base nas necessidades dos utilizadores, mas tendo em consideração:

• A sua visão e estratégia: Os utilizadores da Apple adoram fios e ligações com fios, mas a visão da Apple é sem fios — é por isso que continuam a remover portas. (Agora já sabe!)
• O seu contexto jurídico: Ter uma enorme seleção de opções de cookies não é a interface mais fácil de utilizar, mas é algo que poderá ser legalmente obrigado a apresentar.

Também há argumentos a favor da intuição — apesar de conhecer bem os seus utilizadores, poderá consultar a sua própria intuição para tomar algum tipo de decisão de conceção.

Com o conceito e os tipos de investigação esclarecidos, vejamos como tudo isto se aplica na vida real através de um exemplo.

Exemplo 1: Criar uma ferramenta de estruturas para um profissional de UI

Imagine que está encarregado de criar uma ferramenta para elaborar estruturas (algo semelhante ao Balsamiq) e quer saber exatamente como os seus utilizadores-alvo — neste caso, equipas de conceção — a irão utilizar e que problemas esperam resolver.

Para descobrir isso, podemos elaborar um questionário que queremos colocar aos nossos utilizadores durante uma entrevista. Eis o que podemos incluir:

Agora, imaginemos que descobrimos que o retorno consiste sobretudo num comentário sobre uma parte específica da estrutura do produto e que o gestor de produto tem de aprovar a conceção da estrutura. Estas são duas conclusões que irão afetar diretamente a nossa conceção, uma vez que precisamos de criar um fluxo de trabalho e uma interface de utilizador para comentar a estrutura e aprová-la.

Em suma, realizar uma investigação exploratória é a parte mais importante do seu processo de criação de estruturas e não recomendo que a ignore. Agora, com todas as aprendizagens em mãos, passemos ao passo seguinte do nosso processo de criação de estruturas.

Passo n.º 2: Criar os seus fluxos de utilizador

Antes de criar os próprios ecrãs/páginas e de colocar neles os seus componentes, como formulários, cartões, imagens, botões, etc., precisa de compreender a sequência de passos que imagina que os seus utilizadores irão seguir.

Estas sequências também são conhecidas como fluxos de utilizador e representam todos os caminhos possíveis que os seus utilizadores podem seguir para alcançar os seus objetivos. Estes objetivos podem ser algo comum e “administrativo”, como criar uma conta ou alterar a palavra-passe, ou representar as suas funcionalidades principais, como pesquisar e transmitir música em fluxo no Spotify.

De qualquer forma, criar fluxos de utilizador é importante, pois irá ajudá-lo a visualizar melhor todos os ecrãs/páginas que pretende conceber, bem como o conteúdo necessário em cada um deles.

Para compreender melhor os fluxos, deixe-me mostrar-lhe um utilizando a ferramenta de criação de fluxogramas Flowmapp.

Exemplo 2: Visualizar o fluxo de utilizador de uma ferramenta de conceção para a Web utilizando o Flowmapp

Suponhamos que está a criar uma ferramenta de conceção para a Web com funcionalidade de arrastar e largar, como o Webflow. Os seus utilizadores são designers de sítios Web sem código e pretende visualizar os passos que irão seguir para adicionar uma imagem de fundo à sua página Web.

Eis o aspeto que o fluxo de utilizador dessa funcionalidade terá no Flowmapp:

Como podemos ver, a ênfase num fluxo de utilizador está mais nas ações que o utilizador realiza e na sequência/causalidade entre elas do que nas páginas e na respetiva conceção.

Neste exemplo, queremos que o utilizador possa selecionar uma imagem da galeria ou carregar/adicionar uma à galeria. Também queremos que o utilizador possa pré-visualizar a imagem antes de a nossa ferramenta a aplicar como fundo da página Web do utilizador.

Ao observar o fluxo, compreendemos que o utilizador permanecerá na mesma página — o editor de páginas Web — e talvez veja outro ecrã a apresentar a galeria de imagens sob a forma de uma janela emergente.

Por conseguinte, há uma página e uma janela emergente para conceber, com elementos e funcionalidades de conceção relevantes.

Agora que temos uma visão geral dos passos que os utilizadores seguem para alcançar os seus objetivos no nosso produto, podemos finalmente começar a criar as estruturas propriamente ditas.

Passo n.º 3: Começar com uma estrutura de baixa fidelidade

Sim, criar uma estrutura é o terceiro passo deste processo. No entanto, acredite em mim: realizar os dois passos anteriores elevará a qualidade da sua estrutura a um nível completamente novo e vale definitivamente a pena dedicar-lhes tempo.

Quanto ao próprio esboço estrutural, recomendo que comece por um de baixa fidelidade. Um esboço estrutural de baixa fidelidade não incluirá detalhes específicos, como as cores/tamanhos corretos e outros atributos de design das suas páginas e ecrãs. Também não terá imagens e texto reais. Em vez disso, terá marcadores de posição para ambos.

E há uma boa razão para um esboço estrutural de baixa fidelidade ser assim e para dever começar por ele — os esboços estruturais de baixa fidelidade são rápidos de criar e editar.

É muito provável que se tenha esquecido de algo bastante importante no seu design. Ao recolher feedback sobre o mesmo (falaremos disso em pormenor no próximo passo), poderá perceber que há muitos itens/fluxos que precisam de ser alterados.

Se tivesse um design completo, fazer estas alterações teria levado dias. Mas, com um esboço estrutural de baixa fidelidade, pode fazer as suas edições e submeter o seu design a outra ronda de feedback em algumas horas ou menos.

Por isso, depois de elogiarmos tanto os esboços estruturais de baixa fidelidade, vejamos como são, utilizando uma ferramenta de criação de esboços estruturais popular — o Balsamiq.

Exemplo 3: Criar um esboço estrutural de um sítio Web

A beleza das ferramentas de design especializadas na criação de esboços estruturais, especialmente os de baixa fidelidade, é que não tem de desenhar cada elemento de raiz.

Em vez disso, normalmente incluem uma variedade de elementos básicos de interface pré-criados (por exemplo, imagens, menus, trilhos de navegação, botões, etc.), juntamente com controlos de arrastar e largar, para tornar o processo de design especialmente rápido. Eis um exemplo que criei utilizando o Balsamiq.

Tendo em conta a própria natureza dos esboços estruturais de baixa fidelidade, normalmente são apresentados em tons de cinzento ou têm uma utilização mínima de cor e de design visual. Em vez disso, tudo o que pode ver é o aspeto geral dos elementos da interface do utilizador no seu design, bem como a sua disposição e arquitetura da informação.

Agora, se já tem o seu esboço estrutural de baixa fidelidade pronto, está na altura de o submeter à sua primeira ronda de revisão.

Passo n.º 4: Iterar internamente sobre o seu design de baixa fidelidade

Antes de investir tempo e esforço na criação do design final do seu produto, vamos assumir, de forma fundamentada, que há muitas coisas que fizemos mal ou que nos esquecemos de considerar no design, e começar a mostrar o nosso esboço estrutural de baixa fidelidade aos nossos colegas e partes interessadas.

Claro que também poderia mostrar este design aos seus utilizadores. No entanto, tendo em conta a dificuldade de recrutar utilizadores dispostos a rever ou a testar a usabilidade do seu design, recomendo que utilize o tempo precioso deles para analisar designs de maior fidelidade e não o desperdice a identificar problemas que os seus colegas poderiam ter encontrado facilmente.

Recomendo, contudo, que envolva as suas partes interessadas nesta fase. Duas das principais razões para tal são:

• Reduzir a «distância» entre elas e os membros da equipa que criam o produto, envolvendo-as desde as primeiras fases.
• Corrigir, nas primeiras fases, problemas de design relacionados com o alinhamento estratégico, para poupar tempo mais tarde.

Por fim, assim que tiver recolhido feedback dos seus colegas e partes interessadas, pode corrigir o seu esboço estrutural de baixa fidelidade com base nesse feedback, validar as correções com eles e avançar para a criação do design visual propriamente dito do seu produto.

Passo n.º 5: Preparar um esboço estrutural de alta fidelidade e um protótipo clicável

Como já tem uma compreensão adequada do aspeto geral que o seu design terá, pode agora investir com segurança na criação dos elementos visuais do seu design e levá-lo ao estado em que mais se assemelha ao que pretende criar.

Nesta fase do design, o seu esboço estrutural digital incluirá:

• O seu design da interface do utilizador: incluindo as cores, sombras, tipografia e tipos de letra, margens, etc. corretos.
• O seu conteúdo visual: se pretende ter imagens, ilustrações, vídeos ou outros elementos gráficos nas suas páginas, é nesta altura que os adiciona.
• O texto da sua página: referimo-nos ao texto dos elementos da sua interface do utilizador, dos botões, dos seus cabeçalhos, etc.
• Uma simulação do seu conteúdo: se o seu design incluir conteúdo criado pelos utilizadores ou conteúdo seu, também deverá adicionar uma versão simulada desse conteúdo. (Por exemplo, o design de um comentário sob uma publicação que tenha o tamanho e o conteúdo típicos de um comentário que os seus utilizadores reais fariam.)

Para além de ser o principal resultado a entregar à sua equipa de engenharia, que irá criar o seu produto com base no respetivo design, o esboço estrutural de alta fidelidade também pode servir como uma excelente ferramenta para testar a usabilidade com os seus utilizadores reais.

Pode utilizar o próprio esboço estrutural de alta fidelidade para o teste ou levá-lo mais longe, adicionando-lhe design de interação e transformando-o num protótipo clicável.

É muito fácil confundir os termos de que falei aqui (wireframes de alta fidelidade, protótipos interativos, etc.). Por isso, deixe-me esclarecê-los e mostrar-lhe também alguns exemplos.

Diferenciar tipos de wireframes: maquetes vs wireframes de alta fidelidade vs protótipos clicáveis

Estes três conceitos são bastante semelhantes entre si e, infelizmente, as pessoas utilizam-nos indistintamente, criando confusão entre aqueles que são relativamente novos no desenvolvimento de produtos e no design.

Eis o significado de cada termo:

Wireframe de alta fidelidade: Já abordámos este conceito anteriormente. Por isso, deixe-me mostrar-lhe como é.

Este design apelativo destina-se a um serviço que lhe permite contratar chefs privados para confecionarem pratos sofisticados. Como podemos ver, este design inclui tudo — desde as imagens finais às cores e posições. Também contém algum texto em “lorem ipsum” para representar o testemunho de um chef profissional na página.

Maquete: Ao contrário da sua contraparte, a maquete não inclui apenas o design final, mas também mostra o ambiente onde esse design aparece. Os geradores de maquetes de produtos podem ajudar a criar estes elementos visuais contextuais. Por exemplo, se estiver a criar um papel timbrado, uma maquete mostraria uma folha de papel sobre uma mesa com o seu design.

No caso de uma aplicação móvel, a sua maquete mostrará a silhueta de um iPhone ou de um dispositivo Android, com o seu design apresentado no ecrã.

Protótipo: O protótipo parece um wireframe de alta fidelidade, mas, para além do aspeto final, também tentará simular a funcionalidade do produto.

Com protótipos clicáveis ou ferramentas de prototipagem 3D, pode adicionar interatividade básica, como deslocamento, animações, cliques em botões, navegação dentro da aplicação, etc.

Ao simular a interatividade do seu produto, os protótipos permitem-lhe testar a forma como pretende que as suas funcionalidades funcionem antes de as desenvolver.

Além disso, pode realizar testes com utilizadores, fornecendo-lhes os seus protótipos de alta fidelidade e observando como interagem com o seu produto, resolvem os seus problemas ou tentam encontrar o caminho através do seu design.

A criação de wireframes é um processo de testes e iteração

A natureza iterativa dos wireframes permite-lhe poupar imenso esforço na correção dos seus erros. Além disso, ao seguir um processo de criação de wireframes como este, garante que os seus utilizadores recebem um produto que satisfaz da melhor forma as suas necessidades.

Utiliza um processo de criação de wireframes diferente na sua empresa? Gostaria de saber mais, por isso deixe um comentário abaixo e diga-nos como o faz!

Espero que tenha gostado deste guia e que o tenha considerado útil. Não deixe de consultar outros guias sobre gestão de produtos, escritos por alguns dos melhores profissionais da área, tais como:

• A diferença entre a visão e a estratégia de produto, por Kerstin Exner.
• Os 3 Ps do produto, por Benoit des Ligneris.
• Documentos de requisitos do produto, por Sarah Tolle.

Por fim, pode subscrever a nossa newsletter e também lhe enviaremos conteúdos apelativos para a sua caixa de entrada.