SlideShare une entreprise Scribd logo
1  sur  38
UX
User Experience
no Webdesign
RENATO MELO - 2014
“Você deve
começar com
a experiência
do usuário e
depois ir para a
tecnologia”
O USUÁRIO NÃO QUER
SABER DE TECNOLOGIA
O USUÁRIO NÃO
QUER ESPERAR!
75% DOS USUÁRIOS NÃO COMPRAM
QUANDO UM SITE TEM UM PROBLEMA DE:
CONGELAMENTO
CRASH
MUITO TEMPO DE CARREGAMENTO
A CADA 100 MILISSEGUNDOS DE TEMPO DE
CARREGAMENTO DE PÁGINA REDUZ 1% DE
VENDAS NA AMAZON.
AMAZON
AO AUMENTAR O CARREGAMENTO DO SITE
DE 0.4 PARA 0.9 SEGUNDOS, PERDEU 20% DA
RECEITA EM PUBLICIDADE,
GOOGLE
Agradável
Vale a pena
compartilhar
Conveniente
Funciona
exatamente como
você pensa
INTERNET ONTEM
Anúncios Sites Institucionais
INTERNET HOJE
Anúncios Sites Institucionais SEO Mobile
Redes
Sociais
Geo localização Conversão
No PDV
Logística
USUÁRIO TEM QUE POSSUIR
UMA EXPERIÊNCIA POSITIVA
EM TODOS OS CANAIS
UX TEM QUE SER
PENSADO EM TODOS
OS NÍVEIS:
PLANEJAMENTO
DESIGN
FRONT-END
BACK-END
O QUE PRECISA
SER PENSADO
CONTEXTO
USUÁRIOCONTEÚDO
CHECKLIST DO UX
 TAMANHO DA TELA
 CONECTIVIDADE
 OBJETIVOS DO USUÁRIO
 AMBIENTES DO USUÁRIO
 CAPACIDADE DO USUÁRIO
• Interface para todas as
telas
• Todas as Conexões
(Desde Edge à Fibra
Ótica)
• Todos os navegadores
• Qualquer ambiente
• Qualquer nível de
conhecimento do
usuário
LEMBRE-SE: O
FOCO É NAS
PESSOAS!
EXEMPLOS DA
CLASSE
Matheus:
“Músicas de violão e guitarra são iguais. Não
atualizam músicas com letras erradas”.
Lindsey:
“Ao fazer uma busca com erro de digitação,
o site não encontra o produto”.
Leonardo:
“Vários erros como: produtos sem fotos,
categorias erradas e sem conversão
de dólar para real”.
Karla:
“Site confuso, lento e você precisa deixar
várias abas abertas para visualizar
o conteúdo”.
EXPERIÊNCIA
NO CELULAR
NÃO ESTAR NO
MOBILE É COMO
FECHAR SUA LOJA
UMA VEZ POR
SEMANA.
DETALHES
NÃO
CONFUNDA O
USUÁRIO!!!
O QUE PRECISA
TER?
PÃO
MAIONESE
TOMATE
ALFACE
MUSSARELA
CHEDDAR
CARNE
OVO
ONION RINGS
BACON
KETCHUP
MOSTARDA
O HAMBURGUER
O QUE PRECISA
TER?
PÃO
CARNE
O HAMBURGUER
BELEZA X
PRATICIDADE
VALIDAÇÃO
DA IDEIA
A ARTE DA VALIDAÇÃO:
PIADAS ERAM CONTADAS ATÉ
PARA AS FAXINEIRAS
“Aprenda com os
comentários.
Muitas vezes eles
são mais criativos
do que o
próprio post”
A MAIORIA É
BURRA
FEZ TESTE?
LANÇOU BETA?
FEZ UM PROTÓTIPO?
ENTÃO O BURRO
É VOCÊ!
LEPOLEPONOTWITTER
MODELO ANTIGO
IDEIA
DESEN
VOLVI
MENTO
LANÇA
MENTO
MAIS CHANCE DE ERRO
SEM APRENDIZADO
SEM CONTINUIDADE
MODELO NOVO
IDEIA
DESEN
VOLVI
MENTO
LANÇA
MENTO
VALIDA
ÇÃO
ITERA
ÇÃO
MENOS CHANCE DE ERRO
APRENDIZADO
CONTINUIDADE
NÃO SE PODE
MELHORAR O QUE
NÃO SE MEDE
FACEBOOK.COM/
RENATOMELOMKT
renato@iskadigital.com.br

Contenu connexe

Similaire à O UX no webdesign

UX - USER EXPERIENCE
UX - USER EXPERIENCEUX - USER EXPERIENCE
UX - USER EXPERIENCERenato Melo
 
Ux e ui no webdesign - 2022
Ux e ui no webdesign - 2022Ux e ui no webdesign - 2022
Ux e ui no webdesign - 2022Renato Melo
 
UX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioUX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioRenato Melo
 
Performance em SEO - técnicas para aumentar a conversão
Performance em SEO - técnicas para aumentar a conversãoPerformance em SEO - técnicas para aumentar a conversão
Performance em SEO - técnicas para aumentar a conversãoE-Commerce Brasil
 
Insight-Driven UX - Como direcionar melhor seu projeto de UX com Métricas
Insight-Driven UX - Como direcionar melhor seu projeto de UX com MétricasInsight-Driven UX - Como direcionar melhor seu projeto de UX com Métricas
Insight-Driven UX - Como direcionar melhor seu projeto de UX com MétricasLuis Felipe Fernandes
 
Como criar um site inteligente e que ajuda sua empresa a vender?
 Como criar um site inteligente e que ajuda sua empresa a vender? Como criar um site inteligente e que ajuda sua empresa a vender?
Como criar um site inteligente e que ajuda sua empresa a vender?Silvio César de Oliveira
 
