Padrões de Interface Web

January 23, 2016

Padrões na sua definição em dicionário é, “modelo a ser seguido, exemplo a ser copiado, regras de execução de um produto”.

Adaptando esse conceito para a área de estudo de design de interfaces, podemos dizer que padrões de interfaces são práticas comuns, recorrentes em diversos meios interativos dada a sua repetição e consistência de funcionamento em diversos modos de uso.

Abrir e fechar uma torneira, plugar um pen-drive, observar as horas em um relógio analógico, ligar uma tomada na energia, são tarefas corriqueiras e simples, como tantas outras, em que não foram necessárias horas de treino e de repetição para poder realizá-las. Isso foi muito facilitado pelo uso dos padrões utilizados no processo de design desses produtos. Aprende-se a utilizar uma, aprende a se utilizar todas.

Por que aplicar padrões nas interfaces web?

Obtém-se diversos benefícios ao utilizar padrões reconhecidos de interface:

  • Diminui drasticamente a curva de aprendizado na sua interface;
  • Oferece um ambiente de uso agradável, pois os padrões já são reconhecidos pelos usuários;
  • Diminui o tempo de desenvolvimento;


Alguns padrões de interfaces web

Abaixo seguem alguns padrões de interface reconhecidos pelos usuários, e que você pode aplicar tranquilamente. Há centenas de padrões e não tem como falar de todos aqui, mas abaixo eu deixei alguns links de referência para consulta e aprofundamento.

Abas


Exemplos:

Word Exemplo de abas no Word
Submarino Exemplo de abas no site da Submarino
Chrome Exemplo de abas no navegador Chrome

Breadcrumb

Traduzido como migalhas de pão, é um elemento de design que mostra o caminho percorrido pelo usuário até a página atual.

Exemplos:

Amazon Exemplo de breadcrumb no site Amazon
Contos Peregrinos Exemplo de breadcrumb no site Contos Peregrinos
Americanas Exemplo de breadcrumb no site Americanas
Versos de Outubro Exemplo de breadcrumb no site Versos de Outubro

Botões


Exemplos:

Submarino Exemplo de botão no site da Submarino
Amazon Exemplo de botão no site da Amazon
Globo Exemplo de botão no site da Globo
Amazon Exemplo de botão no site da Amazon
Globo Exemplo de botão no site da Globo

Checkbox


Exemplos:

OSx Exemplo de checkbox no OSx
Amazon Exemplo de checkbox no site da Amazon
Chrome Exemplo de checkbox no Chrome

Dropdown

Elemento com sub-níveis, muito utilizado em menus.

Exemplos:

Sublime Text Exemplo de dropdown no Sublime Text
Sublime Text Exemplo de dropdown no Sublime Text

Droplist

Elementos agrupados em forma de lista para seleção de um único item.

Exemplos:

Word Exemplo de droplist no Word
OSx Exemplo de droplist no OSx

Links


Exemplos:

Mercado Livre Exemplo de link no site do Mercado Livre
Amazon Exemplo de link no site da Amazon
Blog de AI Exemplo de link no Blog de AI

Radio Button


Exemplos:

Chrome Exemplo de radio button no Chrome
OSx Exemplo de radio button no OSx

Ponto de partida pra inovação

Cuidado ao confundir padrões com design antigo e ultrapassado. Conhecer padrões é extremamente necessário até para que você possa quebrá-los e estabelecer novos. Padrões não são estáticos. Cuidado quando for fazer essa relação.

Referências


[Créditos]

O conteúdo desse artigo foi inspirado roubado numa aula que assisti sobre padrões de interface no sensacional curso de Ux para Webdesigner do professor Luis Felipe Fernandes. Inclusive todas as referências desse artigo vieram de lá. Isso me deu a ideia de reunir todas as outras referências expostas no decorrer do curso e criar um repositório no Github, ficou bem bacana. Deixe seu star lá no Github e seus comentários logo abaixo! Valeu!

Comments

comments powered by Disqus

Sigam-me os bons: