InteraçãoInteração Humano...
-
Upload
hoanghuong -
Category
Documents
-
view
213 -
download
0
Transcript of InteraçãoInteração Humano...
INF1403 – Introdução a IHCINF1403 – Introdução a IHC 1
InteraçãoInteração HumanoHumano--ComputadorComputadorDesign: Design: PrimeirasPrimeiras noçõesnoções
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
www.inf.pucwww.inf.puc--rio.br/~inf1403rio.br/~inf1403
INF1403 – Introdução a IHC
Interação HumanoInteração Humano--ComputadorComputador
o sistema
éa interface
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
interface
funcionalidadeusuário
a interface
INF1403 – Introdução a IHC
Interação HumanoInteração Humano--ComputadorComputador
contatointerface
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
comunicação
+
interação
+
INF1403 – Introdução a IHC
Interface e InteraçãoInterface e Interação
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
INF1403 – Introdução a IHC
Usabilidade, Comunicabilidade, AcessibilidadeUsabilidade, Comunicabilidade, Acessibilidade
Uma tripla indissociável:
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
cada um dos três conceitosestá inevitavelmente ligado aos demais.
Foto em: http://www.okokchina.com/Files/uppic6/Cartier%20Trinity%20Ring495.jpg
INF1403 – Introdução a IHC
Interação HumanoInteração Humano--ComputadorComputador
designprevisão
apoiar pessoas
centrado no usuário
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
interface
design
avaliaçãoexplicação
apoiar pessoas
elaborar alternativas
medir retorno de investimento
avaliar alternativas
observar o uso
INF1403 – Introdução a IHC
O que é O que é designdesign??
•• Projeto (ou design) é “plano ou concepção intelectual que será Projeto (ou design) é “plano ou concepção intelectual que será executada posteriormente”executada posteriormente”
•• Nosso foco em Nosso foco em IHCIHC
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
–– designdesign de “produtos interativos que forneçam suporte às atividades de “produtos interativos que forneçam suporte às atividades
cotidianas das pessoas, seja no lar ou no trabalho”.cotidianas das pessoas, seja no lar ou no trabalho”.
7
INF1403 – Introdução a IHCINF1403 – Introdução a IHC
Processo de Design de IHCProcesso de Design de IHC
•• O que é design (de IHC)?O que é design (de IHC)?
–– Uma Uma intervençãointervenção na situação atual (para mudar e “melhorar” o estado na situação atual (para mudar e “melhorar” o estado
corrente das coisas).corrente das coisas).
•• Etapas fundamentais do designEtapas fundamentais do design
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
•• Etapas fundamentais do designEtapas fundamentais do design
–– Análise da situação atualAnálise da situação atual
–– Síntese de uma intervençãoSíntese de uma intervenção
–– Avaliação da nova situaçãoAvaliação da nova situação
•Análise da situação atual
•Síntese de uma intervenção
•Avaliação da nova situação •Análise da situação atual
•Síntese de uma intervenção
•Avaliação da nova situaçãoProcesso InterpretativoProcesso Interpretativoe Iterativoe Iterativo
INF1403 – Introdução a IHCINF1403 – Introdução a IHC
Conhecimentos úteis no processo de designConhecimentos úteis no processo de design
•• TécnicasTécnicas
–– TécnicasTécnicas de design (e.g. de design (e.g. prototipaçãoprototipação, storyboarding), storyboarding)
–– TécnicasTécnicas de de análiseanálise (e.g. (e.g. etnometodologiaetnometodologia))
•• TeoriasTeoriasEstudaremosEstudaremos no no decorrerdecorrer
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
–– TeoriasTeorias sociaissociais
–– TeoriasTeorias dada comunicaçãocomunicação e e semióticasemiótica
–– TeoriasTeorias psicológicaspsicológicas
–– ConhecimentoConhecimento de de ergonomiaergonomia
•• CulturaCultura GeralGeral
EstudaremosEstudaremos no no decorrerdecorrerdo do cursocurso::
* * EngenhariaEngenharia CognitivaCognitiva* * TeoriaTeoria dada AtividadeAtividade* * EngenhariaEngenharia SemióticaSemiótica
INF1403 – Introdução a IHC
Etapa de Design: Análise da Situação AtualEtapa de Design: Análise da Situação Atual
•• Estudar e interpretar a situação atualEstudar e interpretar a situação atual
–– Pessoas (usuários e stakeholders),Pessoas (usuários e stakeholders),
–– Contexto Físico, Social e Cultural de uso,Contexto Físico, Social e Cultural de uso,
–– Artefatos,Artefatos,
–– Processos,Processos,
•Análise da situação atual•Síntese de uma intervenção
•Avaliação da nova situação
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
–– Processos,Processos,
–– ......
•• Qual o foco?Qual o foco?
–– Isto dependerá de quais assuntos serão tratados (o domínio), os Isto dependerá de quais assuntos serão tratados (o domínio), os
objetivos das pessoas envolvidas (usuários e demais stakeholders), objetivos das pessoas envolvidas (usuários e demais stakeholders),
tempo, orçamento, mãotempo, orçamento, mão--dede--obra disponível e até a folosofia de obra disponível e até a folosofia de
trabalho.trabalho.
–– Diferentes focos de análise contribuem para diferentes interpretações.Diferentes focos de análise contribuem para diferentes interpretações.
Oportunidadeou Problema?
INF1403 – Introdução a IHC
Etapa de Design: Análise da Situação AtualEtapa de Design: Análise da Situação Atual
•• Qual o produto desta etapa?Qual o produto desta etapa?
–– Uma interpretação da realidade estudadaUma interpretação da realidade estudada
–– Um enquadramento e um recorte particular dela.Um enquadramento e um recorte particular dela.
–– Necessidades e Oportunidades de melhoria para as quais será Necessidades e Oportunidades de melhoria para as quais será
projetada uma intervenção.projetada uma intervenção.
•Análise da situação atual•Síntese de uma intervenção
•Avaliação da nova situação
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
projetada uma intervenção.projetada uma intervenção.
•• Em IHC representadas por Em IHC representadas por METAS DE DESIGNMETAS DE DESIGN..
INF1403 – Introdução a IHC
Etapa de Design: Análise da Situação AtualEtapa de Design: Análise da Situação Atual
•• Objetivos dos usuários eObjetivos dos usuários e
•• Critérios de qualidade de UsoCritérios de qualidade de Uso
•• Exemplos:Exemplos:
•Análise da situação atual•Síntese de uma intervenção
•Avaliação da nova situação
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
–– Situação 1: Usuários gastam muito tempo processando informações. Situação 1: Usuários gastam muito tempo processando informações.
Um sistema computacional poderia fazer a mesma tarefa mais Um sistema computacional poderia fazer a mesma tarefa mais
rapidamente.rapidamente.
•• META DE DESIGN: Aumentar a eficiência das atividades dos usuários META DE DESIGN: Aumentar a eficiência das atividades dos usuários
(Usabilidade)(Usabilidade)
–– Situação 2: Vários usuários encontram dificuldades para usar sistemas Situação 2: Vários usuários encontram dificuldades para usar sistemas
semelhantes porque não compreendem como funcionam.semelhantes porque não compreendem como funcionam.
•• META DE DESIGN: Comunicar adequadamente através da interface a visão META DE DESIGN: Comunicar adequadamente através da interface a visão
do designer sobre as operações que o usuário pode realizar com o sistema do designer sobre as operações que o usuário pode realizar com o sistema
(COMUNICABILIDADE).(COMUNICABILIDADE).
INF1403 – Introdução a IHC
Etapa de Design: Síntese de uma intervençãoEtapa de Design: Síntese de uma intervenção
•• Planejar e executar uma intervenPlanejar e executar uma intervençãoção nana situaçãosituação atualatual
•• Como melhorar a situação atual?Como melhorar a situação atual?
•Análise da situação atual
•Síntese de uma intervenção•Avaliação da nova situação
SOLUÇÃO
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
•• Possíveis SoluçõesPossíveis Soluções
–– Novo sistema interativoNovo sistema interativo
–– Uma nova versão de um sistemaUma nova versão de um sistema
–– Mudança nos processos, sem alteração nos sistemas utilizados.Mudança nos processos, sem alteração nos sistemas utilizados.
SOLUÇÃO
INF1403 – Introdução a IHC
Etapa de Design: Síntese de uma intervençãoEtapa de Design: Síntese de uma intervenção
•• O projeto de um sistema interativo deve definir uma solução de IHC O projeto de um sistema interativo deve definir uma solução de IHC com alta qualidade de uso para impactar a situação atual e a vida com alta qualidade de uso para impactar a situação atual e a vida dos usuários conforme pretendido.dos usuários conforme pretendido.
•Análise da situação atual
•Síntese de uma intervenção•Avaliação da nova situação
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
INF1403 – Introdução a IHC
Etapa de Design: Avaliação da nova situaçãoEtapa de Design: Avaliação da nova situação
•• Verificar o efeito da intervenção, comparando a situação analisada Verificar o efeito da intervenção, comparando a situação analisada anteriormente com a nova situação, atingida após a intervenção.anteriormente com a nova situação, atingida após a intervenção.
•• Quando avaliar?Quando avaliar?
•Análise da situação atual
•Síntese de uma intervenção
•Avaliação da nova situação
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
–– Durante a concepção e desenvolvimento da intervençãoDurante a concepção e desenvolvimento da intervenção
–– Logo antes da introdução da intervençãoLogo antes da introdução da intervenção
–– Depois da intervenção ter sido aplicadaDepois da intervenção ter sido aplicada
•• O quê avaliar (em IHC)?O quê avaliar (em IHC)?
–– Se interface e interação atendem aos critérios de qualidade de uso Se interface e interação atendem aos critérios de qualidade de uso
definidos como prioritários na análise da situação atual.definidos como prioritários na análise da situação atual.
Onde o custo será menor?
INF1403 – Introdução a IHC
ResumindoResumindo
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
INF1403 – Introdução a IHC
Exemplos de princípios de design e de exemplos ruinsExemplos de princípios de design e de exemplos ruins
17
•• CorrespondênciaCorrespondência entre o entre o sistemasistema e o e o mundomundo realreal•• Utilize Utilize conceitosconceitos, , vocabuláriovocabulário e e processosprocessos familiaresfamiliares aosaos
usuáriosusuários
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
O que esses símbolos querem dizer no painel do carro????
INF1403 – Introdução a IHC
VisibilidadeVisibilidade• Painel de controle de elevador de hotel
• Como funciona?
• Apertando o botão do andar que você quer ir?
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
• Nada acontece! Aperto outro botão? Nada!!!! O que eu tenho que fazer?
Não está visível o que eu tenho que fazer!www.baddesigns.com
INF1403 – Introdução a IHC
VisibilidadeVisibilidade
…você tem que inserir o cartão do seu quarto no slot ao lado dos botões …você tem que inserir o cartão do seu quarto no slot ao lado dos botões para o elevador funcionar!para o elevador funcionar!
Como tornar essa ação mais Como tornar essa ação mais visível?visível?
• tornar o leitor do cartão mais óbvio• tornar o leitor do cartão mais óbvio• mensagem sonora, indicando o que fazer (em que língua?)• mensagem sonora, indicando o que fazer (em que língua?)• colocar grande • colocar grande ““avisoaviso”” ao lado do leitor, que pisque sempre que alguem entra ao lado do leitor, que pisque sempre que alguem entra
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
• colocar grande • colocar grande ““avisoaviso”” ao lado do leitor, que pisque sempre que alguem entra ao lado do leitor, que pisque sempre que alguem entra no elevadorno elevador
• tornar partes relevantes visíveis• tornar partes relevantes visíveis
• tornar óbvio o que se tem que fazer• tornar óbvio o que se tem que fazer
INF1403 – Introdução a IHC
FeedbackFeedback
•• MandarMandar informaçãoinformação de de voltavolta aoao usuáriousuário emem consequênciaconsequência das das suassuas açõesações
•• Ex.: Ex.: somsom, highlighting, , highlighting, animaçãoanimação e e combinaçõescombinações dissodisso
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
•• Ex.: Ex.: somsom, highlighting, , highlighting, animaçãoanimação e e combinaçõescombinações dissodisso
•• Ex.: Ex.: quandoquando clicaclica botãobotão, , háhá feedback feedback sonorosonoro e highlight e highlight vermelhovermelho::
“ccclichhk”
INF1403 – Introdução a IHC
MapeamentoMapeamento
•• Onde plugo o mouse? Onde plugo o mouse?
•• Onde plugo o teclado?Onde plugo o teclado?
•• Conector de baixo ou de cima?Conector de baixo ou de cima?
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
•• Os ícones coloridos ajudam?Os ícones coloridos ajudam?
www.baddesigns.com
INF1403 – Introdução a IHC
MapeamentoMapeamento(i) A: mapeamento adjacente (i) A: mapeamento adjacente
entre indicação e conectorentre indicação e conector
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
(ii) B: associação de cores(ii) B: associação de cores
www.baddesigns.com
INF1403 – Introdução a IHC
–– Ex: Ex: ctrlctrl+c e +c e ctrlctrl+v em todas as aplicações+v em todas as aplicações
–– Ex. de inconsistência:Ex. de inconsistência:
ConsitênciaConsitência
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
1 2 3
4 5 6
7 8 9
7 8 9
1 2 3
4 5 6
0 0
(a) Telefones e controles remotos (b) calculadoras, teclados PC
INF1403 – Introdução a IHC
CaracterísticasCaracterísticas--chave do processo de chave do processo de designdesign de IHCde IHC
1.1.Manter sempre o foco no usuárioManter sempre o foco no usuário
2.2.Estabelecer objetivos específicos com relação à Estabelecer objetivos específicos com relação à
24
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
2.2.Estabelecer objetivos específicos com relação à Estabelecer objetivos específicos com relação à
experiência que se espera que o usuário tenhaexperiência que se espera que o usuário tenha
3.3. Iterar o processoIterar o processo
2424
INF1403 – Introdução a IHC
ProcessosProcessos de Design: Design de Design: Design CentradoCentrado no no UsuárioUsuário
desenvolvimento centrado no sistema
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
� envolvimento de usuários no processo de design
� considerações sobre grupos de usuários com tarefas e papéis diferentes (ex: gerentes e técnicos)
� importância da qualidade de IHC
desenvolvimentocentrado no usuário
desenvolvimentosituado no contextoorganizacionale social
25
INF1403 – Introdução a IHC
Atividade para a próxima aulaAtividade para a próxima aula
•• Exemplo(s) prático(s) do impacto de bom/mau design de interação Exemplo(s) prático(s) do impacto de bom/mau design de interação sobre a vida das pessoas (noticiado ou ilustrado em sobre a vida das pessoas (noticiado ou ilustrado em websiteswebsites de de boa reputação jornalística/documental ou técnica) que encontrem boa reputação jornalística/documental ou técnica) que encontrem na Redena Rede
•• Discuta [Lacuna(s) de] Competência(s)/conhecimento(s) ou Discuta [Lacuna(s) de] Competência(s)/conhecimento(s) ou
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP
•• Discuta [Lacuna(s) de] Competência(s)/conhecimento(s) ou Discuta [Lacuna(s) de] Competência(s)/conhecimento(s) ou princípio de design (não) utilizado que, na sua opinião, contribuíram princípio de design (não) utilizado que, na sua opinião, contribuíram para o impacto reportado acimapara o impacto reportado acima
•• Apresente perguntas que lhe ocorreram e cujas respostas te Apresente perguntas que lhe ocorreram e cujas respostas te interessaria saberinteressaria saber
INF1403 – Introdução a IHC
ReferênciasReferências
LivroLivro –– capítulocapítulo 4 (4 (atéaté 4.1).4.1).
BARBOSA, S.D.J.; SILVA, B.S. Interação HumanoBARBOSA, S.D.J.; SILVA, B.S. Interação Humano--Computador. Computador. Editora CampusEditora Campus--ElsevierElsevier, 2010., 2010.
© SERG 2014
SEMIOTIC ENGINEERING RESEARCH GROUP