UNIP Livro-Texto I - Interface Humano-Computador

Prévia do material em texto

Autor: Prof. Caique Zaneti Kirilo
Colaboradoras: Profa. Vanessa Lessa
 Profa. Christiane Mazur Doi
Interface 
Humano-Computador
Professor conteudista: Caique Zaneti Kirilo
É graduado em Ciência da Computação e mestre em Engenharia de Produção pela Universidade Paulista (UNIP). 
É professor dos cursos de graduação em Ciência da Computação e Sistemas de Informação e do curso de pós-graduação 
em Engenharia de Software na UNIP. É integrante do grupo de pesquisa de Engenharia de Software aplicada à criação 
de Sistemas Críticos da UNIP.
 
© Todos os direitos reservados. Nenhuma parte desta obra pode ser reproduzida ou transmitida por qualquer forma e/ou 
quaisquer meios (eletrônico, incluindo fotocópia e gravação) ou arquivada em qualquer sistema ou banco de dados sem 
permissão escrita da Universidade Paulista.
Dados Internacionais de Catalogação na Publicação (CIP)
K58i Kirilo, Caique Zaneti.
Interface Humano-Computador / Caique Zaneti Kirilo. – São 
Paulo: Editora Sol, 2021.
164 p., il.
Nota: este volume está publicado nos Cadernos de Estudos e 
Pesquisas da UNIP, Série Didática, ISSN 1517-9230.
1. Interface. 2. Modelagem. 3. Mapeamento. I. Título.
CDU 681.3.02
U511.19 – 21
Prof. Dr. João Carlos Di Genio
Reitor
Prof. Fábio Romeu de Carvalho
Vice-Reitor de Planejamento, Administração e Finanças
Profa. Melânia Dalla Torre
Vice-Reitora de Unidades Universitárias
Profa. Dra. Marília Ancona-Lopez
Vice-Reitora de Pós-Graduação e Pesquisa
Profa. Dra. Marília Ancona-Lopez
Vice-Reitora de Graduação
Unip Interativa – EaD
Profa. Elisabete Brihy 
Prof. Marcello Vannini
Prof. Dr. Luiz Felipe Scabar
Prof. Ivan Daliberto Frugoli
 Material Didático – EaD
 Comissão editorial: 
 Dra. Angélica L. Carlini (UNIP)
 Dr. Ivan Dias da Motta (CESUMAR)
 Dra. Kátia Mosorov Alonso (UFMT)
 Apoio:
 Profa. Cláudia Regina Baptista – EaD
 Profa. Deise Alcantara Carreiro – Comissão de Qualificação e Avaliação de Cursos
 Projeto gráfico:
 Prof. Alexandre Ponzetto
 Revisão:
 Vitor Andrade
 Lucas Ricardi
Sumário
Interface Humano-Computador
APRESENTAÇÃO ......................................................................................................................................................9
INTRODUÇÃO ........................................................................................................................................................ 10
Unidade I
1 CONCEITOS IMPRESCINDÍVEIS ................................................................................................................. 11
1.1 Introdução ............................................................................................................................................... 11
1.2 Noções gerais sobre interface humano-computador (IHC) ................................................ 12
1.2.1 Terminologia e conceitos básicos ..................................................................................................... 12
1.2.2 Interatividade, usabilidade e responsividade ............................................................................... 16
1.2.3 Princípios de design ............................................................................................................................... 17
1.2.4 Cores e padrões gráficos ...................................................................................................................... 17
2 FUNDAMENTAÇÃO INTERDISCIPLINAR .................................................................................................. 17
2.1 Fundamentos humanos, cognição, ergonomia e ambiente de trabalho ....................... 18
2.1.1 Cognição ..................................................................................................................................................... 18
2.1.2 Ergonomia .................................................................................................................................................. 20
2.1.3 Habilidades físicas e ambientes de trabalho ................................................................................ 22
2.1.4 Diferenças de personalidade .............................................................................................................. 24
2.1.5 Diferenças culturais ............................................................................................................................... 25
2.1.6 Acessibilidade no mercado.................................................................................................................. 25
2.1.7 Fundamentos de interface .................................................................................................................. 26
2.1.8 Componentes de hardware ............................................................................................................... 26
2.1.9 Componentes de software .................................................................................................................. 27
3 INTERFACE E USABILIDADE ........................................................................................................................ 27
3.1 User experience (UX) ........................................................................................................................... 28
3.2 User interface (UI) ................................................................................................................................ 28
3.3 User experience (UX) versus user interface (UI) ....................................................................... 29
3.4 Arquitetura da informação: contexto, usuários e conteúdo .............................................. 31
3.5 Primeira, segunda e terceira ondas da IHC ................................................................................ 32
4 ESTILOS DE INTERAÇÃO, MODELAGENS E DESIGN ........................................................................... 33
4.1 Linguagem de comando .................................................................................................................... 33
4.1.1 Linguagem natural ................................................................................................................................. 33
4.1.2 Menu ............................................................................................................................................................ 33
4.1.3 Preenchimento de formulário ........................................................................................................... 34
4.1.4 Manipulação direta ................................................................................................................................ 34
4.1.5 Modelagem conceitual ......................................................................................................................... 34
4.1.6 Modelagem física .................................................................................................................................... 35
4.1.7 Design de interação: métodos e técnicas ..................................................................................... 35
4.2 Diagrama de classes ............................................................................................................................ 78
4.2.1 Caso de uso e diagramas de caso de uso ...................................................................................... 79
4.2.2 Relacionamentos .................................................................................................................................... 80
4.3 Modelagem visual ................................................................................................................................ 92
4.3.1 Protótipos de baixa, média e alta fidelidade ............................................................................... 92
4.3.2 Avaliação de usabilidade .....................................................................................................................93
4.3.3 Persona ........................................................................................................................................................ 94
Unidade II
5 CONCEITOS AVANÇADOS ............................................................................................................................. 99
5.1 Introdução ............................................................................................................................................... 99
5.2 Affordance .............................................................................................................................................. 99
5.3 Interfaces gráficas (interfaces web)............................................................................................100
5.4 Hipertexto, hiperlink, hipermídia e multimídia ......................................................................103
5.4.1 Hipertexto ................................................................................................................................................103
5.4.2 Hiperlink ...................................................................................................................................................103
5.4.3 Hipermídia ...............................................................................................................................................103
5.4.4 Multimídia ...............................................................................................................................................104
5.5 Realidade virtual (rv) e realidade aumentada (ra) ................................................................104
5.5.1 Realidade virtual (rv) ...........................................................................................................................104
5.5.2 Realidade aumentada (ra) .................................................................................................................108
5.6 Reconhecimento de gestos ............................................................................................................112
5.7 Aspectos adicionais sobre prototipação ...................................................................................112
5.7.1 Mapeamento do projeto .................................................................................................................... 113
5.7.2 Modelagem do protótipo .................................................................................................................. 114
5.7.3 Ferramentas de prototipação ........................................................................................................... 114
5.7.4 Protótipo funcional ............................................................................................................................116
6 ASPECTOS ADICIONAIS SOBRE PROJETO DE INTERFACES ............................................................116
6.1 Human Interface Guidelines e padrões .....................................................................................117
6.2 Design Rationale .............................................................................................................................118
Unidade III
7 CONCEITOS COMPLEMENTARES ..............................................................................................................123
7.1 Introdução .............................................................................................................................................123
7.2 Acessibilidade e desenvolvimento web – leitores de tela ..................................................123
7.3 Algumas ferramentas para projeto de interface ...................................................................125
7.4 Métodos de avaliação: questionários online e testes A/B .................................................132
7.4.1 Questionários on-line ........................................................................................................................ 132
7.4.2 Testes A/B ................................................................................................................................................ 133
7.5 Aspectos adicionais sobre testes de interface ........................................................................134
7.6 Aspectos adicionais sobre testes de usabilidade ...................................................................134
7.7 Mapas mentais de navegação (mindmaps) .............................................................................135
7.8 Classificação dos métodos de avaliação ...................................................................................146
7.9 Heurística .............................................................................................................................................146
8 EFETIVAÇÃO DA ACESSIBILIDADE ...........................................................................................................147
8.1 Usuários da terceira idade ..............................................................................................................149
8.2 Usuários no começo da vida ..........................................................................................................149
8.3 Métodos qualitativos e métodos quantitativos .....................................................................150
8.3.1 Métodos qualitativos.......................................................................................................................... 150
8.3.2 Métodos quantitativos ...................................................................................................................... 150
8.4 Pesquisa atitudinal e pesquisa comportamental ..................................................................151
8.5 Mapas de calor (heatmaps) ............................................................................................................152
8.6 Testes de conceito .............................................................................................................................152
8.7 Técnica de classificação de cartões (card sorting) ................................................................153
8
9
APRESENTAÇÃO
Esta disciplina tem como objetivo apresentar ao estudante os conceitos iniciais de usabilidade 
com a intenção de iniciar sua capacitação para o projeto e o desenvolvimento de interfaces amigáveis 
com o usuário.
Para isso, os conteúdos desenvolvidos neste livro-texto serão divididos em três unidades. 
Na unidade I, serão abordados os seguintes tópicos:
•	 noções gerais sobre IHC, interatividade, usabilidade, responsividade, princípios de design, cores e 
padrões gráficos;
•	 fundamentos interdisciplinares, fundamentos humanos, cognição, ergonomia, ambiente de 
trabalho e características das interfaces;
•	 fundamentos de interface, componentes de hardware e componentes de software;
•	 interface e usabilidade, user experience (UE), user interface, arquitetura da informação, estilos 
de interação, linguagem de comando, linguagem natural, menu, formulário, manipulação direta, 
modelagem conceitual, modelagem física;
•	 design de interação, wireframes (esboços), fluxogramas, mapas de site, inventário de conteúdo, 
UML (Unified Modeling Language – Linguagem de Modelagem Unificada –, incluindo diagramas de 
classes, caso de uso, diagramas de caso de uso e relacionamentos), modelagem visual, protótipos 
de baixa, média e alta fidelidade, avaliação de usabilidade e definições de persona.
Na unidade II, serão abordados os seguintes tópicos:
•	 interface web, hipertexto, hiperlink, hipermídia, multimídia, affordance, realidade virtual e 
realidade aumentada;
•	 diretrizes do projeto de interface, prototipação, mapeamento, modelagem do protótipo, 
ferramentas de prototipagem e protótipo funcional.
Na unidade III, serão abordados os seguintes tópicos:
•	 acessibilidade edesenvolvimento web;
•	 ferramentas para projeto de interface;
•	 mapas mentais de navegação (mindmaps);
10
•	 testes de usabilidade, heurística, métodos quantitativos, métodos qualitativos, pesquisa atitudinal, 
pesquisa comportamental, grupos de discussão (focus groups), mapas de conceito (heatmaps), 
testes de conceito e técnica de classificação em cartões (card sorting).
INTRODUÇÃO
O avanço tecnológico é fundamental para a mitigação das dores e das aflições humanas por meio 
de melhorias na saúde, na segurança e na educação e para a implementação de sistemas que auxiliem 
empresas e indústrias na otimização dos seus processos e na redução dos possíveis impactos gerados 
pelas atividades por elas desenvolvidas.
Nesse sentido, os conteúdos contemplados neste livro-texto são de importância ímpar tanto para os 
futuros profissionais que atuarão na área da computação quanto para os estudantes de áreas diversas, 
pois abordam como o ser humano e a máquina coexistem em um ecossistema complexo e, até certo 
ponto, previsível.
Trataremos da IHC, sigla referente à interface humano-computador, tendo em vista as diretrizes 
que guiam os projetos de interface e considerando sua aplicação mercadológica frente aos desafios 
competitivos. Daremos ênfase aos aspectos tecnológicos e humano-cognitivos, às ferramentas de 
prototipação e de avaliação e aos princípios de usabilidade e design.
Boa leitura e bom estudo!
11
INTERFACE HUMANO-COMPUTADOR
Unidade I
1 CONCEITOS IMPRESCINDÍVEIS 
Este livro-texto apresenta um tema vasto e repleto de detalhes: a interface humano-computador. 
Podemos até dizer que, para cada tópico abordado neste livro-texto, existem assuntos suficientes para 
se redigir um livro à parte. Os conceitos imprescindíveis da área aqui abordada serão explanados de 
forma que seu entendimento sobre o tema seja abrangente e consistente, dando-lhe, assim, autonomia 
para o aprofundamento nos tópicos que mais lhe chamarem a atenção.
1.1 Introdução
Serão destacados conceitos fundamentais para entender a área de IHC e as tecnologias por ela 
desenvolvidas. Primeiro, faremos uma breve introdução ao tema, contando seu histórico e mostrando 
de onde surgiu a necessidade de tratarmos desse assunto com mais intensidade. Em seguida, será 
acentuada a terminologia utilizada nesse ambiente para possibilitar o entendimento de conceitos como 
interatividade, usabilidade e responsividade. 
Além disso, por se tratar uma área multidisciplinar, exporemos alguns elementos do design, como cores 
e padrões gráficos, associados com o estudo do ser humano interagindo com sistemas computacionais. 
Ainda falando da interdisciplinaridade da IHC, abordaremos conceitos mais estritamente relacionados 
ao ser humano, como cognição, ergonomia e ética, pois é necessário que entendamos como o indivíduo 
interage com seu próximo e comporta-se em determinado ambiente para que seja possível criar um 
sistema confortável e que apresente uma interface agradável.
No que se refere à interface, introduziremos a definição de usabilidade e continuaremos com os 
assuntos user experience (UX) e user interface (UI), o que trará uma rica discussão sobre como é possível 
se comunicar com o ser humano por meio de máquinas e como fazer com que essa experiência seja o 
mais agradável possível.
Apresentaremos os fundamentos de interação e de arquitetura da informação, para entender que 
dados não são necessariamente informações. Entretanto, ao trabalharmos os dados de determinadas 
formas, poderemos gerar informação e, consequentemente, conhecimento; talvez seja esse o 
conhecimento necessário para fazer seu sistema se comunicar assertivamente com o usuário.
Contudo, nada disso será possível sem anteriormente sabermos quais linguagens de comunicação 
estão disponíveis para uso e como podemos modelar nossas ideias antes de colocá-las em prática. 
Assim, estudaremos também os conceitos de modelos conceitual, físico e operacional, o que trará a base 
necessária para finalizarmos a unidade aprendendo sobre os processos de planejamento e sua execução.
12
Unidade I
1.2 Noções gerais sobre interface humano-computador (IHC)
A IHC tornou-se importante e mostrou-se eficiente em termos holísticos por sair do âmbito 
estritamente técnico, que concebe os projetos de “dentro para fora” e no qual o sistema é desenvolvido de 
forma que quem deve se adaptar a ele é o usuário. No âmbito mais humano, os projetos são concebidos 
de “fora para dentro”, levando-se em consideração as experiências e os sentimentos percebidos pelo 
usuário durante a utilização do projeto que está sendo desenvolvido. Nesse caso, quem deve se adaptar 
às mudanças é o projeto, não o usuário.
 Observação
O holismo refere-se ao conhecimento de dado fenômeno ou de dado 
objeto de modo completo, integral.
Nos primórdios da informática, pensava-se justamente o contrário do que é aplicado hoje: o projeto 
era desenvolvido com determinada funcionalidade e, nele, não eram consideradas as necessidades 
dos usuários em sua totalidade, o que gerava como resultado sistemas difíceis de serem utilizados. 
Entretanto, como havia poucas alternativas, os sistemas eram usados mesmo com tais limitações.
Preocupar-se com a maneira pela qual o usuário iria interagir com o sistema foi considerado, por 
muito tempo, uma espécie de “perfumaria”: isso significa que as mudanças inseridas eram meramente 
estéticas e não agregavam valor ao resultado final. Esse pensamento alterou-se com a chegada de novas 
gerações, que já nasceram em meio a um ambiente tecnológico e computacional, ou seja, estamos 
presenciando um momento no qual o desenvolvimento de um projeto de software leva primeiro em 
consideração o modo como esse projeto será recebido e utilizado pelo usuário e se ele terá ou não 
aceitabilidade. A IHC insere-se nesse âmbito, pois seu foco está na avaliação da experiência que é gerada 
entre humano e computador.
1.2.1 Terminologia e conceitos básicos
A IHC é voltada para o projeto de sistemas computacionais que interagem com o ser humano e é 
direcionada à sua implementação e à sua avaliação. Os focos de análise da IHC podem ser dados pelas 
respostas às perguntas propostas a seguir.
•	 Qual é a natureza da interação realizada entre o homem e o computador?
•	 Como os sistemas interativos são usados em determinado contexto?
•	 Quais são as características humanas a serem consideradas na interação realizada entre o homem 
e o computador?
•	 Como devem ser a arquitetura dos sistemas computacionais e a sua interface com os usuários 
para que a interação entre o homem e o computador ocorra de modo adequado e eficaz?
13
INTERFACE HUMANO-COMPUTADOR
•	 Quais são os processos de desenvolvimento a serem adotados para que tenhamos como meta o 
bom uso de uma interface? 
No campo da computação, a área de engenharia de software também aborda relações 
humano-computador, mas de uma forma particularmente técnica, com foco na construção de sistemas 
interativos mais eficazes, eficientes e robustos, a fim de haver a mitigação de erros e riscos. Ou seja, 
trata-se de uma área em que os projetos computacionais são desenvolvidos “de dentro para fora”.
Por outro lado, a área de IHC preocupa-se mais com as percepções do usuário do que com os 
aspectos técnicos abordados na engenharia de software. 
Adicionalmente, é fundamental que o usuário confie no sistema que está utilizando, visto que um 
sistema não confiável está fadado ao fracasso. Imagine, por exemplo, que seu sistema seja um ônibus de 
turismo que cumpra sempre o mesmo trajeto. Se, a cada cem partidas, houver cinco colisões, a confiança 
do público no seu produto irá se desgastar rápida e irreversivelmente. Por meio dessa analogia, podemos 
perceber que um dos pontos principais de um projeto é a confiabilidade.
Outro fator importante no desenvolvimento de projetos é o que chamamos de disponibilidade. 
Suponha, por exemplo, a existência de um sistema voltado para o acionamento de um mecanismo de 
emergência que alerta o corpo debombeiros em caso de incêndio. Imagine que esse sistema dependa do 
fornecimento de energia elétrica para funcionar. Se, no momento de um incêndio, houver queda na 
energia, isso significa que o sistema ficará indisponível justamente na hora em que o usuário mais 
precisa de sua funcionalidade. Por isso, as empresas preocupam-se em manter seus sistemas rodando 
diariamente e utilizam configurações robustas com rotinas de backup para garantir a disponibilidade 
24 horas por dia.
Um item vital no desenvolvimento de projetos é a segurança de seu sistema. Pense, por exemplo, 
em um sistema bancário que não deixasse suficientemente seguras as informações de seus usuários, 
o que possibilitaria fácil acesso de hackers e golpistas a essas informações. Nesse caso, de tempos em 
tempos, o banco enfrentaria problemas relativos a pedidos de indenizações e queda brusca do número 
de correntistas.
Logo, segurança é fator primordial. Um usuário que não se sentir seguro, seja em um sistema 
computacional, seja em uma montanha-russa, não será um usuário feliz e, consequentemente, não será 
um usuário fiel.
Além dos conceitos que foram expostos, existem algumas terminologias utilizadas que explicam um 
pouco mais sobre o caminho que será trilhado neste livro-texto, como as explicadas a seguir.
•	 CHI (computer human interaction – interação homem-computador). Há uma variação que 
significa a mesma coisa: HCI (human computer interaction). Ambas as formas focam na interação 
do ser humano com o computador, ou seja, analisam como as duas entidades se relacionam.
14
Unidade I
•	 HMI (human machine interface – interface homem-máquina). Há variações que significam a 
mesma coisa: IHC (interface humano-computador) e IHM (interface homem-máquina). Trata-se 
de áreas que abordam basicamente o mesmo ponto. Elas deixam o tema mais abrangente no 
sentido de que existe uma interface entre um humano e uma máquina, ou seja, não há apenas 
um computador em si, mas há, também, um sensor de IoT ou outra ferramenta computacional.
 Observação
De maneira resumida, temos o que segue.
•	 CHI: foca na interatividade entre humanos e computadores.
•	 IHM: foca no relacionamento entre humanos e máquinas, incluindo 
os computadores.
• IHC: foca na satisfação dos usuários.
 Lembrete
A IHC é voltada para o projeto de sistemas computacionais que interagem 
com o ser humano e é direcionada à sua implementação e à sua avaliação
1.2.1.1 Natureza da interface humano-computador (IHC)
O computador surgiu de maneira não acessível ao grande público: em um primeiro momento, apenas 
universidades, governos e corporações tinham condições de bancar a utilização de computadores, com 
fins meramente de comunicação e automatização de pequenos processos, o que tornava sua interação 
com o ser humano muito limitada. 
Entretanto, com o passar dos anos, surgiu o que foi chamado de personal computer (PC), ou seja, 
existia a possibilidade de comprarmos um computador que pudesse ser utilizado em nossas próprias 
residências, mesmo que, para isso, precisássemos desembolsar boa quantia de dinheiro.
Foi nesse momento que pessoas comuns começaram a ter acesso às tecnologias computacionais, 
pois tais tecnologias ficaram mais baratas, mais avançadas e mais fáceis de serem usadas.
Assim, os computadores passaram a fazer parte da rotina das pessoas: eles estavam presentes em 
nossas casas, em nossos ambientes de trabalho, nos supermercados, nos hospitais, nas escolas etc. Aos 
poucos, a internet foi aparecendo e tomando a forma que conhecemos hoje, expandindo ainda mais as 
possibilidades de interação do ser humano com o computador.
15
INTERFACE HUMANO-COMPUTADOR
Tudo isso fez com que o computador se transformasse de apenas mais um meio de comunicação 
para uma poderosa central multimídia e multitarefa, que tinha como diferencial a interatividade, ou, 
como nossas avós costumam falar, “é uma televisão que faz o que você manda”.
 Saiba mais
Os filmes a seguir podem propiciar uma maior imersão com a 
computação e seus avanços.
PIRATAS do Vale do Silício. Direção: Martyn Burke. EUA: Haft 
Entertainment, 1999. 97 min.
A REDE. Direção: Irwin Winkler. EUA: Columbia Pictures, 1995. 114 min.
JOBS. Direção: Zack Snyder. EUA: Five Star Institute, 2013. 127 min.
1.2.1.2 Utilização de sistemas interativos em contextos
A forma como um sistema computacional será utilizado e o modo como será feita sua interação com 
o usuário dependem muito do contexto no qual tal sistema está situado.
Os jogos digitais são bons exemplos de sistemas interativos, pois são criados justamente pensando-se 
na interação humana com o programa desenvolvido digitalmente. O contexto presente nesse caso é o 
do entretenimento, mas isso não exclui outros pontos, por exemplo, os jogos educativos.
Outro exemplo de sistemas interativos são os caixas eletrônicos, máquinas desenvolvidas, a princípio, 
para reduzir as filas nos bancos. Então, teoricamente, esses caixas fazem tudo o que um caixa humano 
faria, mas sem a necessidade de entrarmos em uma gigantesca fila. Logo, o sistema do caixa eletrônico 
deve ser interativo a ponto de o usuário conseguir realizar sozinho as operações. Vale destacar que esse 
sistema deve ser desenvolvido de modo que seja rápido e seguro, o que torna a experiência de seu uso 
diferenciada quando comparada à experiência de uso de um jogo eletrônico.
1.2.1.3 Características humanas
Temos que entender que o computador é desenvolvido por seres humanos e para seres humanos: 
assim, as características humanas moldam todo o ambiente, que está direta ou indiretamente ligado 
ao computador.
Isso torna o desenvolvimento de sistemas algo muito mais humano do que pensamos, visto que as 
variáveis que afetam o ser humano também afetam o sistema.
16
Unidade I
Por exemplo, o nível intelectual, a visão de mundo, a forma de se expressar, a maneira de raciocinar 
na resolução de um problema, tudo isso acaba sendo afetado pelo convívio da máquina com o ser 
humano, pois, afinal, ela está sendo desenvolvida justamente para auxiliar humanos.
1.2.1.4 Arquitetura de sistemas computacionais e da interface com usuários
Arquitetar um sistema passou a ser uma etapa imprescindível na hora de projetar um sistema.
A IHC também aborda esse tipo de modelagem, pois a interface com o usuário deve ser pensada 
muito antes de o sistema ser desenvolvido. Primeiro, pensamos em como será a interface com o 
usuário; depois, começamos a colocar em prática os itens de desenvolvimento se todas as validações 
estiverem corretas.
1.2.1.5 Processos de desenvolvimento preocupados com o uso
O desenvolvimento de software nos dias atuais está completamente voltado para o modo como esse 
projeto será usado. Nesse sentido, o desenvolvedor tenta entender todas as variáveis que o ambiente 
no qual o software será aplicado pode oferecer, inclusive fazendo simulações de situações de uso 
real do sistema.
1.2.2 Interatividade, usabilidade e responsividade
A definição de interatividade entre usuários e sistema evoluiu ao longo do tempo. No início, tratava-se 
essencialmente da verificação de estímulos e de respostas no âmbito físico. Todavia, com o surgimento 
das pesquisas de base cognitiva, o foco começou a ser direcionado para a comunicação com as máquinas, 
deixando de estar mais restrito à operação de máquinas. De modo amplo, a interação usuário-sistema 
pode ser considerada tudo o que acontece quando uma pessoa e um sistema computacional unem-se 
para realizar tarefas, visando ao alcance de um objetivo determinado (BARBOSA; DA SILVA, 2011). 
A usabilidade refere-se ao grau com que um produto é utilizado por usuários específicos para 
atingir objetivos específicos com eficácia, eficiência e satisfação em determinado contexto. Os 
critérios de usabilidade podem ser compreendidos como um conjunto de fatores que qualificam 
a interação de uma pessoa com um sistema. Tais critérios estão relacionados com a facilidade e 
o esforço necessários para os usuários aprenderem e utilizarem um sistema.Logo, a usabilidade 
refere-se, principalmente, às capacidades cognitivas, perceptivas e motoras dos usuários que são 
acionadas durante a interação. Os fatores de usabilidade podem ser resumidos na agilidade de 
aprendizado, na facilidade de recordação, no grau de eficiência, na segurança e na satisfação do 
usuário (BARBOSA; DA SILVA, 2011). 
A responsividade é a capacidade de se responder o mais rapidamente possível e do modo mais 
adequado à demanda de determinada situação. Se aplicarmos essa definição ao mundo web, vemos que 
a responsividade representa a capacidade de uma página web adaptar seu design e suas funcionalidades 
à tela do usuário.
17
INTERFACE HUMANO-COMPUTADOR
Vale notar que, apesar de a disposição dos elementos em tamanhos distintos de tela ser o principal 
indicador de uma página responsiva, essa não é a única medida a ser tomada para adaptá-la. Devemos 
pensar em manter a qualidade e o funcionamento de todas as funções do site, levar em conta a velocidade 
reduzida de alguns usuários e assegurar que determinados elementos sejam ocultados quando sua 
usabilidade for prejudicada em função do tamanho da tela (ZEMEL, 2012). 
1.2.3 Princípios de design
As soluções e os métodos do design devem respeitar leis e princípios estabelecidos por disciplinas de 
ciências naturais e exatas, como a física, a química e a matemática.
Nesse sentido, a atividade do designer está submetida a enquadrar uma situação em um tipo geral de 
problema, a fim de que sejam propostas alternativas viáveis para a resolução de determinado problema 
(BARBOSA; DA SILVA, 2011). 
1.2.4 Cores e padrões gráficos
O ser humano recebe estímulos de diferentes formas e naturezas e reage a esses estímulos de 
variadas maneiras.
Há estudos sobre estímulos que se baseiam na teoria de que as cores têm influência sobre determinadas 
ações humanas. Assim, quando olhamos para determinada cor, temos determinada sensação. A IHC faz 
uso dessa relação para induzir sentimentos que possibilitem que a emissão da mensagem que se deseja 
passar ocorra da maneira mais clara possível.
2 FUNDAMENTAÇÃO INTERDISCIPLINAR
A IHC beneficia-se de conhecimentos e de métodos de áreas fora do escopo da computação para 
entender com mais detalhes os fenômenos envolvidos no uso de sistemas computacionais interativos. 
Campos do saber como a psicologia, a sociologia e a antropologia contribuem para o aprofundamento 
dos conhecimentos sobre aspectos culturais e de discurso dos usuários e sobre seus comportamentos 
nos ambientes em que realizam suas atividades individuais e suas atividades coletivas (em grupo). Além 
disso, o estudo da interface da máquina com usuário requer conhecimentos de áreas como design, 
ergonomia, linguística e semiótica (BARBOSA; DA SILVA, 2011).
IHC
Computação Engenharia
Sociologia Design
Ergonomia Semiótica
Psicologia Artes
Antropologia Linguística
Figura 1 – IHC multidisciplinar 
18
Unidade I
As características humanas influenciam o modo como as pessoas participam das atividades que 
envolvem sistemas interativos. Vale destacar que é natural pensarmos que a interação do indivíduo 
com qualquer artefato novo (principalmente sistemas computacionais) que opere com informações 
demanda capacidade cognitiva para que ocorra o processamento dessas informações. Além disso, há os 
requisitos necessários para que a pessoa aprenda a utilizar tais artefatos.
Conhecer as características humanas dos usuários é importante no sentido de que suas capacidades 
sejam efetivamente aproveitadas e de que suas limitações sejam devidamente respeitadas durante a sua 
interação com os sistemas computacionais (BARBOSA; DA SILVA, 2011). 
 Lembrete
Um dos aspectos que torna a IHC tão importante tanto para a 
computação quanto para o ser humano é a sua interdisciplinaridade.
2.1 Fundamentos humanos, cognição, ergonomia e ambiente de trabalho
É vital entender o que chamaremos de fundamentos humanos para conseguir desenvolver soluções 
de qualidade na IHC. Assim, precisamos compreender alguns conceitos estritamente vinculados ao ser 
humano, por exemplo, a cognição. Também devemos estudar aspectos da ergonomia e do ambiente 
de trabalho.
2.1.1 Cognição
A origem da palavra cognição vem do latim cognoscere, que significa conhecer. Ou seja, trata-se de 
um termo que se refere a conhecimento e ao acúmulo de informações adquiridas por meio do processo 
de aprendizagem, que ocorre tanto de maneira formal quanto de maneira empírica. 
Quando processamos diferentes informações que recebemos de estímulos aos nossos sentidos, sejam 
eles estímulos sonoros, luminosos, químicos ou táteis, estamos usando nossa habilidade de cognição.
Em resumo, podemos dizer que a cognição é a capacidade de processarmos informações diferentes 
recebidas por estímulos de naturezas diversas, como os luminosos, sonoros, químicos e táteis, amparados 
pelos mecanismos da percepção, que incluem diversos processos, como a memória, a atenção, a 
aprendizagem, a linguagem e o raciocínio. Quando adquirimos tais conhecimentos, temos a possibilidade 
de fazer a integração de todas as informações e de analisá-las e interpretá-las.
Dispomos de várias funções cognitivas, e elas desempenham papéis importantes nos processos 
de aquisição de conhecimento ou de tomada de decisão. Entre tais funções, temos, como dissemos, 
a memória, o raciocínio, a percepção e a atenção, que funcionam de modo integrado, a fim de que 
sejam gerados novos conhecimentos e novas intepretações sobre os objetos e os eventos. Apesar de 
esses fatores serem básicos para qualquer indivíduo, eles constituem experiências únicas em virtude das 
especificidades envolvidas. Por exemplo, para Ana, o cheiro de determinado perfume pode remeter a um 
19
INTERFACE HUMANO-COMPUTADOR
conjunto de lembranças de algo que ela viveu. Já para Beto, o cheiro do mesmo perfume pode remeter 
a lembranças diferentes das experimentadas por Ana ou pode não remeter a nenhuma lembrança. Isso é 
resultado do fato de a memória associada a esse estímulo (cheiro do perfume) ter significados diferentes 
para Ana e para Beto. 
Como já citado anteriormente, a percepção faz parte do processo cognitivo. Ela permite que 
entendamos o mundo por meio da interpretação de estímulos recebidos por vários meios. Um desses 
meios é a percepção visual, importante para a formação de conhecimentos novos.
Se por algum motivo nossa visão (percepção visual) for perdida ou danificada, haverá um 
redirecionamento de estímulos visuais para outros sensores presentes em nosso organismo: trata-se de 
uma adaptação biologicamente resiliente. 
A audição é um tipo de percepção presente em nossos processos cognitivos que é ativado por 
estímulos sonoros vindos do ambiente externo em que estamos inseridos. Veja o caso de uma música: ela 
pode gerar diversas emoções que ativam vários outros sensores do nosso corpo além dos auditivos. Por 
exemplo, uma música emocionante que remeta a uma situação específica da vida de alguém pode ativar 
um sentimento de nostalgia tão forte a ponto de fazer com que esse indivíduo comece a chorar. Existem 
vários experimentos em que bebês são expostos a músicas e, mesmo sem entenderem o significado da 
letra, eles são tomados por emoções causadas pela melodia, pelos sons dos instrumentos ou pelas vozes 
presentes nas canções.
Seguindo a mesma linha de raciocínio adotada anteriormente, vemos que as percepções gustativa 
e olfativa (as quais são, na realidade, percepções integradas) fazem com que sejamos capazes de sentir 
o gosto e o cheiro de alimentos. Na verdade, muitas vezes, somente pelo cheiro já podemos identificar 
qual é o alimento que está próximo. Isso fica claro no caso do café sendo coado: os indivíduos presentes 
na vizinhança do local em que o café é feito, mesmo que não gostem do sabor do café, sabem que se 
trata de café.
O olfato é uma percepção que tem o poder de potencializar o sabor das coisas. Isso pode ser observado 
quando estamos gripados e com o trato olfativo obstruído. Tal qual comoocorre com os outros sentidos, 
o olfato é capaz de armazenar memórias em nosso subconsciente. Podemos verificar esse fato, por 
exemplo, quando sentimos o cheiro de determinado perfume e lembramos de uma pessoa especial ou 
quando sentimos o cheiro exalado de certo alimento que é cozido em uma panela e recordamos de 
alguma passagem da nossa infância.
A percepção tátil é capaz de fazer com que percebamos estímulos do ambiente aplicados ao nosso 
corpo, mais especificamente na nossa pele, na qual há diversos sensores de toque prontos para serem 
ativados. Assim, temos o envio de informações aos nossos cérebros, que respondem de modo reativo, com 
a geração de sensações de cócegas, dor e prazer ou até indiferença, dependendo das particularidades 
de cada indivíduo.
20
Unidade I
A atenção é um dos processos cognitivos mais importantes para o ser humano, pois está diretamente 
vinculada ao nosso nível de concentração. Logo, deficiências relacionadas à atenção podem ocasionar 
problemas no reconhecimento de momentos com clareza ou na percepção da riqueza de detalhes. 
Compensa dizermos que a visão é uma percepção fundamental, pois ela é responsável por enviar 
informações visuais ao nosso cérebro, que, por sua vez, irá processá-las e “calibrar” todos os outros 
sensores baseados no ambiente relatado pela visão.
Veja a figura a seguir, em que temos a imagem de uma pizza. Mesmo que estejamos distantes física 
e temporalmente da confecção dessa pizza, podemos, pela nossa visão, emular o seu cheiro e até mesmo 
seu sabor, o que, provavelmente, gera um desejo por degustar esse sabor emulado, desejo que será 
potencializado se estivermos com fome.
Figura 2 – Imagem de pizza que aguça nosso desejo de saboreá-la
2.1.2 Ergonomia
A ergonomia pode ser definida como a disciplina relacionada ao entendimento das interações 
entre seres humanos com os objetos ou os elementos de um sistema que o envolve. Além disso, trata 
da aplicação de métodos embasados em princípios científicos com o intuito de projetar soluções que 
otimizem o bem-estar humano, mitigando seu desconforto de maneira geral e, assim, melhorando seu 
desempenho produtivo.
Os estudos sobre esse assunto começaram com o trabalho de um médico italiano chamado Bernardino 
Ramazzini (1633-1714). Ele foi o primeiro autor a escrever sobre doenças e lesões relacionadas ao 
ambiente de trabalho. Publicou um artigo sobre esse tema em 1700, que, traduzido para o português, 
tem o nome de “Doenças ocupacionais”.
21
INTERFACE HUMANO-COMPUTADOR
Figura 3 – Ergonomia no uso do celular 
Apesar de o seu estudo ser inovador, Ramazzini foi, por vezes, discriminado por seus colegas de 
profissão por perder tempo indo aos locais de trabalho de seus pacientes com a finalidade de encontrar 
os motivos que ocasionassem suas enfermidades.
A ergonomia, termo que surgiu muitos anos depois da publicação do artigo de Ramazzini, é um 
assunto multidisciplinar, que engloba variados campos do saber, como a engenharia, a psicologia e 
a fisiologia.
Analisando a ergonomia pela visão da IHC, podemos entender que a usabilidade e a acessibilidade 
estão completamente ligadas ao nível ergonômico de determinada aplicação. Isso significa que uma 
aplicação que esteja em conformidade com os princípios da ergonomia é uma aplicação que atende a 
critérios de eficiência, eficácia e satisfação no uso. 
Os smartphones mais antigos foram projetados de modo a ter uma tela com as dimensões ideais 
para que nosso dedo polegar fosse capaz de “caminhar” por todo o seu entorno. Assim, era possível 
utilizar o celular com apenas uma mão. Entretanto, devido à demanda por telas maiores em virtude de 
jogos que são jogados nos dispositivos, essa premissa foi deixada de lado, o que afetou a ergonomia pelo 
fato de passar a haver a necessidade do uso das duas mãos para utilizar o celular.
De acordo com Iida (2005), a ergonomia é o estudo da adaptação das condições de trabalho ao ser 
humano. Essas condições abrangem não apenas máquinas e equipamentos, mas também toda situação 
em que ocorre algum relacionamento entre o ser humano e seu trabalho. Ela contempla o ambiente 
físico e os aspectos organizacionais de como o trabalho é programado e controlado para produzir os 
resultados desejados. A ergonomia estuda vários aspectos: postura e movimentos corporais, fatores 
ambientais, informação, relações entre mostradores e controles, bem como cargos e tarefas. 
22
Unidade I
 Observação
