Top Banner
UX / UI para programadores por Mônica Mesquita
68

UX UI para Programadores

Apr 09, 2017

Download

Technology

Monica Mesquita
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: UX UI para Programadores

UX / UI para programadores

por Mônica Mesquita

Page 2: UX UI para Programadores

Mônica Mesquita▪Sou Publicitária

▪UI/UX Designer

▪Youtuber nas horas vagas

▪Fã da Apple

▪Palmeirense

▪Cristã

Page 3: UX UI para Programadores
Page 4: UX UI para Programadores

Vamos começar

Page 5: UX UI para Programadores

O que é

UX?User / Usuário

eXperience / Experiência

Page 6: UX UI para Programadores

UsuárioÉ a pessoa que usa determinado produto ou serviço. 

Se ele usa, ele é usuário!

Page 7: UX UI para Programadores
Page 8: UX UI para Programadores

ExperiênciaQualquer conhecimento obtido por meio dos sentidos. {google}

Algum sentimento bom ou ruim ao fazer algo.

Page 9: UX UI para Programadores
Page 10: UX UI para Programadores
Page 11: UX UI para Programadores
Page 12: UX UI para Programadores
Page 13: UX UI para Programadores

E o que é

UX Design?

Page 14: UX UI para Programadores

“O UX Design é a área que realiza pesquisas e testes

com pessoas para saber a MANEIRA IDEAL para criar

interfaces fáceis e inovadoras.”

Page 15: UX UI para Programadores

IMPORTANTE!Não podemos projetar a experiência do usuário.

Nós podemos projetar PARA a experiência do usuário.

Page 16: UX UI para Programadores

Quem faz Parte?

Page 17: UX UI para Programadores

Design CENTRADO no Usuário

é o processo onde mantemos o

foco nas necessidades, desejos

e limitações dos usuários

durante todo o projeto.

Page 18: UX UI para Programadores

Toda boa experiênciadeve atender a 3 pontos:

Page 19: UX UI para Programadores

Utilidadepreciso usar?

Page 20: UX UI para Programadores

Usabilidadeconsigo usar?

Page 21: UX UI para Programadores

Desejabilidadequero usar?

Page 22: UX UI para Programadores

Lembre-se:

“O papel do UX Design não é apenas em criar boas experiências,

mas sobre evitar experiências ruins.”Luiz Mizutani

Page 23: UX UI para Programadores
Page 24: UX UI para Programadores

Diferença entre

UX e UI?Experiência do Usuário

Interface do Usuário

Page 25: UX UI para Programadores

VAMOS ENTENDER

Page 26: UX UI para Programadores
Page 27: UX UI para Programadores
Page 28: UX UI para Programadores
Page 29: UX UI para Programadores
Page 30: UX UI para Programadores

UX / UI NO MUNDO DIGITAL

Page 31: UX UI para Programadores
Page 32: UX UI para Programadores

O usuário não é burro!

O que para você é óbvio

para ele pode não ser

Page 33: UX UI para Programadores

“Para uma

experiência ideal

é preciso oferecer o

que o usuário deseja ou

procura de forma simples

e direta”Donald Norman {Apple 1990}

Page 34: UX UI para Programadores

PROGRAMADOR DESIGNERVS

Page 35: UX UI para Programadores

IT´S A CRUSH!

PROGRAMADOR DESIGNER

Page 36: UX UI para Programadores

DESIGN

NÃO É

TUDO

Page 37: UX UI para Programadores

Cliente Designer Team UX

Page 38: UX UI para Programadores

Não existe uma boa UI (interface)

sem um bom desenvolvimento

Page 39: UX UI para Programadores

EXEMPLOS!

Page 40: UX UI para Programadores

Software Financeiro

Page 41: UX UI para Programadores

Instagram

Page 42: UX UI para Programadores

TECNOLOGIA E USUÁRIO

Page 43: UX UI para Programadores

25% das pessoas estão conectadas em 4 ou mais devices por semana

Pew Research Center 2015

Page 44: UX UI para Programadores
Page 45: UX UI para Programadores

Fluxo de UX Design

Definição Pesquisa ProtótipoEstratégia TesteDesenvolvimento

Page 46: UX UI para Programadores

Definição Pesquisa ProtótipoEstratégia TesteDesenvolvimento

Fluxo de UX Design

Page 47: UX UI para Programadores

Protótipos e Testes

Page 48: UX UI para Programadores

Protótipo em Baixa Fidelidade

Page 49: UX UI para Programadores

Protótipo em Alta Fidelidade

Page 50: UX UI para Programadores

Teste com usuários

Page 51: UX UI para Programadores

O custo para consertar um erro num produto depois de lançado é 100 vezes maior que fazer isso durante o processo de desenvolvimento.

EEEITA!

Page 52: UX UI para Programadores

HORA DA PAUSA

Page 53: UX UI para Programadores

COMO EVITAR QUE SEU USUÁRIO SE FRUSTRE?

Page 54: UX UI para Programadores

Performance74% dos usuários

abandonam o site/aplicativo após esperar 5 segundos

para que ele carregue.

Funcionalidade

Se algo não funcionar, a experiência do usuário já

está comprometida.

Page 55: UX UI para Programadores

NÃO SE ESQUEÇA:

VOCÊ TEM 5 SEGUNDOS PARA CHAMAR A ATENÇÃO DO USUÁRIO

Carregue o que for útil primeiro

Page 56: UX UI para Programadores

Renderização Progressiva

Page 57: UX UI para Programadores

Indicadores de Progresso

Page 58: UX UI para Programadores

Converse com seu usuário

Page 59: UX UI para Programadores

Botões Inteligentes

Page 60: UX UI para Programadores

Utilize ícones

Page 61: UX UI para Programadores

Oi?

Page 62: UX UI para Programadores

Crie atalhos

Page 63: UX UI para Programadores

Tipografia

Nada é mais irritante para um usuário do que ter que se esforçar para ler algo de seu interesse.

OLA TUDO BOM?

Page 64: UX UI para Programadores

Essas dicas o ajudarão a não frustrar o usuário

"Little Pig"

Page 65: UX UI para Programadores

Com UX todo mundo fica feliz!

Page 66: UX UI para Programadores

Mão na massa!Desenhar o protótipo (wireframe) de um sistema de curso online

Telas exigidas: 1) Login 2) Home 3) Assistir ao curso selecionado.

Dicas para o conteúdo: Meus vídeos, Últimos assistidos, Últimos adicionados, Recomendado, Mostrar avaliação do vídeo, Mostrar tempo de duração, Categorias: Iniciante ou Intermediário, Adicionar comentários e notas.

Page 67: UX UI para Programadores

Livros

Page 68: UX UI para Programadores

Obrigada!→ Facebook: momesquita

→ Twitter: momesquita

→ Snapchat: moonicamesquita

→ Instagram: momesquita_