Wireframe, documento cada vez mais importante

09 de dezembro de 2003, 0:00

O primo pobre do layout é fundamental para o trabalho do arquiteto de informação porque auxilia a equipe de desenvolvimento na tarefa de produzir o site de maneira mais rápida, padronizada e eficiente.

Por Leonardo Oliveira

Aliado ao sitemap (veja ao lado), o wireframe é um documento que se torna cada vez mais fundamental para o trabalho do arquiteto de informação, apesar de não ser (e nem pretender ser) uma régua de estilos para o layout e a criação das páginas de um site, como é erroneamente interpretado por muitos webdesigners.

Sua função é estruturar o conteúdo de cada página, indicando o peso e relevância de cada elemento do layout e sua relação com os demais elementos formadores do todo.

Também cabe ao wireframe indicar a correta marcação de textos, breadcrumbs de navegação, guidelines de marca e até dos recursos de programação e tecnologia a serem utilizados pela equipe de produção. Posteriormente também serve como baliza para testes de usabilidade.

Além desta função estrutural, o wireframe também é utilizado para marcação das etapas de um processo de interação entre usuário e sistema. Como as etapas de uma compra online, por exemplo, que vão da busca pelo produto, escolha de um dos resultados, confirmação de intenção, preenchimento do cadastro e opção de pagamento.

Para cada um destes passos de compra deve haver um wireframe que explique detalhamente todas as possibilidades de interação e o caminho percorrido pelo usuário.

Principais elementos de um wireframe

Na construção do wireframe o arquiteto busca representar esquematicamente todos os elementos que compõem a página. Imagens, textos, formulários, flash, mecanismos de busca são representados por variações gráficas de elementos similares - como quadrados e círculos, traços contínuos e pontilhados, palavras em negrito e sublinhadas, largura e altura das páginas - padronizados para todos os wireframes da documentação.

Para evitar descrições alongadas, que geram mais confusão do que entendimento, vamos diretamente analisar dois wireframes da home do Webinsider que foram construídos apenas para ilustrar as diferenças entre um trabalho mais aberto (com baixo detalhamento) e outro com guidelines mais definidas e marcações pré–estabelecidas pelo arquiteto.

Wireframe com baixo detalhamento (abre janela nova do browser).

O primeiro é um documento superficial, de baixo detalhamento e pouca influência no trabalho dos designers e das demais equipes do projeto. Ele traz apenas uma marcação de blocos de conteúdo.

Wireframe com alto detalhamento

Já o segundo modelo apresenta alto grau de detalhamento dos componentes da página e utiliza vários elementos gráficos para representá–la. Este modelo de wireframe é muito útil no desenvolvimento de um site e também em sua documentação posterior, para futuras consultas. Além, é claro, de valorizar o trabalho desenvolvido pelo arquiteto.

É só observar atentamente o segundo wireframe e já nos propomos algumas questões que envolvem as competências de um arquiteto de informação, tais como conhecimentos básicos de design, tecnologia, programação e redação.

É claro que o arquiteto não tem a obrigação de ser um especialista em cada uma destas disciplinas. Entretanto, o conhecimento dos principais conceitos de cada uma delas sem dúvida alguma enriquece o wireframe e apresenta à equipe de produção um projeto bem melhor resolvido e passível de implantação.

Usabilidade

Outro ponto de importância na construção de um wireframe é o que toca na questão da usabilidade. Antes de qualquer coisa, devemos ter a consciência de que a análise da usabilidade não cabe ao arquiteto, até por ser um procedimento adotado numa etapa posterior ao trabalho de arquitetura. Fazemos análise de usabilidade quando o site já está criado e produzido, hospedado em um servidor com endereço específico, apenas para que os envolvidos neste trabalho e os usuários por eles selecionados possam checar a eficiência do site em atender as expectativas do público alvo.

Porém o arquiteto pode contribuir com a usabilidade de um site no momento em que está construindo os wireframes, ao evitar conteúdos redundantes e sobreposição de conteúdo, além de layouts complexos ou links escondidos. O arquiteto deve prever em sua documentação alguns procedimentos de auxílio ao usuário do site, como maior rapidez de obtenção de resultados, supressão de etapas intermediárias, controle sobre o modo de exibição do conteúdo, menus e links sempre visíveis, padronizados e inteligíveis, entre outros detalhes.

Identidade e Marca

Por fim, é na construção do wireframe que o arquiteto vai garantir que todas as páginas mantenham uma unidade gráfica, padronizada e uma presença de marca relevante para o patrocinador do site, o cliente.

Um website raramente é uma ação isolada de uma empresa na tentativa de se comunicar com seu clientes, prestando serviços ou vendendo diretamente seus produtos. É muito importante que o site esteja, graficamente e conceitualmente alinhado com a proposta de comunicação que vem sendo adotada nas demais ações na internet e mesmo nas mídias off–line, como jornais, revistas, TV, outdoors, ponto–de–venda etc. É claro que este envolvimento com a marca deve ater–se também ao respeito pelas características do universo digital e o objetivo individual de cada projeto, conjugando unidade e autonomia de atuação.

Alguns riscos e vantagens do wireframe

Riscos

– Não atender as expectativas dos clientes, empresas ou instituições, que estão longe dos conceitos mais básicos da AI, sentindo–se assim mais confortáveis em aprovar layouts de designers, por serem peças com grande impacto gráfico.

– Acomodar a equipe de criação de modo que os designers, por falta de tempo hábil ou insegurança, não mais inovem em seus projetos e sigam as indicações do wireframe à risca.

– Por não ser desenhado na exata escala em que será construído o site, pode gerar desencontros de entendimento da relevância de cada elemento na composição da página e seu impacto de visualização.

– Necessita de tempo, educação e insistência de uso até tornar–se corretamente entendido pelos profissionais envolvidos nas etapas de cada projeto.

Vantagens

– Facilita a aplicação de conceitos de usabilidade já testados e comprovadamente eficientes.

– Auxilia a equipe de desenvolvimento e programação na tarefa de produzir o site de maneira mais rápida, padronizada e eficiente.

– Após a implantação do site, os wireframes auxiliam nos testes de usabilidade e mostram efetivamente o que deve ser refeito em cada uma das páginas.

– Funciona como uma documentação do site e deve ser consultado antes de cada modificação posterior, para prever impactos na arquitetura e funcionalidade.

Principais softwares para construção de wireframes

Você pode criar seus wireframes em qualquer software que permita o mínimo de organização de elementos geométricos e textos, porém existem alguns que facilitam este trabalho por serem agentes customizados para esta função:

Visio
Freehand
QuarkXPress
InDesign.

[Webinsider]

.

20 pessoas comentaram o artigo "Wireframe, documento cada vez mais importante"

Avisos

Os ítens com asterisco ( * ) são campos de preenchimento obrigatório.

Todos os links inseridos nos comentários possuem o atributo rel="nofollow" para impedir com que user agents (como os mecanismos de busca) sigam os links inseridos para desestimular spammers.

Todos devem se identificar através de e-mail válido.

Os e-mails dos usuários não serão divulgados no site.

Comentários:

Preencha os dados abaixo e clique em enviar

* Nome: * E-mail: URL: Cidade: Atividade: * Comentário: