UX e UI
Experiência e Interface aplicada no usuário
WEBDESIGN 2021 – RENATO MELO
A palavra do momento:
EXPERIÊNCIA
“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
JUNHO DE 2020
2019: Nova modalidade
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 de aplicação
#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?
Entregue via e-mail:
renatomelo85@gmail.com
UX e UI
Experiência e Interface aplicada no usuário
WEBDESIGN 2021 – RENATO MELO

UX e UI - Experiência e Interface aplicada no usuário

  • 1.
    UX e UI Experiênciae Interface aplicada no usuário WEBDESIGN 2021 – RENATO MELO
  • 2.
    A palavra domomento: EXPERIÊNCIA
  • 3.
    “Você deve começar coma experiência do usuário e depois ir para a tecnologia”
  • 4.
    Usuário 60+ - Máquinade escrever e TV 40+ - Computador, internet e DVD 22+ - Notebook, Tablet e smartphones 8+ - Tablet e smartphones
  • 5.
  • 6.
    INTERNET HOJE: INTEGRAÇÃO ECONVERSÃO Anúncios Sites Institucionais SEO Mobile Redes Sociais Geo localização Conversão No PDV Logística
  • 7.
  • 8.
  • 9.
  • 10.
    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.
  • 11.
  • 12.
    5 passos doUX Estratégia – Escopo – Estrutura – Wireframe – Visual Design
  • 13.
    Briefing Pergunte, pergunte epergunte até esgotar suas dúvidas. O site deve converter em vendas!
  • 14.
  • 15.
    #1 – Refaçatodos os passos Simule e trace com sua equipe todos os passos que um usuário pode percorrer no seu site.
  • 16.
    #2 – Tracemetas concretas O problema nunca será número de visitas! Trace metas como aumentar número de leads, contatos, orçamentos...
  • 17.
    Design Responsivo e Disposição: Passou de500 inscrições para 1200 por mês
  • 18.
    35% da operação doCall Center existia apenas para responder uma demanda: Onde encontrar a 2ª via do boleto.
  • 19.
    #3 – Façaum protótipo Antes de ir ao ar, faça um protótipo para ver se todo seu projeto caminhou bem
  • 20.
    #4 – Métricas Avaliepouco a pouco seus resultados via Google Analytics
  • 21.
    #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.
  • 22.
  • 23.
    UI é oprocesso 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
  • 24.
  • 25.
    #1 – Agrupar Agrupefunções similares ao invés de fragmentá-las.
  • 26.
    #2 – Destaquea conversão Coloque cores e destaque somente a conversão. Tome cuidado para não confundir e distrair seu usuário.
  • 27.
    #3 – Menosé mais Coloque nos campos de formulário somente o necessário.
  • 28.
    #4 – Excessode links Só use em caso de todos levarem ao mesmo local. Tome cuidado em distrair demais seu usuário.
  • 29.
    #5 – Callto Action? Troque “Cadastre-se agora” por “Quero receber as melhores ofertas”, por exemplo
  • 30.
  • 31.
    CHECKLIST GERAL  TAMANHO DATELA  CONECTIVIDADE  OBJETIVOS DO USUÁRIO  AMBIENTES DO USUÁRIO  CAPACIDADE DO USUÁRIO
  • 32.
    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?
  • 33.
    EXPERIÊNCIA NO MCDONALDS: FILA – ATENDIMENTO PESSOAL – LANÇAMENTO DE DADOS NO SISTEMA – PAGAMENTO - COZINHA - ENTREGA
  • 34.
    ACHE UM SITEDE 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
  • 35.
    UX e UI Experiênciae Interface aplicada no usuário WEBDESIGN 2021 – RENATO MELO