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
Submarino
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
Contos Peregrinos
Americanas
Versos de Outubro

Botões

Exemplos:

Submarino
Amazon
Globo
Amazon
Globo

Checkbox

Exemplos:

OSx
Amazon
Chrome

Dropdown

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

Exemplos:

Sublime Text
Sublime Text

Droplist

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

Exemplos:

Word
OSx

Links

Exemplos:

Mercado Livre
Amazon
Blog de AI

Radio Button

Exemplos:

Chrome
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

• The Main Tap - Pattern Tap
• Pttrns - Mobile User Interface
• Yahoo Design Pattern Library
• UI-Patterns.com
• Interaction Design Pattern Library
• Elements of Design

[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!