[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...
[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...
[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...E-Commerce Brasil
 
Apresentação da wend tecnologia como alcançar o meu cliente (1)
Apresentação da wend tecnologia como alcançar o meu cliente (1)Apresentação da wend tecnologia como alcançar o meu cliente (1)
Apresentação da wend tecnologia como alcançar o meu cliente (1)Juliana Ribeiro
 
Webdesign revisãao 2018-02
Webdesign revisãao 2018-02Webdesign revisãao 2018-02
Webdesign revisãao 2018-02Renato Melo
 
Revisão Webdesign
Revisão WebdesignRevisão Webdesign
Revisão WebdesignRenato Melo
 
Webdesign Revisão 2019-01
Webdesign Revisão 2019-01Webdesign Revisão 2019-01
Webdesign Revisão 2019-01Renato Melo
 
Apresentação Everton Lima
Apresentação Everton LimaApresentação Everton Lima
Apresentação Everton LimaEverton Lima
 
Evitando os-erros-de-hospedagem-v2
Evitando os-erros-de-hospedagem-v2Evitando os-erros-de-hospedagem-v2
Evitando os-erros-de-hospedagem-v2TomSlick
 
PROJETO WEB - RESUMO
PROJETO WEB - RESUMOPROJETO WEB - RESUMO
PROJETO WEB - RESUMORenato Melo
 
Ads&Performance - Performance em SEO - técnicas para aumentar a conversão
Ads&Performance - Performance em SEO - técnicas para aumentar a conversãoAds&Performance - Performance em SEO - técnicas para aumentar a conversão
Ads&Performance - Performance em SEO - técnicas para aumentar a conversãoE-Commerce Brasil
 
Congresso E-Commerce Brasil ADS&PERFORMANCE 2018 - Victor Rossini Magalhaes
Congresso E-Commerce Brasil ADS&PERFORMANCE 2018 - Victor Rossini MagalhaesCongresso E-Commerce Brasil ADS&PERFORMANCE 2018 - Victor Rossini Magalhaes
Congresso E-Commerce Brasil ADS&PERFORMANCE 2018 - Victor Rossini MagalhaesVictor Rossini Magalhães
 
Site responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagensSite responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagensMarconi Pacheco
 
[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?
[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?
[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?Rafael Burity
 

Similaire à O UX no webdesign (20)

UX - USER EXPERIENCE
UX - USER EXPERIENCEUX - USER EXPERIENCE
UX - USER EXPERIENCE
 
Ux e ui no webdesign - 2022
Ux e ui no webdesign - 2022Ux e ui no webdesign - 2022
Ux e ui no webdesign - 2022
 
UX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioUX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do Usuário
 
Performance em SEO - técnicas para aumentar a conversão
Performance em SEO - técnicas para aumentar a conversãoPerformance em SEO - técnicas para aumentar a conversão
Performance em SEO - técnicas para aumentar a conversão
 
Insight-Driven UX - Como direcionar melhor seu projeto de UX com Métricas
Insight-Driven UX - Como direcionar melhor seu projeto de UX com MétricasInsight-Driven UX - Como direcionar melhor seu projeto de UX com Métricas
Insight-Driven UX - Como direcionar melhor seu projeto de UX com Métricas
 
Como criar um site inteligente e que ajuda sua empresa a vender?
 Como criar um site inteligente e que ajuda sua empresa a vender? Como criar um site inteligente e que ajuda sua empresa a vender?
Como criar um site inteligente e que ajuda sua empresa a vender?
 
[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...
[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...
[Grocery & Drinks| Congresso do E-Commerce] Como o PWA pode ajudar na experiê...
 
Apresentação da wend tecnologia como alcançar o meu cliente (1)
Apresentação da wend tecnologia como alcançar o meu cliente (1)Apresentação da wend tecnologia como alcançar o meu cliente (1)
Apresentação da wend tecnologia como alcançar o meu cliente (1)
 
Webdesign revisãao 2018-02
Webdesign revisãao 2018-02Webdesign revisãao 2018-02
Webdesign revisãao 2018-02
 
Revisão Webdesign
Revisão WebdesignRevisão Webdesign
Revisão Webdesign
 
Webdesign Revisão 2019-01
Webdesign Revisão 2019-01Webdesign Revisão 2019-01
Webdesign Revisão 2019-01
 
Apresentacao
ApresentacaoApresentacao
Apresentacao
 
Apresentação Everton Lima
Apresentação Everton LimaApresentação Everton Lima
Apresentação Everton Lima
 
O que é Web Designer?
O que é Web Designer?O que é Web Designer?
O que é Web Designer?
 
Evitando os-erros-de-hospedagem-v2
Evitando os-erros-de-hospedagem-v2Evitando os-erros-de-hospedagem-v2
Evitando os-erros-de-hospedagem-v2
 
PROJETO WEB - RESUMO
PROJETO WEB - RESUMOPROJETO WEB - RESUMO
PROJETO WEB - RESUMO
 
Ads&Performance - Performance em SEO - técnicas para aumentar a conversão
Ads&Performance - Performance em SEO - técnicas para aumentar a conversãoAds&Performance - Performance em SEO - técnicas para aumentar a conversão
Ads&Performance - Performance em SEO - técnicas para aumentar a conversão
 
Congresso E-Commerce Brasil ADS&PERFORMANCE 2018 - Victor Rossini Magalhaes
Congresso E-Commerce Brasil ADS&PERFORMANCE 2018 - Victor Rossini MagalhaesCongresso E-Commerce Brasil ADS&PERFORMANCE 2018 - Victor Rossini Magalhaes
Congresso E-Commerce Brasil ADS&PERFORMANCE 2018 - Victor Rossini Magalhaes
 
Site responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagensSite responsivo vantagens e desvantagens
Site responsivo vantagens e desvantagens
 
[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?
[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?
[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?
 

Plus de Renato Melo

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

Plus de Renato Melo (20)

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

O UX no webdesign