Você está na página 1de 29

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

ARQUITETURA DE INFORMAO SEM WIREFRAME


Rodrigo Freese Gonzatto Especialista em Design de Interao pelo Instituto Faber-Ludens e graduado em Comunicao Social com habilitao em Publicidade e Propaganda. Trabalha com pesquisa, consultoria e treinamento em Design de Interao no Instituto Faber-Ludens. Participou de projetos de pesquisa como Cubezilla, Subbersault e Conectando Contedos. reas de interesse: Design de Interao, Tecnologia e Sociedade. E-mail: rodrigo.gonzatto@faberludens.com.br Karla da Cruz Costa Especialista em Design de Interao pelo Instituto Faber-Ludens e graduada em Comunicao para Web. Trabalha como coordenadora de User Experience na agncia Midiaweb Inteligncia Interativa. Participou de projetos de pesquisa e concepo de portais, ecommerces, aplicativos sociais e aplicativos mobile para clientes como HSBC, Oi, O Boticrio, Renault e Walmart. reas de interesse: Design de Interao, Design Crtico e Cultura. E-mail: karlacrux@gmail.com RESUMO Propomos o debate sobre o uso do wireframe a partir da crtica de sua centralidade nas prticas de Arquitetura de Informao. A escolha pela utilizao deste documento deve ser coerente com o projeto onde se insere, e no apenas consequncia de sua naturalizao como fundamento desta disciplina. Para tal, buscamos compreender a atividade do arquiteto de informao e a funo do wireframe nas dinmicas de trabalho. Tambm so levantadas alternativas de documentao, explorando aspectos de colaborao e comunicao, tendo como princpio de que as prticas de Arquitetura de Informao no podem ser reduzida a um entregvel. Palavras-chave: Arquitetura de Informao. Wireframe. Documentao.

INFORMATION ARCHITECTURE WITHOUT WIREFRAME


ABSTRACT We propose a debate on the use of the wireframe from the criticism of its centrality in the practices of Information Architecture. The choice for the use of this document should be consistent with the project where it belongs, and not just a consequence of his naturalization as a foundation of this discipline. To this end, we aims to understand the activity of the information architect and the role of wireframe in dynamics of work. Are also raised alternative documentation, exploring aspects of collaboration and communication, based on the principle that the practices of Information Architecture may not be reduced to a "deliverable". Keywords: Information Architecture. Wireframe. Documentation.

21 e 22 de outubro de 2011. So Paulo SP

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

1 INTRODUO Muito se discute sobre a falta de reconhecimento da importncia da Arquitetura de Informao e da baixa valorizao da rea em determinadas estruturas organizacionais. Acreditamos que este fenmeno est diretamente relacionado com a centralidade do wireframe nas prticas de Arquitetura de Informao, mantendo-a como setor de produo de um documento e reduzindo o arquiteto de informao quele que faz wireframes. comum encontrar o wireframe na posio de principal fundamento da Arquitetura de Informao, mas so raros os argumentos que explicam ou questionam esta condio. Porque continua trivial encarar a Arquitetura de Informao como sinnimo de wireframe? necessrio levantar argumentos crticos, que apontem tanto vantagens como desvantagens dos seus usos, e realizar uma abordagem mais demorada no apenas do documento, mas das relaes e conflitos que se manifestam a partir dele. Assim, neste artigo nos voltamos para a prtica profissional de arquitetura de informao para a Web, buscando entender as motivaes que levam importncia do wireframe durante esse tipo de processo de trabalho, estudando seus usos e propondo o debate sobre comunicao, colaborao e documentao. Tendo sempre como princpio que fazer Arquitetura de Informao no se limita a uma execuo operacional de tarefas, iniciamos a primeira sesso com a compreenso sobre quem o arquiteto de informao e qual a sua atividade. demonstrada a centralidade que o wireframe ocupa nas prticas de Arquitetura de Informao para, em seguida, compreender os diversos usos que so feitos a partir dele. Em seguida, temos consideraes sobre a relao entre arquiteto, wireframe e demais profissionais, entendendo que o foco de uma profisso na produo de wireframes contribui para que ela continue no sendo reconhecida como uma estratgia que beneficia tanto o trabalho do profissional de arquitetura, como as demais equipes, envolvidos e usurios. Por fim, so apresentadas possibilidades de caminhos para se trabalhar sem wireframe, alm de tcnicas que permitem a adequao de seu uso a determinadas necessidades de documentao ou comunicao. Para tal abordagem, realizamos uma pesquisa cujos procedimentos tcnicos foram de pesquisa bibliogrfica e pesquisa qualitativa (GIL, 1991): Pesquisa bibliogrfica, do tipo reviso terica, inserindo o problema de pesquisa dentro de um quadro de referncias tericas, a fim de explic-lo. Foram levantadas as principais publicaes existentes, reconhecidos os
21 e 22 de outubro de 2011. So Paulo SP 2

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

aspectos j abordados e verificadas as opinies similares e diferentes a respeito do tema ou de aspectos relacionados ao tema e ao problema de pesquisa. Pesquisa qualitativa, realizada junto a profissionais com experincia prtica na rea de Arquitetura de Informao. Foram utilizados questionrios como instrumento de coleta de dados, enviados de forma remota e com perguntas abertas (srie ordenada de perguntas abertas que devem ser respondidas por escrito pelo informante). Ao todo foram seis participantes , com perfil geral viando entre 3 a 10 anos de atuao na rea de Arquitetura de Informao, em uma amostra composta por cinco homens e uma mulher e sendo dois participantes do Paran, dois de So Paulo e dois de Minas Gerais. Juntamente a estas foram utilizadas como referncia as pesquisas j realizadas sobre o perfil do Arquiteto de Informao no Brasil, aplicadas em 2006 (REIS, 2007; FERREIRA e REIS, 2008), 2008 (REIS, 2008) e 2010 (MARCRIO, 2010). 2 A ATIVIDADE DO ARQUITETO DE INFORMAO O arquiteto de informao e sua atividade so descritos por diferentes enfoques, indo da posio de "operador de Axure" at ser o "maestro de uma orquestra ou um diretor de cinema, concebendo uma viso e movendo a equipe para frente" (MORVILLE, 2000). O termo, quando criado por Richard Saul Wurman, indicava o profissional dedicado a tornar as informaes mais compreensveis, preocupado em reunir, organizar e apresentar informao com objetivos definidos.
Para WURMAN, em seu livro 'Information Architects', o arquiteto da informao definido como o 'indivduo que organiza padres inerentes aos dados, transformando o que complexo em algo claro'. Pode ser tambm uma pessoa que cria a estrutura ou o mapa de determinada informao, de modo a possibilitar a outras que criem o seu caminho pessoal, em direo ao conhecimento. Uma terceira definio apresentada pelo autor da seguinte forma: A.I. a profisso emergente do sculo XXI, cujo escopo formado por necessidades atuais, focalizadas na clareza, na compreenso humana e na cincia da organizao da informao. (AGNER e SILVA, 2003)

Para James Garrett, a Arquitetura de Informao projeta sistemas que permitem que seus usurios encontrem informaes facilmente, estando preocupada com a criao de esquemas organizacionais e navegacionais que permitam aos usurios moverem-se pelo contedo do site de forma eficiente e eficaz (GARRETT, 2003, p.94, traduo nossa). Desta forma, o arquiteto aquele que se preocupa em educar, informar e persuadir usurios.
21 e 22 de outubro de 2011. So Paulo SP 3

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

