Uma experiência de usuário ruim não só perde usuários. Ele perde a confiança. Aqui estão 3 exemplos de como abordamos o design de UX na Topsort.
Introdução
Cada interface de usuário é uma conversa. Quando um botão está desativado, quando uma seleção desaparece, quando uma ação não tem feedback, a interface está falando. A pergunta é: o que está dizendo?
Na Topsort, projetamos com princípios artísticos e científicos em mente, porque entender como as pessoas processam informações, formam modelos mentais e criam confiança nos torna melhores em nosso trabalho. Essas não são teorias abstratas, são ferramentas práticas para criar interfaces e experiências que pareçam intuitivas. Não porque sejam simples, mas porque se alinham com a forma como humanos tendem a pensar.
Aqui estão três exemplos de como aplicar os fundamentos da experiência do usuário aos desafios reais do produto. Cada um deles se baseia em princípios estabelecidos pela interação humano-computador: visibilidade do estado do sistema, reconhecimento sobre recordação e feedback por meio da comunicação visual.
Os exemplos
Exemplo 1: Estados da linha de produtos que realmente se comunicam
A oportunidade
Uma versão anterior do seletor de produtos tinha um problema comum: as linhas desativadas ficavam acinzentadas sem nenhuma explicação. Se um produto não estivesse disponível ou você atingisse o limite da campanha, teria que adivinhar por que não conseguiu selecioná-lo.
Por que isso importa
Isso viola uma das heurísticas fundamentais da usabilidade: visibilidade do status do sistema. Quando o sistema não comunica seu estado, formamos modelos mentais incorretos. Nós nos perguntamos: “Isso está quebrado? Eu fiz algo errado? Isso é um bug?” A ambigüidade cria carga cognitiva e corrói a confiança.
A abordagem
Mapeamos todos os estados de linha possíveis — padrão, desativado, selecionado, indisponível, nomes longos — e criamos tratamentos explícitos para cada um. As linhas desativadas agora mostram dicas de ferramentas explicando por que elas estão desativadas. Os produtos indisponíveis são visualmente distintos com mensagens claras ao passar o mouse. A interface agora responde à pergunta antes mesmo de você precisar perguntar.
Exemplo 2: Transformando a vida em licitações
A oportunidade
O seletor de estratégia de licitação funcionou. Você selecionaria uma opção—Conservador, Moderado, Agressivo—e o cartão seria destacado para confirmar sua escolha. Limpo, claro e funcional. Foi bom, mas ótimo é onde aterrissamos.
Por que multa não é boa o suficiente
A psicologia cognitiva nos diz que as pessoas processam informações visuais mais rapidamente do que texto, e a metáfora nos ajuda a entender conceitos abstratos. A estratégia de lances é inerentemente abstrata. O que realmente significa “agressivo” no contexto dos leilões de anúncios?
Há também a questão da confirmação. Objetos físicos nos dão um feedback tátil: você sente a alça de uma chaleira em suas mãos, o clique satisfatório de um botão. Um objeto bem projetado ensina como usá-lo apenas por meio de sua forma — um bico mostra onde o líquido será derramado, uma alça convida você a agarrá-lo. As interfaces digitais não têm essa fisicalidade, então nos apoiamos em dicas visuais: botões que parecem pressionáveis, cartões que respondem quando você passa o mouse e animações que dizem “sim, entendemos”.
O destaque ao clicar confirmou, mas queríamos algo mais: algo que fizesse com que a escolha parecesse significativa e ajudasse a manter os conceitos.
A abordagem
Adicionamos ilustrações animadas com nosso mascote, Toppie, em modos diferentes para cada estratégia. Agressivo pega chamas, Conservador recebe uma bebida quente e Moderado obtém um equilíbrio. Os cartões são animados na seleção, adicionando personalidade e criando um momento de prazer. A metáfora visual torna o abstrato concreto, o design memorável do personagem faz com que ele permaneça, e a animação reforça a sensação tátil de “entendi” que o destaque original da carta almeja: acabou de aparecer.
Exemplo 3: Mostrar o que você selecionou
A oportunidade
Quando você selecionou as opções de segmentação (Localizações, Palavras-chave, Categorias, ou Públicos), suas seleções desapareceram em um menu suspenso. Você teve que reabri-lo para lembrar o que escolheu. Para segmentação por localização com regiões aninhadas, como São Paulo (SP), onde várias sub-regiões são selecionadas, não havia como ver suas opções em um piscar de olhos.
A questão mais profunda
Isso se resume a reconhecimento versus recordação. Tente se lembrar do que você comeu no almoço há três dias. Difícil, certo? Agora imagine alguém lhe mostrando uma foto — instantânea. Essa é a diferença. Ver é mais fácil do que lembrar. Forçar você a lembrar o que eles selecionaram cria uma carga cognitiva desnecessária. Reconhecer (ver suas seleções) é sempre mais fácil do que lembrar (lembrar o que você escolheu). O estado oculto também viola o princípio de visibilidade—se você não consegue ver suas seleções, eles não podem verificá-las, causando ansiedade e verificações repetidas.
A abordagem
Transformamos os menus suspensos em exibições de tags de seleção múltipla. Agora, as seleções estão sempre visíveis como chips removíveis. Para locais, mostramos a abreviatura e a contagem do estado: São Paulo (SP) 2 informa exatamente o que está selecionado. Mesmo padrão para palavras-chave, categorias e segmentos de público. Tudo é digitalizável, editável e claro. Agora você pode reconhecer suas seleções em um piscar de olhos, em vez de recordar eles.
Os fundamentos importam
Essas não são apenas preferências de design — são aplicações de princípios cognitivos bem pesquisados. Quando falamos sobre “excelente UX”, ou design de produto, estamos realmente falando sobre interfaces que se alinham com a forma como a cognição humana funciona: memória de trabalho limitada, reconhecimento de padrões, necessidade de feedback e formação de modelos mentais.
Pequenas violações desses princípios se agravam. Um estado desativado confuso aqui, seleções ocultas ali — individualmente, elas são um pequeno atrito, mas juntas criam uma carga cognitiva que se acumula ao longo da jornada do usuário. Você começa a se perguntar: “Isso está funcionando? Eu fiz algo errado? Posso confiar meu orçamento publicitário nessa plataforma?”
Algumas das melhores interfaces parecem óbvias, intuitivas e, de alguma forma, naturais. Eles respondem às perguntas antes de você perguntar, confirmam as ações imediatamente e tornam o estado do sistema visível. Alguns chamam isso de “polimento” ou “artesanato”, como se fosse um luxo artesanal, algo que você adiciona quando tem tempo extra. Não é. Esse é o trabalho. Entender como as pessoas pensam e construir de acordo com isso não é polimento, é a base. Se sua interface não estiver alinhada com a cognição humana, não importa quantos recursos você forneça, ninguém confiará nela.