A ergonomia baseia-se em conhecimentos de outras áreas científicas, 
como a antropometria, a biomecânica, a fisiologia, a psicologia, a toxicologia, 
a engenharia mecânica, o desenho industrial, a eletrônica, a informática e a 
gerência industrial. Ela integrou os conhecimentos relevantes dessas áreas, 
para desenvolver métodos e técnicas específicas para aplicação desses 
conhecimentos na melhoria do trabalho e das condições de vida, tanto dos 
trabalhadores quanto da população em geral (DUL; WEERDMEESTER, 2012).
A ergonomia informacional dedica-se a otimizar processos informativos para que eles sejam 
interpretados por seus alvos de forma intuitiva, rápida e confortável, maximizando, assim, a eficiência e 
a eficácia do processo informativo.
2.1.3 Habilidades físicas e ambientes de trabalho
Um dos maiores desafios da IHC é a projeção de interfaces que se adaptem a todas as pessoas. 
Isso é uma tarefa difícil, pois é fato que as pessoas têm diferentes habilidades motoras, perceptivas 
e cognitivas.
A antropometria estuda as dimensões humanas, que são classificadas, normalmente, por critérios 
como gênero, idade e grupo étnico. Em geral, tais parâmetros conseguem atingir medidas de cerca de 
95% de toda a população e de seus grupos.
Por exemplo, as empresas que produzem teclados precisam de parâmetros detalhados de seus 
usuários para que desenvolvam dispositivos confortáveis, úteis e ágeis. Assim, essas empresas utilizam 
como padrões:
•	 o distanciamento entre uma tecla e outra;
•	 o tamanho das teclas;
•	 o curso das teclas;
•	 o tempo de resposta entre o pressionar e o executar;
•	 a pressão que precisa ser exercida para que a tecla seja ativada;
•	 as teclas de função que devem ser inseridas de forma extra no projeto.
Entretanto, em determinados dispositivos, mesmo que o projeto seja feito com fins generalizantes 
e atinjam, assim, o maior número de pessoas possível, devemos estar atentos para certas nuances que 
23
INTERFACE HUMANO-COMPUTADOR
podem ser personalizáveis sem mudar as características genéricas. Por exemplo, podemos propor um 
monitor de computador que tenha leiaute, especificações e resolução padronizados. Logo, mesmo que 
uma configuração padrão venha pronta de fábrica, existe a possibilidade de ela ser personalizada para 
gerar maior conforto e para generalizar ainda mais o produto.
Há, também, medidas relacionadas a tempo de resposta. Por exemplo, na década de 1990, era 
aceitável que, para abrirmos determinada página web, levássemos 1 minuto ou até mais, dependendo 
do conteúdo da página. A percepção de que esse intervalo de tempo era razoável mudou bastante: nos 
dias atuais, esse tempo alterou-se drasticamente, e as páginas web que demoram mais de 3 segundos 
para abrir, muitas vezes, são consideradas pesadas ou lentas.
É de extrema relevância entendermos que, em dada sociedade, podem existir pessoas com as mais 
diversas particularidades físicas, o que tende a afetar o modo como elas percebem determinada situação. 
Por exemplo, há pessoas que apresentam daltonismo em seus mais variados tipos, há pessoas com 
problemas de audição etc. Tendo isso em mente, podemos ponderar alguns pontos e até mesmo fazer 
adaptações relevantes na interface com o usuário.
Figura 4 – Local de trabalho
Pensando um pouco em um ambiente corporativo, todos os apontamentos sobre variações físicas 
feitas até o momento continuam válidos. Além disso, existem várias diretrizes a serem seguidas quando 
estamos falando de projetar ou de montar um ambiente que será utilizado para atividadeslaborais, 
conforme documentação da American National Standards Institute (ANSI, 2007). De acordo com essas 
diretrizes, devemos dar atenção especial aos itens citados a seguir.
•	 condições da superfície de trabalho;
•	 espaço existente para a acomodação das pernas;
•	 ajustes de alturas e de ângulos no que se refere às cadeiras e às superfícies de trabalho;
•	 postura e posicionamento do funcionário;
•	 níveis de ruído, luminosidade, temperatura etc.
24
Unidade I
Se projetarmos corretamente o ambiente de trabalho, a satisfação e o conforto do colaborador 
aumentarão e, consequentemente, seu desempenho vai melhorar, o que vai gerar benefícios para o 
clima organizacional. Quando falamos de projetos de ambiente de trabalho, precisamos considerar 
aspectos relacionados à ergonomia, à sociologia, à psicologia, à física e à biologia, por exemplo.
 Saiba mais
Os filmes a seguir podem propiciar um maior entendimento sobre o 
ambiente de trabalho na área da tecnologia: 
OS ESTAGIÁRIOS. Direção: Shawn Levy. EUA: Wild West Picture Show 
Productions, 2013. 119 min.
A REDE social. Direção: David Fincher. EUA: Columbia Pictures, 
2010. 121 min.
O JOGO da imitação. Direção: Morten Tyldum. EUA: Diamond Films, 
2014. 114 min.
2.1.4 Diferenças de personalidade
A forma como a pessoa se enxerga dentro de um ambiente contribui para a formação de suas 
avaliações. Além disso, precisamos considerar que, em dado local ou em dado evento, podemos ter 
pessoas com diferentes tipos de personalidade, hábitos culturais e visões de mundo.
Figura 5 – Grupo de pessoas trabalhando
As variabilidades de personalidade são o foco de estudos de diversas áreas do conhecimento. 
No caso da IHC, recorremos especialmente à área da psicologia, que auxilia na obtenção de respostas 
sobre como o indivíduo se sente baseado em sua visão de mundo.
25
INTERFACE HUMANO-COMPUTADOR
Existem pessoas que gostam de desafios, outras são mais acomodadas. Existem pessoas que se 
ofendem quando expostas a determinados cenários, outras se divertem nesses mesmos cenários. Assim, 
em qualquer tipo de projeto, é necessário conhecermos profundamente o público-alvo envolvido. 
A psicologia ampara esse conhecimento, pois dispõe de recursos para traçar perfis detalhados do grupo 
e dos seus componentes.
 Observação
