SlideShare a Scribd company logo
1 of 78
user experience

De ponta
a ponta
   Dia Mundial da Arquitetura de Informação
   11/02/2012

   Juliana Gaiba
Agenda
• Apresentação
• UX: antes, agora e depois
• Nosso problema
• Um ponto de vista
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 
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
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.
Pamela Mead │ The Magic Number │ © Telefónica I+D, 2011
A área
Como a área
era no
“passado”...
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
Como é
agora?
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”.
Arquiteto de
informação
• Organiza conteúdo. Define vocabulário controlado,
 dicionário de sinônimos, busca, metadados etc.
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
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
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
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
Somos
multidisciplinares


          http://www.slideshare.net/upasaopaulo/perfil-do-profissional-de-ux-no-brasil
E continuamos
“tudistas”


       http://www.slideshare.net/upasaopaulo/perfil-do-profissional-de-ux-no-brasil
O trabalho
Como o
trabalho era no
“passado”...
Arquiteto
-Aprovou o escopo e o
conteúdo com o cliente.

- Definiu a estrutura.

- Aprovou a estrutura com o
cliente.
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.
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.
Como é
agora?
A maioria dos
lugares        (agência, cliente e


     continua
consultoria)


assim
Ainda
“compartimentamos”
a criação    Putz, a equipe de
               UX tá lotada.
            Precisamos arranjar
             um fornecedor de
                wireframes.
O princípio da fábrica de alfinete foi o de que a divisão
do trabalho pode aumentar a produtividade nas
organizações
Aumenta a produtividade, mas não é nada inovador e criativo...
Nossa área
amadurece, mas
seguimos a mesma
estrutura de
trabalho de antes
Apesar disso, as
coisas que
gostamos de usar
evoluem
EVOLUEM RÁPIDO
Há alguns anos as coisas não são mais tela a tela
Nem acontecem numa tela só
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
Continuamos
usando as mesmas
ferramentas
http://www.slideshare.net/upasaopaulo/perfil-do-profissional-de-ux-no-brasil
Vamos queimar os wireframes!
O trabalho não começa (e nem deveria acabar) no wireframe
User Experience de ponta a ponta
Um ponto de
vista
Sobre o
projeto
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.
http://www.businessmodelgeneration.com/canvas
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.
a           b          c
 Timeline   Timeline   Timeline
Facebook    Gowalla      Path
Reconheça
padrões,
compare,
adapte
Conceito 1   Conceito 2   Conceito 3
User Experience de ponta a ponta
"Good artists copy, great artists steal."
Edite. Corte.
Diminua.
Valide.
Faça planos de lançamento. Foque
no que realmente importa.
Pareto is king.
Mas eu só quero pagar uma conta!
Sobre o
trabalho
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.
Desenhe,
desenhe,
desenhe,
desenhe.
Antes de partir para o wireframe,
desenhe com o time todo. Junte
ideias, referências, tudo o que
puder. Exemplifique!
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.
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.
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ó.
Não seja um
completo
leigo em
programação
Não é pra ser mais um
desenvolvedor, mas saber
entender o que eles dizem é
fundamental.
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.
Tenha sempre
em mente
Você está
disputando
por tempo.
Seja obssessivo com velocidade.
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
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.
User Experience de ponta a ponta
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.
https://www.mint.com/how-it-works/budgeting/
Sempre
reduza o
esforço
Se pergunte: o que o usuário vai
ganhar em troca? Vale a pena?
User Experience de ponta a ponta
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
User Experience de ponta a ponta
Sobre
atitude
Acostume-se:
você vai ser o
chato. Mas
nunca o c*ga-
regra.
Você vai colaborar com o
trabalho dos outros.
A primeira
solução nunca
é a melhor
solução.
Seja incansável. Respire o seu
produto.
A inspiração
pode vir de
uma
calculadora
Acredite.
Envolva o
desenvolvedor.
Ele é geek e
cheio de
referências.
Tenha um advogado ao seu lado,
não um crítico.
Divirta-se!
Briefing    UX: AI / DI           Criação          Desenvolvimento




                                            Look
                                            and
 Briefing                       Conteúdo    feel     Implementação
                          Uxs + Devs + Usuários
Perguntas?
Obrigada!
@gaiba
gaiba.me
juliana@gaiba.me

More Related Content

Similar to User Experience de ponta a ponta

Uso de personas em projetos interativos
Uso de personas em projetos interativosUso de personas em projetos interativos
Uso de personas em projetos interativosTersis Zonato
 
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013Horácio Soares
 
Integração Contínua
Integração ContínuaIntegração Contínua
Integração ContínuaIgo Coelho
 
Progressão-de-carreira-na-tecnologia.pptx
Progressão-de-carreira-na-tecnologia.pptxProgressão-de-carreira-na-tecnologia.pptx
Progressão-de-carreira-na-tecnologia.pptxGDGSinop
 