Rosenfeld e Morville (2007, p.4) apontam as quatro principais atividades de Arquitetura de Informao como sendo: o projeto estrutural de ambientes de informao compartilhada; a organizao, rotulagem, pesquisa e sistemas de navegao em sites da web e intranets; o suporte a usabilidade e encontrabilidade por meio do projeto de experincias e produtos de informao; e a incorporao de princpios do design e da arquitetura no espao digital. Garrett (2002), por sua vez, indica duas linhas de abordagens gerais utilizadas para definir a rea: aquela que define o cargo a partir da disciplina (arquiteto de informao aquele que faz Arquitetura de Informao) e a que define a disciplina a partir do cargo (Arquitetura de Informao o que feito pelos arquitetos de informao). Neste sentido Gil Barros (2009) aponta que existem usos diferentes para estas definies, que dependem do contexto do interlocutor. Um exemplo a separao entre o "grande" e o "pequeno" arquiteto de informao e da Arquitetura de Informao como cargo e como disciplina. Dividir profissionais em categorias, como na analogia do "grande" e do "pequeno" arquiteto, corresponde a separar aqueles que realizam atividades de "macro" ou de "micro" arquitetura ou, em outras palavras, quem tem papel estratgico ou operacional. Em um artigo bem-humorado, Peter Morville (2000) critica algumas interpretaes feitas do modelo visual de James Garrett1, por este ilustrar os elementos do processo de Experincia do Usurio situando a Arquitetura de Informao apenas como uma etapa especfica. O autor se mostra receoso que o papel da rea seja reduzido e encaixado em apenas um momento, sem possibilidade de atuao em outras etapas de um projeto. Esta diviso excludente polmica (GARRETT, 2002; MORVILLE, 2000; BARROS, 2009). De uma maneira geral, Gil Barros sugere que a atividade do chamado "grande arquiteto" corresponda competncias em Experincia do Usurio. Competncias na rea de

Disponvel para consulta em: <http://www.jjg.net/elements/pdf/elements.pdf>

21 e 22 de outubro de 2011. So Paulo SP

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

Arquitetura de Informao no so exclusividade de um arquiteto de informao e a arquitetura de um site no produto de um profissional, mas de uma srie de competncias, que podem ser responsabilidade de um profissional, de vrios profissionais ou compartilhadas dentro de uma equipe. (BARROS, 2009) Este apontamento levanta a questo: a atividade de Arquitetura de Informao tarefa do arquiteto de informao? Segundo pesquisas do perfil do Arquiteto de Informao no Brasil, uma parte considervel dos profissionais no se dedica plenamente a atividade2, tampouco tem o ttulo exato de "arquiteto de informao3: atuam na rea sob o ttulo de designers de informao, designers de experincias, designers de interao, entre outros. O prprio EBAI - Encontro Brasileiro de Arquitetura de Informao4 inclui os seguintes termos em sua descrio: "Usabilidade, Design de Interao, User Experience e muito mais". Sobre a necessidade do ttulo de especialista dentro das empresas, Jesse James Garrett questiona a necessidade de profissionais que faam apenas um trabalho especfico quando: A forma como as organizaes frequentemente delegam a responsabilidade para as questes de experincia do usurio s complicam ainda mais as coisas. Em algumas organizaes, voc vai encontrar pessoas com ttulos profissionais como arquiteto de informao ou designer de interface. No fique confuso com isso.

A partir das pesquisas sobre o perfil do Arquiteto de Informao no Brasil, (REIS, 2008; FERREIRA e

REIS, 2008; MARCRIO, 2010) observa-se que os profissionais que se dedicam mais de 50% do seu tempo a Arquitetura de Informao cresceu de 44% para 65% nas pesquisa de 2006 para 2008, mas diminuiu para 49% segundo a pesquisa de 2010.
3

A partir das pesquisas sobre o perfil do Arquiteto de Informao no Brasil, (REIS, 2008; FERREIRA e

REIS, 2008; MARCRIO, 2010) em 2010 somou 62% dos entrevistados que no tinham "Arquiteto de Informao" como ttulo do cargo. Dos que possuem o nome do cargo como "Arquiteto de Informao" foram: 36% em 2006, 59% em 2008 e 38% em 2010.
4

O EBAI o mais importante evento de Arquitetura de Informao do Brasil, realizado desde 2007.

21 e 22 de outubro de 2011. So Paulo SP

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

Estas pessoas geralmente tm conhecimentos que abrangem muitos dos elementos da experincia do usurio, e no apenas a especialidade indicada pelo seu ttulo. No necessrio dispor de um membro da sua equipe que seja especialista em cada uma dessas reas; em vez disso, voc s tem que garantir que algum responsvel para pensar sobre cada uma dessas questes. (GARRETT, 2003, p. 35, traduo nossa) Como tantas outras reas emergentes nos ltimos anos, a Arquitetura de Informao multidisciplinar e se aproveita de particularidades de outras disciplinas, colocando diversos conhecimentos em contato. Garrett (2003, 2002) inclusive prope uma preocupao menor com o ttulo de "arquiteto de informao", sugerindo que, assim como arquitetos esto pertos de serem designers de interao, estes tambm esto daqueles: ambos tem algum grau de experincia com as questes da rea que concerne a ambos, relativa a Experincia do Usurio. bem verdade que a expanso sofrida pelo cargo de arquiteto de informao pode estar beneficiando os indivduos que o ocupam (embora menos, talvez, desde o comeo da retrao), mas quase certo que prejudica a disciplina como um todo. Citando como justificativa a natureza holstica do trabalho de arquitetura de informao, certas pessoas claramente no se daro por satisfeitas at que tenham controle direto sobre todos os aspectos do trabalho que possam afetar a arquitetura. Esse modo de pensar um sinal do pior tipo de arrogncia e solapa todo esforo de convencer as empresas do valor da disciplina. [...] A nica soluo dissociar totalmente a definio da disciplina da definio do cargo. Ainda que possa parecer pouco intuitiva (GARRETT, 2002). Entretanto, mesmo frente a esta posio, que aproxima aquele que realiza a arquitetura de informao de uma atividade mais ampla, ligada a Experincia do Usurio, temos a abordagem que resume toda a Arquitetura de Informao em apenas uma das atividades que podem ser realizadas por um arquiteto.

21 e 22 de outubro de 2011. So Paulo SP

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

3 A CENTRALIDADE DO WIREFRAME O wireframe a atividade mais executada pelo arquiteto de informao brasileiro5. Junto a ele, encontram-se principalmente o estudo de benchmark, a criao dos prottipos digitais/navegveis e do mapa do site/sitegrama. Estas atividades so entendidas por Guilhermo (2007) como atividades de etapas iniciais do processo de arquitetura, sendo que outras etapas, como as de implementao e avaliao, so pouco praticadas. Da mesma forma, as atividades que envolvem usurio praticamente no so realizadas pelos arquitetos de informao brasileiros, ponto tambm notado por Belkiss Marcrio (2010). Na pesquisa realizada para este estudo algumas questes chamam ateno pelo alto grau de importncia dado ao wireframe como parte do processo. Duas citaes: O wireframe a base do projeto. O ponto em comum entre a equipe / usurio. A falta de pr-conceitos que causa esse monte de linhas juntas que simulam uma interface, resulta em feedbacks mais precisos e confortveis por parte do usurio na hora que so testados. Para mim, projeto sem wireframe no existe. (designer, trabalha com Arquitetura de Informao h 8 anos)

