User Experience de ponta a ponta

user experienceDe pontaa 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 comusabilidade• 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 bikepã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 souatendente de telemarketing. E eu não tenho nada a ver com oSpeedy –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 áreaera no“passado”...

aço wireframe, aplico testede usabilidade, crio matriz deconteúdo, faço vocabuláriocontrolado, modero cardsorting, monto protótipo empapel, crio animações nopower point, arraso nospainé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 deinformaçã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 deinteraçã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 deUX• 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

Desgarradosda 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

Somosmultidisciplinares 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 otrabalho era no“passado”...

Arquiteto-Aprovou o escopo e oconteúdo com o cliente.- Definiu a estrutura.- Aprovou a estrutura com ocliente.

Criação- O cliente achou a primeira proposta careta e pediu uma coisa maisdiferente e ousada.- Entre 21 idas e vindas, chegaram nessa versão. O wireframe caiuno esquecimento.

Desenvolvi-mento- Implementou o que deu pra fazer.-O prazo estourou e tiveram 1semana pra desenvolver tudo.- A navegação mudou, não deutempo de seguir.- Wireframe? Tinha isso?!- Não vai dar tempo de fazer essasanimações todas no código, vamosbotar um flash.- Vai demorar uns 68 segundos praabrir o site, beleza?- Ninguém teve tempo de testar.

Como éagora?

A maioria doslugares (agência, cliente e continuaconsultoria)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ãodo trabalho pode aumentar a produtividade nasorganizações

Aumenta a produtividade, mas não é nada inovador e criativo...

Nossa áreaamadurece, masseguimos a mesmaestrutura detrabalho de antes

Apesar disso, ascoisas quegostamos de usarevoluem

EVOLUEM RÁPIDO

Há alguns anos as coisas não são mais tela a tela

Nem acontecem numa tela só

Designer deinteraçã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

Continuamosusando as mesmasferramentas

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

Um ponto devista

Sobre oprojeto

Tenha osobjetivos claros.Antes de começar a pensar na tela:Conheça as necessidades do seuusuário, mesmo que sejapesquisando mais sobre ele noGoogle. Conheça a suaconcorrência! Tente elaborar ummodelo de negócios “express”, é umexcelente exercício. Saiba quais sãoas possibilidades técnicas da(s)plataforma(s) que você estáprojetando.

http://www.businessmodelgeneration.com/canvas

Identifique oque deve serincrível. E sejaincrível nisso.Identifique a tela principal –acredite,na maioria das vezes não é a home.Ela tem que ser melhor do que todosos seus concorrentes. Tente envolvera equipe toda nesse processo:desenvolvedores, stakeholders,gerentes: todos devem contribuir.Chegue em dois ou três caminhosdiferentes e depois evolua.

a b c Timeline Timeline TimelineFacebook Gowalla Path

Reconheçapadrões,compare,adapte

Conceito 1 Conceito 2 Conceito 3

"Good artists copy, great artists steal."

Edite. Corte.Diminua.Valide.Faça planos de lançamento. Foqueno que realmente importa.Pareto is king.

Mas eu só quero pagar uma conta!

Sobre otrabalho

Tente nãocomprometerseu tempo comdocumentaçõescomplexas.Sabe aquele documento complicado,cheio de detalhes e legendas? Poisé, (quase) ninguém vai ler aquilo.E, mesmo se ler, não vai sairexatamente o que você quer. Gasteseu tempo orientando e validando.

Desenhe,desenhe,desenhe,desenhe.Antes de partir para o wireframe,desenhe com o time todo. Junteideias, referências, tudo o quepuder. Exemplifique!

Seja visual.Exemplifique.Pesquise umpainel dereferências.Participe do processo de criaçãocomo um todo. Comunique-sevisualmente: nada pior que tentarexplicar uma imagem com milpalavras. Use referências,contribua.

Seja ainda maisvisual.Pesquise!Não se limite ao seu “nicho”.Dificilmente dá pra contar com ummotion designer. Leve contribuiçõesde animações e transições de tela:esses também são elementos chaveda experiência, principalmentemobile.

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 umcompletoleigo emprogramaçãoNão é pra ser mais umdesenvolvedor, mas saberentender o que eles dizem éfundamental.

Teste (menoscom a suamãe, que écoruja).Testar nem sempre é complicadoe caro. Nielsen já dizia: com 5usuários dá pra produzir bonsresultados. Aliando isso a índicescomo Net Promoter Score, suaanálise fica ainda mais rica.

Tenha sempreem mente

Você estádisputandopor 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% 12001000ms -0.7% -0.9% -2.8% -1.9% -1.6% 19002000ms -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çãodeve fluir, semengasgos.Faça com que o usuário percorrafluxos de maneira fluida e aexperiência trará felicidade.

Mire algoviciante, comoum jogoOk, gamification é buzzword, masde site de banco a fazendinha,sua interface tem que “prender” ousuário e dar a experiência queele precisa: lúdica ou informativa.

https://www.mint.com/how-it-works/budgeting/

Semprereduza oesforçoSe pergunte: o que o usuário vaiganhar em troca? Vale a pena?

Pense nomodelomentalNem sempre o usuário vainavegar usando a forma maislógica. http://www.cred.columbia.edu/guide/images/illo_mental_model.gif

Sobreatitude

Acostume-se:você vai ser ochato. Masnunca o c*ga-regra.Você vai colaborar com otrabalho dos outros.

A primeirasolução nuncaé a melhorsolução.Seja incansável. Respire o seuproduto.

A inspiraçãopode vir deumacalculadoraAcredite.

Envolva odesenvolvedor.Ele é geek echeio dereferê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!@gaibagaiba.mejuliana@gaiba.me

http://gaiba.me	375
http://julianagaiba.com	8
http://us-w1.rockmelt.com	5
https://twitter.com	2
http://www.gaiba.me	1
http://julianagaiba.com.br	1

User Experience de ponta a ponta

by Juliana Gaiba

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 392

Statistics

User Experience de ponta a ponta Presentation Transcript