O fato de existirem diferentes grupos de pessoas, com diferentes 
gostos e diferentes pensamentos, faz com que ocorra enriquecimento na 
diversidade de aplicativos, estimulando a criatividade e a inovação.
2.1.5 Diferenças culturais
A globalização, acentuada pela internet, e sua expansão cada vez mais rápida permitem que pessoas 
que vivem em diversas partes do planeta tenham acesso instantâneo a determinados conteúdos que 
podem ir contra costumes culturais herdados há vários anos. Hoje vivemos um processo de readequação 
cultural constante, pois temos acesso à grande parte das culturas presentes no mundo, o que nos leva 
a tentar compreendê-las em suas particularidades.
Assim, quando projetamos um produto ou um software, é importante levar em consideração a 
cultura do público-alvo. Isso dará ao desenvolvedor uma vantagem competitiva. Caso você já tenha um 
software e precise adequá-lo a uma cultura específica, é possível empregar um processo chamado de 
localização, por meio do qual adaptamos o conteúdo existente a fim de personalizá-lo para aquele local.
Existem várias técnicas que facilitam o processo de localização. Mesmo que ele não seja feito 
durante o processo de criação ou imediatamente após a criação, podemos, por exemplo, colocar 
todo o texto da aplicação em um arquivo separado das telas, o que torna a tarefa de tradução bem 
mais fácil, pois haverá apenas um arquivo para ser localizado. Além disso, é necessário entendermos 
como as pessoas daquele determinado local assimilam cores, opiniões políticas, formalidades, 
metáforas e situações de humor, pois a simples tradução pode ser insuficiente para efetuarmos 
uma boa localização.
2.1.6 Acessibilidade no mercado
O crescimento intenso do uso das tecnologias voltadas à comunicação e à informação torna os 
produtos computacionais uma realidade cada vez mais presente no dia a dia das pessoas, que podem 
ou não ter alguma dificuldade de acessibilidade. Quando falamos de acessibilidade, não estamos 
nos referindo apenas às deficiências físicas que, eventualmente, impossibilitam um indivíduo de 
utilizar determinado equipamento tecnológico, mas também à acessibilidade nos âmbitos social, 
monetário e intelectual.
26
Unidade I
2.1.7 Fundamentos de interface
Se a interação é um processo que ocorre durante o uso, o que é a interface de um sistema interativo?
A interface de um sistema interativo compreende a parte do sistema com a qual o usuário mantém 
contato físico (motor ou perceptivo) ou conceitual durante a atividade de interação (BARBOSA; DA 
SILVA, 2011). 
2.1.8 Componentes de hardware 
De modo amplo, o hardware é a parte física, a parte palpável, de um componente ou 
equipamento. Ou seja, trata-se de um utensílio, uma máquina ou uma ferramenta. Alguns exemplos 
de hardwares são: máquina de fresa, computador, celular, dobradiças, engrenagens, peças, chips, 
processadores, parafusos.
No caso da área da tecnologia da informação (TI), a definição de hardware aplica-se aos componentes 
de dispositivos em geral, como HD, placa-mãe, monitor, memória RAM, dispositivos de entrada e de 
saída (teclado, mouse, monitor, caixas de som, controle remoto, controle de videogame etc.) e unidades 
de armazenamento (HDs, SSDs e memórias do tipo flash).
Usualmente, o termo hardware refere-se aos componentes internos de um celular, um computador 
ou um tablet, por exemplo. Para serem operados, os hardwares precisam de um software, sendo 
que hardware e software são elementos distintos. Por essa razão, existe uma expressão humorística 
antiga na TI que separa bem hardware de software: “software é o que você xinga, e hardware é o que 
você chuta”.
O hardware pode ser dividido em dois grupos:
•	 hardware interno;
•	 hardware externo.
O hardware interno, como o próprio nome já explica, é toda a parte interna e não visível do seu 
dispositivo. Em ciência da computação, o hardware interno corresponde a componentes como 
placa-mãe, placa de vídeo, processador, unidades ópticas (drives de CD/DVD/Blu-ray), coolers, memória 
RAM, HD, fonte, cabos internos, SSD etc. Esses componentes estão presentes na maioria dos dispositivos 
eletrônicos atuais, denotando algumas diferenças básicas dependendo de cada caso (tablets, 
computadores, celulares).
O hardware externo, por sua vez, corresponde a todos os componentes que são visíveis e acessíveis 
diretamente pelo usuário, por exemplo, controle remoto, controle de videogame, monitor, mouse, 
fones de ouvido, teclado, monitor, microfone, webcam, scanner, projetor, impressora, cabos externos e 
unidades de armazenamento externas (HDs e SSDs externos e pendrives).
27
INTERFACE HUMANO-COMPUTADOR
2.1.9 Componentes de software
Entendemos como software qualquer rotina automatizada rodando em um computador, ou seja, 
estamos falando de um programa computacional.
Os softwares podem ter vários tamanhos e objetivos. Temos, por exemplo, um sistema operacional, 
que é um programa que gerencia todos os componentes de hardware de uma máquina. O Windows, por 
exemplo, é um sistema operacional; a partir dele, é possível instalar outros softwares.
Existem também softwares de menor porte, como os aplicativos de celular. Eles são pequenos 
programas que geralmente dependem de um sistema operacional para funcionar.
Podemos dizer que o software é um conjunto de instruções, como uma receita de bolo, que devem 
ser seguidas passo a passo para que sua execução seja bem-sucedida.
Os softwares estão presentes em vários dispositivos além do computador, como no celular, no 
videogame, na televisão, na máquina de lavar e no sistema multimídia do carro.
Existem três categorias principais de software:
•	 softwares de programação;
•	 softwaresde sistema;
•	 softwares de aplicação.
Os softwares de programação são ferramentas criadas para que programadores desenvolvam 
novos softwares, como Eclipse, Netbeans e Delphi. Tais softwares têm como função traduzir os códigos 
digitados pelo programador em uma linguagem que o computador entenda.
Os softwares de sistema são programas que têm a tarefa de fazer a comunicação entre o computador 
e o usuário. Eles são a base sobre a qual outros softwares rodam.
Os softwares de aplicação são os programas que você utiliza em seu computador rotineiramente, como 
jogos e navegadores. Eles têm como objetivo executar uma tarefa específica dentro do seu computador.
3 INTERFACE E USABILIDADE 
Basicamente, quando falamos de usabilidade de interface, estamos nos referindo a alguns 
pilares, que são:
•	 padronização;
•	 consistência;
28
Unidade I
•	 integração;
•	 portabilidade.
A padronização da interface é fundamental para que a usabilidade seja melhorada, pois, quanto mais 
fácil for o aprendizado para a utilização do software, mais tranquila será a adaptação do usuário (pois 
a interface é confortavelmente padronizada). A não conformidade com os padrões tornam o leiaute 
“chato” e, possivelmente, o usuário não irá permanecer muito tempo nele, por ser desconfortável.
A consistência é muito semelhante à padronização. Refere-se à preocupação do desenvolvedor 
em manter seu padrão realmente funcionando, com botões que respondem ao serem pressionados 
e cores que fazem sentido com o resto do sistema. Além disso, a consistência é um complemento da 
padronização, pois manter um padrão que não faz sentido é o mesmo que não ter um padrão. Geralmente, 
os problemas de consistência acontecem quando há uma tentativa de desenvolvimento de um software 
para iPhone, por exemplo, mas que anteriormente tinha sido criada com foco total nos usuários do 
Android. Nesse caso, várias funcionalidades presentes no Android não funcionarão, assim como as que 
estiverem presentes no iPhone, mesmo que o leiaute continue seguindo o padrão já adotado.
Quando falamos em portabilidade, estamos nos remetendo ao potencial de se converter dados de um 
sistema para o outro sem que haja perda de qualidade. Em virtude da grande quantidade de softwares 
rodando em servidores cloud, é necessário que seja possível portar o sistema de uma nuvem para outra 
sem comprometimento da qualidade.
Já o conceito de integração está ligado à possibilidade de sistemas diferentes compartilharem os 
mesmos dados sem que haja perda de informação ou perda de qualidade. Por exemplo, sistemas de 
compras estão diretamente vinculados a um sistema de pagamento que, por sua vez, está vinculado a 
um sistema de interface com usuário, e todos estão trabalhando juntos.
3.1 User experience (UX)
O conceito associado à sigla UX é bem mais simples do que pode parecer, pois, no decorrer do dia, 
somos usuários (users) de uma porção de coisas, como o despertador do celular que nos acorda de 
manhã, a cadeira em que nos sentamos, o carro que dirigimos, o controle remoto do ar-condicionado 
que usamos para regular a temperatura etc. Quando você usa algum desses objetos, você tem uma 
experiência (experience).
A experiência do usuário existe desde que as pessoas começaram a usar objetos para realizar alguma 
tarefa. Vale destacar que as experiências são subjetivas, ou seja, cada pessoa pode ter uma experiência 
própria e diferente ao utilizar determinado produto (CAELUM, 2019). 
3.2 User interface (UI)
Trata-se de uma ferramenta que é utilizada para entregar uma experiência boa para o usuário.
29
INTERFACE HUMANO-COMPUTADOR
Uma interface pode ser representada:
•	 informalmente, por meio de esboços;
•	 estruturalmente, por meio de modelos ou de protótipos funcionais.
O design da interface pode ser realizado em diferentes níveis, desde a interface abstrata até a interface 
concreta. No caso da elaboração da interface abstrata, o desenvolvedor define os agrupamentos e as 
características dos elementos de interface. Um exemplo desse caso é o estabelecimento de um grupo 
com um texto editável e com uma seleção simples a ser feita entre dez itens (BARBOSA; DA SILVA, 2011). 
3.3 User experience (UX) versus user interface (UI)
A UI está relacionada à aparência, ao modo como a interface é apresentada ao usuário. É responsável 
por “seduzir” o usuário pela aparência.
A UX é mais global do que a UI e está mais relacionada à experiência total que o usuário terá, à sua 
percepção ao interagir com a aplicação.
Para entendermos de forma mais clara os papéis da UI e da UX, podemos fazer uma comparação com 
um bolo. Observe o bolo da figura a seguir. De imediato, podemos ver, na imagem, duas características 
distintas. Uma característica é a estética do bolo, ou seja, como ele se apresenta para quem for comê-lo. 
Essa característica está quase integralmente vinculada à cobertura do bolo. A segunda característica é 
a sensação e o sabor que sentirá a pessoa que comer o bolo, que, se agradáveis, poderão fazer com que 
mais pessoas queiram prová-lo também. Ou seja, além da cobertura, é preciso levar em conta o recheio 
(que dá sabor ao bolo) e a massa (que dá consistência). Normalmente, a cobertura funciona para atrair, 
pois um bolo mais bonito será bem mais desejável do que um bolo com uma aparência feia (pelo menos 
até o momento em que alguém o coma).
Figura 6 
A pergunta que fica é: onde está a UI nesse bolo? Podemos associá-la à cobertura do bolo, que chama 
a atenção do consumidor. Em uma aplicação web, a UI é responsável, por exemplo, por todo o leiaute 
do site, incluindo fontes, cores e outras variáveis. A UI tem a função de atrair os usuários pela aparência. 
A maneira como os usuários interagem com a aplicação também está incorporada ao campo da UI.
30
Unidade I
Concluímos que a UI é uma característica importante, pois, geralmente, a aparência é o primeiro 
contato do usuário com o site ou a aplicação. Como os seres humanos são guiados por sensações e 
aspectos visuais, uma interface bem pensada e desenhada pode ser o principal fator para prender o 
usuário ao site.
Um bom projeto de UI precisa dotar o site ou a aplicação web de harmonia virtual. Adicionalmente, 
precisa assegurar que o usuário conseguirá acessar todas as funcionalidades fornecidas pelo site, 
independentemente de como é acessado. Se o site é harmonioso, suas funcionalidades são de fácil 
acesso, mesmo em ambiente mobile. Se o site é agradável do ponto de vista visual, provavelmente a UI 
foi bem projetada. Nesse contexto, podemos citar uma frase: “a interface de usuário é como uma piada; 
se você precisa explicá-la, isso significa que ela pode não ser tão boa”.
Algumas ferramentas e técnicas que estão relacionadas à UI são as implementações de animações, 
a prototipagem e os estudos de branding.
Após entendermos o que é a UI, poderemos entender como a UX é representada pelo bolo da figura 
que vimos. Como dissemos, a UX é mais global do que a UI. Usando o exemplo do bolo, ela está relacionada 
às sensações que a pessoa tem ao comer o bolo. Imagine que você compre um bolo em uma confeitaria. 
Se você provar o bolo e achá-lo maravilhoso, é bem provável que você volte à confeitaria e compre 
novamente aquele tipo de bolo. Enfim, como houve uma experiência agradável com a confeitaria, ela 
acabou fidelizando você. Trazendo isso para sites e sistemas web, a UX tem relação com a percepção 
total que o usuário tem ao interagir com o site ou com a aplicação.
A UX de um site tem como objetivo que o usuário sinta felicidade e prazer ao interagir com ele. Ela 
tenta deixar tudo ao alcance do usuário sem complicação. Existem outros aspectos associados à UX, 
como a adaptabilidade a diferentes situações de acesso (largura de banda, tamanho do viewport do 
dispositivo etc.), a velocidade de resposta às ações ordenadas, as opções serem fáceis de se localizar etc.
 
