WebSiteC omo webdesigner, você jádeve ter se deparadoinúmeras vezes com anecessidade de fazer a

paginação para resultados de busca.Imagine quantas pessoas enfrentam omesmo problema. Pense também emquantas soluções diferentes acabamsendo utilizadas para resolver essemesmo dilema. Com o objetivo deresolver esses problemas comunsforam criados os Websites Patterns,algo que pode ser traduzido como“padrões para websites”.

Há muitas vantagens emconsiderar essas soluçõesestabelecidas ao elaborar um projetode website. O risco de perda dosusuários pelo não entendimento dainterface cai muito e os custos comtráfego de páginas de ajuda tambémacabam sendo poupados. Se você temum call-center, provavelmente verá queas chamadas com dúvidas vão cair.Nesta reportagem, você descobrirácomo beber dessa fonte.

Como os padrões são criadosComo problemas comuns são

notados e resolvidos por comunidadesdistintas, soluções acabam emergindoespontaneamente. Quer dizer, asmelhores soluções adotadas pararesolução de problemas comuns, quesão sentidos por diversos profissionaisem ocasiões diversas, que se repetemem diversos locais, acabamascendendo em meio às demais.

Isso é algo que ocorrenaturalmente. Se tomarmos ageometria fractal, por exemplo,veremos que há objetos geométricos

Como o uso depadrões pode serutilizado pararesolver problemasde criação deinterface de sites

44 Revista W

Por: Ricardo Nogueira Maekawa

prog

ram

ação

design

Patte rque podem ser divididos em partes,cada uma das quais semelhante aoobjeto original. Diz-se que os fractaistêm infinitos detalhes, são geralmenteauto-similares e independem de escala.Em muitos casos, um fractal pode sergerado por um padrão repetido,tipicamente um processo recorrente ouinterativo. Esses padrões podem serencontrados nas conchas de algunsanimais e em plantas como asamambaia, para citar dois exemplos.

Mas quando esses padrões sãocriados por pessoas e vãonaturalmente passando por umprocesso de refinamento, em áreascomo arquitetura, design e informática,atingem o status de Design Pattern.Esse status é mantido enquanto atecnologia permite e enquanto outro

padrão melhor não aparece na praça.Antes do advento do Ajax, por

exemplo, padrões para componentesde interface capazes de fazerdrag-and-drop simplesmente nãoexistiam. Com o tempo, pode ser que odrag-and-drop faça outros padrõescairem em desuso. Portanto, éimportante ter em mente que asbibliotecas de design pattern nunca sãoestáticas, muito pelo contrário: aqualquer momento um pattern podecair. Ao mesmo tempo, uma outrasolução pode ser reconhecida.

