Arquitetura da Informação (em Português)

[Eduardo Rangel Brandão <brandaoedu AT gmail.com>]

Ricardo,

Não acho que o wireframe tenha que decidir a posição dos elementos. Para mim ele tem que indicar quais elementos devem existir na tela, qual a importância desses elementos, mas não tem que diagramar esses elementos na tela.

Por exemplo. Se o arquiteto da informação tem uma formação em design (como é bem comum acontecer), é provável que ele até pense o wireframe já levando em consideração a posição final dos elementos na tela. Mas se o AI tiver uma formação em jornalismo, por exemplo, ou em biblioteconomia? Nesse caso. é provável que ele não tenha estudado a fundo sobre grid e gestalt, por exemplo. Logo, não acho que ele terá condições de indicar corretamente a posição final dos elementos na interface. Ele pode propor soluções, mas isso não o livra de ser questionado pelo designer.

Eu trabalho como AI há muitos anos. Mas, antes disso, eu trabalhei como designer de interfaces durante muitos outros anos e nunca aceitei simplesmente copiar/colar o wireframe do AI para o layout da interface sem ao menos questionar o motivo dos elementos estarem posicionados daquele jeito.

Quando citei o exemplo do menu no wireframe, afirmando que ele tem que dizer apenas que existe um menu e não obrigar o designer a layoutar esse menu na  horizontal ou vertical, é porque considero que o layout só deve refletir isso com base em outras decisões de projeto: como o escopo da interface, se ela vai crescer, ter novos releases e, eventualmente, o menu horizontal pode limitar as opções de navegação do menu, por exemplo (sendo necessária uma navegação vertical). É um exemplo bobo e bem simples, diferente de uma série de questões e problemas que a gente acaba vivenciando no dia-a-dia. Mas uso esse exemplo para dizer que isso não é uma decisão que tem que ser baseada em wireframe, mas sim no escopo do projeto e na estratégia que foi determinada para o futuro do produto.

Abç,

Eduardo Rangel Brandão
brandaoedu AT gmail.com

Em 30 de abril de 2010 02:19, Ricardo Tomasi <ricardobeat AT gmail.com> escreveu:

Eduardo,

Pensando dessa maneira, o wireframe é mesmo desnecessário. A função original do wireframe é definir conteúdo, formatos E posição. Se ele não define a posição dos elementos, não serve pra nada e dá no mesmo usar um sitemap + inventário de conteúdo, deixa de ser planejamento de interface.

Prefiro também criar wireframes com pouco detalhe, usando post-it ou papel A5 ou menor, e uma caneta de ponta grossa pra limitar os detalhes mesmo. Mas considero posicionamento de menus/navegação crucial, não pode ser alterado depois a menos que haja alguma mudança significativa no projeto.

E voltando ao assunto inicial, semana retrasada apresentei com uma colega um wireframe a um cliente totalmente leigo, explicando a sua função e o que ele estava representando, e a reação foi ótima. É um projeto de e-commerce, mesmo sem muito "empurra" o cliente entendeu a necessidade de organizar o conteúdo e planejar a interface e navegação, até fazendo um paralelo com a organização da loja e processo de compra. Foi bem animador :)

E saindo um pouco do tópico, chegamos a conclusão (circustancial) de que usar um azul claro no lugar do cinza pode reforçar a noção de "planta/mapa da interface" facilitando a compreensão do wf. Fiquei curioso, alguém tem opiniões/referências sobre isso?

abs,

Ricardo

Em 29 de abril de 2010 14:14, Eduardo Rangel Brandão <brandaoedu AT gmail.com> escreveu:

Rafael,

Wireframe não é layout, ele é um documento para você indicar os elementos que devem existir na tela. O layout é o trabalho do designer de interface. Ele irá posicionar os elementos na tela. É claro que isso é, na maioria das vezes uma decisão em conjunto com o AI.

Antes de pensar no wireframe, sugiro o AI sentar junto com o designer e conceituar a tela, suas funcionalidades, quais os elementos são importantes. Para isso, um sketche já basta. Fazer o wireframe será uma perda de tempo maior, para um documento que ficará engavetado no final do projeto.

Não concordo com essa visão de que o layout tem que seguir o wireframe. Pense que o trabalho do AI tem mais a ver com o planejamento da interface, com o projeto, é mais macro, o AI tem uma visão do todo e o designer de interface vai dar a solução sobre o layout. Se o AI e o designer de interface forem a mesma pessoa, melhor ainda.

Abç,

Eduardo Rangel Brandão
brandaoedu AT gmail.com

Em 29 de abril de 2010 13:34, Rafael Poggi <rpoggi AT gmail.com> escreveu:

Olá!

Você disse: "Um menu, por exemplo, se estiver na horizontal no wireframe, não é obrigado a ficar na mesma posição no layout final. "