Experiência do usuário
O meu sentimento geral sobre o 
sistema é bom
Design de interação
A aparência do sistema traz umainteração agradável 
Usabilidade
Eu consigo usar as 
funcionalidades de modo fácil
Utilidade
O sistema é útil e atende às 
minhas necessidades
Figura 7 – Conceito de UX 
31
INTERFACE HUMANO-COMPUTADOR
Podemos citar algumas técnicas e ferramentas que estão ligadas à UX, como acompanhamento do 
processo de desenvolvimento, wireframes, testes funcionais e de interação.
 Em suma, a UX está ligada às emoções e às sensações que o usuário vai ter ao acessar determinado 
recurso, o que torna o caráter da UX mais comportamental do que técnico. Ela procura garantir que o 
usuário sinta felicidade ao interagir com um site, fazendo dele um usuário fiel. Percebe-se que o foco 
primário é como o usuário se sente ao interagir com uma aplicação.
A UI tem foco no modo como o site se apresentará para o usuário e pretende garantir acessibilidade e 
harmonia ao conteúdo. O que guia a UI é a intenção de assegurar que o usuário disponha de uma interface 
concisa, acessível e com interação clara, independentemente da forma que esteja sendo acessada.
3.4 Arquitetura da informação: contexto, usuários e conteúdo
A arquitetura da informação (IA) está relacionada aos procedimentos envolvidos nas decisões de como 
organizar as partes de algo de modo a torná-lo compreensível. Podemos dizer, de maneira informal, que 
a IA tem a função de auxiliar as pessoas a acharem exatamente o que elas estão procurando. Operando 
em objetos físicos ou digitais, a IA tem a finalidade de tornar claro o contexto em que o indivíduo ou 
usuário está.
A IA é um dos pilares da tecnologia e da organização de grandes empresas e faz parte de um grande 
contexto de transformação digital (CAELUM, 2019).
Existem quatro perguntas fundamentais que o usuário precisa responder rapidamente assim que 
entra em um site. Essas perguntas estão elencadas a seguir: 
•	 O que é isto?
•	 O que eles têm por aqui?
•	 O que eu posso fazer aqui?
•	 Por que eu devo estar aqui, e não em outro site? (CAELUM, 2019).
Nesse contexto de artefatos digitais, a IA possibilita o desenvolvimento de produtos e de serviços 
orientados a oferecer qualidade tanto na navegação quanto na usabilidade.
Com certeza, isso é algo que requer esforço e competência do desenvolvedor, mas também é algo 
que permite que as empresas economizem tempo e dinheiro, pois resolve problemas relacionados com 
dificuldades dos usuários em entenderem o que é possível fazer dentro de um site ou com o fato de eles 
não saberem o que fazer a seguir diante de determinada tela. Há usuários que, ao não encontrarem o 
que procuram ou ao se sentirem confusos por não entenderem o que estão vendo na tela, culpam a si 
mesmos. Isso pode ocasionar uma experiência ruim e os usuários podem atribuir essa sensação negativa 
à empresa ou a algum produto ou serviço que ela oferece (CAELUM, 2019).
32
Unidade I
Para que a arquitetura da informação seja, de fato, útil, é preciso desenvolver um conteúdo com 
atenção aos usuários e ao contexto em que eles, a empresa e o projeto se encontram. Nesse sentido, 
podemos estruturar a IA com os tópicos associados ao conteúdo, ao usuário e ao contexto, conforme 
mostrado a seguir.
•	 Conteúdos:
— textos, imagens, gráficos, conteúdo em áudio etc.;
—― mapeamento das páginas ou das telas;
—― estrutura;
—― taxonomia;
—― volume de informações.
•	 Usuário:
—― necessidades;
—― comportamento de busca pela informação;
—― experiência de uso;
—― tarefas que pretende executar na sua aplicação.
•	 Contexto:
—― modelo de negócios;
—― objetivos do projeto;
—― tecnologias e metodologias de desenvolvimento;
—― recursos (capital, pessoas, equipamentos etc.);
—― restrições.
3.5 Primeira, segunda e terceira ondas da IHC
Vamos apresentar a seguir as três ondas históricas relativas ao desenvolvimento da IHC.
A primeira onda é voltada para os fatores humanos, ou seja, para o estudo do usuário visto como 
um sistema complexo de mecanismos para processar informações. Nessa onda, o centro é o indivíduo. 
Nela, são gerados os guias de desenvolvimento de interface, as metodologias formais e os testes 
sistematizados baseados em métricas.
33
INTERFACE HUMANO-COMPUTADOR
A segunda também é voltada para os fatores humanos. Contudo, agora tem foco em grupos e na 
busca por abordagens qualitativas, prototipação e design contextual, diferentemente da onda anterior, 
que tinha uma abordagem mais quantitativa.
A terceira onda tem foco em aspectos mais estéticos e culturais. Ela visa à expansão do conhecimento 
sobre a relação entres os aspectos cognitivos e emocionais e ao aprimoramento do estudo a respeito 
dos fatores pragmáticos sociais. É nesse momento que a tecnologia deixa de ser encarada apenas como 
uma ferramenta de trabalho para ser vista como parte integrante da cultura e do cotidiano das pessoas.
4 ESTILOS DE INTERAÇÃO, MODELAGENS E DESIGN 
A seguir, vamos mostrar alguns estilos de interação que as máquinas podem ter com o ser humano. 
Cada estilo apresentado é uma alternativa de comunicação que já foi testada e validada, entretanto, não 
quer dizer que seja a maneira ideal para se fazer determinado projeto.
4.1 Linguagem de comando
Em uma interação que ocorra pelo que chamamos de linguagem de comando, o próprio usuário 
deve digitar os comandos que realizam as ações na aplicação. Para isso, o usuário deve memorizar os 
comandos que precisará utilizar.
Com a intenção de que esse aprendizado seja facilitado, os comandos devem ser construídos tendo 
como referência o vocabulário do usuário, e a gramática da linguagem de comandos deve refletir o 
modo como eles conceituam as operações. Nesse sentido, o designer de uma linguagem de comando 
deve elaborar seu trabalho com base na precisão, na concisão, na facilidade de escrita e leitura, na 
completude, na rapidez, no aprendizado e na simplicidade (BARBOSA; DA SILVA, 2011). 
As linguagens de comando assemelham-se às linguagens de programação, pois elas são linguagens 
baseadas em comandos previamente definidos pelo criador da linguagem. O programador deve dominar 
os comandos para entender sua sequência e ser fluente na linguagem.
4.1.1 Linguagem natural
A interação feita na linguagem natural objetiva permitir que o usuário se expresse eficazmente 
como o faz em uma conversa informal com uma outra pessoa, utilizando seu próprio idioma. A meta 
principal é facilitar o uso de um sistema por usuários novatos. No entanto, para usuários experientes, 
esse estilo de interação pode não ser tão eficiente quanto a interação realizada por uma linguagem de 
comando (BARBOSA; DA SILVA, 2011). 
4.1.2 Menu
Na interação realizada por meio de menus, o sistema dispõe de um conjunto de opções para que o 
usuário escolha aquilo que mais lhe interessa.
34
Unidade I
Nesse estilo de interação, temos as barras de menu (pulldown), as barras de navegação, os menus 
contextuais (popup), os botões de seleção (checkboxes) e os botões de opção (radio buttons). Vale 
notar que os botões de seleção e os botões de opção, muitas vezes, são associados com diálogos de 
fornecimento de informação e formulários na web (BARBOSA; DA SILVA, 2011). 
A meta do designer de menus é criar uma boa organização de itens para que os usuários possam 
realizar suas tarefas com facilidade. A estrutura das tarefas deve guiar a seleção da estrutura de menus: 
linear, hierárquica, em rede, acíclica ou cíclica. Frequentemente, vemos menus que são organizados em 
uma estrutura hierárquica (BARBOSA; DA SILVA, 2011). 
Figura 8 – Símbolos de abrir menu (à esquerda) e de fechar menu (à direita)
4.1.3 Preenchimento de formulário
Na interação realizada por meio de formulário em ambiente web, o sistema solicita dados em campos 
que precisam ser preenchidos pelos usuários. Nesse sentido, é recomendável que o designer crie grupos 
de itens relacionados, ordene-os de modo lógico, utilize terminologia familiar aos usuários e empregue 
nomenclatura consistente (BARBOSA; DA SILVA, 2011). 
4.1.4 Manipulação direta
O estilo de interação feito por manipulação diretafoi proposto com o objetivo de aproximar a interação da 
manipulação dos objetos realizada no mundo real. Para que isso aconteça, é necessário que um objeto do mundo 
real tenha uma representação visual na interface e que cada manipulação sobre um objeto possa ser mapeada 
nas operações do mouse, como clique, duplo clique e clique e arrasto. Os resultados das ações realizadas por 
manipulação direta precisam ser imediatamente apresentados. Algumas das vantagens advindas do uso desse 
tipo de interação são a diminuição das taxas de erro, a aceleração do aprendizado, a elevação da retenção 
(memorização) das operações e o aumento da motivação para explorar o sistema. Contudo, vale destacar que o 
uso de uma interface por manipulação direta pode trazer dificuldades para usuários portadores de deficiência 
visual ou de deficiência motora (BARBOSA; DA SILVA, 2011). 
4.1.5 Modelagem conceitual
No modelo conceitual de forma gráfica, temos o que conhecemos como diagrama entidade e 
relacionamento (DER), que identifica as entidades e os relacionamentos de uma forma global.
35
INTERFACE HUMANO-COMPUTADOR
O modelo conceitual mais utilizado é o chamado de entidade e relacionamento (ER), amparado 
pelo DER, que é utilizado para representar graficamente o esquema conceitual. Por meio desse modelo, 
podemos obter uma visão macro do projeto.
O modelo conceitual é independente do hardware ou do software, ou seja, qualquer alteração feita 
no software ou no hardware não terá efeito no nível conceitual.
4.1.6 Modelagem física
Na modelagem física, temos o nível mais baixo de abstração, no qual descrevemos o modo como 
parte de hardware do projeto é apresentada e o que o torna o software e o hardware dependentes.
4.1.7 Design de interação: métodos e técnicas
O design de interação e a arquitetura de informação compartilham o que chamamos de plano de 
estrutura e focam na definição de padrões e de sequências no menu de opções apresentado ao usuário.
O plano de estrutura configura-se como o limiar no desenvolvimento do produto em que estão 
incluídas questões abstratas e questões concretas. O design de interação enfatiza as opções necessárias 
para que o usuário realize e complete tarefas. A arquitetura da informação opera com as opções 
envolvidas na exposição de informações para o usuário (CAELUM, 2019). 
Nesse contexto, o trabalho do designer de interação envolve o desenvolvimento de:
•	 wireframes;
•	 fluxos e mapas de navegação;
•	 mapas de sites;
•	 inventários de conteúdo;
•	 casos de uso e/ou cenários;
•	 protótipos (de baixa ou de alta fidelidade, para provas de conceito ou para testes de usabilidade);
•	 indicadores de avaliação de usabilidade.
Abordaremos, a seguir, alguns detalhes a respeito dos tópicos mencionados.
4.1.7.1 Wireframes (esboços)
Os wireframes podem ser livremente definidos como “rabiscos” conceituais do formato esperado 
para o leiaute do projeto. Trata-se de ferramentas poderosas para a modelagem de projetos.
36
Unidade I
Figura 9 – Confecção de um wireframe 
Os wireframes têm como objetivo representar uma ideia de forma didática. Eles podem ser encarados 
como protótipos de fidelidade restrita, mas munidos do essencial para que as pessoas envolvidas no 
processo de criação do projeto consigam olhar para o esboço (desenho) e saber qual é a intenção 
de quem o fez.
Um wireframe “raiz” pode ser elaborado com o uso de folha de papel e lápis. Contudo, hoje há muitas 
ferramentas que podem auxiliar na tarefa de criação de um wireframe, no sentido de deixá-la mais 
rápida. Uma dessas ferramentas é o Cacoo. O site https://cacoo.com/ disponibiliza uma versão gratuita 
do Cacoo, que ajuda no desenvolvimento de wireframes de forma rápida e fácil.
Nos itens posteriores, apresentaremos outras ferramentas que cumprem papéis parecidos com o que 
temos no Cacoo e podem servir para desenvolver wireframes. Observe a seguir o passo a passo para o 
uso do Cacoo.
Primeiro, acessamos https://cacoo.com/ para entrar na homepage do Cacoo. Visualizamos o que se 
mostra na figura a seguir.
Figura 10 – Homepage Cacoo 
37
INTERFACE HUMANO-COMPUTADOR
Após entrarmos na página principal do Cacoo, precisamos criar uma conta gratuita, seguindo um 
caminho específico. Para isso, pressionamos o botão do menu que tem o nome de “Pricing”, conforme 
indicado na figura 11.
Figura 11 – Pricing Cacoo 
Rolamos a página um pouco para baixo até que fique visível o seguinte texto: “Getting started? Sign 
up for our free plan”.
Pressionamos o texto em azul “free plan” a fim de sermos redirecionados para a próxima tela, 
mostrada na figura 12.
Figura 12 – Create account 
38
Unidade I
Entramos com nome e e-mail e escolhemos uma senha para utilizar a ferramenta. Pronto: com sua 
conta criada, você será capaz de acessar ferramentas que vão auxiliá-lo não apenas na confecção do 
wireframe, mas também em outros aspectos que abordaremos depois. 
Pressionamos o botão que se encontra no canto superior esquerdo da tela, com o nome de “Create 
Diagram”, conforme indicado na figura 13.
Figura 13 – Create Diagram Cacoo 
Depois de pressionarmos o botão, somos levados a uma tela para criar nossos diagramas. Essa tela 
é composta de uma grande parte em branco no centro e de uma barra de ferramentas e uma barra de 
tabelas do lado direito, conforme indicado na figura 14.
Figura 14 – Tela de diagrama Cacoo 
Note que, no canto esquerdo, temos a nossa barra de ferramentas: é nela que começamos a escolher 
os objetos que vamos trabalhar em nosso diagrama. Então, posicionamos o mouse no segundo ícone da 
barra de ferramentas. O nome do componente botão é “Shapes”, conforme indicado na figura a seguir.
39
INTERFACE HUMANO-COMPUTADOR
Figura 15 – Shapes 
Ao pressionarmos o botão “Shapes”, surgirá uma barra lateral contendo uma lista com várias opções 
de formas predefinidas para os mais diversos projetos e diagramas: 
Figura 16 – Opções de shapes 
Selecionamos a opção “Wireframe”, que oferece os componentes necessários para criar nosso 
primeiro wireframe: 
Figura 17 – Wireframe Shapes 
40
Unidade I
Visualizamos vários elementos predefinidos que remetem a componentes vastamente utilizados 
em diversos tipos de sistemas. Vamos fazer um wireframe de uma tela. Para isso, escolhemos o ícone 
chamado de “Webpage”: 
Figura 18 – Selecionando o ícone Webpage 
Para inserirmos esse componente na nossa tela, é necessário pressioná-lo e arrastá-lo para a tela em 
branco, conforme indicado na figura a seguir.
Figura 19 – Print 1 do projeto 
41
INTERFACE HUMANO-COMPUTADOR
Agora, temos um esboço de uma página do navegador. Vamos começar a colocar os componentes 
da nossa página. Para isso, arrastamos para a tela um “Item profile”, que representa a foto de perfil de 
nosso usuário. Note que, por ser um wireframe, não é necessário haver fidelidade absoluta.
Figura 20 – Print 2 do projeto 
Nossa webpage feita por wireframe já está tomando forma. Vamos inserir mais um componente, 
agora para representar uma barra de pesquisa que será utilizada pelo usuário. O nome do componente 
que devemos arrastar é “search box”, conforme indicado na figura 21.
Figura 21 – Print 3 do projeto 
42
Unidade I
Podemos alterar o tamanho dos componentes, a cor e muitos outros itens na barra que vemos 
quando pressionamos o componente. Vamos introduzir um local para reservar o espaço destinado a 
uma foto na nossa webpage. Para isso, arrastamos para a tela o elemento “image placeholder”, conforme 
indicado na figura 22.
Figura 22 – Print 4 do projeto 
Vamos escolher o conteúdo principal da nossa webpage. Existem vários componentes destinados 
a esse fim. No caso do exemplo em estudo, colocamos o componente “vídeo” para representarmos, 
em nosso wireframe, uma página semelhante aos sites de vídeos ou streaming. Para isso, clicamos e 
arrastamos o componente “vídeo” para a tela: 
Figura 23 – Print 5 do projeto 
43
INTERFACE HUMANO-COMPUTADOR
Nosso wireframe está ficando com “cara de site”. Podemos acrescentar mais