EuripEdEs magalhãEs - @EuripEdEsmDesign Thinking
rEflExão/ExErcícioPense em um produto,pense em um serviço,pense na sua empresa, etudo que for dito, tenteaplicar a isso.
o pEnsamEnto do dEsignErO que é design thinking?O que é design?
dEsign“O design, desenho industrial (português brasileiro)ou desenho ou modelo (português europeu) é aconfiguração, concep...
dEsign é projEtodesign é projeto porque não se trata de somente de umaexecução estética de algo.se trata de planejar, com ...
E quEm é o dEsignEr?fazer design e ser designer é sempre ter o desejo demelhorar a vida das pessoas.uma boa sinalização nã...
Então....o que é designthinking afinal?
dEsign thinkingtrabalhar design thinking é pensar em inovação, édiretamente relacionada com o que se fala hoje emdia de de...
dEsign thinking“Design Thinking, ou pensamento de Design, é uma abstraçãodo modelo mental utilizado há anos pelos designer...
Design Thinking écentrado no ser humano. É criar para o ser humano.
the macrocosm and microcosm (from a title page by robert fludd)
dEsign thinkingé um processo experimental, colaborativo, otimista e sempreinovador, pois nesse processo é permitido o erro...
dEsign thinkingalgumas pessoas defendem que no futuro imediato osprodutos venderão pelo design.nunca se falou tanto de des...
microsoft sustainaBilityhttp://vimeo.com/3821318
a quEstão é... ondE quEro chEgar?                                    © lorana gallery
a quEstão é...Onde quero chegar?o equilíbrio é a peça chave para o sucesso de qualquer projeto,existe um ponto de integraç...
NEGÓCIOS DESIGN           PESSOASTHINKING                     TECNOLOGIA
NEGÓCIOSPESSOAS                       EQULÍBRIO          TECNOLOGIA
dEsign thinkingModelos
modElo cEntrado no valor - jEss mcmullin    NEGÓCIOS                              NEGÓCIOS                 Design     vácu...
procEsso comum                 EngenhariaMarketing                     Marketing
PrOcessO cOMuM            • Falta planejamento            • Método empírico              (tentativa e erro)            • D...
dEsign como EmBElEzamEntoMarketing              Engenharia    Design                                 Marketing
Design cOMO                eMbelezaMenTO                •   Beleza vende?                •   É inovador?                • ...
dEsign como inovação   DesignMarketing        Engenharia                              Marketing
Design cOMO inOvaçãO              • Aumento de qualidade                do produto e diminuição                do retrabal...
dEsign como Estratégia                   Design                 EngenhariaMarketing                     Marketing
Design cOMO       esTraTÉgia       • Pesquisa trabalha junto         com o desenvolvimento       • Possibilidades maiores ...
cultura E éticaindependente da postura, é importante a empresa nãoenfatizar certos aspectos que não são atributos essencia...
púBlico-alvo“Alvo é passivo, só vale como parte de um jogo, só existe paraser espetado; alvo nunca ganha”lígia fascioninão...
transparênciaEmpresas transparentes em momentos de crise conseguemse reestabelecer mais rapidamente e sem grandes danos em...
“Não é o que ele pensaa respeito, mas o que ele    sente a respeito”         tim Brown
© sBa73
empatia!
Empatiatudo começa com a empatia.quanto mais pregnância o usuário tiver com o assunto, melhora mensagem vai ser entendida....
dEsign thinkingO processo ideo
idEouma empresa de design baseada na idéia de trabalhar com odesign centralizado no ser humano.trabalham criando desde obj...
tim BroWnum designer industrial por formação, tim ganhou inúmerosprêmios de design e já expôs trabalhos no museu de artemo...
procEsso idEoDISCOVERY   INTERPRETATION   IDEATION   EXPERIMENTATION   EVOLUTION
momento de pensar como será o            processo de trabalho.            a partir de um desavio, como encará-lo.         ...
DISCOVERY1. DEfinir o DESAfio• Entender o desafio• Definir sua audiência• Montar um time• Compartilhar conhecimento
DISCOVERY2. PrEPArAr A PESquiSA• Fazer um plano• Identificar as fontes de inspiração• Convidar os participantes da pesquis...
DISCOVERY3. JunTAr inSPirAção• Inserir-se no contexto do projeto• Aprender individualmente• Aprender em grupos• Aprender c...
hora de entender o que foi pesquisado,                 de transformar o conteúdo colhido em                 uma linha de p...
DISCOVERY1. conTAr hiSTóriAS• Capturar aprendizados• Compartilhar histórias inspiradoras
DISCOVERY2. ProcurAr Por SignificADoS• Procurar temáticas• Promover os sentidos das descobertas• Definir perspectivas
DISCOVERY3. JAnElAS DE oPorTuniDADES• Criar um lembrete visual• Promover os sentidos das descobertas• Elabore insights usu...
momento de gerar idéias, onde           o brainstorm ajuda a conceber           expansívelmente e sem restrições.         ...
IDEATION1. gErAr iDéiAS• Preparar o brainstorm• Facilitar o brainstorm• Selecionar idéias promissoras• Construir para pensar
IDEATION
IDEATIONAs sete regras do brainstorming na fase degeração de idéias1 » Adie o julgamento – não existem más idéias nesta et...
IDEATION4 » Mantenha o foco no tópico do brainstorming - os melhoresresultados são obtidos quando todos mantiverem a disci...
IDEATION2. rEfinAr AS iDéiAS• Cheque se é possível ser produzido• Descreva sua idéia
agora as idéias ganham vida em forma                  de protótipos.                  momento de aprender com esses       ...
EXPERIMENTATION1. fAzEr ProTóTiPoS• Criar um protótipo
prototipar!os protótipos são ferramentas importantes no design em si,seja no design gráfico, no de produto e principalment...
protótipo dE papElhttp://vimeo.com/7665624
EXPERIMENTATION2. vEr fEEDbAck (TESTES)• Faça um plano para o teste• Identifique as fontes de feedbacks  (participantes do...
agora começa o desenvolvimento do            conceito, hora de planejar os próximos            passos, entender quem pode ...
EVOLUTION1. AvAliAr APrEnDizADoS• Integrar os feedbacks• Definir o sucesso
EVOLUTION2. conSTruir A ExPEriênciA• Identificar o que é necessário• Lançar o conceito• Construir parcerias• Planejar os p...
Estudo/casEWebsite para produtos Elma chips, linha clássicos.
processo - concepção                       planejamento            criação    produto        gerência de                  ...
processo - produção                                 Arquitetura de                                 Informação             ...
processo - arquitetura de informação e user Experience                                    PESQUISA DE TENDÊNCIAS          ...
rEsumo do procEsso criativo - story tElling• Reuniões com atendimento, gerência de projetos,  tecnologia, planejamento e c...
EuripEdEs magalhãEs - @EuripEdEsmUser Experience
do quE sE trata?se trata de gerar “o momento em que tudo estáperfeito” se trata de fazer com que tudo o que ousuário use s...
usEr ExpEriEncE“Algumas pessoas dizem que design é solução deproblemas. É óbvio que designers resolvemalguns problemas, ma...
fErramEnta dE traBalho,acEssório? comunicador?
“Design is not just whatit looks like and feels like. Design is how it works.”          steve jobs
usEr ExpEriEncEo iphone ganhou espaço pela sua curva deaprendizado pequena e pela integração que elepermite com outros dis...
visual    Sonoro     olfativo                      ?gestual    Tátil   E o que mais?
usEr ExpEriEncEEm quase tudo que usamos há design, de revistas àembalagens, de cadeiras a mouses de computadores,de maçane...
http://nymag.com/nymetro/health/features/11700/
1. Fácil identificação                                            o nome do medicamento é impresso                        ...
5. Identificação por cor                                            por cores customizadas é possível                     ...
Packaged               APIs                  Design                Deliverables                                           ...
Experiência do Usuário           Encontrabilidade                     ContinuidadeArquitetura da Informação               ...
usEr ExpEriEncE honEycomBpeter morville
Emocional...david armano
criatividadE “Em t”
a mEntE Em forma dE tdavid armano
iluvuxdEsign part ihttp://vimeo.com/19131028
iluvuxdEsign part iihttp://vimeo.com/21691333
planEjando uxBasicamente nada é criado sem uma base sólida depesquisa, imersão e entendimento do público e douso do que se...
Estudo da nokia sobre tv móvel
fErramEntasExistem muitas ferramentas para pesquisa e definiçãode caminhos, um processo de design thinking maiscomplexo po...
mood Boardferramenta muito utilizada no processo de designestratégico, é um “facilitador de pensamento”, porconter informa...
mind mapDentre muitas funções do Mind Map, uma delas édefinir os caminhos de um projeto, ação, comunicaçãoou até mesmo fun...
Mind Map
diagrama dE afinidadEsMétodo para ordenar idéias, informações ou ações, apartir de uma classificação por grupos, as inform...
pErsonasa definição de um “personagem” para pesquisa,na técnica de personas, é traçado um perfil de umpossível usuário, su...
http://wiki.openmoko.org/wiki/main_page
ÁrvorE dE tarEfas E EtapasÉ a listagem de todas as ações necessárias para ainteração no sistema ou site.pode conter os ite...
Estudoapp para economia de combustível.por intermédio da colaboração entre os usuários,o sistema apontaria os melhores loc...
Estudo/casEapp para interação entre os amigos.com o conceito de integrar os amigos e fazer coisasdiferenciadas, o app para...
diagrama sEquEncialMostra as interações entre os usuários e a sequênciade tarefas para fazer determinada ação.Ex.: compras...
EuripEdEs magalhãEs - @EuripEdEsmUsabilidade
usaBilidadEpresente na arquitetura de informação, uxd e emqualquer lugar que uma pessoa use algo, usabilidadeajuda a deixa...
vW foxhttp://www.youtube.com/watch?v=gieoksm2tiu
mEmória humana vs computacional                seleTiva     inDiscriMinaDa               evOluTiva        esTável         ...
norman (2006) - conhecimento na cabeça
conhecimento no mundo
conhecimento no mundo
conhecimento no mundo
usaBilidadE - componEntEsAprendizagem - o quanto é difícil completar tarefasbásicas no primeiro encontro com a interface?E...
uxd - traBalhando mElhoriasProjeto - planeta verde tangO que é - uma “rede social” para criançasObjetivo - melhorar o uso ...
click tale
depois
antes - recorde
depois - recorde
hEurísticas - jakoB niElsEnas heurísticas são uma série de “dicas”ou “regras” que ajudam no entendimentode situações comun...
hEurísticas - jakoB niElsEn1) Feedback  o sistema deve informar continuamente ao usuário sobre  o que ele está fazendo. 10...
hEurísticas - jakoB niElsEn4) Consistência um mesmo comando ou ação deve ter sempre o mesmo efeito. a mesma operação deve ...
hEurísticas - jakoB niElsEn7) Atalhos Para usuários experientes executarem as operações mais rapidamente. Abreviações, tec...
hEurísticas - jakoB niElsEn9) Boas mensagens de erro linguagem clara e sem códigos. devem ajudar o usuário a entender e re...
concluindo...Em linhas gerais, sabemos que independente da técnicautilizada, o olhar deve ser voltado para o ser humano qu...
youvitóriaLinks úteis e bibliografia• Design Thinking - Tim Brown• Design de Navegação Web - James Kalbach• Design para a ...
youvitóriaLinks úteis e bibliografia• http://www.designthinkingforeducators.com/• http://www.uxnet.org/• http://mitworld.m...
digitalksObrigadoweb: www.euripedes.com.brmail: euripedes@euripedes.com.brtwitter: @euripedesmMais:www.futurecast.com.brht...
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
YOU Educação: Apresentação - Euripedes Magalhães
Upcoming SlideShare
Loading in...5
×

