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.

4 comentários

  1. Moisés Ribeiro · abril 26, 2008

    Excelente post prof. Agner.
    Essa conscientização a respeito dos grids (que parece tão tardia, ‘chegando’ à web só agora) é fundamental pra garantia da escalabilidade de grandes projetos.

    Entretanto, uma avaliação negativa sobre os Grids geralmente acontece, prevendo que – com eles – os projetos ficarão mais ‘duros’ e ‘encaixotados’. Como tu mesmo levantou no post, podemos discordar dessa visão. As equipes de projeto precisam aprender a interpretar adequadamente o grid e traduzi-lo em um resultado funcional-estético de qualidade, escalonável, usável, etc.

    Grande abraço!

    Curtir

  2. Luiz Agner · abril 27, 2008

    1 Abraço, Moisés. Apareça!

    Curtir

  3. Diego Franco · abril 29, 2008

    Olá Luiz tenho acompanhado seus posts, e claro não deixei de ler este sobre GRIDS comentando suas reflexões, no qual encontrei a seguinte senteça no penúltimo parágrafo: “Você também pode utilizar tecnologias interessantes como CSS e abordagem tableless para criar um projeto monotonamente cansativo e pouco inovador.” Monotamente cansativo e pouco inovador? Venho desenvolvendo XHTML + CSS já a um bom tempo e sinceramente creio que este conceito literalmente não se aplica ao desenvolvimento em tableless, visto que em inúmeras galerias de CSS podemos vislumbrar de portfólios extremamente belos, muito bem elaborados e escritos.

    Curtir

  4. Luiz Agner · abril 29, 2008

    Oi, Diego.
    Talvez vc não tenha compreendido bem o sentido do post, ou eu tenha me expressado mal mesmo.

    Na verdade, eu quis apenas dizer que a inovação e a criatividade é uma característica que depende do profissional designer, e não de tecnologias específicas ou do método do grid. Isto dentro do contexto colocado pela matéria da revista: há designers acham que o uso de grids limita a criatividade do trabalho.

    Considere que eu estou criticando esta visão, e não o CSS/XHTML.

    Curtir

Deixe um comentário