Tag: UX

Leis da psicologia no UX Design

Como justificar decisões de design quando não é possível coletar dados de teste? Nestes momentos, os princípios da psicologia podem ser utilizados para interpretar por que as pessoas se comportam de determinada maneira.

1. Lei de Jakob

Usuários passam boa parte do tempo navegando em outros sites e preferem que seu site funcione da mesma forma que todos os outros sites que já conhecem.

Da mesma forma, ao criar produtos ou serviços digitais, uma prática comum é espelhar-se na forma como as coisas funcionam no mundo físico.

  • Ao minimizar mudanças, minimize as possíveis incompatibilidades. O efeito cumulativo de poupar esforço mental garante menor carga cognitiva.
  • Quando é imperativo que o design seja alterado consideravelmente, pode-se introduzir gradualmente o novo design, e também dar autonomia a seus usuários para escolherem entre a versão anterior ou a versão atual, como feito no Google e no Clickup.
  • Isso significa que os padrões de interface nunca devem ser alterados? Não exatamente. O equilíbrio consiste em priorizar convenções familiares, mas com a consciência de abrir mão delas caso faça sentido. Ao trilhar caminhos não-convencionais, tome o cuidado de sempre testar com os usuários para verificar se a compreensão do funcionamento não foi prejudicada.

2. Lei de Fitts

  • Quanto maior o objeto, menor o tempo para selecioná-lo. Da mesma forma, quanto menor o objeto, maior o tempo necessário para encontrá-lo e selecioná-lo.
  • O diâmetro da ponta dos dedos de um adulto comum (nos EUA) varia entre 16 e 20 mm (DANDEKAR et al, 2003).
  • Recomenda-se que botões de envio do formulário estejam posicionados próximos ao último campo de preenchimento do formulário.
  • Permitir que se clique tanto no input quanto na label para preencher um campo podem aumentar a área útil de toque.
  • A Apple recomenda colocar os elementos interativos na mesma altura do campo de visão do usuário e arredondar os elementos interativos para aumentar a precisão, pois as áreas de seleção com bordas angulosas tendem a focar nossos olhos nas extremidades, e não no conteúdo.

Recomendações de tamanho mínimo do alvo de toque:

Empresa/OrganizaçãoTamanho
Interfaces espaciais – Apple60 x 60 pt
Interfaces de toque – Apple44 x 44 pt
Material Design – Google48 x 48 px
Diretrizes de Acessibilidade Web (WCAG)44 x 44 px
Grupo Nielsen Norman1 x 1 cm

3. Lei de Miller

Uma pessoa comum só consegue reter por volta de 7 itens na sua memória de trabalho.

  • Miller constatou que a capacidade de memória em jovens adultos era limitada a 7 itens, independentemente do estímulo. Ou seja, o nossos processamento se dá mais pelos “blocos” do que pela densidade da informação em si. É por isso que ler um número com divisões “(61) 98745 – 4512” é muito mais fácil do que ler “61987454512”.
  • Os blocos de informação podem ser aplicados em textos e interfaces para melhorar a leitura. Da mesma forma, a não-aplicação desta divisão em “pacotes” pode fazer com que a leitura fique prejudicada.
Fonte: Autoria própria.

4. Lei de Hick

Quanto maior o número e a complexidade de opções disponíveis, mais tempo demora para se tomar uma decisão.

  • Menos é mais: Divida tarefas complexas em etapas menores. Assim, o número de informações para reter e opções para decidir diminui, e o tempo de resposta é menor.
  • O muito menos, também é demais: Tome cuidado para não simplificar tanto ao ponto da abstração. Quando uma interface é “limpa demais”, a quantidade de informação foi reduzida, mas isso levou a falta de pistas visuais para encontrar a informação necessária. Assim, a carga cognitiva para tentar descobrir o próximo passo aumentou.
No exemplo acima, a neta cobriu boa parte dos botões do controle, mantendo apenas o essencial que era mais utilizado pela avó.

5. Lei de Postel (princípio da Robustez)

Seja confiável e acessível em suas ações, mas tolerante com o que aceita dos outros.

Postel foi um dos responsáveis pelo protocolo de comunicação TCP, através de uma rede. Este protocolo é usado até hoje, pois baseia-se na tolerância às falhas, um dos pilares para a comunicação confiável.

Na primeira parte, explica que o sistema deve ser confiável de usar e acessível à maior gama possível de usuários. Todo usuário deve ter um sistema que funcione, independentemente da velocidade da conexão, resolução de tela ou uso de tecnologias assistidas.

A segunda parte diz respeito à tolerância a falhas, ou seja: Os programas que recebem dados devem ser robustos o suficiente para aceitar e interpretar entradas que não atendem às especificações, desde que o significado seja claro.

Quanto mais campos são exigidos do usuário, maior a carga cognitiva exigida e maior a chance de deterioração na qualidade das respostas (fadiga de decisão).

Aprimoramento responsivo: Estratégia em que o conteúdo básico é entregue a todos os usuários. Conforme é detectado que o dispositivo do usuário possua mais recursos e features, aí vão sendo carregadas mais camadas de animação e interação.

Resiliência de design: Considere que o usuário pode querer ler o texto em uma fonte maior ou menor ao construir a página. Também considere os diferentes tamanhos de zoom, e por fim, ao trabalhar com produtos que funcionam em múltiplos países, considere a compactação do idioma.

Compactação do idioma é a extensão média que suas palavras ocupam. O inglês é um idioma compacto, com palavras mais curtas. Já a mesma palavra, em italiano, pode ser o dobro do tamanho ou mais.

