Interface_Humano_Computador Slides de Aula - Unidade I

Prévia do material em texto

Prof. MSc. Caique Kirilo
UNIDADE I
Interface Humano –
Computador
 Vivemos em um novo cenário.
 Revolução da Informação.
 Objetos inteligentes.
 Assim como os psicólogos estudam a relação entre os seres humanos, a relação entre os 
humanos e as máquinas também precisa ser estudada, pois isso impacta, diretamente, o 
modo do ser humano existir.
Introdução à Interface Humano-Computador
Aula 1 - 08-03-2022
O que é? 
É a interação que um humano têm com algum tipo de dispositivo/maquina.
O computador auxília o ser humano para fazer suas tarefas.
 HMI – Human Machine Interface: fala de relacionamento entre o humano e as máquinas, 
incluindo os computadores.
 CHI – Computer Human Interaction: fala de interatividade entre o humano e os 
computadores.
 IHC – termo IHM atualizado para melhor entendimento dos usuários.
Terminologia e conceitos básicos
Aula 1 - 08-03-2022
Apenas
 Em geral, a interação usuário-sistema pode ser considerada como tudo o que acontece 
quando uma pessoa e um sistema computacional se unem para realizar tarefas, visando a 
um objetivo (BARBOSA; SILVA, 2011). 
Interatividade
Fonte: https://pixabay.com/pt/photos/homem-leitura-touchscreen-blog-791049/ 
Aula 1 - 08-03-2022
Quando vc tem o seu celular, PC, caixa eletrônico, vc tem uma interação.
 Segundo (BARBOSA; SILVA, 2011), usabilidade nada mais é do que o grau em que um 
produto é usado por usuários específicos para atingir objetivos específicos com eficácia, 
eficiência e satisfação em um contexto de uso específico.
Usabilidade
Fonte: https://pixabay.com/pt/illustrations/experi%C3%AAncia-do-cliente-melhor-3024488/
Aula 1 - 08-03-2022
Basicamente se você tem um site bonito e não consegue ter uma experiência legal de uso com o mesmo, podendo até se perder no conteúdo, a usabilidade se torna ruim.
Como se fosse a avaliação da aula
 Responsividade significa a “capacidade de responder rapidamente e de modo mais 
adequado à situação em questão”. Aplicando o conceito ao mundo web, ele representa a 
capacidade de uma página web adaptar o seu design e as suas funcionalidades à tela do 
usuário. 
Responsividade
Hoje estamos em um estágio que é basicamente um "clicou", "respondeu". Ou seja, chegamos no nível "perfeito" de responsividade de um sistema. Caso não encontramos este tipo de responsividade, o sistema está ultrapassado ou com alguma instabilidade e se torna uma experiência ruim e é aí que na maioria das vezes partimos e vamos usar outro site, sistema, software, etc.
Aula 1 - 08-03-2022
Interatividade: como o meu sistema e o usuário interagem?
Usabilidade: meu usuário consegue utilizar o sistema de maneira simples e confortável?
Responsividade: meu sistema é adaptável e ágil?
Interatividade, usabilidade e responsividade
Ou seja, como eles vão ter essa relação?
Aula 1 - 08-03-2022
Principalmente
 IHC não se prende à área da computação, a interação está presente nos mais diversos 
ambientes e profissões.
Fundamentação interdisciplinar
Fonte: autoria própria. 
O ser humano é o nosso objeto principal de estudo para que a 
computação possa ter sucesso.
- Precisamos saber se o usuário está bem psicologicamente, 
fisicamente, se ele está gostando de usar o meu sistema, se ele 
está entendendo como se usa o meu sistema, o motivo dele usar
o meu sistema e não o do concorrente, etc.
- O meu sistema precisa de uma interaçãio boa com o usuário 
para que ele possa ter sucesso.
Aula 1 - 08-03-2022
 A cognição é a capacidade de processar informações diferentes recebidas por diversos 
