Engenharia de Software

INF 0320 - IHC

interação humano computador

Roberto Pereira
rpereira@inf.ufpr.br
Jesus
vander.silva@ic.unicamp.br

Quinto encontro:
Reset Problem
COM JESUS.
Loading...

1. Zipping
2. O problema é…
3. Restart
3.1. Entendendo o problema;
3.2. A fatia escolhida pelo grupo (Descrever…);
3.3. Elegendo um caminho no espaço;
3.4. Brain write
3.5. Brain draw;
3.6. Prototipado.
4. Tarefinha (?)

5. * Se o trabalho transcorrer sem problemas… Tem mais...

Nossa homenagem a Stephen Hawking

"O maior inimigo do conhecimento não

é a ignorância, é a ilusão do
conhecimento."

"Acredito que o desenvolvimento

pleno da inteligência artificial poderia
significar o fim da raça humana."
(entrevista à BBC, 2014)
Zipping

Construímos soluções tecnológicas para pessoas. Então devemos construir

soluções que façam sentidos para as pessoas! Elas precisam de nossa atenção e
nós precisamos dar atenção a elas… (Parceria - Designer e codesigners).
Por onde começamos

Entrada: um problema que não parece estar bem definido.

Queremos propor uma solução de design para...

Entendimento do problema

Quem contribui com para solução do

problema? Pensar de forma ampla nas
partes interessadas.
Entendimento do problema

As partes interessadas trazem ideias,

anseios, crenças, frustrações. As forças
que elas exercerão durantes as
discussões irão ajudar a direcionar uma
possível solução.
Nosso problema de hoje (Wake up!)

MarketPlace? Já sabemos o que é? Meu

grupo está familiarizado com o problema?

Então, agora vamos pensar num espaço

físico no qual uma loja é responsável e
outras pessoas ou lojas podem vender
seus produtos neste espaço.

O que diferencia um marketplace the

outras lojas?

O que diferenciará o sistema sendo

proposto de outros sistemas de
e-commerce existentes?
Reconfigurando ambientes com IoT...
So, what of the Internet of Things?

Arthur C. Clarke has claimed that “any sufficiently advanced technology is

indistinguish-able from magic,” and given that the Internet of Things
commonly bestowssemi-hidden capabilities onto everyday objects, maybe
the enchanted objects of magic and fairy tale are a good metaphor to help
people grasp the possibilities.
Trocando informação (interação)
Pessoas?

Pessoas x Pessoas x Dispositivos (Objetos)

Solução IoT
Pensar o dispositivo de forma isolada não é uma boa ideia
A interação humana é parte da configuração
Tecnologia Calma (Silenciosa)
Amber Case
Entendimento e aceitação
Conceitos que vamos utilizar para resolver

Internet das coisas [Humanas]

Consideramos que consiste em tecnologias que são acopladas em objetos para

monitorar ambientes nos quais outros sistemas estão interagindo de forma a
ajudar as pessoas.
Vamos pensar um pouco.

Um ambiente (Uma loja…)

- Existem informativos nos objetos da loja? Quais?

- Existem sensores nos objetos?
- Como as pessoas são identificadas, como pagam?
Redefinindo...

Como criar um espaço digital usando o conceitos de objetos se comunicando

neste espaço para auxiliar as pessoas a encontrarem e comprar o que desejam
ou precisam.

O espaço digital será construídos para que pessoas ou lojas possam vender
produtos diretamente à outras pessoas.

A loja irá oferecer todo o suporte para que tudo aconteça. O cliente deve
encontrar o que procura e pegar e pagar ajudado pelos objetos e pessoas.
DSC (Ferramenta)

Endereço: www.nied.unicamp.br/dsc

Compartilhando o mesmo problema com todos.

DSC - Diagramas das Partes Interessadas

Este artefato nos permite pensar numa larga variedade de partes interessadas.

● Rever as partes interessadas, adicionando novas e descrevendo.

DSC - Diagramas das Partes Interessadas

Este artefato nos permite pensar numa larga variedade de partes interessadas.

● Rever as partes interessadas, adicionando novas e descrevendo.

DSC - Quadro de avaliação

Este artefato nos permite antecipar problemas e/ou ideias de soluções. A

liberdade de expor...

● Os interesses/problemas conflitantes e complementares deverão aparecer.

DSC - Quadro de avaliação

Este artefato nos permite antecipar problemas e/ou ideias de soluções. A

