SlideShare uma empresa Scribd logo
UX e UI
Experiência e Interface aplicada no usuário
WEBDESIGN 2020 – RENATO MELO
“Você deve
começar com a
experiência do
usuário e depois
ir para a
tecnologia”
Usuário
60+ - Máquina de escrever e TV
40+ - Computador, internet e DVD
22+ - Notebook, Tablet e smartphones
8+ - Tablet e smartphones
INTERNET
ONTEM
Anúncios Sites Institucionais
INTERNET HOJE: INTEGRAÇÃO
E CONVERSÃO
Anúncios Sites Institucionais SEO Mobile
Redes
Sociais
Geo localização Conversão
No PDV
Logística
UX
Experiência do Usuário
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.
UX Design
Conteúdo
5 passos do UX
Estratégia – Escopo – Estrutura –
Wireframe – Visual Design
Briefing
Pergunte, pergunte e pergunte até
esgotar suas dúvidas. O site deve
converter em vendas!
UX
Na prática
#1 – Refaça todos os passos
Simule e trace com sua equipe todos os
passos que um usuário pode percorrer no
seu site.
#2 – Trace metas concretas
O problema nunca será número de visitas!
Trace metas como aumentar número de
leads, contatos, orçamentos...
Design
Responsivo e
Disposição:
Passou de 500
inscrições para
1200 por mês
35% da operação
do Call Center
existia apenas
para responder
uma demanda:
Onde encontrar a
2ª via do boleto.
#3 – Faça um protótipo
Antes de ir ao ar, faça um protótipo para ver
se todo seu projeto caminhou bem
#4 – Métricas
Avalie pouco a pouco seus resultados via
Google Analytics
#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.
UI
Interface do Usuário
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
UI
Ideias para utilizar
#1 – Agrupar
Agrupe funções similares ao invés de
fragmentá-las.
#2 – Destaque a conversão
Coloque cores e destaque somente a
conversão. Tome cuidado para não
confundir e distrair seu usuário.
#3 – Menos é mais
Coloque nos campos de formulário somente
o necessário.
#4 – Excesso de links
Só use em caso de todos levarem ao mesmo
local. Tome cuidado em distrair demais seu
usuário.
#5 – Call to Action?
Troque “Cadastre-se agora” por “Quero
receber as melhores ofertas”, por exemplo
LEMBRE-SE: O
FOCO É NAS
PESSOAS!
CHECKLIST
GERAL
 TAMANHO DA TELA
 CONECTIVIDADE
 OBJETIVOS DO USUÁRIO
 AMBIENTES DO USUÁRIO
 CAPACIDADE DO USUÁRIO
CHECKLIST
DE UM SITE
 COMO SERÁ DIVULGADO?
 COMO ELE É ENCONTRADO?
 TEM INTEGRAÇÃO COM REDE SOCIAL?
 É VISUALIZADO EM QUALQUER TELA?
 QUAL E COMO SERÁ FEITA SUA
CONVERSÃO?
 O USUÁRIO ENTENDE SEU SITE?
EXPERIÊNCIA NO MC DONALDS:
FILA – ATENDIMENTO PESSOAL – LANÇAMENTO
DE DADOS NO SISTEMA – PAGAMENTO -
COZINHA - ENTREGA
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?
UX e UI
Experiência e Interface aplicada no usuário
WEBDESIGN 2020 – RENATO MELO

Mais conteúdo relacionado

PPT
Usabilidade em Aplicativos
PPT
UX e UI - Experiência e Interface aplicada no usuário
PPT
Usabilidade em Aplicativos - Webdesign - 2021-02
PPT
Técnicas de Usabilidade - Webdesign - 2021-01
PPT
Usabilidade em Aplicativos - Webdesign - Aula 03 - 2020-02
PPT
UX e UI no Webdesign - Aula 02 - Webdesign - 2020
PPT
Testes de usabilidade - Webdesign 2021-02
PPT
Wireframe em Aplicativos - Webdesign 2022
Usabilidade em Aplicativos
UX e UI - Experiência e Interface aplicada no usuário
Usabilidade em Aplicativos - Webdesign - 2021-02
Técnicas de Usabilidade - Webdesign - 2021-01
Usabilidade em Aplicativos - Webdesign - Aula 03 - 2020-02
UX e UI no Webdesign - Aula 02 - Webdesign - 2020
Testes de usabilidade - Webdesign 2021-02
Wireframe em Aplicativos - Webdesign 2022