Segundo as pesquisas (MARCRIO, 2010; FERREIRA e REIS, 2008, REIS, 2007 e 2008;), os

entrevistados que realizam wireframes foram 89,5% em 2006, aproximadamente 68% em 2008 e por 58,5% em 2010. Entretanto, difcil afirmar, apenas a partir destes dados, se a utilizao dos wireframe vem diminuindo, visto que as pesquisas, apesar de buscarem seguir a mesma orientao metodolgica, tiveram diferenas na questo que compete a este dado. Tambm importante ressaltar que no estudo realizado por Marcrio (2010, p.59) constam os estudos etnogrficos como atividade mais conhecida e praticada pelos arquitetos de informao e a atividade de wireframes como uma das menos praticadas e menos conhecidas. Contudo, em contato por email no perodo de julho de 2011 a pesquisadora enviou aos autores dados atualizados da pesquisa que demonstram a situao oposta. A questo relacionada a este dado, "Qual dessas atividades relacionadas ao trabalho de Arquitetura de Informao voc j desenvolve?" resultou, na categoria "sempre fao": wireframe (58,5%), anlise de sites concorrentes e similares (benchmark) (52,3%) e prottipo digital / navegvel (45,3%). Na categoria "sei o que mais nunca fiz" (sic): estudos etnogrficos (44,4%), focus grup com usurios (44,4%) e medio e anlise de resultados (ROI) (39,1%).

21 e 22 de outubro de 2011. So Paulo SP

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

A maior demanda so, de fato (e com razo) dos entregveis. Em especial, dos wireframes. [...] Projetos de AI que participei sempre tiveram wireframes. O que acontece ser chamado para projetos que no necessitam de wireframes, mas, particularmente, eu no os considero projeto de AI. [...] Sem isso o arquiteto no trabalha. Ele precisa disso pra mostrar aos outros como solucionar um problema. [...] O que existe a necessidade intrnseca da profisso de AI de gerar resultados na forma de wireframes. (designer de interao, trabalha com Arquitetura de Informao h 10 anos) Desta maneira, entendemos que o wireframe se apresenta como centro da atividade de Arquitetura de Informao para diversos profissionais. Se, de um lado, o arquiteto brasileiro realiza poucas pesquisas com usurios, do outro, a entrega de documentos como o wireframe marca a finalizao da participao de um arquiteto em um projeto, visto o baixssimo nmero de arquitetos que acompanham a fase de implementao ou que avaliam seu trabalho.

4 DISSECANDO O WIREFRAME O que , como e para que usado um wireframe? Para uma compreenso adequada, faz-se necessrio entender os diversos usos que so feitos deste documento, tambm conhecido como page schematics (esquema de pagina), blueprints ou prottipos. O wireframe uma maneira de manifestar decises realizadas em torno de um projeto, e pode ser utilizado com diferentes propsitos. Em uma etapa inicial, funciona como uma ferramenta criativa para explorar e desenvolver conceitos. Neste momento esperado que tenha muitas transformaes para testar possibilidades de organizao visual de elementos e para materializar o que at ento se mantinha apenas na imaginao de cada um dos envolvidos na arquitetura de informao. As revises aumentam e as alteraes comeam a diminuir pois o wireframe serve como uma espcie de "acordo" entre os envolvidos com o projeto, sobre como o site dever ser, a medida em que, por exemplo, funcionalidades vo sendo definidas. O wireframe comea a se afirmar um documento de referncia. Segue-se ento para uma etapa de especificao, onde o wireframe uma das ferramentas para se registrar diversas decises sobre o projeto. Por fim, o wireframe resulta em um documento que detalha o projeto e que pode ser utilizado tanto para validar o processo de implementao como para validar a prpria

21 e 22 de outubro de 2011. So Paulo SP

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

arquitetura de informao, por permitir que seja realizado um prottipo funcional passvel de testes (como uma avaliao de usabilidade) com usurios.

Figura 1 Exemplo de Wireframe. Fonte: GARRETT (2003, p.136)

A partir da anlise de diversos autores em Arquitetura de Informao, Guilhermo Reis (2007, p.146-148) prope a seguinte sntese: O wireframe e um diagrama que especifica uma pagina do website . Ele representa uma pagina definindo seus elementos , a hierarquia entre eles , seus agrupamentos e suas importancias relativas . Seu objetivo e especificar a implementao da pagina e comun icar o contedo e as funes de cada pagina para discussao com a equipe do projeto. (REIS, 2007, p.146-148) Wodtek e Govella (2009, p.182) sugerem imaginar o wireframe como a armacao usada por um escultor para dar forma e suporte permitindo, depois, adicionar o barro. Seu prprio nome j evidencia a metfora: "wire", de arame, fio; e "frame", de esqueleto ou estrutura. Wireframes so ilustraes "brutas" que mostram, a uma maior ou menor grau, o contedo de cada tela. Eles so chamados de wireframes, porque eles normalmente so renderizados com linhas simples, e no designs elaborados. Eles ilustram, entre outras coisas, que tipo de informao ser mais importante em cada tela. (BROWN, 2007, p.265, traduo nossa)

21 e 22 de outubro de 2011. So Paulo SP

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

Nao h um

padro de vocabulrio visual para wireframes: existem diversas

abordagens e cada autor apresenta seu conjunto prprio de smbolos (REIS, 2007, p.146-148). Em geral, os wireframes apresentam uma viso simplificada de qual contedo dever aparecer em cada tela no produto final, geralmente evitando cores, estilos tipogrficos e imagens (BROWN, 2007, p.265). Entretanto, outros elementos so aplicados de diferentes formas, como a representao do texto, chamada de greeking6 por HOOBER (2009, p.148), que por vezes representado por textos repetidos, textos em latim, reas de cor ou ainda com simulaes de textos, como na Figura 2.

Figura 2 Diferentes representaes visuais. Fonte: HOOBER (2009, p.148)

O nome greeking utiliza a ideia de "texto em grego" para fazer referncia a um texto incompreensvel.

Indica textos ou estilo de exibio onde parte ou todo o texto obscurecido para enfatizar detalhes ou espaos reservados para exibir contedo ainda indisponvel. Nem sempre estes textos utilizam o alfabeto grego, sendo uma forma comum o uso de texto-padro em latim, como "Lorem Ipsum".

21 e 22 de outubro de 2011. So Paulo SP

10

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

