Ao deixar o seu tablet na horizonal, aquele app mostra uma solução bem bacana de navegação. E aquele site, que permite drag and drop? Bem legal de usar! Como criar uma interface apaixonante, então? Os aplicativos mais legais do seu celular não possuem navegação “clássica”, tela a tela. Além de definir a estrutura das informações, nosso papel é cada vez mais co-criativo e, para que tudo funcione, nossa interação com visual designers e developers é essencial para garantir que os produtos sejam mais que funcionais.
3. Oi,
• Trabalho na “grande área de UX” há ~8 anos
• Sou formada em design, mas comecei trabalhando com
usabilidade
• Já fui agência, cliente e consultoria
• Continuo aprendendo
• E me apaixonando pelo que faço
4. Cristina, 27 anos. Viciada no
Antonio, 57 anos. Fica o dia
Facebook. Apesar da
todo comprando peças de bike
pãodurice, comprou um iPhone
no eBay, pagando com Paypal
e não desgruda dele.
Paola, 55 anos. Fã do Dance
Central, no Kinect. Adora
Katylene.com
5. Hoje eu trabalho na Telefonica | Vivo. Não, eu não sou
atendente de telemarketing. E eu não tenho nada a ver com o
Speedy –não me xinguem.
A área de UX da TEF tem hoje 7 meses. E nosso desafio, claro, é
fazer coisas legais. Lançar produtos que as pessoas curtam.
E isso é difícil pra caramba.
9. aço wireframe, aplico teste
de usabilidade, crio matriz de
conteúdo, faço vocabulário
controlado, modero card
sorting, monto protótipo em
papel, crio animações no
power point, arraso nos
painéis dinâmicos do axure
11. Amadurece ndo
• Antes, eramos todos iguais e tentávamos fazer tudo.
• Como qualquer coisa que é muito nova, estamos
amadurecendo, nos profissionalizando e especializando –
apesar da área naturalmente generalista.
• De uma forma bem simplista, hoje posso falar que os meus
colegas de profissão se dividiram em “categorias”.
13. Pesquisador
• Estuda o comportamento do usuário. Conduz pesquisas
em laboratório, faz shadowing, diários de uso etc.
http://www.u-sentric.com/modulefiles/pages/421_1246010512_stationair-usability-lab.jpg
14. Designer de
interação
• Define interações. Cria a navegação do site, definindo o
que acontece em cada tela.
http://media.smashingmagazine.com/wp-content/uploads/2011/12/IMG_1392.jpg
15. Gerente de
UX
• Coordena. Lidera AIs, pesquisadores e designers de
interação. Orienta e aprova as entregas.
http://www.stevepratt.com/wp-content/uploads/2008/11/leaderpegs.jpg
16. Desgarrados
da UX.br
• Visual Designer: geralmente está na equipe de criação, na agência.
É difícil encontrar nas consultorias.
• Redator: apesar de importante, nunca é exclusivo para UX.
Geralmente fica na publicidade.
• Prototyper: cria as animações e transições. Bem raro.
http://www.userfocus.co.uk/articles/how-to-design-like-Leonardo-da-Vinci.html
21. Arquiteto
-Aprovou o escopo e o
conteúdo com o cliente.
- Definiu a estrutura.
- Aprovou a estrutura com o
cliente.
22. Criação
- O cliente achou a primeira proposta careta e pediu uma coisa mais
diferente e ousada.
- Entre 21 idas e vindas, chegaram nessa versão. O wireframe caiu
no esquecimento.
23. Desenvolvi-
mento
- Implementou o que deu pra fazer.
-O prazo estourou e tiveram 1
semana pra desenvolver tudo.
- A navegação mudou, não deu
tempo de seguir.
- Wireframe? Tinha isso?!
- Não vai dar tempo de fazer essas
animações todas no código, vamos
botar um flash.
- Vai demorar uns 68 segundos pra
abrir o site, beleza?
- Ninguém teve tempo de testar.
34. Designer de
interação
• Define interações. Cria a navegação do site, definindo o
que acontece em cada tela.
http://media.smashingmagazine.com/wp-content/uploads/2011/12/IMG_1392.jpg
42. Tenha os
objetivos claros.
Antes de começar a pensar na tela:
Conheça as necessidades do seu
usuário, mesmo que seja
pesquisando mais sobre ele no
Google. Conheça a sua
concorrência! Tente elaborar um
modelo de negócios “express”, é um
excelente exercício. Saiba quais são
as possibilidades técnicas da(s)
plataforma(s) que você está
projetando.
44. Identifique o
que deve ser
incrível. E seja
incrível nisso.
Identifique a tela principal –acredite,
na maioria das vezes não é a home.
Ela tem que ser melhor do que todos
os seus concorrentes. Tente envolver
a equipe toda nesse processo:
desenvolvedores, stakeholders,
gerentes: todos devem contribuir.
Chegue em dois ou três caminhos
diferentes e depois evolua.
45. a b c
Timeline Timeline Timeline
Facebook Gowalla Path
53. Tente não
comprometer
seu tempo com
documentações
complexas.
Sabe aquele documento complicado,
cheio de detalhes e legendas? Pois
é, (quase) ninguém vai ler aquilo.
E, mesmo se ler, não vai sair
exatamente o que você quer. Gaste
seu tempo orientando e validando.
55. Seja visual.
Exemplifique.
Pesquise um
painel de
referências.
Participe do processo de criação
como um todo. Comunique-se
visualmente: nada pior que tentar
explicar uma imagem com mil
palavras. Use referências,
contribua.
56. Seja ainda mais
visual.
Pesquise!
Não se limite ao seu “nicho”.
Dificilmente dá pra contar com um
motion designer. Leve contribuições
de animações e transições de tela:
esses também são elementos chave
da experiência, principalmente
mobile.
57. Experimente.
Tem algum serviço novo?
Cadastre-se.
Baixe todos os aplicativos de graça –
e os pagos, se forem muito legais.
Use o celular velho da sua vó.
58. Não seja um
completo
leigo em
programação
Não é pra ser mais um
desenvolvedor, mas saber
entender o que eles dizem é
fundamental.
59. Teste (menos
com a sua
mãe, que é
coruja).
Testar nem sempre é complicado
e caro. Nielsen já dizia: com 5
usuários dá pra produzir bons
resultados. Aliando isso a índices
como Net Promoter Score, sua
análise fica ainda mais rica.
62. ser
)
er
s
ase ck
in m
t
on
/U
Us
en
li
s
oC
c ti
lick
es/
ue
em
Qu c t
isfa
et
ven
ery
t in
yC
eri
fin
cre
Tim
Sat
Dis
Qu
An
Re
Re
(in
50ms - - - - - -
200ms - - - -0.3% -0.4% 500
500ms - -0.6% -1.2% -1.0% -0.9% 1200
1000ms -0.7% -0.9% -2.8% -1.9% -1.6% 1900
2000ms -1.8% -2.1% -4.3% -4.4% -3.8% 3100
• 0.1s é o tempo máximo para dar a percepção de “instantaneidade”.
• Conforme o tempo de carregamento aumenta, os usuários vão deixando
de usar o serviço.
• Quanto mais o sistema demora para responder, maior o impacto na
atenção do usuário –ele também demora para responder.
• O usuário aprende rápido que o sistema está mais lento, mas demora
para retomar a percepção de rapidez.
http://velocityconf.com/velocity2009/public/schedule/detail/8523
63. A interação
deve fluir, sem
engasgos.
Faça com que o usuário percorra
fluxos de maneira fluida e a
experiência trará felicidade.
64.
65. Mire algo
viciante, como
um jogo
Ok, gamification é buzzword, mas
de site de banco a fazendinha,
sua interface tem que “prender” o
usuário e dar a experiência que
ele precisa: lúdica ou informativa.
69. Pense no
modelo
mental
Nem sempre o usuário vai
navegar usando a forma mais
lógica.
http://www.cred.columbia.edu/guide/images/illo_mental_model.gif
Comecei meio que por acaso: estava fazendo design, fiz uma iniciação científica que envolvia ergonomia e design de informação –mais especificamente, sinalização de ambientes publicos. Aí, um amigo da faculdade comentou que uma consultoria precisava de alguém pra diagramar uns relatórios. Fui lá conhecer. E assim comecei a trabalhar na Try, quando a empresa era bem pequena e quase ninguém falava de usabilidade no Brasil.Depois, virei arquiteta de informação. Já trabalhei em agência, já trabalhei em portal, já trabalhei em instituto de tecnologia, já trabalhei em fabricante de celular. Acho que já vi bastante coisa por aí, e tenho ficado cada vez mais maravilhada com as possibilidades do nosso trabalho.
Comecei meio que por acaso: estava fazendo design, fiz uma iniciação científica que envolvia ergonomia e design de informação –mais especificamente, sinalização de ambientes publicos. Aí, um amigo da faculdade comentou que uma consultoria precisava de alguém pra diagramar uns relatórios. Fui lá conhecer. E assim comecei a trabalhar na Try, quando a empresa era bem pequena e quase ninguém falava de usabilidade no Brasil.Depois, virei arquiteta de informação. Já trabalhei em agência, já trabalhei em portal, já trabalhei em instituto de tecnologia, já trabalhei em fabricante de celular. Acho que já vi bastante coisa por aí, e tenho ficado cada vez mais maravilhada com as possibilidades do nosso trabalho.
Sim, o meu pai, que mal ligava o computador há 1 ano, hoje compra no Ebay. Em inglês. E paga com Paypal.A minha mãe lê Katylene, usa o Facebook e adora ver videos no Youtube.E a minha irmã, que é uma das pessoas mais pão duras que eu conheço, gastou seu suado dinheirinho num iPhone e hoje não desgruda dele.
DISCLAIMEREssa apresentação leva em conta a experiência que tenho na área de UX. Nada aqui está escrito em pedraSe você discorda, a ideia é essa mesmo: promover o debateNão, eu juro que não vai ser polêmica
Comecei meio que por acaso: estava fazendo design, fiz uma iniciação científica que envolvia ergonomia e design de informação –mais especificamente, sinalização de ambientes publicos. Aí, um amigo da faculdade comentou que uma consultoria precisava de alguém pra diagramar uns relatórios. Fui lá conhecer. E assim comecei a trabalhar na Try, quando a empresa era bem pequena e quase ninguém falava de usabilidade no Brasil.Depois, virei arquiteta de informação. Já trabalhei em agência, já trabalhei em portal, já trabalhei em instituto de tecnologia, já trabalhei em fabricante de celular. Acho que já vi bastante coisa por aí, e tenho ficado cada vez mais maravilhada com as possibilidades do nosso trabalho.
Comecei meio que por acaso: estava fazendo design, fiz uma iniciação científica que envolvia ergonomia e design de informação –mais especificamente, sinalização de ambientes publicos. Aí, um amigo da faculdade comentou que uma consultoria precisava de alguém pra diagramar uns relatórios. Fui lá conhecer. E assim comecei a trabalhar na Try, quando a empresa era bem pequena e quase ninguém falava de usabilidade no Brasil.Depois, virei arquiteta de informação. Já trabalhei em agência, já trabalhei em portal, já trabalhei em instituto de tecnologia, já trabalhei em fabricante de celular. Acho que já vi bastante coisa por aí, e tenho ficado cada vez mais maravilhada com as possibilidades do nosso trabalho.
Comecei meio que por acaso: estava fazendo design, fiz uma iniciação científica que envolvia ergonomia e design de informação –mais especificamente, sinalização de ambientes publicos. Aí, um amigo da faculdade comentou que uma consultoria precisava de alguém pra diagramar uns relatórios. Fui lá conhecer. E assim comecei a trabalhar na Try, quando a empresa era bem pequena e quase ninguém falava de usabilidade no Brasil.Depois, virei arquiteta de informação. Já trabalhei em agência, já trabalhei em portal, já trabalhei em instituto de tecnologia, já trabalhei em fabricante de celular. Acho que já vi bastante coisa por aí, e tenho ficado cada vez mais maravilhada com as possibilidades do nosso trabalho.
Comecei meio que por acaso: estava fazendo design, fiz uma iniciação científica que envolvia ergonomia e design de informação –mais especificamente, sinalização de ambientes publicos. Aí, um amigo da faculdade comentou que uma consultoria precisava de alguém pra diagramar uns relatórios. Fui lá conhecer. E assim comecei a trabalhar na Try, quando a empresa era bem pequena e quase ninguém falava de usabilidade no Brasil.Depois, virei arquiteta de informação. Já trabalhei em agência, já trabalhei em portal, já trabalhei em instituto de tecnologia, já trabalhei em fabricante de celular. Acho que já vi bastante coisa por aí, e tenho ficado cada vez mais maravilhada com as possibilidades do nosso trabalho.
Comecei meio que por acaso: estava fazendo design, fiz uma iniciação científica que envolvia ergonomia e design de informação –mais especificamente, sinalização de ambientes publicos. Aí, um amigo da faculdade comentou que uma consultoria precisava de alguém pra diagramar uns relatórios. Fui lá conhecer. E assim comecei a trabalhar na Try, quando a empresa era bem pequena e quase ninguém falava de usabilidade no Brasil.Depois, virei arquiteta de informação. Já trabalhei em agência, já trabalhei em portal, já trabalhei em instituto de tecnologia, já trabalhei em fabricante de celular. Acho que já vi bastante coisa por aí, e tenho ficado cada vez mais maravilhada com as possibilidades do nosso trabalho.
Comecei meio que por acaso: estava fazendo design, fiz uma iniciação científica que envolvia ergonomia e design de informação –mais especificamente, sinalização de ambientes publicos. Aí, um amigo da faculdade comentou que uma consultoria precisava de alguém pra diagramar uns relatórios. Fui lá conhecer. E assim comecei a trabalhar na Try, quando a empresa era bem pequena e quase ninguém falava de usabilidade no Brasil.Depois, virei arquiteta de informação. Já trabalhei em agência, já trabalhei em portal, já trabalhei em instituto de tecnologia, já trabalhei em fabricante de celular. Acho que já vi bastante coisa por aí, e tenho ficado cada vez mais maravilhada com as possibilidades do nosso trabalho.
Comecei meio que por acaso: estava fazendo design, fiz uma iniciação científica que envolvia ergonomia e design de informação –mais especificamente, sinalização de ambientes publicos. Aí, um amigo da faculdade comentou que uma consultoria precisava de alguém pra diagramar uns relatórios. Fui lá conhecer. E assim comecei a trabalhar na Try, quando a empresa era bem pequena e quase ninguém falava de usabilidade no Brasil.Depois, virei arquiteta de informação. Já trabalhei em agência, já trabalhei em portal, já trabalhei em instituto de tecnologia, já trabalhei em fabricante de celular. Acho que já vi bastante coisa por aí, e tenho ficado cada vez mais maravilhada com as possibilidades do nosso trabalho.
Comecei meio que por acaso: estava fazendo design, fiz uma iniciação científica que envolvia ergonomia e design de informação –mais especificamente, sinalização de ambientes publicos. Aí, um amigo da faculdade comentou que uma consultoria precisava de alguém pra diagramar uns relatórios. Fui lá conhecer. E assim comecei a trabalhar na Try, quando a empresa era bem pequena e quase ninguém falava de usabilidade no Brasil.Depois, virei arquiteta de informação. Já trabalhei em agência, já trabalhei em portal, já trabalhei em instituto de tecnologia, já trabalhei em fabricante de celular. Acho que já vi bastante coisa por aí, e tenho ficado cada vez mais maravilhada com as possibilidades do nosso trabalho.
Comecei meio que por acaso: estava fazendo design, fiz uma iniciação científica que envolvia ergonomia e design de informação –mais especificamente, sinalização de ambientes publicos. Aí, um amigo da faculdade comentou que uma consultoria precisava de alguém pra diagramar uns relatórios. Fui lá conhecer. E assim comecei a trabalhar na Try, quando a empresa era bem pequena e quase ninguém falava de usabilidade no Brasil.Depois, virei arquiteta de informação. Já trabalhei em agência, já trabalhei em portal, já trabalhei em instituto de tecnologia, já trabalhei em fabricante de celular. Acho que já vi bastante coisa por aí, e tenho ficado cada vez mais maravilhada com as possibilidades do nosso trabalho.
Comecei meio que por acaso: estava fazendo design, fiz uma iniciação científica que envolvia ergonomia e design de informação –mais especificamente, sinalização de ambientes publicos. Aí, um amigo da faculdade comentou que uma consultoria precisava de alguém pra diagramar uns relatórios. Fui lá conhecer. E assim comecei a trabalhar na Try, quando a empresa era bem pequena e quase ninguém falava de usabilidade no Brasil.Depois, virei arquiteta de informação. Já trabalhei em agência, já trabalhei em portal, já trabalhei em instituto de tecnologia, já trabalhei em fabricante de celular. Acho que já vi bastante coisa por aí, e tenho ficado cada vez mais maravilhada com as possibilidades do nosso trabalho.
Comecei meio que por acaso: estava fazendo design, fiz uma iniciação científica que envolvia ergonomia e design de informação –mais especificamente, sinalização de ambientes publicos. Aí, um amigo da faculdade comentou que uma consultoria precisava de alguém pra diagramar uns relatórios. Fui lá conhecer. E assim comecei a trabalhar na Try, quando a empresa era bem pequena e quase ninguém falava de usabilidade no Brasil.Depois, virei arquiteta de informação. Já trabalhei em agência, já trabalhei em portal, já trabalhei em instituto de tecnologia, já trabalhei em fabricante de celular. Acho que já vi bastante coisa por aí, e tenho ficado cada vez mais maravilhada com as possibilidades do nosso trabalho.
Comecei meio que por acaso: estava fazendo design, fiz uma iniciação científica que envolvia ergonomia e design de informação –mais especificamente, sinalização de ambientes publicos. Aí, um amigo da faculdade comentou que uma consultoria precisava de alguém pra diagramar uns relatórios. Fui lá conhecer. E assim comecei a trabalhar na Try, quando a empresa era bem pequena e quase ninguém falava de usabilidade no Brasil.Depois, virei arquiteta de informação. Já trabalhei em agência, já trabalhei em portal, já trabalhei em instituto de tecnologia, já trabalhei em fabricante de celular. Acho que já vi bastante coisa por aí, e tenho ficado cada vez mais maravilhada com as possibilidades do nosso trabalho.
E aí, o que acaba acontecendo?wireframe diaboEu não sou a favor de demonizar o wireframe.
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.
Jonathan Ive
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.
Identifique a tela principal –acredite, na maioria das vezes não é a home. Ela tem que ser melhor do que todos os seus concorrentes. Tente envolver a equipe toda nesse processo: desenvolvedores, stakeholders, gerentes. Todos devem contribuir.