Prof.

Giani Petri

Design de
Interfaces
Objetivos de

APRENDIZAGEM
Ao final desta aula, você será capaz de:

• Compreender os principais conceitos da área de Design de Interfaces

• Conhecer a evolução das interfaces
• Compreender os conceitos relacionados a Ergonomia Cognitiva
• Entender o que são modelos mentais e qual sua importância
O que é uma
INTERFACE?
“É o canal de comunicação entre o ser humano e um computador ou um dispositivo eletrônico.”

“Entende-se como interface qualquer componente (hardware ou software) que interaja

com um usuário e resulte em uma ação.”
A interação é o processo de comunicação entre pessoas e sistemas interativos”.

"Interface é o nome dado à toda a porção de um sistema com a qual um usuário mantém contato
ao utilizá-lo, tanto ativa quanto passivamente. A interface engloba tanto software quanto
hardware (dispositivos de entrada e saída, como: teclados, mouse, monitores, impressoras etc.).”
O que significa a palavra
DESIGN?
“Concepção de um projeto ou modelo; planejamento.”

“O produto deste planejamento.”

"Design como uma atividade para resolução de problemas.”

Design de
INTERFACES
• Tem por objetivo criar interfaces gráficas interativas para sistemas
digitais.
• Interfaces são projetadas para facilitar a interação entre os usuários e os
dispositivos ou aplicativos com os quais eles interagem.
• O design de interface desempenha um papel fundamental na usabilidade,
na experiência do usuário e no sucesso de um produto ou serviço digital.
Interface Interação
Homem-Computador X Humano-Computador
(IHC)
• Interface homem-computador, é a interface que serve de comunicação
entre dois sistemas que trocam informação. Meio através do qual um
usuário interage com um computador.
• Interação homem-computador é o conjunto de processos, diálogos, e
ações através dos quais o usuário humano interage com o computador.
Interface Interação
Homem-Computador X Humano-Computador
(IHC)
INTERAÇÃO
HUMANO-COMPUTADOR
(IHC)

“É a disciplina preocupada com o design, avaliação

e implementação de sistemas computacionais
interativos para uso humano e com o estudo dos
principais fenômenos ao redor deles.”
Interação
Humano-Computador
• IHC trata do design de sistemas computacionais que auxiliem as pessoas
de forma a que possam executar suas atividades produtivamente e com
segurança.

• IHC tem papel no desenvolvimento de todo tipo de sistema:

• variando dos sistemas de controle de tráfego aéreo onde segurança é
extremamente importante
• até sistemas de escritório onde produtividade e satisfação são os parâmetros
mais relevantes
• até jogos educacionais, onde o envolvimento dos usuários e a aprendizagem
são os requisitos básicos.
Por que estudar
IHC?
• Competitividade:
• Interface influencia na produtividade do usuário
• Usuários com diferentes características sociais, culturais, idiomáticas,
etc.
• Diferentes tipos de usuários: leigos, experts.
• Informática como instrumento de inclusão social
• Usuários com necessidades especiais
• Dispositivos de entrada e saída não convencionais:
• Realidade Virtual, Comandos por voz, etc.
Por que estudar
IHC?
• As interfaces mudam a vida dos usuários...

• Médicos estão podendo fazer diagnósticos mais precisos;

• Crianças estão expandindo os horizontes em ambientes de
aprendizagem;
• Artistas gráficos podem explorar mais possibilidades criativas;
• Pilotos têm mais segurança em seus voos.
Interface do Usuário
User Interface (UI)

Experiência do Usuário
User Experience (UX)
 Está relacionado
É o meio pela com a
qual uma pessoa experiência do
interage e usuário e com
controla um seus
dispositivo. sentimentos.
Engloba todos os
aspectos da
interação.
 Está relacionado
É o meio pela com a
qual uma pessoa experiência do
interage e usuário e com
controla um seus
dispositivo. sentimentos.
Engloba todos os
aspectos da
Os dois exemplos têm interface, mas a do UXinteração.
possui uma interface que considerou a experiência
do usuário.
Interface do Usuário
User Interface (UI)

Experiência do Usuário
User Experience (UX)
EVOLUÇÃO
DAS
INTERFACES

A evolução das interfaces de usuário tem sido

marcada por várias gerações. Desde a simples
interface de linha de comando até as modernas
interfaces gráficas, cada geração trouxe avanços
significativos em usabilidade e interação...
PRIMEIRA GERAÇÃO
DE INTERFACES

