UX e UI - Experiência e Interface do Usuário

49
UX e UI Injeção de personalidade no seu branding RENATO MELO - 2016

Transcript of UX e UI - Experiência e Interface do Usuário

Page 1: UX e UI - Experiência e Interface do Usuário

UX e UIInjeção de personalidade no seu brandingRENATO MELO - 2016

Page 2: UX e UI - Experiência e Interface do Usuário

“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

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

Novas Gerações vão surgir cada vez mais rápido

Page 5: UX e UI - Experiência e Interface do Usuário

INTERNET ONTEM

Anúncios Sites Institucionais

Page 6: UX e UI - Experiência e Interface do Usuário

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

O CONCEITO

E-BRANDIN

G

UIUX

Page 8: UX e UI - Experiência e Interface do Usuário

UXExperiência do Usuário

Page 9: UX e UI - Experiência e Interface 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.

Page 10: UX e UI - Experiência e Interface do Usuário

UX Design

Conteúdo

Page 11: UX e UI - Experiência e Interface do Usuário

5 passos do UXEstratégia – Escopo – Estrutura –

Wireframe – Visual Design

Page 12: UX e UI - Experiência e Interface do Usuário

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

UXOs 7 mitos e erros mais comuns

Page 14: UX e UI - Experiência e Interface do Usuário

User Experience é diferente de User

Interface

Page 15: UX e UI - Experiência e Interface do Usuário

Você = Seu usuário

Page 16: UX e UI - Experiência e Interface do Usuário

Usuário sempre sabe o que

quer

Page 17: UX e UI - Experiência e Interface do Usuário

UX termina quando o usuário sai do site

Page 18: UX e UI - Experiência e Interface do Usuário

Sua solução sempre vai funcionar

Page 19: UX e UI - Experiência e Interface do Usuário

Eu li uma solução de um guruaqui na internet e...

Page 20: UX e UI - Experiência e Interface do Usuário

Isso é impossível de fazer!

Page 21: UX e UI - Experiência e Interface do Usuário

UXNa prática

Page 22: UX e UI - Experiência e Interface do Usuário

#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

#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

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

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

#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

#4 – MétricasAvalie pouco a pouco seus resultados

via Google Analytics

Page 28: UX e UI - Experiência e Interface do Usuário

#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

UIInterface do Usuário

Page 30: UX e UI - Experiência e 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

Page 31: UX e UI - Experiência e Interface do Usuário

UXOs 4 mitos e erros mais comuns

Page 32: UX e UI - Experiência e Interface do Usuário

User Interface é diferente de design

Page 33: UX e UI - Experiência e Interface do Usuário

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

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

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

UIIdeias para utilizar

Page 37: UX e UI - Experiência e Interface do Usuário

#1 – AgruparAgrupe funções similares ao invés de

fragmentá-las.

Page 38: UX e UI - Experiência e Interface do Usuário

#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

#3 – Menos é maisColoque nos campos de formulário

somente o necessário.

Page 40: UX e UI - Experiência e Interface do Usuário

#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

#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

Design: A New EraTendências e presente

Page 43: UX e UI - Experiência e Interface do Usuário

Mobile First!A maioria das visitas é por lá.

Page 44: UX e UI - Experiência e Interface do Usuário

Minimalismo e Flat Design

Page 45: UX e UI - Experiência e Interface do Usuário

Big Typography

Page 46: UX e UI - Experiência e Interface do Usuário

Assim como sliders grandes

Page 47: UX e UI - Experiência e Interface do Usuário

Infográficos

Page 48: UX e UI - Experiência e Interface do Usuário

One page

Page 49: UX e UI - Experiência e Interface do Usuário

FACEBOOK.COM/RENATOMELOMKT

[email protected]