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


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


interface

funcionalidadeusuário

a interface



contatointerface

© SERG 2014


comunicação

+

interação

+


Interface e InteraçãoInterface e Interação

© SERG 2014



Usabilidade, Comunicabilidade, AcessibilidadeUsabilidade, Comunicabilidade, Acessibilidade

Uma tripla indissociável:

© SERG 2014


cada um dos três conceitosestá inevitavelmente ligado aos demais.

Foto em: http://www.okokchina.com/Files/uppic6/Cartier%20Trinity%20Ring495.jpg



designprevisão

apoiar pessoas

centrado no usuário

© SERG 2014


interface

design

avaliaçãoexplicação

apoiar pessoas

elaborar alternativas

medir retorno de investimento

avaliar alternativas

observar o uso


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


–– 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


© SERG 2014


•• 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


•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


© SERG 2014


–– 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


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


–– 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?



•• 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.



© SERG 2014


projetada uma intervenção.projetada uma intervenção.

•• Em IHC representadas por Em IHC representadas por METAS DE DESIGNMETAS DE DESIGN..



•• Objetivos dos usuários eObjetivos dos usuários e

•• Critérios de qualidade de UsoCritérios de qualidade de Uso

•• Exemplos:Exemplos:



© SERG 2014


–– 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).


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?


•Síntese de uma intervenção•Avaliação da nova situação

SOLUÇÃO

© SERG 2014


•• 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


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.


•Síntese de uma intervenção•Avaliação da nova situação

© SERG 2014



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?




© SERG 2014


–– 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?


ResumindoResumindo

© SERG 2014



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


O que esses símbolos querem dizer no painel do carro????


VisibilidadeVisibilidade• Painel de controle de elevador de hotel

• Como funciona?

• Apertando o botão do andar que você quer ir?

© SERG 2014


• 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


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


• 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


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


•• 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”


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


•• Os ícones coloridos ajudam?Os ícones coloridos ajudam?

www.baddesigns.com


MapeamentoMapeamento(i) A: mapeamento adjacente (i) A: mapeamento adjacente

entre indicação e conectorentre indicação e conector

© SERG 2014


(ii) B: associação de cores(ii) B: associação de cores

www.baddesigns.com


–– 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


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


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


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


ProcessosProcessos de Design: Design de Design: Design CentradoCentrado no no UsuárioUsuário

desenvolvimento centrado no sistema

© SERG 2014


� 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


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


•• 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


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


interaçãointeração humano...

Documents