Aula — UX Design: Fundamentos e Ferramentas¶

🎯 O que é UX Design?¶

UX (User Experience) é o processo de aumentar a satisfação e lealdade do cliente, melhorando a usabilidade, facilidade de uso e o prazer proporcionado na interação entre consumidor e produto.

O termo foi criado por Don Norman enquanto trabalhava na Apple.

🔺 Os 3 Pilares das Boas Experiências¶

        🍦 DESEJABILIDADE
           "Quero usar?"
              ▲
             ╱ ╲
            ╱   ╲
           ╱     ╲
          ╱       ╲
         ╱  👆     ╲
        ╱ USABILIDADE╲
       ╱  "Consigo    ╲
      ╱    usar?"      ╲
     ╱                  ╲
    ╱    🧹 UTILIDADE    ╲
   ╱     "Preciso usar?"  ╲
  ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔

🐝 Colmeia de Experiência do Usuário (Peter Morville)¶

Peter Morville criou a Colmeia de UX — 7 definições que juntas criam o valor do UX:

📋 O que é Usabilidade?¶

O termo usabilidade vem da ciência cognitiva e significa "fácil de usar".

5 Critérios de Nielsen para uma boa interface:¶

Efeito de Usabilidade Estética¶

O usuário tende a correlacionar usabilidade com estética:

• Estética agradável = parece fácil de usar
• Usuários são mais tolerantes a pequenos erros em interfaces bonitas

Conclusão: Usabilidade e estética são complementares e devem andar juntas.

🎨 UX vs UI — Qual a diferença?¶

UI é o responsável pelo UX — é o processo de guiar visualmente o usuário através da interface, utilizando elementos interativos em todas as plataformas.

Dicas de UI¶

• Agrupar: Funções similares juntas, não fragmentadas
• Destaque: Cores só quando necessário (não distrair)
• Menos é mais: Formulários só com o necessário
• Links: Evitar excesso (não distrair o usuário)
• Call to Action: Trocar "Cadastre-se agora" por "Quero receber as melhores ofertas"

📝 Os 10 Princípios de UX (Joshua Porter)¶

1. A experiência pertence ao usuário
2. A área de UX é holística (visão do todo)
3. Uma boa experiência é invisível pelo usuário
4. Toda experiência possui um ciclo
5. O contexto é o rei
6. Boas experiências mantêm o usuário no controle
7. A experiência digital é social
8. Psicologia é algo primário (cores, emoções)
9. A UX é uma conversa
10. Grandes experiências são simples

👤 Design Centrado no Usuário¶

Mantenha o foco na necessidade, desejo e limitações do usuário durante toda a concepção do projeto.

Etapas do Design Centrado no Usuário:¶

1. Identificar requisitos
2. Criar soluções alternativas
3. Construir protótipos testáveis
4. Avaliar com usuários

🚀 Os 5 Passos do UX¶

📐 Wireframe vs Mockup vs Protótipo¶

O Fluxo de Desenvolvimento¶

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│  WIREFRAME  │ ──▶ │   MOCKUP    │ ──▶ │  PROTÓTIPO  │
│   (Esboço)  │     │  (Estático) │     │  (Simula)   │
└─────────────┘     └─────────────┘     └─────────────┘
   Rascunho          Com visual          Interativo
   Sem cores         Com cores           Clicável
   Estrutura         Design final        Feedback

Comparativo¶

Wireframe¶

Esboços simples de telas, estruturam e validam ideias sem detalhes como cores, fontes ou imagens.

Elementos básicos: cabeçalhos, rodapés, barras laterais, áreas de conteúdo.

Ajuda a entender: - Tipos de conteúdo do site - Posicionamento dos elementos - Quantidade de telas necessárias

Mockup¶

Modelo mais detalhado com questões estéticas importantes, mas estático (não permite interação).

Protótipo¶

Simulador que permite testar interações e usabilidade. Última fase antes do desenvolvimento.

Permite: - Simular interações do usuário - Ajustar pontos que precisam de revisão - Encontrar e corrigir erros - Melhorar feedback visual

🛠️ Ferramentas Essenciais¶

Prototipagem e Design¶

Paleta de Cores¶

Avaliação de UX¶

Design Systems e Bibliotecas¶

Componentes CSS¶

Ilustrações e Avatares¶

Fontes¶

💻 Ferramentas para Desenvolvimento Web¶

O Básico para Front-End¶

HTML + CSS + JavaScript = Suficiente para desenvolver front-end

Frameworks JavaScript¶

IDE e Editores¶

Extensões VS Code Recomendadas¶

• HTML Snippets — Tags HTML5
• HTML CSS Support — CSS Intellisense para HTML
• Live Server — Servidor local com recarga automática
• Prettier — Organiza seu código automaticamente
• Image Preview — Mostra a imagem que você colocou via link

Acessibilidade¶

Responsividade¶

• Consórcio W3 — Principal consórcio de boas práticas Web

🔟 Heurísticas de Nielsen¶

Jakob Nielsen criou as 10 heurísticas de usabilidade:

1. Visibilidade do status do sistema
2. Correspondência com o mundo real
3. Controle e liberdade do usuário
4. Consistência e padrões
5. Prevenção de erros
6. Reconhecimento em vez de memorização
7. Flexibilidade e eficiência de uso
8. Design estético e minimalista
9. Ajudar usuários a reconhecer e recuperar erros
10. Ajuda e documentação

Referência: Nielsen Norman Group

📚 Pessoas Importantes em UX¶

📖 Glossário¶

🎬 Para Aprofundar¶

✅ Perguntas para Fixação¶