Progressão de carreira na tecnologia.pdf
Progressão de carreira na tecnologia.pdfProgressão de carreira na tecnologia.pdf
Progressão de carreira na tecnologia.pdfGDGSinop
 
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013Horácio Soares
 
Desenvolvendo .net utilizando tecnologias abertas
Desenvolvendo .net utilizando tecnologias abertasDesenvolvendo .net utilizando tecnologias abertas
Desenvolvendo .net utilizando tecnologias abertasOmnesCoin
 
UX em Plataformas Conversacionais
UX em Plataformas ConversacionaisUX em Plataformas Conversacionais
UX em Plataformas ConversacionaisJoana Ritter
 
Ir para cloud com arquitetura de microservices resolverá o meu problema?
Ir para cloud com arquitetura de microservices resolverá o meu problema?Ir para cloud com arquitetura de microservices resolverá o meu problema?
Ir para cloud com arquitetura de microservices resolverá o meu problema?Better Developer
 
Mobile first - W3C WEB.BR 2012
Mobile first - W3C WEB.BR 2012Mobile first - W3C WEB.BR 2012
Mobile first - W3C WEB.BR 2012Horácio Soares
 
Criando empresas que as pessoas adoram: O papel da UX em uma startup
Criando empresas que as pessoas adoram: O papel da UX em uma startupCriando empresas que as pessoas adoram: O papel da UX em uma startup
Criando empresas que as pessoas adoram: O papel da UX em uma startupNeue Labs
 
WCM_Ebook_PT.pdf
WCM_Ebook_PT.pdfWCM_Ebook_PT.pdf
WCM_Ebook_PT.pdfTonFelix1
 
Prototipagem e MVP para startups
Prototipagem e MVP para startupsPrototipagem e MVP para startups
Prototipagem e MVP para startupsJennifer Payne
 
Christiane Melcher | UX e Design Thinking no contexto “Agile”
Christiane Melcher | UX e Design Thinking no contexto “Agile”Christiane Melcher | UX e Design Thinking no contexto “Agile”
Christiane Melcher | UX e Design Thinking no contexto “Agile”UXPA-Rio
 
Lidar com Expectativas é a melhor forma de garantir a Experiência
Lidar com Expectativas é a melhor forma de garantir a ExperiênciaLidar com Expectativas é a melhor forma de garantir a Experiência
Lidar com Expectativas é a melhor forma de garantir a ExperiênciaMarcelo Sales
 
Apostila comunicação visual
Apostila comunicação visualApostila comunicação visual
Apostila comunicação visualAdriano Borges
 
Apostila comunicação visual para web
Apostila comunicação visual para webApostila comunicação visual para web
Apostila comunicação visual para webMarcos Nori
 

Similar to User Experience de ponta a ponta (20)

Uso de personas em projetos interativos
Uso de personas em projetos interativosUso de personas em projetos interativos
Uso de personas em projetos interativos
 
244183.pptx
244183.pptx244183.pptx
244183.pptx
 
Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013Mobile First - Palestra no MobileConf 2013
Mobile First - Palestra no MobileConf 2013
 
Integração Contínua
Integração ContínuaIntegração Contínua
Integração Contínua
 
Progressão-de-carreira-na-tecnologia.pptx
Progressão-de-carreira-na-tecnologia.pptxProgressão-de-carreira-na-tecnologia.pptx
Progressão-de-carreira-na-tecnologia.pptx
 
Progressão de carreira na tecnologia.pdf
Progressão de carreira na tecnologia.pdfProgressão de carreira na tecnologia.pdf
Progressão de carreira na tecnologia.pdf
 
Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013Os Caminhos do Design Mobile - Campus Party 2013
Os Caminhos do Design Mobile - Campus Party 2013
 
Desenvolvendo .net utilizando tecnologias abertas
Desenvolvendo .net utilizando tecnologias abertasDesenvolvendo .net utilizando tecnologias abertas
Desenvolvendo .net utilizando tecnologias abertas
 
UX em Plataformas Conversacionais
UX em Plataformas ConversacionaisUX em Plataformas Conversacionais
UX em Plataformas Conversacionais
 
Ir para cloud com arquitetura de microservices resolverá o meu problema?
Ir para cloud com arquitetura de microservices resolverá o meu problema?Ir para cloud com arquitetura de microservices resolverá o meu problema?
Ir para cloud com arquitetura de microservices resolverá o meu problema?
 
Mobile first - W3C WEB.BR 2012
Mobile first - W3C WEB.BR 2012Mobile first - W3C WEB.BR 2012
Mobile first - W3C WEB.BR 2012
 
Criando empresas que as pessoas adoram: O papel da UX em uma startup
Criando empresas que as pessoas adoram: O papel da UX em uma startupCriando empresas que as pessoas adoram: O papel da UX em uma startup
Criando empresas que as pessoas adoram: O papel da UX em uma startup
 
WCM_Ebook_PT.pdf
WCM_Ebook_PT.pdfWCM_Ebook_PT.pdf
WCM_Ebook_PT.pdf
 