Exemplo: Visualizações em inglês é “views” e em italiano é “visualizzazioni”.

6. Regra Pico-fim

As pessoas julgam uma experiência com base principalmente em como se sentiram no seu pico (momento mais intenso) e no final, em vez da soma total ou média de cada momento da experiência.


A regra pico-fim sugere que devemos prestar atenção especial aos momentos mais intensos e ao momento final de uma experiência do usuário. Um produto pode ter pequenas falhas ao longo do caminho, mas se o momento crítico e o encerramento forem positivos, a percepção geral será favorável.

  • Em processos longos, crie “picos positivos” estratégicos para manter o engajamento.
  • Evite terminar experiências com mensagens de erro ou frustrações – se algo der errado, ofereça soluções claras e um caminho positivo adiante.

Exemplo: O Duolingo celebra conquistas com animações e mensagens motivadoras. Mesmo que o usuário cometa erros durante a lição, o final sempre reforça o progresso alcançado.

7. Efeito da estética-usabilidade

Usuários frequentemente percebem designs esteticamente agradáveis como mais fáceis de usar, mesmo que não sejam tão funcionais.


Um produto visualmente atraente gera uma resposta emocional positiva, tornando os usuários mais tolerantes a pequenos problemas de usabilidade e mais propensos a explorar suas funcionalidades.

  • Lembre-se: a estética NÃO substitui a usabilidade real. Ela pode mascarar problemas temporariamente, mas não resolve falhas funcionais graves.
O contraste do texto está baixo em alguns pontos, e é difícil diferenciar o que são botões ou objetos da interface, porém ela é muito bonita, o que alivia a percepção de usabilidade. Fonte: Pinterest.

8. Efeito de von Restorff

Quando vários objetos similares estão presentes, aquele que difere dos demais tem maior probabilidade de ser lembrado.

Também conhecido como efeito do isolamento, este princípio explica que elementos que se destacam visualmente em um conjunto são mais facilmente notados e memorizados.

  • Destaque visualmente os botões de ação primária (CTAs) usando cores contrastantes em relação ao restante da interface.
  • Use o destaque com parcimônia – se tudo for destacado, nada se destaca.
  • Em listas ou menus, destaque a opção recomendada ou mais popular para guiar a decisão do usuário.

9. Lei de Tesler

Para qualquer sistema, existe uma certa quantidade de complexidade que não pode ser reduzida – ela só pode ser transferida.

Tesler, cientista da computação da Xerox PARC, propôs que toda aplicação possui uma complexidade inerente que não pode ser eliminada. A questão não é se haverá complexidade, mas quem vai lidar com ela: o usuário ou o sistema.

  • Identifique a complexidade essencial do seu produto e assuma-a no sistema, protegendo o usuário dela.
  • Automatize processos complexos sempre que possível, apresentando ao usuário apenas as decisões realmente necessárias.
  • Ofereça configurações avançadas para usuários experientes, mas mantenha-as opcionais e ocultas por padrão.
  • Não simplifique tanto a interface que force o usuário a realizar tarefas complexas manualmente para compensar.
  • Exemplo: Ao configurar um email, o sistema pode assumir automaticamente as configurações de servidor (IMAP, SMTP, portas) baseando-se no provedor de email, deixando o usuário informar apenas email e senha. A complexidade existe, mas foi transferida para o sistema.

10. Limiar de Doherty

A produtividade aumenta quando um computador e seu usuário interagem em um ritmo (<400ms) que garante que nenhum dos dois precise esperar pelo outro.

Walter J. Doherty, pesquisador da IBM, descobriu que quando o tempo de resposta de um sistema cai abaixo de 400 milissegundos, a produtividade aumenta drasticamente. Isso ocorre porque o usuário permanece focado e engajado, criando um fluxo contínuo de trabalho.

  • Otimize o desempenho para garantir que interações comuns ocorram em menos de 400ms.
  • Use feedback visual imediato (como mudanças de estado em botões) mesmo que o processo backend demore mais.
  • Implemente skeleton screens ou loading progressivo para manter o usuário informado durante carregamentos.
  • Priorize a velocidade de resposta nas interações mais frequentes do seu produto.
  • Para processos que naturalmente demoram mais, forneça indicadores de progresso claros e estimativas de tempo.

Atenção: Curiosamente, respostas instantâneas demais (abaixo de 100ms) podem parecer artificial ou fazer o usuário questionar se algo realmente aconteceu. Pequenos atrasos intencionais podem, às vezes, aumentar a percepção de que o sistema está “trabalhando”.

11: Responsabilidade no design

O primeiro passo para tomar decisões de design mais responsáveis é reconhecer como a mente humana é suscetível à tecnologia persuasiva.

B. F. Skinner demonstrou que o reforço aleatório em horários variáveis é a maneira mais eficaz de influenciar o comportamento. Essa pesquisa foi aplicada em produtos digitais através de:

  • Recompensas variáveis intermitentes: O gesto de “puxar para atualizar” funciona como uma máquina caça-níqueis. Estudos mostram que a pessoa média interage com seu smartphone mais de 2.500 vezes por dia.
  • Loops infinitos: Vídeos de reprodução automática e feeds de rolagem infinita maximizam o tempo no site, removendo a necessidade de decisão consciente do usuário.
  • Afirmação social: Cada “curtida” fornece dopamina, satisfazendo temporariamente nosso desejo de aprovação.
  • Configurações padrão: A maioria das pessoas nunca as altera. Um estudo mostrou que as configurações do Facebook correspondiam às expectativas em apenas 37% das vezes.
  • Padrões sombrios: Pesquisadores identificaram 1.818 ocorrências de técnicas enganosas em 11.000 sites analisados.
