Oficina: Introduçãoao Design de InteraçãoRodrigo Freese Gonzattomaio de 2013
Rodrigo GonzattoFormação:‣ Bacharel em Comunicação Social‣ Especialista em Design de Interação‣ MsC. em Tecnologia e Socie...
Rodrigo GonzattoAtuação profissional:‣ Agências de publicidade e comunicação‣ Mídias Sociais (Crânio)‣ Indústria (Hi Techno...
Design LivreFundamentos teóricosdo Design de InteraçãoArte & TecnologiaRelações entreTecnologia e SociedadeNovas mídias e ...
Objetivos da oficina• Desenvolver um projeto de interatividade• Conhecer alguns métodos e técnicas comunsno Design de Inter...
CronogramaManhã• Apresentação• Problematização• Criação (concepção)Tarde• Criação (prototipação)• Avaliação• Encerramento
CronogramaManhã• O que é Design de Interação?• Personas, Cenários, Sistema da Atividade• Brainstroming, Sketch, Fluxograma...
O que é Design de Interação?• Estuda o projeto das interações humanasmediadas por artefatos interativos, ou seja,objetos q...
O que é Design de Interação?• Campo de pesquisa interdisciplinar• Origens: Design Participativo (Sistemas de Informação)In...
O que é Design de Interação?• Não é Computação, mas também.• Não é apenas Interação Humano-Computador.• É diferente de Des...
O “Design”do Design de Interação• Prototipação: pensar com materiais• Iteração: processo não-linear• Colaboração• Pesquisa...
A “Interação”do Design de Interação• Inter - Entre• A +B = C• O designer de interação: de avaliador de telas e criadorde i...
Breve históricoFatores Humanoslinha de comandoum computadorpara muitosErgonomiaIHCinterface gráficaum computador,uma pesso...
Sistema// @ #& * %usuário comocomputador
ENIAC “girls” (década de 40)
Parceiro de discursocomputadorcomo pessoaI.A.
Ferramentatrabalhoou produto+ = ==
Sistema STAR da Xerox (1981)
Mídia / LinguagemDxI
Windows Phone e Facebook
1. Formar seis ou oito grupos2. Ajeitar mesas para trabalho emgrupo :)3. Receber materiais de colaboração4. Escolher um do...
Para dar base aos nossos projetos:‣ Educação‣ Entretenimento‣ Monitoramento‣ RelacionamentosBRIEFING
Briefing A: Educação• Interação entre professores e alunos• Uma escola de Ensino Médio deseja que todos osprofessores utili...
Briefing B: Entretenimento• Interação entre a família• Um canal de TV deseja aumentar o número deespectadores, reunindo a f...
Briefing C: Monitoramento• Interação entre pais e filhos• Celulares com internet dão acesso à todo tipo deinformação e comun...
Briefing D: Relacionamentos• Interação entre pessoas em uma festa• Uma casa noturna quer promover a paquera/flerte.Pensou em...
Processo• PesquisaLevantamento do requisitos e informações paradefinição dos objetivos do projeto.• Ideação e prototipaçãoG...
Modelo funil(Karine Drummond)
Diverge Convergeespecificadefiniçõescompreensãoexplorapossibilidadesambiguidadepesquisa > requerimentos > design >testes com...
PREECE, ROGERS & SHARPpesquisa > requerimentos > design >testes comusuáriosrefinamentodo protótipo>
Modelo cíclico(Rodrigo Gonzatto)
Cronograma• Problematização• Criação (concepção)• Criação (prototipação)• Avaliação
PROBLEMATIZAÇÃO1. elaborar as Personas2. desenvolver Cenários3. analisar a(s) atividade(s) ecompreender Sistema da Atividade
Geradores de avatar online:Mangá, Mii, MeezPersonas"Modelos" de usuários que servem comocritérios para um projeto e sintet...
Persona 3: LuigiGarçom, 30 anos, BrasileiroCarismático, espontâneo, fala com as mãos. Éagitado, mas se distrai conversando...
Sugestões de itens• Desenho/rascunho da persona• Nome e idade• Relacionamento com família e amigos• Educação, trabalho e h...
O aluno de Psicologia, Jair Araújo,casou-se e decidiu trancar seu cursopois não está conseguindo acompanharas aulas e dese...
Cenários• Devem ajudar a visualização da pessoa agindo em umcontexto, a partir de uma motivação• Quem?• Faz o quê?• Onde f...
Sistema da Atividade• Projetar os artefatos (sistemas, dispositivos, sites, etc)para dar suporte às atividades das pessoas...
PessoasArtefatosAtividades
pessoas objetivoVygotsky
pessoas objetivoinstrumentosVygotsky
Engestromobjetivo
ATIVIDADE1. elaborar as Personas2. desenvolver Cenários3. analisar a(s) atividade(s) ecompreender Sistema da Atividade
CRIAÇÃO1. Gerar muitas ideias realizando umbrainstorming e conversando2. Rabiscar (prototipação em baixafidelidade) fazendo...
especificadefiniçõescompreensãoexplorapossibilidadesambiguidadeDiverge Converge
Diverge Convergeprimeirasideiasideiapara serdesenvolvidaanálise edescartemuitaspossibilidadesgeração(tese eantítese)início...
Prototipação• Pode ter diferentes propósitos(demonstrar, testar, explorar)• Protótipos podem serem baixa fidelidade ou alta...
SketchesPrototipação embaixa fidelidade
Protótipos em baixaou emalta fidelidadeProtótipos
Protótipo em baixafidelidade
Protótipo em altafidelidade
Sketchs ouRabiscos
Cubezilla
Sketches de Jonas Lowgren
BrainstormingObjetivo: máximo de ideias possível.Não inibir os demais: ambiente deliberdade = criatividade.Que ajuda a evi...
Sobre WritestormingVídeos de Psicologia:Testes de conformidade
Anotação de ideias• Não ficar nas listas! Tornar visual! :)• Modelos conceituais• Diagrama de afinidades
• Arquivar◦ Tagear■ Agrupar tags• Compartilhar◦ Indicar para amigos◦ Linkar no blog■ No post■ Na linkroll◦ Fornecer RSS Fe...
Diagrama de afinidades
Flickr User Model,Bryce Glass
Diagrama deafinidades
Criatividade: Brainstorminge prototipação com sketches• Fazer sessões de brainstorming ou writestorming paraaquecer• Gerar...
ATIVIDADE1. Gerar muitas ideias realizando umbrainstorming e conversando2. Rabiscar (prototipação em baixafidelidade) fazen...
CRIAÇÃO1. Criação dos primeiros fluxos deinteração2. Prototipação em papel dosWireframes
Navegação e tempo• O tempo é um dos diferenciaisdo Design de Interação peranteoutras disciplinas de UX• Interações possuem...
Interface gráfica do StepMania.Conduza seu corpo (pés, olhos, pernas...) de acordo com os sinais exibidos.
TextoInterface gráfica do Rock Band.Conduza seu corpo (dedos, olhos, mãos, braços...) de acordo com os sinais exibidos.
A dança dos dedosConduza a ponta dos seus dedos...
Interface do Gtalk. O “Pessoa está digitando...” indica que algo está acontecendo etambém de que algo está para acontecer ...
Interface de Add-on no Firefox. Ele não permite que você clique instantaneamenteno botão “Instalar”, obrigando a esperar 3...
Sites de download: versões pagas e gratuitas. Velocidade e lentidão como argumentopara compra de um serviço do site. O des...
Antiga tela de erro do orkut
Diagramas
Humano ComputadorInteraçãoComo formalizar / diagramar?
Diagrama de Navegação,Sitegrama ou Mapa do site+ Computador
Representa a interaçãoentre papéis de usuáriosDiagrama Sequencial+ Humano
Diagrama SequencialNegativo
Fluxogramaou fluxo de tarefa+ Interação
Planejamento da Curvade Aprendizado
022,54567,5901 semana 2 semanas 3 semanas 4 semanasAdobe PhotoshopCorel Photopaint
Prototipação:wireframes
Wireframe Momento de definição:especificação
Wireframe
Protótipo em alta fidelidade
Sketche: protótipo em baixa fidelidade
Protótipo em papel
MockupProtótipo que permite testarfuncionalidades com usuários
Wireflow
ATIVIDADE1. Criação dos primeiros fluxos deinteração2. Prototipação em papel dosWireframesConvergente!
AVALIAÇÃO1. Avaliação das telas pelasheurísticas de Nielsen2. Teste de Usabilidade
Análise cognitivaO que o usuárioprecisa saber?O que a interfaceexplica?PropiciaçãoO que o usuárioprecisa lembrar?O que a i...
Avaliação heurística• Tipo de avaliação de especialista, na qual os avaliadoresbaseiam-se em princípios de usabilidade pró...
Ação crítica ao lado de açãorotineira (Heurística 2 -Prevenção de erros)
Botão sonecadestacado(Heurística 7 -Atalhos)Auto é pra ligar o rádio quandotocar o alarme, mas não estáclaro isso. (Heurís...
Heurísticas de Nielsen1. Percepção do Status do Sistema (feedback)2. Falar a linguagem do usuário (utilizar uma linguagem ...
Etapas da avaliação heurística1. Escolher os avaliadores2. Definir as heurísticas a serem utilizadas3. Executar a avaliação...
Teste de Usabilidade• Permite compreender melhor a interação do usuáriocom um produto• Receber feedback sobre o design• Av...
Laboratório de Usabilidade
Eye-trackingÁreas onde o usuáriofixou o olharCaminho do olhar
Métricas• Eficiência• Tempo de execução da tarefa• Taxa de erros• Eficácia• Taxa de conclusão da tarefa• Satisfação• Questio...
Exemplo de questionário de satisfação pós-teste
ATIVIDADE1. Avaliação dos projetosapresentados pelas heurísticas deNielsen
APRESENTAÇÃO• Apresentação dos projetos dosgrupos!
Para se aprofundar...• Barbosa e Silva - Interação Humano Computador• Usabilidoido: www.usabilidoido.com.br• Saffer - Desi...
Obrigado!Rodrigo Freese Gonzattowww.gonzatto.comrodrigo@gonzatto.com
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Oficina de Introdução ao Design de Interação
Upcoming SlideShare
Loading in...5
×

Oficina de Introdução ao Design de Interação

909

Published on

Oficina de Introdução ao Design de Interação ministrada na especialização ESPWEB da UEM em maio de 2013.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
909
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Oficina de Introdução ao Design de Interação

  1. 1. Oficina: Introduçãoao Design de InteraçãoRodrigo Freese Gonzattomaio de 2013
  2. 2. Rodrigo GonzattoFormação:‣ Bacharel em Comunicação Social‣ Especialista em Design de Interação‣ MsC. em Tecnologia e SociedadeProfessor:‣ Graduação:PUCPR - Design Digital - Hipermídia‣ Pós-graduação:UTFPR Londrina - Design de Interação
  3. 3. Rodrigo GonzattoAtuação profissional:‣ Agências de publicidade e comunicação‣ Mídias Sociais (Crânio)‣ Indústria (Hi Technologies)‣ Consultorias, projetos e treinamentos(InfoGlobo, Electrolux, Dataprev, PUCPR, CBV, MídiaDigital, Redirect e WebgoaI)
  4. 4. Design LivreFundamentos teóricosdo Design de InteraçãoArte & TecnologiaRelações entreTecnologia e SociedadeNovas mídias e questõesétnicas e de gênero
  5. 5. Objetivos da oficina• Desenvolver um projeto de interatividade• Conhecer alguns métodos e técnicas comunsno Design de Interação• Sentir na prática algumas das característicasdo processo de design
  6. 6. CronogramaManhã• Apresentação• Problematização• Criação (concepção)Tarde• Criação (prototipação)• Avaliação• Encerramento
  7. 7. CronogramaManhã• O que é Design de Interação?• Personas, Cenários, Sistema da Atividade• Brainstroming, Sketch, FluxogramasTarde• Wireframes, Storyboard,• Prototipação em Papel• Análise Heurística,Teste de Usabilidade
  8. 8. O que é Design de Interação?• Estuda o projeto das interações humanasmediadas por artefatos interativos, ou seja,objetos que participam ativamente da ação humana• O designer de interação pesquisa, projeta eadapta artefatos websites, softwares, celulares,tablets, videogames, entre outros.
  9. 9. O que é Design de Interação?• Campo de pesquisa interdisciplinar• Origens: Design Participativo (Sistemas de Informação)Interação Humano Computador (Computação) /+ Design
  10. 10. O que é Design de Interação?• Não é Computação, mas também.• Não é apenas Interação Humano-Computador.• É diferente de Design de Interfaces (e de Webdesign).
  11. 11. O “Design”do Design de Interação• Prototipação: pensar com materiais• Iteração: processo não-linear• Colaboração• Pesquisa com usuários“Um sistema não funcionase quem o utiliza não dá sentido à ele”
  12. 12. A “Interação”do Design de Interação• Inter - Entre• A +B = C• O designer de interação: de avaliador de telas e criadorde interfaces até pesquisador de nichos de mercado“A interação não está somente no sistemaou somente em quem usa. É mediação.”
  13. 13. Breve históricoFatores Humanoslinha de comandoum computadorpara muitosErgonomiaIHCinterface gráficaum computador,uma pessoaPsicologiaDesign de Interaçãointerfaces tangíveis,dispositivos móveis,afetividade...uma pessoa,vários computadoresDesignCiências SociaisAntropologiaFilosofiaComputação Ciências CognitivasArquiteturaArteComunicação
  14. 14. Sistema// @ #& * %usuário comocomputador
  15. 15. ENIAC “girls” (década de 40)
  16. 16. Parceiro de discursocomputadorcomo pessoaI.A.
  17. 17. Ferramentatrabalhoou produto+ = ==
  18. 18. Sistema STAR da Xerox (1981)
  19. 19. Mídia / LinguagemDxI
  20. 20. Windows Phone e Facebook
  21. 21. 1. Formar seis ou oito grupos2. Ajeitar mesas para trabalho emgrupo :)3. Receber materiais de colaboração4. Escolher um dos briefings queserão apresentados a seguir...PREPARAÇÃO
  22. 22. Para dar base aos nossos projetos:‣ Educação‣ Entretenimento‣ Monitoramento‣ RelacionamentosBRIEFING
  23. 23. Briefing A: Educação• Interação entre professores e alunos• Uma escola de Ensino Médio deseja que todos osprofessores utilizem tablets em sala de aula,conectados à internet.• Como melhorar o ensino e o aprendizado na sala deaula?• Porém, a escola deseja utilizar os tablets como algomais do que um “caderno digital”, mais do que ummodo do professor passar a matéria.
  24. 24. Briefing B: Entretenimento• Interação entre a família• Um canal de TV deseja aumentar o número deespectadores, reunindo a família para assistir umprograma de reality show.• Este canal especula que a criação de um site parafuncionar como segunda tela (em dispositivos móveis)pode ser uma solução.• Como oferecer uma experiência significativa que integrea família, mas sem que o canal precise criar conteúdoexclusivo?
  25. 25. Briefing C: Monitoramento• Interação entre pais e filhos• Celulares com internet dão acesso à todo tipo deinformação e comunicação. Mas será que os pais queremque seus filhos tenham contato com tudo?• Uma empresa está pensando em criar uma interface paracelulares para estes pais preocupados comprarem.• Entretanto, o foco deste sistema são pais que não queremenganar seus filhos, nem mentir ou espioná-los, mas nãoencontram alternativas nos sistemas de monitoramentoatuais, nem nos celulares disponíveis.
  26. 26. Briefing D: Relacionamentos• Interação entre pessoas em uma festa• Uma casa noturna quer promover a paquera/flerte.Pensou em algo como um "correio elegante" digital.• Pensa a princípio em um site acessível pelo celular, maspode-se instalar um telão na boate também.• Entretanto, a casa noturna não quer que nenhum dosusuários sejam incomodados ou se sintam ofendidos, etem uma preocupação com questões de gênero: temfoco em públicos hétero e LGBT, não quer discriminarmas quer promover a interação do flerte.
  27. 27. Processo• PesquisaLevantamento do requisitos e informações paradefinição dos objetivos do projeto.• Ideação e prototipaçãoGeração de ideias e possibilidades.• TestesAvaliações com e sem usuários para melhorarprotótipos ou o produto final.
  28. 28. Modelo funil(Karine Drummond)
  29. 29. Diverge Convergeespecificadefiniçõescompreensãoexplorapossibilidadesambiguidadepesquisa > requerimentos > design >testes comusuáriosrefinamentodo protótipo>
  30. 30. PREECE, ROGERS & SHARPpesquisa > requerimentos > design >testes comusuáriosrefinamentodo protótipo>
  31. 31. Modelo cíclico(Rodrigo Gonzatto)
  32. 32. Cronograma• Problematização• Criação (concepção)• Criação (prototipação)• Avaliação
  33. 33. PROBLEMATIZAÇÃO1. elaborar as Personas2. desenvolver Cenários3. analisar a(s) atividade(s) ecompreender Sistema da Atividade
  34. 34. Geradores de avatar online:Mangá, Mii, MeezPersonas"Modelos" de usuários que servem comocritérios para um projeto e sintetizam dadoscoletados em pesquisas
  35. 35. Persona 3: LuigiGarçom, 30 anos, BrasileiroCarismático, espontâneo, fala com as mãos. Éagitado, mas se distrai conversando com clientesou com outros garçons com muita facilidade.Tecnologia: usa muito o celular, que é um modelo bem simples,mas mais para ligar e mandar mensagens. Internet tem focosocial: MSN, Orkut, Facebook, e-mail.Rotina: Chega um pouco antes do restaurante abrir apenas paracolocar o avental, pois já vem com a roupa e cabelo arrumados.Vai embora assim que sai o último cliente (ou seja, após as 00:00em dias normais e depois das 5:00 em finais de semana).
  36. 36. Sugestões de itens• Desenho/rascunho da persona• Nome e idade• Relacionamento com família e amigos• Educação, trabalho e hobbies• Personalidade: introvertido/extrovertido?• Qual a sua rotina?• Quais suas motivações?• Como se relaciona com tecnologia? Que aparelhos usa?
  37. 37. O aluno de Psicologia, Jair Araújo,casou-se e decidiu trancar seu cursopois não está conseguindo acompanharas aulas e deseja trabalhar mais nomomento.Utilizando um computador dotrabalho, ele recorre ao website dauniversidade para saber por quantotempo poderá trancar seu curso.Cenárioscom personasdescrições de situações hipotéticasem que são colocadas pessoas queinteressam ao projeto
  38. 38. Cenários• Devem ajudar a visualização da pessoa agindo em umcontexto, a partir de uma motivação• Quem?• Faz o quê?• Onde faz?• Como faz, com o que?• Porquê faz?
  39. 39. Sistema da Atividade• Projetar os artefatos (sistemas, dispositivos, sites, etc)para dar suporte às atividades das pessoas• Mais do que que teclas as pessoas apertam, ou asequência de cliques que pressionam:O que as pessoas fazem? (atividade)• O sistema (informático) deve se adaptar ao sistema(social)
  40. 40. PessoasArtefatosAtividades
  41. 41. pessoas objetivoVygotsky
  42. 42. pessoas objetivoinstrumentosVygotsky
  43. 43. Engestromobjetivo
  44. 44. ATIVIDADE1. elaborar as Personas2. desenvolver Cenários3. analisar a(s) atividade(s) ecompreender Sistema da Atividade
  45. 45. CRIAÇÃO1. Gerar muitas ideias realizando umbrainstorming e conversando2. Rabiscar (prototipação em baixafidelidade) fazendo sketches ecolaborando com outros sketches3. Anotar tudo em modelos conceituais
  46. 46. especificadefiniçõescompreensãoexplorapossibilidadesambiguidadeDiverge Converge
  47. 47. Diverge Convergeprimeirasideiasideiapara serdesenvolvidaanálise edescartemuitaspossibilidadesgeração(tese eantítese)iníciodo projetofinaldo projeto
  48. 48. Prototipação• Pode ter diferentes propósitos(demonstrar, testar, explorar)• Protótipos podem serem baixa fidelidade ou alta fidelidade• Podem não ter funcionalidades, ou serem funcionaisou semi-funcionais• É um tipo de comunicação e de documentação
  49. 49. SketchesPrototipação embaixa fidelidade
  50. 50. Protótipos em baixaou emalta fidelidadeProtótipos
  51. 51. Protótipo em baixafidelidade
  52. 52. Protótipo em altafidelidade
  53. 53. Sketchs ouRabiscos
  54. 54. Cubezilla
  55. 55. Sketches de Jonas Lowgren
  56. 56. BrainstormingObjetivo: máximo de ideias possível.Não inibir os demais: ambiente deliberdade = criatividade.Que ajuda a evitar aconformidadeE writestormingtambém!
  57. 57. Sobre WritestormingVídeos de Psicologia:Testes de conformidade
  58. 58. Anotação de ideias• Não ficar nas listas! Tornar visual! :)• Modelos conceituais• Diagrama de afinidades
  59. 59. • Arquivar◦ Tagear■ Agrupar tags• Compartilhar◦ Indicar para amigos◦ Linkar no blog■ No post■ Na linkroll◦ Fornecer RSS Feeds◦ Compartilhar tags• Reencontrar◦ Buscar por palavra-chave◦ Filtrar por tags■ Ver tags relacionadas• Descobrir◦ Nos populares◦ Indicados por amigos◦ Assinados■ Tag X■ Usuário Y
  60. 60. Diagrama de afinidades
  61. 61. Flickr User Model,Bryce Glass
  62. 62. Diagrama deafinidades
  63. 63. Criatividade: Brainstorminge prototipação com sketches• Fazer sessões de brainstorming ou writestorming paraaquecer• Gerar o máximo de ideias possíveis. Não ironizarideias absurdas >:’(• Anotar todas as ideias em post-its.Sempre que possível, anotar de forma visual (sketche)• Grudar os post-its no A3, por afinidades, formandomodelos conceituais.
  64. 64. ATIVIDADE1. Gerar muitas ideias realizando umbrainstorming e conversando2. Rabiscar (prototipação em baixafidelidade) fazendo sketches ecolaborando com outros sketches3. Anotar tudo em modelos conceituais
  65. 65. CRIAÇÃO1. Criação dos primeiros fluxos deinteração2. Prototipação em papel dosWireframes
  66. 66. Navegação e tempo• O tempo é um dos diferenciaisdo Design de Interação peranteoutras disciplinas de UX• Interações possuemandamentos, ritmos• Narrativa, Ritmo e Dança:conduzir e ser conduzidoParangolé
  67. 67. Interface gráfica do StepMania.Conduza seu corpo (pés, olhos, pernas...) de acordo com os sinais exibidos.
  68. 68. TextoInterface gráfica do Rock Band.Conduza seu corpo (dedos, olhos, mãos, braços...) de acordo com os sinais exibidos.
  69. 69. A dança dos dedosConduza a ponta dos seus dedos...
  70. 70. Interface do Gtalk. O “Pessoa está digitando...” indica que algo está acontecendo etambém de que algo está para acontecer (chegar a mensagem). Muda a forma de interagir.
  71. 71. Interface de Add-on no Firefox. Ele não permite que você clique instantaneamenteno botão “Instalar”, obrigando a esperar 3 segundos. Com isso sugere um breakdown.
  72. 72. Sites de download: versões pagas e gratuitas. Velocidade e lentidão como argumentopara compra de um serviço do site. O design visual força a ideia de que ter que esperar é ruim.Mas porque 19 minutos é lento se, em alguns lugares (ou no passado), era rápido?
  73. 73. Antiga tela de erro do orkut
  74. 74. Diagramas
  75. 75. Humano ComputadorInteraçãoComo formalizar / diagramar?
  76. 76. Diagrama de Navegação,Sitegrama ou Mapa do site+ Computador
  77. 77. Representa a interaçãoentre papéis de usuáriosDiagrama Sequencial+ Humano
  78. 78. Diagrama SequencialNegativo
  79. 79. Fluxogramaou fluxo de tarefa+ Interação
  80. 80. Planejamento da Curvade Aprendizado
  81. 81. 022,54567,5901 semana 2 semanas 3 semanas 4 semanasAdobe PhotoshopCorel Photopaint
  82. 82. Prototipação:wireframes
  83. 83. Wireframe Momento de definição:especificação
  84. 84. Wireframe
  85. 85. Protótipo em alta fidelidade
  86. 86. Sketche: protótipo em baixa fidelidade
  87. 87. Protótipo em papel
  88. 88. MockupProtótipo que permite testarfuncionalidades com usuários
  89. 89. Wireflow
  90. 90. ATIVIDADE1. Criação dos primeiros fluxos deinteração2. Prototipação em papel dosWireframesConvergente!
  91. 91. AVALIAÇÃO1. Avaliação das telas pelasheurísticas de Nielsen2. Teste de Usabilidade
  92. 92. Análise cognitivaO que o usuárioprecisa saber?O que a interfaceexplica?PropiciaçãoO que o usuárioprecisa lembrar?O que a interfacearmazena?MemóriaO que o usuáriopode descobrir?O que a interfacepropõe?Descompasso
  93. 93. Avaliação heurística• Tipo de avaliação de especialista, na qual os avaliadoresbaseiam-se em princípios de usabilidade próprios oudesenvolvidos por outros especialistas.• Uma heurística é uma regra indutiva, baseada naexperiência, e exposta de forma sintética
  94. 94. Ação crítica ao lado de açãorotineira (Heurística 2 -Prevenção de erros)
  95. 95. Botão sonecadestacado(Heurística 7 -Atalhos)Auto é pra ligar o rádio quandotocar o alarme, mas não estáclaro isso. (Heurística 2 -Linguagem familiar)
  96. 96. Heurísticas de Nielsen1. Percepção do Status do Sistema (feedback)2. Falar a linguagem do usuário (utilizar uma linguagem familiar,fazendo o sistema e omundo real corresponderem)3. Saídas claramente demarcadas (controle e liberdade de utilização - atalhos,opções,desfazer,sair...deve estar claro e ser possível)4. Consistência e padrões (uma mesma ação deve sempre ter o mesmo efeito)5. Prevenção de erros6. Minimizar a sobrecarga de memória do usuário (memória curta e aprendizado)7. Os utilizadores inexperientes e especialistas utilizam os sistemasdiferenciadamente (oferecer atalhos,por exemplo)8. Estética e design minimalista (oferecer a informação que o usuário precisa nomomento,nem mais nem menos)9. Ajudar os utilizadores a reconhecer,diagnosticar e corrigir os erros (construirboas mensagens de erro,contextualizar e explicar o que acontece no sistema)10. Ajuda e Documentação
  97. 97. Etapas da avaliação heurística1. Escolher os avaliadores2. Definir as heurísticas a serem utilizadas3. Executar a avaliação4. Cada problema encontrado deve ser relacionado àuma heurística5. Promover a discussão entre os avaliadores6. Redigir relatório7. Priorizar problemas encontrados
  98. 98. Teste de Usabilidade• Permite compreender melhor a interação do usuáriocom um produto• Receber feedback sobre o design• Avaliar situação• Comparar com a concorrência e convencer chefes eequipes ;)• Pode ser realizado em laboratório, em contexto ou adistância
  99. 99. Laboratório de Usabilidade
  100. 100. Eye-trackingÁreas onde o usuáriofixou o olharCaminho do olhar
  101. 101. Métricas• Eficiência• Tempo de execução da tarefa• Taxa de erros• Eficácia• Taxa de conclusão da tarefa• Satisfação• Questionário de avaliação subjetiva
  102. 102. Exemplo de questionário de satisfação pós-teste
  103. 103. ATIVIDADE1. Avaliação dos projetosapresentados pelas heurísticas deNielsen
  104. 104. APRESENTAÇÃO• Apresentação dos projetos dosgrupos!
  105. 105. Para se aprofundar...• Barbosa e Silva - Interação Humano Computador• Usabilidoido: www.usabilidoido.com.br• Saffer - Designing for Interaction• Cooper - About Face 3• Dan Brown - Communication Design• Information Architecturefor theWorldWideWeb
  106. 106. Obrigado!Rodrigo Freese Gonzattowww.gonzatto.comrodrigo@gonzatto.com
  1. A particular slide catching your eye?

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

×