liberdade de expor...

● Os interesses/problemas conflitantes e complementares deverão aparecer.

O grupo de pensar...

Como o problema é muito grande para que uma solução possa ser proposta no
curto espaço de tempo que temos, vamos eleger um percurso que vamos tratar.

O entendimento do problema deverá ser uniforme para a equipe. Vamos

descrever o que vamos solucionar?

Grupos em ação! Pensem, discutam e escrevam! Dois grupos socializarão com a

sala. (Sorteio)
Sorteando...
APRESENTAÇÃO RÁPIDA DA IDEIA
Brain write

Todos recebem o número de elementos do grupo + uma folha.

Ao som (grito), comece a atividade escrevendo.

Assim que ouvir passa, pegue sua folha e passe a folha no sentido
horário.

Contribua lendo o que já tem feito e acrescentando ou detalhando

ou abra um novo tópico.

O Giro acaba quando a sua folha retonar até suas mãos.

Brain write

Todos recebem o número de elementos do grupo + uma folha.

Ao som (grito), comece a atividade escrevendo.

Assim que ouvir passa, pegue sua folha e passe a folha no sentido
horário.

Contribua lendo o que já tem feito e acrescentando ou detalhando

ou abra um novo tópico.

O Giro acaba quando a sua folha retonar até suas mãos.

Consolidando.

Lembra da folha sobrando! Vamos consolidar as ideias nela.

Contanto o tempo para que o grupo consolide as ideias para

resolução do problema, ou seja os requisitos que serão tratados.

Cronometro na tela:

Ao término devolva as folhas que foram usadas na prática para

o professor, fique somente com a de consolidação.
Brain draw

Prototipar IoT?
Prototipação da solução

Objetos e relações entre eles (trocando informações)

Objetos e pessoas (Toques, visualizando, capturando)>

Objetos (Telas para interagir… etc…)

Brain draw

Novamente… receberam um quantidade de pessoas + 1 folha.

Começamos com o sinal (“Start”). Faça um protótipo inicial em como vê a

solução.

Ouvindo o sinal “Passa”, entregue a sua folha para o colega que está no sentdido
horário (mão esquerda).

Continue o desenho que chegou. Irá ouvir o “Passa” novamente… repita o

processo de passar para o mesmo lado até que o seu papel volte a sua mão.
Game over?

Não… falta consolidar isto.

Olhem para as ideias dos colegas e para a sua. Busquem convergir para a uma
única solução.

Fechando a consolidação, entreguem as folhas usadas para o professor.

Fechamento da prática - Parte 01

Agora temos um protótipo. O que fazemos com ele?

Ajuste as lentes, limpe os ouvidos...

Lá vem teoria...
São coisas Diferentes?
UX - Ilustrado
UX - Ilustrado
E suas experiências?
Já teve experiência ruim com produto?
Na computação tudo dá certo?
Em computação quem é o monstro?
Em computação quem é o monstro?

Será que erros não aconteceram

antes? (Designer da Solução)
Keep calm… Existe esperança.
Metas
• Desenvolver produtos usáveis
– Usabilidade significa facilidade de aprendizado, efetividade
de uso e experiência agradável
• Envolver os usuários no processo de design
Um pouco mais que envolver...

As pessoas são mais que usuários, são partes interessadas que participaração
como codesigerns.
Jesus está esperando
para trabalharmos no
projeto!
Voltando ao assunto: A experiência do usuário

Como um produto se comporta e é utilizado pelas pessoas no

mundo real
– O que as pessoas sentem sobre o produto, bem como o prazer
e a satisfação ao usar, olhar, segurar e operar este produto
– “todo produto que é utilizado por alguém detém uma
experiência do usuário: jornais, garrafa de ketchup, cadeiras
reclináveis.” (Garrett, 2003)
A experiência do usuário
Por que alguns produtos fazem sucesso?
As Metas da usabilidade são