A necessidade de conceituar ofenômeno dos design patterns foinotada pela primeira vez porChristopher Alexander(math.utsa.edu/~salingar/Chris.text.html#BIOGRAPHY), um

foto: sxc.hu

patternsfinal.qxp 14/6/2006 21:29 Page 66

renomado arquiteto austríaco radicadona universidade norte-americana deBerkeley. Alexander usou o termo paradescrever uma metodologia paraquantificação de soluções paraproblemas encontrados em todo tipo deespaço urbano, como salas,construções e até mesmo cidades. Ospadrões de Alexander são muitodinâmicos e flexíveis. Eles podem seragrupados para formar padrões maiscomplexos. Um padrão de cadeira, porexemplo, pode se aninhar em umpadrão de sala de jantar, que é capazde se aninhar com um padrão de casa,que por sua vez se aninha com umpadrão de cidade. Christopher defendia

também a necessidade de uma "LínguaFranca" para identificação e resoluçãode diversos problemas "técnicos"existentes na arquitetura. Segundo ele,a primeira coisa a ser feita quando setem um problema em comum é dar umnome a ele e trabalhar em sua soluçãoa partir de denominações comumenteacordadas. Essa abordagem pode serfacilmente estendida e adaptada aoamplo universo da internet.

Como usarO que diferencia um pattern de um

simples e imperativo manual deutilização e aplicação de determinadasfuncionalidades é que ele nunca perdeo senso em seu contexto. Elesdescrevem idéias que trabalham juntase as diretrizes que norteiam aconfecção de coleções.

Os Software Patterns, porexemplo, têm causado granderessonância na indústria de software,particularmente entre os adeptos dasmetodologias ágeis(www.agile2006.org). Aliás, sempre quehouver referência a design patternsrelacionados ao desenvolvimento detelas para terminais de computador éimportante ficar atento com relação aqual design pattern está no centro daquestão discutida. Programadores queatuam no back-end também utilizam otermo, que é similar, mas não é amesma coisa. "Design patterns deinterface dão prioridade para interface.Design patterns no desenvolvimento deback-end dão prioridade a como issovai funcionar por trás", afirma Eduardo"Teta" Silva, consultor de tecnologia eprogramador do Laboratório.us. "MVC,por exemplo, o Model-View-Controller,é um padrão utilizado nos principaisframeworks ágeis de desenvolvimentode software como o TurboGears,CakePHP, Rails, Struts e outros",completa Eduardo. Apesar dadiferença, os dois padrões se inspiramnas leis da teoria criada porChristopher Alexander.

À luz desses modelos de pattern,algumas pessoas tem se inspirado adocumentar os chamados WebsitePatterns (www.iawiki.net/

Alexandre Limaalexandre@yegustrepo.com, 26,Diretor de Arte da Wunderman

A utilização de design patterns nodesenvolvimento de projetos web podeser bem útil para projetos cujasatisfação do usuário dependaexclusivamente de navegação einteração eficientes, como em bancosonline, portais e intranets. Nesses casosa adequação ao comum é importante.

Já alguns projetos exigem ocontrário. Precisam de navegação maiscriativa e interações mais ousadas.Nesses casos, é possível que ospatterns limitem o potencial criativo,pois, em projetos assim, o importante éjustamente sair do comum.

Claro que uma navegação eficientetambém merece todo cuidado criativo.Assim como é preciso se preocuparcom a usabilidade em projetos cominterações mais ousadas. A idéia é usaro bom senso e lembrar que cada projetotem uma história única (pra não dizer ovelho clichê: cada caso é um caso).

45Revista W

OOppiinniiããoo

OOss ffrraaccttaaiiss mmoossttrraamm ccoommoo éé nnaattuurraalloo aappaarreecciimmeennttoo ddee ppaaddrrõõeess ccoommuunnss

WebsitePatterns). Há também o ladodiametralmente oposto da força: osWebsite AntiPatterns (www.iawiki.net/WebsiteAntiPatterns), quedocumentam e relacionam máspráticas em termos de solução de itensde interação funcional em sites dainternet. Os AntiPatterns trazemrespostas para questionadoresinsensatos, como aqueles quedefendem a utilização de frames para anavegação dos websites e de outrosrecursos de navegação de sites que jáse mostraram claramente ineficientesem diversas situações.

e rn

patternsfinal.qxp 14/6/2006 21:29 Page 67

46 Revista W

Cada pattern possui quatrocomponentes primários:

11.. uumm ttííttuulloo22.. uumm pprroobblleemmaa33.. uumm ccoonntteexxttoo44.. uummaa ssoolluuççããoo

Há uma série de repositórios depatterns, grande parte deles voltadospara o desenvolvimento de softwaresbaseados em desktop. Mas o queimporta aqui são os voltados para web.

Para você entender o que são osDesign Patterns e nunca mais projetarum site sem tê-los em mente, o melhoré vasculhar algumas bibliotecas depadrões para web e dissecar aestrutura de sua documentação.Conheça agora algumas delas:

Yahoo! Design PatternPraticidade, clareza, organização e

redução de custos.

entanto, seguindo a linha dasbibliotecas de programação deinterface, a biblioteca de designpatterns do Yahoo! é aberta e aceitacontribuições. É claro que, com isso, oscustos com de mão-de-obra daempresa vão cair e, quem sabe,soluções patrocinadas por outrasinstituições acabem sendo usadas.

Os patterns da biblioteca do Yahoo!se aninham em dois grandes grupos,que se diferenciam entre si segundo asnecessidades dos usuários (user needsto) e aplicações (application needs to).

Em user needs to, as soluções seacomodam pelas categorias Navigate(navegação); Explore data (exploraçãode dados); Organize data (organizaçãode dados); Give feedback (feedback);Perform Action (execução de ação) eCustomize (customização). Emapplication needs, as categorias sãoCall attention (chamar atenção);Improve Readability (melhorar leitura);Group related items (agrupamento deitens relacionados); Organizescreen/page (organização de tela /página); Give feedback (fornecimentode 'feedback'); Perform action(execução de ação) e Customize (Customização).

Entre os patterns estãojustificativas para itens consagradoscomo os BBrreeaaddccrruummbbss, a navegaçãopor abas, a divisão de páginas emcolunas e a paginação de listas deresultados de buscas.

ddeevveellooppeerr..yyaahhoooo..ccoomm//yyppaatttteerrnnss//iinnddeexx..pphhpp

Padrões de Mark L. IronsPatterns para websites pessoais e

para páginas com fluxo de navegaçãoentre páginas abertas e restritas.

wwwwww..rrddrroopp..ccoomm//~~hhaallff//CCrreeaattiioonnss//WWrriittiinnggss//WWeebb..ppaatttteerrnnss//iinnddeexx..hhttmmll

Mark Irons mantém uma bibliotecade patterns para websites muito bemfundamentada, que sabe o que quer,aonde quer chegar, a quem se destinae a quem não se destina. Seurepositório não possui elementosvisuais para exemplificar asdemonstrações, no entanto, cobrealguns aspectos que a maior parte dasoutras bibliotecas deixa passar embranco, como os padrões temporais eestruturais, por exemplo. Essabiblioteca provavelmente é uma dasúnicas que apresenta solução parafluxos de navegação entre páginasprivadas e restritas.

Os padrões da biblioteca de Ironsse agrupam globalmente em cincocategorias: Padrões de Conteúdo(Content Patterns) – focados no que ossites oferecem; Padrões de estrutura(Structutural Patterns) – descrevemtrês níveis de organização: o site, aspáginas individuais e os links; PadrõesTemporais (Temporal Patterns) –exercem influência no tempo de

prog

ram

ação

Pode ter sido uma jogada demarketing. Se foi, funcionou muitobem. A verdade é que atualmente éimpossível falar em Design Patternpara web sem citar a recém-lançadabiblioteca de Design Pattern do Yahoo!(developer.yahoo.com/ypatterns/index.php). Ela é provavelmente oexemplo mais concreto da aplicaçãoprática e sistemática dos designpatterns na web. Além de já contarcom um número considerável desoluções, a biblioteca do Yahoo! estáem total sintonia com as demandas daWeb 2.0. É claro que todos os padrõessão baseados em experiências internasda grande comunidade dedesenvolvedores do Yahoo!. No

Técnica de navegação que mostra todas aspáginas visitadas, desde a home page até aatual. Todos os links são mostrados,geralmente no topo da página, para facilitar anavegação. Exemplo: Home > Serviços >Reparos > Caminhões > Motores.

BBrreeaaddccrruummbbss

patternsfinal.qxp 14/6/2006 21:29 Page 68

47Revista W

mudança de um site; Padrões deNavegação (Navigation patterns) –buscam simplificar a navegação; e, porfim, os Padrões de Tecnologia(Technology patterns).

Irons teve o cuidado inclusive dedocumentar como esses padrõestrabalham juntos e quais são suasinterações e dependências. Essedocumento, chamado por ele dePattern Map, é acessível porwww.rdrop.com/~half/Creations/Writings/Web.patterns/map.html.

Hypermedia Design PatternsTime carioca de desenvolvedores

entra na rota dos Design Patterns.

Essa biblioteca chama atenção porduas características. A primeira delas éa idade. A maior parte dos padrõesaqui descritos datam do ano de 1997.Outra característica é que, apesar deser fruto da Acm SigWeb(www.sigweb.org) em cooperação coma Universidade Ítalo-Suíça, a bibliotecaconta com intensiva representaçãobrasileira. Vários patterns foramescritos por membros de uma equipedo departamento de informática daPUC do Rio de Janeiro.

A idade avançada é, na verdade,mais um motivo que faz valer a penaler as 27 soluções presentes nesserepositório. É possível notar quemuitas delas já estão sedimentadas naprodução de interfaces, como aintitulada “I' m here” (estou aqui), quefala sobre a necessidade de se manterindicados links ativos e páginasselecionadas. Os patterns dessabiblioteca se agrupam em três

categorias: 1) Interface / Layout ; 2)Estrutura / Navegação e 3 )Orientação a conteúdo.

