Grids para o design de interação

Capa de “Grids: Construção e Desconstrução” de Timothy Samara

A revista WebDesign, publicação impressa da Arteccom, é o principal veículo de comunicação sobre o design para web no país. Apresenta mensalmente artigos, entrevistas e reportagens sobre a criação e o desenvolvimento de projetos interativos. A WebDesign deste mês publicou uma matéria de capa sobre a discussão do emprego de grids em projetos para a web. Participaram os designers João de Souza Leite, professor da ESDI e da PUC-Rio, José Ricardo Cereja, coordenador da Infnet, Marcelo Gluz, gerente da Globo.Com, Evelyn Grumach, da EGDesign, entre outros. Todo o debate girou em torno dos conceitos do clássico livro “Grids: Construção e Desconstrução” de Timothy Samara, recém-publicado no Brasil.

Convidado pelo diretor de redação Luis Rocha a participar da matéria, me animei a registrar reflexões sobre este interessante tema que tem perpassado toda a história do Design no séc. XX, e pontuado algumas de minhas aulas na UniverCidade. Abaixo, elas são reproduzidas na sua íntegra:

Função do grid – Segundo Timothy Samara , todo trabalho de design pressupõe a solução de problemas visuais e organizativos. As ilustrações, fotos, símbolos, massas de textos, chamadas, subtítulos, gráficos, links e botões devem ser reunidos para transmitir a informação e facilitar as tarefas do usuário. O grid é a maneira racional de juntar todos esses elementos. A função do grid é introduzir uma ordem sistemática num leiaute e permitir que o designer diagrame com eficiência uma grande quantidade de informação. Também permite vários colaboradores num mesmo projeto.

Vantagens – A principal vantagem da utilização do grid em projetos interativos é permitir a consistência visual da interface ao longo de todas as suas telas. Esta é uma característica fundamental, pois se relaciona diretamente a um importante princípio heurístico da usabilidade, defendido por diversos pesquisadores da área como Ben Shneiderman e Jakob Nielsen.

Grid no projeto de interação – O grid para a construção de um projeto interativo deve preferencialmente trabalhar com uma abordagem líquida, permitindo flexibilidade para apresentação da informação em diversas resoluções e diferentes dispositivos de acesso . Deve ser orgânico na ordenação dos elementos e da informação. A largura e altura das colunas podem variar, por exemplo, e o usuário poderá habilitar um corpo maior para o texto, para o seu maior conforto de leitura, causando um natural deslocamento do conteúdo. Nesse sentido, um grid hierárquico é o mais adequado para a web, pois permite a padronização das áreas de exibição com mais flexibilidade.

Elementos do grid – Os elementos principais de um grid para um projeto interativo são aqueles que permitirão acomodar com naturalidade os sistemas clássicos de navegação embutidos no conteúdo dos websites: a navegação global, local, e a contextual. Sem estas características elementares não há boa arquitetura de informação.

Grid hierárquico – Apesar de o grid hierárquico ser o mais adequado para as telas de sistemas interativos na web, acredito que, no limite, qualquer tipo de grid possa ser empregado com sucesso, inclusive uma combinação deles em diferentes subsites. Mas note que o conteúdo dinâmico dos sites e o redimensionamento das janelas exigem flexibilidade e desencorajam uma abordagem modular estritamente tradicional.

Violação do grid – Na web, com suas diversas camadas, há inúmeras oportunidades de o designer superar as regras clássicas do grid, desconstruindo-as a partir do uso de técnicas de programação como CSS, Action Script e Ájax. Inclusive pode-se colocar nas mãos do usuário a decisão final sobre a apresentação visual da informação na tela, permitindo-lhe a distribuição dinâmica dos blocos de conteúdo através do grid ou fora dele. O único limite existente para este tipo de experimentação é o próprio usuário, acredito eu, pois a “violação” das características tradicionais de um grid só tem sentido na medida em que colocar maior controle sobre a apresentação do conteúdo nas mãos do usuário, facilitando as suas tarefas. Em resumo, o limite é a usabilidade e encontrabilidade da própria informação.

Grids X criatividade – Não penso que seja um problema somente de tecnologia. Você também pode utilizar tecnologias interessantes como CSS e abordagem tableless para criar um projeto monotonamente cansativo e pouco inovador. A web está ficando mais madura, e nossas relações com ela estão mudando, entretanto as oportunidades de inovação e de criatividade muitas vezes são bloqueadas por limitações não nossas, ou da tecnologia em si, mas dos clientes, ou do modo tradicional como a maioria das empresas é administrada. Estas, muitas vezes, trabalham com expectativas preconcebidas sobre o resultado gráfico a ser alcançado. Ainda há muitos economistas, engenheiros e advogados aprovando os projetos de design lá no lado dos clientes.

