ihc aula 11 -design de interação - ticianne ribeiro
TRANSCRIPT
![Page 1: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/1.jpg)
Interação Humano - Computador
Profa. Ticianne Ribeiro
Sistemas e Mídias Digitais
![Page 2: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/2.jpg)
Aula XI
Design de Interação
![Page 3: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/3.jpg)
Objetivos
• Motivar e definir o processo de Design de Interação
• Explicar os passos componentes do DI
• Expo questões práticas quanto ao uso do DI
![Page 4: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/4.jpg)
Processos de Design de IHC
![Page 5: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/5.jpg)
Propostas de processos de design de
IHC
• Ciclo de vida em estrela
• 2 ciclos de vida para Engenharia de Usabilidade
• Design Contextual
• Design baseado em cenários
• Design dirigido por objetivos
• Design centrado na comunicação
![Page 6: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/6.jpg)
Modelo Simples do Processo de
IHC (Preece, Sharp e Rogers 2007)
Identificar necessidadese requisitos
Design
Construir protótipo
Avaliar
Produto Final
(Re)Design
![Page 7: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/7.jpg)
O que é Design de Interação?
![Page 8: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/8.jpg)
Pense...
• Com quantos dispositivos ou sistemas você interage diariamente?
![Page 9: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/9.jpg)
Com quantos dispositivos ou sistemas
você interage diariamente?
![Page 10: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/10.jpg)
Agora responda...
• Quantos deles são
– Agradáveis e fáceis de utilizar?
– Eficientes na interação?
• Alguma vez você simplesmente não soube como utilizar um sistema?
![Page 11: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/11.jpg)
Por que isso acontece?
• A maioria dos sistemas que necessita de interação com usuário é:
![Page 12: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/12.jpg)
![Page 13: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/13.jpg)
![Page 14: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/14.jpg)
Uma solução: focar no usuário!
• Sistemas que exigem interação devem considerar:
– Quem são os usuários
– Quais as suas necessidades
– Que tipo de interação pode haver
– Como prover interação eficiente
![Page 15: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/15.jpg)
Design de Interação (DI)
• Definição
– Uma subdisciplina do Design e um processo voltado ao projeto das interações entre pessoas e sistemas.
• Abordagem de desenvolvimento centrada no usuário
– Preocupações do usuário direcionam
o desenvolvimento
![Page 16: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/16.jpg)
Vantagens da aplicação do DI
• Melhoria da usabilidade do Sistema
– Eficácia no uso, boa utilidade, fácil de aprender e lembrar como se usa
• Melhoria da experiência do usuário do sistema
– Satisfatório, compensador, agradável, esteticamente apreciável e motivador
![Page 17: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/17.jpg)
Atividades Básicas do DI
![Page 18: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/18.jpg)
Identificar necessidades e estabelecer requisitos As preocupações das pessoas direcionam o desenvolvimento mais do que as preocupações técnicas.
![Page 19: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/19.jpg)
1: Identificar Necessidades /
Estabelecer Requisitos
• Identificar necessidades:
– Base do desenvolvimento centrado no usuário
• O que estamos tentando alcançar?
• Como podemos conseguir isso?
• Coleta de dados
– Reunir informações suficientes para produzir um conjunto estável de requisitos
– Questionários, entrevista, observação etc.
![Page 20: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/20.jpg)
Desenvolver designs alternativos “Para ter uma boa idéia, tenha muitas idéias” Rettig, 1994
![Page 21: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/21.jpg)
2: Desenvolver Designs
Alternativos
• Atividade central do design – Sugerir idéias que atendam aos requisitos
– Sugerir diversos designs alternativos
• Design Conceitual – Modelo conceitual do sistema
– Descreve: o que o sistema faz, como se comporta, com o que parece (comportamentalmente)
• Design Físico – Considera detalhes visuais
– Descreve: cores, sons, imagens, design do menu
![Page 22: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/22.jpg)
Construir versões interativas dos designs Uma forma com a qual os usuários possam interagir de alguma forma é uma ferramenta bastante poderosa.
![Page 23: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/23.jpg)
3: Desenvolver Versões
Interativas
• Obter uma prévia da interação para cada design selecionado
• Dar vida a uma ideia
• Testar a realidade de um artefato
• Protótipo: versão interativa mais utilizada para sistemas web
– Prototipação em papel, Wireframing, Mock up, Protótipo navegável
![Page 24: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/24.jpg)
Avaliar os designs Dificilmente uma idéia boa e inovadora é obtida “de primeira” pela equipe de design
![Page 25: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/25.jpg)
4: Avaliar o Produto
• Processo de determinação da:
– Usabilidade e aceitabilidade do sistema e design
• Medida por diversos fatores
– Número de erros cometido pelos usuários
– Se preenche os requisitos
– Se o design é atraente
• Não substitui uma etapa de testes , mas complementa
– Determinar metas, coletar dados, analisá-las e interpretá-las.
![Page 26: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/26.jpg)
Brincadeiras aplicadas ao Design
de Interação
http://www.youtube.com/watch?v=jiCPnr_A0dg
![Page 27: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/27.jpg)
Caracteristicas Chave do DI
![Page 28: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/28.jpg)
Parte Fundamental do DI
• Focar no usuário!
• Objetivos específicos e experiência do usuário
• Iteração para refinar o design, com base em feedback
![Page 29: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/29.jpg)
Questões Práticas: Quem são os
usuários?
• Parece uma tarefa trivial, mas não é
• Há um conjunto surpreendente de “usuários”
– Rede de stakeholders muito extensa
• Envolver todos os stakeholders?
• Envolver apenas os que serão “mais impactados?”
![Page 30: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/30.jpg)
Saber quem são os usuários significa
que você está apto a tomar uma
decisão consciente, a respeito de
quem deve estar envolvido e em que
nível.
![Page 31: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/31.jpg)
Questões Práticas: O que queremos
dizer com necessidades?
• - Do que você precisa?
– (mas o usuário nem sempre sabe o que é possível)
• As características dos usuários afetam o design
– Tamanho das mãos, capacidades motoras, força, diversidade cultural, experiência...
• Como consultar os usuários se o produto for uma nova invenção?
– Antes da invenção do forno microondas, como perguntaram para os usuários quais eram suas necessidades?
![Page 32: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/32.jpg)
Questões Práticas: Como criar
designs alternativos?
• De onde vem essas ideias alternativas?
– Tino e criatividade do designer
– Enxerto de ideias de aplicações diferentes
– Evolução de produtos por meio da observação e cópia (?) de designs semelhantes
• Restrições frequentemente diminuem as altenativas
![Page 33: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/33.jpg)
O especialista é aquele que
lembra da sua última experiência
a fim de que ela o ajude a
processar as atuais. Schank 1982
![Page 34: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/34.jpg)
Questões Práticas: Como escolher uma
dentre as alternativas de design?
• Tomar decisões por certos designs – Ex.: entrada de dados via teclado ou via touch screen?
• Decisões tomadas de acordo com: as informações dos usuários, tarefas e viabilidade técnica da idéia
• Duas categorias de decisões – Características visíveis e mensuráveis
– Características não visíveis, variáveis de acordo com a situação
• Decidir pela alternativa de maior qualidade (como é medida essa qualidade?)
![Page 35: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/35.jpg)
Conclusão
![Page 36: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/36.jpg)
O processo do Design de
Interação...
• ... É complementar aos modelos de ciclos de vida de outras áreas
• ... Prevê a construção de versões interativas, comunicáveis e avaliáveis
• ... É caracterizada pela incorporação explicita do envolvimento do usuário, iteração e critérios de qualidade específicos.
![Page 37: Ihc aula 11 -design de interação - ticianne ribeiro](https://reader036.vdocuments.mx/reader036/viewer/2022062303/555b2e57d8b42afc348b49ea/html5/thumbnails/37.jpg)
Dúvidas?