Interação Humano

(1)

INF1403 – Introdução a IHC

INF1403 – Introdução a IHC ¹

Interação

Interação Humano Humano--Computador Computador

Design:

Design: Primeiras Primeiras noções noções

www.inf.puc

www.inf.puc--rio.br/~inf1403rio.br/~inf1403

(2)

Interação Humano

Interação Humano--Computador Computador

o sistema

é

a interface

interface

funcionalidade usuário

a interface

(3)

Interação Humano

Interação Humano--Computador Computador

contato interface

comunicação +

interação

+

(4)

Interface e Interação Interface e Interação

(5)

Usabilidade, Comunicabilidade, Acessibilidade Usabilidade, Comunicabilidade, Acessibilidade

Uma tripla indissociável:

cada um dos três conceitos está inevitavelmente

ligado aos demais.

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

(6)

Interação Humano

Interação Humano--Computador Computador

design

previsão

apoiar pessoas centrado no usuário

interface

design

avaliação

explicação

apoiar pessoas

elaborar alternativas

medir retorno de investimento

avaliar alternativas

observar o uso

(7)

O que é

O que é design design? ?

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

–

– 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

(8)

INF1403 – Introdução a IHC INF1403 – Introdução a IHC

Processo de Design de IHC Processo 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 design Etapas 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ção

Processo Interpretativo Processo Interpretativo e Iterativo

e Iterativo

(9)

INF1403 – Introdução a IHC INF1403 – Introdução a IHC

Conhecimentos úteis no processo de design Conhecimentos úteis no processo de design

•• Técnicas Té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))

•• Teorias Teorias

Estudaremos

Estudaremos no no decorrerdecorrer

–

– TeoriasTeorias sociaissociais –

– TeoriasTeorias dada comunicaçãocomunicação e e semióticasemiótica –

– TeoriasTeorias psicológicaspsicológicas –

– ConhecimentoConhecimento de de ergonomiaergonomia

•• Cultura Cultura Geral Geral

Estudaremos

Estudaremos no no decorrerdecorrer do

do cursocurso::

*

* EngenhariaEngenharia CognitivaCognitiva

*

* TeoriaTeoria dada AtividadeAtividade

*

* EngenhariaEngenharia SemióticaSemiótica

(10)

Etapa de Design: Análise da Situação Atual Etapa de Design: Análise da Situação Atual

•• Estudar e interpretar a situação atual Estudar 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,

–

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

tempo, 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.

Oportunidade ou Problema?

(11)

Etapa de Design: Análise da Situação Atual Etapa 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.

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

(12)

Etapa de Design: Análise da Situação Atual Etapa de Design: Análise da Situação Atual

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

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

•• Exemplos: Exemplos:

–

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

(13)

Etapa de Design: Síntese de uma intervenção Etapa de Design: Síntese de uma intervenção

•• Planejar e executar uma interven Planejar e executar uma intervenção ção na na situação situação atual atual

•• Como melhorar a situação atual? Como melhorar a situação atual?

SOLUÇÃO

•• Possíveis Soluções Possí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

(14)

Etapa de Design: Síntese de uma intervenção Etapa 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.

(15)

Etapa de Design: Avaliação da nova situação Etapa 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?

–

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

(16)

Resumindo Resumindo

(17)

Exemplos de princípios de design e de exemplos ruins Exemplos de princípios de design e de exemplos ruins

17

•• Correspondência Correspondência entre o entre o sistema sistema e o e o mundo mundo real real

•• Utilize Utilize conceitosconceitos, , vocabuláriovocabulário e e processosprocessos familiaresfamiliares aosaos usuários

usuários

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

(18)

Visibilidade Visibilidade

• Painel de controle de elevador de hotel

• Como funciona?

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

• 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

(19)

Visibilidade Visibilidade

…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

• 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

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

no elevador

• tornar partes relevantes visíveis

• tornar óbvio o que se tem que fazer

(20)

Feedback Feedback

•• Mandar Mandar informação informação de de volta volta ao ao usuário usuário em em consequência consequência das das suas

suas ações ações

•• Ex.: Ex.: som som, highlighting, , highlighting, animação animação e e combinações combinações disso disso

•• Ex.: Ex.: quando quando clica clica botão botão, , há há feedback feedback sonoro sonoro e highlight e highlight vermelho

vermelho::

“ccclichhk”

(21)

Mapeamento Mapeamento

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

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

www.baddesigns.com

(22)

Mapeamento Mapeamento

(i) A: mapeamento adjacente (i) A: mapeamento adjacente entre indicação e conector entre indicação e conector

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

www.baddesigns.com

(23)

–

– 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ência Consitência

1 2 3 4 5 6

7 8 9

1 2 3 4 5 6

0 0

(a) Telefones e controles remotos (b) calculadoras, teclados PC

(24)

Características

Características--chave do processo de chave do processo de design design de IHC de IHC

1. 1. Manter sempre o foco no usuário Manter sempre o foco no usuário 2.

2. Estabelecer objetivos específicos com relação à Estabelecer objetivos específicos com relação à

24

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 tenha experiência que se espera que o usuário tenha 3.

3. Iterar o processo Iterar o processo

24

(25)

Processos

Processos de Design: Design de Design: Design Centrado Centrado no no Usuário Usuário

desenvolvimento centrado no

sistema

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

desenvolvimento centrado no usuário

desenvolvimento situado no contexto

organizacional e social

25

(26)

Atividade para a próxima aula Atividade 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 websites websites 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 Rede

na Rede

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

para o impacto reportado acima

•• Apresente perguntas que lhe ocorreram e cujas respostas te Apresente perguntas que lhe ocorreram e cujas respostas te interessaria saber

interessaria saber

(27)