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.

Post momesco


Uma pausa para os festejos momescos registrados na minha Cybershot. Acima, ao som do famoso hino da União da Ilha, no sábado. Neste desfile, a agremiação resolveu reeditar o clássico “É Hoje”, de 1982.

Aqui, a empolgante bateria da Caprichosos.

Ziriguidum! Ziriguidum! 🙂

Arquitetura de informação e usabilidade no Palácio do Planalto

Palestra de Luiz Agner no Palácio do Planalto, Brasília.

Ontem, dia 21, ocorreu no auditório do Anexo I do Palácio do Planalto, em Brasília, mais um evento do Programa de Integração e Aperfeiçoamento em Comunicação Pública, promovido pela Secretaria de Comunicação da Presidência da República, focalizando especificamente o tema Internet.

Aberto por Ottoni Fernandes Jr., o fórum contou com a palestra de Pedro Cabral, o fundador da Agência Click, que traçou um panorama geral do uso da Web, focalizando a convergência das mídias e as perspectivas futuras da Internet no Brasil. Em seguida, teve início um amplo painel que abordou o tema “Arquitetura, Design e Usabilidade – Eficácia, eficiência e satisfação”, com a participação de Mercedes Sanchez, consultora especialista em usabilidade e webwriting, e de Sérgio Carvalho, coordenador de usabilidade da agência Sirius Interativa. À tarde, Marión Streker, diretora de conteúdo do portal UOL, falou sobre o desafio de prospectar, conceber e manter conteúdos na Web.

Ao final, teve lugar o painel intitulado “Desafios da Prestação de Serviços Públicos na Internet”, com Rogério Santanna, Secretário de Logística e Tecnologia de Informação do Ministério do Planejamento, Orçamento e Gestão e responsável pelo Governo Eletrônico; Gene Alarcon e Márcio Cruvinel, ambos do site da Receita Federal; e o humilde blogueiro que vos escreve. Luli Radfahrer, professor da ECA-USP, chegou atrasado devido ao caos aéreo e acabou participando deste painel (sua fala estava prevista para a parte da manhã).

Para nós, militantes e evangelizadores da usabilidade e da arquitetura de informação, é um alento perceber que o governo federal está começando a acordar para a questão. A ficha está caindo. No link do SlideShare (acima), vocês podem acompanhar como foi a apresentação no painel.

Como podem ver, fui embecado, de terno e gravata (trajes que não estou acostumado a usar), o que causou um enorme susto no Luli, que pensou tratar-se de um funcionário da Receita querendo levar o seu IBook. 😉

Na foto, pela ordem: Mercedes Sanchez, Silvia Sardinha, Luiz Agner e Sérgio Carvalho.
Nesta outra, painelistas e público assistem a crítica e divertida participação de Luli Radfahrer.

O programa do evento.

Ficha catalográfica

A biblioteca da PUC já me mandou a ficha catalográfica da tese, de uma forma que eu achei adequada, pois utiliza um link remissivo para o meu nome completo. Após a revisão, colocarei aqui os pdfs para download. É a seguinte a ficha:

Agner, Luiz, 1959-

Arquitetura de informação e governo eletrônico: diálogo cidadãos-Estado na World Wide Web, estudo de caso e avaliação ergonômica de usabilidade de interfaces humano-computador / Luiz Carlos Agner Caldas ; orientador: Anamaria de Moraes. – 2007
351 f. : il. ; 30 cm

Tese (Doutorado em Design)–Pontifícia Universidade Católica do Rio de Janeiro, Rio de Janeiro, 2007.
Inclui bibliografia

1. Artes – Teses. 2. Design. 3. Ergonomia. 4. Interação humano-computador. 5. Usabilidade. 6. Governo eletrônico. 7. Arquitetura de informação. 8. Interface. 9. World Wide Web. I. Moraes, Anamaria. II. Pontifícia Universidade Católica do Rio de Janeiro. Departamento de Artes. III. Título.

Meu baú de ossos (1)

Praça Paris, centro do Rio

Ontem, um dos três leitores do blog perguntou que imagem era aquela, decorando a apresentação da tese (ver posts anteriores). Bem, ocorre que o meu pai era arquiteto (ele morreu quando eu tinha sete anos) e, remexendo em coisas antigas, encontrei um projeto dele que tinha indiretamente a ver com o tema da tese.

Projeto Senado Federal - Praça Paris, centro do Rio

Em 1955, quando ainda nem se pensava em construir Brasília, foi realizado um concurso público no Rio de Janeiro, para o projeto da nova sede do Senado Federal. Este seria construído na área da Praça Paris, centro do Rio (foto). Período confuso, o Presidente da República ainda era Café Filho, que sucedeu Getúlio Vargas e precedeu Carlos Luz. Meu pai participou deste concurso junto com outros 16 escritórios de arquitetura.

Nas imagens, detalhes do seu projeto utilizado como inspiração para o visual da minha apresentação. Curioso o detalhe do plenário do Congresso, circular e em forma de prato. Seria uma manifestação do inconsciente coletivo?

Planta Baixa Senado Federal - Rio