Oficina de Introdução ao Design de Interação
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,064 views

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

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

Statistics

Views

Total Views
1,064
Views on SlideShare
1,064
Embed Views
0

Actions

Likes
0
Downloads
17
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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 SociedadeProfessor:‣ Graduação:PUCPR - Design Digital - Hipermídia‣ Pós-graduação:UTFPR Londrina - Design de Interação
  • 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) View slide
  • Design LivreFundamentos teóricosdo Design de InteraçãoArte & TecnologiaRelações entreTecnologia e SociedadeNovas mídias e questõesétnicas e de gênero View slide
  • 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
  • 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, FluxogramasTarde• Wireframes, Storyboard,• Prototipação em Papel• Análise Heurística,Teste de Usabilidade
  • 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.
  • O que é Design de Interação?• Campo de pesquisa interdisciplinar• Origens: Design Participativo (Sistemas de Informação)Interação Humano Computador (Computação) /+ Design
  • 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).
  • 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”
  • 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.”
  • 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
  • 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 dos briefings queserão apresentados a seguir...PREPARAÇÃO
  • 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 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.
  • 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?
  • 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.
  • 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.
  • 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.
  • Modelo funil(Karine Drummond)
  • Diverge Convergeespecificadefiniçõescompreensãoexplorapossibilidadesambiguidadepesquisa > requerimentos > design >testes comusuáriosrefinamentodo protótipo>
  • 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 sintetizam dadoscoletados em pesquisas
  • 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).
  • 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?
  • 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
  • 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?
  • 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)
  • 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 sketches ecolaborando com outros sketches3. Anotar tudo em modelos conceituais
  • especificadefiniçõescompreensãoexplorapossibilidadesambiguidadeDiverge Converge
  • Diverge Convergeprimeirasideiasideiapara serdesenvolvidaanálise edescartemuitaspossibilidadesgeração(tese eantítese)iníciodo projetofinaldo projeto
  • 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
  • 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 evitar aconformidadeE writestormingtambém!
  • 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 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
  • 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 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.
  • ATIVIDADE1. Gerar muitas ideias realizando umbrainstorming e conversando2. Rabiscar (prototipação em baixafidelidade) fazendo sketches ecolaborando com outros sketches3. Anotar tudo em modelos conceituais
  • 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 possuemandamentos, ritmos• Narrativa, Ritmo e Dança:conduzir e ser conduzidoParangolé
  • 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 (chegar a mensagem). Muda a forma de interagir.
  • 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.
  • 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?
  • 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 interfacearmazena?MemóriaO que o usuáriopode descobrir?O que a interfacepropõe?Descompasso
  • 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
  • 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ística 2 -Linguagem familiar)
  • 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
  • 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
  • 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
  • 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• Questionário de avaliação subjetiva
  • 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 - Designing for Interaction• Cooper - About Face 3• Dan Brown - Communication Design• Information Architecturefor theWorldWideWeb
  • Obrigado!Rodrigo Freese Gonzattowww.gonzatto.comrodrigo@gonzatto.com