Métodos práticos para melhorar o UX em startups que sobrevivem sem designer

• Usar uma biblioteca de componentes como Material UI pode ser o caminho mais fácil, mas embora ela forneça os blocos básicos, o desenho do fluxo completo do usuário ainda exige trabalho à parte
• Se você precisa investir tempo em tornar o produto único, como definir uma boa experiência do usuário o mais rápido possível?

A página em branco é uma armadilha

• Não fique olhando para uma tela vazia pensando “como deveria ser um campo de e-mail?”
• É possível aproveitar padrões já validados por grandes empresas
  • Isso economiza tempo e pode melhorar a experiência do usuário

• Abordagens a evitar

  • Sites de prêmios de design – têm originalidade, mas não garantem usabilidade
  • Dribbble – o foco é estético, sem relação direta com funcionalidade

• Abordagens que valem consultar

  • Sites de concorrentes – crie uma conta e registre com capturas de tela
  • Sites de coleções de padrões – dá para consultar rapidamente em PageFlows, Mobbin e outros

• Anote padrões de UI comuns

  • Elementos de UI recorrentes, como campos de e-mail, senha e fluxos de confirmação
  • Regras visuais e de layout:
    • Formulários centralizados
    • Design responsivo
    • Botões claros
    • Logo no topo

• Fricção intencional

  • Algumas empresas pedem informações de cartão de crédito → estratégia para atrair usuários realmente comprometidos
  • Uma experiência rápida nem sempre é a melhor

Defina o objetivo com clareza

• O objetivo não é simplesmente “criar uma página de cadastro”, mas sim → “tornar o cadastro o mais fácil possível”
• Transforme isso em pergunta:

  “Como podemos facilitar o cadastro para o usuário?”

• Exemplos de solução

  • Mostrar a força da senha no momento da digitação
  • Explicar por que o formulário de cadastro precisa ser preenchido

• Perguntas adicionais

  • Fazer login imediatamente após o cadastro vs. só depois da confirmação por e-mail
  • Mostrar uma página de confirmação após o cadastro vs. apenas uma mensagem de sucesso

Considere edge cases (situações excepcionais)

• Usuários reais não agem como o esperado → têm pressa, ignoram instruções e cometem erros
• Verifique com perguntas onde problemas podem surgir:
  • O que acontece se o usuário errar ao digitar rapidamente?
  • Os erros nos campos são comunicados com clareza ao usuário?

• Como corrigir quando surgem problemas

  • Descuido ao criar a senha → pode levar ao bloqueio da conta depois
    • → adicione um “campo de confirmação de senha” para exigir a redigitação
  • Quando houver divergência entre senhas → exiba uma mensagem de erro
    • → mostre um alerta imediatamente ao preencher a segunda senha

Use IA para encontrar problemas de UX

• É possível usar ferramentas como ChatGPT para identificar problemas de UX
• Não é perfeito, mas permite uma verificação rápida e eficaz

• Exemplos de prompts úteis

  • Red Team vs Blue Team:

    “Em que pontos deste fluxo de cadastro o usuário pode travar?”
    “Por que este design é intuitivo?”

  • Padrão do setor:

    “Como as principais empresas de SaaS projetam seus fluxos de cadastro?”

  • Edge cases:

    “O que acontece se o usuário digitar o e-mail errado e não perceber?”

Outras dicas para melhorar o UX

• Defina métricas de medição
  • Taxa de conversão, retenção de usuários, satisfação do usuário etc. → avalie os resultados com métricas objetivas
• Use cores simples
  • Cor principal, cor secundária e cor de destaque → recomendação: Coolors
• Use uma linguagem familiar
  • Em vez de “erro de banco de dados” → “não foi possível salvar suas alterações”

Conclusão

• Em startups, velocidade importa → perfeccionismo deve ser evitado
• Em UX, usabilidade vem antes da originalidade
  • Um fluxo de usuário intuitivo e claro é mais eficaz do que um design complexo e original
• Inove apenas no valor central → no restante, use padrões já validados
• Seguir padrões que os usuários já conhecem reduz a carga de aprendizado

[GN⁺]

Opinião no Hacker News

