Artigos sobre Decisão dependente do contexto

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.

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 o comportamento mais claro.

Interface com cartões de conteúdo e um único botão flutuante posicionado em uma área segura

Quando usar botão flutuante

Use botão flutuante apenas para uma ação primária, frequente e claramente identificável, sem cobrir conteúdo nem competir com a navegação.

Ilustração minimalista comparando um botão com ícone e rótulo visual a um botão compacto somente com ícone

Botões devem ter ícone e texto?

Combine ícone e texto quando a ação precisar de clareza. Use apenas ícone quando o significado for reconhecível, consistente e acessível.

Três cartões de carrossel com controles anterior e próximo e indicador de posição

Quando usar carrossel

Saiba quando um carrossel ajuda a explorar conteúdo e quando uma seção estática oferece mais clareza, controle e acessibilidade.

Ilustração minimalista comparando um controle com ícone familiar e uma ação que precisa de explicação contextual.

Ícones sem texto: quando podem ser usados

Ícones sem texto podem economizar espaço, mas só funcionam quando a ação é reconhecível, nomeada para tecnologias assistivas e fácil de testar. Veja quando usar e quando manter um rótulo visível.

Wireframe 2D mostrando um link e duas possibilidades de navegação, na mesma página ou em uma nova aba.

Links devem abrir em nova aba?

Abrir um link em nova aba não deve ser o padrão. Entenda quando essa escolha faz sentido, como avisar a pessoa e como preservar acessibilidade e controle.

Wireframe minimalista de uma tabela de desktop reorganizada para uma apresentação adequada no mobile.

Como tornar tabelas responsivas no mobile

Tabelas responsivas devem preservar relações, contexto e ações no mobile. Escolha entre rolagem local, linhas empilhadas ou uma lista conforme a tarefa e a densidade dos dados.

Wireframe minimalista comparando uma tabela e três cards.

Quando usar tabela em vez de cards

Escolha tabelas para comparar dados estruturados e cards para explorar resumos independentes; a decisão depende da tarefa, do conteúdo e do dispositivo.