UX para desenvolvedores
-
Upload
pedro-marques -
Category
Design
-
view
752 -
download
1
description
Transcript of UX para desenvolvedores
![Page 1: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/1.jpg)
Ux designfor developers
Pedro MarquesDesigner de Interfaces @ Plan B Comunicação
@pedro_designer | [email protected]
sábado, 22 de fevereiro de 14
![Page 2: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/2.jpg)
QUEM SOU EU?UI DesignerUX DesignerUsuárioJamal
sábado, 22 de fevereiro de 14
![Page 3: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/3.jpg)
Quero criar um produtoO que é preciso?
sábado, 22 de fevereiro de 14
![Page 4: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/4.jpg)
O QUE É UX?
“Nossa é difícil usar isso”
“Que app lento”
“Má quê esso?”
sábado, 22 de fevereiro de 14
![Page 5: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/5.jpg)
Usuário não é burro
Mas o que para você é obvio para ele pode ser complexo
sábado, 22 de fevereiro de 14
![Page 6: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/6.jpg)
O QUE É UX?
Arquitetura
Design de interação
Design Visual
sábado, 22 de fevereiro de 14
![Page 7: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/7.jpg)
O QUE É UX?
Arquitetura
Design de interação
Design Visual
PERFORMANCE
sábado, 22 de fevereiro de 14
![Page 8: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/8.jpg)
DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS DEVELOPERS
sábado, 22 de fevereiro de 14
![Page 9: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/9.jpg)
‣ Seu código guia a experiência
‣ UI != UX
‣ Bom UX gera momentos agradáveis
‣ Você dá vida ao Design
sábado, 22 de fevereiro de 14
![Page 10: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/10.jpg)
Mas e na prática?Como isso afeta o usuário?
sábado, 22 de fevereiro de 14
![Page 11: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/11.jpg)
Vamos criar um casoUma Rede Social
sábado, 22 de fevereiro de 14
![Page 12: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/12.jpg)
sábado, 22 de fevereiro de 14
![Page 13: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/13.jpg)
#partiu Dev In Company na Plan B Comunicação! \o/
sábado, 22 de fevereiro de 14
![Page 14: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/14.jpg)
5 segundos
5 vezes/dia
22 dias/mês
264 dias/ano
sábado, 22 de fevereiro de 14
![Page 15: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/15.jpg)
PessoasEmoções
sábado, 22 de fevereiro de 14
![Page 16: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/16.jpg)
PessoasEmoções
Experiências
sábado, 22 de fevereiro de 14
![Page 17: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/17.jpg)
20 000por dia
sábado, 22 de fevereiro de 14
![Page 18: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/18.jpg)
:) ou ;(
sábado, 22 de fevereiro de 14
![Page 19: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/19.jpg)
Enchant me.
Simplify my life.
Make me amazing.
Android Team
sábado, 22 de fevereiro de 14
![Page 20: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/20.jpg)
Boas Práticas
sábado, 22 de fevereiro de 14
![Page 21: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/21.jpg)
Boas Práticas
‣ Melhoria continua
‣ Feedback de erro/confirmação
‣ Animações
‣ Considere a conexão
‣ Carregamento em fila
sábado, 22 de fevereiro de 14
![Page 22: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/22.jpg)
sábado, 22 de fevereiro de 14
![Page 23: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/23.jpg)
sábado, 22 de fevereiro de 14
![Page 24: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/24.jpg)
sábado, 22 de fevereiro de 14
![Page 25: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/25.jpg)
sábado, 22 de fevereiro de 14
![Page 26: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/26.jpg)
Boas Práticas
‣ Melhoria continua
‣ Feedback de erro/confirmação
‣ Animações
‣ Considere a conexão
‣ Carregamento em fila
sábado, 22 de fevereiro de 14
![Page 27: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/27.jpg)
sábado, 22 de fevereiro de 14
![Page 28: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/28.jpg)
sábado, 22 de fevereiro de 14
![Page 29: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/29.jpg)
sábado, 22 de fevereiro de 14
![Page 30: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/30.jpg)
sábado, 22 de fevereiro de 14
![Page 31: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/31.jpg)
Boas Práticas
‣ Melhoria continua
‣ Feedback de erro/confirmação
‣ Animações
‣ Considere a conexão
‣ Carregamento em fila
sábado, 22 de fevereiro de 14
![Page 32: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/32.jpg)
Boas Práticas
‣ Faça sua aplicação consistente
‣ Sempre informe cada passo do usuário
‣ Deixe o usuário no controle
‣ Use sua própria aplicação
‣ Não confie no seu código.
sábado, 22 de fevereiro de 14
![Page 33: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/33.jpg)
Lean UXMetodologia ágil de UX
Conceito > Protótipo > Validação Interna > Teste externo > Aprender com
o comportamento > Repetir o processo
sábado, 22 de fevereiro de 14
![Page 34: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/34.jpg)
Lean UX Metodologia ágil de UX
•Enquadre uma visão do problema com toda a equipe.
•Compartilhe sua ideias o quanto antes com a sua equipe;
•Crie o MVP
•Incorpore a voz do cliente durante todo o ciclo do projeto;
•Misture o Lean UX com as Sprints do Scrum
sábado, 22 de fevereiro de 14
![Page 35: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/35.jpg)
CasesEu vi e vivi.
sábado, 22 de fevereiro de 14
![Page 36: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/36.jpg)
Cases Eu vi e vivi.
OTC 2013Petrobras
Páginas internas com cliques em pontos específicos para rolar o conteúdo pois o projeto era responsivo e seria exibido em painéis touch no evento.
Animações de infográficos que ajudam também no tempo de carregamento da página
sábado, 22 de fevereiro de 14
![Page 37: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/37.jpg)
Cases Eu vi e vivi.
Petrobras ConhecerPetrobras
Revista digital Híbrida construída em HTML5 + CSS3 + JavaScript
Portal com mesmo conteúdo, porém responsivo.
sábado, 22 de fevereiro de 14
![Page 38: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/38.jpg)
#euindico
http://littlebigdetails.com/
http://houseofbuttons.tumblr.com/
http://ui-animations.tumblr.com/
sábado, 22 de fevereiro de 14
![Page 39: UX para desenvolvedores](https://reader036.fdocuments.net/reader036/viewer/2022062514/558a2d25d8b42ac4328b46d5/html5/thumbnails/39.jpg)
Valeu!que a força esteja com vocês.
Pedro MarquesDesigner de Interfaces @ Plan B Comunicação
@pedro_designer | [email protected]
sábado, 22 de fevereiro de 14