estímulos, tais como os luminosos, sonoros, químicos e táteis; em outras palavras, pela 
percepção, onde se incluem diversos processos, como a memória, atenção, aprendizagem, 
linguagem, o raciocínio, entre outros. 
Fundamentos humanos: cognição
Isso tudo está ligado ao que o nosso usuário está focado em fazer.
Exemplo: Um sistema de ensino está focado em estudo/aprendizagem. Então você precisa da atenção do aluno, e que ele aprenda o que está sendo apresentado.
Daí temos 2 fatores:
- Entender como o ser humano consegue ter atenção;
- Qual a forma que ele aprende com mais facilidade;
Aula 1 - 08-03-2022
 A Ergonomia, que também é conhecida por fatores humanos, é a disciplina científica que 
está relacionada ao entendimento das interações entre os seres humanos com outros 
objetos ou elementos de um sistema que o envolve; além disso, é a profissão que aplica 
métodos embasados em princípios e teorias com o intuito de projetar soluções que otimizem 
o bem-estar humano, mitigando o seu desconforto de maneira geral e, assim, melhorando o 
seu desempenho produtivo.
Fundamentos humanos: ergonomia
Aula 1 - 08-03-2022
 Ao trabalhar com conceitos previamente definidos do ser humano, corremos o risco de não 
cumprir com a ética e feri-la em menor ou maior grau; sendo assim, é altamente 
recomendado que todas as análises feitas sejam regadas de bom senso e respaldadas 
pela legislação.
Fundamentos humanos: ética
Chegaremos em um âmbito em que temos que seguir as regras que nunca iremos quebrar. Então iremos estar sempre ligados à ética e bom senso.
Aula 1 - 08-03-2022
Por ser uma matéria interdisciplinar em constante evolução, a IHC está sempre abrangendo 
conceitos que não estejam diretamente ligados à computação; sendo assim, assinale a 
alternativa correta:
a) Apenas após o desenvolvimento do sistema é que verificamos se atende ao usuário.
b) Um sistema deve funcionar e quem deve se adaptar a ele é o usuário.
c) Um software pode ferir a ética e o bom senso, contanto que seja útil.
d) O desenvolvedor deve se preocupar com todos os pontos que rodeiam o seu usuário.
e) O usuário deve fazer um curso de computação para agregar algo ao software.
Interatividade
Aula 1 - 08-03-2022
Por ser uma matéria interdisciplinar em constante evolução, a IHC está sempre abrangendo 
conceitos que não estejam diretamente ligados à computação; sendo assim, assinale a 
alternativa correta:
a) Apenas após o desenvolvimento do sistema é que verificamos se atende ao usuário.
b) Um sistema deve funcionar e quem deve se adaptar a ele é o usuário.
c) Um software pode ferir a ética e o bom senso, contanto que seja útil.
d) O desenvolvedor deve se preocupar com todos os pontos que rodeiam o seu usuário.
e) O usuário deve fazer um curso de computação para agregar algo ao software.
Resposta
O sistema que deve se adaptar ao usuário.
Se fizermos isso, teremos um trabalho todo perdido.
É uma regra que sempre devemos seguir. Nunca devemos ferir a ética e o bom senso.
Não devemos pressupor que alguém precisa de um curso para usar o nosso software.
Aula 2 - 08-03-2022
 Apesar do estrangeirismo que deu origem à sigla UX (User eXperience), o termo é bem 
mais simples do que parece; no decorrer do dia nos tornamos “usuários” de uma porção 
de coisas. 
User Experience (UX) 
Esse termos explana exatamente o que o usuário está sentindo ao usar o meu programa/sistema, ou seja, a experiência deve ser boa, não adianta só está bonito e bem apresentável.
 
Aula 2 - 15/03/2022
 O alarme do celular que nos acorda de manhã, a cadeira, o carro, o controle remoto do ar-
