Upgrade to Pro — share decks privately, control downloads, hide ads and more …

UX Design – Primeiros Passos

Daniel Fosco
September 23, 2017

UX Design – Primeiros Passos

Palestra apresentada no IED-RJ em evento organizado pelo time do http://trama.cc

Daniel Fosco

September 23, 2017
Tweet

More Decks by Daniel Fosco

Other Decks in Design

Transcript

  1. UX e Produtos Digitais Menu Qual o papel do UX

    Designer Processos de Design Métodos de Design
  2. UX e Produtos Digitais Menu Qual o papel do UX

    Designer Processos de Design Workshop ⚡ ⚡ ⚡ Métodos de Design
  3. “Experiência do usuário” engloba todos os aspectos da interação do

    usuário final com uma empresa, seus serviços e produtos. Don Norman
  4. Designer de Produto = UI/UX = UX Designer Mas leia

    bem a descrição da vaga e pesquise o processo de design da empresa!
  5. Entrevistas com Usuários + Informação aprofundada + Formato flexível +

    Boa para explorar novas áreas - Cansativo para organizar e analizar - Pode não representar todo o grupo de usuários
  6. Entrevistas com Usuários + Informação aprofundada + Formato flexível +

    Boa para explorar novas áreas - Cansativo para organizar e analizar - Pode não representar todo o grupo de usuários Download Gratuito https://trvrs.co/book
  7. Enquete + Grandes quantidades de informação + Permite feedback quantitativo

    e qualitativo - Difícil de conseguir boas respostas - Amostra de respostas pode ter um viés + Complementa outros métodos
  8. Enquete + Grandes quantidades de informação + Permite feedback quantitativo

    e qualitativo - Difícil de conseguir boas respostas - Amostra de respostas pode ter um viés
  9. Observação Contextual + Transparece informações que você não perguntaria… +

    Representa o uso real - Bem cansativo para organizar e analizar - Depende de visitar usuários fisicamente
  10. Observação Contextual + Transparece informações que você não perguntaria… +

    Ou que o usuário não falaria + Representa o uso real - Bem cansativo para organizar e analizar - Depende de visitar usuários fisicamente
  11. Analytics + Informação em tempo real sobre o uso do

    app + Imagem ampla de como usuários estão se comportando
  12. Analytics + Informação em tempo real sobre o uso do

    app + Imagem ampla de como usuários estão se comportando - Mostra o que aconteceu, mas não por quê - Difícil de manipular grandes quantidades de dados - Uso avançado depende de código
  13. Analytics + Informação em tempo real sobre o uso do

    app + Imagem ampla de como usuários estão se comportando - Difícil de manipular grandes quantidades de dados - Uso avançado depende de código Serviços de Analytics Google Analytics Mixpanel Hotjar Intercom
  14. Analytics + Informação em tempo real sobre o uso do

    app + Imagem ampla de como usuários estão se comportando - Difícil de manipular grandes quantidades de dados - Uso avançado depende de código Num mundo ideal Todo UX Designer sabe usar o Google Analytics
  15. Analytics + Informação em tempo real sobre o uso do

    app + Imagem ampla de como usuários estão se comportando - Difícil de manipular grandes quantidades de dados - Uso avançado depende de código
  16. Analytics + Informação em tempo real sobre o uso do

    app + Imagem ampla de como usuários estão se comportando - Difícil de manipular grandes quantidades de dados - Uso avançado depende de código https://analytics.google.com/analytics/academy
  17. Design Participatório Extende a pesquisa envolvendo usuários e stakeholders no

    processo de descoberta para visualizar problemas e soluções
  18. Card Sorting Entender o modelo mental dos usuários • Ordenar

    itens em categorias • Relacionar temas a ícones • Testar opções de copywriting
  19. Mapeia os fluxos do usuário User Flow •Entender o “happy

    path” •Mapear estados de erro •Discutir cenários específicos
  20. Mapeia a jornada individual de um usuário Customer Journey •Segue

    unicamente o comportamento do usuário •Mapeia estado emocional ao longo da jornada •Não precisa estar limitado ao produto
  21. Customer Journey •Segue unicamente o comportamento do usuário •Mapeia estado

    emocional ao longo da jornada •Não precisa estar limitado ao produto
  22. Customer Journey •Segue unicamente o comportamento do usuário •Mapeia estado

    emocional ao longo da jornada •Não precisa estar limitado ao produto How to Create a Customer Journey Map https://uxmastery.com/how-to-create-a-customer-journey-map/
  23. Abby Covert How to Make a Sense of Any Mess

    www.howtomakesenseofanymess.com De graça em
  24. Testando volumes Wireframes •Comunica de forma mais clara (média fidelidade)

    •Experimentar com a hierarquia visual da página •Requer certa capacidade de abstração
  25. Wireframes Encontre sua próxima cerveja Contém Cerva é o maior

    site de cervejas artesanais brasileiras Procure cervejas ou cervejarias Cervejas Cervejarias Blog Sobre Entrar
  26. Wireframes Encontre sua próxima cerveja Contém Cerva é o maior

    site de cervejas artesanais brasileiras Procure cervejas ou cervejarias Cervejas Cervejarias Blog Sobre Entrar
  27. Wireframes Destaques Procure cervejas ou cervejarias próxima cerveja Encontre sua

    próxima cerveja Contém Cerva é o maior site de cervejas artesanais brasileiras Cervejas Cervejarias Blog Sobre Entrar 2 Ça Va Saison Saison Barco 4.0 Pilsner 3.8 Jeffrey Red Pilsen 3 Witbier 3.75 Jeffrey Ninã 4 Ça Va Saison Saison Barco 3.7 5 Pilsner 3.7 Jeffrey Red Pilsen 6 Witbier 4.2 Jeffrey Ninã 1 Melhores Avaliações Ver todas
  28. Refinando a visão Mockups •Ideal para experimentação visual detalhada •Pode

    ocupar muito tempo de preparo •Visão muito clara do produto (alta fidelidade)
  29. Mockups Refinando a visão •Ideal para experimentação visual detalhada •Pode

    ocupar muito tempo de preparo •Visão muito clara do produto (alta fidelidade) Mockups O que não fazer •Começar pelo digital •Fazer um layout sem ter ideia do conteúdo •Fazer um layout sem antes ter uma estrutura
  30. Mockups Refinando a visão •Ideal para experimentação visual detalhada •Pode

    ocupar muito tempo de preparo •Visão muito clara do produto (alta fidelidade) Web Design in 4 minutes
  31. Feedback dói. Você vai estar errado. Vai ter coisa pra

    mudar no seu design. Sim, de última hora.
  32. Faça já o seu! Teste de Usabilidade •Um protótipo •Uma

    ação a ser realizada •Uma hipótese •Um a cinco usuários •Um parceiro
  33. Faça já o seu! Teste de Usabilidade •Um protótipo •Uma

    ação a ser realizada •Uma hipótese •Um a cinco usuários •Um parceiro para os testes Assista User Research, Quick 'n' Dirty
  34. Heurísticas de Usabilidade Todo sistema pode ter sua usabilidade avaliada

    em cinco qualidades •Capacidade de Aprendizado •Memorabilidade •Eficiência •Gestão de Erros •Satisfação
  35. Heurísticas de Nielsen •Visibility of system status •User control and

    freedom •Match between system and the real world •Consistency and standards •Error prevention •Recognition rather than recall •Aesthetic and minimalist design •Flexibility and efficiency of use •Help and documentation •Help users recognize, diagnose, and recover from errors
  36. Heurísticas de Nielsen •Visibility of system status •User control and

    freedom •Match between system and the real world •Consistency and standards •Error prevention •Recognition rather than recall •Aesthetic and minimalist design •Flexibility and efficiency of use •Help and documentation •Help users recognize, diagnose, and recover from errors NN Group Jakob Nielsen & Don Norman
  37. Heurísticas de Nielsen •Visibility of system status •User control and

    freedom •Match between system and the real world •Consistency and standards •Error prevention •Recognition rather than recall •Aesthetic and minimalist design •Flexibility and efficiency of use •Help and documentation •Help users recognize, diagnose, and recover from errors Don Norman O Design do Dia-a-dia