• O auge da usabilidade, 25 anos atrás, foi quando a maioria dos aplicativos tinha barras de ferramentas e menus que seguiam padrões

  • Usuários não especialistas frequentes usavam a barra de ferramentas, e usuários não especialistas ocasionais realizavam tarefas pelo menu
  • Usuários avançados memorizavam atalhos pelas letras sublinhadas nos rótulos dos menus
  • Para mudar configurações, abria-se a caixa de diálogo de configurações, com abas como "Geral" e "Fontes e cores"
  • Na época, a maioria das pessoas sabia pouco sobre computadores, mas ainda conseguia usar a maior parte dos aplicativos quase sem ajuda
  • O objetivo naquela época era minimizar o tempo que o usuário passava no aplicativo para concluir o trabalho com eficiência
  • O UX moderno busca manter o usuário o mais "engajado" possível, o que pode funcionar para apps de consumo, mas vira problema quando isso é aplicado também a aplicativos corporativos
  • Houve caso em uma empresa da Fortune 100 em que funcionários não técnicos reclamaram que uma nova SPA estava tornando o trabalho mais lento e pediram de volta o terminal antigo

• Depois de contratar um designer gráfico, a mudança mais visível é que o app/site fica mais bonito

  • UX é um campo mais amplo, que vai do fluxo de interação até widgets de funcionalidade única
  • A maioria das pessoas é ruim em prever o UX geral de um sistema
  • UX é desenvolvido copiando soluções existentes ou tentando algo novo
  • Avaliar um sistema apenas na imaginação é muito mais difícil do que implementá-lo
  • No projeto de sistemas backend, é possível prever e evitar erros por meio de princípios básicos e raciocínio
  • Designers ou engenheiros com excelente intuição para UX são extremamente valiosos, mas não dá para ficar esperando encontrar alguém assim

• A melhor ferramenta para encontrar problemas de usabilidade é compartilhar a tela com o Gemini e explicar por voz a tarefa que você quer realizar

  • O Gemini olha a UI, descobre como executar a tarefa e vai dizendo em voz alta onde clicar
  • Se o Gemini não conseguir resolver, existe um problema de usabilidade

• Segundo a "Lei de Jakob", os usuários passam a maior parte do tempo em outros sites, então preferem que as coisas funcionem do mesmo jeito que outros sites que já conhecem

  • Os usuários transferem expectativas de produtos familiares para outros produtos semelhantes
  • Aproveitar modelos mentais existentes permite criar uma experiência melhor, na qual o usuário pode focar na tarefa em vez de aprender um novo modelo
  • Ao fazer mudanças, deve-se minimizar inconsistências permitindo que o usuário continue usando a versão com a qual já está acostumado por um tempo limitado

• Existe uma razão para praticamente todos os produtos funcionarem de forma parecida, e quando algo funciona de forma diferente é preciso se perguntar se isso foi intencional ou um erro

  • É preciso equilibrar padrões familiares ao usuário com ideias novas
  • Por exemplo, ao tentar melhorar a experiência de checkout da Amazon, você pode perder os benefícios da familiaridade
  • Ao preferir checkboxes, botões de opção, menus suspensos e campos de texto, você ganha de graça formas familiares para o usuário ler e alterar estados
  • "Não intuitivo" muitas vezes pode significar apenas "não estou familiarizado com esse padrão"

• É possível usar IA para identificar problemas de UX, e ferramentas como o ChatGPT podem destacar problemas de UX que você deixaria passar

  • Não é perfeito, mas é melhor do que ficar no achismo

• A recomendação é focar em princípios gerais de design e em uma forma de pensar

  • Ler "The Design of Everyday Things", de Donald Norman, ajuda a entender a diferença entre design bom e ruim
  • "The Art of Game Design", de Jesse Schell, discute como criar experiências imersivas, e jogos são especialmente implacáveis

• Seguir o que grandes empresas fazem pode levar a uma mentalidade de culto à carga

  • É preciso saber exatamente por que cada parte do sistema está sendo construída
  • Só porque o CAPTCHA usado pelo Google é irritante não significa que você precisa copiá-lo
  • É preciso pensar com confiança no que pode ser melhorado

• Mesmo em modo bootstrap, é possível contratar um designer de UX, e isso é um investimento muito valioso

  • Não precisa ser uma contratação em tempo integral; dá para fazer um design sprint para desenhar alguns conceitos, conduzir workshops de UX e depois evoluir a opção escolhida para um protótipo clicável
  • Isso já vale a economia de US$ 5 mil no orçamento de desenvolvimento frontend e, no primeiro ano, deve trazer mais de US$ 5 mil em ganhos com o aumento da retenção de usuários

• Não me lembro da última vez que trabalhei com um designer dedicado

  • O DevOps parece estar seguindo um caminho parecido, como se esperassem que programadores dessem conta disso enquanto o código compila
  • Os próximos serão os programadores
  • Contratar especialistas é muito desconfortável