condicionado etc. 
Nós somos usuários também.
Esse conceito existe desde a época da pedra, podemos dizer.
Tudo é usável. Porém pode acontecer dê:
- Eu ter um tipo de experiência usando algo e gostar e pode acontecer de outra pessoa usar o mesmo produto e não gostar da experiência.
Aula 2 - 15/03/2022
 A experiência do usuário existe desde que as pessoas começaram a “usar” objetos para 
realizar alguma tarefa. 
Aula 2 - 15/03/2022
 Experiências são subjetivas, ou seja, cada pessoa tem uma experiência diferente ao usar 
determinado produto.
Aula 2 - 15/03/2022
Precisamos entender o usuário para deixar a experiência cada vez melhor pra ele.
 Essa experiência é influenciada por fatores humanos e por fatores externos, mas, apesar de 
subjetivas, essas experiências são projetadas por alguém.Aula 2 - 15/03/2022
Apenas de haver diferenças no caminho, nós daremos um "trilho" para o usuário seguir para a melhor experiência.
 Os designers de UX estudam o comportamento humano e o serviço oferecido para encontrar 
meios de melhorar a satisfação e a lealdade dos clientes.
Estudo completamente voltado pra exatamente o que o cliente vai sentir
Aula 2 - 15/03/2022
Isso é alcançado, normalmente, por meio de três pilares:
 Utilidade – o quão útil é o serviço para o cliente; o quanto é melhor fazer as coisas usando o 
serviço e não alguma alternativa;
 Facilidade de uso – o quão fácil e rápido é usar o serviço, e resolver o que for preciso 
usando ele e não uma alternativa;
 Prazer – o quão prazeroso (divertido, interessante, recompensador etc.) é usar o serviço e 
não as alternativas.
Se tiver um e não outro, a experiência pode não ser tão boa
Aula 2 - 15/03/2022
 Diferente do Design de Serviço, que abrange todo o ecossistema do serviço, o UX está mais 
relacionado ao uso do serviço em si, principalmente, nas suas interações com o cliente final.
 Isso possibilita o estudo dessas interações em um nível mais profundo de detalhamento, 
chegando ao nível das microinterações, que contribuirão, por exemplo, na construção da 
facilidade e do encantamento.
Nós precisamos encantar o nosso usuário.
Como o usuário está usando o sistema. Precisamos entender se está usando 1 ou 2 dedos.
Aula 2 - 15/03/2022
 O profissional responsável pelo desenho da experiência, normalmente conhecido como 
designer de UX, parte do entendimento do desafio a ser resolvido.
 Este desafio pode ser abrangente como, por exemplo, pensar em toda a experiência de uso 
de um novo serviço ou pode ser reduzido como, por exemplo, pensar na experiência final de 
pagamento de um e-commerce (o checkout).
Aula 2 - 15/03/2022
Novamente, diversas metodologias podem ser usadas aqui, mas pelo menos englobam:
 A arquitetura da informação — desenho sobre como as informações serão distribuídas 
pelo serviço e exibidas para ajudar o usuário/cliente a realizar as tarefas necessárias;
 Projeto de interação — desenho sobre como as interações vão acontecer, de forma a 
facilitar o uso e gerar o encantamento;
 Fluxos das tarefas — desenho de como as tarefas vão 
acontecer passo a passo, de forma a alcançar a simplicidade
de uso.
Nós estudamos e entendemos antes de criar um sistema.
Aula 2 - 15/03/2022
Geralmente fazemos um fluxograma, onde conseguimos identifcar as microinterações.
Quando estamos nos referindo à experiência do usuário, queremos identificar e projetar:
a) Os sentimentos que o usuário vai ter quando lembrar de uma piada.
b) O olfato e o paladar do usuário utilizador do sistema.
c) O know-how previamente estabelecido pelo nosso usuário.
d) Os sentimentos que o usuário vai ter ao utilizar o nosso sistema.
e) A idade na qual o nosso público-alvo se encontra.
Interatividade
Aula 2 - 15/03/2022
Highlight
Highlight
Saber como
Quando estamos nos referindo à experiência do usuário, queremos identificar e projetar:
a) Os sentimentos que o usuário vai ter quando lembrar de uma piada.
b) O olfato e o paladar do usuário utilizador do sistema.
c) O know-how previamente estabelecido pelo nosso usuário.
d) Os sentimentos que o usuário vai ter ao utilizar o nosso sistema.
e) A idade na qual o nosso público-alvo se encontra.
Resposta
Aula 3 - 15/03/2022
Know-how é um curso
 User Interface (UI) é uma ferramenta que é utilizada para entregar uma melhor experiência 