Botão curtir, do facebook.

As empresas raramente pretendem criar produtos prejudiciais. O botão “curtir” do Facebook não foi criado para viciar, mas acabou se tornando um mecanismo de feedback viciante. Pesquisas mostram que a mera presença de smartphones reduz nossa capacidade cognitiva, e há conexões entre uso de mídia social e aumento de depressão em jovens.

Para construir produtos que apoiam os objetivos das pessoas, nós devemos:

  • Pensar além do caminho feliz: Colocar casos extremos no centro do pensamento para criar produtos mais resilientes.
  • Diversificar equipes: Equipes diversificadas trazem um espectro mais amplo de experiência humana.
  • Olhar além dos dados: Usar pesquisa qualitativa para entender como o produto afeta as vidas dos usuários.

12. Aplicando princípios da psicologia ao design

A maneira mais eficaz de aproveitar a psicologia é incorporá-la à tomada de decisões cotidiana.

  • Visibilidade: Tornar os princípios visíveis no espaço de trabalho (pôsteres) cria vocabulário coletivo compartilhado.
  • Show-and-Tell: Sessões regulares de compartilhamento criam cultura de diálogo e construção de conhecimento.

Conectando princípios a leis:

Criar estrutura com: Objetivo (princípio) → Observação (lei psicológica) → Diretrizes (regras práticas)

Exemplos:

1. “Clareza em detrimento da abundância de opções” → Lei de Hick → “Limitar opções a 3 itens” / “Explicações com máximo 80 caracteres”

2. “Familiaridade em detrimento da novidade” → Lei de Jakob → “Usar padrões de design comuns” / “Evitar UI chamativa”

Repita esse processo para cada princípio, criando uma estrutura de design abrangente que conecta valores da equipe com fundamentação psicológica.

Referências:

  • YABLONSKI, J. Leis Da Psicologia Aplicadas A Ux. 2020. 2º edição.

Métricas de UX e como implementar

Como saber se o design que você está criando realmente funciona? Como justificar decisões de design para stakeholders sem depender apenas de opiniões subjetivas?

Segundo o livro “Measuring the User Experience” de Tom Tullis e Bill Albert, medir a experiência do usuário não é apenas sobre provar valor — é sobre melhorar continuamente o produto. As métricas ajudam a identificar problemas antes que se tornem críticos, validar hipóteses de design e priorizar melhorias com base em impacto real.

Tipos de métricas de UX

  • Comportamentais
  • Atitudinais
  • Relativas ao engajamento

Métricas comportamentais

Capturam o que os usuários realmente fazem ao interagir com seu produto.

Taxa de sucesso da tarefa: Percentual de usuários que completam uma tarefa com sucesso. É a métrica mais direta para avaliar usabilidade — se os usuários não conseguem completar tarefas básicas, algo está fundamentalmente errado.
Tempo na tarefa: Quanto tempo os usuários levam para completar uma tarefa. Tarefas que demoram muito podem indicar confusão, complexidade desnecessária ou falta de clareza na interface.
Taxa de erro: Frequência com que usuários cometem erros durante uma tarefa. Erros frequentes sinalizam problemas de design que precisam ser corrigidos.
Número de cliques/toques: Quantas interações são necessárias para completar uma tarefa. Menos cliques geralmente significam melhor eficiência, mas isso deve ser balanceado com clareza — reduzir cliques não deve aumentar a carga cognitiva.

Métricas atitudinais

Estas métricas capturam o que os usuários pensam e sentem sobre sua experiência.

System Usability Scale (SUS): Questionário padronizado de 10 perguntas que fornece uma pontuação de 0 a 100 sobre a usabilidade percebida. Desenvolvido por John Brooke em 1986, o SUS continua sendo uma das métricas mais utilizadas por sua simplicidade e confiabilidade.
Net Promoter Score (NPS): Mede a probabilidade de usuários recomendarem seu produto. Pergunta simples: “Em uma escala de 0 a 10, qual a probabilidade de você recomendar este produto a um amigo?”
Customer Satisfaction (CSAT): Mede satisfação imediata após uma interação específica. Útil para avaliar pontos específicos da jornada do usuário.

Métricas de engajamento

Indicam como os usuários se relacionam com seu produto ao longo do tempo.

Taxa de retenção: Percentual de usuários que retornam ao produto após a primeira visita. Alta retenção indica que o produto entrega valor sustentado.
Frequência de uso: Com que regularidade os usuários retornam. Produtos bem-sucedidos criam hábitos de uso.
Taxa de abandono (churn): Percentual de usuários que param de usar o produto. Identificar quando e por que os usuários abandonam é crucial para melhorias.

Framework HEART do Google

O Google desenvolveu o framework HEART especificamente para medir experiência do usuário em escala. Usado no Google Analytics, cada letra representa uma categoria de métricas:
H – Happiness (Felicidade): Satisfação, facilidade de uso percebida, NPS. Mede atitudes subjetivas dos usuários.
E – Engagement (Engajamento): Frequência de uso, intensidade de uso. Mede o nível de envolvimento dos usuários.
A – Adoption (Adoção): Novos usuários, cadastros, features utilizadas. Mede quantos usuários começam a usar o produto ou novas funcionalidades.
R – Retention (Retenção): Taxa de retorno, churn rate. Mede quantos usuários continuam usando ao longo do tempo.
T – Task Success (Sucesso da Tarefa): Taxa de sucesso, tempo na tarefa, taxa de erro. Mede se os usuários conseguem completar suas tarefas.
O framework HEART é particularmente útil porque conecta métricas de UX a objetivos de negócio. Em vez de medir apenas usabilidade, ele considera o ciclo completo de vida do usuário.

