Introdução
O cabeçalho é a porta de entrada para a experiência digital, formando a primeira impressão em apenas 50 ms. Este artigo documenta a anatomia dos cabeçalhos criados para Havan, combinando fundamentos teóricos com evidências visuais dos processos de design e wireframing aplicados.
Abaixo, exploraremos soluções aplicadas a três produtos com cabeçalhos distintos que ajudei a conceber:
1. Comércio eletrônico
2. Registro de presentes
3. Cabeçalho design-system para sistemas internos
1. Cabeçalho E-commerce
Enfrentamos o desafio de criar designs que se adaptassem a Web (Desktop e Mobile) e App (mobile nativo apenas), contabilizando dispositivos com ou sem o app instalado, preservando a consistência visual.
O objetivo era adicionar mais recursos e informações sem violar a Lei de Hick — onde o tempo de decisão aumenta logaritmicamente com o número de opções apresentadas. Como designers de UX/UI, precisávamos pensar visualmente e alavancar padrões de mercado para não sobrecarregar o usuário.
1.1 Versão Web – Configuração Estratégica
Wireframe, fidelidade média do cabeçalho web
Botão Hamburger: Implementado para abrir itens de arquitetura da informação, como navegação por categoria e navegação por área doméstica (inspirado no site da IKEA, mas não implementado inicialmente). De acordo com o Grupo Nielsen Norman, o menu de hambúrgueres deve ser usado somente quando necessário — a navegação oculta reduz a capacidade de descoberta em 50% e aumenta o tempo da tarefa em 25%. Não tínhamos alternativa viável aqui, e como esse ícone é amplamente reconhecido, optamos por mantê-lo.
Logotipo da Empresa: Serve como âncora de navegação (ao contrário do app, onde a aba home torna desnecessário). Colocado no canto superior esquerdo, seguindo as pesquisas de leitura F-Pattern e Z-Pattern. O Grupo Nielsen Norman confirma que 92% dos usuários esperam encontrar o logotipo nesta posição, estabelecendo-o como uma âncora de navegação e ponto de retorno seguro.
Botão de pesquisa recolhida: Implementado para otimizar o espaço para outros elementos de cabeçalho.
Minha conta: Para ações de inscrição/login.
Carrinho de compras: Exibe o número de itens adicionados. O posicionamento do carrinho segue as convenções estabelecidas — 96% dos usuários esperam encontrá-lo no canto superior direito, de acordo com a pesquisa do Baymard Institute.
CEP: Mostra o CEP que o usuário selecionou para estimativas de envio e ofertas personalizadas.
Navegação por Categoria Fixo: Após a rolagem, as principais categorias aparecem em uma barra fixa (presente apenas na página inicial do site). Esta solução foi inicialmente implementada no Registro de Presentes da Havan como uma inovação de equipe de UX. Inicialmente não foi aplicado ao site de e-commerce, mas em abril de 2025, o Mercado Livre adotou um padrão semelhante, e concorrentes como a Shein também utilizam esse tipo de navegação, demonstrando sua relevância e eficácia. O Nielsen Norman Group mostra que os cabeçalhos fixos aumentam a capacidade de descoberta da navegação em 85%.
Mercado Livre: usando a navegação de categoria fixa quando o usuário passa pela seção de categoria em sua página inicial.
1.2 Versão do aplicativo – Otimização para dispositivos móveis
No aplicativo - onde temos a maior parte de nosso acesso - fizemos os seguintes ajustes em comparação com a proposta da Web:
Botão Hambúrguer: Retido, mas itens removidos já presentes na barra de navegação nativa do aplicativo, especialmente recursos relacionados ao cartão da empresa e às funções nativas do aplicativo.
Logotipo Substituído por Pesquisa: O logotipo foi removido e substituído pelo campo de pesquisa, uma vez que o ícone do aplicativo e a guia inicial já indicam a loja e servem como âncora. Essa alteração liberou espaço para pesquisa. De acordo com os dados do Clarity, a pesquisa é um dos elementos mais clicados e, como a maioria dos usuários acessa pelo aplicativo, priorizamos sua visibilidade. O Baymard Institute confirma que os usuários que usam a pesquisa convertem 6,4 vezes mais do que aqueles que navegam apenas por categorias.
Remoção do ícone "Minha conta": Removido porque essa função já está presente na barra de navegação do aplicativo, liberando mais espaço para pesquisa.
2. Cabeçalho do Registro de Presentes: Navegação Contextual
Outro produto para clientes externos, o Registro de Presentes da Havan tem uma característica especial: temos uma arquitetura de informações diferente para dois tipos de usuário distintos:Anfitriões e Convidados. Nosso maior desafio foi criar uma navegação coesa quando ambos os usuários iniciam sua jornada a partir do mesmo ponto.
Aplicamos Divulgação Contextual, revelando apenas informações relevantes para o momento específico da jornada. De acordo com a Interaction Design Foundation, a divulgação contextual "envolve revelar informações apenas quando e onde for relevante para a tarefa ou contexto do usuário", levando em consideração a localização da interface, interações anteriores ou escolhas para determinar quais informações revelar e quando. Essa abordagem garante que os usuários recebam informações relevantes no momento certo, reduzindo a sobrecarga cognitiva e melhorando a usabilidade.
Mantivemos funções básicas de recuperação de erros durante a navegação, como um botão voltar e outros elementos, como um ícone de pesquisa, para que os usuários possam reconhecer e realizar pesquisas em determinados pontos da jornada em que essa função está disponível.
Problemas Identificados no Cabeçalho Anterior:
No celular, não foi possível saber se o usuário estava logado ou não.
O menu de hambúrguer não destacou as três principais ações: Entrar / Criar Novo Registro de Presentes/ Encontrar um Registro de Presentes.
Fotos de croquis e desenhos da nova arquitetura de cabeçalho do Registro de Presentes.
Modelos de alta fidelidade do cabeçalho do Registro de Presentes e suas variações
3. Cabeçalho dos Sistemas Internos
Meses depois de desenvolver ambas as soluções externas - para Havan.com e o site Gift Registry - fui encarregado de propor um novo cabeçalho para sistemas internos. Esse cabeçalho seria integrado ao novo sistema de design interno da empresa. O desafio era ainda maior porque tinha que atender a todos os sistemas existentes e futuros.
Problemas com o cabeçalho antigo:
Faltou acesso rápido a outros sistemas.
Ele não forneceu feedback claro sobre qual sistema estava ativo, deixando para o designer de cada novo sistema inserir breadcrumbs e o nome do sistema abaixo do cabeçalho.
Foto da visualização do cabeçalho antigo, com algumas informações ocultas para fins de confidencialidade
Nova Proposta de Cabeçalho
Cabeçalho Simplificado: para sistemas de página única, ideal para ferramentas de visualização de dados sem arquitetura de informação complexa. Removemos breadcrumbs e o nome do sistema, pois o título da página é o nome do sistema. Essa simplificação otimiza o uso do 1366×768 px tamanho da tela comum entre os laptops corporativos.
Cabeçalho Completo: para sistemas de várias páginas, incluindo breadcrumbs e nome do sistema, com botões voltar. O Nielsen Norman Group recomenda migalhas de pão como forma de encontrar elementos desde 1995: elas devem mostrar hierarquia, não histórico de navegação, com um máximo de três níveis visíveis para evitar sobrecarga cognitiva.
Elementos comuns: ambas as versões incluem um menu de pesquisa do sistema e widgets contextuais para acesso global de todos os funcionários (chat, suporte, avisos internos, notificações). A implementação de widgets contextuais segue a pesquisa sobre navegação baseada em fluxo de trabalho, onde atalhos para tarefas frequentes reduzem o tempo de execução em 50%. Também incluímos o logotipo da empresa com link para a página inicial interna e as opções de ícone de perfil para edição e logout.
Novos modelos de cabeçalho: versões simplificadas e completas
A torção inteligente deste cabeçalho é a capacidade de anexar opções de filtro adicionais sem peso visual, como mostrado no exemplo de inserção de uma barra de filtro abaixo. Ao contrário do cabeçalho, esse elemento não é pegajoso, mas usa princípios de Gestalt para transmitir a ideia de um bloco unificado. A organização visual segue os princípios de Gestalt validados pela pesquisa:
Proximidade: Elementos relacionados agrupados
Semelhança: Elementos semelhantes compartilham aparência consistente
Continuidade: Fluxo visual lógico e previsível
Fechamento: Estruturas se completam visualmente
Cabeçalho com um filtro de período de tempo adicionado e feedback indicando a última atualização
O princípio principal era otimizar o fluxo de trabalho do usuário sem comprometer o espaço limitado da tela ou sobrecarregar a interface. Pesquisa mostra que usuários corporativos realizam 80% de suas tarefas usando apenas 3–4 características principais. A aplicação do Princípio de Pareto (80/20) na produtividade corporativa confirma que uma pequena fração dos esforços contribui significativamente para a maioria dos resultados.
Conclusão
Os três cabeçalhos que desenvolvemos compartilham a mesma filosofia de otimização baseada no Princípio de Pareto (80/20), onde cada elemento foi projetado para maximizar o impacto com o mínimo de esforço cognitivo do usuário. Todos foram construídos em torno do 20% das ações que geram 80% dos resultados, priorizando as tarefas principais que um usuário pode realizar a qualquer momento - seja pesquisando produtos no site de comércio eletrônico, gerenciando registros de presentes ou acessando sistemas internos.
O maior desafio foi identificar e priorizar com precisão as ações contextuais para cada tipo de persona. No comércio eletrônico, as interações de busca e carrinho representam 80% do engajamento; no registro de presentes, o fluxo de compras dos hóspedes e a criação e adição de itens do registro dos anfitriões dominam; para sistemas internos, a navegação perfeita entre páginas e entre sistemas - com fácil adaptabilidade a diferentes contextos do sistema - foi fundamental.
Todas as soluções foram testadas e validadas com usuários reais,atingindo taxas de sucesso acima de 87%, confirmando que as decisões de design baseadas em evidências e os princípios de usabilidade resultaram em experiências funcionais e eficazes em todos os casos de uso.