Para Jesse James Garrett (2003, p.137-139) o valor do wireframe est na sua maneira de integrar elementos de Design de Interface, Design de Navegao e Design de Informao. A partir do contato destes trs em um mesmo documento, o wireframe define o esqueleto que d o primeiro passo para a processo de formalizao do design visual de um website. interessante notar como o autor, em sua sistematizao de etapas do desenvolvimento de websites, coloca o wireframe como atividade fora da Arquitetura de Informao, mas exatamente entre a etapa desta e do Design Visual. Como prottipo inicial, o wireframe o comeo da manifestao visual da disposio dos contedos e a proposta de usabilidade de um site. E a vantagem de um modelo grfico como o wireframe justamente a de reunir diversas informaes de forma concisa e compacta e permitir a visualizao de um sistema de esquemas e hierarquias. Como citado no incio da sesso, os wireframes tem usos diferentes durante etapas de seu desenvolvimento. Mais do que isso, segundo Rosenfeld e Morville (2007), assim como o sitegrama e o fluxo de navegao, o wireframe e utilizado com diferentes membros de uma equipe de projeto, como: Arquitetos de Informao: usam para especificar cada pagina do website; Diretores de Arte e Designers Grafic os: utilizam para definir a linha grfica do website e o layout de cada pagina; Redatores e Produtores de Contedo : usam para especificar os conteudos das paginas; Empresa contratante: usa como validao dos requisitos do projeto; Entre os participantes de nossa pesquisa levantamos depoimentos de profissionais sobre o uso prtico e sobre objetivos do wireframe. Um deles comenta (designer, trabalha com Arquitetura de Informao h 8 anos) que realiza wireframes com objetivos de Raciocinar, prever e testar ideias para chegar a solues claras e objetivas. Outro (designer, trabalha com Arquitetura de Informao h 5 anos) ressalta tambm a funo de comunicao quando responde que usa wireframes [m]ais como prototipao de ideias alternativas e validao com usurios e clientes e menos como documentao. Ambos tambm
21 e 22 de outubro de 2011. So Paulo SP 11

propsitos pelos

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

comentaram ser comum a alterao de wireframes depois de layout, j tento praticado esta atividade vrias vezes. Um diretor de arte eventualmente sugere alguma mudana que pode beneficiar esteticamente a aplicao/site/sistema. Normalmente isso discutido e, caso se considere interessante, faz-se a mudana nos wires. [...] alguns clientes precisam tambm documentar (geralmente empresas maiores) o processo. Neste caso, h um adicional para se fazer a engenharia reversa dos wireframes. (designer de interao, trabalha com Arquitetura de Informao h 10 anos) Esta situao relacionada a solicitaes burocrticas de clientes, afirmou um dos participantes (coordenador de UX, trabalha com Arquitetura de Informao h 3 anos), inclusive para projetos sem arquitetura. Os usos mais comuns do wireframe podem ser classificados em comunicao, documentao e especificao. Porm, estes no so usos separados ou isolados, afinal, documenta-se de modo especificado para que seja possvel comunicar a diversos interessados sobre o projeto. Entretanto, importante manter a separao destes modos de usar para que seja possvel questionar sua aplicao e no perder de foco seu objetivo e utilidade. Se o wireframe construdo com o objetivo de comunicar algo pontual, necessrio um wireframe? O wireframe a melhor forma de se comunicar aquilo? Se o objetivo a documentao para consulta posterior, importante lembrar que "documenta-se de acordo com a necessidade: a documentao no um fim em si mesma" (GARRETT, 2003, p.138, traduo nossa). Os wireframes auxiliam a realizao de testes de usabilidade para a validao de propostas, assim como, aps a implementao de um site, servem para serem consultados antes de cada modificao posterior, a fim de prever impactos na arquitetura e funcionalidade. Nestes casos, quais so as especificaes necessrias? Para quem se especifica? Wireframes podem ter diferentes nveis de detalhes. De acordo com Reis (2007) um ponto comum em diferentes autores a existencia de tres niveis de especificacao do wireframe: 1. Representacao grafica dos elementos fidelidade; 2. Identificao destes elementos, agrupamentos e hierarquias;
21 e 22 de outubro de 2011. So Paulo SP 12

, variando de baixo a alto grau de

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

3. Descrio dos elementos, suas funcoes e detalhes para a implementacao; Falta de detalhes na especificao pode resultar em incompreenso ou em mal entendidos. Especificao excessiva pode representar trabalho desnecessrio. O wireframe simplificado, quando descontextualizado de sua condio especfica de representao informacional, pode parecer organizado e harmnico, mas levar seu leitor a ignorar erros, se comparado com o que ser lanado online, por no possuir toda a complexidade de uma interface final. J o wireframe detalhado, assim como qualquer trabalho que exija tempo e dedicao, pode gerar um apego entre seu produtor e o resultado do trabalho e, assim, restringir possibilidades de desenvolvimento em um estgio inicial. Greif (2001) chega a sugerir diminuir o tempo com wireframes para aumentar o tempo para fazer prottipos funcionais, para ter mais fidelidade na anlise com usurios. Existem muitas consideraes sobre a forma de apresentao do wireframe e os resultados de seu uso. Podem ser feitos a mo com papel e caneta ou com ajuda de computador. Quando feitos desta maneira, com papel e caneta, permitem a produo rpida de rabiscos e rascunhos (sketches) e a colaborao, sendo geralmente utilizados em um primeiro momento, para gerar e discutir ideias e conceitos para posterior especificao. Alguns softwares, inclusive, simulam a aparncia de "feito a mo", deixando wireframes similares a um rabisco, para que tenha uma aparncia pouco finalizada, alegando ser melhor para testes, por ser mais criticvel . Quando construdos em computador, os wireframes costumam estar em um processo de finalizao, com funcionalidades decididas, permitindo detalhamento. Existem vrios problemas relacionados ao detalhamento de wireframes antes da fase de especificao, como o investimento de tempo e esforo a construo de um documento, desenvolvendo muito em torno de uma nica ideia, em uma fase onde poderiam ser exploradas diversas possibilidades. O wireframe mais til como uma ferramenta para ajudar na criao de mockups de alta fidelidade e prottipos funcionais, do que como representao perfeita do que ser projetado. Ash Young (2011) argumenta que seus clientes no compreendem o wireframe. Isso faz com que problemas que deveriam ser identificados nos wireframes acabam emergindo apenas na fase de construo de mockups. Isto acontece quando os wireframes so

21 e 22 de outubro de 2011. So Paulo SP

13

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

simplesmente entregues para clientes sem um acompanhamento. Estes os aprovam, sem compreender exatamente as decises ali manifestadas. O wireframe, enquanto documento, no guarda em si as informaes. Ele uma referncia que ajuda a resgatar informaes sobre os projetos, mas demorado criar uma documentao que seja fcil e rpida de ser lida, at porque requer um projeto tal como aquele que ela documenta. Nem sempre possvel a demonstrao mais fiel de determinadas interaes em alguns tipos de wireframe (como aqueles feitos em papel, ou estticos). Assim, resta uma camada com informaes sobre o projeto, por vezes s acessvel por meio da conversa com os profissionais envolvidos. Toda atividade pode ser vista com vantagens e desvantagens. Entretanto, a desvantagem principal do wireframe aparece quando ele se torna a maior preocupao da Arquitetura de Informao. A situao inversa provavelmente no seria melhor: eliminar o wireframe, simplesmente, no se apresenta como soluo, tampouco apenas transferir o wireframe da atividade do arquiteto de informao para outro.