•
•
•
•
•
•
Ser eficaz no uso
Eficácia é uma meta geral que refere-se a quão
bom um produto é em fazer aquilo que foi
concebido para fazer
- O produto é capaz de permitir às pessoas aprenderem,
realizarem seus trabalhos, acessar as informações que
precisam ou adquirirem os bens que desejam ?
Ser eficiente no uso
Eficiência refere-se à forma com que o produto dá
suporte ao usuário para realizar suas tarefas.
- Uma vez aprendido a utilizar o produto para realizar suas
tarefas, pode ser sustentado um nível alto de produtividade ?
Ser seguro no uso
Segurança envolve proteger o usuário de condições
perigosas e situações indesejadas.
- Quais erros são possíveis utilizando o produto e quais
medidas são tomadas para permitir o usuário recuperar-se
deles ?
Ter boa utilidade
Utilidade refere-se à extensão na qual o produto
provê a funcionalidade certa de forma que o
usuário possa fazer o que deseja.
- O produto provê um conjunto apropriado de funcionalidades
que permitem ao usuário todas as suas atividades do jeito
que deseja ?
Ser fácil de aprender
Facilidade de aprendizado
- É possível para o usuário entender como utilizar o sistema
por meio da exploração da interface ? Quão difícil é para
aprender um conjunto completo de funcionalidades ?
Ser fácil de lembrar como se usa
Facilidade de lembrar
- Quais tipos de suporte na interface são providas para ajudar
o usuário relembrar como realizar tarefas, especialmente
para produtos operados sem frequência ?
Metas de UX

• satisfatório • esteticamente agradável

• agradável • incentivador de criatividade
• cativante • compensador
• prazeroso • interessante
• excitante • engraçado
• divertido • provocante
• útil • surpreendente
• motivante • catalizador de sociabilidade
• emocionalmente adequado • desafiador
• chato • irritante
• frustrante • esteticamente desagradável
Metas de Usabilidade x Metas de UX

Selecionar termos que transmitem sentimentos e sensações as

pessoas podem ajudar designers a entender a natureza multifacetada
da experiência do usuário.
Como as metas de experiência do usuário diferem-se das metas de
usabilidade ?
Existe trade-offs entre os dois tipos de meta ?
– e.g. um produtos pode ao mesmo tempo ser seguro e divertido
?
Quão fácil é medir metas de usabilidade e experiência do usuário ?
Princípios de Design
Abstrações generalizáveis para se pensar sobre diferentes aspectos
do design

Os “faça” e “não-faça” em IHC

O que prover e o que não prover na interface

Derivada de uma mistura de teoria baseada em conhecimento,

experiência e senso comum.
Nossa visão
Mudando o angulo (Girando 90 graus)
A mente constrói
Questão sobre a imagem.
Como interpretamos o mundo?
Como o designer pode ajudar na interpretação?
Visibilidade

Tornar visível partes relevantes.

Tornar o que deve ser feito óbvio.
Visibilidade

Isto é o painel de controle de um

elevador
• Como funciona?
• Apertar um botão para o andar
desejado?
• Nada acontece. Apertar outro botão ?
Ainda nada. O que é necessário
fazer?
…
Feedback
Enviar informação de volta ao usuário a respeito do que está sendo
(ou já foi) feito.
Inclui sons, alertas, animações e uma combinação destes
– e.g. quando um botão é clicado:
Feedback
Mapeamento: Design lógico ou ambíguo?

–
Restrição

• Aonde ligar o mouse ?

• Aonde ligar o teclado ?
• Conector de cima ou de
baixo ?
• O código com ícones
coloridos ajudou em
alguma coisa ?
Restrição
Consistência
Projetar interfaces com operações similares e que usem os mesmos
elementos para tarefas similares
Por exemplo:
– Sempre usar ctrl mais a letra inicial do comando para a
operação – ctrl+C, ctrl+S, ctrl+O
O maior benefício é que interfaces consistentes são mais fáceis de
aprender e usar
Quando a consistência falha
O que fazer quando há mais de um comando começando com a
mesma letra?
– e.g. salvar, sair, selecionar, salvar como ...

É necessário encontrar outras iniciais ou uma combinação de teclas,

desta forma quebrando a regra de consistencia
– e.g. ctrl+S, ctrl+Sp, ctrl+shift+L

Aumenta a sobrecarga cognitiva dos usuários, tornando-os mais

aptos ao erro
Consistencia interna e externa

–
Consistencia externa

•
Consistencia
Affordances: dar uma “pista”
Refere-se a um atributo de um objeto o qual permite pessoas
saberem como usar esse objeto
‘Affordance’
O que o ‘affordance’ pode oferecer ao Design de Interação?
Interfaces são virtuais e não detém affordances como objetos
físicos
Norman argumenta que não faz sentido falar sobre interfaces em
termos de affordances reais
Ao invés disso, são melhores conceitualizados como
affordances 'percebidos'
• Convenções aprendidas de mapeamentos arbitrários entre
uma ação e seu efeito na interface
• Alguns mapeamentos são melhores que outros
Reflexão

