Os clientes precisam reconhecer como um recurso proposto funcionará. Mas simplesmente descrevê-lo verbalmente ou textualmente para que o recurso alvo seja construído pode ser bastante desafiador para sua imaginação. O wireframing pode ser extremamente útil para resolver esse desafio, pois pode servir como uma ferramenta visual de protótipo “mostre, não diga” para confirmar ideias de design do sistema com os clientes.
O que é um Wireframe?
Wireframes são esboços de telas de um sistema, às vezes referidos como planta baixa ou esqueleto. São criados com o objetivo de apresentar e explicar ideias de design do sistema aos clientes, o que leva finalmente a um consenso sobre as ideias propostas.
Os wireframes mostram “apenas o suficiente” de informações associadas ao recurso proposto. Cada wireframe compõe elementos gráficos básicos que representam os componentes da tela, ou os espaços reservados para esses componentes. Um wireframe representa o layout da tela e como o conteúdo da tela é organizado. Foca no que uma tela faz e como os usuários interagirão com o sistema para atender suas necessidades, em vez de como a tela final realmente será.
Antes de prosseguirmos, vamos dar uma olhada em um wireframe criado com base no youtube.com
Como você pode ver, um wireframe é apenas assim simples e direto. Todos podem entendê-lo sem dificuldades. Ajuda a equipe de desenvolvimento a explicar facilmente como os usuários interagirão com o site.
O wireframe é apenas uma planta baixa
Um wireframe é apenas uma versão de baixa fidelidade da interface do usuário e não tem como objetivo representar uma tela real. Os wireframes são destinados a demonstrar funcionalidades, interações do usuário e fluxos de tela, sem especificar explicitamente como os componentes da tela devem se apresentar e como eles devem se comportar para alcançar a maior usabilidade.
Exemplos de wireframe
Aqui está um exemplo de wireframe para uma página inicial:
Aqui estão alguns exemplos de wireframe para aplicativos Android:
 |
 |
 |
Aqui está um exemplo de wireframe para um aplicativo do iPad:
Aqui está um exemplo de wireframe para um aplicativo do iPhone:
Por fim, aqui está um exemplo de wireframe para um aplicativo de desktop:
Benefícios do uso de wireframe
Clarear a interface do usuário
Os clientes podem não entender jargões técnicos de design de tela como slider, caixa giratória, bootstrap, etc. O wireframe compõe elementos gráficos básicos que todos podem entender, ajudando os clientes a saberem como os recursos funcionarão e como poderão interagir com o sistema para alcançar o que desejam.
Consideração precoce da usabilidade
A experiência do usuário (UX) é uma consideração importante em todos os softwares atualmente. O uso de wireframes na captura de requisitos traz a consideração da experiência do usuário para o início do projeto. Sem desenvolver protótipos ou desenhar qualquer design real de tela, os usuários ainda podem experimentar como o sistema funcionará.
Custo eficiente
Leva tempo e expertise para criar designs de tela completos e de alta fidelidade, o que acaba gerando um custo elevado. O wireframing é uma forma rápida e econômica de criar esboços básicos de tela. Também torna simples e econômicos os ajustes ou até mesmo a reestruturação dos esboços.
Mais disposto a fazer mudanças
Mudanças no design são inevitáveis. O problema com confirmar ideias de design usando mockups ou protótipos completos do sistema é que uma quantidade considerável de trabalho já foi feita, e envolverá uma quantidade considerável de retrabalho, o que significa tempo, esforço e custo extras. Nessa situação, clientes e equipe de desenvolvimento são mais relutantes em expressar preocupações ou solicitar mudanças. Pelo contrário, produzir e revisar wireframes leva muito menos tempo. Todos estarão mais dispostos a solicitar e fazer mudanças.
Clientes engajados
Como os wireframes são grosseiros e soltos, eles dão aos clientes espaço para brainstorming e para expressar suas sugestões. E, como o tempo de retorno para aprimorar o wireframe é curto, os clientes estão ativamente envolvidos na entrega de feedback, o que os torna mais propensos a aprovar o design final.
Como usar o wireframe de forma eficaz?
O uso de wireframe pode trazer muitos benefícios tanto para a equipe de desenvolvimento quanto para os clientes, mas isso só acontece quando você o utiliza com sabedoria e corretamente. Um uso típico incorreto de wireframe é tratá-lo como substituto do design de tela. Isso torna a produção e a refinamento difícil e custoso, reduzindo a utilidade do wireframing. Nesta seção, passaremos por algumas dicas eficazes de wireframing.
- Um wireframe é destinado a ser simples e suficiente. É simples para que possa ser produzido rapidamente e facilmente, e não hesite em ser descartado ou refeito. A apresentação de baixa fidelidade também o torna mais abrangente e comunicativa. Portanto, não é necessário gastar muito tempo em aprimorar o desenho, alinhar elementos ou usar tipologias bonitas, entre outros.
- Em um wireframe, em vez de mostrar qualquer conteúdo real, podemos substituir um grande trecho de texto (o contexto real) por um espaço reservado de texto. Isso evita que tempo seja gasto desnecessariamente na preparação do conteúdo e impede que os leitores sejam distraídos pelo conteúdo textual. Mas se for necessário exibir texto, você pode considerar colocar algum texto fictício no lugar. Você pode facilmente encontrar um gerador de texto fictício na internet.
- O uso de anotações ajuda você a descrever um elemento (por exemplo, “logotipo da empresa”) ou a explicar algo relacionado ao seu comportamento (por exemplo, “ocultar em 5 segundos”). Use-o se necessário. Mas novamente, não tente documentar cada um dos elementos do wireframe. Você deve usar anotações apenas quando necessário.
- Wireframes podem ser desenhados à mão, mas geralmente criamos wireframes com software para tornar nosso trabalho mais eficiente e mais fácil de gerenciar. Além disso, alguns softwares de wireframe oferecem recursos que o papel e o lápis não conseguem realizar. Aqui estão três deles:
- Estado – A ferramenta de wireframing do Visual Paradigm suporta o conceito de estado, que permite criar um wireframe filho com base em um existente. Não apenas economiza tempo ao criar um fluxo de telas com uma sequência de wireframes filhos semelhantes, mas também torna os ajustes nos wireframes relacionados muito mais fáceis (pois, ao fazer alterações no estado inicial de um wireframe, essas alterações também serão refletidas em todos os seus wireframes filhos)
- Storyboard – Um storyboard apresenta o fluxo de telas de um cenário específico. Torna os wireframes mais gerenciáveis e a apresentação muito mais fácil.
- Gerenciamento de wireframes por meio de User Story – User Story é uma ferramenta ágil para registrar preocupações e requisitos do usuário. Incluir wireframes como parte do cenário de uma User Story mostra como o usuário irá utilizar o recurso na parte de seu trabalho descrita naquela User Story. Além disso, quando o desenvolvedor começar a implementar a User Story, ele pode consultar o wireframe para ter ideias sobre as expectativas do usuário.
English
Arabic
Chinese (Simplified)
Dutch
French
German
Italian
Japanese
Korean
Portuguese
Russian
Spanish