5 REFLEXOS E REFLEXES A preocupao deste artigo est voltada a questionar o movimento que coloca o wireframe como aquilo que define o arquiteto e a Arquitetura de Informao. E o wireframe um ponto crtico dentro de um projeto, como mostram Bill Buxton e Dan Brown: Esta uma parte "sria" do trabalho. Como o wireframe trama a superfcie, a preciso das linhas, bem como a qualidade dos grficos corporativos, esta renderizao indica uma srie de cuidados e de trabalho, feitos em um computador. [...] Ele diz "caro" e "refinado" (ainda que a conservao da baguna do wireframe tambm afirme "mas no finalizado"). Ele diz, "Fizemos alguma deciso e estamos considerando seriamente seguir nesse caminho" (BUXTON, 2007, p.107, traduo nossa) [...] wireframes esto entre os documentos mais controversos na biblioteca de experincia do usurio, porque eles borram a linha entre a estrutura e o design visual. Em outras palavras, wireframes cruzam a fronteira entre estrutura (como um tipo de informao diz respeito a outro tipo) e exposio (como representar informaes na tela). (BROWN, 2007, p.265, traduo nossa) O wireframe se configura objeto de poder do arquiteto quando visto como ponto de contato mais prximo com o desenvolvimento final de um projeto. "O wireframe, sendo o
21 e 22 de outubro de 2011. So Paulo SP 14

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

lugar onde a arquitetura da informao e design visual se juntam, se torna um assunto de debate e controvrsia." (GARRETT, 2003, p. 138, traduo nossa) onde o arquiteto pode interferir diretamente no resultado final: O wireframe e o primeiro documento que comeca a dar forma ao layout grafico das paginas , por isso ele pode ser um forte motivo de discussao entre o arquiteto de informacao e o designer grafico . Apesar de nao ser seu foco , o wireframe apresenta uma sugestao de organizacao espacial para o layout da pagina , o que pode restringir a liberdade criativa do designer grafico. (REIS, 2007) Pode-se entender essa situao como uma busca da Arquitetura de Informao por aumentar a relevncia e impacto de sua atividade. Porm, deve-se questionar se a busca de relevncia por meio do wireframe representa benefcio, quando este se torna uma atividade mais importante que aquelas que o antecedem e que deveriam sustentar as suas decises. A centralizao da Arquitetura de Informao no wireframe, desta maneira, atua contra a valorizao e conscientizao da profisso. J em 2008, Guilhermo Reis avaliou que as atividade mais praticadas pelos profissionais no so as que agregam mais valor. E o wireframe uma delas. H algum tempo temos a situao de arquitetos de informao se voltando para o campo de Experincia do Usurio para buscar o valor inerente a um papel estratgico daquele que no desenha "apenas" wireframes mas projeta experincias para usurios, ou seja, uma posio diretamente ligada s preocupaes da empresas e dos negcios. Em uma abordagem crtica, Luciano Lobato declara que a Experincia do Usurio apareceu para [...] satisfazer os designers que trabalhavam na rea digital, e o mantra repetido era de que "estamos projetando experincias, no interfaces ou artefatos" (de preferncia, com uma foto de uma garotinha sorridente usando uma interface ou artefato). Ora, se muitos designers de interao e arquitetos da informao [...] anteriormente eram considerados apenas "webdesigners", serem considerados "designers da experincia do usurio" enaltecia os seus egos (e talvez tambm, seus bolsos [...] [mas] Esse mito ou faz-de-conta teve sua utilidade, fazendo o designer entrar em contato com aspectos muito mais amplos que o mero projeto de websites e aplicativos como fins em si, o que correspondeu a uma mudana de paradigma em diversas reas do design. (LOBATO, 2010, p.2) Para os arquitetos, ao contrrio de projetar experincias, o projeto de wireframes acontece em um sentido muito mais operacional que estratgico. Mas no possvel projetar experincias utilizando wireframes? Luciano Lobato ainda aponta o design de experincias
21 e 22 de outubro de 2011. So Paulo SP 15

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

como um mito "til". Neste sentido, podemos entender que por meio de wireframes podemos sim projetar um direcionamento para uma experincia desejada, comprovada posteriormente a partir da observao do comportamento do sujeito da experincia. Mas, para isso, as decises que so manifestadas em um wireframe precisam ser reflexo de resultados de pesquisa, entendimento de contexto e negociao entre profissionais. Os elementos de um wireframe so construdos por um conjunto de profissionais, e a determinao de suas posies, distribuies e relaes esto assentadas em todo o processo de Arquitetura de Informao que o precede.

6 POSSVEL ARQUITETURA DE INFORMAO SEM WIREFRAME? Foram relatadas diversas situaes pelos participantes de nossa pesquisa, onde projetos foram desenvolvidos sem wireframe. Em um dos casos citados, no foram criados wireframes pelo curto perodo de tempo para produo, substituindo-os por rabiscoframes: rabiscos rpidos que ajudam a "garantir minimamente o pensamento em fluxo (arquiteto de informao, trabalha na rea de Arquitetura de Informao h 3 anos). Em outro caso, a ausncia de wireframes aconteceu em um contexto onde o escopo do projeto era reduzido e o trabalho era realizado de forma conjunta com outras equipes, para situaes assim, O processo tangibilizar o escopo (reduzido) e os conceitos estratgicos de maneira informal (rabiscos, conversas, descries, referncias) a medida que a equipe tcnica vai desenvolvendo o produto. O resultado so projetos concludos com rapidez e qualidade sem comparao. (coordenador de UX, trabalha com Arquitetura de Informao h 3 anos) Outro participante (designer, trabalha com Arquitetura de Informao h 5 anos) j teve experincia com esta situao ao trabalhar sob presso ou em ambientes em que o ciclo de desenvolvimento iterativo, tal como no desenvolvimento gil. Ele comenta que a criao de wireframes muito detalhados pode significar retrabalho, atrasos nos sprints, alm de ser desnecessrio a documentao excessiva, pois "dentro da abordagem iterativa o designer/arquiteto deve trabalhar com prottipos rpidos e priorizar a comunicao ao contrrio ao excesso de documentao.

21 e 22 de outubro de 2011. So Paulo SP

16

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

Apesar do ttulo provocativo, a questo principal no recai necessariamente em realizar processos de arquitetura de informao sem construir wireframes, mas em considerar seus usos e compreende-los como uma ferramenta, parte de um processo maior, e no construir wireframes como o objetivo final da Arquitetura de Informao. Existem muitas possibilidades a serem exploradas com e sem wireframes. Conforme j abordado anteriormente, o wireframe est no limiar entre a arquitetura de informao e o design de interface. O modo mais comum de se fazer wireframes refora uma dicotomia contedo e forma, onde o arquiteto trabalha em prol deste ltimo e, desta maneira, inevitavelmente interferindo no trabalho de Design Visual. Considerar a participao dentro do processo de desenvolvimento pode diminuir conflitos entre profissionais: Arquitetos de informao se queixam de que os designers que criam wireframes obscurecem suas arquiteturas por trs de sistemas de navegao que no refletem os princpios subjacentes s arquiteturas. Designers visuais reclamam que wireframes produzido por arquitetos de informao reduzem seu papel ao de um artista pintando de acordo com os nmeros, desperdiando a experincia e conhecimentos em comunicao visual que trazem para problemas de design da informao. (GARRETT, 2003, p.138, traduo nossa) Buscando minimizar essas divergncias entre profissionais, Wodtke (2003 apud REIS, 2007) sugere que "o wireframe seja fruto de um trabalho de equipe , criado em conjunto pelo arquiteto de informacao e pelo designer grafico ". Segundo James Garrett, quando arquitetos de informao e designers so separados, a nica maneira de se produzir wireframes de sucesso por meio da colaborao. Trabalhar nos detalhes do wireframe em conjunto permite que cada profissional veja as questes a partir de um ponto de vista, descobrindo problemas mais rapidamente, no incio do processo. Indo alm neste sentido, Garrett (2003, p.139) prope a execuo de projetos em pares, duplas de profissionais. Desta maneira, ao invs da tradicional setorizao das pessoas e das atividades, que tornam processos lentos e burocrticos, utilizam-se rascunhos dos wireframes para dar maior agilidade de comunicao e na definio dos projetos ao invs de um profissional isolado produzir documentos especificados para que depois algum leia e tente interpretar o que est dito ali.