para o usuário. Uma interface pode ser representada informalmente através de esboços, de 
forma estruturada, através de modelos ou, até mesmo, através de protótipos funcionais. 
User Interface (UI)
UI - Relacionada à aparência e fica responsável pela aparência.
Aula 3 - 15/03/2022
 A User Interface (UI) está relacionada à aparência, à maneira como se apresenta ao usuário. 
A UI fica responsável por seduzir o usuário pela aparência. A User Experience (UX) é mais 
global que a UI e está mais relacionada à experiência que o usuário terá, à percepção ao 
interagir com a aplicação. Se o site ou o programa consegue ser responsivo e adaptável; por 
exemplo: a acessão de um smartphone e ele se moldar ao aparelho, essa facilidade faz 
parte da UX.
User Experience (UX) versus User Interface (UI)
Será uma ponte para a "cara" do programa.
Aula 3 - 15/03/2022
 Quando compreendemos todo o trabalho que o profissional de UX realiza, identificando como 
a experiência do usuário com algum produto ou serviço pode ser melhorada, fica muito mais 
fácil visualizarmos o que o profissional de UI faz.
 Na prática, toda a parte que envolve a criação de layouts, com textos, imagens, chamadas 
para a ação ou outros elementos, é de responsabilidade do UI idealizar.
UX - Cuida da experiência do usuário
UI - Cuida da aparência do seu site/programa, etc. Por exemplo, se o UX informa que precisa de vídeos, fotos, banners no site, o UI deve pensar em como inserir isso no programa.
Aula 3 - 15/03/2022
 Nessa hora, pensar em uma interface simplesmente bonita é um erro muito grave, pois a 
usabilidade deve estar em primeiro lugar. Trabalhando dessa forma, a beleza das suas 
telas será uma consequência, que atrelada à boa experiência do usuário trará sucesso ao 
seu projeto.
Aula 3 - 15/03/2022
Para garantir uma user-friendly, ou seja, uma experiência amigável, existe uma série de boas 
práticas que auxiliam na criação de uma boa interface para o usuário. A seguir alguns pontos 
que consideramos importantes de colocar em prática em qualquer projeto de UI:
 Agrupar informações semelhantes ao invés de fragmentá-las;
 Repetir o “call to action” mais importante da página para aumentar as possibilidades 
de interação;
 Recomendar uma ação específica ao invés de mostrar 
várias com a mesma finalidade;
 Deixar o caminho do usuário mais fácil para desfazer alguma 
interação, evitando, assim, a sua saída do site, app etc.;
User-friendly - Amigável ao usuário
Como menus em cardápios. Não misturar as categorias, por exemplo.
Deixa o like, clique aqui. Por exemplo.
Aula 3 - 15/03/2022
 Deixar bem claro o que pode ser clicado e selecionado;
 Ser direto e objetivo;
 Utilizar mais contraste do que similaridade;
 Utilizar menos campos de preenchimentos nos formulários;
 Mostrar as informações ao invés de escondê-las.
Aula 3 - 15/03/2022
 É preciso que o usuário consiga identificar, de forma clara, os elementos que realizam 
alguma ação e quais ações eles realizam. Usar a criatividade na hora de compor os 
elementos é muito importante, mas é preciso atentar-se aos “padrões” aos quais os usuários 
já estão acostumados e que reconhecem mais facilmente.
 Um bom exemplo disso é a cor dos botões que já estamos acostumados a ver. A cor verde, 