Mais procurados (20)

PDF
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
PDF
Como potencializar a experiência de uso (e vendas) pelo Mobile
PPT
Usabilidade em Aplicativos - Webdesign - 2021-01
PPT
Ux e ui no webdesign - 2022
PPT
Projeto WEB - Resumo P1
PPT
UX e UI no Webdesign - Aula 08 - Webdesign - 2019
PDF
Introdução as práticas de desenvolvimento web com design responsivo
KEY
UX Design em 7 Passos - Daniel Werle, Fórum Web Adventista
PPTX
Gestão de projetos em soluções mobile
PPT
Capitulo 11 Livro Nielsen
PPTX
Design responsivo
PDF
Acessibilidade na Web: Principais problemas e Soluções - FISL14
PPT
Melhorando a Usabilidade
PDF
Avaliação de usabilidade
PPT
Usabilidade - Como melhorar em sites e aplicativos
PDF
O papel do Front-End na UX
PDF
Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e
PDF
Responsividade e html5
PPT
Capitulo 3 Livro Nielsen
PDF
Padrões em Governo Eletrônico - Cartilha de Usabilidade
Web Design Responsivo - Melhorando interfaces e a experiência do usuário na n...
Como potencializar a experiência de uso (e vendas) pelo Mobile
Usabilidade em Aplicativos - Webdesign - 2021-01
Ux e ui no webdesign - 2022
Projeto WEB - Resumo P1
UX e UI no Webdesign - Aula 08 - Webdesign - 2019
Introdução as práticas de desenvolvimento web com design responsivo
UX Design em 7 Passos - Daniel Werle, Fórum Web Adventista
Gestão de projetos em soluções mobile
Capitulo 11 Livro Nielsen
Design responsivo
Acessibilidade na Web: Principais problemas e Soluções - FISL14
Melhorando a Usabilidade
Avaliação de usabilidade
Usabilidade - Como melhorar em sites e aplicativos
O papel do Front-End na UX
Sua web app nao precisa ser necessariamente mais rapida, mas parecer q e
Responsividade e html5
Capitulo 3 Livro Nielsen
Padrões em Governo Eletrônico - Cartilha de Usabilidade
Anúncio

Semelhante a UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01 (20)

PPT
Apresentação UX e UI - Webdesign - Aula 07
PPT
UX e UI - Experiência e Interface do Usuário
PPTX
Introdução a experiência do usuário
PPSX
Palestra UX e AI
PPTX
Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
PDF
Design Centrado no Usuário para Interface Digital
PPS
Palestra oficial
PPT
12° Encontro de WebDesign (usabilidade)
PDF
Hack2B Startups - UX?
PDF
UX - User Experience (Experiência do usuário) para Mobile
PPTX
05 - Experiência do Usuário - User Experience.pptx
PPTX
User experience
PPTX
User experiense
PPTX
ux em aplicativos
PDF
Aula 3. frameworks front end
PPT
Ux e ui no webdesign - 2022
PDF
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerce
PDF
User Experience - Por que NÃO projetar com foco no usuário pode ser fatal
PDF
User Experience - Por que não projetar com foco no usuário pode ser fatal
PPTX
UX – User Experience
Apresentação UX e UI - Webdesign - Aula 07
UX e UI - Experiência e Interface do Usuário
Introdução a experiência do usuário
Palestra UX e AI
Design UX - Quanto isso influencia seu projeto - Guilherme Sester Araujo
Design Centrado no Usuário para Interface Digital
Palestra oficial
12° Encontro de WebDesign (usabilidade)
Hack2B Startups - UX?
UX - User Experience (Experiência do usuário) para Mobile
05 - Experiência do Usuário - User Experience.pptx
User experience
User experiense
ux em aplicativos
Aula 3. frameworks front end
Ux e ui no webdesign - 2022
Evento Comportamento do Consumidor e Estratégias Digitais para E-commerce
User Experience - Por que NÃO projetar com foco no usuário pode ser fatal
User Experience - Por que não projetar com foco no usuário pode ser fatal
UX – User Experience
Anúncio

