Por que os wireframes são importantes no processo de design
Publicados: 2017-01-29O wireframe é uma maneira rápida e eficaz de identificar problemas de usabilidade no início do processo de design.
Se você é um web designer, tenho certeza de que está familiarizado com wireframes e se você é um designer de experiência do usuário (UX), como eu, provavelmente gasta uma grande porcentagem do seu tempo criando wireframes à mão com papel e lápis ou usando uma ferramenta digital como Proto.io .
Este artigo é para aqueles que já ouviram o termo e gostariam de saber mais sobre por que os wireframes devem desempenhar um papel importante em seu processo de design. Também abordaremos como eles podem ser melhor utilizados em conversas com partes interessadas e clientes relevantes.
Vamos começar respondendo à pergunta “O que é um wireframe?”
Eu gosto de pensar em um wireframe como um esqueleto da página. Esse esqueleto é uma representação bidimensional da interface de uma página que mostra o espaçamento dos elementos na página, como o conteúdo é priorizado, quais funcionalidades estão disponíveis e como os usuários irão interagir com o site. Eles também desempenham um papel vital na conexão da arquitetura da informação com os aspectos visuais do design, mostrando caminhos entre as várias páginas. Os wireframes são intencionalmente vazios de cores, gráficos e fontes estilizadas.
Se não tivermos um esqueleto forte para começar, então todas as coisas que colocamos em cima dele, como as funcionalidades ou o estilo, realmente não têm chance.
Pense no processo de construção de uma nova casa. Se você concentrar toda a sua energia no design de interiores, como as cores das paredes e o tecido dos sofás, em vez da planta da estrutura da casa, você acha que servirá ao seu propósito? Provavelmente não. Começar com o design de interiores, em vez da estrutura fundamental da casa, é contra-intuitivo.
O que não deve ser incluído em um wireframe?
É muito importante manter seus wireframes simples. Isso ocorre porque o objetivo do wireframing, como dito acima, é mostrar como os elementos são dispostos na página e como a navegação do site deve funcionar. Muitas cores ou imagens podem distrair o leitor de se concentrar no layout e nos elementos de navegação. Certifique-se de eliminar ou reduzir o uso de cores, imagens, gráficos e fontes estilizadas para atingir seu objetivo de representar uma representação visual simples do esqueleto.
Tenha isso em mente:
Recomendado para você:
Como o Metaverse transformará a indústria automobilística indiana
O que significa a provisão antilucratividade para startups indianas?
Como as startups de Edtech estão ajudando a qualificação da força de trabalho da Índia e se preparando para o futuro
Ações de tecnologia da nova era esta semana: os problemas do Zomato continuam, EaseMyTrip publica...
Startups indianas pegam atalhos em busca de financiamento
Plataforma de marketing digital Logicserve Bags Financiamento de INR 80 Cr, renomeia como LS Dig...
- Mantenha suas cores para cinzas, brancos e pretos.
- Use uma fonte genérica. Isso ajuda a evitar que o usuário se distraia com o estilo da tipografia. Mostrar a hierarquia de informações por meio da fonte ainda é importante, e pode ser mostrado simplesmente alterando o tamanho da fonte e se é “regular”, “ itálico ” ou “negrito”.
- Evite gráficos e imagens altamente estilizados. Em vez disso, sugiro usar retângulos e quadrados como espaços reservados, adicionando um “x” no meio da caixa para mostrar onde a imagem será colocada. Você também pode fazer o mesmo para mostrar onde os vídeos serão posicionados com um triângulo como botão de reprodução no centro da caixa.
As 5 principais razões para usar wireframes
Os wireframes são uma ótima ferramenta para fazer com que seus clientes se concentrem no que você quer que eles pensem no início do processo de design.
Os wireframes são uma ótima maneira de orientar clientes e partes interessadas na estrutura de seus designs sem dar a eles a chance de se distrair com cores e imagens. Se o objetivo da sua reunião é fazer com que seus clientes pensem sobre quais elementos devem estar na página e como esses elementos funcionarão no site, basta retirar cores, imagens e páginas estilizadas para torná-lo muito mais direto. Você pode coletar facilmente comentários de seu cliente e partes interessadas sobre a navegação do site e a alocação de elementos nas páginas. Em vez de focarem em como a cor vermelha “simplesmente não está funcionando para eles” como um botão de chamada para ação. Parece engraçado, mas acontece muito!
Os wireframes permitem mapear a funcionalidade das páginas, detectar problemas antecipadamente e economizar tempo nas revisões posteriores.
É muito menos doloroso fazer alterações em um wireframe do que em uma maquete de alta fidelidade com muitos elementos de design. Ter que refazer uma maquete de alta fidelidade leva muito mais tempo para fazer alterações. Se você investir tempo pensando na funcionalidade das páginas por meio de wireframes no início do processo de design, ficará muito feliz por ter feito isso. É definitivamente um tempo bem gasto e altamente eficiente.
Em outras palavras, mapear a funcionalidade antecipadamente reduzirá a quantidade de idas e vindas que geralmente vem com a fase de desenvolvimento. É definitivamente mais fácil reescrever a função em um wireframe, em comparação com um aplicativo da web.
O wireframing permite que você conheça melhor o seu cliente.
Você começará a ver padrões em comportamentos e motivações quanto mais tempo passar com seu cliente. Com o tempo, o conhecimento que você obtém com o feedback deles só afetará a melhor forma de trabalhar com eles no futuro e como tornar seu tempo com eles mais produtivo. O wireframing também é uma ótima maneira de fazer com que seus clientes se concentrem. Os clientes gostam de dar cinco passos à frente porque é emocionante começar a pensar no produto final. Mas eliminar oportunidades para que os clientes se distraiam de pensar na funcionalidade e na estrutura do design será algo que você achará muito gratificante.
O wireframing é uma ótima ferramenta para coletar feedback e descobrir falhas antecipadamente.
Se a eficiência é um objetivo seu, o que provavelmente é, então o wireframe é onde você deve começar. Pode haver ocasiões em que você se sinta pressionado a começar a projetar uma maquete de alta fidelidade logo de cara devido a restrições de tempo ou dinheiro. Tente lembrar que, sem coletar feedback de qualidade com antecedência, você pode criar um processo de revisão mais meticuloso e demorado mais tarde, tornando tudo muito menos eficiente.
Os wireframes são uma ótima maneira de priorizar o conteúdo, ajudando a revelar restrições de espaço e projetando a hierarquia de elementos na página.
Ter a oportunidade de visualizar a hierarquia de suas páginas desde o início e começar a exibir visualmente as restrições de espaço economizará muito tempo depois, quando você começar a estilizar as páginas e preenchê-las com conteúdo. Você deve coletar feedback sobre seus wireframes das partes interessadas, mover rapidamente as coisas em seus wireframes com base no feedback recebido, coletar feedback novamente e iterar até atingir o objetivo pretendido.
Conclusão
Os wireframes colocam a usabilidade em primeiro plano e usá-los é uma maneira forte de ilustrar o layout das páginas e a funcionalidade dos elementos na página.
O uso de wireframes no início do processo de design força você e seus clientes a olhar objetivamente a facilidade de uso, caminhos de conversão, posicionamento de elementos e ajuda a apontar falhas antecipadamente. Tudo isso leva a produtos intuitivos, funcionais e deliciosos.
[Esta postagem apareceu pela primeira vez no blog Proto.io e foi reproduzida com permissão.]