ux e ui - experiência e interface do usuário
TRANSCRIPT
![Page 1: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/1.jpg)
UX e UIInjeção de personalidade no seu brandingRENATO MELO - 2016
![Page 2: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/2.jpg)
“Você deve começar com a experiência do usuário e depois ir para a tecnologia”
![Page 3: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/3.jpg)
Usuário60+ - Máquina de escrever e TV
40+ - Computador, internet e DVD18+ - Tablet e smartphones – Heavy users
![Page 4: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/4.jpg)
Novas Gerações vão surgir cada vez mais rápido
![Page 5: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/5.jpg)
INTERNET ONTEM
Anúncios Sites Institucionais
![Page 6: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/6.jpg)
INTERNET HOJE: INTEGRAÇÃOE CONVERSÃO
Anúncios Sites Institucionais SEO Mobile
RedesSociais
Geo localização ConversãoNo PDV
Logística
![Page 7: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/7.jpg)
O CONCEITO
E-BRANDIN
G
UIUX
![Page 8: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/8.jpg)
UXExperiência do Usuário
![Page 9: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/9.jpg)
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.
![Page 10: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/10.jpg)
UX Design
Conteúdo
![Page 11: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/11.jpg)
5 passos do UXEstratégia – Escopo – Estrutura –
Wireframe – Visual Design
![Page 12: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/12.jpg)
BriefingPergunte, pergunte e
pergunte até esgotar suas dúvidas. O site deve
converter em vendas!
![Page 13: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/13.jpg)
UXOs 7 mitos e erros mais comuns
![Page 14: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/14.jpg)
User Experience é diferente de User
Interface
![Page 15: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/15.jpg)
Você = Seu usuário
![Page 16: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/16.jpg)
Usuário sempre sabe o que
quer
![Page 17: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/17.jpg)
UX termina quando o usuário sai do site
![Page 18: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/18.jpg)
Sua solução sempre vai funcionar
![Page 19: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/19.jpg)
Eu li uma solução de um guruaqui na internet e...
![Page 20: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/20.jpg)
Isso é impossível de fazer!
![Page 21: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/21.jpg)
UXNa prática
![Page 22: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/22.jpg)
#1 – Refaça todos os passosSimule e trace com sua equipe todos
os passos que um usuário pode percorrer no seu site.
![Page 23: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/23.jpg)
#2 – Trace metas concretasO problema nunca será número de
visitas! Trace metas como aumentar número de leads, contatos,
orçamentos...
![Page 24: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/24.jpg)
Design Responsivo e Disposição:Passou de
500 inscrições para 1200 por
mês
![Page 25: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/25.jpg)
35% da operação do Call Center
existia apenas para responder uma demanda: Onde encontrar
a 2ª via do boleto.
![Page 26: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/26.jpg)
#3 – Faça um protótipoAntes de ir ao ar, faça um protótipo
para ver se todo seu projeto caminhou bem
![Page 27: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/27.jpg)
#4 – MétricasAvalie pouco a pouco seus resultados
via Google Analytics
![Page 28: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/28.jpg)
#5 – TráfegoSEO, 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.
![Page 29: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/29.jpg)
UIInterface do Usuário
![Page 30: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/30.jpg)
UI é o processo de guiar visualmente o usuário através da
interface de um produto, utilizando
elementos interativos e em
todos os tamanhos / plataformas.
O UI é o responsável
pela UX
![Page 31: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/31.jpg)
UXOs 4 mitos e erros mais comuns
![Page 32: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/32.jpg)
User Interface é diferente de design
![Page 33: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/33.jpg)
Tudo tem que estar na área de destaque, acima dos 600 pixels
de altura.
![Page 34: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/34.jpg)
Apostar sempre em técnicas aleatórias como: 3 cliques da homepage até o final resolve
tudo
![Page 35: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/35.jpg)
Homepage é a parte mais importante, todos os usuários acessam seu site através dela.
![Page 36: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/36.jpg)
UIIdeias para utilizar
![Page 37: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/37.jpg)
#1 – AgruparAgrupe funções similares ao invés de
fragmentá-las.
![Page 38: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/38.jpg)
#2 – Destaque a conversãoColoque cores e destaque somente a conversão. Tome cuidado para não
confundir e distrair seu usuário.
![Page 39: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/39.jpg)
#3 – Menos é maisColoque nos campos de formulário
somente o necessário.
![Page 40: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/40.jpg)
#4 – Excesso de linksSó use em caso de todos levarem ao
mesmo local. Tome cuidado em distrair demais seu usuário.
![Page 41: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/41.jpg)
#5 – Call to Action?Troque “Cadastre-se agora” por
“Quero receber as melhores ofertas”, por exemplo
![Page 42: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/42.jpg)
Design: A New EraTendências e presente
![Page 43: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/43.jpg)
Mobile First!A maioria das visitas é por lá.
![Page 44: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/44.jpg)
Minimalismo e Flat Design
![Page 45: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/45.jpg)
Big Typography
![Page 46: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/46.jpg)
Assim como sliders grandes
![Page 47: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/47.jpg)
Infográficos
![Page 48: UX e UI - Experiência e Interface do Usuário](https://reader031.vdocuments.net/reader031/viewer/2022032208/5871aabb1a28abda6a8b56a5/html5/thumbnails/48.jpg)
One page