Wireframes: o que são, como são feitos, para o que servem

Por Alessandra Nahra*

Na primeira vez que a arquiteta de informação fez um mapa do site, o diretor de arte disse “lindo! Agora cadê o wireframe?”. A arquiteta (que já estava achando estranho o suficiente ser chamada de “arquiteta”, sendo que havia se formado em jornalismo) pensou, pensou, achou que não era com ela (“tô mais pra editor do que pra diagramador, pô”), mas o diretor de arte insistiu: “arquitetos de informação fazem wireframes, não te avisaram lá no RH?”. A arquiteta abriu o Powerpoint e desenhou seu primeiro wireframe.

Até que ficou bonitinho.

Wireframes são a ponta do iceberg de um projeto digital que inclua um ambiente no qual os usuários terão experiências. Os wireframes são a ferramenta para comunicar a estratégia na interface. Portanto, antes de desenhar um wireframe, o ideal é que muita coisa já tenha acontecido. No mínimo, a definição dessa estratégia… Um projeto ideal pode incluir uma imersão com o cliente/donos do produto, uma boa etapa de especificação e conversas sobre demandas e expectativas, e pelo menos alguma metodologia de pesquisa com os usuários. Antes dos wireframes podemos fazer, por exemplo, um Design Sprint, uma pesquisa e desenho de personas e jornada do usuário, um benchmark (falaremos sobre todas essas metodologias nos próximos posts).

Wireframes comunicam como será a navegação do ambiente digital, as interações, e a estrutura de conteúdos e elementos. Portanto, ao chegar na etapa de desenho de wireframes, é necessário que a equipe já tenha pelo menos as primeiras ideias de como isso tudo vai ser.

Mas a coisa boa de desenhar wireframes é que eles são muito fáceis e rápidos de serem testados, aprimorados, alterados. Por causa dos wireframes, ninguém precisa chegar no produto final para descobrir que a navegação não funciona. Segundo Morville e Rosenlfeld, no famoso livro do urso polar (Information Architecture for the World Wide Web), o processo de desenho de wireframes tangibiliza a interface que até então não existia e faz o arquiteto enxergar eventuais problemas e corrigi-los. São ferramentas ideais para a decisão de quais componentes da arquitetura devem ser visíveis aos usuários, e como agrupar e hierarquizar informação na tela.

“Wireframes estão na intersecção entre a arquitetura de informação e design visual e de informação do site”, explicam os autores. Talvez isso explique a surpresa da arquiteta iniciante (eu) quando compreendeu que iria ter que desenhar: era jornalista e nunca havia pensado em desenhar telas. Eu não tinha a menor afinidade com design. E costumava aterrorizar os diretores de arte dizendo ia comunicar a próxima navegação sem nenhum documento visual, só no Word (é possível: veja um exemplo na página 266 do livro Communicating Design, do Dan Brown).

Hoje em dia, dependendo do lugar em que você trabalha, já há na equipe um cargo mil vezes mais especializado no desenho de wireframes do que a arquiteta iniciante e surpresa que eu fui: os designers de interação. Mas isso também é um ponto que suscita debates acalorados há muito tempo (quem somos, o que fazemos, qual o nome disso, blablablá). Segundo Dan Brown, no livro Communicating Design, “wireframes estão entre os documentos mais controversos na biblioteca de UX porque eles ultrapassam a linha entre estrutura (como um tipo de informação se relaciona com outro tipo de informação) e display (como representar informação na tela)”.

Morville e Rosenlfeld lembram que, justamente por isso, wireframes são uma oportunidade perfeita para colaboração com os designer visuais (e o resto da equipe). “Utilize-os como um gatilho para gerar uma saudável dose de colaboração interdisciplinar. Ainda que a colaboração possa pesar no cronograma do projeto, o produto final será melhor por causa dessa etapa (e pode, inclusive, economizar tempo durante a etapa de desenvolvimento)”.

Até onde vai um wireframe

Antes disso permita-me lembrar onde o wireframe não se propõe a ir: wireframes são apenas uma parte da comunicação de UX. E, como a UX é maior do que aquilo que o usuário experimenta em uma interface, nem sempre a ferramenta wireframe será utilizada. Lembre-se: experiência do usuário começa muito antes e acaba muito depois do momento em que o usuário acessa a interface.

E afinal, onde eles param?

Antes da camada de informação visual: cores, imagens, tipos de fontes. São, segundo Dan Brown, “ilustrações básicas que mostram o conteúdo de cada tela. São chamados de wireframes porque são tipicamente desenhados com linhas simples, e não designs elaborados”. “They are quite ugly”, segundo Morville e Rosenlfeld (justamente porque são desenhados por arquitetos de informação e não por designers).

(Lembre-me de fazer um post debatendo quando, e por quê, os wireframes que fazemos no mundo de UX brasileiro se tornaram obras de arte, muitas vezes até mais bonitos do que o layout 😉 )

Em resumo:

O que são wireframes

• Documentos que apresentam visualmente sistemas de navegação, componentes de telas, hierarquia entre esses componentes;
• Para que servem os wireframes;
• Para validar conceitos com quem vai efetivamente usar o sistema – realizando testes de usabilidade, por exemplo;
• Como documentação para designers visuais e desenvolvedores – para que toda a equipe envolvida tenha uma mesma visão do projeto;
• Para aprovar com clientes navegação e estrutura de um ambiente digital;
• Como ferramenta de discussão e colaboração entre os envolvidos no projeto.

Quando fazer:

• Após a definição do mapa do site e especificação das telas;
• Após um teste de usabilidade apontando mudanças em alguma tela ou fluxo;
• No caso de um redesenho, após definidas quais serão as alterações;
• Para a implementação de novas funcionalidades;
• Durante e depois de um Design Sprint;
• Após uma etapa de imersão ou entrevistas com os donos do produto;
• Sempre que você precisar colocar uma ideia do papel.

Como são feitos:

• Com caneta ou lápis no papel;
• Em qualquer programa gráfico, como o Powepoint mesmo, ou o Illustrator;
• Em programas que geram wireframes navegáveis em HTML – como o Axure, que é a maneira mais comum de desenhar wireframes no Brasil hoje em dia;
• Usando diversos serviços online para desenho de wireframes, como UX Pin, Balsamiq e Hotgloo.

Qual o nível de detalhamento devem ter:

• Aqui no Brasil estamos acostumados a wireframes de alta fidelidade – alto nível de detalhe em cada tela e grande quantidade de telas representadas. Wireframes de baixa fidelidade, no entanto, também têm seu papel em um projeto. Podem, por exemplo, ser usados em um Design Sprint para debater ideias iniciais.

(*) Alessandra Nahra é jornalista.