Eu não concordo muito com isso. O trabalho do AI não é também proporcionar uma experiência de navegação adequada? Se eu coloco um menu na vertical é porque ele seria  a melhor solução para o problmea apresentado. Então ele deve ser layoutado na vertical, exatamente ali onde eu coloquei. Penso assim pelo menos...

abs

Rafael Poggi
::: design+letras
::: 21 8213-3449

Web
::: http://www.designeletras.com

Networking
::: http://twitter.com/rpoggi
::: http://www.linkedin.com/in/rafaelpoggi

Humor
::: http://www.insolente.com.br

Em 29 de abril de 2010 11:24, Eduardo Rangel Brandão <brandaoedu AT gmail.com> escreveu:

Rafael,

Acho o wireframe um documento cada vez mais desnecessário.

1) O AI perde tempo para produzir, num trabalho burocrático quando ele poderia estar pensando em novas soluções e funcionalidades. Além disso, se a interface final tiver mudanças depois do wireframe pronto (o que quase sempre acontece), esse wireframe se torna defasado (afinal, depois da interface pronta você não vai perder tempo para consertar o wireframe, certo?).

2) Wireframe não é layout, ele só indica os elementos que devem existir na interface e a importância dos mesmos. O layout final, inclusive, não precisa seguir a mesma posição que os elementos ocupam no wireframe. Um menu, por exemplo, se estiver na horizontal no wireframe, não é obrigado a ficar na mesma posição no layout final. O wireframe tem que indicar a existência desse menu, quais são seus itens, etc., mas não dizer se fica na horizontal ou vertical.

3) O cliente não tem capacidade para entender o wireframe, digo isso por experiência própria. Muitas vezes, nem as outras pessoas da equipe conseguem entender completamente esse tipo de documento e acabam interpretando uma coisa ou outra de maneira errada.

O conselho que te dou é: trabalhe com sketches para conceituar a interface, discutir com o designer (e o restante da equipe também). Na hora de apresentar o projeto para o cliente, use um layout ou um protótipo, se o seu objetivo for mostrar para ele que efeito algumas funcionalidades produzem na interface.

Abç,

Eduardo Rangel Brandão
brandaoedu AT gmail.com

Em 29 de abril de 2010 11:07, Rafael Poggi <rpoggi AT gmail.com> escreveu:

Bom dia!

Gostaria de saber como é a reação dos seus clientes perante um wireframe (e obviamente sua especificação funcional). Vocês costumam mostrar a ele e discutir a arquitetura detalhadamente? Ou o wireframe é discutido apenas com o designer e o cliente fica apenas com o layout para avaliar? Falo isso porque um cliente freela meu - pequeno - disse que não entendeu o porquê do wireframe e não entendia aquilo, mesmo eu tenho explicado a ele toda a importância da parada. 

abs

Rafael Poggi
::: design+letras
::: 21 8213-3449

Web
::: http://www.designeletras.com

Networking
::: http://twitter.com/rpoggi
::: http://www.linkedin.com/in/rafaelpoggi

Humor
::: http://www.insolente.com.br

. . . . . . . . . . . . . . . . . . . . . .
Ao responder, elimine o texto não essencial
de mensagens anteriores e evite formatação.

Lista de discussão AIfIA-pt
AIfIA-pt AT lists.ibiblio.org
Arquitetura de Informação em Português
http://lists.ibiblio.org/mailman/listinfo/aifia-pt

. . . . . . . . . . . . . . . . . . . . . .
Ao responder, elimine o texto não essencial
de mensagens anteriores e evite formatação.

Lista de discussão AIfIA-pt
AIfIA-pt AT lists.ibiblio.org
Arquitetura de Informação em Português
http://lists.ibiblio.org/mailman/listinfo/aifia-pt

. . . . . . . . . . . . . . . . . . . . . .
Ao responder, elimine o texto não essencial
de mensagens anteriores e evite formatação.

Lista de discussão AIfIA-pt
AIfIA-pt AT lists.ibiblio.org
Arquitetura de Informação em Português
http://lists.ibiblio.org/mailman/listinfo/aifia-pt

. . . . . . . . . . . . . . . . . . . . . .
Ao responder, elimine o texto não essencial
de mensagens anteriores e evite formatação.

Lista de discussão AIfIA-pt
AIfIA-pt AT lists.ibiblio.org
Arquitetura de Informação em Português
http://lists.ibiblio.org/mailman/listinfo/aifia-pt

. . . . . . . . . . . . . . . . . . . . . .
Ao responder, elimine o texto não essencial
de mensagens anteriores e evite formatação.

Lista de discussão AIfIA-pt
AIfIA-pt AT lists.ibiblio.org
Arquitetura de Informação em Português
http://lists.ibiblio.org/mailman/listinfo/aifia-pt