Como implementar métricas de UX

  1. Comece com 3-5 métricas principais que realmente importam para seu produto.
  2. Estabeleça linha de base – Antes de implementar mudanças, meça o estado atual. Esta linha de base servirá como ponto de comparação para avaliar o impacto de melhorias futuras. Sem baseline, é impossível saber se houve progresso real.
  3. Colete dados.
    Ferramentas de analytics: Google Analytics, Mixpanel, Amplitude capturam comportamento quantitativo em escala. Configure eventos customizados para rastrear ações específicas relevantes para suas métricas.
    Testes de usabilidade: Observação direta de usuários completando tarefas fornece dados qualitativos ricos. Combine com questionários pós-teste para capturar métricas atitudinais.
    Pesquisas: SUS, NPS e CSAT podem ser implementados através de ferramentas como Typeform, SurveyMonkey ou integrados diretamente no produto.
    Heatmaps e session recordings: Ferramentas como Hotjar ou FullStory mostram onde usuários clicam, rolam e travam, fornecendo contexto visual para métricas comportamentais.
  4. Compare com benchmarks da indústria;
  5. Analise tendências ao longo do tempo, não apenas snapshots;
  6. Segmente por tipo de usuário, dispositivo, fluxo;
  7. Procure por correlações entre diferentes métricas. Por exemplo, se a taxa de sucesso de tarefa é alta, mas o tempo na tarefa também é alto, isso pode indicar que usuários estão conseguindo completar tarefas, mas com dificuldade excessiva.

Armadilhas comuns

Ao implementar métricas de UX, cuidado com estas armadilhas:
Métricas de vaidade: Números que parecem impressionantes mas não indicam valor real. Pageviews sem contexto de engajamento, downloads sem taxa de ativação, ou seguidores sem conversão são exemplos clássicos.
Otimização local: Melhorar uma métrica específica sem considerar o impacto no sistema como um todo. Por exemplo, reduzir tempo na tarefa removendo passos essenciais pode aumentar taxa de erro.
Paralisia por análise: Gastar tanto tempo coletando e analisando dados que nunca se toma ação. Como diz o provérbio: “Dados perfeitos amanhã são menos valiosos que dados bons hoje.”
Ignorar qualitativo: Métricas quantitativas dizem “o quê”, mas raramente dizem “por quê”. Combine sempre com pesquisa qualitativa para contexto completo.

Como afirmam Tullis e Albert: “Você não pode gerenciar o que não pode medir.” Métricas de UX não são apenas números — são a ponte entre experiência do usuário e impacto de negócio, provando que bom design não é luxo, mas necessidade estratégica.

Referências

  • Tullis, Tom & Albert, Bill. “Measuring the User Experience: Collecting, Analyzing, and Presenting Usability Metrics” (2013)
  • Rodden, Kerry, Hutchinson, Hilary & Fu, Xin. “Measuring the User Experience on a Large Scale: User-Centered Metrics for Web Applications” (Google HEART Framework, 2010)
  • Hall, Erika. “Just Enough Research” (2013)
  • Brooke, John. “SUS: A Quick and Dirty Usability Scale” (1996)
  • Sauro, Jeff & Lewis, James. “Quantifying the User Experience: Practical Statistics for User Research” (2016).

Vieses cognitivos no design

Você já ouviu falar em vieses cognitivos?

Um viés cognitivo é um atalho de pensamento que afeta as nossas percepções, e portanto, julgamentos e decisões. Imagine só: Um ser humano toma várias microdecisões durante um dia (“Vou levantar agora ou daqui a 5 minutos? O que comer para o café da manhã? Vou sair de sapato ou tênis?“). Só que tomar decisões é cansativo!

Por isso, durante a evolução o cérebro humano criou atalhos, permitindo concentrar esforços em decisões que realmente importam (chamamos isso de diminuir a carga cognitiva). Porém, um viés cognitivo pode nos levar a percepções que não refletem toda a realidade ou contribuir para comportamentos irracionais. É isso que o Rian Dutra explica em seu livro “Enviesados”.

Abaixo, traremos os principais vieses apresentados no livro:

Viés da ancoragem

Imagine que você não tem noção de quanto custa uma bicicleta elétrica. Se alguém te falar que é 6000, você vai acreditar. Caso uma segunda pessoa te ofereça uma bicicleta elétrica de 4000, você pode achar que é um bom preço, pois é mais barato. Ou seja, o valor da primeira oferta de 6000 alterou sua percepção sobre a oferta de 4000.

A primeira oferta (de 6000) foi uma âncora. As âncoras são informações iniciais que os usuários obtêm, e que podem afetar o julgamento e interpretações posteriores. A âncora pode ser usada tanto para fazer um produto parecer mais barato ou mais caro. Também pode ser usada para diminuir a carga cognitiva (por exemplo, sugerindo um valor de contribuição, ao invés de deixar em aberto).