Usabilidade do grid – Outro desafio é que, ao desconstruir os grids previsíveis, os designers são desafiados a manter a facilidade de uso com layouts que destoam do que estamos acostumados. A adequada análise das tarefas do usuário e da encontrabilidade da informação, neste caso, é essencial. Isto poderá implicar uma maior necessidade de testes de usabilidade, e outras técnicas de projeto, como o card sorting, para garantir a boa arquitetura de informação.

Design de interação

Os editores Keiichi Sato (Illinois Institute of Technology) e Kuohsiang Chen (National Cheng King University, Taiwan) do International Journal of Design estão pedindo artigos para um número especial sobre aspectos culturais do Design de Interação.

O Journal of Design é uma publicação de design em várias áreas – design industrial, comunicação visual, design de interface, design de animação e jogos, design arquitetônico e urbano. Entre seus objetivos está a troca de idéias e a publicação de descobertas de pesquisadores de diferentes culturas.

Mais informações: www.ijdesign.org/ojs/index.php/IJDesig

Arquitetura de informação, usabilidade e acessibilidade: referências completíssimas online

A University of Minnesota Duluth disponibilizou esta série de links sobre webdesign para embasar seus cursos. É um importante consolidado de recursos e referências online, muito completo, sobre os mais diversos tópicos ligados ao design e desenvolvimento. Confira:

Referências sobre arquitetura de informação

Referências sobre usabilidade

Referências sobre acessibilidade

Mais resenhas na blogosfera

Volta e meia, eu encontro na web uma nova resenha escrita sobre o meu livro “Ergodesign e Arquitetura de Informação” (Quartet, 2006). Esta aqui (que tomei a liberdade de reproduzir) foi feita por Rafael Rez Oliveira, no blog Ex Vertebrum. Obrigado, Rafael !!


Abre aspas:

Luiz Agner é o primeiro autor brasileiro a dedicar um livro inteiro ao tema da Arquitetura da Informação. A abordagem utilizada por Agner é simples e direta: relaciona o ergodesign (projeto de design baseado na ergonomia) com o design da informação em diversos capítulos curtos, cada um abordando um tema específico.

A AI é derivada das disciplinas de IHC (Interação Humano Computador) e da Biblioteconomia, valendo-se também da capacidade dos designers de organizar visualmente os sistemas de informação. O profissional que consegue reunir estas habilidades é o Arquiteto da Informação.

Agner se vale de uma linguagem jovem, não-acadêmica e descontraída para tornar o tema mais simples de compreender, e neste questito ele obtém muito sucesso. O livro foi muito bem recebido tanto por profissionais da área quanto por acadêmicos e pesquisadores, que passam a contar com uma bibliografia de apoio mais completa.

Li o livro todo numa só noite, numa tacada só, o que comprova a facilidade de absorvê-lo, mas é bom obeservar que nem por isso o livro é superficial. Agner se esforçou muito para conseguir fazer dele uma ferramenta de aprendizado completa.

Alguns trechos do livro estão disponíveis em forma de artigos no WebInsider.

Fecha aspas.

O design das coisas do futuro

Design of future things - Capa

Nesta entrevista realizada por Peter Merholz, Don Norman fala de seu novo livro, o Design das Coisas do Futuro. Norman comenta, entre outros temas, a atual popularização dos termos usabilidade, design centrado no usuário, design de experiência, e interação humano-computador, criticando a descaracterização e a perda de seus significados originais, a partir da sua apropriação pelo mercado. [Ouça o podcast]

Donald Norman foi um dos fundadores do campo da Ciência Cognitiva e foi professor desta disciplina na Universidade da California, San Diego. Também é professor do Mestrado em Design e Inovação na Northwestern University. Seus trabalhos são, na maior parte, sobre engenharia de usabilidade. Trabalhou na Apple e HP, e fundou o Nielsen Norman Group, a consultoria de usabilidade que inclui Jakob Nielsen e Bruce “Tog” Tognazzini. Norman atualmente divide seu tempo entre consultorias, seus livros e o magistério.

Link relacionado – UX Week 2008

Revista Faz

Revista FAZ - Capa

Acaba de ser lançada a revista Faz, com textos especializados em design de interação, cujo download gratuito pode ser realizado em pdf de alta resolução a partir do site www.revistafaz.org. Faz é dirigida por Marcelo Garrido e conta com Peter Morville como membro do seu comitê editorial.

Os artigos do primeiro número evidenciam toda a interdisciplinaridade dos criadores de interação. Os temas de Faz nos colocam diversas questões práticas, técnicas e reflexões teóricas. Segundo o seu editorial, a revista abre-se e se fecha mostrando a histórica tensão na oposição entre criar novas regras ou manter as regras atuais.

Em Faz, o ofício do design de interação não tem uma única religião. É uma iniciativa da comunidade de designers Cadius. Vale baixar e conferir.

