recentemente tenho estudado mais sobre ux porque acredito que para nós, pessoas que constroem produtos, o usuário deve ser o foco em todos os processos.
e não, isso não é só uma responsabilidade do time de design/produto. nós, principalmente desenvolvedores, devemos ser questionadores e provocadores em vez de só reproduzir uma tela ou api com funcionalidades já decididas. existem pequenos detalhes que nem sempre vão estar presentes nos requisitos/design e nós podemos adicionar para enriquecer a experiência (pop-ups, regras de negócio, textos adicionais...)
as heurísticas de Nielsen são princípios fundamentais de usabilidade que, quando aplicados ao desenvolvimento de software podem transformar melhorar experiência do usuário. estes princípios não são apenas teóricos, mas ferramentas práticas que podemos adicionar ao nosso conhecimento e dia a dia. confesso que várias coisas conhecemos inconscientemente, vou exemplificar como cada uma delas pode ser aplicada a situações reais:
1. visibilidade do status do sistema
quando um usuário interage com uma aplicação de e-commerce e adiciona um produto ao carrinho, é essencial que ele receba confirmação visual imediata. podemos adicionar uma animação no carrinho, um contador atualizado ou uma notificação de sucesso. isso não é só estético, mas funcional, pois reduz a ansiedade do usuário e evita que ele adicione o mesmo produto múltiplas vezes por incerteza.
quando eu criei meu primeiro portfólio por conta própria, criei uma seção que me enviava um e-mail mas não implementei um feedback visual de que havia sido enviado. resultado: um usuário mandou o mesmo e-mail 20 vezes. nunca mais esqueci de retornar feedbacks
2. correspondência entre o sistema e o mundo real
no desenvolvimento de um aplicativo de notas, em vez de criar uma estrutura organizacional puramente digital e abstrata, podemos implementar uma metáfora de cadernos e páginas. o Notion faz isso muito bem, permitindo que os usuários organizem seu conteúdo em páginas e subpáginas que se comportam como documentos físicos, mas com a flexibilidade adicional do meio digital.
para um aplicativo financeiro, termos como "extrato" e "saldo" são mais eficazes que "log de transações" ou "valor líquido atual".
devemos priorizar a simplicidade e familiaridade nas terminologias e fluxos, sempre focando no público-alvo.
3. controle e liberdade do usuário
em aplicações de edição colaborativa como o Figma, a implementação de histórico de ações dá aos usuários a liberdade de explorar diferentes abordagens de design sabendo que podem voltar atrás.
mais importante que só construir funcionalidades é: dar confiança para os usuários de que aquela aplicação oferece controle das próprias ações. possibilidade de reverter ações e voltar atrás. uma segurança psicológica que o controle proporciona.
4. consistência e padrões
ter padrões no produto (ou família de produtos) faz com que o usuário utilize sistemas de maneira previsível. esta consistência reduz significativamente a carga cognitiva dos usuários.
é um ótimo exemplo do quão importante é ter uma biblioteca de componentes que, além de bonito esteticamente, tem valor funcional. um botão primário deve parecer e se comportar da mesma forma em toda a aplicação, independentemente do desenvolvedor que o implementou.
5. prevenção de erros
em um sistema de reservas online, podemos evitar conflitos implementando validações em tempo real. por exemplo, ao selecionar datas para hospedagem, o sistema pode desabilitar automaticamente datas indisponíveis ou mostrar visualização de preços conforme o usuário faz sua seleção.
podemos e devemos antecipar os possíveis erros e criar sistemas que os previnam proativamente, em vez de apenas tratá-los depois que ocorrem. parece bobo, mas afeta o número de chamadas a api, performance, custos.
6. reconhecimento em vez de lembrança
esse exemplo vi num vídeo do youtube e foi sensacional. pense nessas duas frases: "Lisboa é a capital de Portugal?" e "Qual é a capital de Portugal?"
a primeira te traz um reconhecimento e você consegue validar aquele conhecimento facilmente. a segunda faz com que você precise pensar qual é a capital daquele país.
sempre devemos optar por export opções e informações contextualmente relevantes, reduzindo a carga de memória e tornando a navegação mais intuitiva.
7. flexibilidade e eficiência de uso
o VS Code oferece múltiplas formas de realizar a mesma tarefa: menus, atalhos de teclado ou comandos rápidos (Ctrl+P). isso permite que iniciantes explorem visualmente enquanto usuários experientes utilizam métodos mais eficientes, sem sacrificar funcionalidades.
ofereça opções para o usuário escolher como prefere
8. design estético e minimalista
óbvio que uma interface ser bonita importa, mas a hierarquia visual ainda precisa prevalecer. informações secundárias não devem competir com informações principais. tirando o foco do usuário do que realmente importa.
sabe aqueles sites que parece que você tá tendo uma experiência que tá numa grande feira e não sabe pra onde olhar? exatamente isso.
9. ajuda aos usuários para reconhecer, diagnosticar e recuperar-se de erros
um bom exemplo é o caso de um filtro aplicado que não tem resultados. uma tela de erro 404... as alternativas para lidar com o erro devem sempre ser pensadas.
a api respondeu 500? que tal colocar um botão de tentar de novo? não podemos previnir todos os erros, mas devemos fazer com que o usuário lide com eles da melhor maneira possível.
10. ajuda e documentação
telas de documentação, faq, chatbots, onboardings... isso tudo faz com que o usuário tenha acesso a documentação de forma mais eficaz que manuais extensos separados da interface.
o usuário precisa compreender o que estamos criando.
eu sei que é chato pensar em tantos casos de uso quando estamos desenvolvendo coisas simples, mas isso torna uma aplicação mais completa, intuitiva e profissional.
e tem um ganho quase que "invisível": reduz custos de suporte, aumenta a satisfação do usuário e, ultimamente, diferencia nossos produtos em um mercado competitivo.
crie produtos para humanos (principalmente o seu público alvo), não produtos para provar conceitos técnicos :)
Top comments (0)