01 - Introdução a IHC

Prévia do material em texto

Introdução a Interação Humano Computador (IHC)
Prof. Dr. Marcelo Morandini – EACH - USP
Prof. Dr. Thiago Adriano Coleti - UENP
O que é IHC
Segundo a ACM (http://www.sigchi.org/)
	
“ Interação Humano-Computador (IHC) é uma área de pesquisa dedicada a estudar os fenômenos de comunicação entre pessoas e sistemas computacionais ”
Aspectos de Estudos em IHC
Fonte: SERG/PUC-RIO
IHC
O princípio de seus estudos datam dos anos 80, onde a necessidade de maior interação entre usuários e seus computadores levou a melhorias nas interfaces.
Como uma pessoa utiliza uma aplicação?
IHC
Usuário
Sistema Interativo
Banco de Dados
Código Fonte
Camada Oculta para o Usuário
INTERAÇÃO
INTERFACE
IHC
Usuário
Sistema Interativo
Banco de Dados
Código Fonte
Camada Oculta para o Usuário
INTERAÇÃO
INTERFACE
Interface
Toda porção do sistema com o qual o usuário mantém contato físico ou conceitual (Barbosa e Silva, 2010).
Físico: Ocorre através do hardware e software, podem ser ativo ou passivo.
Ativo: Permite agir sobre a interface
Passivo: Permite perceber reações
Conceitual: Interpretação do usuário daquilo que recebe da interface, exemplo:
Compra online em passos
Símbolo vermelho com um X no centro indicando ERRO. 
Interação
É o processo de manipulação usuário-sistema como sendo um processo de manipulação, comunicação, conversa, troca de influências e assim por diante. (Barbosa e Silva, 2010).
Interação do usuário
Travessia de 2 golfos
Usuários
Travessia do Golfo de Execução
Travessia do Golfo de Avaliação
Interface
Golfos
Execução
Diferença entre as intenções do usuário e as ações permitidas
Avaliação
Diferença entre a representação do sistema e as expectativas do usuário
A interação, segundo a Engenharia Cognitiva
Modelo de IHC – Eng. Cognitiva
IHC é uma ação com 7 interações.
Definir o objetivo geral
Estabelecer intenção imediata (o que fazer agora)
Estabelecer sequencia de passos
Executar as ações da sequencia estabelecida
Perceber o estado resultante
Interpretar o que foi percebido
Avaliar se a intenção imediata foi atingida
Ações Mentais
Ações Mentais
Ações Físicas
Modelo de IHC – Eng. Cognitiva
Passo 7 – Verifica se a intenção imediata foi atingida (S/N)
Caso NÃO: gera nova intenção para substituir ou refazer ou desfazer a ação anterior.
Caso SIM: Verifica se objetivo geral foi atingido (S/N)
Sim: Final da Interação
Não: Inicio de nova interação (passo 2).
Exemplo de Interação com Agenda
Golfo de Avaliação
Golfo de Execução
Clico no dia desejado 
no calendário mensal;
Clico em “Add New”;
Digito os dados da reunião no campo “Notes”;
Seleciono hora da reunião em “Time”;
Clico em “OK”
 
formulação da intenção
especificação da seqüência de ações
execução
avaliação
interpretação
percepção
Apareceu um novo item nos compromissos da 2a. feira.
Os dados apresentados correspondem à minha reunião.
Entrei com as informações que eu queria. Completei a tarefa com sucesso.
Quero agendar uma reunião de trabalho na 2a. feira da semana que vem.
Devo selecionar o dia e entrar com os dados que eu quero.
interação
História e evolução das interfaces
A história da interação entre pessoas e computadores
Atualmente lidamos com dispositivos altamente interativos.
Permitem uma gama de mecanismos de interação entre o usuário e um computador, mesmo que o usuário seja um “usuário tradicional” 
Entenda-se por usuário tradicional aquele que não tem conhecimento técnico avançado em informática
A Vida da Capacidade de Interação
A vida nem sempre foi tão tranquila!!
A interação era bem mais complexa
Anos 40 e 50
Anos 60 e 70
Anos 80
Anos 90 a 2000
Atualidade
Interação Humano Computador – Anos 40 e 50
Primeiros Computadores
Máquinas grandes que ocupavam grandes espaços
Dispositivos mecânicos, funcionavam a base de conectar e desconectar cabos.
Utilizado somente por cientistas em grande centros de pesquisa
Interação Humano Computador – Anos 40 e 50
Interação Humano Computador – Anos 40 e 50
Interação Humano Computador – Anos 40 e 50
Interação Humano Computador anos 60 e 70
Computadores ficaram menores
Não são os PC´s, mas a sua estrutura já lembra mais um computador atual.
Usuários eram, predominantemente, especialistas, pesquisadores ou militares.
Sistemas desenvolvidos por especialistas e para especialistas para fins específicos.
Usuários eram bem treinados e especialistas em suas áreas.
Usuários tradicionais (praticamente inexistentes)
Interação Humano Computador anos 60 e 70
1ª Geração de Interfaces
Interfaces baseadas em textos e manipuladas por comandos de textos.
Precisava conhecer os comandos para usar
Interação Humano Computador anos 80
Computadores saem dos ambientes restritos e começam a ser utilizados em ambientes comerciais.
Usuário não tão especialistas assim passam a utilizar computadores.
Interfaces de comandos de texto, mas com abstrações que facilitavam a operação, foram criadas.
Primeiras versões do Windows com interface “padrão Windows” começam a surgir. 
Interação Humano Computador anos 80
Interação Humano Computador anos 80
Interação Humano Computador anos 90 a 2000
Surgiu da Internet  Navegadores/ Páginas Web
Grande evolução do design de interfaces e das capacidades de interação.
Versão das interfaces com utilização de ícones, pastas, aponte e clique.
Interface  Clicar, duplo clique, segura e arrasta.
Games sofisticados.
Recursos tridimensionais.
Interação Humano Computador anos 90 a 2000
Interação Humano Computador anos 90 a 2000
Interação Humano Computador anos 90 a 2000
Interação Humano Computador anos 90 a 2000
Interação Humano Computador anos 92 a 2000 
Interação Humano Computador anos 92 a 2000 
Interação Humano Computador atualmente
Dispositivos móveis
Acessibilidade
Computação Ubíqua 
Recursos ilimitados na Internet (Comércio, serviços, jogos)
Realidade Virtual
3D: maiores avanços
Treinamentos médico
Ensino
Rastreamento, mapas.
Etc, Etc, Etc.... 
Interação Humano Computador atualmente
Interação Humano Computador atualmente
Uma Preocupação atual
Os Usuários e suas infinitas capacidades, necessidades, habilidades....
Como projetar recursos de interação que possam atender a necessidades dos usuários?
Desenvolver estes recursos podem envolver:
Requisitos e necessidades do usuário e do contexto de uso
Capacidade de Inclusão
Capacidade de Comunicação e adaptação
Mecanismos de Interação
Mecanismos de Interface
IHC
Muitos desenvolvedores tratam (ou tratavam) IHC como perfumaria do sistema se preocupando unicamente com o código e BD apresentando uma interface ruim.
Além dos critérios técnicos de interface, fatores humanos, comportamentais, ambientais etc. devem ser uma preocupação para o desenvolvedor.
A interface será a forma de traduzir os “ zeros e um” da linguagem do computador em uma linguagem compreensível pelo usuário e vice versa.
Dúvidas??
Sugestões de Websites
http://www.inf.puc-rio.br/~gt-ihc/
http://comissoes.sbc.org.br/ce-ihc/
Exercícios
Pergunta:
QUAL A IMPORTÂNCIA DA CAPACIDADE DE INTERAÇÃO ENTRE UM DISPOSITIVO (HARDWARE E SOFTWARE) ATUALMENTE???
APRESENTE ALGUM ASPECTO, CARACTERÍSTICA, MODO DE VIDA ETC.... QUE VOCÊ ACHA QUE PODERIA SER MELHORADA COM A APLICAÇÃO DA COMPUTAÇÃO, EM ESPECIAL, A IHC.
Tipos de Interface para Aplicações
Interfaces convencionais
Um projeto...
Um projeto de IHC pode requerer que o desenvolvimento de uma interface/interação dentro de alguma abordagem específica.
O contexto de operação do sistema a ser desenvolvimento tem impacto na escolha da abordagem.
A abordagem, por sua vez, impacta no tipo de interação, volume de informações e forma de navegabilidade entre os recursos
Abordagens de Interface
Interfaces Desktop
Interface Web
Interface Mobile/Wearable
Interface Desktop e Web
Embora sejam abordagens de software diferentes, os conceitosde interface e interação são similares.
As interfaces Desktop e para Navegadores Web são normalmente grandes (tamanho do monitor)
Podem receber grandes quantidades de componentes e recursos.
Várias opções de interação
O contexto de uso costuma considerar que o usuário está focado na tarefa do sistema e confortavelmente instalado para realiza-la.
Interface Desktop e Web
Preocupações da Interface Desktop e Web.
Falta de coerência na quantidade de informações ou recursos.
Navegabilidade ruim.
Design complexo.
No caso da aplicação desktop as mesmas são muito aplicadas em sistemas coorporativos e a interface ruim pode causar forte resistência dos usuários.
Exemplo de Desktop Bom
Exemplo de Desktop Ruim
Website com bom designs
Website com bom designs
Websites com design RUIM...
Websites com design RUIM...
Interfaces de Dispositivos Móveis
São menores, 
Comportam menos informações que as interfaces Desktop e Web
Requer do Designer maior atenção no projeto de forma a otimizar a utilização do espaço da interface.
Deve receber somente informações essenciais para o funcionamento do sistema.
Tem características de Padrões de Design específicos voltados a proporcionar melhor experiência
Deve-se evitar a miniaturização de componentes.
Interfaces Móveis Boas
Interfaces Móveis Boas
Interfaces Móveis RUINS
Interfaces Móveis RUINS
Tipos de Interface para Aplicações
Interfaces não-convencionais
Interfaces não-convencionais de software
São interfaces construídas para serem aplicadas em interações com:
Comando de voz
Gestos
Toque
Movimentos
Foram desenvolvidas inicialmente como foco em Games, mas ganharam aplicações em diversas áreas.
Interfaces não-convencionais
Exemplo: Projeto SARndbox (Caixa de areia de realidade aumentada).
Interfaces não-convencionais
App de celulares para lojas
Interfaces não-convencionais
Games
Mais exemplos
Serão discutidos na aula de Interface-Natural de Usuários.
Tipos/Estilos de Interação
Estilos de Interação 	
São as formas com as quais os usuários podem interagir com uma interface de software/hardware: 
Linha de comando
Menus
Linguagem natural
Manipulação direta
WISWYG
Formulários
WIMP(Windows, Icons, Menus and Pointers)
Interfaces 3D
Linhas de comando
Não é a mais agradável
Baseada em comandos de texto + parâmetros + opções
Composta por palavras, símbolos, palavras-chave.
Vantagens:
Controle das ações do sistema.
Máxima capacidade de explorar o sistema (de acordo com a capacidade do usuário)
Desvantagens
Ruim para usuários iniciantes 
Linhas de comando
Menus
Organização lógica de itens na interface.
Cobrem todas as possibilidades de acessos.
Permitem organização linear ou em árvore.
Rótulos familiares e bem distintos para facilitar a identificação.
Menu - linear
Menus - árvore
Linguagem Natural
O usuário interage com o sistema inserido conteúdos em linguagem natural
Textos: via entrada de teclado
Voz: via microfone
Difere de comandos de texto, pois o conteúdo não mantém um padrão e está fortemente vinculado aos aspectos culturais e a necessidade do indivíduo.
Linguagem Natural - Texto
Linguagem Natural - Voz
Linguagem Natural - Voz
Depende:
Vocabulário permitido (léxico)
Quais sentenças são permitidas (gramática).
Manipulação Direta
Conceitos do mundo real são abstraídos para elementos gráficos conceitos (componentes de interface).
Movimentos do mundo real são movimentos ou operações com os componentes de interface.
Mapeamento visa facilitar a interação do usuário, pois o mesmo pode apresentar maior facilidade em um ambiente conhecido.
Manipulação direta
Manipulação direta
WYSWYG
What You See What You Get
Tem por objetivo transmitir ao usuário que, o que está sendo mostrado na interface é exatamente o que ele terá como resultado final.
WYSWYG
Formulários
Permite ao usuário interagir com um conjunto organizados de forma lógica e espacial de informações.
Apresenta vocabulários que dão suporte ao contexto de uso dos formulários (títulos e instruções).
Podem aplicar técnicas de prevenção e tratamento de erros para evitar mal uso da técnica.
Formulário
WIMP
Windows, Icons, Menus and Pointers
Conjunto de componentes na tela do computador que representam recursos computacionais e são acessados via mouse/teclado.
Janelas são a base para organização dos componentes de interface
Icons (ícones) abstraem informações em formatos de imagens/desenhos
Menus organizam acessos
Pointers permitem acessá-los.
Interfaces 3D
Interface humano-computador em que a linguagem usada para comunidade entre usuário e computador (e vice versa) é baseada no espaço físico e suas 3 dimensões.
As interfaces 3D são aplicáveis em muitas áreas e proporcionam uma experiência de interação rica e agradável.
Interface 3D - Desktop
Interface 3D - Desktop
Interface 3D - Games
Interface 3D – Treinamento médico
Dúvidas??
Exercícios
Faça uma busca na Internet por algum tipo de sistema computacional atual que tenha (na sua opinião) um diferencial POSITIVO na questão de IHC.
Faça uma busca na Internet por algum tipo de sistema computacional atual que tenha (na sua opinião) um diferencial NEGATIVO na questão de IHC.
Prepare para fazer uma apresentação no Power Point ou um relatório no Word justificando o porquê da escolha de cada interface/diferencial.
image2.png
image3.jpeg
image4.jpeg
image5.jpeg
image6.gif
image7.jpeg
image8.png
image9.png
image10.png
image11.jpeg
image12.jpeg
image13.jpeg
image14.png
image15.jpeg
image16.png
image17.jpeg
image18.jpeg
image19.jpeg
image20.jpeg
image21.jpeg
image22.jpeg
image23.jpeg
image24.png
image25.jpeg
image26.jpeg
image27.jpeg
image28.jpeg
image29.jpeg
image30.png
image31.png
image32.jpeg
image33.jpeg
image34.jpeg
image35.jpeg
image36.png
image37.jpeg
image38.jpeg
image39.jpeg
image40.png
image41.jpeg
image42.png
image43.png
image44.png
image45.jpeg
image46.jpeg
image47.jpeg
image48.png
image49.gif
image50.png
image51.png
image52.png
image53.jpeg
image54.jpeg
image55.jpeg
image56.jpeg
image57.jpeg
image58.png
image59.png
image60.png
image61.jpeg
image62.jpeg
image63.jpeg
image64.jpeg