O documento discute UX (Experiência do Usuário) e UI (Interface do Usuário), explicando como ambos melhoram a satisfação e lealdade do cliente ao facilitar a interação entre o consumidor e o produto. Apresenta também técnicas de UX/UI como agrupar funções similares, destacar a conversão e usar menos elementos para não distrair o usuário.

1. UX e UI
Experiência e Interface aplicada no usuário
WEBDESIGN 2022 – RENATO MELO

2. Evolução do Usuário
60+ - Máquina de escrever e TV
40+ - Computador, internet e DVD
22+ - Notebook, Tablet e smartphones
8+ - Tablet e smartphones

3. INTERNET
ONTEM
Anúncios Sites Institucionais

4. INTERNET HOJE: INTEGRAÇÃO
E CONVERSÃO
Anúncios Sites Institucionais SEO Mobile
Redes
Sociais
Geo localização Conversão
No PDV
Logística

5. Jakob Nielsen, o pai
da usabilidade

6. A palavra do momento:
EXPERIÊNCIA

7. “Você deve
começar com a
experiência do
usuário e depois
ir para a
tecnologia”

8. EXPERIÊNCIA DA APPLE

9. COMO VOCÊ MELHORARIA A EXPERIÊNCIA
NO MC DONALD’S NA HORA DE FAZER UM
PEDIDO.

10. A COPA DO BRASIL E O PAULISTA DE FUTEBOL
ESTÃO COM JOGOS EXCLUSIVOS EM
STREAMING: AMAZON, HBO MAX E YOUTUBE. É
UMA BOA EXPERIÊNCIA PARA O TORCEDOR?

11. UX
Experiência do Usuário

12. UX Design é o processo
de aumentar a
satisfação e lealdade do
cliente.
Como?
Melhorando a
usabilidade, facilidade
do uso e o prazer
proporcionado com a
interação entre
consumidor e produto.

13. JUNHO DE 2020

14. UX Design é
pensado para tudo o
que o cliente
precise.
Conteúdo

15. LEMBRE-SE: O
FOCO É NAS
PESSOAS!

16. UI
Interface do Usuário

17. UI é o processo de
guiar visualmente o
usuário através da
interface, utilizando
elementos interativos e
em todos os tamanhos /
plataformas.
O UI é o
responsável
pela UX

18. 35% das ligações para a Golden Cross são
sobre 2ª via do Boleto. Como você
resolveria isso na interface?

19. UI
Técnicas de aplicação

20. #1 – Agrupar
Agrupe funções similares ao invés de
fragmentá-las.

21. #2 – Destaque a conversão
Coloque cores e destaque somente a
conversão. Tome cuidado para não
confundir e distrair seu usuário.

22. #3 – Menos é mais
Coloque nos campos de formulário somente
o necessário.

23. #4 – Excesso de links
Só use em caso de todos levarem ao mesmo
local. Tome cuidado em distrair demais seu
usuário.

24. #5 – Call to Action?
Troque “Cadastre-se agora” por “Quero
receber as melhores ofertas”, por exemplo

25. UX
Técnica: False Floor

26. Por que as
categorias do
iFood
aparecem pela
metade?

27. Design de
experiência é:
testar e criar um layout
para melhorar seus
resultados e ter uma
melhor
experiência/facilidade
de uso por parte do
usuário.

28. Essa técnica é
utilizada quando
não há nenhum
indicativo que a
interface
continua.

29. UX
Introdução Passo a Passo

30. #1 – Refaça todos os passos
Simule, teste e trace com sua equipe todos
os passos que um usuário pode percorrer
no seu site.

31. #2 – Trace metas concretas
O problema nunca será número de visitas!
Trace metas como aumentar número de
leads, contatos, orçamentos...

32. #3 – Faça um protótipo
Antes de ir ao ar, faça um protótipo ou
wireframe para para ver se todo seu projeto
caminhou bem

33. #4 – Métricas
Avalie pouco a pouco seus resultados,
como via Google Analytics

34. #5 – Tráfego
SEO, Google Adwords e Redes Sociais vão
aumentar o seu tráfego. Mas eles irão sair se
o site não tiver um layout que prenda sua
atenção e converta.

35. ACHE UM SITE DE BUFFET INFANTIL EM
SANTOS E RESPONDA
 ACHOU VIA ORGÂNICA, ANÚNCIO OU MAPA?
 ABRIU PERFEITO NO CELULAR?
O QUE VOCÊ SENTIU MAIS DIFICULDADE NO SITE?
TEM INTEGRAÇÃO COM REDE SOCIAL?
QUAL E COMO É FEITA SUA CONVERSÃO?
Entregue via e-mail:
renatomelo85@gmail.com

36. UX e UI
Experiência e Interface aplicada no usuário
WEBDESIGN 2022 – RENATO MELO