que por um padrão significa uma ação positiva, e o vermelho que representa uma negação 
ou a ação de deletar.
Estudo para interface do usuário
Aula 3 - 15/03/2022
 Ter clareza é uma das questões mais importantes, pois uma interface não pode ser muito 
complexa e repleta de explicações; assim, o usuário ficará perdido e não saberá que ação 
tomar, mas também não pode ser minimalista, ao ponto de ele não entender como 
funciona. Buscar pelo meio termo é o que chamamos de clareza em UI.
Aula 3 - 15/03/2022
 Uma boa interface é, necessariamente, redundante, pois é preciso deixar mais de um 
caminho possível para que o usuário consiga chegar ao seu destino ou desfazer uma ação 
errada. O papel de um profissional de UI designer é guiar o usuário de forma simples, ao 
invés de complicar a sua experiência criando um labirinto.
Aula 3 - 15/03/2022
 O modo como as pessoas utilizam os produtos está mudando, dessa forma as interfaces 
precisam acompanhar essas mudanças se quiserem continuar entregando a melhor 
experiência. Graças a isso, o trabalho do UI designer acabou se tornando essencial 
em cada processo.
 E como o mercado deUser Interface exige uma mudança constante, isso também é um 
requisito para o profissional que se aventura em fazer interfaces cada vez mais amigáveis.
Aula 3 - 15/03/2022
A interface com o usuário deve ser muito mais do que apenas bonita, ela deve ser:
a) De baixo custo ou gratuita.
b) De difícil entendimento para ser desafiadora.
c) De baixa facilidade de entendimento.
d) De fácil entendimento e redundante.
e) De acordo com as cores da moda.
Interatividade
Highlight
Highlight
Aula 3 - 15/03/2022
A interface com o usuário deve ser muito mais do que apenas bonita, ela deve ser:
a) De baixo custo ou gratuita.
b) De difícil entendimento para ser desafiadora.
c) De baixa facilidade de entendimento.
d) De fácil entendimento e redundante.
e) De acordo com as cores da moda.
Resposta
Aula 4 - 16/03/2022
 A arquitetura da informação é a prática de decidir como organizar as partes de alguma coisa, 
de modo a torná-la compreensível; podemos dizer que a AI tem a função de auxiliar as 
pessoas a encontrarem o que elas estão procurando. Seja em objetos ou locais, físicos ou 
digitais, ela também possui a finalidade de tornar claro o contexto em que o indivíduo ou 
o usuário está. 
Arquitetura da informação
Nem todo mundo que está sendo inserido no sistema, tem uma visão clara do mesmo.
A maneira como o usuário vai ser introduzido no contexto.
Aula 4 - 16/03/2022
Existem 4 perguntas que o usuário precisa conseguir responder rapidamente, assim que entrar 
em um site:
O que é isto?
O que eles têm por aqui?
O que posso fazer aqui?
Por que devo estar aqui e não em outro site?
Arquitetura da informação
Aula 4 - 16/03/2022
O que é o nosso site. É um site de receitas?
Receitas 
Consultar receitas
Porque o meu site é muito bom e têm uma avaliação muito boa pelos usuários.
 Textos, imagens, gráficos, conteúdo em áudio etc.;
 Mapeamento das páginas ou telas;
 Estrutura;
 Taxonomia;
 Volume de informações.
Arquitetura da informação: conteúdo
Aula 4 - 16/03/2022
ciência ou técnica de classificação.
 Persona;
 Necessidades;
 Comportamento de busca pela informação;
 Experiência de uso;
 Tarefas que pretende executar na sua aplicação.
Arquitetura da informação: usuários
Grupo de pessoas com gostos similares são público-alvo.
É o que nós fazemos para encontrar um usuário bem específico.
Aula 4 - 16/03/2022
 Modelo de negócios;
 Objetivos do projeto;
 Tecnologias e metodologias de desenvolvimento;
 Recursos (capital, pessoas, equipamentos, entre outros);
 Restrições.
Arquitetura da informação: contexto
Aula 4 - 16/03/2022
 Foi com o trabalho do psicólogo cognitivista Donald Norman que a IHC começou a tomar 