A primeira oferta (de 6000) foi uma âncora. As âncoras são informações iniciais que os usuários obtêm, e que podem afetar o julgamento e interpretações posteriores. A âncora pode ser usada tanto para fazer um produto parecer mais barato ou mais caro. Também pode ser usada para diminuir a carga cognitiva (por exemplo, sugerindo um valor de contribuição, ao invés de deixar em aberto).
Viés da ancoragem na prática.

Viés da perda (aversão à perda)

O ser humano tem 2 vezes mais medo de perder do que alegria de ganhar algo, afinal, “mais vale um pássaro na mão do que dois voando”. Provavelmente por questões evolutivas, as emoções negativas têm mais impacto que as emoções positivas.

Por exemplo, nas primeiras compras online, existia um receio muito grande de que a encomenda não fosse chegar. Era uma tecnologia nova, que iniciou-se na base da confiança. Para aliviar o medo de perder algo, os e-commerces começaram a dar mais informações sobre onde estava a encomenda.

A aversão à perda também pode ser usada para mostrar a um cliente o que ele perde ao não adquirir seu produto (os seguros de carro são um bom exemplo). Com isso, aumenta-se a chance de engajar mais clientes.

Efeito cashless

Quanto mais “real” for o pagamento, mais doloroso é. Por isso sentimos mais “dó” de gastar dinheiro físico do que sentimos ao fazer uma compra com o cartão de crédito. Quanto menos vemos o dinheiro sendo gasto, mais valorizamos uma aquisição. Com o cartão, porém, há a impressão de que não foi gasto tanto dinheiro assim, aumentando a propensão a comprar mais e por um valor maior.

A Disney, Amazon e tantos outros perceberam isso, e tornaram as compras online cada vez mais fáceis, até com compras de 1-clique (exemplo abaixo).

Viés do custo afundado

Imagine que você começou a aprender a tricotar. Comprou todas as agulhas, linhas, aprendeu a fazer alguns tipos de nó e até já fez as suas primeiras peças. Se alguém te falasse que é uma perda de tempo, você desistiria? Provavelmente não, porque já investiu dinheiro e tempo para aprender.

O viés do custo afundado é similar ao princípio físico da inércia, no sentido de que quando investimos muito em algo, tendemos a permanecer ali. Em aplicativos e sistemas, permitir que o usuário experimente seu produto e faça progressos, cumpra metas, favorece que ele tenha a tendência de continuar usando o seu produto.

Viés do status quo

A psicologia identificou que, se não há um grande incômodo, nosso cérebro tem uma preferência natural por deixar as coisas exatamente como elas estão. Os seres humanos iniciaram como nômades e passaram a ser sedentários, muito por conta de terem achado espaços confortáveis o suficientes para não precisar buscar outros incessantemente.

Preferimos continuar em nossa rotina, mesmo que hajam alternativas mais vantajosas. Nosso estado atual vira um ponto de referência, e qualquer mudança pode ser percebida como uma possível perda. Em aplicativos e sistemas, é possível usar o princípio do status quo para manter um usuário consumindo o produto (facilitando suas decisões, como deixar a resposta pré-preenchida), ou enfatizando os benefícios de mudar, caso seja esse o comportamento almejado.

Viés de enquadramento

Lembra daqueles anúncios famosos de pasta de dente? “9 em cada 10 dentistas recomendam”. Isso é uma forma de apresentar a informação. E se as propagandas falassem “1 em cada 10 dentistas não recomendam” ou “10% dos dentistas não recomendam”? Pareceria bem ruim.

Esse e vários outros exemplos mostram que manipular a forma como a informação é apresentada pode influenciar e alterar a tomada de decisão. O efeito de enquadramento atua utilizando a aversão à perda, de forma a maximizar algum aspecto positivo do produto, para que o consumidor preste atenção no ponto que o interessa, e não fique receoso de estar fazendo uma escolha ruim.

Fadiga da decisão

Quando sobrecarregados com muitas opções, podemos demorar muito ou até desistir de tomar uma decisão. Ao ser confrontados com muitas opções em um cardápio ou um aplicativo de compra, é bem provável que iremos na opção mais fácil. Inclusive, é possível que seja perdida uma boa oportunidade, simplesmente porque é cansativo ter que escolher tanto.

Para evitar a fadiga de decisão, devemos optar por uma boa arquitetura da informação, de forma a ser fácil discernir um tópico de outro, bem como dividir em partes os fluxos que podem ser muito grandes. O ideal é reduzir ao máximo as opções disponíveis. Quando isso não é viável, pode-se inserir ou criar algoritmos de recomendação que aprendem o gosto do usuário. Dessa forma, as recomendações irão ser cada vez mais assertivas e facilitar a sua escolha nas próximas vezes.

Heurística de afeto

Nossas decisões não são racionais, mas influenciadas por emoções. As emoções funcionam como “atalho mental”, quando temos alguma restrição. Quando pressionados, temos poucas informações ou o julgamento for muito complexo, tendemos a confiar nas nossas emoções mais do que em informações concretas (mesmo que não percebamos).

Para projetar considerando a heurística de afeto, é importante entender as emoções do usuário, considerando seus sentimentos para criar produtos que os cativem. Para isso, pesquisas com usuários e análise de dados serão seus melhores amigos.

Para você que leu até aqui, meu muito obrigado!

Esse texto é um resumo do livro “Enviesados” do Rian Dutra.

Portal Despoluir: Modernização e Redesenho da Experiência

O programa Despoluir é o maior programa ambiental da iniciativa privada do Brasil, promovendo serviços gratuitos aos transportadores como avaliações de opacidade, avaliação da qualidade do diesel e serviço de orientação ao transportador.

