É dessa leva de dicas que destaco a tese de mestrado de Christian Behrens, entitulada “The Form of Facts and Figures”. O trabalho, realizado para o programa de Design de Interfaces da Universidade de Ciências Aplicadas de Potsdam, na Alemanha, reúne uma série de 55 design patterns com indicações de uso, layout e exemplos reais de aplicação.

Behrens descreve os aspectos funcionais de componentes gráficos conhecidos - sliders, filtros e tooltips, entre outros tantos. Um ótimo material para auxiliar arquitetos de informação e designers nas escolhas do dia-a-dia.

Felizmente as desculpas para a inexistência de uma biblioteca de padrões estão se esgotando. Os novos softwares utilizados para o desenvolvimento de wireframes (Axure, iRise e Omnigraffle, entre outros) já permitem a organização de componentes em “libraries”. Eles não dão o peixe, mas são instrumento para uma boa pesca. Achei um artigo interessante da User Interface Engineering que ensina justamente como pescar. O autor Jared M. Spool listou algumas dicas para quem está começando a organizar a própria biblioteca de padrões. Destaco aqui alguns destes “padrões” propostos por Spool:

Nome da seção – apesar de óbvio e aparentemente simples, esse início é determinante para o sucesso de sua biblioteca. Evite nomes criativos. Procure utilizar os termos mais recorrentes do mercado para agrupar componentes simulares: busca, login, menus, grids, navegação, seleção, customização, auto-completar...

Descrição da seção – é muito importante dizer o que esta seção engloba. Caso o nome da seção tenha deixado alguma dúvida, a descrição vai eliminar qualquer vestígio dela

Contexto de uso – informe em que situações o componente pode ser aplicado. Um processo de check-out, por exemplo, pode atender a qualquer finalização de pedido, não sendo necessariamente uma loja virtual

Onde foi utilizado – indique que outros sistemas utilizaram a mesma solução, para que os desenvolvedores possam vê-la aplicada

Especificações – Nos casos em que os padrões pertencem a projetos específicos de uma mesma empresa, vale a pena detalhar tamanhos de fontes, dimensões e cores

Seções relacionadas – o auto-completar, por exemplo, pode ser aplicado a uma busca ou a um formulário, entre outros componentes. Faça estes relacionamentos em sua biblioteca

Histórico – quem atualizou e quando atualizou são informações preciosas em um ambiente colaborativo

Testes de usabilidade – reporte os resultados de componentes que tenham sido testados. Spool inclusive recomenda que sejam colocadas informações como: período em que o teste foi realizado, número de testadores e observações feitas por eles

Fórum de discussão – permita que os desenvolvedores façam comentários na biblioteca. Desta forma o processo do design se manterá vivo e atualizado

E para ver como tudo isso pode ser aplicado na prática, faça um tour pelas bibliotecas do Yahoo! e de Martijn van Welie, Ph.D. em Interação Homem-Computador. São ótimos exemplos de como organizar seus componentes e soluções.

A biblioteca de padrões não deve ser um projeto pessoal, mas sim um trabalho em constante progresso de toda a empresa. Arquitetos, designers, analistas, engenheiros de programação e desenvolvedores em geral devem colaborar na geração do conhecimento. A biblioteca não reflete necessariamente tendências de mercado, mas sim a cultura da organização.

BIBLIOTECAS DE PADRÕES NA WEB

• Yahoo! Design Patterns
• Welie
• Web Design Practices
• User Interface Design Patterns
• Sari A. Laakso
• The Diemens Pattern Repository
• Peter Morville Search Patterns
• Factory Joe

LEITURA RECOMENDADA

• The Elements of a Design Pattern (Jared M. Spool)
• The Need For Web Design Standards (Jakob Nielsen)
• Organizando processos de requisitos

LITERATURA SOBRE O TEMA

• Software Patterns
• Notes on the Synthesis of Form
• The Timeless Way of Building
• Design Patterns: Elements of Reusable Object-Oriented Design