Padrões de Jenifer Tiedel Biblioteca acadêmica que deu

origem ao livro Designing Interfaces.

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çãodo tipo de projeto, do cliente, do tempodisponível e do dinheiro. A combinaçãodestes fatores é o guia que indica até onde

OOppiinniiããoo

é mais vantajoso criar e propor novassoluções e quando é mais interessante eproveitoso utilizar os design patterns.Nem sempre os padrões adotados pela websão as melhores soluções, mas certamentejá criaram uma lógica de funcionamento coma qual o usuário já se familiarizou. Por isso,é sempre mais fácil, rápido e seguro utilizarestes padrões.Para projetar sites estáticos simples, onde épossível ousar mais, os design patternspodem acabar impondo alguns limitesindesejáveis. O interesse em usar os designpatterns fica mais forte em casos ondeperder usuários significa perda de dinheiro.Por exemplo: deixar de fazer a venda dealgum produto porque a navegação estavamuito complexa ou não conquistar novoscadastrados porque o produto ou anavegação não eram intuitivos.Ainda assim acho que a abordagem criativae espontânea não deve ser rejeitada, afinal édesta forma que novas idéias surgem e quenovos caminhos e padrões serão formados eassimilados pelos usuários.

wwwwww..ddeessiiggnnppaatttteerrnn..lluu..uunniissii..cchh//iinnddeexx..hhttmm