Mais resenhas…

Quero também agradecer aqui ao André Valongueiro pela resenha do livro “Ergodesign…” publicada em seu blog:

“… Gostaria de indicar, para aqueles que desejam ter o seu primeiro contato com a Arquitetura de Informação, o livro Ergodesign e Arquitetura de Informação – Trabalhando com o Usuário, de Luiz Agner.

É um trabalho excelente, onde é possível ter contato com muitos dos conceitos mais usados na Arquitetura de Informação.

Gostei especialmente da explanação sobre o papel da AI na inclusão digital e das dicas sobre como lidar com os interesses existentes dentro de uma organização quando se iniciam projetos de interface e estruturação de conteúdo para uma nova ferramenta ou website.”

Ergodesign e arquitetura de informação – resenhas

Novamente gostaria de agradecer a todos os leitores do meu livro “Ergodesign e Arquitetura de Informação” que estão escrevendo resenhas sobre ele e postando-as em seus sites e blogs, a exemplo do Fred do Usabilidoido. Outra delas é a do Rodrigo Muniz, que tomei a liberdade de reproduzir aqui:

“Comprei o livro num pacote junto com “Não me faça pensar” e decidi lê-lo antes do clássico de Steve Krug por ter visto muitos comentários de que o livro fazia bem o papel introdutório em Arquitetura da Informação e é isso mesmo. Quando terminei de ler pareceu que havia revisado tudo o que já estudei na internet sobre AI e Usabilidade inclusive alguns textos do autor.

Destaque para o capítulo onde Luiz Agner fala dos processos políticos com os quais o Arquiteto da Informação deve se acostumar para conseguir uma interface focada no usuário sem ferir interesses internos das empresas.

Um dos meus pontos favoritos do livro é quando Agner abre os olhos para o papel da Arquitetura da informação na inclusão digital, onde mostra que assim como muitos designers de interface encaram os usuários como iguais, o governo está partindo da idéia que todos os brasileiros têm necessidades digitais comuns em programas de inclusão digital esquecendo que são sujeitos diferentes em sua origem e educação.

E outro assunto interessante é a informação nos websites do governo em um mar de burocracia que migra do mundo off-line para a web governamental e a importância do Arquiteto da Informação para dar acesso e transparência a esses dados, inclusive escrevi sobre isso no texto anterior.

Para mim Agner peca em alguns pontos não ligados ao assunto do livro e sim na linguagem abordada. Ele tenta criar um ambiente de leitura agradável e acaba se repetindo e usando vícios de linguagens que na minha opinião são desnecessários mesmo se você quer envolver o leitor num clima informal, porém pode ser falta de costume de minha parte ou não tenha entendido a linguagem do público alvo do livro com seus “tipo assim” e “ninguém merece“.

Mesmo assim, com referências aos mestres como Nielsen, Rosenfeld e Morville, o livro é uma ótima experiência para quem está começando no assunto ou mesmo para quem quer revisitar alguns pontos.

Sem dúvida indicarei a edição a todos os colegas de faculdade, fica a dica.”

Valeu, Rodrigo!
Só queria te explicar que a linguagem descontraída e humorada adotada no livro é devida ao seu público-alvo principal: os estudantes de graduação em Design. Abraço!
(Agner)

Quadrinhos na universidade

Almanaque dos Quadrinhos - Capa

A UniverCidade está promovendo um ciclo de palestras e mesas redondas sob o tema “Ilustração a traço“, durante este mês de junho. As palestras acontecem sempre às quintas-feiras, no auditório da Unidade Ipanema, às 19:30h e a entrada é livre.

Na quinta passada, o ciclo abriu com meus convidados Flávio Braga e Carlos Patati falando sobre Quadrinhos. Eles foram os autores do excelente Almanaque dos Quadrinhos, livro de referência sobre a nona arte, que saiu pela Ediouro, com projeto gráfico de Marcelo Martinez. Diga-se de passagem que o Patati arrasou, demonstrando ser realmente uma enciclopédia ambulante cobrindo a história dos comics – desde o Yellow Kid até os dias atuais. O Braga eu conheço de outros carnavais: ele lançou a revista Mega Quadrinhos, que circulou nos anos 80 (com a qual eu colaborei).

São os seguintes os temas das próximas quintas:

2. Dia 21/junho: Bico-de-pena; livros e revistas
3. Dia 28/junho: Ilustração livre, e vinhetas

Horário: 19:30 às 22h.
Local: Teatro da Unidade Ipanema da UniverCidade
Av: Epitácio Pessoa, 1664 – Lagoa – Entrada franca

Por falar nisso, a UFRJ está promovendo a sua II Semana de Quadrinhos, durante a semana de 18, 19 e 20 de junho, no campus da Praia Vermelha.