21 e 22 de outubro de 2011. So Paulo SP

17

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

Outra abordagem a do wireframe colaborativo, processo para uma Arquitetura de Informao participativa. Um caso deste tipo de aplicao descrito por Frederick van Amstel na arquitetura do Portal BrOffice.org, que utilizou de um mtodo original: inspirado no ordenamento de cartes (card-sorting) mas focado no agrupamento e rotulao de informao, realizou-se a disposio de elementos do wireframe a partir de 128 contribuies dos participantes sobre como eles acreditavam que deveria ser o posicionamento e o interrelacionamento de informao em uma pgina especfica.

Figura 3 Trecho da interface interativa de wireframe colaborativo. Fonte: AMSTEL (2008)

Como documento, o wireframe est amarrado a uma srie de decises, estudos e pesquisas. importante que o wireframe esteja aliado a outros documentos que permitam emergir estas informaes e ajudem a facilitar o entendimento do projeto de Arquitetura de Informao. Para fornecer uma comunicao mais adequada, por exemplo, os wireframes podem se transformar em wireflows ou wireframes com narrativa guiada. Wireflows so sequncias de wireframes simplificados (por vezes, demonstrando apenas alguns dos elementos do site) encadeadas em um fluxograma a fim de visualizar um
21 e 22 de outubro de 2011. So Paulo SP 18

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

processo em etapas. Ajuda a no visualizar apenas as pginas estticas, mas a direcionar o olhar para a interao na transio entre telas.

Figura 4 - Exemplo de wireflow. Fonte: SHAHIAN (2009).

J o guided wireframe narrative7, ou wireframe com narrativa guiada (traduo nossa), tambm so usados wireframes simplificados, mas com comentrios e informaes sobre funcionalidades descritas em forma de narrativas. So histrias descritas durante o wireframe, diferente dos wireframes que demonstram de uma vez s todos os comentrios

tcnica

para

desenvolver

este

tipo

de

documento

descrita

em

detalhes

em

<www.boxesandarrows.com/view/the_guided_wire>

21 e 22 de outubro de 2011. So Paulo SP

19

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

sobre a interface. til para comunicar interaes complexas e para casos em que no possvel produzir um prottipo.

Figura 5 Exemplo de wireframe com narrativa guiada. Fonte: ZAPATA (2006) O wireframe tradicional tambm pode ser substitudo por outros tipos de documento. Para manter a liberdade de trabalho do design grfico sem deixar de lado as decises relativas a arquitetura de informao, uma das sadas o uso de wireframes sem indicao de posicionamento de elementos, mas com indicaes do peso relativo no site8. Ou

Conforme descrito em <http://usabilidoido.com.br/wireframes_e_rabiscos.html>


20

21 e 22 de outubro de 2011. So Paulo SP

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

seja: ao invs do arquiteto de informao determinar se ser utilizado um alto contraste ou um tamanho maior para destacar um elemento de uma pgina, apenas indicado que aquele elemento merece destaque e o designer grfico dar a soluo visual para que o elemento seja devidamente representado, em relao aos outros e de acordo com a arquitetura. Apesar de incomum, um dos participantes de nossa pesquisa (designer de interao, trabalha com Arquitetura de Informao h 10 anos), comenta que apesar de considerar mais slido o trabalho com wireframes, a documentao com a arquitetura tambm entregue descrita em uma planilha. Um caso de exemplo de alternativa ao wireframe neste sentido, descrito a seguir.

6.1

O CASO DO DIAGRAMA DE DESCRIO DA PGINA" Dan Brown (2002) possui um artigo interessante onde relata sua experincia com

wireframes em 1998. O documento havia se tornando apenas uma ferramenta interna, pela dificuldade de apresent-lo a clientes, pois um problema comum dos wireframes levantar a discusso apenas de design e aspectos estticos, deixando de lado a arquitetura. Entretanto, apesar do wireframe ajudar designers na visualizao de funcionalidades e das interaes do site, tambm era um fator limitante para estes: Tentamos usar wireframes como uma ferramenta estritamente interna: nenhum cliente podia v-los. Mas na mesma medida em que os wireframes ajudavam os designers a visualizar a funcionalidade e a interao do site, limitava seu estilo. Designers que ficaram presos ao wireframe no exercitavam sua criatividade, e todos os nossos sites comearam a ter a mesma aparncia. (BROWN, 2002, traduo nossa) Desta maneira, Brown identificou dois principais riscos associados aos wireframes: a expectativa dos clientes e a inovao dos designers. Perante esta situao pensou em duas solues: a de manter o wireframe e aprender como lidar melhor com as expectativas dos clientes e a trabalhar com os designers sem comprometer sua criatividade. Ou ento, o que foi sua opo escolhida, desenvolver uma abordagem diferente para a documentao da arquitetura de informao, que pudesse dar liberdade aos designers e ajudar clientes a discutir sobre contedo, prioridades e funcionalidades em um estgio inicial do projeto. Sua soluo, utilizada para o redesign do website USAirways.com em 1999 foi a criao de um page description diagram ou "diagrama de descrio de pgina" (traduo nossa). Neste diagrama as reas de contedo so descritas em texto, como em uma
21 e 22 de outubro de 2011. So Paulo SP 21

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

especificao funcional, e as descries de rea de contedo distribudas na pgina em ordem de prioridade (no caso, a prioridade se dava de maior prioridade para itens na parte superior e na esquerda do que aqueles na parte inferior e na direita).

Figura 6 Exemplos de "diagrama de descrio de pgina" (esquerda) e para o "diagrama de descrio de pgina" com o layout dos componentes (direita). Fonte: BROWN (2002)

Assim, o diagrama representa prioridade e contedo, e tambm inclui layouts de reas de contedo individuais (ver Figura 6). Com esta ferramenta, Dan Brown explica que conseguiu ajudar clientes a visualizar a interatividade, com conversas focadas em contedo, funcionalidade e prioridade dos contedos das pginas, sem travar a criao dos designers. O diagrama de descrio de pgina, ao demonstrar prioridades e fornecendo um contexto para o contedo e funcionalidade, proporciona aos designers visuais as informaes que eles precisam para criar um layout eficaz. Em qualquer pgina web, um pedao de informao pode ter maior ou menor peso visual, dependendo do uso da cor, contraste, posio e tipografia. Mas estas so ferramentas de um designer visual, so os fundamentos do design grfico, e esto fora do negcio do arquiteto de informao. (BROWN, 2002, traduo nossa) Dan Brown comenta que o diagrama de descrio de pgina foi bem sucedido e agradou os designers, mas dividiu opinies entre arquitetos. O autor questiona se os arquitetos de informao no deveriam estar mais focados em relacionamentos de informaes, categorias e contedo, ao invs de se preocuparem com formas e contrastes, que so habilidades de quem trabalha com relaes visuais, como os designers grficos. Diagramas de descrio de pgina no precisam substituir os wireframes. Na verdade, se quisermos crescer como um ofcio, ns
21 e 22 de outubro de 2011. So Paulo SP 22

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