• Interfaces baseadas em comandos escritos pelo

próprio usuário
• A comunicação é puramente textual
• Uma interface textual e abstrata onde a única
comunicação era através do hardware: Teclado
• Embora rudimentar em comparação com as
interfaces modernas, essa tecnologia foi
fundamental para o desenvolvimento dos
computadores modernos
SEGUNDA GERAÇÃO
DE INTERFACES

• Interfaces com menus simples

• Uma lista de opções é apresentada ao usuário

e a decisão apropriada é selecionada via
algum código digitado via teclado
TERCEIRA GERAÇÃO
DE INTERFACES

• Interface orientadas a
janela
• Point and pick interfaces
(interfaces de apontar e
apanhar-pegar)
• Trazem o conceito de
mesa de trabalho
(desktop).
QUARTA GERAÇÃO
DE INTERFACES

• Hipertexto e Multitarefa
• GUI + WUI (Graphical User Interface+ Web
User Interface)
• Esta geração soma aos atributos das
interfaces de terceira geração, as técnicas
de hipertexto e multitarefa.
• Interfaces comandadas por voz
(VUIs: Voice User Interfaces)
ERGONOMIA
COGNITIVA:
ASPECTOS COGNITIVOS
NA INTERAÇÃO HUMANO-COMPUTADOR

As atividades humanas sempre têm um componente físico e outro

mental, motivando assim duas especialidades bem nítidas da
ergonomia; a física e a cognitiva.
Ergonomia Cognitiva é um campo de aplicação da Ergonomia que tem
como objetivo explicitar como se articulam os processos cognitivos
face às situações de resoluções de problemas nos diferentes níveis
de complexidade.
ASPECTOS COGNITIVOS
na IHC

• Para exemplificar vamos pensar num exemplo simples:

• Como ajustar o relógio?
• Qual a carga mental e experiência o usuário precisa ter para executar essa tarefa?
ASPECTOS COGNITIVOS
na IHC

• Outro exemplo...
Galão de água
ASPECTOS COGNITIVOS
na IHC

• Outro exemplo...
Galão de água
ASPECTOS COGNITIVOS
na IHC

• Interfaces confusas:
• Exemplo de Interface ruim
na porta de banheiros:

Símbolos de Interface devem dar ao usuário noção clara.

ASPECTOS COGNITIVOS
na IHC

• Interfaces confusas:
• Controle Remoto
da Garagem
ASPECTOS COGNITIVOS
na IHC

• Como evitar ou sobreviver ao erro...

• Diferenciar botões:
• Cores (botão verde / vermelho)
• Formas (botão triangular / redondo)
• Textos (Entrada / Saída)
• Teclas iluminadas
• Desenho do controle:
• Formato diferenciado
• Botões distanciados
ASPECTOS COGNITIVOS
na IHC

• Uma interface bonita não consegue maquiar um produto mal projetado, com
problemas de funcionalidade.

• “Usuários não querem batom em bulldog”

• Eles querem uma interface agradável visualmente, mas que ajude-os a cumprir
suas tarefas.

• Uma interface amigável encoraja o usuário a navegar e explorar o ambiente de

trabalho
ASPECTOS COGNITIVOS
na IHC

• Objetivos da IHC:
• Produzir sistemas usáveis, seguros e funcionais

• Desenvolver ou melhorar a segurança, utilidade, efetividade e USABILIDADE de

sistemas computacionais

• O primeiro princípio do design de interfaces, tanto para uma maçaneta quanto para
um computador, é manter em mente o ser humano que quer usá-la.
ASPECTOS COGNITIVOS
na IHC

• Precisamos conhecer muito mais sobre:

• Quem nossos usuários realmente são;
• Quais tarefas eles estão tentando realizar;
• Como eles usam seus computadores
• Os usuários trazem consigo suas experiências passadas
• Têm uma concepção daquilo que o computador pode fazer
• Se ele não sabe muito a respeito de um computador, irá associar com algo que já
é do seu conhecimento
ASPECTOS COGNITIVOS
na IHC

• No projeto de desenvolvimento de um software interativo, os

conhecimentos sobre as características humanas no tratamento da
informação são tão importantes como os conhecimentos sobre a
fisiologia da mão e do braço, na construção de uma ferramenta manual.
• Considerar o usuário significa:
• conhecer, além das informações provenientes da análise ergonômica do trabalho
(idade, sexo, formação, etc, )
• também aquelas ligadas as suas habilidades e capacidades em termos cognitivos.
BASES TEÓRICAS:
PSICOLOGIA
COGNITIVA