YOU Educação: Apresentação - Euripedes Magalhães

1,478

Published on

Curso: Design Thinking & User Experience
Professor: Euripedes Magalhães @euripedesm
Data: 20/08/2011

Published in: Education, Technology, Business
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,478
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
84
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

YOU Educação: Apresentação - Euripedes Magalhães

  1. 1. EuripEdEs magalhãEs - @EuripEdEsmDesign Thinking
  2. 2. rEflExão/ExErcícioPense em um produto,pense em um serviço,pense na sua empresa, etudo que for dito, tenteaplicar a isso.
  3. 3. o pEnsamEnto do dEsignErO que é design thinking?O que é design?
  4. 4. dEsign“O design, desenho industrial (português brasileiro)ou desenho ou modelo (português europeu) é aconfiguração, concepção, elaboração e especificaçãode um artefato. Essa é uma atividade técnica e criativa,normalmente orientada por uma intenção ou objetivo,ou para a solução de um problema. Simplificando,pode-se dizer que design é projeto.”Wikipedia
  5. 5. dEsign é projEtodesign é projeto porque não se trata de somente de umaexecução estética de algo.se trata de planejar, com objetivos claros pré-definidosfocar na resolução de problemas de design.é seguir uma metodologia fechada ou mutante que ajudaráa encontrar respostas para os problemas.
  6. 6. E quEm é o dEsignEr?fazer design e ser designer é sempre ter o desejo demelhorar a vida das pessoas.uma boa sinalização não é feita somente de sinaise letras, ela é feita do desejo de fazer com que aspessoas chegem a um lugar de forma mais fácil,rápida e inteligente.
  7. 7. Então....o que é designthinking afinal?
  8. 8. dEsign thinkingtrabalhar design thinking é pensar em inovação, édiretamente relacionada com o que se fala hoje emdia de design de serviços.porém, pode ser aplicado para muitos tipos desistemas de design.
  9. 9. dEsign thinking“Design Thinking, ou pensamento de Design, é uma abstraçãodo modelo mental utilizado há anos pelos designers para darvida a idéias. Esse modelo mental e seus poderosos conceitospodem ser aprendidos e utilizados por qualquer pessoa eaplicados em qualquer cenário de negócio ou social.”tim Brown
  10. 10. Design Thinking écentrado no ser humano. É criar para o ser humano.
  11. 11. the macrocosm and microcosm (from a title page by robert fludd)
  12. 12. dEsign thinkingé um processo experimental, colaborativo, otimista e sempreinovador, pois nesse processo é permitido o erro, o estudo, epode ajudar a mudar uma mentalidade metodológica travadaporque é voltada a compreender as necessidades de quemusará aquele produto ou serviço.com a colaboração de todos os envolvidos, a discussão críticae vários pontos de vista diferenciados. é possível mudarmétodos e até mesmo mudar algo que já estava definido.
  13. 13. dEsign thinkingalgumas pessoas defendem que no futuro imediato osprodutos venderão pelo design.nunca se falou tanto de design como hoje em dia.
  14. 14. microsoft sustainaBilityhttp://vimeo.com/3821318
  15. 15. a quEstão é... ondE quEro chEgar? © lorana gallery
  16. 16. a quEstão é...Onde quero chegar?o equilíbrio é a peça chave para o sucesso de qualquer projeto,existe um ponto de integração entre a tecnologia, o usuário eos objetivos de negócio que deve ser trabalhado.por isso a conversa deve sempre acontecer com o pensamentoem como cada área entende e trabalha o assunto discutido.
  17. 17. NEGÓCIOS DESIGN PESSOASTHINKING TECNOLOGIA
  18. 18. NEGÓCIOSPESSOAS EQULÍBRIO TECNOLOGIA
  19. 19. dEsign thinkingModelos
  20. 20. modElo cEntrado no valor - jEss mcmullin NEGÓCIOS NEGÓCIOS Design vácuo valor Acaso PESSOAS PESSOAS
  21. 21. procEsso comum EngenhariaMarketing Marketing
  22. 22. PrOcessO cOMuM • Falta planejamento • Método empírico (tentativa e erro) • Design em segundo plano • Funcionalidades demais • Pensamento no usuário? O Office XP foi lançado depois de muito tempo sem existir atualização no Office, ele traz uma somatória de funcionalidades, o programa não foi recriado mas sim atualizado.office xp
  23. 23. dEsign como EmBElEzamEntoMarketing Engenharia Design Marketing
  24. 24. Design cOMO eMbelezaMenTO • Beleza vende? • É inovador? • Atende o usuário? • Deixar “mais bonito” resolve o problema? Recebendo muitas críticas e esperanças o Windows Vista foi uma aposta de remodelação da Microsoft que esbarrou em problemas tecnológicos de performance e segurança.Windows vista
  25. 25. dEsign como inovação DesignMarketing Engenharia Marketing
  26. 26. Design cOMO inOvaçãO • Aumento de qualidade do produto e diminuição do retrabalho • Velocidade reduzida? • Riscos elevados O importante do pensamento em inovação é que por mais que se pense no usuário somente, corre- se o risco de se esbarrar em algum problema técnico ou que não esteja alinhado às questões comerciais que são importantes no processo.office 2007
  27. 27. dEsign como Estratégia Design EngenhariaMarketing Marketing
  28. 28. Design cOMO esTraTÉgia • Pesquisa trabalha junto com o desenvolvimento • Possibilidades maiores de inovação • Apesar do custo elevado fortalece a marca • A cultura da empresa é importante Além de se pensar sobre a cultura organizacional deve- se pensar sobre a Identidade Corporativa, como a empresa se apresenta ao mercado pois é muito perigoso venderipad uma postura e entregar outro tipo de produto.
  29. 29. cultura E éticaindependente da postura, é importante a empresa nãoenfatizar certos aspectos que não são atributos essenciais desua marca.
  30. 30. púBlico-alvo“Alvo é passivo, só vale como parte de um jogo, só existe paraser espetado; alvo nunca ganha”lígia fascioninão trabalhamos mais com alvos, mesmo porque eles semexem e participam do processo, como podemos consideraresse público agora que a empresa não consegue maisesconder seus atributos essenciais no meio digital?
  31. 31. transparênciaEmpresas transparentes em momentos de crise conseguemse reestabelecer mais rapidamente e sem grandes danos emvendas ou em imagem.
  32. 32. “Não é o que ele pensaa respeito, mas o que ele sente a respeito” tim Brown
  33. 33. © sBa73
  34. 34. empatia!
  35. 35. Empatiatudo começa com a empatia.quanto mais pregnância o usuário tiver com o assunto, melhora mensagem vai ser entendida.uma pré-conhecimento do assunto ajuda bastante nessaidentificação. trabalhar com a linguagem adequada ajudará noaumento do acerto.
  36. 36. dEsign thinkingO processo ideo
  37. 37. idEouma empresa de design baseada na idéia de trabalhar com odesign centralizado no ser humano.trabalham criando desde objetos de design a idéias deserviços para empresas.
  38. 38. tim BroWnum designer industrial por formação, tim ganhou inúmerosprêmios de design e já expôs trabalhos no museu de artemoderna de nova york, axis gallery, em tóquio, e o museu dodesign, em londres.
  39. 39. procEsso idEoDISCOVERY INTERPRETATION IDEATION EXPERIMENTATION EVOLUTION
  40. 40. momento de pensar como será o processo de trabalho. a partir de um desavio, como encará-lo. ETAPAS:DISCOVERY 1. definir o desafio 2. preparar a pesquisa 3. procurar inspiração
  41. 41. DISCOVERY1. DEfinir o DESAfio• Entender o desafio• Definir sua audiência• Montar um time• Compartilhar conhecimento
  42. 42. DISCOVERY2. PrEPArAr A PESquiSA• Fazer um plano• Identificar as fontes de inspiração• Convidar os participantes da pesquisa• Construir um questionário de pesquisa• Preparar o trabalho de campo• Praticar as técnicas de pesquisa
  43. 43. DISCOVERY3. JunTAr inSPirAção• Inserir-se no contexto do projeto• Aprender individualmente• Aprender em grupos• Aprender com especialistas• Aprender observando• Aprender com documentações criadas pelas pessoas• Procurar inspiração em novos lugares
  44. 44. hora de entender o que foi pesquisado, de transformar o conteúdo colhido em uma linha de pensamento. Organizar as informações.INTERPRETATION ETAPAS: 1. contar histórias 2. procurar por significados 3. quadro de oportunidades
  45. 45. DISCOVERY1. conTAr hiSTóriAS• Capturar aprendizados• Compartilhar histórias inspiradoras
  46. 46. DISCOVERY2. ProcurAr Por SignificADoS• Procurar temáticas• Promover os sentidos das descobertas• Definir perspectivas
  47. 47. DISCOVERY3. JAnElAS DE oPorTuniDADES• Criar um lembrete visual• Promover os sentidos das descobertas• Elabore insights usuais
  48. 48. momento de gerar idéias, onde o brainstorm ajuda a conceber expansívelmente e sem restrições. “A melhor forma de ter uma boa idéia é ter muitas idéias.” ETAPAS:IDEATION 1. contar histórias 2. procurar por significados 3. quadro de oportunidades
  49. 49. IDEATION1. gErAr iDéiAS• Preparar o brainstorm• Facilitar o brainstorm• Selecionar idéias promissoras• Construir para pensar
  50. 50. IDEATION
  51. 51. IDEATIONAs sete regras do brainstorming na fase degeração de idéias1 » Adie o julgamento – não existem más idéias nesta etapa.haverá tempo mais tarde para julgá-las.2 » estimule idéias radicais – quase sempre são as idéiasradicais que geram inovação. é sempre mais fácil trazer idéias àrealidade mais tarde!3 » Construa sobre as idéias dos outros – pense em “e…” emvez de ‘mas…’. se você não gosta de alguma idéia, desafie a simesmo a construir algo sobre essa idéia e torná-la melhor. aoentrar na sala, deixe o ego do lado de fora.nei grando
  52. 52. IDEATION4 » Mantenha o foco no tópico do brainstorming - os melhoresresultados são obtidos quando todos mantiverem a disciplina.5 » Seja visual – tente recrutar o lado lógico e o lado criativodo cérebro.6 » Somente uma conversa por vez – permita que idéias sejamouvidas para que outras idéias se criem sobre elas.7 » Almeje quantidade – Estabeleça um objetivo alto parao número de idéias a serem criadas no brainstorming eultrapasse-o! lembre-se de que não há necessidade de explicarexaustivamente a idéia já que ninguém está julgando. idéiasdevem fluir rapidamente.nei grando
  53. 53. IDEATION2. rEfinAr AS iDéiAS• Cheque se é possível ser produzido• Descreva sua idéia
  54. 54. agora as idéias ganham vida em forma de protótipos. momento de aprender com esses protótipos, entender a tangibilidade dessas idéias e ver como refiná-las.EXPERIMENTATION ETAPAS: 1. criar protótipos 2. ver feedbacks
  55. 55. EXPERIMENTATION1. fAzEr ProTóTiPoS• Criar um protótipo
  56. 56. prototipar!os protótipos são ferramentas importantes no design em si,seja no design gráfico, no de produto e principalmente nodigital, eles tem o objetivo de identificar erros e acertos noprojeto, com o protótipo, se aprende muito.http://www.youtube.com/watch?v=g32jmzkrddc
  57. 57. protótipo dE papElhttp://vimeo.com/7665624
  58. 58. EXPERIMENTATION2. vEr fEEDbAck (TESTES)• Faça um plano para o teste• Identifique as fontes de feedbacks (participantes dos testes)• Convide os participantes• Crie um questionário guia• Facilite as conversações• Guarde aprendizados com os feedbacks
  59. 59. agora começa o desenvolvimento do conceito, hora de planejar os próximos passos, entender quem pode ajudar a relizar essa idéia. a documentação do processo é um ponto importante.EVOLUTION ETAPAS: 1. avaliar aprendizados 2. construir a experiência
  60. 60. EVOLUTION1. AvAliAr APrEnDizADoS• Integrar os feedbacks• Definir o sucesso
  61. 61. EVOLUTION2. conSTruir A ExPEriênciA• Identificar o que é necessário• Lançar o conceito• Construir parcerias• Planejar os próximos passos• Documentar o progresso• Compartilhar a história
  62. 62. Estudo/casEWebsite para produtos Elma chips, linha clássicos.
  63. 63. processo - concepção planejamento criação produto gerência de projetos tecnologia
  64. 64. processo - produção Arquitetura de Informação Arte Tecnologia Entrega inicial Q.A.Benchmark,análise de Definição doconcorrência e conceito Entregaoutras análises e meta para o novo site. Final.necessárias. Conteúdo Aprovação Q.A. Aprovação
  65. 65. processo - arquitetura de informação e user Experience PESQUISA DE TENDÊNCIAS TECNOLÓGICAS E DE PRESENÇA Benchmark produto existente Prototipação Análise da situação nova Desenho da interação e testes de proposta e navegação atual / Estudo do Objeto usabilidade Análise heurística Fluxogramas de interação e navegação Cardsorting Wireframe Testes de usabilidade Mind Maps e Mood Boards
  66. 66. rEsumo do procEsso criativo - story tElling• Reuniões com atendimento, gerência de projetos, tecnologia, planejamento e criação.• Definição de idéias, caminhos e estratégias• Monitoramento de mídias sociais• Pesquisa com pedagogos e crianças• Conexão com o conceito do adulto + criança + retrô
  67. 67. EuripEdEs magalhãEs - @EuripEdEsmUser Experience
  68. 68. do quE sE trata?se trata de gerar “o momento em que tudo estáperfeito” se trata de fazer com que tudo o que ousuário use seja mais fácil e melhor, se trata fazer comque o uso daquele sistema, ferramenta ou serviço sejao melhor possível, que gere aprendizado, afetividadee lembrança.
  69. 69. usEr ExpEriEncE“Algumas pessoas dizem que design é solução deproblemas. É óbvio que designers resolvemalguns problemas, mas isso os dentistas tambémfazem. Design é uma forma de invenção cultural.”jack schulze
  70. 70. fErramEnta dE traBalho,acEssório? comunicador?
  71. 71. “Design is not just whatit looks like and feels like. Design is how it works.” steve jobs
  72. 72. usEr ExpEriEncEo iphone ganhou espaço pela sua curva deaprendizado pequena e pela integração que elepermite com outros dispositivos da apple.a interface é um ponto importante neste ponto. issonos leva a pensar nas características do design, quesão cada dia mais abrangentes.o design agora é um espaço de multilinguagem, emuitos recursos podem ser utilizados.
  73. 73. visual Sonoro olfativo ?gestual Tátil E o que mais?
  74. 74. usEr ExpEriEncEEm quase tudo que usamos há design, de revistas àembalagens, de cadeiras a mouses de computadores,de maçanetas de porta à assentos de carros, tudode alguma forma foi pensado para atender umanecessidade.Essa necessidade deve ser levada em consideração, ealém dela, o usuÁrio também, o “rei” do designer.
  75. 75. http://nymag.com/nymetro/health/features/11700/
  76. 76. 1. Fácil identificação o nome do medicamento é impresso no topo da embalagem. 2. cor vermelha a cor vermelha é o símbolo universal para alerta. 3. Hierarquia de informação nome do medicamento, posologia, data de validade organizadas de acordo com sua importância e uso 4. economia de papel a forma e posição do papel gera um melhor aproveitamento por folha e facilita a visualizaçãohttp://nymag.com/nymetro/health/features/11700/
  77. 77. 5. Identificação por cor por cores customizadas é possível identificar e separar medicamentos quando usados por mais de uma pessoa em casa. 6. Card com informações extras mais difícil de perder, o cartão fica atrás da embalagem e explica com detalhes as informações sobre o medicamento 7. Posologia identificação da posologia, quantos dias dura o tratamento e quantas vezes por dia se utiliza.http://nymag.com/nymetro/health/features/11700/
  78. 78. Packaged APIs Design Deliverables Interaction Solutions Architecting the Usability Design Technology Prototyping Back-End Creative Design Information inking (Visual & UI) Architecture Flash Progra mming AJAX (JavaScript)Designing the Experience Content User Research DOM Front-End Scripting User Experience Development CSS Delivering the Problem Accessibility Experience Framing Business Intelligence User Markup Defi ning the Agents Problem Requirements Account Gathering / Project Mgmt. Research Mgmt. Managing the Project http://garrettdimon.com/pages/improving_interface_design
  79. 79. Experiência do Usuário Encontrabilidade ContinuidadeArquitetura da Informação Design de Serviços Usabilidade Socialidade Design de Interação faber ludens
  80. 80. usEr ExpEriEncE honEycomBpeter morville
  81. 81. Emocional...david armano
  82. 82. criatividadE “Em t”
  83. 83. a mEntE Em forma dE tdavid armano
  84. 84. iluvuxdEsign part ihttp://vimeo.com/19131028
  85. 85. iluvuxdEsign part iihttp://vimeo.com/21691333
  86. 86. planEjando uxBasicamente nada é criado sem uma base sólida depesquisa, imersão e entendimento do público e douso do que será criado.por isso pode-se e deve-se fazer levantamentos sócio-demográficos, ver estatísticas de navegação, gerartestes de usabilidade, testes a/B, o que for possível.
  87. 87. Estudo da nokia sobre tv móvel
  88. 88. fErramEntasExistem muitas ferramentas para pesquisa e definiçãode caminhos, um processo de design thinking maiscomplexo pode ser formatado, mas também itenspulverizados podem ajudar.mood Boards, mind maps e diagramas podem serbons caminhos.
  89. 89. mood Boardferramenta muito utilizada no processo de designestratégico, é um “facilitador de pensamento”, porconter informações .as imagens contidas nele auxiliam o processo dedefinição dos caminhos a serem trabalhados.a idéia é criar esse processo de imersão, deatmosfera, humor. imagens, tecidos, texturas, tudopode ser inserido nele.http://www.scrapblog.com
  90. 90. mind mapDentre muitas funções do Mind Map, uma delas édefinir os caminhos de um projeto, ação, comunicaçãoou até mesmo funcionamentos de um sistema.ajuda a planejar as etapas e identificar os caminhosde uma forma visual e intuitiva.http://www.mindmeister.com
  91. 91. Mind Map
  92. 92. diagrama dE afinidadEsMétodo para ordenar idéias, informações ou ações, apartir de uma classificação por grupos, as informaçõespodem ser agrupadas e classificadas.Facilita o arranjo das informações porque é intuitivo,rápido e ajuda na discussão dos resultados.http://nform.com/tradingcards/affinity-diagram
  93. 93. pErsonasa definição de um “personagem” para pesquisa,na técnica de personas, é traçado um perfil de umpossível usuário, suas características básicas, como elese relacionaria com o sistema e com o seu núcleo deconvivência, uma síntese da personalidade.pode ser feito como uma descrição de um dia deatividades, somente como uma listagem ou atémesmo criando-se um perfil “fake” em uma rede socialpara testes.
  94. 94. http://wiki.openmoko.org/wiki/main_page
  95. 95. ÁrvorE dE tarEfas E EtapasÉ a listagem de todas as ações necessárias para ainteração no sistema ou site.pode conter os itens de curva de aprendizado, podeconter as interações principais ou as interações entreos usuários do sistema.serve como guia para programação, paraentendimento do tempo de interação e quantidade depáginas a serem criadas.
  96. 96. Estudoapp para economia de combustível.por intermédio da colaboração entre os usuários,o sistema apontaria os melhores locais paraabastecimento, os melhores caminhos e também orendimento médio do veículo.
  97. 97. Estudo/casEapp para interação entre os amigos.com o conceito de integrar os amigos e fazer coisasdiferenciadas, o app para facebook instigava aspessoas a convidar os amigos para atividades nomínimo estranhas.
  98. 98. diagrama sEquEncialMostra as interações entre os usuários e a sequênciade tarefas para fazer determinada ação.Ex.: compras em um B2B ou B2c ou c2c
  99. 99. EuripEdEs magalhãEs - @EuripEdEsmUsabilidade
  100. 100. usaBilidadEpresente na arquitetura de informação, uxd e emqualquer lugar que uma pessoa use algo, usabilidadeajuda a deixar tudo melhor, ou pelo menos resolverproblemas sérios que podem gerar situaçõesperigosas.
  101. 101. vW foxhttp://www.youtube.com/watch?v=gieoksm2tiu
  102. 102. mEmória humana vs computacional seleTiva inDiscriMinaDa evOluTiva esTável assOciaTiva DiscreTafaber ludens
  103. 103. norman (2006) - conhecimento na cabeça
  104. 104. conhecimento no mundo
  105. 105. conhecimento no mundo
  106. 106. conhecimento no mundo
  107. 107. usaBilidadE - componEntEsAprendizagem - o quanto é difícil completar tarefasbásicas no primeiro encontro com a interface?Eficiência - para os usuários que já tenham algumafamiliaridade com a interface, como podem fazer tarefasmais rápido?Lembrança - depois de um tempo sem acessar a interface,o quanto será difícil para alcançar proeficiência no uso?Erros - quantos erros os usuários fazem, o quanto sãopreocupantes esses erros e como eles são corrigidos?Satisfação - o quanto é prazeroso usar essa interface?
  108. 108. uxd - traBalhando mElhoriasProjeto - planeta verde tangO que é - uma “rede social” para criançasObjetivo - melhorar o uso do siteAprendizados - a partir de testes, foi identificada adificuldade das crianças fazerem scroll no site
  109. 109. click tale
  110. 110. depois
  111. 111. antes - recorde
  112. 112. depois - recorde
  113. 113. hEurísticas - jakoB niElsEnas heurísticas são uma série de “dicas”ou “regras” que ajudam no entendimentode situações comuns que acontecemdiariamente e que podem atrapalhar anavegação pelos usuários.
  114. 114. hEurísticas - jakoB niElsEn1) Feedback o sistema deve informar continuamente ao usuário sobre o que ele está fazendo. 10 segundos é o limite para manter a atenção do usuário focalizada no diálogo.2) Falar a linguagem do usuário a terminologia deve ser baseada na linguagem do usuário e não orientada ao sistema. As informações devem ser organizadas conforme o modelo mental do usuário.3) Saídas claramente demarcadas o usuário controla o sistema, ele pode, a qualquer momento, abortar uma tarefa, ou desfazer uma operação e retornar ao estado anterior. usabilidoido
  115. 115. hEurísticas - jakoB niElsEn4) Consistência um mesmo comando ou ação deve ter sempre o mesmo efeito. a mesma operação deve ser apresentada na mesma localização e deve ser formatada/apresentada da mesma maneira para facilitar o reconhecimento.5) Prevenir erros Evitar situações de erro. Conhecer as situações que mais provocam erros e modificar a interface para que estes erros não ocorram.6) Minimizar a sobrecarga de memória do usuário o sistema deve mostrar os elementos de diálogo e permitir que o usuário faça suas escolhas, sem a necessidade de lembrar um comando específico. usabilidoido
  116. 116. hEurísticas - jakoB niElsEn7) Atalhos Para usuários experientes executarem as operações mais rapidamente. Abreviações, teclas de função, duplo clique no mouse, função de volta em sistemas hipertexto. Atalhos também servem para recuperar informações que estão numa profundidade na árvore navegacional a partir da interface principal.8) Diálogos simples e naturais deve-se apresentar exatamente a informação que o usuário precisa no momento, nem mais nem menos. a seqüência da interação e o acesso aos objetos e operações devem ser compatíveis com o modo pelo qual o usuário realiza suas tarefas. usabilidoido
  117. 117. hEurísticas - jakoB niElsEn9) Boas mensagens de erro linguagem clara e sem códigos. devem ajudar o usuário a entender e resolver o problema. não devem culpar ou intimidar o usuário.10) Ajuda e documentação o ideal é que um software seja tão fácil de usar (intuitivo) que não necessite de ajuda ou documentação. se for necessária a ajuda deve estar facilmente acessível on-line. usabilidoido
  118. 118. concluindo...Em linhas gerais, sabemos que independente da técnicautilizada, o olhar deve ser voltado para o ser humano quevai utilizar essa criação.partindo deste ponto, fica mais fácil perceber caminhosinteligentes para o desenvolvimento.sair do senso comum e ir em busca de algo novo einteressante verdadeiramente.
  119. 119. youvitóriaLinks úteis e bibliografia• Design Thinking - Tim Brown• Design de Navegação Web - James Kalbach• Design para a Internet - Felipe Memória• Não me faça Pensar - Steve Krug• Ergodesign e Arquitetura de Informação - Luiz Anger• O Guia para Projetar UX - Russ Unger
  120. 120. youvitóriaLinks úteis e bibliografia• http://www.designthinkingforeducators.com/• http://www.uxnet.org/• http://mitworld.mit.edu/video/357/• http://designthinking.ideo.com/• http://arquiteturadeinformacao.com/• http://www.usabilitycounts.com/• http://www.intuitionhq.com/• http://nform.com/tradingcards/affinity-diagram
  121. 121. digitalksObrigadoweb: www.euripedes.com.brmail: euripedes@euripedes.com.brtwitter: @euripedesmMais:www.futurecast.com.brhttp://posmktdigital.wordpress.com/www.twitter.com/mktdigimpacta
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×