Design Pattern do Yahoo!

Em fevereiro, o Malungo, postou aqui o lançamento do Yahoo! Design Pattern. Uma espécie de guia com 9 solucoes a serem aplicadas na web. Solucoes que, já são muito utilizados e o único mérito do Yahoo! foi ter a idéia marketeira de lançar a bliblioteca sob seu nome. Como ainda não encontrei referência em português + o incentivo do Etruta, resolvi transcrever brevemente quais são eles:

Auto Complete – Essa funcionalidade, como o próprio nome diz, consiste em auto-completar um campo após incluir as primeiras letras de uma palavra, facilitando seu preenchimento. É bem comum nas ferramentas de emails. Abaixo exemplo do Gmail:

BreadCrumbs– Esta expressão, traduzida ao pé da letra significa: Migalhas de Pão. Se lembrarmos da histórinha de João e Maria, fica fácil entender o conceito. No conto, os dois irmãos jogam migalhas de pão pelo caminho para não se perderem. Aqui acontece a mesma coisa. Conforme o usuário for navegando, no header do site, aparece a hierarquia das páginas já acessadas demarcando o caminho percorrido. Isto é muito útil e bem simples. Um exemplo, com esta aplicação esta em: World66

Drag and Drop Modules – Esta deve ser a mais recente implementação na web, comparando com os demais itens da biblioteca do Yahoo. Trata de organizar módulos/promos clicando em cima deles e arrastando com o mouse, para o local em que deseja incluí-los. Um exemplo que mais gosto e uso é o netvibes.com

Module Tabs– Aqui o usuário navega entre diferentes “páginas” sem que haja o Refresh. Clicando nas categorias (tags), o conteúdo é alterado modificando o “miolo” sem ocorrer a troca inteira de uma página. Clique na imagem abaixo para visualizar animação do Yahoo!

Navigation Tabs ou Fly out-Menu – Esta solução é similar ao Module Tabs. Consite organizar o conteúdo através de tags e sub-tags, destacando a seção em que o usuário se encontra. Há tempos caiu nas graças da internet. E é muito comum encontrar exemplos como estes. Abaixo dois:

Navigation Tabs: Macromedia

Fly out menu: Sun

Object Pagination- Este é um padrão simples para paginação. Normalmente é utilizado em galerias de imagens. A disposição da informação consiste em indicar “onde” o usuário se encontra, por exemplo, 7 de 25, seguido dos links:

“primeira página | < anterior | pŕoximo > | última página” .

Search Pagination - Esta solução também é um tipo de paginação. É similar ao Object Pagination, com a diferença de que neste caso, existe um intervalo de páginas númeradas. Também possui links: “Anterior e Próximo” e é muito utilizado em buscas, daí o nome.

Rating an Object - É uma feature que permite interagir com o site apenas com um clique. Não é necessário abrir uma página, pop-up, ou qualquer coisa. Para votar, dar opinião e rankear, o usuário clica no ícone habilitado com esta funcionalidade e pronto! A interação foi registrada. Um ícone bem utilizado para este tipo de “rating” é uma estrelinha.

Um exemplo desta feature, pode ser encontrado no site da locadora FlexFilmes e é utilizada para classificar filmes.

Aproveitando o gancho, o sistema de locação deles é bem útil e confortável. Você paga uma taxa mensal e tem o direito de ter sempre um, dois, três ou + filmes em casa, dependendo do plano, e pode trocá-lo(s) quantas vezes quiser. E o melhor, eles levam e buscam o filme. E não existe multa, pois você fica com o filme quanto tempo desejar.

Writting a Review - Este último item parece que foi embutido para completar os 9 itens. Segundo o Yahoo! é um padrão utilizado quando o usuário que quer ser mais específico ao enviar um feedback. Colocaram mais alguns íconinhos representando outros “ratings” e um formulário que pode ser preenchido pelo usuário. Nada mais nada menos que uma feature de comment. (o exemplo deles, abaixo, está péssimo, cheio de campos… não encontrei “padrão” nenhum)