devemos encontrar meios adicionais para comunicar ideias de arquitetura de informao. Assim como os computadores portteis e computadores de mesa fazem coisas semelhantes, mas so usados em diferentes situaes, wireframes e diagramas de descrio de pgina tambm podem coexistir pacificamente como ferramentas teis de arquitetura de informao. (BROWN, 2002, traduo nossa)

Figura 7 Detalhe do diagrama de descrio de pgina. Fonte: BROWN (2002)

6.2

ARQUITETURA DE INFORMAO GIL Uma proposta de Arquitetura de Informao sem wireframe tambm se encaixa em um

contexto de metodologia gil, como o caso apresentado por Leandro Gejfinbein no EBAI de 2009 sobre uma nova viso da Arquitetura de Informao na Globo.com. Segundo a apresentao, a implementao de metodologias geis dentro de uma rotina de Arquitetura de Informao tem diversas vantagens, como a diminuio da burocracia no processo, por meio da eliminao de entregveis e orientao a entrega, no ao projeto. Torna-se "menos importante saber onde colocar o vdeo. Fundamental entender tudo que, enquanto sistema de informao, caracteriza esse produto, que originou o vdeo, sua oferta, seu consumo e possveis interaes." (GEJFINBEIN, 2009) A funo do arquiteto se torna pensar na
21 e 22 de outubro de 2011. So Paulo SP 23

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

narrativa da experincia com o consumo de informao, pois eliminam-se os documentos prototipados. Busca-se comunicao no lugar de apenas documentao e compartilhamento de responsabilidades entre profissionais, como entre arquiteto e designer. Ao invs de produzir wireframes, profissionais trabalham de forma mais prxima em busca da apresentao dos primeiros layouts do produto.

6.3

RABISCOS Ser que todo projeto de website necessita de wireframe? Ou a etapa de

desenvolvimento onde o wireframe aparece pode, em alguns casos, ser eliminada e o site pode ser prototipado enquanto desenvolvido, como no caso da metodologia gil? Seja na atuao com ou sem wireframe, um prtica fundamental o do estudo de possibilidades visuais por meio de rabiscos, tambm conhecido por rascunho ou esboo (ou ainda, como j citado, por rabiscoframe e sketch).

Figura 8 Exemplo de rabiscos de Karla Cruz para a interface de vdeo de um dispositivo. Fonte: do autor.

Para se chegar em decises e solues visuais, apontando respostas e direcionando um caminho mais claro, importante evitar a criao de wireframes de forma direta. A criao,

21 e 22 de outubro de 2011. So Paulo SP

24

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

sem passar antes por uma etapa de rabiscos, fica limitada, pois encaminha-se a uma fase de especificao, onde ideias convergem, sem antes ter experimentado um processo divergente de ideias. Como ferramenta de criao, o rabisco pode ser encarado como uma tcnica de prototipao de baixa fidelidade que "permite articular sensao e funo de um design de um modo que o wireframe no permite" (HARRELSON, 2009, traduo nossa). Um exemplo clssico de utilizao colaborativa de rabiscos o sketchboard (ou quadro de rabiscos), criado pela empresa Adaptive Path, que facilita a avaliao de sries de conceitos de interao. A utilizao de rabiscos retorna em diversos benefcios, sendo o principal deles a oportunidade de se testar rapidamente diversas possibilidades de criao. Esta experimentao permite estudar, avaliar e comunicar elementos que, a medida que so definidos, podem ser especificados e implementados.

7 CONCLUSO Apesar da centralidade do wireframe, interessante perceber como este documento ocupa pequena ateno nos principais livros de referncia da rea. Em livros influentes como "Information Architecture for the World Wide Web" de Rosenfeld e Morville (2007), por exemplo, so poucas pginas dedicadas apenas ao tema. O restante? Trata de arquitetura de informao. O projeto de interfaces um processo poltico (AGNER, 2006, p.140-144) onde se manifestam conflitos de perspectivas e prioridades, em um jogo que envolve mltiplos interesses de clientes, usurios, arquitetos, designers, desenvolvedores, entre outros. Arquitetos de informao devem considerar as implicaes ticas de sua atividade a medida que ganham poder de ao: a simples deciso de que categorias estaro disponveis para o usurio escolher para declarar seu gnero em um sistema (formulrio ou perfil de rede social, por exemplo) est embutido de convices polticas, por exemplo (KANNABIRAN e PETERSEN, 2010). Os softwares voltados para a construo de wireframes buscam manifestar algumas convenes de apresentao visual utilizadas pelos profissionais. Um exemplo a "transformao" automtica de wireframes com cores em documentos dessaturados
21 e 22 de outubro de 2011. So Paulo SP 25

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

(disponvel em softwares como o Axure). Esta funcionalidade vem da orientao para que cores no sejam utilizadas, geralmente guiada pela ideia de que precisam ter uma aparncia inacabada, para que no interfiram no trabalho do designer de interface, e de que isso auxilia o arquiteto de informao a focar em sua atividade e no se preocupar com questes de composio visual e grfica, por exemplo. Entretanto, como a indicao de tamanho, contraste e organizao da disposio de elementos na interface no so consideradas tarefas do designer, mas determinar cores sim. Desejamos com este artigo, por meio do resgate de tcnicas e apontamentos para a Arquitetura de Informao nas metodologias geis, levantar o debate para uma otimizao do uso de wireframes para fortalecer a rea na produo de melhores projetos. A unanimidade do wireframe, que indica que no se pratica Arquitetura de Informao sem este documento um paradigma, no um consenso. O wireframe til para determinados casos, mas pode no ser fundamental para todos os contextos de projetos: um documento que em muitas vezes auxilia a expressar decises, estudos, pesquisas e definies de Arquitetura de Informao mas no nem a sntese do processo desta, nem seu resultado. Assim, esperamos que pesquisas futuras possam explorar e experimentar as abordagens apresentadas, avaliar resultados e criar novos mtodos e tcnicas.

8 AGRADECIMENTOS Agradecemos a Luciano Lobato por sua participao fundamental nas discusses deste artigo e na fundamentao e execuo da pesquisa. A Belkiss Marcrio por fornecer gentilmente dados de sua pesquisa sobre o perfil do Arquiteto de Informao no Brasil. A Frederick van Amstel por indicaes de referncias. E aos participantes da pesquisa pelo tempo dedicado e pela confiana em abrirem seus processos de trabalho.

9 REFERNCIAS AGNER, Luiz. Ergodesign e arquitetura da informao: trabalhando com o usurio. Rio de Janeiro: Quartet, 2006. AGNER, Luiz; SILVA, Fabio Luiz Carneiro Mourilhe. Uma introduo arquitetura da informao: conceitos e usabilidade. AnpeDesign, 2003. Disponvel em: <http://www.agner.com.br/download/artigos/2CIPED_Uma_Introducao_AI.pdf> Acesso em: 15 jul. 2011. Acesso em: 10 jul. 2011.

21 e 22 de outubro de 2011. So Paulo SP

