Biblioteca de
Padrões de UX

Mais de 59 padrões de UX documentados com nível de impacto, recomendação de uso e a evidência por trás de cada decisão. Para quem projeta interfaces e precisa justificar escolhas, não só copiar telas.

Wireframe de formulário que preserva os campos válidos e destaca apenas um erro

Encontre recomendações para decisões de interface

Cada padrão desta biblioteca responde a uma decisão específica de interface, como validar formulários, apresentar informações, confirmar ações ou orientar o usuário. Use os filtros para encontrar recomendações por componente, impacto, área ou tipo de orientação.
Componente
Componentes
Ver mais
Nível de impacto
Impacto
Área do UX
Tipo de orientação
Wireframe comparando um dropdown compacto, opções visíveis e busca para listas longas.

Quando usar dropdown e quando evitar

Dropdowns economizam espaço, mas escondem opções e acrescentam uma etapa. Use-os quando a escolha for única, fechada e contextual...

Alto impacto
Recomendado
Wireframe de um editor que compara alterações individuais salvas automaticamente com um conjunto de mudanças aguardando uma ação explícita.

Autosave ou botão Salvar: qual usar?

Autosave e botão Salvar resolvem problemas diferentes. Use o contexto, o risco e a necessidade de revisão para escolher..

Alto impacto
Usar com atenção
Wireframe de três abas relacionadas conectadas a um único painel de conteúdo

Quando usar abas

Saiba quando abas organizam conteúdos relacionados e quando preferir página aberta, acordeão, filtro ou outra navegação...

Médio impacto
Recomendado
Wireframe comparativo de uma navegação principal clara e de uma navegação congestionada

Como criar uma navegação principal clara

Aprenda a organizar o menu principal com rótulos claros, hierarquia previsível e navegação acessível em desktop e mobile...

Alto impacto
Recomendado
Wireframe de uma linha de carrinho com controle de quantidade, remoção e recuperação.

Carrinho de compras: como alterar quantidade e remover itens

Como permitir que clientes alterem quantidades e removam itens do carrinho com atualização imediata, feedback, desfazer e acessibilidade...

Alto impacto
Recomendado
Wireframe de checkout com busca por CEP, endereço sugerido, revisão e preenchimento manual

Como usar o CEP para preencher o endereço no checkout

Veja como usar o CEP para reduzir a digitação no checkout sem esconder o endereço, bloquear a edição ou..

Alto impacto
Recomendado
Wireframe de uma pagina de produto com controles separados para cor e tamanho e uma combinacao indisponivel

Como mostrar variações de produto: tamanho, cor e disponibilidade

Veja como apresentar tamanho, cor e disponibilidade no e-commerce para facilitar a escolha, evitar combinações inválidas e reduzir fricção..

Alto impacto
Recomendado
Wireframe minimalista que representa o uso de breadcrumbs por meio de uma trilha hierárquica que termina na página atual.

Quando usar breadcrumbs

Entenda quando breadcrumbs ajudam na orientação, como preservar a hierarquia e quando separar a trilha estrutural do retorno aos..

Médio impacto
Recomendado
Wireframe de uma resposta de IA com indicador de incerteza, alternativas e caminho de verificação.

Como comunicar os limites e a incerteza da IA

Comunique limites e incerteza da IA com clareza, evitando falsa precisão e ajudando pessoas a confiar na medida certa...

Alto impacto
Recomendado
Dashboard com gráfico e filtro de período por seletor e calendário

Filtros de periodo em dashboards: como estruturar

Aprenda como estruturar filtros de periodo em dashboards com escopo claro, intervalos relativos, periodo personalizado, fuso horario e atualizacao..

Alto impacto
Usar com atenção
Wireframe minimalista que representa a escolha do modo de carregamento por meio de uma lista de itens conectada a controles de continuação.

Paginação, “Carregar mais” ou scroll infinito: qual escolher?

Compare paginação, Carregar mais e scroll infinito para escolher o padrão adequado à tarefa, ao conteúdo, ao desempenho e..

Médio impacto
Atenção
Wireframe de uma interface com lista de cartões e paginação simples no rodapé

Paginação em tabelas: quando usar e como configurar

Veja quando usar paginação em tabelas, listas e buscas, como preservar filtros e quando escolher Carregar mais...

Médio impacto
Atenção
Você encontrou o que estava procurando?

Como os padrões são construídos

Os padrões desta biblioteca partem de problemas reais de interface e são construídos a partir do cruzamento entre pesquisa, referências de mercado e experiência prática em produtos digitais.

As recomendações consideram estudos de usabilidade, heurísticas, diretrizes de acessibilidade e pesquisas publicadas por referências como Nielsen Norman Group, Baymard Institute e WCAG.

Design systems como Material Design, Apple Human Interface Guidelines e outros sistemas públicos são utilizados como exemplos de aplicação. Eles ajudam a mostrar como diferentes produtos resolveram problemas semelhantes, mas não são tratados como regras universais.

A curadoria também considera aprendizados de projetos reais, restrições técnicas e diferentes contextos de uso.

O nível de impacto indica quanto uma decisão pode prejudicar a experiência quando aplicada de forma inadequada. Já o tipo de recomendação ajuda a diferenciar práticas geralmente recomendadas daquelas que precisam ser avaliadas com mais cuidado.

Nenhum padrão deve ser aplicado automaticamente. As recomendações devem ser consideradas junto ao contexto do produto, às necessidades dos usuários e às restrições do projeto.

Dúvidas sobre os padrões de UX

O que é a Biblioteca de Padrões de UX?

É uma coleção de recomendações para decisões recorrentes de interface, organizadas por impacto, área, componente e tipo de orientação. Cada padrão apresenta orientações práticas e as referências utilizadas para fundamentá-las.
As recomendações são construídas a partir de pesquisas de UX, estudos de usabilidade, heurísticas, diretrizes de acessibilidade, design systems públicos e experiência prática em produtos digitais.
Não. Eles são utilizados como referências e exemplos de aplicação. Cada produto possui usuários, objetivos e restrições diferentes.
É uma indicação da gravidade que uma decisão inadequada pode ter na experiência. Os níveis ajudam a priorizar problemas críticos, altos, médios ou baixos.
Eles devem ser usados como referência para decisões de design. Antes de aplicar uma recomendação, considere o contexto do produto, seus usuários e as restrições existentes.