Modulo 1 - Introdução à Interface Humano-Computador

Prévia do material em texto

Introdução à Interface Humano-computador
Interface Humano-Computador
AULA 01
Terminologia e conceitos básicos
Terminologia e conceitos básicos
- O que é IHC?
- IHC é o estudo da interação entre pessoas (usuários) e computadores
Terminologia e conceitos básicos
IHC cuja sigla em inglês é HCI (Human-Computer Interface) significa INTERFACE 
HOMEM-COMPUTADOR
Também encontramos o termo INTERAÇÃO HOMEM-COMPUTADOR
Em termos gerais, embora interface tenha sido o termo pioneiro falar em 
interação dá um enfoque mais amplo já que estamos tratando da INTER-AÇÃO 
(ação entre) o elemento Homem e o elemento Computador.
• Interface: é o que está no limite entre dois sistemas diferentes 
(heterogêneos)
• Interação: é o diálogo entre esses sistemas
Terminologia e conceitos básicos
- Já se deparou com algum sistema difícil de entender 
ou difícil de operar?
Este estudo visa a conexão entre as Características Humanas de 
comunicação/entendimento com a Arquitetura dos Sistemas Computacionais 
através de uma interface composta de software e hardware.
As atuais Tecnologias de Informação e Comunicação (TICs) permitem criar 
sistemas computacionais INTERATIVOS nos mais variados dispositivos 
eletrônicos, desenvolvidos em ritmo cada vez mais acelerado e cada vez mais 
inseridos em nossa vida pessoal e profissional.
Sua presença transcende o mero PC estando presente em TVDI, smartphones, 
tablets, videogames, caixas eletrônicos, painéis de veículos, urnas eletrônicas, 
etc. 
Terminologia e conceitos básicos
A comunicação Humano-Computador se dá através de uma linguagem 
artificial.
Tal linguagem não é necessariamente baseada na linguagem natural 
(português), podendo ter elementos visuais e sonoros além de textuais.
Portanto ela depende de um DESIGN que visa criar formas e funções aos seus 
objetos de forma a torna-los adequados às necessidades de seus usuários e 
obter efeitos desejados 
Terminologia e conceitos básicos
- Qual o significado do apontado pelas setas vermelhas?
Fazer com que um objeto tenha evidente entendimento e a sua percepção 
para utilização é o que chamamos de AFFORDANCE
Terminologia e conceitos básicos
Affordance: característica do Design que induz o usuário a uma ação 
esperada 
- O que você faria se 
encontrasse esta placa 
num cruzamento?
- A placa ao lado quer dizer 
o quê?
Interatividade, usabilidade e responsividade
Interatividade, usabilidade e responsividade
Interatividade (continuação)
A definição de interação usuário-sistema evoluiu ao longo do tempo. 
A princípio tratava essencialmente de uma sequência de estímulos e respostas.
Com o surgimento das pesquisas de base cognitiva, passou-se a enfatizar a 
interação como a comunicação com máquinas
Interatividade, usabilidade e responsividade
Kammersgaad (1988) 
identificou as seguintes perspectivas de interação usuário-sistema
SISTEMA: quando o usuário age como se fosse outro computador
PARCEIRO: quando o computador atua como se fosse outro usuário
MÍDIA: quando o computador serve de meio de comunicação entre usuários
FERRAMENTA: quando o computador auxilia na elaboração de um trabalho 
Interatividade, usabilidade e responsividade
Interface (continuação)
Compreende toda a porção do sistema com o qual o usuário mantém contato 
físico (motor ou perceptivo) ou conceitual durante a interação (Moran, 1981)
O contato físico na interface ocorre através do software e do hardware 
utilizados nos dispositivos de entrada (teclado, mouse, joystick, microfone, 
webcam, etc.) e os dispositivos de saída (vídeo, fone, impressora) 
Qualidade em IHC
Usar um sistema interativo implica dispor de uma interface adequada para 
atingir os seus objetivos.
- E que características são adequadas?
• Usabilidade
• Experiência do Usuário
• Acessibilidade
• Comunicabilidade
Interatividade, usabilidade e responsividade
Usabilidade
Está relacionada com a facilidade de aprendizado e com a satisfação do usuário 
em decorrência desse uso.
Enfoca a maneira como o uso do sistema é afetado pelas características do 
usuário (sua cognição, capacidade de reação e percepção das respostas do 
sistema) 
WTF ...
Interatividade, usabilidade e responsividade
Usabilidade
ISO 9241-11 define usabilidade e a avaliação de um dispositivo em termos de medidas 
de desempenho e satisfação do usuário. 
• Contexto de uso - usuários, tarefas, hardware, software, ambiente físico e social em 
que o produto é usado.
• Eficácia - precisão e completeza com que os usuários atingem objetivos específicos, 
acessando a informação correta ou gerando os resultados esperados. 
• Eficiência - precisão e completeza com que os usuários atingem seus objetivos, em 
relação à quantidade de recursos gastos. 
• Satisfação - conforto e aceitabilidade do produto, medidos por meio de métodos 
subjetivos e/ou objetivos.
Interatividade, usabilidade e responsividade
Experiência do Usuário
Com a disseminação dos sistemas computacionais interativos, a usabilidade 
passou a englobar também as emoções e os sentimentos e emoções dos 
usuários 
- O que transmite a figura ao lado?
Interatividade, usabilidade e responsividade
Acessibilidade
O conceito de acessibilidade está relacionado à retirada de barreiras que 
impedem e/ou dificultam a interação usuário-sistema, permitindo com que 
mais pessoas sejam incluídas nesse grupo.
Interatividade, usabilidade e responsividade
Comunicabilidade
A preocupação do sistema em comunicar ao usuário suas intenções, pautado 
na lógica do design, para que tenha melhor condição de fazer uso produtivo e 
criativo do apoio computacional oferecido pelo sistema.
- O que representa a 
figura ao lado?
Interatividade, usabilidade e responsividade
Responsividade
Atitudes que visam favorecer o desenvolvimento da autonomia e da 
autoafirmação através da bi-direcionalidade na comunicação.
Como um conceito de ciência da computação refere-se à capacidade específica 
de um sistema ou unidade funcional para concluir tarefas atribuídas dentro de 
um determinado tempo. Por exemplo, a capacidade de um sistema de 
inteligência artificial para entender e executar suas tarefas em tempo hábil.
19
Princípios básicos de design
Princípios básicos de design
- O que é Artefato?
São produtos artificiais, fruto da inteligência e do 
trabalho humano, construídos com determinado 
propósito, por exemplo: copo, sofá, bicicleta, etc.
Um artefato não surge espontaneamente na natureza. 
Alguém decidiu a sua função, forma, estrutura, 
qualidade, etc.
A inserção de um artefato numa situação do cotidiano 
representa uma intervenção sobre o mesmo,
Exemplo: ter uma geladeira em casa muda o hábito de 
bebida das pessoas (para melhor ou para pior)
Princípios básicos de design
- O que é Design?
Atitudes focadas em resolver problemas e melhorar as características 
funcionais de um Artefato.
As atividades de Design são: 
• Análise da situação atual
• Síntese de uma intervenção
• Avaliação da nova situação
Princípios básicos de design
- O que é Design?
Análise da situação atual
Busca conhecer todos os elementos envolvidos e a relação entre eles
• Stakeholders (todas as pessoas envolvidas incluindo usuários)
• Artefatos
• Processos
Como resultado obtemos uma interpretação realística da situação atual.
Síntese de uma Intervenção
É uma proposta de solução podendo ser uma alteração do sistema atual 
(melhoria) ou até mesmo uma nova versão.
Quando a intervenção envolve desenvolvimento de sistemas interativos ela 
deve considerar os interesses dos Stakeholders, com análise da situação atual, 
com o histórico das intervenções mal avaliadas e com o conhecimento das 
tecnologias disponíveis.
Princípios básicos de design
- O que é Design?
Avaliação da nova situação
Pode ocorrer em vários pontos do 
processo de desenvolvimento:
• Antes do desenvolvimento, para 
prever os possíveis impactos sobre 
situação atual
• Durante o desenvolvimento da 
intervenção, como medida de 
controle
• Após o desenvolvimento, para 
verificar os resultadosobtidos
Cores e padrões gráficos
Cores e padrões gráficos
Uso das Cores
Diversos tipos de profissionais se utilizam da Psicologia das Cores para prover 
significados e transmitir sensações cromáticas. O fato é que cada cor pode 
gerar emoções específicas ao público exposto a ela.
Segundo estudo de Satyendra Singh da Universidad de Winneepeg, cerca de 62 
a 90% da avaliação de um produto que as pessoas interagem é baseada apenas 
nas cores. Acredita-se que o poder persuasivo que cada cor pode gerar, é capaz 
de influenciar positivamente os consumidores.
No Design as sensações causadas pelas cores podem nos remeter a valores 
simbólicos decorrentes de nossas experiências e do contexto cultural que 
vivenciamos.
Cores e padrões gráficos
Padrões de cores
São padrões utilizados em design de projetos, materiais gráficos, web design, 
etc. As mais recorrentes são:
• RGB (Red, Green & Blue) - cor da luz.
• CMYK (Cyan, Magenta, Yellow & BlacK) - cor de pigmento.
• Pantone - cor exata.
Cores e padrões gráficos
RGB (Red, Green & Blue) - cor da luz.
É o sistema de cores usado em objetos que emitem luz: TVs, monitores, 
câmeras, celulares e eletrônicos em geral, como esta tela, onde você está 
visualizando este texto.
É um padrão aditivo, ou seja, se mesclarmos as 
três cores obteremos mais luz, chegando ao 
branco. Mas se as sobrepormos, de duas em 
duas, teremos como resultados as cores 
primárias (magenta, amarelo, ciano).
Para a composição de uma determinada 
tonalidade, é preciso definir o percentual de cada 
uma das quatro cores –
Exemplo: R:100% G:60% B:30%.
Cores e padrões gráficos
CMYK (Cyan, Magenta, Yellow & blacK) - cor de pigmento.
É a escala de cores utilizada pela indústria gráfica – materiais impressos, como 
jornais, revistas, outdoors, embalagens etc.
A impressão em CMYK é chamada de cromia. É 
um padrão subtrativo, ou seja, composto por 
pigmentos sólidos que, quando se sobrepõem, 
ficam cada vez mais escuros. As quatro 
tonalidades podem formar uma possibilidade 
enorme de nuances.
Para a composição de uma determinada 
tonalidade, é preciso definir o percentual de cada 
uma das quatro cores
Exemplo: C:20% M:35% Y:32% K:18% B:0%
Cores e padrões gráficos
Pantone - cor exata.
A empresa americana Pantone Inc. possui um amplo e diversificado sistema de 
cores de alta fidelidade, reconhecido mundialmente, e utilizado pelas 
indústrias gráfica, têxtil, de tintas, plástico etc. 
Suas cores podem ser selecionadas por números em seu extenso catálogo.
Recomenda-se a utilização do Pantone, principalmente quando precisar de cores 
especiais, como dourado (Pantone 871C), prateado (Pantone 877C) ou cores 
fluorescentes como o Verde Flúor (Pantone 802C).
Assista o vídeo no Youtube:
https://www.youtube.com/watch?v=Z5HkuO_Tp-8
Criação e Design - Cores no Processo Criativo
TV Ensinar