26

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

AMSTEL, Frederick M. C. van. Arquitetura da Informao Participativa do Portal BrOffice.org. 2 EBAI - Encontro Brasileiro de Arquitetura de Informao, 2008. Disponvel em: <http://www.congressoebai.org/index.php/2008/arquitetura-da-informacao-participativado-portal-broffice-org/09>. Acesso em: 13 jul. 2011. AMSTEL, Frederick M. C. van. Agenciamento Mediado e Implicaes ticas para o Design de Interao. Simpsio Nacional de Tecnologia e Sociedade, 2007. Disponvel em: <http://usabilidoido.com.br/arquivos/agenciamento_mediado_tecsoc2007.pdf> Acesso em: 11 jul. 2011. BARROS, Gil. Com quantos chapus se faz um arquiteto? 3 EBAI - Encontro Brasileiro de Arquitetura de Informao, 2009. Disponvel em: <http://www.congressoebai.org/index.php/2009/com-quantos-chapeus-se-faz-umarquiteto/10> Acesso em: 10 jul. 2011. BROWN, Daniel. Where the Wireframes Are: Special Deliverable #3. Boxes and Arrows, 2002. Disponvel em: <http://www.boxesandarrows.com/view/where_the_wireframes_are_special_deliverable_3>A cesso em: 12 jul. 2011. BROWN, Daniel M. Communicating Design - Developing web Site Documentation for Design and Planning. Berkeley: New Riders. 2007. BUXTON, Bill. Sketching User Experiences: Getting the Design Right and the Right Design. Morgan Kaufmann Publishers Inc., San Francisco, CA, 2007. FERREIRA, Sueli Mara Soares Pinto; REIS, Guilhermo. A prtica de Arquitetura de Informao de websites no Brasil. TransInformao, Campinas, 20(3): 285-307, 2008. Disponvel em: <http://www.guilhermo.com/ai_biblioteca/referencia.asp?referencia=371>. Acesso em: 11 jul. 2011. FISCHER. Gustavo Daudt. Conceitos e caractersticas do Design Estratgico como provocaes iniciais Arquitetura da Informao. 4 EBAI - Encontro Brasileiro de Arquitetura de Informao, 2010. Disponvel em: <www.congressoebai.org/wpcontent/uploads/ebai10/EBAI10_artigo12.pdf> Acesso em: 14 jul. 2011. GARRETT, Jesse J. ia/recon. 2002. Disponvel em: <http://jjg.net/ia/recon/> verso em portugus em <http://jjg.net/ia/recon/pt-br.html>. Acesso em: 12 jul. 2011. GARRETT, Jesse James. The Elements of User Experience - User-Centered Design for the Web. Berkeley: New Riders, 2003. GEJFINBEIN, Leandro. Uma nova viso da Arquitetura da Informao na Globo.com. 3 EBAI - Encontro Brasileiro de Arquitetura de Informao, 2009. Disponvel em: <http://www.congressoebai.org/index.php/2009/uma-nova-visao-da-arquitetura-dainformacao-na-globo-com/10> Acesso em: 16 jul. 2011 GIL, Antonio Carlos. Como elaborar projetos de pesquisa. So Paulo: Atlas, 1991. GREIF, Sacha. Why wireframes can hurt your project. Attack of Design, 2011. Disponvel em: <http://www.attackofdesign.com/why-wireframes-can-hurt-your-project/> Acesso em: 14 jul. 2011.
21 e 22 de outubro de 2011. So Paulo SP 27

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

HARRELSON, Dan. Rapid Prototyping Tools. Adaptive Path, 2009. Disponvel em: <http://www.adaptivepath.com/ideas/rapid-prototyping-tools>. Acesso em: 15 jul. 2011. HOOBER, Steven. Designing by Drawning: A pratical guide to creating usable interactive design. United States of America: Little Springs design. 2009. KANNABIRAN, Gopinaath; PETERSEN, Marianne Graves. Politics at the interface: A Foucauldian power analysis. Proc. of NordiCHI2010. New York:ACM Press. 2010, p. 695698. Disponvel em: <http://www.interactivespaces.net/data/uploads/papers/157.pdf> Acesso em: 12 jul. 2011. LOBATO, Luciano. Design para o Comportamento: uma alternativa ao Design da Experincia do Usurio. 4 EBAI - Encontro Brasileiro de Arquitetura de Informao, 2010. Disponvel em: <http://www.congressoebai.org/index.php/2010/design-para-ocomportamento-uma-alternativa-ao-design-da-experiencia-do-usuario/10> Acesso em: 12 jul. 2011. MARCRIO, Belkiss. Perfil do Arquitetuo de Informao no Brasil - Situao em 2010. Monografia. UFMG: Belo Horizonte. 2010. Disponvel em: <http://www.agner.com.br/download/pucrio/AI/AI%202010%20Monografia%20Belkiss%20 Marc%F3rio.pdf>. Acesso em: 11 jul. 2011. MORVILLE, Peter. Big Architect, Little Architect. Strange connections. Publicado em 27 jul 2000. Disponvel em: <http://argus-acia.com/strange_connections/strange004.html> Acesso em: 14 jul. 2011. REIS, Guilhermo Almeida dos. Perfil do Arquiteto de Informao Brasileiro - 2008. 2 EBAI - Encontro Brasileiro de Arquitetura de Informao, 2008. Disponvel em: <http://www.congressoebai.org/index.php/2008/perfil-do-arquiteto-de-informacaobrasileiro/09> Acesso em: 11 jul. 2011. REIS, Guilhermo Almeida dos. Centrando a Arquitetura de Informao no usurio. So Paulo, 2007. Dissertao (Mestrado) - Escola de Comunicao e Artes, Universidade de So Paulo. Disponvel em: <http://www.guilhermo.com/mestrado/>. Acesso em: 12 jul. 2011. ROSENFELD, Louis; MORVILLE, Peter. Information Architecture for the World Wide Web. OReilly: Sebastopol. 2007. SHAHIAN, Tara. Page Level Wireflows. Blog "Wireframes". 03/02/2009. Disponvel em: <http://wireframes.linowski.ca/2009/02/page-level-wireflows/>. Acesso em: 15 jul. 2011. TRAVIS, Aaron T. Sketchy Wireframes: When you can't (or shouldn't) draw a straight line. Boxes and Arrows, 2009. Disponvel em: <http://boxesandarrows.com/view/sketchywireframes>. Acesso em: 13 jul. 2011. WODTKE, Christina; GOVELLA, Austin. Information Architecture: Blueprints for the Web, Second Edition. Berkeley: New Riders. 2009. YOUNG, Ash. Wireframes are not enough. Blog The Web Design ThinkTank. 14/06/2011. Disponvel em <http://www.evoluted.net/thinktank/web-design/wireframes-arenot-enough> Acesso em: 10 de out. 2011.

21 e 22 de outubro de 2011. So Paulo SP

28

5 EBAI Encontro Brasileiro de Arquitetura de Informao .

ZAPATA, Andres. The Guided Wireframe Narrative for Rich Internet Applications Case Study: Prototyping Complex Interactions. Boxes and Arrows, 2006. Disponvel em: <http://www.boxesandarrows.com/view/the_guided_wire>. Acesso em: 13 jul. 2011.

21 e 22 de outubro de 2011. So Paulo SP

29