O poder do UX para o CSS

Técnicas simples que podem fazer muita diferença no seu site. Esse tema foi abordado com bastante considerações no evento CSSDay Recife 2017

Transcript

1. O poder do UX para o CSS by Carolina Carneiro Front-End Engineering Design/Recife-PE
2. Olá! Carolina Carneiro Reis, Front-End Engineering Design
3. “ Um pouco sobre mim...
6. Agora você!
7. Por que está aqui? Por que UX para CSS?
8. O que é usabilidade?
9. Jakob Nielsen
10. “ Usabilidade é um atributo que mede a facilidade de uso de uma interface, produto, site (mais ou menos qualquer coisa). Jakob Nielsen
11. ETAPAS DO PRODUTO USANDO TÉCNICAS DE UX
12. ETAPAS DO PRODUTO USANDO TÉCNICAS DE UX Pesquisa quantitativa Pesquisa etnográfica Análise da concorrência
13. ETAPAS DO PRODUTO USANDO TÉCNICAS DE UX Jornada do usuário Definição de perfis e Personas KPI (métricas quantitativas e qualitativas)
14. ETAPAS DO PRODUTO USANDO TÉCNICAS DE UX Definição do escopo e estrutura Brainstormings Arquitetura da Informação – Card Sorting
15. ETAPAS DO PRODUTO USANDO TÉCNICAS DE UX Design de interação User Interface (cores, ícones e fontes) Protótipos
16. ETAPAS DO PRODUTO USANDO TÉCNICAS DE UX Testes de usabilidade Validação dos protótipos
17. Técnicas na prática
18. 1º Os entregáveis variam bastante de acordo com o tipo de projeto, as expectativas do cliente, os objetivos de design e os membros do time envolvidos na hora de pensar nos detalhes do produto que está sendo criado.
19. 2º Por se tratar de uma área multidisciplinar, os métodos e entregáveis utilizados e produzidos no dia-a-dia de um UX Designer são fortemente influenciados pelos processos e métodos de outras áreas relacionadas.
20. 3º É divertido e seguro pois pode detectar problemas antes não visto pelos desenvolvedores do projeto.
21. Responsividade e Padrões Regra Base
22. “ Qual dispositivo vou trabalhar?
23. DESKTOP TABLET CELULAR
24. INTEGRAÇÃO E INTERAÇÃO DE LAYOUTS
25. USE E PERSONALIZE Escolha o padrão ou crie o seu próprio, combinando elementos e conteúdos conforme as expectativas do usuário comumente está acostumado a usar.
26. CUIDADO!
27. Quando o Design Responsivo impacta na UX?
28. Performance e Menor esforço de manutenção
29. “ Blame the implementation, not the technique. Tim Kadlec
30. A EQUAÇÃO É SIMPLES: Design pensado para performance + Implementação sob medida
31. CASE DE SUCESSO: Novo site da Virgin America Em única página onde o usuário seleciona o destino, as datas, o assento — com baixíssima possibilidade de erro e sem precisar ficar pulando de uma página para outra (e esperando a nova página carregar).
32. CASE DE SUCESSO: Novo site da Virgin America Load time: 5.31 seconds Page size: 1.5MB Requests: 91 Grade: 66/100
33. CASE DE SUCESSO: Novo site da Virgin America Clique na imagem
34. Moodboard Geração de Ideias
37. “Quadro de Atmosfera”
38. Ferramenta muito usada por designers de todas as áreas para organizar e traduzir visualmente uma ideia, definir um estilo e criar foco.
39. Passo 1 Defina o objetivo do moodboard Passo 2 Comece a colecionar referências que expresse sentimento e a sensação que você procura. Passo 3 Escolha um quadro, pode usar o InVision ou Pinterest Passo 4 Monte a "colagem" Passo 5 Edite eliminando as imagens que não transmitam a sensação, o clima que você está buscando
40. Protótipos Desenho de Interfaces
41. Protótipos são entregáveis que documentam como determinada tela deve funcionar. São ótimas ferramentas para comunicar ideias com outros membros do time, clientes e todas as partes envolvidas no projeto.
42. Protótipos de Baixa Fidelidade
43. Protótipos de Alta Fidelidade
44. BAIXA FIDELIDADE ALTA FIDELIDADE Fase do Processo Definição de Requisitos Pré ou Pós construção do Produto Tipo de Protótipo Esquemas feitos a mão Realístico Ferramentas Material de Escritório HTML Photoshop
45. PROTOTIPAGEM EM PAPEL Clique na imagem
46. PROTOTIPAGEM DE ALTA FIDELIDADE Clique na imagem
47. Teste de Usabilidade Pesquisa e Validação
48. Teste de Usabilidade é uma técnica de pesquisa qualitativa que investiga se o produto ou serviço é fácil de usar
49. Teste de Usabilidade é uma técnica de pesquisa qualitativa que investiga se o produto ou serviço é fácil de usar fácil de entender
50. Teste de Usabilidade é uma técnica de pesquisa qualitativa que investiga se o produto ou serviço é fácil de usar fácil de entender e se as pessoas gostam
51. TESTE DE USABILIDADE PASSO A PASSO
52. TESTE DE USABILIDADE PASSO A PASSO
53. TESTE DE USABILIDADE PASSO A PASSO
54. TESTE DE USABILIDADE PASSO A PASSO
55. TESTE DE USABILIDADE PASSO A PASSO
56. TESTE DE USABILIDADE PASSO A PASSO
57. TESTE DE USABILIDADE PASSO A PASSO
58. Por que fazer teste de usabilidade?
59. Jakob Nielsen
60. Jakob Nielsen Porque Porque “você não é o usuário”.
61. VOCÊ
62. USUÁRIO
63. USUÁRIO PESSOA DE VERDADE
65. MARCA
66. MARCA FORMATO
67. MARCA FORMATO COR
68. MARCA FORMATO COR SABOR
69. MARCA FORMATO COR SABOR TIPO DE EMBALAGEM MATÉRIA PRIMA TIPO DE USO PÚBLICO ÁREA DE DISTRIBUIÇÃO
70. COMO ESCOLHER A TÉCNICA CERTA?
71. COMO ESCOLHER A TÉCNICA CERTA?
73. TESTE DE USABILIDADE
74. Inspirações Elisa Volpato, co-fundadora do TESTR brasil.uxdesign.cc/@elisavolpato Fabricio Teixeira, creative director (UX) at R/GA brasil.uxdesign.cc/@fabriciot
75. Dúvida? Obrigada e até a próxima! Carolina Carneiro Front-End Engineering Design ccrs@cin.ufpe.br carolinareisilva@gmail.com Setembro/2017