Desafio

O portal anterior do programa Despoluir apresentava limitações significativas que comprometiam sua eficácia. O conteúdo estava desatualizado e organizado de forma excessivamente técnica, dificultando o acesso à informação pelos usuários finais.

A identidade visual era pouco atraente e não havia responsividade adequada para dispositivos móveis. Era necessário desenvolver um novo portal mais moderno, claro e estratégico para atender adequadamente aos três públicos principais: transportadores interessados nos serviços, representantes do governo e federações de transporte rodoviário.


Metodologia e processo de desenvolvimento

O projeto foi conduzido através de reuniões mensais com stakeholders para compreender os objetivos do programa e alinhar as prioridades de negócio. Além disso, fizemos coletivamente uma etapa de desk research para entender melhor o negócio. A partir dos dados de monitoramento do Google Analytics, pudemos traçar quais eram as páginas mais acessadas, e quais os gargalos os usuários possuíam ao encontrar uma informação.

Assim, pudemos traçar personas interessadas e utilizamos a matriz CSD para mapear hipóteses e necessidades dos públicos-alvo, direcionando tanto a estratégia de conteúdo quanto a arquitetura da informação.


Foi realizada uma curadoria criteriosa do conteúdo existente, removendo publicações obsoletas e reescrevendo textos com foco na clareza e na explicação dos produtos e serviços oferecidos.

Migração e preservação de conteúdo

A migração técnica do portal envolveu múltiplas etapas para garantir a continuidade do acesso aos conteúdos existentes. Para preservar a experiência do usuário e manter a autoridade de SEO do domínio, implementei um sistema de redirecionamento das URLs antigas para as novas páginas correspondentes, assegurando que links externos e bookmarks continuassem funcionais.

Inicialmente, realizei a migração do antigo SharePoint para SharePoint Online utilizando o SharePoint Migration Tool. Posteriormente, exportei o conteúdo através de ferramentas específicas do WordPress, com apoio de planilhas Excel para o mapeamento e organização dos dados e nova importação no WordPress.

Solução implementada

Propusemos uma nova linguagem visual baseada em publicações recentes do programa, incorporando cores mais vibrantes e linguagem mais acessível, além de reduzir blocos extensos de texto para favorecer a escaneabilidade.

A arquitetura da informação foi completamente redefinida, tornando a navegação mais intuitiva e alinhada aos fluxos reais dos usuários. Durante este processo, foi feito um processo educativo com as áreas envolvidas, pois haviam algumas dúvidas sobre a disposição das informações e serviços. Os componentes foram escolhidos e documentados com foco na padronização e escalabilidade do design, priorizando a performance em dispositivos móveis, que correspondem à maior parte do acesso.

A página de contato foi redesenhada para explicar claramente quais serviços estão disponíveis em cada federação, eliminando ambiguidades que antes só eram esclarecidas após o envio de solicitações. A disponibilidade regional de cada serviços também foi incluída na página individual de cada um, evitando uma possível frustração do usuário que poderia não ser atendido na região em que se encontrava.

Resultados obtidos

Os indicadores iniciais demonstram melhorias significativas na performance do portal: aumento no tempo médio de permanência, melhoria nas taxas de conversão (solicitações de atendimento) redução na taxa de rejeição e crescimento nos acessos via dispositivos móveis.

Os stakeholders reportaram feedback positivo sobre a clareza das informações e a melhoria da experiência de navegação, validando as decisões tomadas durante o processo de redesenho.

Gostaria de agradecer a todo o time envolvido neste processo, e a parceria durante todo o processo de trabalho e entrega. Foi um período de grande crescimento para mim ter feito parte desta equipe.

ITL: Migração de site para WordPress

Com a ajuda da equipe envolvida, conduzi a migração do site institucional do ITL (Instituto de Transporte e Logística) para WordPress, focando na modernização da arquitetura, implementação de responsividade e melhorias significativas de acessibilidade. O projeto envolveu a reconstrução completa da experiência digital, mantendo a identidade visual consolidada da instituição.

Análise da Estrutura Original

O site original apresentava uma estrutura bem definida para uma instituição educacional, com foco em três pilares principais:

  • Cursos Executivos: Preparação para desafios do setor
  • Especializações e MBAs: Formação de alta performance
  • Certificações Internacionais: Qualificação com instituições globais

Estratégia de Migração

1. Arquitetura de Templates Personalizados

Desenvolvi uma estrutura de templates modulares para garantir consistência e flexibilidade:

Hierarquia de modelos de página:

  • Cabeçalho responsivo com navegação adaptativa. Foram construídos 2 cabeçalhos para melhor divisão da informação.
  • Página inicial com apresentação dos cursos e notícias mais recentes;
  • Templates específicos para páginas de cursos, especializações e MBAs.
  • Páginas individuais de cursos com estrutura padronizada.
  • Página de resultados de busca otimizada.
  • Página de erro personalizada mantendo o branding.
  • Adaptações para responsividade em dispositivos móveis.

2. Implementação de Responsividade

Mobile-First Approach:

  • Redesenho completo da experiência mobile, priorizando conteúdo e navegação;
  • Cards de cursos empilháveis em dispositivos menores;
  • Menu hambúrguer com animações suaves.

3. Melhorias de Acessibilidade (WCAG 2.1)

Navegação por Teclado:

  • Implementação de skip links para conteúdo principal;
  • Focus indicators visíveis em todos os elementos interativos;
  • Ordem lógica de tabulação.