Mais de Renato Melo (20)

PPTX
Expressa Esamc - Oficina de Reels e TikTOk
PPT
Redação para Gestão de Crise 1 - Técnicas de Redação em RP
PPT
HTML 1 e 2 - Webdesign - 2022
PPT
Redação para E-mail - Jornalismo Multimídia
PPT
Html e E-mail Marketing - Webdesign 2022
PPT
Anúncio para AT Revista - Computação Gráfica 2022
PPT
Marketing por Conteúdo - Projeto Web 2022
PPT
FERRAMENTAS DE STORYTELLING - Técnicas de Redação em RP 2022
PPT
Storytelling no Jornalismo - Jornalismo Multimídia 2022
PPT
HTML - Webdesign - 2022
PPT
Imagens para Redes Sociais - Computação Gráfica 2022
PPT
Social Ads - Projeto Web - 2022
PPT
Vídeo Marketing - Comportamento Digital e Redes Sociais MBA 2022
PPT
Storytelling - Técnicas de Redação em RP 2022
PPT
Jornalismo em Vídeo - Jornalismo Multimídia 2022
PPT
Redes e Plataformas Digitais - Comportamento Digital e Redes Sociais 2022
PPT
Jornalismo nas Plataformas Digitais - Jornalismo Online 2022
PPT
Ambiente Digital - MBA Comportamento Digital e Redes Sociais- 2022
PPT
Escrevendo para o SEO - Técnicas de Redação em RP - 2022
PPT
COPYWRITING PARA JORNALISTAS - JORNALISMO MULTIMIDIA 2022
Expressa Esamc - Oficina de Reels e TikTOk
Redação para Gestão de Crise 1 - Técnicas de Redação em RP
HTML 1 e 2 - Webdesign - 2022
Redação para E-mail - Jornalismo Multimídia
Html e E-mail Marketing - Webdesign 2022
Anúncio para AT Revista - Computação Gráfica 2022
Marketing por Conteúdo - Projeto Web 2022
FERRAMENTAS DE STORYTELLING - Técnicas de Redação em RP 2022
Storytelling no Jornalismo - Jornalismo Multimídia 2022
HTML - Webdesign - 2022
Imagens para Redes Sociais - Computação Gráfica 2022
Social Ads - Projeto Web - 2022
Vídeo Marketing - Comportamento Digital e Redes Sociais MBA 2022
Storytelling - Técnicas de Redação em RP 2022
Jornalismo em Vídeo - Jornalismo Multimídia 2022
Redes e Plataformas Digitais - Comportamento Digital e Redes Sociais 2022
Jornalismo nas Plataformas Digitais - Jornalismo Online 2022
Ambiente Digital - MBA Comportamento Digital e Redes Sociais- 2022
Escrevendo para o SEO - Técnicas de Redação em RP - 2022
COPYWRITING PARA JORNALISTAS - JORNALISMO MULTIMIDIA 2022

Último (12)

PDF
Slide de apresentação - legendas africanas
PPT
inimigos-invisc3adveis.ppttttttttttttttttt
PPTX
A importância do Dom de profecia.pptx sdsfdgfvgghghgjbhghfgfgdvddf
PPTX
Teorias Motivacionais: Teoria das necessidades de Abrham Maslow
PPTX
volume currículoOOOOOOOOOOOOOOOOOOOO.pptx
PDF
CERTIFICADO BIOMAS DO BRASIL DIVERSIDADE, SABERES E TECNOLOGIAS SOCIAIS.pdf
PDF
lesoes cancerizaveis da boca educação e desenvolvimento.pdf
PPTX
Viajando pela literatura brasileira.pptx
PPTX
tema_8_-_discipulado_novo_tempo.pptxxxxxx
PPTX
Espatula Culinaria do futuro by inteligência artificial
PPTX
tema_7_-_discipulado_novo_tempo.pptxxxxxx
PPTX
ppt-licao04-jesusrestaurador.pptxxxxxxxxxx
Slide de apresentação - legendas africanas
inimigos-invisc3adveis.ppttttttttttttttttt
A importância do Dom de profecia.pptx sdsfdgfvgghghgjbhghfgfgdvddf
Teorias Motivacionais: Teoria das necessidades de Abrham Maslow
volume currículoOOOOOOOOOOOOOOOOOOOO.pptx
CERTIFICADO BIOMAS DO BRASIL DIVERSIDADE, SABERES E TECNOLOGIAS SOCIAIS.pdf
lesoes cancerizaveis da boca educação e desenvolvimento.pdf
Viajando pela literatura brasileira.pptx
tema_8_-_discipulado_novo_tempo.pptxxxxxx
Espatula Culinaria do futuro by inteligência artificial
tema_7_-_discipulado_novo_tempo.pptxxxxxx
ppt-licao04-jesusrestaurador.pptxxxxxxxxxx

