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.

1. DESIGN
UX
Quanto isso
influencia no
seu projeto

2. OLÁ!
Me chamo Guilherme
E você pode me encontrar no Linkedin:
http://bit.ly/gui-s-araujo
2

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. 1.
TRANSITION
HEADLINE
Let’s start with the first set of slides
4

5. 1.
MAS O QUE É
DESIGN UX?
Vamos iniciar aqui nossa jornada…
5

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. É 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. ENTENDENDO
O CONCEITO
8

9. UX(segundo Peter Morville)
É valioso?
9É acessível?
É utilizável?
É útil?
É credível? É localizável?
É desejável?

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. 2.
UX x UI
Entendendo as diferenças
11

12. 12

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. Dá para
EXEMPLIFICAR?
14

15. 15

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. 17Exemplo de dificuldade em UI que causa uma má UX...

18. 18
Muito utilizado para
compreender a diferença
entre os termos
Case “HEINZ”

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
Teste exaustivamente a Interface
para a
excelência na Experiência com o
Usuário

21. 21
Não é UX X UI
E lembre-se:
e sim
UX & UI

22. 3.
OTIMIZANDO SEU
PWA
Através de UX
22

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. O conceito de
um PWA
Site:
https://airhorner.com/
24

25. O conceito de
um PWA
Site:
https://airhorner.com/
25

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. 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. 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. 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. 4.
DINÂMICA
PRÁTICA
Queremos, Gostaríamos e Não
queremos
30

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. 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. 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. BOA DINÂMICA!!!
34

35. 5.
UX NA VIDA REAL
Sucessos e fracassos de UX no
dia a dia
35

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

38. 6.
BOAS PRÁTICAS
Técnicas para atingir um bom
Design UX (resultado)
38

39. Estruturação inteligente do conteúdo 39

40. Interação de site
utilizando SSO e
Redes Sociais
Bom contraste x Mau contraste
40

41. That’s a lot of money
Total success!
41
Animaçãodesnecessária
Responsividade

42. 42

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. 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. 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. 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
12 Simplifique
13 Use Máscaras
14 Simplifique mais...
15 Autofocus “user-scalable = no”

48. DESKTOP PROJECT
Show and explain
your web, app or
software projects
using these gadget
templates.
48
TOME CUIDADO COM
EXAGEROS !!!!

49. 7.
MERCADO DE
TRABALHO
Áreas de atuação de UX
49

50. 7.
MERCADO DE
TRABALHO
Áreas de atuação de UX
50

51. OBRIGA
DO!Dúvidas? Sugestões? Reclamações?
Você pode me encontrar no Linkedin:
http://bit.ly/gui-s-araujo
51

52. 52
A Stefanini tem
vagas
Faça parte do
time!
Acesse e confira:

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. 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