Legibilidade e Contraste:

  • Ajuste de contrastes para atender padrão AA;
  • Hierarquia tipográfica clara com tamanhos escaláveis;

4. Otimização de Performance

  • Implementação de cache avançado;
  • Minificação de CSS/JS;
  • Redirecionamento de URLs antigas (com as quais haviam conexões de outros sites e redes sociais).

5. Navegação Intuitiva

Apesar de manter a estrutura do site original, algumas adaptações para a experiência do usuário foram implementadas, como:

  • Aumento de contraste: A leitura de botões foi facilitada pelo aumento de contraste implementado.
  • Call-to-Actions Estratégicos: Posicionamento otimizado para conversão

6. Integração com Analytics para Monitoramento

  • Google Analytics 4 com eventos personalizados;
  • Monitoramento de Core Web Vitals;
  • Heatmaps para análise de comportamento;

Resultados Alcançados

Performance

  • Melhoria de 65% no tempo de carregamento mobile;
  • Score 80+ no PageSpeed Insights;
  • Redução de 10% na taxa de rejeição;

Entrega e Capacitação da Equipe

Após a conclusão da migração e testes finais, o sistema foi oficialmente entregue ao ITL. Realizei uma oficina prática com a equipe de comunicação e marketing da instituição, capacitando os usuários internos para o uso autônomo da plataforma WordPress para publicação de notícias. A oficina incluiu a criação de um manual de uso personalizado e estabelecimento de fluxos de trabalho para manutenção contínua do site.

E-AUDSUS: Modernizando a Transparência no SUS

Participei da concepção e desenvolvimento do E-AUDSUS, uma plataforma digital que revolucionou a forma como o Departamento Nacional de Auditoria do SUS (DENASUS) gerencia solicitações de informação e demandas de auditoria. O projeto nasceu da necessidade de criar um canal de comunicação eficiente entre o público e o órgão, seguindo os padrões de transparência do governo federal.

Descoberta e Levantamento de Requisitos

O trabalho de aprimoramento da experiência do usuário começou com um mergulho profundo nas necessidades dos clientes e no estudo dos processos existentes. Durante agosto de 2022, nossa equipe conduziu um levantamento extensivo que incluiu:

  • Análise documental;
  • Reuniões semanais de validação de requisitos;
  • Mapeamento de processos.

Arquitetura da Experiência

Desenvolvemos uma página inicial acolhedora que contextualiza o visitante sobre o propósito do E-AUDSUS. O design segue rigorosamente o padrão GOV.BR, garantindo consistência com outros serviços governamentais. A interface apresenta claramente as duas principais funcionalidades:

  • Pedidos de Informação: Para solicitações baseadas na Lei de Acesso à Informação;
  • Denúncias: Para situações que requerem investigação auditorial.

Fluxo de Peticionamento Externo

1. Solicitação Inicial

Criamos um formulário intuitivo onde o cidadão pode registrar sua demanda. As telas foram cuidadosamente estruturadas em abas para organizar os dados da solicitação, do solicitante, as informações relativas ao protocolo SEI, o detalhamento e anexos, caso existam.

As abas foram pensadas tanto para o solicitante quanto para a equipe interna que fará o preenchimento das etapas seguintes.

Análise Interna

3. Análise de Admissibilidade

Projetamos um sistema robusto para análise interna das demandas, incluindo:

  • Critérios de Admissibilidade: Interface estruturada para verificar atividades realizadas e planejadas
  • Análise Multicriterial: Seções dedicadas para Competência, Materialidade e Relevância
  • Jornada Transversal: Abas que representam todo o ciclo de vida da auditoria (solicitação → demanda → planejamento → execução → monitoramento → comunicações)

4. Fluxo de Decisão

O analista competente pode tomar algumas decisões para triar as demandas que chegarem, sendo elas. O fluxo foi pensado para que não houvessem muitos cliques ao realizar as seguintes ações:

  • Justificar adequadamente decisões de não admissão da demanda;
  • Encaminhar demandas aprovadas para a esfera competente, quando não forem relativas ao órgão de auditoria;
  • Manter rastreabilidade completa do processo.

Sistema de Gestão

5. Dashboard de Auditorias

Para suportar a visão gerencial durante o processo de triagem de demandas, também foi elaborada uma interface de relatórios, contendo:

  • Métricas Visuais: Cards coloridos mostrando auditorias planejadas, não recebidas e em andamento
  • Gestão de Pessoas: Interface para acompanhar a distribuição de trabalho entre auditores
  • Histórico Completo: Sistema de busca e filtros para localizar informações específicas

Adequação Organizacional

Adaptamos toda a nomenclatura e estrutura dos protótipos para refletir a nova organização do AudSUS, demonstrando flexibilidade e atenção aos detalhes organizacionais Foram feitas entrevistas com várias das áreas envolvidas, afim de manter coesão entre as ações do sistema e evitar redundâncias.

Padrões GOV.BR

Implementamos rigorosamente os padrões visuais e de usabilidade do Design System do governo federal, garantindo familiaridade e acessibilidade para os usuários.

Referências

Design system do Governo: https://www.gov.br/ds/home

Landing page INPI: Como agregar informações densas em uma página amigável

Quantas pessoas você conhece que possuem o próprio negócio? E, dessas pessoas, quantas delas possuem sua marca ou software registrados no INPI e protegidos?

INPI