UX User Xperience e UI User Interface no Webdesign - Aula 7 - 2020-01

  • 1. UX e UI Experiência e Interface aplicada no usuário WEBDESIGN 2020 – RENATO MELO
  • 2. “Você deve começar com a experiência do usuário e depois ir para a tecnologia”
  • 3. Usuário 60+ - Máquina de escrever e TV 40+ - Computador, internet e DVD 22+ - Notebook, Tablet e smartphones 8+ - Tablet e smartphones
  • 5. INTERNET HOJE: INTEGRAÇÃO E CONVERSÃO Anúncios Sites Institucionais SEO Mobile Redes Sociais Geo localização Conversão No PDV Logística
  • 7. 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.
  • 9. 5 passos do UX Estratégia – Escopo – Estrutura – Wireframe – Visual Design
  • 10. Briefing Pergunte, pergunte e pergunte até esgotar suas dúvidas. O site deve converter em vendas!
  • 12. #1 – Refaça todos os passos Simule e trace com sua equipe todos os passos que um usuário pode percorrer no seu site.
  • 13. #2 – Trace metas concretas O problema nunca será número de visitas! Trace metas como aumentar número de leads, contatos, orçamentos...
  • 14. Design Responsivo e Disposição: Passou de 500 inscrições para 1200 por mês
  • 15. 35% da operação do Call Center existia apenas para responder uma demanda: Onde encontrar a 2ª via do boleto.
  • 16. #3 – Faça um protótipo Antes de ir ao ar, faça um protótipo para ver se todo seu projeto caminhou bem
  • 17. #4 – Métricas Avalie pouco a pouco seus resultados via Google Analytics
  • 18. #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.
  • 20. 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
  • 22. #1 – Agrupar Agrupe funções similares ao invés de fragmentá-las.
  • 23. #2 – Destaque a conversão Coloque cores e destaque somente a conversão. Tome cuidado para não confundir e distrair seu usuário.
  • 24. #3 – Menos é mais Coloque nos campos de formulário somente o necessário.
  • 25. #4 – Excesso de links Só use em caso de todos levarem ao mesmo local. Tome cuidado em distrair demais seu usuário.
  • 26. #5 – Call to Action? Troque “Cadastre-se agora” por “Quero receber as melhores ofertas”, por exemplo
  • 27. LEMBRE-SE: O FOCO É NAS PESSOAS!
  • 28. CHECKLIST GERAL  TAMANHO DA TELA  CONECTIVIDADE  OBJETIVOS DO USUÁRIO  AMBIENTES DO USUÁRIO  CAPACIDADE DO USUÁRIO
  • 29. CHECKLIST DE UM SITE  COMO SERÁ DIVULGADO?  COMO ELE É ENCONTRADO?  TEM INTEGRAÇÃO COM REDE SOCIAL?  É VISUALIZADO EM QUALQUER TELA?  QUAL E COMO SERÁ FEITA SUA CONVERSÃO?  O USUÁRIO ENTENDE SEU SITE?
  • 30. EXPERIÊNCIA NO MC DONALDS: FILA – ATENDIMENTO PESSOAL – LANÇAMENTO DE DADOS NO SISTEMA – PAGAMENTO - COZINHA - ENTREGA
  • 31. 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?
  • 32. UX e UI Experiência e Interface aplicada no usuário WEBDESIGN 2020 – RENATO MELO