patternsfinal.qxp
14/6/2006
21:29
Page 66
programação
design Por: Ricardo Nogueira Maekawa
Como o uso de padrões pode ser utilizado para resolver problemas de criação de interface de sites
C
omo webdesigner, você já deve ter se deparado inúmeras vezes com a necessidade de fazer a paginação para resultados de busca. Imagine quantas pessoas enfrentam o mesmo problema. Pense também em quantas soluções diferentes acabam sendo utilizadas para resolver esse mesmo dilema. Com o objetivo de resolver esses problemas comuns foram criados os Websites Patterns, algo que pode ser traduzido como “padrões para websites”. Há muitas vantagens em considerar essas soluções estabelecidas ao elaborar um projeto de website. O risco de perda dos usuários pelo não entendimento da interface cai muito e os custos com tráfego de páginas de ajuda também acabam sendo poupados. Se você tem um call-center, provavelmente verá que as chamadas com dúvidas vão cair. Nesta reportagem, você descobrirá como beber dessa fonte.
Como os padrões são criados Como problemas comuns são notados e resolvidos por comunidades distintas, soluções acabam emergindo espontaneamente. Quer dizer, as melhores soluções adotadas para resolução de problemas comuns, que são sentidos por diversos profissionais em ocasiões diversas, que se repetem em diversos locais, acabam ascendendo em meio às demais. Isso é algo que ocorre naturalmente. Se tomarmos a geometria fractal, por exemplo, veremos que há objetos geométricos 44 Revista W
WebSite
Patte r foto: sxc.hu
que podem ser divididos em partes, cada uma das quais semelhante ao objeto original. Diz-se que os fractais têm infinitos detalhes, são geralmente auto-similares e independem de escala. Em muitos casos, um fractal pode ser gerado por um padrão repetido, tipicamente um processo recorrente ou interativo. Esses padrões podem ser encontrados nas conchas de alguns animais e em plantas como a samambaia, para citar dois exemplos. Mas quando esses padrões são criados por pessoas e vão naturalmente passando por um processo de refinamento, em áreas como arquitetura, design e informática, atingem o status de Design Pattern. Esse status é mantido enquanto a tecnologia permite e enquanto outro
padrão melhor não aparece na praça. Antes do advento do Ajax, por exemplo, padrões para componentes de interface capazes de fazer drag-and-drop simplesmente não existiam. Com o tempo, pode ser que o drag-and-drop faça outros padrões cairem em desuso. Portanto, é importante ter em mente que as bibliotecas de design pattern nunca são estáticas, muito pelo contrário: a qualquer momento um pattern pode cair. Ao mesmo tempo, uma outra solução pode ser reconhecida. A necessidade de conceituar o fenômeno dos design patterns foi notada pela primeira vez por Christopher Alexander (math.utsa.edu/~salingar/ Chris.text.html#BIOGRAPHY), um
patternsfinal.qxp
14/6/2006
21:29
Page 67
também a necessidade de uma "Língua Franca" para identificação e resolução de diversos problemas "técnicos" existentes na arquitetura. Segundo ele, a primeira coisa a ser feita quando se tem um problema em comum é dar um nome a ele e trabalhar em sua solução a partir de denominações comumente acordadas. Essa abordagem pode ser facilmente estendida e adaptada ao amplo universo da internet.
Como usar
e rn Os fractais mostram como é natural o aparecimento de padrões comuns
renomado arquiteto austríaco radicado na universidade norte-americana de Berkeley. Alexander usou o termo para descrever uma metodologia para quantificação de soluções para problemas encontrados em todo tipo de espaço urbano, como salas, construções e até mesmo cidades. Os padrões de Alexander são muito dinâmicos e flexíveis. Eles podem ser agrupados para formar padrões mais complexos. Um padrão de cadeira, por exemplo, pode se aninhar em um padrão de sala de jantar, que é capaz de se aninhar com um padrão de casa, que por sua vez se aninha com um padrão de cidade. Christopher defendia
O que diferencia um pattern de um simples e imperativo manual de utilização e aplicação de determinadas funcionalidades é que ele nunca perde o senso em seu contexto. Eles descrevem idéias que trabalham juntas e as diretrizes que norteiam a confecção de coleções. Os Software Patterns, por exemplo, têm causado grande ressonância na indústria de software, particularmente entre os adeptos das metodologias ágeis (www.agile2006.org). Aliás, sempre que houver referência a design patterns relacionados ao desenvolvimento de telas para terminais de computador é importante ficar atento com relação a qual design pattern está no centro da questão discutida. Programadores que atuam no back-end também utilizam o termo, que é similar, mas não é a mesma coisa. "Design patterns de interface dão prioridade para interface. Design patterns no desenvolvimento de back-end dão prioridade a como isso vai funcionar por trás", afirma Eduardo "Teta" Silva, consultor de tecnologia e programador do Laboratório.us. "MVC, por exemplo, o Model-View-Controller, é um padrão utilizado nos principais frameworks ágeis de desenvolvimento de software como o TurboGears, CakePHP, Rails, Struts e outros", completa Eduardo. Apesar da diferença, os dois padrões se inspiram nas leis da teoria criada por Christopher Alexander. À luz desses modelos de pattern, algumas pessoas tem se inspirado a documentar os chamados Website Patterns (www.iawiki.net/
WebsitePatterns). Há também o lado diametralmente oposto da força: os Website AntiPatterns (www.iawiki.net/ WebsiteAntiPatterns), que documentam e relacionam más práticas em termos de solução de itens de interação funcional em sites da internet. Os AntiPatterns trazem respostas para questionadores insensatos, como aqueles que defendem a utilização de frames para a navegação dos websites e de outros recursos de navegação de sites que já se mostraram claramente ineficientes em diversas situações.
Opinião
Alexandre Lima alexandre@yegustrepo.com, 26, Diretor de Arte da Wunderman
A utilização de design patterns no desenvolvimento de projetos web pode ser bem útil para projetos cuja satisfação do usuário dependa exclusivamente de navegação e interação eficientes, como em bancos online, portais e intranets. Nesses casos a adequação ao comum é importante. Já alguns projetos exigem o contrário. Precisam de navegação mais criativa e interações mais ousadas. Nesses casos, é possível que os patterns limitem o potencial criativo, pois, em projetos assim, o importante é justamente sair do comum. Claro que uma navegação eficiente também merece todo cuidado criativo. Assim como é preciso se preocupar com a usabilidade em projetos com interações mais ousadas. A idéia é usar o bom senso e lembrar que cada projeto tem uma história única (pra não dizer o velho clichê: cada caso é um caso).
Revista W 45
programação
patternsfinal.qxp
14/6/2006
21:29
Page 68
Cada pattern possui quatro componentes primários: 1. um título 2. um problema 3. um contexto 4. uma solução Há uma série de repositórios de patterns, grande parte deles voltados para o desenvolvimento de softwares baseados em desktop. Mas o que importa aqui são os voltados para web. Para você entender o que são os Design Patterns e nunca mais projetar um site sem tê-los em mente, o melhor é vasculhar algumas bibliotecas de padrões para web e dissecar a estrutura de sua documentação. Conheça agora algumas delas:
Yahoo! Design Pattern Praticidade, clareza, organização e redução de custos.
developer.yahoo.com/ypatterns/index.php
Pode ter sido uma jogada de marketing. Se foi, funcionou muito bem. A verdade é que atualmente é impossível falar em Design Pattern para web sem citar a recém-lançada biblioteca de Design Pattern do Yahoo! (developer.yahoo.com/ypatterns/ index.php). Ela é provavelmente o exemplo mais concreto da aplicação prática e sistemática dos design patterns na web. Além de já contar com um número considerável de soluções, a biblioteca do Yahoo! está em total sintonia com as demandas da Web 2.0. É claro que todos os padrões são baseados em experiências internas da grande comunidade de desenvolvedores do Yahoo!. No 46 Revista W
entanto, seguindo a linha das bibliotecas de programação de interface, a biblioteca de design patterns do Yahoo! é aberta e aceita contribuições. É claro que, com isso, os custos com de mão-de-obra da empresa vão cair e, quem sabe, soluções patrocinadas por outras instituições acabem sendo usadas. Os patterns da biblioteca do Yahoo! se aninham em dois grandes grupos, que se diferenciam entre si segundo as necessidades dos usuários (user needs to) e aplicações (application needs to). Em user needs to, as soluções se acomodam pelas categorias Navigate (navegação); Explore data (exploração de dados); Organize data (organização de dados); Give feedback (feedback); Perform Action (execução de ação) e Customize (customização). Em application needs, as categorias são Call attention (chamar atenção); Improve Readability (melhorar leitura); Group related items (agrupamento de itens relacionados); Organize screen/page (organização de tela / página); Give feedback (fornecimento de 'feedback'); Perform action (execução de ação) e Customize (Customização). Entre os patterns estão justificativas para itens consagrados como os Breadcrumbs, a navegação por abas, a divisão de páginas em colunas e a paginação de listas de resultados de buscas.
Breadcrumbs Técnica de navegação que mostra todas as páginas visitadas, desde a home page até a atual. Todos os links são mostrados, geralmente no topo da página, para facilitar a navegação. Exemplo: Home > Serviços > Reparos > Caminhões > Motores.
Padrões de Mark L. Irons Patterns para websites pessoais e para páginas com fluxo de navegação entre páginas abertas e restritas.
www.rdrop.com/~half/Creations/ Writings/Web.patterns/index.html
Mark Irons mantém uma biblioteca de patterns para websites muito bem fundamentada, que sabe o que quer, aonde quer chegar, a quem se destina e a quem não se destina. Seu repositório não possui elementos visuais para exemplificar as demonstrações, no entanto, cobre alguns aspectos que a maior parte das outras bibliotecas deixa passar em branco, como os padrões temporais e estruturais, por exemplo. Essa biblioteca provavelmente é uma das únicas que apresenta solução para fluxos de navegação entre páginas privadas e restritas. Os padrões da biblioteca de Irons se agrupam globalmente em cinco categorias: Padrões de Conteúdo (Content Patterns) – focados no que os sites oferecem; Padrões de estrutura (Structutural Patterns) – descrevem três níveis de organização: o site, as páginas individuais e os links; Padrões Temporais (Temporal Patterns) – exercem influência no tempo de
patternsfinal.qxp
14/6/2006
21:29
Page 69
mudança de um site; Padrões de Navegação (Navigation patterns) – buscam simplificar a navegação; e, por fim, os Padrões de Tecnologia (Technology patterns). Irons teve o cuidado inclusive de documentar como esses padrões trabalham juntos e quais são suas interações e dependências. Esse documento, chamado por ele de Pattern Map, é acessível por www.rdrop.com/~half/Creations/ Writings/Web.patterns/map.html.
Hypermedia Design Patterns Time carioca de desenvolvedores entra na rota dos Design Patterns.
Opinião Fábia Escobar fabia.escobar@gmail.com, 33, Diretora de Arte da Orolix
O importante no uso dos Design Patterns é saber encontrar o ponto certo para aplicá-los. Isso tem a ver com a avaliação do tipo de projeto, do cliente, do tempo disponível e do dinheiro. A combinação destes fatores é o guia que indica até onde
categorias: 1) Interface / Layout ; 2) Estrutura / Navegação e 3 ) Orientação a conteúdo. www.designpattern.lu.unisi.ch/index.htm
Essa biblioteca chama atenção por duas características. A primeira delas é a idade. A maior parte dos padrões aqui descritos datam do ano de 1997. Outra característica é que, apesar de ser fruto da Acm SigWeb (www.sigweb.org) em cooperação com a Universidade Ítalo-Suíça, a biblioteca conta com intensiva representação brasileira. Vários patterns foram escritos por membros de uma equipe do departamento de informática da PUC do Rio de Janeiro. A idade avançada é, na verdade, mais um motivo que faz valer a pena ler as 27 soluções presentes nesse repositório. É possível notar que muitas delas já estão sedimentadas na produção de interfaces, como a intitulada “I' m here” (estou aqui), que fala sobre a necessidade de se manter indicados links ativos e páginas selecionadas. Os patterns dessa biblioteca se agrupam em três
Padrões de Jenifer Tiedel Biblioteca acadêmica que deu origem ao livro Designing Interfaces.
é mais vantajoso criar e propor novas soluções e quando é mais interessante e proveitoso utilizar os design patterns. Nem sempre os padrões adotados pela web são as melhores soluções, mas certamente já criaram uma lógica de funcionamento com a qual o usuário já se familiarizou. Por isso, é sempre mais fácil, rápido e seguro utilizar estes padrões. Para projetar sites estáticos simples, onde é possível ousar mais, os design patterns podem acabar impondo alguns limites indesejáveis. O interesse em usar os design patterns fica mais forte em casos onde perder usuários significa perda de dinheiro. Por exemplo: deixar de fazer a venda de algum produto porque a navegação estava muito complexa ou não conquistar novos cadastrados porque o produto ou a navegação não eram intuitivos. Ainda assim acho que a abordagem criativa e espontânea não deve ser rejeitada, afinal é desta forma que novas idéias surgem e que novos caminhos e padrões serão formados e assimilados pelos usuários.
Seu foco está em softwares que rodam em desktop. No entanto, em tempos de Ajax, é bem possível que seus padrões acabem sendo incorporados no mundo dos softwares web-based.
Padrões de Wellie Biblioteca atualizada, ampla, e muito rica. Ótima referência.
www.mit.edu/~jtidwell/ interaction_patterns.html
www.welie.com/patterns
A biblioteca de Jenifer resultou em um livro: Designing Interfaces Patterns for Effective Design. Sua biblioteca acadêmica ganhou uma roupagem nova e está disponível no website do livro (designinginterfaces.com). Jenifer não faz padrões exclusivos para websites.
Essa biblioteca, apesar de não contar com os apelos visuais da biblioteca do Yahoo!, é talvez uma das únicas capazes de serem utilizadas em pé de igualdade com relação à biblioteca da gigante de buscas. Martijn Van Welie é realmente um cara muito caprichoso e inteligente. Sua Revista W 47
programação
patternsfinal.qxp
14/6/2006
21:29
Page 70
no mercado de internet. As bibliotecas antigas mostram o caminho por onde os design patterns passaram até culminar com a refinada e muitíssimo funcional biblioteca do Yahoo! Nada mais natural. A dinâmica de formação de patterns sempre envolve um tempo de "destilação". Por isso, a demora em surgir uma iniciativa do porte da que O website do livro Designing Interface aborda os foi tomada pelo Yahoo!. padrões acadêmicos criados por Jenifer Tiedel Mas é preciso não se abordagem dos design patterns é iludir cegamente pelo show de efeitos original, útil, decidida e muito clara, e visuais dessa biblioteca. As bibliotecas isso tudo se traduz em facilidade de de Wellie e de Irons possuem muitos uso. Welie possui padrões organizados tópicos que não são cobertos pela em categorias bastante originais biblioteca do Yahoo! Aliás, essas também. São ao todo dez. Confira. bibliotecas são bem mais ricas em termos de informação e conceito. Por 1) Tipo de site isso, leia! Não se apegue apenas a 2) Experiência do usuário efeitos visuais, vale a pena gastar uns 3) E-commerce minutos lendo os conceitos das 4) Navegação soluções. Nem sempre o que você 5) Buscas procura estará em formatação gráfica. 6) Tipos básicos de páginas A verdade é que os design patterns 7) Gerenciamento de coletores e os métodos relacionados à 8) Elementos de página arquitetura da informação funcionam e 9) Interações básicas representam economia de tempo para 10) Design visual programadores e usuários. Essa área representa também segurança na hora Todos os patterns dessa biblioteca de investir em um projeto. são destinados a atender necessidades Esses padrões podem ser usados dos usuários. No entanto, isso é para criar estruturas mais inteligentes apenas uma questão de ponto de vista. e melhorar a organização das A questão é que essa biblioteca pode informações em suas páginas, ser mais feia que a do Yahoo!, mas é mais rica.
Conclusão Fica claro, após colocar lado a lado as bibliotecas atuais, o abismo visual entre o repositório do Yahoo! e os demais. Nesse ponto, a biblioteca de design pattern do Yahoo! é, sem dúvida, um marco para a área de documentação técnica e arquitetura da informação. É a prova cabal de que finalmente os estudos, antes restritos a recintos acadêmicos, agora atingiram um nível de maturidade que os permitem serem utilizados prontamente 48 Revista W
Opinião
Eduardo "Teta" Silva laboratorio.us, 24, Consultor de Tecnologia e Programador
Acho bom utilizar os design patterns porque agilizam o desenvolvimento, mas é importante não encará-los como regra e sim como uma possibilidade.
priorizando o que é mais importante. Design patterns como os especificados pelo Yahoo! melhoram a maneira com que você trabalha aspectos de suas páginas, como paginação, navegação em abas e até animações mais complexas. De qualquer forma, é importante lembrar que esses sistemas devem servir como guias, não como amarras. O objetivo é ajudar o webmaster a encontrar soluções eficientes e intuitivas, mas sem nunca perder de vista a criatividade e a originalidade.