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 29 anos e é licenciado em
Daniele
5 Dezembro, 2005, 18:16
Tenho algumas dúvidas quanto esse tipo de apresentação.
Em primeiro lugar, acho que só deve ser usado, para passar para a própria equipe qual será o resultado da organização do trabalho.
Acho que não deve ser apresentado ao cliente, pois não são só as cores que podem confundi-lo, o formato do site tbm….
É dificil esplicar que é só um projeto, e que o resultado final será bem diferente…
Aldemir Vieira
6 Dezembro, 2005, 05:19
Eu uso wireframe (com o Word, pasmem), e concordo que realmente cores podem influenciar, assim como o próprio layout influencia. Eu não uso cores, principalmente, para não podar ainda mais a criatividade do Designer.
Acho o uso desta técnica importante, porque é a primeira forma gráfica de elaboração da estrutura do site, considero que, antes, deva existir o trabalho de arquitetura, para elaborar de forma textual a estrutura da informação. Assim, em conjunto, fornecerão subsÃdios para a elaboração do Markup (CSS e XHTML).
Ivo Gomes
6 Dezembro, 2005, 08:46
@Daniele: O resultado deve ser sempre apresentado ao cliente uma vez que há processos inerentes ao desempenho das suas tarefas e actividades que só ele compreende na totalidade. Não podemos conceber uma interface sem conhecer a opinião das pessoas que a vão usar. Foi por isso que desde o inÃcio envolvemos todos os futuros utilizadores desta aplicação no seu desenvolvimento.
Uma vez que o cliente foi envolvido desde o inÃcio, não há o problema de ele confundir os wireframes com o layout final porque ao longo de todo o processo o cliente vai sendo sensibilizado para acompanhar o processo e dar a sua opinião em todas as fases. Desta forma, o próprio cliente tem noção das fases do projecto e da sua importância para o futuro desenvolvimento da aplicação.
@Aldemir: Eu no inÃcio usava o Excel e o PowerPoint para fazer os esboços!
Para a realização destes wireframes foram feitas entrevistas com os utilizadores, análises de tarefas e procedimentos, análise da organização da empresa, estudo da infra-estrutura tecnológica e foi feita uma arquitectura de informação com base na organização e procedimentos actuais da empresa. No fundo, foi feita uma análise ergonómica dos postos de trabalho, neste caso das suas tarefas e actividades.
Em relação a estes dois comentários parece-me que vocês estão mais preocupados com a fase seguinte de programação do que com a apresentação dos resultados aos utilizadores para saber se é isto que realmente eles necessitam para melhorar as suas tarefas e aumentar a produtividade da empresa.
Nesta fase eu estou mais preocupado em saber se os ecrãs que vou apresentar satisfazem as necessidades dos utilizadores. Só depois de termos todos os processos validados é que podemos começar a pensar na programação da aplicação.
Dominic Evans
6 Dezembro, 2005, 09:08
I really wish there was an English version of this article. I’d love to read it.
Ivo Gomes
6 Dezembro, 2005, 09:16
israel cefrin
6 Dezembro, 2005, 13:21
Artigo deveras interessante. Bem claro e extremamente útil.
No final tu percebes que algo simples mas que faz toda a diferença no fluxo de trabalho, principalmente em projetos de grande porte.
abraços
Israel
Sérgio
7 Dezembro, 2005, 01:19
Viva,
sempre considerei que a principal função dos wireframes era *identificar* o conteúdo e as principais hierarquias nos ecrãs. No entanto, quando referes que os wireframes “servem apenas para indicar onde devem estar localizados”, fico na dúvida.
Em meu entender, depois dos wireframes vem a parte de design (em sentido mais lato) na qual a estrutura da página pode ser radicalmente alterada.
Cada caso é um caso ou há regras rÃgidas?
Gostava de discutir este ponto.
Obrigado pelo texto.
Ivo Gomes
7 Dezembro, 2005, 08:52
Olá Sérgio!
Quando disse que os wireframes serviam para identificar as localizações dos objectos estava a usar um termo genérico. Obviamente que nos wireframes devemos hierarquizar os conteúdos e usar a semântica para melhor estruturá-los.
Houve uma coisa que me esqueci de dizer no artigo: em relação aos conteúdos dos wireframes em si, há quem use texto genérico do tipo “lorem ipsum…” para representar blocos de texto, no entanto, se quisermos fazer testes com utilizadores convém que a informação disponibilizada seja minimamente perceptÃvel e esteja dentro do contexto de uso da aplicação. Dessa forma opto sempre por usar texto “real” que possa ser compreendido pelos utilizadores (ou designers) por forma a melhor compreenderem o significado e a função de determinadas áreas do ecrã.
A seguir aos wireframes, vem a parte do design, mas antes temos de o testar para não corrermos o risco de na fase de design termos de alterar alguma coisa, o que poderia demorar mais tempo do que se alterarmos logo nos wireframes. Uma vez que os utilizadores estiveram envolvidos no estudo desde o inÃcio, não fazia sentido não lhes apresentar estes ecrãs para saber se é isto que eles necessitam para desempenhar a sua tarefa. O mesmo aconteceu com os protótipos em papel em que a maioria dos ecrãs foram aprovados mas à s vezes faltava um campo numa tabela, ou um botão especÃfico.
Quanto à parte de design, não é necessário seguir à risca o layout dos wireframes. O importante é manter a informação e a hierarquia da informação no futuro layout. Aqui não me parece que hajam regras muito rÃgidas, a não ser que o desenvolvimento da aplicação seja feito segundo os webstandards e com um nÃvel mÃnimo de acessibilidade. A usabilidade já vem em grande parte dos wireframes, mas mesmo assim é preciso ter cuidado com a selecção de cores e com o uso de layouts complexos.
helder
10 Dezembro, 2005, 16:03
Viva
Eu nem sabia o que é um wireframe e já faço paginas alguns anos ( meu deus cada dia sei que não sei mesmo nada desta porra… ), mas no meu entender esse tipo de criação de wireframe so é útil para quando criamos um site muito extenso e com muitas funcionalidades, opções, menus, etc..
Pois quando falamos de um simples site isso pode ser simplesmente mais trabalho, e uma forma de confundir o cliente, pois eles n sabem aquilo que nos pensamos fazer, e só o entendem vendo ou mexendo.
No entanto vou fazer o download de um dos programas e ver melhor, quem sabe eu n tou errado na forma como penso ï?Š
Um abraço, e continuação de bom trabalho
“ já agora só por curiosidade esse trabalho que tax a desenvolver tem como prazo para ser feito de quanto tempo ? “
Ivo Gomes
15 Dezembro, 2005, 12:32
Os wireframes são importantes também nos sites de pequenas dimensões. Senão como é que é feita a estruturação das páginas? Se já tivermos essa estruturação feita, depois é só começar a desenhar o layout à volta.
O prazo para a fase de análise deste projecto foi de cerca de 2 meses mas incluiu além disto uma análise à infra-estrutura tecnológica da empresa. Provavelmente se fosse só para a concepção dos wireframes e protótipos o prazo seria muito mais curto, mas assim aproveitámos e fizémos a análise completa ao mesmo tempo que era feita a análise à infra-estrutura.
Renato Rosa
26 Dezembro, 2005, 16:12
Excelente post. Fomento a discussão perguntando quais seriam os elementos ou definições necessárias para definir os componentes da melhor forma, para que o diretor de arte - que pode simplesmente modificar a densidade de algumas funcionalidades ou destaques - trabalhe com mais liberdade, e que formato poderemos definir o percurso cognitivo do usuário, em um documento que ainda é nativamente estático.
Moisés Ribeiro
26 Dezembro, 2005, 16:36
Escreves muito bem e com bom senso sobre o assunto.
Li sobre tua intenção de escrever em inglês. Faça, mas não abandone a nossa lÃngua, és uma boa referência em português sobre o assunto, que é tão escasso e difÃcil de ser encontrado.
Muito me chamou a atenção o processo de projeto/prototipagem no papel. Tens aplicado esse processo a outros jobs? Ou esse exemplo está vinculado somente a grandes trabalhos?
Outra coisa que te pergunto é se sofreste algum tipo de restrição a aplicar essa metodologia de trabalho (a prototipagem). Penso que não é um processo comum (pelo menos no Brasil, não) e tenho dúvidas se as empresas para as quais trabalhamos estariam “abertas” a entender isso.
Ivo Gomes
5 Janeiro, 2006, 13:32
@Renato: Nos próprios wireframes, cada elemento tem uma descrição própria que ajuda a futura equipa de desenvolvimento a perceber a sua importância e qual a sua função. Apesar do documento ser estático, existe um workflow associado com informação sobre para onde vai cada link e como funciona cada elemento.
@Moisés: Ainda não me decidi se passo a escrever em inglês ou não…
Em relação à prototipagem, já utilizei esta metodologia em outros trabalhos e não eram tão grandes como este. A prototipagem é uma formarápida e simples de definir como se irá disponibilizar a informação. Em todos os trabalhos em que apliquei esta metodologia nunca tive nenhum tipo de restrição. Com o uso de um Plano de Projecto eficiente é possÃvel aplicar várias metodologias desde que o resultado final seja do agrado dos utilizadores (e do cliente).
Para convencer as empresas convém explicar desde o inÃcio que o projecto vai ser feito com a ajuda de todos e a opinião de cada um é importante para o sucesso futuro da aplicação. Se ela for bem concebida desde o inÃcio não se gastará rios de dinheiro a corrigir os erros cometidos!
Romeu Ribeiro
25 Janeiro, 2006, 20:56
Bem já chego um pouco tarde para a discução, mas mesmo assim vou ser mauzinho e em vez de comentar vou questionar, eu sou bastante novo nestas andanças, mas pretendo ser cada vez melhor e mostrar que anda por ai muito “charlatão”. A minha questão é: será que a criação de wireframe é realmente válida em projectos de dimensões reduzidas? falando de websites simples ou aplicações megalomanas? a questão de organização é importante, mas até que ponto o wireframe posso ser substituido por um simples organigrama e o projecto é concluido com o mesmo sucesso? obrigado, e vou passar com certeza a ler atentamente este blog.
para terminar, como diriam alguns comuns “tu tás lá Ivo Gomes”
Ivo Gomes
26 Janeiro, 2006, 09:35
Um organigrama também pode ser considerado um Wireframe. Basta que faças um esboço da organização e hierarquização dos conteúdos no inÃcio do projecto para não vires a ter surpresas no final (alterações de última hora, correcções que poderiam ter sido evitadas, etc…)
Os custos das correcções pós-implementação de um website são quase tão grandes como os custos de criação. Assim, se fizeres uma análise cuidada no inicio, minimizas os custos de correcção no final.
Para websites mais pequenos já não é tão crÃtico uma vez que os custos são muito menores.
E agora a minha pergunta: quando desenvolvem websites pequenos como é que costumam fazer? Começam logo a martelar no HTML ou fazem alguns esboços primeiro? E que tipo de esboços? Baseados em quê? Estou curioso para saber como costumam fazer
Romeu Ribeiro
26 Janeiro, 2006, 09:45
Bem nos meus casos, eu uso sempre um organigrama e estrutura tudo muito bem, sem chegar mesmo a atingir um wireframe, o “bicho” é apresentado e dps passamos a fase seguinte, mas mesmo antes de passarmos ao codigo ou ao design, temos sempre uma sessão de “”"”brainstorming”"”" e debatemos o que devia ou não ter, e como devia ter e se apresentar, discutimos prioridades e esboçamos ideias do conceito no papel e de seguida fica nas mãos do designer e do programador.
Carolina Quelotti
25 Maio, 2006, 13:50
Ola Ivo!
Você tem algum material de consulta de algum organograma? Tenho feito várias pesquiisas e gostaria de conhecer modelos que são usados. Agradeço!
Aldemir Vieira
25 Maio, 2006, 18:49
Carolina, um bom lugar para baixar exemplos e templates para trabalhar aplicar a arquitetura da informação é a página de Ferramentas do IA Institute. No site do Guilhermo Reis também encontrará um rico material.
ibomb
7 Julho, 2006, 17:08
Mais um bom blog.