wwwwww..mmiitt..eedduu//~~jjttiiddwweellll//iinntteerraaccttiioonn__ppaatttteerrnnss..hhttmmll

A biblioteca de Jenifer resultou emum livro: Designing Interfaces -

Patterns for Effective Design. Suabiblioteca acadêmica ganhou umaroupagem nova e está disponível nowebsite do livro(designinginterfaces.com). Jenifer nãofaz padrões exclusivos para websites.

Seu foco está em softwares que rodamem desktop. No entanto, em temposde Ajax, é bem possível que seuspadrões acabem sendo incorporadosno mundo dos softwares web-based.

Padrões de WellieBiblioteca atualizada, ampla, e

muito rica. Ótima referência.

wwwwww..wweelliiee..ccoomm//ppaatttteerrnnss

Essa biblioteca, apesar de nãocontar com os apelos visuais dabiblioteca do Yahoo!, é talvez uma dasúnicas capazes de serem utilizadas empé de igualdade com relação àbiblioteca da gigante de buscas.Martijn Van Welie é realmente um caramuito caprichoso e inteligente. Sua

patternsfinal.qxp 14/6/2006 21:29 Page 69

48 Revista W

abordagem dos design patterns éoriginal, útil, decidida e muito clara, eisso tudo se traduz em facilidade deuso. Welie possui padrões organizadosem categorias bastante originaistambém. São ao todo dez. Confira.

11)) TTiippoo ddee ssiittee22)) EExxppeerriiêênncciiaa ddoo uussuuáárriioo33)) EE--ccoommmmeerrccee44)) NNaavveeggaaççããoo55)) BBuussccaass66)) TTiippooss bbáássiiccooss ddee ppáággiinnaass77)) GGeerreenncciiaammeennttoo ddee ccoolleettoorreess88)) EElleemmeennttooss ddee ppáággiinnaa99)) IInntteerraaççõõeess bbáássiiccaass1100)) DDeessiiggnn vviissuuaall

Todos os patterns dessa bibliotecasão destinados a atender necessidadesdos usuários. No entanto, isso éapenas uma questão de ponto de vista.A questão é que essa biblioteca podeser mais feia que a do Yahoo!, mas émais rica.

ConclusãoFica claro, após colocar lado a lado

as bibliotecas atuais, o abismo visualentre o repositório do Yahoo! e osdemais. Nesse ponto, a biblioteca dedesign pattern do Yahoo! é, semdúvida, um marco para a área dedocumentação técnica e arquitetura dainformação. É a prova cabal de quefinalmente os estudos, antes restritos arecintos acadêmicos, agora atingiramum nível de maturidade que ospermitem serem utilizados prontamente

no mercado de internet.As bibliotecas antigasmostram o caminho poronde os design patternspassaram até culminarcom a refinada emuitíssimo funcionalbiblioteca do Yahoo! Nadamais natural. A dinâmicade formação de patternssempre envolve um tempode "destilação". Por isso, ademora em surgir umainiciativa do porte da quefoi tomada pelo Yahoo!.

Mas é preciso não seiludir cegamente pelo show de efeitosvisuais dessa biblioteca. As bibliotecasde Wellie e de Irons possuem muitostópicos que não são cobertos pelabiblioteca do Yahoo! Aliás, essasbibliotecas são bem mais ricas emtermos de informação e conceito. Porisso, leia! Não se apegue apenas aefeitos visuais, vale a pena gastar unsminutos lendo os conceitos dassoluções. Nem sempre o que vocêprocura estará em formatação gráfica.

A verdade é que os design patternse os métodos relacionados àarquitetura da informação funcionam erepresentam economia de tempo paraprogramadores e usuários. Essa árearepresenta também segurança na horade investir em um projeto.

Esses padrões podem ser usadospara criar estruturas mais inteligentese melhorar a organização dasinformações em suas páginas,

Eduardo "Teta" Silvalaboratorio.us, 24, Consultor deTecnologia e Programador

Acho bom utilizar os design patternsporque agilizam o desenvolvimento,mas é importante não encará-los comoregra e sim como uma possibilidade.

OOppiinniiããoo

priorizando o que é mais importante.Design patterns como os

especificados pelo Yahoo! melhoram amaneira com que você trabalhaaspectos de suas páginas, comopaginação, navegação em abas e atéanimações mais complexas.

De qualquer forma, é importantelembrar que esses sistemas devemservir como guias, não como amarras.O objetivo é ajudar o webmaster aencontrar soluções eficientes eintuitivas, mas sem nunca perder devista a criatividade e a originalidade.

prog

ram

ação

O website do livro Designing Interface aborda ospadrões acadêmicos criados por Jenifer Tiedel

patternsfinal.qxp 14/6/2006 21:29 Page 70