forma, trabalhando com o conceito de usabilidade e, com isso, podemos citar três 
ondas históricas.
Aula 4 - 16/03/2022
 A primeira onda é voltada para fatores humanos, estudo do usuário como um sistema 
complexo com mecanismos para processar as informações, focando no indivíduo e, 
consequentemente, gerando os guias de desenvolvimento de interface e metodologias 
formais, além de criar testes sistematizados baseados em métricas.
Seria a forma de controlar as métricas do site/programa.
Aula 4 - 16/03/2022
 A segunda também era voltada para os fatores humanos, mas agora com o foco em grupos 
e uma busca por abordagens qualitativas, prototipação e design contextual, diferentemente 
da onda anterior, que tinha uma abordagem mais quantitativa.
Qualitativo - Qualidade
Quantitativo - Quantidade
Aula 4 - 16/03/2022
 A terceira onda tem foco em aspectos mais estéticos e culturais, buscando a expansão do 
conhecimento sobre o cognitivo, em relação ao emocional, estudo sobre os fatores 
pragmáticos sociais e é, nesse momento, que a tecnologia deixou de ser encarada apenas 
como uma ferramenta de trabalho para integrar parte da cultura e do cotidiano das pessoas.
A tecnologia não é algo mais distante. Hoje ela faz parte da nossa vida.
Aula 4 - 16/03/2022
Foi o resultado do trabalho de Donald Norman que deu origem ao que conhecemos, hoje, 
como IHC. Sendo assim, assinale a alternativa que corresponda corretamente aos 
conceitos apresentados:
a) A primeira onda diz respeito aos fatores mais estéticos e culturais.
b) Existem 3 perguntas que nós, os usuários, costumamos fazer dentro de nosso site.
c) A segunda onda tinha uma abordagem mais qualitativa dos fatores humanos.
d) A arquitetura da informação diz respeito ao conteúdo, ao contexto e ao programador.
e) A terceira onda é voltada para os fatores humanos.
Interatividade
Foram fatores culturais, etc.
Aula 4 - 16/03/2022
Foi o resultado do trabalho de Donald Norman que deu origem ao que conhecemos, hoje, 
como IHC. Sendo assim, assinale a alternativa que corresponda corretamente aos 
conceitos apresentados:
a) A primeira onda diz respeito aos fatores mais estéticos e culturais.
b) Existem 3 perguntas que nós, os usuários, costumamos fazer dentro de nosso site.
c) A segunda onda tinha uma abordagem mais qualitativa dos fatores humanos.
d) A arquitetura da informação diz respeito ao conteúdo, ao contexto e ao programador.
e) A terceira onda é voltada para os fatores humanos.
Resposta
Aula 4 - 16/03/2022
 ARAÚJO, B. V. et al. Metodologia para a modelagem de negócios em empresas nascentes 
de base. XXIV Seminário de Parques Tecnológicos e Empresas de Base. 22-26 set. 2014.
 BARBOSA, S. D. J.; SILVA, B. S. da. Interação humano-computador. Rio de Janeiro: 
Elsevier, 2011.
 BATTISTELLI, J. O que é usabilidade? Apresentando UX para não designers. Fonte: 
Mastertech. Disponível em: https://blog.mastertech.com.br/design/o-que-e-usabilidade-
apresentando-ux-para-nao-designers/. Acesso em: 15 jun. 2019.
 BENYON, D. Interação humano-computador. São Paulo: Pearson, 2011.
 CAELUM. UX e usabilidade aplicados em mobile e web. 
Apostila do Curso WD-41. Disponível em: 
https://www.caelum.com.br/apostila-ux-usabilidade-mobile-
web/. Acesso em: 15 jun. 2019.
 ZEMEL, T. Web design responsivo: páginas adaptáveis para 
todos os dispositivos. São Paulo: Casa do Código, 2015.
Referências
Aula 4 - 16/03/2022
ATÉ A PRÓXIMA!