• Na medida em que se pretende o computador

como uma extensão do cérebro humano, é
fundamental conhecer como se processam os
tratamentos cognitivos na realização de uma
tarefa informatizada.

• Nos últimos anos, vários estudos têm sido

realizados em psicologia sobre o tratamento da
informação.
BASES TEÓRICAS:
PSICOLOGIA
COGNITIVA

• A descrição das leis gerais sobre o

comportamento humano (behaviorismo) é
complementada pela descrição dos
mecanismos que explicam como isso
acontecem, ou seja, que explicam seu
funcionamento (cognitivismo).
BASES TEÓRICAS:
COGNITIVISMO

• A escola cognitivista formula suas teorias

com base no conhecimento científico atual Game Som
sobre neurofisiologia humana e na
tecnologia cibernética atual.

• Sua principal teoria refere-se aos modelos

mentais, ou seja, “representações
simbólicas” que o sujeito elabora a partir da
realidade que o cerca.
MODELOS
MENTAIS

• Quando vimos a palavra CACHORRO, o que vem na memória?

MODELOS
MENTAIS

• Quando vimos a palavra CACHORRO, o que vem na memória?

MODELOS
MENTAIS

• Quando vimos a palavra CADEIRA, o que vem na memória?

MODELOS
MENTAIS

• Quando vimos a palavra CADEIRA, o que vem na memória?

MODELOS
MENTAIS

• Quando vimos a palavra AVAJAVAS, o que vem na memória?

MODELOS
MENTAIS

• Quando vimos a palavra AVAJAVAS, o que vem na memória?

MODELOS
MENTAIS
• O sistema cognitivo humano é caracterizado
pelo tratamento de informações simbólicas.

• As pessoas criam sua própria realidade

através de modelos mentais ou
representações.

• Esses modelos, que condicionam totalmente

o comportamento do indivíduo, constituem a
sua visão da realidade.
MODELOS
MENTAIS
• Portal – criador tem
que se basear nos
modelos mentais dos
usuários
MODELOS
MENTAIS
• Blog – baseado no
modelo mental do
criador
MODELOS
MENTAIS
• Segundo Grandjean(1988), usa-se a expressão atividade mental como
termo geral para definir qualquer trabalho em que a informação precisa
ser processada de alguma forma pelo cérebro.

• O trabalho mental pode ser dividido em:

• Trabalho mental propriamente dito
• Processamento de informação como parte do sistema homem-máquina
MODELOS
MENTAIS
• Trabalho mental (TM) exige criatividade.
• A informação recebida deve ser combinada com o conhecimento já armazenado
no cérebro e submetida à memória de uma nova maneira.
• São fatores decisivos do processo de conhecimento, a experiência, a agilidade
mental e a habilidade de pensar e formular novas ideias.

informação
+ conhecimento
= TM
MODELOS
MENTAIS
• Os elementos fundamentais do processamento de informação como parte do
sistema homem-máquina são a percepção, a interpretação e o processamento
mental da informação transmitida pelos órgãos sensoriais.

• Os computadores inteligentes conseguem realizar o processamento de

informações, pois unem o conhecimento anterior com a informação obtida,
resultando numa tomada de decisões,
• Mas não são capazes de realizar um processo mental propriamente dito, que exige
criatividade.
MODELOS
MENTAIS
• Os modelos mentais relativos a um sistema interativo, por exemplo, variam de
indivíduo para indivíduo

• Em função de suas experiências passadas, evoluem no mesmo indivíduo em

função de sua aprendizagem.

• A interface desse sistema, deve ser flexível o suficiente, para adequar-se aos
diferentes tipos de usuários.
SUGESTÃO:
LEITURA
COMPLEMENTAR

Acesse o link abaixo:

• [Link]
esigndeinteracao/interacao-
humano-computador-tudo-
que-voce-precisa-saber/
REFERÊNCIAS

• SOBRAL, W. S. Design de Interfaces - Introdução. São Paulo: Saraiva, 2019.

• BARBOSA, S. D. J.; SILVA, B. S. Interação humano-computador. Rio de
Janeiro: Elsevier, 2010.
• OGERS, Y.; SHARP, H.; PREECE, J. Design de Interação: Além da interação
humano- computador. Porto Alegre: Bookman, 2013.