Recomendação consolidada Archives

Wireframe de três abas relacionadas conectadas a um único painel de conteúdo

Quando usar abas

Lucas Camara 30/08/2026

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

Wireframe comparativo de uma navegação principal clara e de uma navegação congestionada

Como criar uma navegação principal clara

Lucas Camara 30/08/2026

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

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

Carrinho de compras: como alterar quantidade e remover itens

Lucas Camara 25/08/2026

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

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

Quando usar breadcrumbs

Lucas Camara 24/08/2026

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

Wireframe de uma interface com uma ação de exclusão destacada e indicação de recuperação

Como tratar ações destrutivas

Lucas Camara 13/08/2026

Combine risco, reversibilidade e alcance para decidir quando confirmar, desfazer ou executar uma ação destrutiva.

Botão em estado de processamento dentro de um formulário wireframe

Como evitar múltiplos cliques durante o carregamento

Lucas Camara 13/08/2026

Mostre que a primeira ação foi recebida, evite reenvios durante o processamento e proteja o servidor contra efeitos duplicados.

Wireframe com uma ação principal destacada e duas ações secundárias menos enfatizadas.

Onde posicionar ações primárias e secundárias?

Lucas Camara 13/08/2026

Posicione a ação principal onde ela seja mais percebida e mantenha as ações secundárias próximas, mas visualmente subordinadas e consistentes.

Área de upload com arquivo, seta de envio e indicador de conclusão

Como criar uma boa experiência de upload de arquivos

Lucas Camara 13/08/2026

Aprenda a orientar, validar e acompanhar uploads de arquivos com clareza, acessibilidade e recuperação simples de erros.

Wireframe minimalista de carregamento demorado com progresso visível e tarefa em segundo plano

Como tratar carregamentos que demoram muito

Lucas Camara 13/08/2026

Mostre que o sistema está trabalhando, represente o progresso quando possível e ofereça continuidade, cancelamento ou recuperação em esperas longas.

Ilustração wireframe de um formulário com preenchimento automático

Quando usar preenchimento automático

Lucas Camara 13/08/2026

Use preenchimento automático para reduzir digitação sem esconder campos, substituir a confirmação ou impedir a correção manual.

Wireframe minimalista comparando progresso determinado e indeterminado

Quando mostrar porcentagem de progresso

Lucas Camara 13/08/2026

Saiba quando usar porcentagem de progresso e quando preferir um indicador indeterminado, sem inventar precisão.

Wireframe minimalista de um formulário longo organizado em três etapas

Como criar etapas em formulários longos

Lucas Camara 13/08/2026

Estruture formulários longos em etapas lógicas, com progresso claro, navegação previsível, dados preservados e revisão acessível.

Wireframe mostra um cartão de conteúdo ligado a uma página de destino por um link azul.

Evite “clique aqui” em links

Lucas Camara 13/08/2026

Aprenda a escrever links claros e acessíveis: informe o destino, evite textos genéricos e preserve o contexto para todas as pessoas.

Wireframe de formulário com botão de ação destacado e fluxo concluído

Como escrever textos de botões

Lucas Camara 13/08/2026

Aprenda a escrever rótulos de botões claros: use verbos, nomeie o resultado, diferencie ações e preserve a acessibilidade.

Ilustração wireframe de uma ação de interface que pode ser desfeita

Quando oferecer a opção “Desfazer”

Lucas Camara 12/08/2026

Ofereça “Desfazer” logo após uma ação reversível, com escopo claro e restauração confiável. Não use a opção como promessa para efeitos irreversíveis.

Ilustração minimalista mostrando a decisão entre um link que leva a outro destino e um botão que executa uma ação local.

Link ou botão: qual usar?

Lucas Camara 12/08/2026

Link navega para um destino; botão executa uma ação. Veja como escolher o elemento certo, preservar acessibilidade e evitar interfaces com semântica enganosa.

Ilustração wireframe de uma falha temporária mudando para uma nova tentativa

Como permitir tentar novamente após um erro

Lucas Camara 12/08/2026

Ofereça uma nova tentativa somente quando a falha puder ser temporária, a repetição for segura e a pessoa souber o que acontecerá.

Ilustração wireframe de uma falha temporária do sistema com ação de recuperação

Como comunicar falhas temporárias do sistema

Lucas Camara 12/08/2026

Aprenda a comunicar falhas temporárias do sistema, informar o estado da operação, preservar dados e oferecer uma recuperação segura.

Interface em wireframe mostrando uma confirmação de ação concluída com sucesso

Como comunicar uma ação concluída com sucesso

Lucas Camara 11/08/2026

Aprenda a comunicar uma ação concluída com uma mensagem de sucesso clara, acessível e proporcional ao impacto da tarefa.

Modal de aviso de expiração de sessão sobre um formulário.

Como comunicar sessão expirada

Lucas Camara 11/08/2026

Saiba como avisar que uma sessão vai expirar, permitir sua extensão e recuperar o contexto com segurança, acessibilidade e sem perder dados.

Wireframe de uma tabela com uma coluna ordenada e destacada

Como ordenar dados em tabelas

Lucas Camara 11/08/2026

Ordene uma tabela apenas quando isso ajudar a comparar dados, indique claramente a coluna e a direção ativas e mantenha o controle acessível por teclado e leitor de tela.

Wireframe de uma interface de busca com consulta preservada e uma ação para recuperar resultados

Busca sem resultados: o que mostrar

Lucas Camara 09/08/2026

Uma busca sem resultados deve explicar o que aconteceu e oferecer caminhos concretos para tentar de novo, sem apagar a consulta nem transformar a tela em um beco sem saída.

Fluxo em wireframe com identificação, código temporário e criação de nova senha.

Como criar uma recuperação de senha clara

Lucas Camara 09/08/2026

Aprenda a criar um fluxo de recuperação de senha claro, seguro e acessível, sem revelar contas nem criar becos sem saída.

Wireframe de uma lista com três filtros ativos visíveis e removíveis acima dos resultados.

Como mostrar filtros ativos

Lucas Camara 09/08/2026

Filtros ativos devem permanecer visíveis depois da aplicação, com valores claros, remoção individual e uma ação para limpar tudo. Isso mantém o contexto da lista no desktop e no mobile.