Saltar para: Post [1], Comentar [2], Pesquisa e Arquivos [3]

UX sapo

Apontamentos sobre usabilidade no SAPO

UX sapo

Apontamentos sobre usabilidade no SAPO

Banco de Padrões de Design do Técnico

05.07.10, andr3

 

O Núcleo de Multimédia e E-Learning do Instituto Superior Técnico lançou há cerca de uma semana um projecto que nós, aqui no SAPO, muito apreciámos.

Trata-se do Banco de Padrões de Design do IST e no fundo é um resumo de vários padrões de interacção que encontramos hoje em dia na Internet. Mas o verdadeiro valor surge quando deixam de ser apenas uma colecção de padrões e passam a documentar aspectos importantes da implementação. É que para cada padrão mostram vários exemplos assim como uma série de dicas em forma de prosa e/ou lista para nos ajudar a cobrir todos os pontos importantes.

Exemplo

Por exemplo, todos nós já usámos e possivelmente criámos uma paginação num site. É assim que eles nos apresentam o padrão Paginação.

Quando usar
  • Quando o conteúdo for demasiadamente extenso para ser mostrado numa única página.
  • Para mostrar os resultados de uma pesquisa (normalmente agrupam-se os resultados em grupos de dez).
  • Para mostrar uma lista extensa de itens.
Como usar
  • Dividir a informação em várias páginas.
  • Fornecer um dispositivo de navegação para navegar nas páginas.
  • Mostrar os controlos de navegação como um conjunto de ligações (links).
  • Ter sempre no dispositivo de navegação a primeira e última páginas.
  • Ter sempre no dispositivo de navegação acessíveis entre cinco a dez páginas.
  • Nos casos em que existe um conjunto alargado de páginas, para além da primeira e da última páginas, e da página onde o utilizador se encontra, devem estar disponíveis no dispositivo de navegação as duas páginas anteriores e as duas páginas seguintes.
  • Nos casos em que existem mais de 20 páginas pode também existir uma caixa de inserção de texto que permita navegar até uma página através da introdução do seu número.
  • Ter uma seta nas pontas do dispositivo de navegação que permita avançar ou recuar uma página.
  • Quando não é possível avançar ou recuar,  as setas devem assumir uma cor diferente.
  • A área clicável do número das páginas deve ter um tamanho que permita ao utilizador clicar facilmente na página que pretende.

in http://bpd.ist.utl.pt/paginacao/

Com alguns dos padrões importados da biblioteca da Yahoo! (ao abrigo da licença (cc)), este é um trabalho que louvamos e faremos os possíveis para apoiar.

Um grande obrigado a toda a equipa: Gustavo Pimenta, João Alfaiate, Ricardo Baeta e Tiago Machado! E continuem! Para já, é subscrever a feed e salivar por mais!

Parece-nos uma muito boa evolução dum dos recursos com mais qualidade para identificar padrões de design e interacção disponíveis na web, ainda que pouco "oficial": Design Solutions @ Flickr, pelo Gustavo.

1 comentário

Comentar:

CorretorEmoji

Se preenchido, o e-mail é usado apenas para notificação de respostas.

Este blog tem comentários moderados.

Este blog optou por gravar os IPs de quem comenta os seus posts.