Follow @silviamelo

A organização de uma biblioteca de padrões é algo que tem tirado o meu sono há algum tempo. Sempre que preciso de um determinado componente, às vezes tão simples quanto um “enviar para amigo”, saio numa verdadeira cruzada em busca dos projetos onde ele foi utilizado. Mas a jornada não pára por aí: é também preciso checar os resultados obtidos, o desempenho nos testes de usabilidade e as novas referências que irão garantir que o recurso continua novo e atualizado. Essa expedição cheia de idas e vindas acaba esgotando o prazo da grande estrela do projeto: a inovação.

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