Métodos ágeis
Métodos ágeisMétodos ágeis
Métodos ágeis
 
Prototipagem e MVP para startups
Prototipagem e MVP para startupsPrototipagem e MVP para startups
Prototipagem e MVP para startups
 
Apresentacao congr algarve
Apresentacao congr algarveApresentacao congr algarve
Apresentacao congr algarve
 
Christiane Melcher | UX e Design Thinking no contexto “Agile”
Christiane Melcher | UX e Design Thinking no contexto “Agile”Christiane Melcher | UX e Design Thinking no contexto “Agile”
Christiane Melcher | UX e Design Thinking no contexto “Agile”
 
Lidar com Expectativas é a melhor forma de garantir a Experiência
Lidar com Expectativas é a melhor forma de garantir a ExperiênciaLidar com Expectativas é a melhor forma de garantir a Experiência
Lidar com Expectativas é a melhor forma de garantir a Experiência
 
Apostila comunicação visual
Apostila comunicação visualApostila comunicação visual
Apostila comunicação visual
 
Apostila comunicação visual para web
Apostila comunicação visual para webApostila comunicação visual para web
Apostila comunicação visual para web
 

User Experience de ponta a ponta

  • 1. user experience De ponta a ponta Dia Mundial da Arquitetura de Informação 11/02/2012 Juliana Gaiba
  • 2. Agenda • Apresentação • UX: antes, agora e depois • Nosso problema • Um ponto de vista
  • 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.
  • 6. Pamela Mead │ The Magic Number │ © Telefónica I+D, 2011
  • 8. Como a área era no “passado”...
  • 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”.
  • 12. Arquiteto de informação • Organiza conteúdo. Define vocabulário controlado, dicionário de sinônimos, busca, metadados etc.
  • 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
  • 17. Somos multidisciplinares http://www.slideshare.net/upasaopaulo/perfil-do-profissional-de-ux-no-brasil
  • 18. E continuamos “tudistas” http://www.slideshare.net/upasaopaulo/perfil-do-profissional-de-ux-no-brasil
  • 20. Como o trabalho era no “passado”...
  • 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.
  • 25. A maioria dos lugares (agência, cliente e continua consultoria) assim
  • 26. Ainda “compartimentamos” a criação Putz, a equipe de UX tá lotada. Precisamos arranjar um fornecedor de wireframes.
  • 27. O princípio da fábrica de alfinete foi o de que a divisão do trabalho pode aumentar a produtividade nas organizações
  • 28. Aumenta a produtividade, mas não é nada inovador e criativo...
  • 29. Nossa área amadurece, mas seguimos a mesma estrutura de trabalho de antes
  • 30. Apesar disso, as coisas que gostamos de usar evoluem
  • 32. Há alguns anos as coisas não são mais tela a tela
  • 33. Nem acontecem numa tela só
  • 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
  • 37. Vamos queimar os wireframes!
  • 38. O trabalho não começa (e nem deveria acabar) no wireframe
  • 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
  • 47. Conceito 1 Conceito 2 Conceito 3
  • 49. "Good artists copy, great artists steal."
  • 50. Edite. Corte. Diminua. Valide. Faça planos de lançamento. Foque no que realmente importa. Pareto is king.
  • 51. Mas eu só quero pagar uma conta!
  • 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.
  • 54. Desenhe, desenhe, desenhe, desenhe. Antes de partir para o wireframe, desenhe com o time todo. Junte ideias, referências, tudo o que puder. Exemplifique!
  • 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.
  • 61. Você está disputando por tempo. Seja obssessivo com velocidade.
  • 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.
  • 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.
  • 67. Sempre reduza o esforço Se pergunte: o que o usuário vai ganhar em troca? Vale a pena?
  • 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
  • 72. Acostume-se: você vai ser o chato. Mas nunca o c*ga- regra. Você vai colaborar com o trabalho dos outros.
  • 73. A primeira solução nunca é a melhor solução. Seja incansável. Respire o seu produto.
  • 74. A inspiração pode vir de uma calculadora Acredite.
  • 75. Envolva o desenvolvedor. Ele é geek e cheio de referências. Tenha um advogado ao seu lado, não um crítico.
  • 77. Briefing UX: AI / DI Criação Desenvolvimento Look and Briefing Conteúdo feel Implementação Uxs + Devs + Usuários

Editor's Notes

  1. 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.
  2. 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.
  3. 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.
  4. 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
  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. E aí, o que acaba acontecendo?wireframe diaboEu não sou a favor de demonizar o wireframe.
  18. 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.
  19. 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.
  20. Jonathan Ive
  21. 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.
  22. 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.
  23. 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.
  24. 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.
  25. 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.
  26. 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.
  27. 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.
  28. 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.
  29. 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.
  30. 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.
  31. 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.
  32. 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.
  33. 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.
  34. 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.
  35. 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.
  36. 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.
  37. 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.