Affordances físicos
Como esses objetos físicos “afford” ? Eles são óbvios ?
Reflexão

Affordances virtuais
Se você fosse um usuário novato, saberia o que fazer com eles?
Modelo conceitual
Modelo conceitual
Modelo conceitual
O Modelo conceitual é um conceito de fundamental importância.
“A coisa mais importante para se projetar é o modelo conceitual.
Todo o resto deve ser subordinado a tornar o modelo claro, óbvio e
substancial. É quase exatamente o contrário de como a maior parte
dos software são desenvolvidos.” (Liddle, 1996, p.17)
Para que serve um modelo conceitual?

–
Para que serve um modelo conceitual?
Modelo conceitual auxilia o time de design.
– Orienta no sentido de levantar questões sobre como o modelo
conceitual será entendido pelos usuários
– Não se tornar estritamente focado muito precocemente
– Estabelecer um conjunto de termos no qual todos entendam e
concordem
– Reduz a chance de maus-entendidos e confusões posteriores
Componentes principais do modelo conceitual

Metáforas e analogias que são utilizadas para transmitir de que

forma se deve entender o que é o produto e como utilizá-lo para
realizar uma determinada tarefa.
Conceitos a que os usuários estão expostos ao utilizar o produto
O relacionamento entre os conceitos.
– e.g.um objeto contém outro
Os mapeamentos entre os conceitos e a experiência do usuário que
o produto deverá dar suporte.
Componentes principais do modelo conceitual

Exemplo para um browser

• Metáforas e analogias:
• Metáfora principal: navegação -> seguir links em uma
página por meio de exploração
• Outra metáfora: bookmarking (favoritos) -> similar a
anotações feitas em post-its ou marcas feitas em um livro
(“orelha”)
• Conceitos:
• Exs.: Páginas Web, links, URLs, listas, pastas, salvar uma
URL, revisitar uma URL, organizar URLs salvas,
compartilhar URL, etc.
Componentes principais do modelo conceitual

Exemplo para um browser

• Relacionamento entre conceitos:
• Um objeto contém outro, ex.: uma pasta contém uma coleção de URLs
relacionadas
• A importância de uma ação sobre outra, ex.: a possibilidade de adicionar uma
URL para uma lista de é mais importante do que a possibilidade de trocar a
posição de um item nessa lista
• Um objeto é uma especialização de outro, ex.: uma página dinâmica é um tipo
especial de página Web
• Mapeamentos
• Ex.: uma URL salva corresponde à uma página na Internet
• Ex.: quando o usuário clica na URL, o browser visita essa página e
renderiza-a na interface
Exemplo de modelo conceitual clássico: a planilha

•
•
•
•
Exemplo de modelo conceitual clássico: a planilha
Por que era bom o modelo...

1. É simples, claro e óbvio para os usuários como utilizar a

aplicação e o que está pode fazer
2. “é apenas uma ferramenta que permite as pessoas trabalharem
em suas idéias e reduzir o tédio de repetir sempre os mesmo
cálculos.”
3. Baseado na familiaridade dos usuários com as folhas de livro de
contabilidade.
4. O computador realiza todos os cálculos e recálculos com base
nas informações dadas pelo usuário.
Outro modelo conceitual clássico. Desktop
Outro modelo conceitual clássico. Desktop

Considerações importantes do modelo

conceitual:
• Tornar a computação ‘invisível’
ao usuário.
• Permitir aplicações adequadas ao
modelo.
• Modelo conceitual baseado em
analogia com o ambiente de
escritório real.
Suposições da equipe:
• “Irá simplificar e clarificar o
mundo eletrônico, tornando-o
mais familiar e fácil de aprender”
E assim era o Star
Metáfora
Metáforas de interface

–
Metáforas de interface
Benefícios do uso de metáforas na interface
Torna o aprendizado de novos sistemas mais fácil
Auxilia usuários entenderem o modelo conceitual subjacente
Pode ser inovativa e permite que os computadores e suas aplicações
sejam mais acessíveis a uma maior diversidade de usuários
Problemas no uso de metáforas

