Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo

59 views

Published on

Design UX. O que é e para que serve? Como utilizar no seu projeto e o quanto influencia. Boas práticas na criação de um site.
Nesta palestra, o Guilherme irá mostrar exemplos práticos e irá exercitar o conceito de UX em diversos momentos (da concepção à entrega do produto final).
De uma maneira leve e até bem humorada, a ideia é desmistificar esse conceito e trazer maneiras de utilizar técnicas de UX no dia a dia.
Será abordado ainda, design para desktop x mobile, como projetar um PWA otimizado e também diferenciação entre UX e UI.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo

  1. 1. DESIGN UX Quanto isso influencia no seu projeto
  2. 2. OLÁ! Me chamo Guilherme E você pode me encontrar no Linkedin: http://bit.ly/gui-s-araujo 2
  3. 3. Um pouco sobre mim… WEB DESIGNER. CRIATIVO. CRÍTICO. Atualmente atuo como Web Designer Senior na Stefanini, para projetos da Caixa. Atuei em outras consultorias e clientes. Formado em Web Design pelo IBTA e com pós graduação MBA em Marketing Empresarial pela UMC. Profissional de UX / UI e palestrante, amo disseminar conhecimento. ESPECIALISTA EM MÉTODOS ÁGEIS Certificação Scrum Fundamentals 3 Agora apreciem a apresentação...
  4. 4. 1. TRANSITION HEADLINE Let’s start with the first set of slides 4
  5. 5. 1. MAS O QUE É DESIGN UX? Vamos iniciar aqui nossa jornada… 5
  6. 6. “UX - abreviatura do termo User Experience, que trata a relação do usuário com determinado produto, serviço ou sistema. Foi criado por Donald "Don" Norman nos anos 90.” 6
  7. 7. É importante saber › Design de Experiência com o Usuário › Percepção positiva ou negativa › Por que? O que? Como? Por que? - Motivação do usuário O que? - Funcionalidade do produto Como? - Design em si (acessível, agradável, etc) 7
  8. 8. ENTENDENDO O CONCEITO 8
  9. 9. UX(segundo Peter Morville) É valioso? 9É acessível? É utilizável? É útil? É credível? É localizável? É desejável?
  10. 10. 10 Só para exemplificar... O Design UX trata a maneira como o usuário enxerga, sente e se relaciona (usabilidade) de um produto ou serviço
  11. 11. 2. UX x UI Entendendo as diferenças 11
  12. 12. 12
  13. 13. UX (User Experience) Foco principal é o usuário e sua percepção (mensuração) quanto à utilização do produto, serviço ou aplicativo. Compreendendo os termos UI (User Interface) Compreende a parte visual do projeto (tudo que é perceptível ao usuário) e que o leva a uma experiência positiva. 13
  14. 14. Dá para EXEMPLIFICAR? 14
  15. 15. 15
  16. 16. 16 UX Designer Estilo científico/psicológico. Pensamento crítico. Design baseado em usuários. Cenários, protótipos e wireframes UI Designer Estilo artístico. Pensamento criativo. Cores e Tipografia. Design visual. Mockups e layouts.
  17. 17. 17Exemplo de dificuldade em UI que causa uma má UX...
  18. 18. 18 Muito utilizado para compreender a diferença entre os termos Case “HEINZ”
  19. 19. 19 UI – Embalagem para armazenar e distribuir catchup UX – Modo como a embalagem atende a expectativa do cliente Em ambos os casos, pode ser positivo ou negativo
  20. 20. 20 Teste exaustivamente a Interface para a excelência na Experiência com o Usuário
  21. 21. 21 Não é UX X UI E lembre-se: e sim UX & UI
  22. 22. 3. OTIMIZANDO SEU PWA Através de UX 22
  23. 23. MAS O QUE É UM PWA? Progressive Web App 23 O PWA adiciona novas características a sites responsivos e deixa a experiência como a de um aplicativo nativo
  24. 24. O conceito de um PWA Site: https://airhorner.com/ 24
  25. 25. O conceito de um PWA Site: https://airhorner.com/ 25
  26. 26. SEJA RÁPIDO Use Ajax. Pesquisas apontam que 53% dos usuários abandonam uma página que demora mais de 3s para carregar. Dicas técnicas para otimizar seu PWA SÓ O NECESSÁRIO Se o necessário precisar acessar uma página específica, como um formulário, carregue-o apenas quando o usuário clicar e não antes. CACHE LOCAL O cabeçalho dos arquivos do domínio deve trazer apenas informações de data de expiração e controle. Numa próxima requisição, o carregamento será mais rápido. 26 RECURSOS O PWA utiliza através de seu Service Worker, estratégias de cache para arquivos externos, otimizando a utilização desse recurso via CDN. CDN Sempre que possível carregue recursos estáticos (como CSS e JS) a partir de um CDN cujo domínio não tenha cookies associados com ele. MEÇA SEU PWA Existem ferramentas que medem cada pequena alteração de seu PWA, com o intuito de deixa-la com uma melhor performance, como GTMetrix, Lighthouse, WebPageAps, etc.
  27. 27. 4. Isso não é apenas sobre servidor e rede. Planeje seu PWA desde a fase do design. 6. PWA centrado no usuário. “Menos é mais”. 5. Esqueça padrões web. Acostume-se com design direto e minimalista. Use botões com toque ou deslizamento. 3. Aumente o desempenho. O Google sugere o uso do recurso PRPL, o que significa empurrar os recursos críticos, renderizar a rota inicial, pré-armazenar em cache as rotas e preguiçar o carregamento. 1. Crie um ícone distintivo, simples e legível para se destacar dos demais 2. Preste atenção ao tempo de carregamento (o usuário não pode sentir como se estivesse em um site, esperando aguardar a página). Pensando na criação do PWA 27
  28. 28. 10. Mantenha o teclado longe. Isso afeta a leitura do conteúdo, a visualização da escrita da mensagem. 12. Evite fontes extravagantes, isso facilita a leitura, compreensão e prende o usuário no seu PWA 11. A fluidez da tela do PWA tem que ser pensada utilizando entradas via touch 9. Evite interações indesejadas com o usuário 7. Torne o conteúdo responsivo, pensando até mesmo na distribuição de textos. 8. Pense em se comunicar com o usuário, gerando feedback instantâneo. Mais dicas para otimizar seu PWA 28
  29. 29. 14. Pense off-line. Tente aproveitar ao máximo seu PWA, disponibilizando recursos off-line e incluindo opção de armazenamento em cache. 13. Mantenha-o funcional. Lembre-se que o objetivo principal é servir, e não impressionar. Use uma abordagem única e exclusiva. E o mais importante, não esqueça… 29
  30. 30. 4. DINÂMICA PRÁTICA Queremos, Gostaríamos e Não queremos 30
  31. 31. Conceito da Dinâmica 31 GOSTARÍAMOS Nos post-its azuis podemos relacionar o que gostaríamos QUEREMOS Nos post-its verdes podemos colocar o que queremos NÃO QUEREMOS Nos vermelhos escreveremos o que não queremos A ideia é bem simples: Cada participante deve anotar nos post- its o que querem, o que gostariam e o que não querem.
  32. 32. Aprendendo as regras 1 – Anote nos post-its, uma vez por rodada: Queremos, Gostaríamos e Não Queremos 2 – Cada rodada deve ter no máximo 5 minutos 3 – Após ter escrito nos post-its, o participante deverá ler o card para o resto do grupo 4 – O participante vai ter que justificar o item relacionado no post-it 5 – Após 3 rodadas, passe pelo card mais polêmico 6 – Organize por ordem de importância. Os assuntos repetidos são mais importantes 7 – Feito isso, tentem trabalhar em grupo para resolver aquele post-it Nessa última etapa é importante a participação de todos, num formato semelhante a um brainstorm, de modo a encontrar a melhor saída para o assunto do card. 32
  33. 33. O que queremos? Queremos que o usuário permaneça mais tempo no site. Justificativa: Isso melhora no desempenho do site em mecanismos de busca. Como alcançar/Resolver? Exemplo: 33
  34. 34. BOA DINÂMICA!!! 34
  35. 35. 5. UX NA VIDA REAL Sucessos e fracassos de UX no dia a dia 35
  36. 36. 36 Através de um bom design, uma boa interface e técnicas, a experiência com o usuário pode ser melhorada
  37. 37. 37
  38. 38. 6. BOAS PRÁTICAS Técnicas para atingir um bom Design UX (resultado) 38
  39. 39. Estruturação inteligente do conteúdo 39
  40. 40. Interação de site utilizando SSO e Redes Sociais Bom contraste x Mau contraste 40
  41. 41. That’s a lot of money Total success! 41 Animaçãodesnecessária Responsividade
  42. 42. 42
  43. 43. DESKTOP x MOBILE - Aplique técnicas de usabilidade e acessibilidade, em ambos os cenários - Nunca deixa de testar protótipos e wireframes - Empatia com o usuário, inteligência e estruturação sólida - Aprenda observando outros sites/sistemas - Pense numa estrutura de navegação simples - Use o contraste, fontes e respiro a seu favor - Utilize um fluxo de leitura convencional e comum ao usuário - Evite o uso de animações, sons, efeitos em telas simples ou onde não seja “inteligente” aplicá-las 43 Dicas para uma boa experiência com o usuário de Desktop e Mobile
  44. 44. Pensando em Formulários… 44 Com o mínimo de esforço, você pode implementar tipos de campo e ter um enorme impacto positivo em como o usuário interage com seu formulário. Eles são úteis por 3 motivos: - Eles permitem combinar o teclado com o formato dos dados desejados no celular (somente números, campo de e-mail ...) - Eles permitem que o navegador preencha automaticamente os campos com dados usados ​​anteriormente. - Eles impedem erros (especialmente no formato de e-mail). – input type=”text” displays the normal mobile device keyboard – input type=”email” displays the normal keyboard plus ‘@’ and ‘.com’ – input type=”tel” displays the numeric 0-9 keypad – input type=”number” displays a keyboard with numbers and symbols – input type=”password” this hides characters as they’re typed in the field – input type=”date” this displays the mobile’s date selector – input type=”datetime” this displays the mobile’s date and time selector – input type=”month” this displays the mobile’s month/year selector
  45. 45. 1 Posicione inteligentemente seus componentes 45 2 Estrutura em Z x Coluna 3 Estabeleça proximidade visual 4 Inteligência entre Opcional e Obrigatório 5 Adicione interações humanas
  46. 46. 6 Use botões com instruções claras 7 Tamanho do dado x campo 8 Trate o tipo do Input 9 Não insira mensagem no Input 10 Diferencie botões primários e secundários 46 11 Use mensagens claras e soluções
  47. 47. 47 12 Simplifique 13 Use Máscaras 14 Simplifique mais... 15 Autofocus “user-scalable = no”
  48. 48. DESKTOP PROJECT Show and explain your web, app or software projects using these gadget templates. 48 TOME CUIDADO COM EXAGEROS !!!!
  49. 49. 7. MERCADO DE TRABALHO Áreas de atuação de UX 49
  50. 50. 7. MERCADO DE TRABALHO Áreas de atuação de UX 50
  51. 51. OBRIGA DO!Dúvidas? Sugestões? Reclamações? Você pode me encontrar no Linkedin: http://bit.ly/gui-s-araujo 51
  52. 52. 52 A Stefanini tem vagas Faça parte do time! Acesse e confira:
  53. 53. AGRADECIMENTOS Agradecimentos especiais: › Rodrigo “pokemaoBR” Cardoso › Toda a estrutura da IMasters/IConf › Todos os participantes da palestra 53 Sugestão de leitura: https://ymedialabs.com/ux-vs-ui PS: É verdade esse bilete!
  54. 54. Dados técnicos da apresentação Esta apresentação foi desenvolvida utilizando as seguintes fontes: › Títulos: Hind › Body (Corpo dos slides): Hind Você pode fazer o download da fonte Hind em: https://www.fontsquirrel.com/fonts/hind 54

×