O INPI (Instituto Nacional da Propriedade Industrial) é o instituto responsável por proteger as invenções em território brasileiro, mas não é muito utilizado.

O cidadão muitas vezes não sabe da necessidade de proteger sua invenção, marca ou o software que desenvolveu por uma série de razões econômicas, culturais e históricas. Dessa forma, fica sujeito à cópia por terceiros. No Brasil, apenas 42% das startups usam os sistemas de PI.

O problema

Estudando o site do INPI, entendemos o porquê: a experiência poderia ser melhor. Havia muitas informações e pouco direcionamento prático. Assim, nosso time planejou uma landing page fácil e informativa, e segue nosso case detalhado abaixo.

Persona

Baseado em relatórios do INPI sobre startups e em pesquisa da equipe, criamos uma persona.

O Pedro Rocha tem 25 anos e é CEO de startup. Tem uma personalidade idealista, e pretende tornar sua startup em unicórnio, por meio da expansão. Também entende que a proteção das suas ideias e invenções é importante para a segurança e crescimento da empresa. Entretanto, ele é muito ocupado e não tem tempo para buscar as informações necessárias, não entende muito bem a linguagem jurídica e não consegue pagar as taxas de depósito e ainda pagar um escritório de patentes para fazer todo o acompanhamento. Como Pedro não sente clareza o suficiente nas informações dispersas pela internet, resolve deixar esse processo para outro momento.

Sendo o Pedro CEO de startup, ele possui alguns ganhos quando registra seus ativos, como diferencial competitivo, segurança jurídica, respaldo legal contra pirataria e pode usar o registro como publicidade benéfica. Pedro tem consciência de que registros de propriedade intelectual contam pontos para fontes de financiamento, crescimento a médio e longo prazo e inserção nas cadeias de valor. Porém, tem baixa familiaridade com o sistema de PI. Mas será que essas tarefas estão efetivamente claras nos meios de comunicação oficiais? Para responder a essa pergunta, fizemos a jornada do usuário.

Jornada do usuário

A Jornada do Usuário é uma representação gráfica das etapas de relacionamento do cliente com um produto ou serviço, que descreve os passos percorridos antes, durante e depois da compra e utilização. A jornada do nosso usuário foi dividida em etapas: Procura de como se faz o registro, descoberta das informações, tomada de decisão ao se inscrever e realizar pagamento, e a utilização durante o período de espera.

Entendendo a jornada, pudemos mapear com maiores detalhes a experiência que gostaríamos de oferecer ao usuário. Com isso, reunimos todas as ideias em um Canvas da proposta de valor.

Canvas da proposta de valor

O Canvas Proposta de Valor é uma ferramenta que surgiu para auxiliar na criação e posicionamento de produtos ou serviços em torno do que o cliente deseja e precisa.

A partir do canvas da proposta de valor, tínhamos clareza da sequência de tarefas que eram necessárias para que o usuário conseguisse registrar um ativo por conta própria, sendo elas:

Consultar ativos já registrados;

Pagar as taxas;

Descrever seu ativo;

Acompanhar a RPI.

Partindo do princípio de Pareto (80% do resultado com 20% do esforço), decidimos que a melhor forma de atingir nossos objetivos para um produto minimamente viável (MVP) — em apenas 3 dias, pois estávamos em um hackathon — seria uma landing page.

Por quê?

Atualmente (maio de 2021) o site do INPI se encontra como na figura acima. É possível ver que existem várias abas com informes sobre os diferentes tipos de ativos protegidos pelo INPI, bem como um menu repleto de opções. Entretanto, para um usuário que não está acostumado ao sistema e à propriedade intelectual, as inúmeras opções trazem mais confusão do que clareza.

O site também possui um chatbot que melhora a experiência e nos ajuda a caminhar pelas áreas de acordo com nossas dúvidas. Entretanto, o “Felinpi” (apelido do chatbot) apresenta alguns pontos de melhoria, por exemplo: Ao falar com ele que você quer uma registrar uma marca, ele te manda o link do guia de marcas. Só que o guia é enorme, e dificilmente uma pessoa atarefada vai ler esse material. Assim, uma landing page com resumos bem feitos da informação, botões que direcionem especificamente para uma ação e apresentação de conteúdos de forma leve poderia reverter essa desistência enfrentada pelos usuários do site.

Landing page

Como a landing page foi proposta para uma autarquia federal brasileira, o design system utilizado foi o governamental. Os textos foram escritos de forma a conterem de 7 a 10 palavras por linha, e no máximo 4 linhas por bloco, de forma a facilitar a leitura do usuário.

A arquitetura da informação foi pensada de forma a explicar sucintamente ao usuário o que é propriedade intelectual, a importância de proteger a sua ideia, o que pode ser protegido, como registrar e acompanhar o pedido, e, em caso de dúvidas, uma lista com os NITs (Núcleos de inovação tecnológica) de cada região para que o usuário possa entrar em contato.

Front-end

Nossa landing page era tecnicamente simples de ser feita, então só utilizamos linguagem front-end em sua concepção, sendo elas: HTML5, CSS e Javascript.

Mesmo assim, ela resolvia uma dor. Por isso, nossa equipe conseguiu ficar em décimo lugar (de 56 equipes) no desafio, nos garantindo uma vaga no programa de pré-aceleração do SEBRAE.

Gostaria de agradecer imensamente ao INPI pela incrível oportunidade, e ao meu grupo — Mariana e Diemerson — por não terem desistido do desafio e estarem dispostos a sair de sua zona de conforto em todas as etapas.