Wireframes
Segunda-feira, 5 de Dezembro de 2005
No seguimento do projecto em que estou a trabalhar, depois de realizados e testados os protótipos em papel chegou a hora de passar os esboços para wireframes.
Com base na validação dos protótipos em papel pelos próprios utilizadores, foi feita a digitalização dos mesmos em formato wireframe.
Um wireframe é um documento que tem como função estruturar o conteúdo de cada página, indicando o peso e relevância de cada elemento do layout e a sua relação com os demais elementos formadores do todo.
Além desta função estrutural, o wireframe também é utilizado para a marcação das etapas de um processo de interacção entre o utilizador e o sistema, fornecendo um wireframe por cada ecrã que explique detalhadamente todos os elementos presentes na página e como o utilizador pode interagir com eles.
O nome “wireframe” vem da junção de duas palavras em inglês: “wire” (linhas) e “frames” (ecrãs). Ou seja, são ecrãs de baixa resolução e com um aspecto gráfico muito pobre que servem apenas para indicar onde devem estar localizados os objectos e menus de interacção. O wireframe serve para mostrar a funcionalidade e não o aspecto gráfico de uma aplicação.
Como desenhar um wireframe?
Existem algumas aplicações com funções específicas para desenhar wireframes, entre elas temos o Microsoft Visio, o OmniGraffle, o Adobe Illustrator ou o Adobe InDesign.
No meu caso uso o OmniGraffle. A interface é extremamente simples e o resultado final tem uma qualidade superior à do Visio. Além disso, o OmniGraffle foi concebido quase especificamente para esta função.
Há quem prefira conceber os wireframes logo em formato XHTML em vez de os desenhar numa destas aplicações. A vantagem de desenhar em XHTML é que os protótipos são funcionais e na fase de concepção em si poupa-se trabalho porque o esqueleto das páginas já está feito. No entanto, perde-se muito mais tempo a codificar o XHTML e o CSS correspondente do que se desenharmos os ecrãs através de objectos “drag & drop”.
No meu caso, dado o tamanho da aplicação que estamos a desenvolver, foram 250 ecrãs. Se tivesse optado por desenhar os ecrãs em XHTML ainda hoje não deveria ir a meio…
Qual é o aspecto de um wireframe?
Tal como já foi mencionado antes, o aspecto de uma página em formato wireframe é apenas um conjunto de linhas e caixas de texto que indicam a localização dos objectos e dos menus.
Há ainda uma outra discussão relativamente ao uso da cor nestes ecrãs. Muitos especialistas dizem que não devemos usar a cor porque isso irá levantar questões no cliente do tipo: “é com aquela cor que vai ficar o site?”; ou “não gosto muito é das cores” em vez de se centrarem no layout das páginas.
Por outro lado, podemos usar a cor para distinguir certos objectos da interacção e zonas de aviso ao utilizador. Num ecrã a preto e branco não é fácil distinguir se há zonas de alerta ou de aviso e na fase de programação pode acontecer que essas zonas não sejam devidamente marcadas pelo programador.
Em baixo temos o exemplo de um ecrã em formato wireframe a preto e branco.
Para este projecto optei por usar a cor pois existem algumas mensagens de alerta importantes para os utilizadores. Eis 2 exemplos dos 250 ecrãs que desenvolvi para esta nova aplicação:
O tamanho das imagens foi diminuido de propósito pois trata-se de uma aplicação de um cliente e não convém mostrar muito… As imagens foram colocadas aqui por motivos meramente demonstrativos de como pode ser desenvolvido um wireframe.
Como podem reparar, do lado direito existe uma coluna com informações sobre cada elemento do ecrã. Podem ver ainda as cores usadas para as mensagens de aviso e de alerta.
Próximos Passos
Os próximos passos consistem numa validação dos ecrãs feita pelos utilizadores e pelo cliente por forma a que se possa avançar finalmente para a fase de concepção e programação da aplicação.
Artigos Relacionados
Links
- Artigos sobre Wireframes
- Wireframes em XHTML com links para outros artigos interessantes
- Wireframe: documento cada vez mais importante
- Using Wireframes
Ivo Gomes tem 30 anos e é licenciado em