O usuário merece mais!

Slides da talk apresentada no Meetup IxDA Floripa + ModularUI: práticas emergentes na criação de interfaces digitas.

Referências: https://github.com/cspilhere/useful-links

Transcript

1. O USUÁRIO MERECE MAIS!S2 Por: Christian Spilhere
2. Oi,
3. Desenvolvedor front-end, designer, atualmente trabalhando como parceiro, em um relacionamento sério com a Catarinas Design de Interação
5. Usuário, conteúdo, componentes …
6. … e trabalho em equipe. S2
7. Como criar uma interface que demonstre empatia pelo usuário?
8. “Capacidade de se identificar com outra pessoa, de sentir o que ela sente, de querer o que ela quer, de apreender do modo como ela apreende etc” Google
9. • Que está atenta ao contexto • Que oferece informação de forma acessível • Que primeiro tenta resolver o problema dele • Que auxilia em momentos de dificuldade • Que não o deixe desconfortável ou entediado • Que se preocupa com ele acima de tudo • Que não o subestime ou superestime • Que seja proativa • Que aprenda com seus erros
10. ‘Usuários’ === ‘Personas’
11. Tente criar Personas que também ajudem a tomar decisões mais específicas.
12. • Qual é o entendimento dela sobre a solução • Qual é o entendimento dela sobre o problema • Descreva hábitos de uso para cada device • Se precisar abra novas fichas com sub-personas • User Stories ...
13. Use User Stories para decidir além de features.
14. Use User Stories para dar voz a sua Persona.
15. Não seja tendencioso, não crie somente stories convenientes.
16. Lembre-se da empatia: Se ele quer mas não dá, avise e ofereça uma alternativa, se dá, priorize na interface.
17. … Gostaria de ver o produto aplicado em ambientes reais para decidir se gosto do que a loja oferece.
18. … Gostaria de receber amostras do produto em casa para decidir se gosto do que a loja oferece.
19. … Gostaria de saber se algum conhecido já comprou dessa loja para verificar com ele se está feliz com o produto.
20. … Gostaria de saber se a loja fica na mesma cidade ou perto para que eu possa visitar o showroom.
23. E o conteúdo …
24. Não use Lorem Ipsum! Usar é uma contradição.
25. Busque o conteúdo onde quer que ele esteja! Seja criativo!
26. • Use suas User Stories • Imagem também é conteúdo • Crie um inventário de conteúdo sempre • Pegue textos de outros sites, reorganize as palavras, mude um pouco… Quando for entregar sim, mude tudo para Lorem Ipsum • Chame o cliente para colaborar • O inventário da interface ajuda bastante • O briefing é super relevante, e é um excelente ponto de partida para pelo menos fazer suposições, se ele não estiver bom o bastante promova mudanças com a sua equipe
27. Não esqueça da acessibilidade.
28. • “Acessibilidade não é caridade” Deivid Marques • ARIA FTW • Navegação por teclado é lenta, priorize! • Outline • Um dia você pode precisar • Teste em casa: (tools) ◦ https://en.wikipedia. org/wiki/List_of_screen_readers ◦ http://www.chromevox.com/
29. “Content precedes design. Design in the absence of content is not design, it's decoration.” Jeffrey Zeldman
30. Ok, vamos para o design …
31. Components everywhere :)
32. Componentes são complexos e profundos, mesmo que seja um simples botão.
33. Dissecando...
34. Informação (Literal, semântica, simbólica)
35. Função (Botão)
36. Responsabilidade (Enviar formulários)
37. Família (Botões)
38. Nome (Botão padrão)
39. Estilo (Próprio e/ou herdado)
40. Relação (Style guide)
41. Comportamento (Estático, interativo, funcional, proativo ou responsivo. Use “e se …” para mapear respostas)
42. E se … der erro ao enviar o formulário?
43. Acessibilidade (O que torna ele acessível, ARIA, contraste, tamanho)
44. Monitorabilidade (Cliques, erros, efetividade, visualizações, usabilidade, UX)
45. Performance (Impacto no carregamento, browser ou no device)
46. Estrutura (<button type=”submit” role=”button” class=” botao botao--padrao” >Submit</button>)
47. Mas pra que tudo isso jovem?
48. • Você só inova e aperfeiçoa aquilo que conhece bem.
49. • Dissecar dessa forma fica fácil para qualquer parte da equipe entender e se comunicar.
50. • Por que somos levianos. *Vide o caso do hamburger menu.
51. Sobre trabalho em equipe …
52. • Não seja mimado.
53. • O designer tem que saber “codar” e o dev tem que ter bom gosto e boa vontade.
54. • Pixel Perfect é doença, pratique um esporte.
55. • Discuta os métodos.
56. • Teste novas abordagens.
57. • Seja o novo Brad Frost.
58. • Somos TODOS responsáveis por aquilo que produzimos.
59. • Nosso principal entregável é legado.
60. CABOU!!! #SQN
61. Então… Quebre o pau com a equipe! Foque direito, não se agarre num layer de Photoshop ou em um bloco de código, pois o Wix faz sites tão bons quanto você.
63. O USUÁRIO MERECE MAIS!S2 Por: Christian Spilhere @cspilhere - cspilhere.com