–
Problemas no uso de metáforas
•
•
• …
• …
•
Problemas no uso de metáforas
• Para deletar arquivos, a metáfora da lixeira é bastante intuitiva
• A lixeira foi extendida pelos designers para ejetar discos:
• Arrastando a imagem do disquete para a lixeira ejeta o disco
do computador
• A lixeira possui poderes mágicos totalmente desassociados da
metáfora de deletar arquivos
• Usuário pensa: “não quero deletar os arquivos do disco, mas
somente ejetá-lo”
• Usuários experenciam frustração e ansiedade
Problemas no uso de metáforas
• Interface utilizada para customizar a barra de status de um
aplicativo
• Utiliza manipulação direta para especificar quais e onde as
informações devem aparecer
• A interface não oferece indicações sobre as ações a serem
realizadas
• Faltam “dicas” visuais (affordance)
Problemas no uso de metáforas
•
•

•
Problemas no uso de metáforas
•

•
•
Tipos de Interação
Instrução
– Informando comandos usando o teclado e selecionando opções por meio
de um menu
Conversação
– Interagindo com o sistema como se tivesse tendo uma conversação
Manipulação
– Interagindo com objetos em um espaço virtual ou físico por meio da
manipulação destes objetos
Exploração
– Movendo-se por meio de um ambiente virtual ou espaço físico
Intrução
Os usuários instruem o sistema dizendo o que deve ser
feito por meio de comandos.
– e.g., diga a hora, imprima um arquivo, encontre uma foto
Tipo de interação muito comum utilizada 'por baixo' de
diversos sistemas e dispositivos
O benefício principal da instrução é dar suporte a uma
interação rápida e eficiente
– Bom para tipos de ações repetitivas realizada sobre múltiplos
objetos
Para poucos humanos e para todas as máquinas.
Conversação
• É como ter uma conversação com outro ser humano
• Difere-se da instrução no sentido de ser uma comunicação de
duas vias, como o sistema agindo como um parceiro ao invés de
uma máquina que só recebe ordens
• Variam de simples sistemas de reconhecimento de voz dirigida
por menu até sistemas mais complexos de diálogos em
linguagem natural
• Exemplos incluem mecanismos de busca, sistemas de
aconselhamento e sistemas de ajuda
Conversação
Prós e contras do modelo de conversação
Permite usuário, principalmente novatos e 'tecnofóbicos',
interagir com o sistema de uma maneira familiar.
Faz com que sintam-se confortáveis e menos assustados

Maus-entendidos podem surgir quando o sistema não

consegue entender o que o usuário diz.
Manipulação
• Explora o conhecimento do usuário sobre como mover e
manipular objetos no mundo físico.
• Objetos virtuais podem ser manipulados movendo-os,
selecionando-os, abrindo-os e fechando-os.
Exemplos de manipulação
Manipulação direta
• Shneiderman (1983) cunhou o termo Manipulação Direta
• Veio de sua facinação com jogos
• Propõe que objetos digitais sejam projetados de forma que
possam prover uma interação análoga a como objetos físicos são
manipulados
• Assume que interfaces de manipulação direta permite usuários
sentirem que estão controlando diretamente o objeto virtual
Princípios da manipulação direta
• Representação contínua dos objetos e ações de interesse
• Ações físicas e pressionamento de botões ao invés de emissão de
comando com sintaxe complexa
• Ações rapidamente reversíveis com feedback imediato sobre o
objeto de interesse
Manipulação direta
Por que as interfaces de MD são tão divertidas?
• Novatos podem aprender as funcionalidades básicas rapidamente
• Usuários experientes podem trabalhar extremamente rápdo e
realizarem uma série de tarefas, até mesmo defirem novas
funcionalidades
• Usuários não-contínuos podem preservar os conceitos
operacionais com o tempo
• Mensagem de erro raramente são necessárias
• Usuários podem imediatamente ver se suas ações estão
promovendo seus objetivos
• Usuários experienciam menos ansiedade
• Usuários ganham confiança e maestria e sentem-se no controle
Manipulação direta
Desvantagens
• Algumas pessoas levam a metáfora de manipulação direta muito
literalmente
• Nem todas tarefas podem ser descritas por objetos e nem todas as
ações podem ser feitas diretamente
• Algumas tarefas são melhor realizadas se delegadas e não
manipuladas
• e.g., correção de ortografia
• Mover o mouse pela tela pode ser mais demorado que apertar
teclas para fazer a mesma função
Exploração
•

•
–

–
Pronto para mergulhar? Games
Mundos virtuais
Educação
Obrigado por permanecer FO.CA.do