A estrutura por trás de uma boa experiência
Entenda como um wireframe bem estruturado pode impactar na experiência da pessoa usuária.
Recentemente, eu fiz o curso do Edu Agni sobre Arquitetura de Informação, por meio de uma bolsa fornecida pela comunidade PretUX em parceria com a Mergo (obrigada Pretux ❤)️.
O curso da Mergo me proporcionou uma experiência imersiva na Arquitetura de Informação. Um final de semana cheio de atividades em grupo, que abrangiam temas como inventário de conteúdo, card sorting, sistemas de organização, rotulação, navegação e construção de wireframes.
Lá, pude mudar completamente a minha visão sobre a importância da arquitetura de informação antes do desenvolvimento das telas.
Então, para compartilhar o conhecimento com a comunidade de design, decidi escrever sobre como planejar e criar wireframes mais eficientes que impactam a experiência da usuário pessoa usuária.
O que é um wireframe ?
O wireframe é um protótipo de baixa fidelidade utilizado para planejar a hierarquia, elementos visuais e conteúdo da interface que serão desenvolvidas para um site, aplicativo, baseado nas regras de negócios e pesquisas com pessoas usuárias.
O wireframe é produzido sem cores, utilizando apenas escalas de cinzas e sem imagens/ilustrações para focar nos objetivos da tela e não no design visual.
A maior vantagem dos wireframes é a rapidez e o pouco esforço aplicado para se chegar no resultado. Eles podem ser feitos de várias maneiras, seja em um software de prototipação, em uma folha de papel com post-its e até em um Power Point.
O importante é que seja entendível para as demais pessoas, como os stakeholders, desenvolvedores e principalmente os usuários daquele produto.
E tudo começa no discovery…
Eu sei que desenhar um wireframe é uma das etapas mais divertidas durante o processo de design, mas só chegamos nele ao final do segundo diamante, na etapa de convergência.
Ou seja, após a identificação do problema, entendimento das dores dos usuários, pesquisas com dados primários e secundários, personas, mapeamento da jornada, geração e priorização de ideias e levantamento dos requisitos de negócios.
A estrutura do wireframe
Antes de começar a desenhar o wireframe, você pode seguir alguns passos que ajudam na estruturação:
Construa o sitemap
O mapa do site consiste em uma listagem de todas as páginas de um website/app. O mapeamento é feito em fluxograma para identificar níveis e toda a estrutura do conteúdo. O sitemap te ajuda a organizar e hierarquizar de forma lógica o conteúdo do canal.
Objetivo da pessoa usuária
Uma coisa que me ajuda muito é colocar em cada tela uma anotação com as seguintes perguntas:
• Qual é o objetivo da página ?
• Qual tarefa o usuário deve fazer para atingir o seu objetivo ?
Pense antes de começar a rabiscar. Isso ajuda a identificar qual é o objetivo do usuário naquela etapa e hierarquizar as informações, ficando bem claro quais são os componentes mais importantes.
Você também pode criar um fluxo do usuário simplificado, utilizando apenas fluxograma para entender quais são as ações da pessoa usuária de ponta a ponta.
Identifique e crie módulos
"Crie módulos, não páginas. A maneira ideal de lidar com a complexidade das páginas é quebrar grandes coisas complexas em módulos menores e bem formados". — Edu Agni
Uma dica muito importante do curso foi trabalhar com módulos. Módulos são grupos de conteúdos que sempre apresentam o mesmo padrão em todo o app/website.
Como exemplo, temos o site oficial do Xbox em que podemos perceber alguns conteúdos que se repetem. À esquerda, trouxe um print da página inicial do Xbox. E à direita, coloquei um print com o mapeamento dos módulos utilizados na página.
Os elementos mapeados como módulos são: slide, seção de categorias, login, barra de pesquisa etc. E esses módulos possuem sempre o mesmo padrão e se repetem nas demais páginas do website.
É através de módulos que você cria consistência em todo o produto, ganha velocidade na hora de desenhar, reduz a curva de aprendizagem da pessoa usuária e quem desenvolve agradece!
Caso precise adaptar a tela para mobile, ou do mobile para web, a tarefa se torna menos complexa, pois os módulos necessários já estão estruturados.
Fuja do lorem ipsum
Como o wireframe representa a interface que vai ser prototipada posteriormente, é importante evitar fazer wireframes sem textos reais.
Diferente de uma peça gráfica em que podemos ajustar cirurgicamente o tamanho e espaçamento entre linhas e fonte, no digital, temos um espaço limitado para o texto, principalmente na rotulação dos elementos.
Por isso, durante a produção do wireframe, invista parte do seu tempo para criar os textos reais. Barrinhas e lorem ipsum são utilizados para representar textos, mas com o uso destes só é possível identificar hierarquia e peso das informações da interface.
Fluxo do usuário
Com o wireframe também é possível fazer o fluxo da pessoa usuária (user flow) mais robusto, explorando cenários e múltiplos caminhos que a pessoa pode percorrer no uso do produto.
Você só vai precisar adicionar a lógica do fluxograma para cada ação que a pessoa usuária tem disponível na interface. É uma excelente forma de apresentação para as demais pessoas que participam do projeto entenderem como vai funcionar cada etapa da jornada.
Ferramentas
Para facilitar a criação do wireframe, você pode utilizar versões prontas de wireframe do Figma Community. Para criar as setinhas, utilize a extensão gratuita Autoflow do Figma.
Outras ferramentas que podem ser utilizadas para criar wireframe são o Miro e o Power Point.
Com uma base bem sólida do planejamento do conteúdo e especificação de cada caminho da pessoa usuária durante o uso do produto, o protótipo de alta fidelidade se tornará mais assertivo e com uma menor quantidade de gaps e refações.
Este artigo é uma parceria com a comunidade PretUX, que é parceira da Mergo no fomento e inclusão do mercado de UX e Design.
