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
Oi, Silvia.
Criar uma biblioteca de padrões tem sido uma das grandes discussões aqui na área de internet da RBS. Quando eu estava na AG2 sempre colocávamos esta tarefa como meta e tentávamos torná-la realidade de qualquer jeito, mas sem uma boa ferramenta, método, disciplina e tempo fica bem difícil.
Agora na RBS estamos definido ferramenta e método. Quanto a ferramenta pensamos em usar a nossa Wiki ou o Flickr. O Wiki é bom pq podemos concentrar todo nossa base de conhecimento em um único lugar, mas por ser tão genérico não possui funcionalidades essenciais existentes no Flickr, como a possibilidade de criar sets facilmente e definir tags por componente.
A solução é criar uma ferramenta própria? Acho que não, porque projeto interno nunca tem prioridade…rs.
Vamos evoluir mais nesse assunto e assim que eu tiver novidades interessantes, passo adiante.
Aproveito para compartilhar mais alguns links:
http://ui-patterns.com/
http://www.visiblearea.com/cgi-bin/twiki/view/Patterns/Patterns_repository
http://www.flickr.com/photos/factoryjoe/collections/72157600001823120/
Ótimo post Silvia! Esses dias postei algumas dessas referências de padrões que você citou e algumas outras, depois de uma olhada: http://www.designdeinteracao.com.br/blog/?p=38
Tati, estou na mesma etapa que você, definindo ferramenta e método. Por hora vamos tentar organizar a biblioteca no Axure mesmo, até pela facilidade de aplicação em outros projetos. Mas conforme as coisas forem caminhando aqui dou notícias. Obrigado pelas referências Edu! Atualizei o post com algumas delas ;o)
[...] Update 2: Aprendendo a fazer sua própria biblioteca de padrões [...]
[...] 8, 2008 de Silvia Melo Não faz muito tempo que publiquei um post carregado de lamúrias sobre a organização da biblioteca de padrões aqui na Click. Depois disso comecei a receber uma série de dicas que facilitaram muito o meu [...]
[...] are some links that I found on arquiteturadainformacao.com (if you can read in Portuguese it’s a great source of information for UX [...]