Entendendo e Conceitualizando a Interação (IHC)

Prévia do material em texto

Design de Interface 
Humano-Computador
02 – Entendendo e 
Conceitualizando a Interação
1
IFPA
Tecnologia em Análise e Desenvolvimento de Sistemas (TADS)
PROFESSOR: Claudio Roberto de Lima Martins
claudiomartins2000@gmail.com
Assuntos
✧Revisão/Introdução
✧Entendendo o espaço do problema e conceitualizando o 
design 
✧Modelos conceituais
✧Metáforas de interface
✧Tipos de interação
✧Novos Paradigmas 
2
Revisão/Introdução
✧A IHC investiga o design de interfaces em computadores 
pessoais e dispositivos móveis
✧A IHC agora busca estender e apoiar as atividades humanas 
em todos os lugares, facilitando a experiência do usuário por 
meio do design de interações, para:
▪Tornar o trabalho eficaz, eficiente e seguro
▪Melhorar a aprendizagem e o treinamento
▪Fornecer entretenimento agradável e emocionante
▪Melhorar a comunicação e a compreensão
▪Apoiar novas formas de criatividade e expressão
3
Entendendo o espaço do problema 
✧O quê será projetado (criado)?
✧Quais são as suposições sobre os possíveis desejos e 
experiências dos usuários?
✧Como um novo uso e inovador de uma tecnologia pode ser 
potencialmente útil?
4
O que é uma suposição?
✧Pense em algo a ser criado mas que precisa de mais 
investigação.
▪Por exemplo: pessoas querem assistir TV ou manipular mensagens no 
painel do carro enquanto dirigem.
www.id-book.com 
5
http://www.ibiblio.org/jlillie/cooltown/lillie.htm
Qual é o problema?
✧ É viável (em custo) e seguro (quanto ao risco de morte) 
assistir e interagir com uma TV/Computador de bordo 
enquanto se dirige?
▪ Afirmar algo como verdade quando a questão (problema) ainda está 
em aberto, exige investigação.
✧ Neste exemplo, um estilo multimodal envolvendo direção 
assistida e GPS, talvez seja uma interação possível e segura 
de ocorrer enquanto se dirige.
www.id-book.com 
6
“Parabéns, Bob. Você 
esqueceu de tirar o 
lixo, novamente."
✧É importante lembrar que o “espaço do problema” nem sempre significa que há um 
problema a ser resolvido. Por exemplo, existem muitas situações no nosso cotidiano 
que poderiam funcionar melhor, de forma mais eficiente, se uma nova proposta de 
intervenção for elaborada. Os exemplos das imagens acima mostram situações 
óbvias que receberam intervenção, apesar de não serem classificadas como 
“problemas” da forma como concebemos a palavra.
7
https://fatorinterativo.wordpress.com/2014/03/12/modelo-conceitual-parte-1/
Ex: eliodomestico (dessalinizador doméstico)
✧O designer italiano 
Gabrielle Diamanti 
desenvolveu um produto 
capaz de dessalinizar 
água salgada e 
transformá-la em água 
potável. 
✧O aparelho pode 
dessalinizar até 5 litros de 
água por dia – o que faria 
muita diferença para 
milhões de pessoas. 
✧O custo estimado de 
produção é de 50 dólares.
8
http://www.gabrielediamanti.com/projects/eliodomestico
Exemplo: uso de “Favoritos” nos browsers
✧ Uma grande empresa fez uma pesquisa onde 
descobriu que os usuários não costumam usar 
o recurso “favoritos”, considerado-o muito 
restrito, e por isso, subutilizado.
✧Causa: processo inadequado de organizar 
endereços web de forma hierárquica (em 
pastas), torna confuso e ineficiente para o 
usuário. Há muitos razões para essa causa: 
▪ É fácil perder endereços colocando-os 
acidentalmente em pastas erradas;
▪ Não é fácil mover endereços de uma pasta para 
outra;
▪ Não é obvio saber reordenar endereços...
9
Necessidade: descobrir uma nova maneira de 
salvar e recuperar endereços web. 
Um framework para explicar as suposições
✧Refletir sobre as suposições de que algo seja uma boa ideia 
permite que os pontos fortes e fracos do design sejam 
destacados. 
✧Algumas perguntas podem ajudar a estruturar o pensamento 
sobre o espaço do problema:
▪Um produto já existente apresenta problemas?
▪Por quê você acha que há problemas?
▪Por quê você acha que as suas ideias podem ser úteis?
▪Como você imagina as pessoas integrando o novo design à maneira 
como atualmente realizam as tarefas?
▪Como o design que você propôs auxilia as pessoas em suas 
atividades?
▪ Isso realmente vai ajudá-las?
Um exemplo
✧Nas décadas de 1990/2000, quais 
eram as suposições sobre os 
telefones celulares e o quê as 
empresas consideravam quando 
desenvolveram serviços WAP (como 
o SMS)?
✧ As empresas tinham uma tecnologia 
e não tinham um problema?
✧Ou era uma solução à procura de 
um problema?
Como as pessoas reagiram a uma nova tecnologia e 
suas restrições (display pequeno, texto limitado....)?
WAP (Wireless Application Protocol) - é um padrão internacional para aplicações que utilizam comunicações de dados digitais sem fio, como 
por exemplo o acesso à Internet a partir de um telefone móvel. 
Suposições: realísticas ou não?
▶As pessoas querem se manter informadas o tempo todo e 
aonde estiverem - razoável
▶As pessoas desejam ter informações enquanto se deslocam 
de casa para o trabalho e vice-versa - razoável
▶As pessoas ficam satisfeitas com um display de celular 
com baixa resolução, poucas linhas e interface limitada -
isso não é razoável
▶As pessoas gostariam de poder fazer em seus celulares o 
que normalmente fazem em seus computadores (e.g. 
navegar na Internet, ler e enviar e-mails, fazer compras, 
jogar) - razoável, mas apenas para um grupo específico de 
usuários
Exemplo: SMS, MMS e WhatsApp
✧No início da tecnologia móvel e digital (WAP), as empresas 
de telecom tentaram usar o serviço de envio de mensagens 
(SMS) como ferramenta de comunicação e venda de serviços.
✧ Nesta época os dispositivos possuíam telas pequenas e o 
SMS era limitado a 160 caracteres.
13
• O sucesso ocorreu mais tarde 
com o MMS, uma espécie de 
evolução do SMS, que permite 
escrever muito mais que 160 
caracteres, embutir imagem e até 
som na mensagem. MMS foi 
viabilizado com smartphones .
• Atualmente, as empresas usam 
SMS, MMS e até mesmo o 
Whatsapp...
• ...Mais isso, é outra história.
Atividade
▶Quais são as suposições e afirmações sobre a TV 3D?
www.id-book.com 14
Suposições: realista ou lista de desejos?
▶As pessoas não se importariam em usar os óculos para ver em 
3D em suas salas de estar - razoável
▶As pessoas não se importariam de pagar muito mais por uma 
nova tela de TV habilitada para 3D - não razoável
▶As pessoas realmente apreciam a clareza aprimorada e 
detalhes de cores fornecidos pelo 3D - razoável
▶As pessoas ficarão felizes carregando seus próprios óculos 
especiais - razoável apenas para um grupo muito seleto de 
usuários
15
Benefícios da conceitualização 
✧Ter um bom entendimento do contexto do problema pode 
ajudar no design.
▪por exemplo, que tipo de interface, ambiente, e funcionalidades
✧Um dos benefícios de se trabalhar com suposições a respeito 
do espaço do problema, antes de construir alguma coisa, 
refere-se à possibilidade de isso trazer à tona questões 
problemáticas. Nesse processo, pode acontecer:
▪ Ideias podem surgir antes de uma mudança;
▪Ter um entendimento do problema ajuda a formular o que se quer do 
projeto;
▪Pode-se concentrar na estrutura geral do projeto e como será 
comunicado ao usuário.
✧Antes de implementar um projeto é melhor desenvolver um
modelo conceitual.
16
Modelos conceituais
✧Um modelo conceitual é:
▪ “… Uma descrição de alto nível de como um sistema é organizado e 
opera” (Johnson & Henderson, 2002, p26)
▪ O modelo conceitual é um alto nível de descrição de “um sistema 
proposto em termos de um conjunto de ideias e conceitos do que o 
sistema deve fazer, como deve ser o seu ambiente, e como os usuários 
entenderão o seu funcionamento”✧Permite:
▪ “… que designers alinhem seus pensamentos antes de começarem a 
implementar seus componentes” (Johnson e Henderson, 2002, p28)
17
Elementos do Modelo Conceitual 
▶Metáforas e analogias
▪ Serve para entender para que serve um produto e como 
usá-lo para uma tarefa.
▶Conceitos aos quais as pessoas são expostas no uso do 
produto
▪Objetos do domínio das tarefas, seus atributos e 
operações (por exemplo, salvar, pagar, organizar)
▶Relacionamento e mapeamento entre esses conceitos
18
Os usuários entendem o modelo conceitual da forma 
que se espera? 
✧Pessoas diferentes formam modelos diferentes de um mesmo objeto.
✧Como designers devemos desenvolver interfaces que ajudem o usuário a 
construir modelos adequados à sua interação com o sistema
19
Modelo 
do 
Designer
Modelo 
do 
Usuário
modelo que o designer
tem sobre como o
sistema deve trabalhar
como o usuário
entende a forma como
o sistema trabalha
como o sistema
realmente trabalha
Primeiros passos para formular um modelo conceitual
✧O que os usuários fazem quando executam as suas tarefas?
✧Como o software pode fazê-lo?
✧Qual o tipo de interface, metáfora e características seriam 
apropriadas?
✧Quais os modos de interação e estilos devem ser utilizados? 
▪ Tenha sempre em mente, ao tomar decisões sobre o 
design, como o usuário irá entender o modelo conceitual 
implícito.
Modelos conceituais
✧Existem muitas formas e maneiras de classificá-los;
✧Descreveremos estes em termos de:
▪ Um conjunto de atividades e objetos
▪ De metáforas de interface.
21
Aplicativo de realidade “mista” que motiva os usuários a aprender xadrez usando métodos de gamificação.
Tese Doutorado. Em https://www.hci.uni-wuerzburg.de/topics/20180611-stingl-rene-thesis-mcs-metaphor/
Modelo conceitual baseado em atividades 
▶1. Instrução
▪utilizando o teclado para dar comandos ou selecionando
opções em um menu
▶2. Conversação
▪interagindo com o sistema em modo similar a uma
conversação
▶3. Manipulação e navegação
▪agindo diretamente sobre os objetos e interagindo
diretamente em um ambiente virtual
▶4. Exploração e pesquisa
▪descobrindo e aprendendo
1. Por instruções
▶Descreve como os usuários realizam suas tarefas, instruindo o 
sistema sobre o que fazer.
Ex: em tarefas como informar a hora, imprimir, salvar um 
arquivo, lembrar o usuário de um compromisso 
• É um modelo conceitual muito comum, utilizado em uma série de 
softwares populares
-Ex: CAD, processadores de texto, caixas eletrônicos, etc
• O maior benefício é que este modelo suporta uma interação rápida e 
eficiente
• é bom para tipos repetitivos de ações executadas em múltiplos 
objetos
O que a Coca-Cola aprendeu com a Freestyle
24
https://www.b9.com.br/27450/o-que-a-coca-cola-aprendeu-com-a-freestyle/
A Coca-Cola Freestyle é um refrigerante com tela sensível ao toque introduzida pela 
Coca-Cola Company em 2009. A máquina conta com 165 bebidas diferentes da Coca-
Cola, além de sabores personalizados.
2. Conversação
▶Modelo conceitual baseado na ideia de 
conversação entre uma pessoa e um sistema, em 
que este atua como um parceiro no diálogo. 
▶Ele é projetado para responder da mesma forma 
que um ser humano responderia ao conversar 
com alguém.
▶Inclui o reconhecimento de voz na operação do sistema e diálogos mais 
complexos em “linguagem natural”
▶Exemplos incluem agendas, motores de busca, sistemas de help 
sensitivo ao contexto, etc.
▶Recentemente o modelo despertou o interesse dos desenvolvedores, 
como o exemplo do help no MS Office.
EX: Assistentes virtuais (chatbots)
✧Exemplos atuais: agentes virtuais, briquedos e robôs (animais, bonecos, 
etc) são projetados para conversar com você.
26
Would you talk with Anna?
Prós e contras do modelo conversacional
▶Permite usuários, especialmente os novatos e 
tecnofóbicos, a interagir com o sistema de maneira que lhe 
pareçam familiar
▪faz com que os usuários sintam-se mais confortáveis, achem mais 
fácil e assusta menos quem é inexperiente no computador
▶Pode fazer com que a solicitação do usuário seja 
interpretada de forma incorreta, fornecendo respostas 
erradas.
▪exemplo: busca no Google por um assunto ou termo que tenha mais 
de uma aplicação ou realidade
3. Manipulação e navegação
▶Descreve a atividade de manipular objetos e navegar por 
espaços virtuais, explorando o conhecimento que os usuários 
tem sobre como fazer isto no mundo físico.
▪Exs: mover, selecionar, abrir, fechar, arrastar, dar zoom, 
etc, em objetos virtuais 
▶Aproveita o conhecimento do usuário na manipulação e 
interação com objetos no mundo físico
▶Exemplificado por sistemas “what you see is what you get” 
(WYSIWYG) e pela manipulação direta (DM = direct
manipulation)
▪Shneiderman (1983) criou o termo DM, que originou-se pela 
sua fascinação por jogos que utilizavam esta técnica
Princípios centrais da DM (manipulação direta)
▶Representação contínua de objetos e ações de interesse
▶Ações físicas e apertar de botões ao invés de comandos com 
sintaxes complexas
▶Reversão rápida de ações com feedback imediato do objeto 
de interesse
Por quê as interfaces DM são tão interessantes?
▶Novatos podem aprender as funções básicas rapidamente
▶Fazem com que os usuários experientes executem as suas 
tarefas muito rapidamente e possam também definir novas 
funções
▶Usuários intermitentes podem lembrar-se das principais 
funções
▶Mensagens de erro são raramente necessárias
▶Usuários podem ver imediatamente o resultado de suas 
ações
▶Geram menos ansiedade em usuários experientes
▶Usuários ganham confiança e sentem-se no controle do 
sistema
Quais são as desvantagens da DM?
▶Algumas pessoas utilizam a metáfora da interação muito 
literalmente
▶Nem todas as tarefas podem ser descritas por objetos e nem 
todas as ações podem ser executadas diretamente
▶Algumas tarefas são melhor executadas de outras formas
▪como por exemplo, a “correção ortográfica”
▶A interface pode tornar-se muito “poluída”
▶Mover o mouse pela tela é mais lento do que utilizar-se de 
comandos (por teclado, p.ex).
https://www.nngroup.com/articles/direct-manipulation/
4. Exploração e pesquisa
▶Baseado na ideia de possibilitar às
pessoas explorar e pesquisar informações
valendo-se de sua experiência em realizar
essas tarefas com mídias já existentes
(por exemplo: livros, revistas,
bibliotecas, TV, rádio, panfletos, etc).
▶A informação é disposta de forma que as pessoas tenham 
flexibilidade para a navegação e busca de conteúdo
▪por exemplo: CD-ROMs e quiosques multimídia, páginas e 
portais web, sites de comércio eletrônico, e outros.
▶Deve-se pensar muito sobre como estruturar a informação de 
modo que forneçam suporte a uma navegação efetiva, 
permitindo às pessoas pesquisar, buscar e encontrar 
diferentes tipos de informação.
Exemplo de modelo de “exploração e pesquisa”
▶Portal de notícias UOL: A partir da “home-page” o usuário acessar o e-
mail, notícias do time de futebol, horóscopo, da novela, e muito outras 
identificadas por áreas e cores.
33
Modelos conceituais baseados em objetos
▶Frequentemente são baseados em uma analogia com 
alguma coisa do mundo físico
▶Exemplos incluem livros, ferramentas, veículos, etc
Johnson et al (1989)
Ex. Clássico: interface 
do Star (Xerox)baseada
em objetos de 
escritório
Outro clássico: a planilha eletrônica
▶Análoga a uma planilha escrita
▶Interativa e computacional
▶Fácil de entender
▶Útil e com diversas funcionalidades
que são utilizadas em sistemas
profissionais 
Uma planilha é uma matriz 
de linhas e colunas usadas 
para a análise e cálculo de 
dados. 
As primeiras planilhas 
eletrônicas desucesso foram 
o Visicalc, Lotus 123 e 
Multiplan.
Hoje, Excel é o produto mais 
usado.
Qual modelo conceitual é o melhor?
▶Manipulação direta é ótima para tarefas de 
desenho, “voar”, “guiar”, mudar o tamanho das 
janelas e arrastar e soltar;
▶Dar instruções é ótimo para tarefas repetitivas; 
▶Conversação é ótimo para crianças, pessoas que 
tem fobia de computador e pessoas com pouca 
habilidade no computador;
▶Modelos conceituais híbridos são freqüentemente
utilizados e oferecem diversas maneiras de 
interação, mas exigem mais tempo para se aprender 
todas as suas funcionalidades.
Metáforas de interface
▶Interface projetada para ser similar a uma entidade física, 
mas com propriedades exclusivas
▶Podem ser baseadas em atividades, objetos ou a combinação 
de ambos;
▶Exploram o conhecimento do que é familiar para o usuário 
para que este entenda o que não lhe é familiar;
▶Permite que o usuário deduza funcionalidades de um sistema 
que não lhe é familiar.
▶Exemplos:
▪Conceito relacionado à tarefa: navegar na internet
▪Um modelo instanciado na interface: metáfora da área de trabalho, 
portais da web
▪Objeto para visualizar uma operação: um ícone de um carrinho de 
compras para colocar itens
Exemplo de metáfora: cards do Google 
✧O “card” é um recurso popular de 
interface com o usuário usado para 
representar informações úteis. No 
Google é ativado com os “feeds” de 
notícias e notificações.
✧Por que usar?: Tem um certo valor e 
é usado de forma familiar.
✧As propriedades do “card” podem 
representar o material que é 
adicionado, dando aparência e 
comportamento físico, por ex. 
superfície de papel
www.id-book.com 
38
Metáfora do Post-it
✧ Assim como os folhetos colados em um quadro podem 
servir como recurso de memorização e lembrança, o “post-it” 
é usado na área de trabalho (desktop) da mesma forma.
39
Benefícios da metáfora de interface
▶Faz com que o aprendizado de novos sistemas seja mais 
fácil;
▶Ajuda os usuários a compreenderem os detalhes do 
modelo conceitual;
▶Pode ser muito inovador e permite que uma grande 
quantidade de aplicações de hardware e software tornem-
se mais “amigáveis”.
Problemas com as metáforas de interface 
▶Quebra regras convencionais e culturais
▪por exemplo, a lixeira no desktop;
▶Podem restringir os designers na maneira que eles 
conceitualizam o escopo do problema;
▶Pode ser conflitante com os princípios de design;
▶Pode fazer com que os usuários apenas entendam o sistema 
em termos de metáforas;
▶Designers podem inadevertidamente utilizar designs 
existentes que são ruins;
▶Limita a imaginação para o desenvolvimento de novos 
modelos conceituais.
Modelos conceituais: do modelo de interação ao estilo
▶Modo de interação:
▪o que o usuário faz quando interage com o sistema, isto é, 
dá comandos, fala, navega ou executa outra ação;
▶Estilo de interação:
▪que tipo de interface suporta estas interações? Fala, 
baseado em menus, gestos, etc.
Muitos tipos de estilos de interação existem…
▶Comando
▶Fala
▶Entrada de dados
▶Formulários
▶Buscas
▶Gráficos
▶Web
▶Canetas
▶Realidade aumentada
▶Gesticulação e muito mais...
Exemplo de metáfora e modelo confuso: 
Interagindo com o GPS…
▶Desenhe um elefante percorrendo as ruas da cidade... 
▶Exemplo:
Gravando no GPS o seu passeio pela cidade
Qual o estilo de interação foi utilizado?
▶Foi necessário determinar os requisitos e as 
necessidades do usuário;
▶Manter-se no rumo e considerar os obstáculos que 
estão no caminho;
▶Também vai depender dos recursos da tecnologia 
utilizada.
Paradigmas da interação
▶Uma outra forma de inspiração para modelos conceituais
▶Do desktop para a computação “Ubíqua” e pervasiva
(interage com o ambiente e ao contexto)
Exemplos de novos paradigmas
▶Computação “ubiquitous” (ubíqua)
▶Computação pervasiva
▶Computação vestível
▶Bits tangíveis, realidade aumentada
▶Ambientes atentos
▶Computação transparente
▪e muito mais…
MediaCup (1999)
▶Desenvolvida pela TECO, Alemanha 
▶Possui sensores de temperatura e 
movimento 
▶Comunicação sem fio (IR): copos e a 
máquina de café interagem com outros 
dispositivos 
▶Compartilhamento de informações de 
contexto do ambiente 
49
▶Recursos: 
▪Avisar sobre eventos (reuniões) 
▪Avisar que o café está quente demais para beber
▪Avisar que um novo café está disponível na máquina 
▪Pode usá-la para beber café e chá
Exemplos de novos paradigmas
▶ Simuladores
Dois exemplos: BlueEyes (IBM) and Cooltown (HP)
▶Aplicação visionária dos paradigmas e modelos de 
interação
Blue Eyes system provides technical 
means for monitoring and recording the 
operator’s basic physiological parameters.
https://www.ukessays.com/essays/computer-science/a-study-about-blue-eye-technology-computer-science-essay.php
Resumo (pontos chave)
▶É importante ter um bom entendimento do escopo do 
problema;
▶Um aspecto fundamental do design de interação é 
desenvolver um modelo conceitual;
▶Modos de interação e metáforas de interface devem 
fornecem uma estrutura para o desenvolvimento de um 
modelo;
▶Estilos de interação são tipos específicos de interface que 
são instanciadas com o parte do modelo conceitual;
▶Os paradigmas da interação também podem ser utilizados 
para projetar o design de um modelo conceitual.
Atividades em sala de aula.
1) Em que modelos conceituais (por atividade) estão baseadas 
as seguintes aplicações?
53
(A) Um videogame 3D, como um jogo 
de corrida de carros com um volante 
de verdade, áudio e feedback visual.
(B) O ambiente operacional Windows
(C) Um navegador (browser) web
Atividades
2) Que modelo conceitual ou combinação de modelos você acredita ser 
mais apropriado para fornecer suporte às seguintes atividades:
A) Baixar músicas e vídeos da web.
3) Algumas vezes os designers caem na armadilha de tentar criar um 
objeto virtual que lembre um objeto físico familiar já mal projetado. Um 
exemplo é a calculadora virtual, projetada para se parecer e comportar 
como uma calculadora real. Explique como isso se expressa nas versões 
de calculadoras do Windows, as versões antigas (antes do Win-10) e as 
“melhorias” na versão Windows-10.
54
versões antigas (antes do Win-10) versão Windows-10
Atividades
3) Abra um navegador web (ex: Google Chrome) e examine a 
interface, identificando e descrevendo as várias formas de 
analogias e metáforas de interface usadas no seu design. 
Quais palavras familiares a você descrevem funcionalidades 
que foram empregadas para descrever operações e funções?
55
Atividades em sala de aula.
4. O que são metáforas?
5. Exemplifique uma metáfora baseada em objeto, uma 
baseada em cenário e outra baseada em atividade.
6. Crie e descreva um cenário de site para jogadores e 
apaixonados pelo jogo de xadrez. O site deverá oferecer 
informações sobre o jogo, sobre sua história, sobre uma 
associação de jogadores, sobre famosos jogadores, sobre 
campeonatos e uma área de jogo “on line”.
56
Atividades
7. Descreva os componentes do modelo conceitual subjacente 
à maioria dos sites de compras “on-line”, por exemplo,
Carrinho de compras
Realizando o “Check-out” (finalização da compra)
Compra por “1 clique”
Embalagem de presente
Dinheiro?
Cartão, Boleto....(etc)
57
Referências
✧Design de Interação: Além da Interação Humano-
Computador. por Yvonne Rogers (Autor), Helen Sharp 
(Autor), Jenny Preece. Ed Bookman. 3ª Ed. 2013. 
▪ Capitulo 2.