UNIDADE I

Estudos Disciplinares
Interfaces e a
Experiência de Usuário
(User Experience – UX)
Prof. Me. Antônio Palmeira
 Interface

 É o meio pelo qual a comunicação acontece.

 É responsável por promover estímulos de interação para que o usuário obtenha respostas
relacionadas às suas atividades.
 Ela existe no limite entre o computador e o ser humano, de forma que atua como um suporte
computacional pelo qual o usuário aciona as funções do sistema e, dele, recebe as
informações solicitadas. Domínio do controle Domínio do controle
do homem do computador

Responder Ler-examinar
Ação do usuário gerando Reconhecimento e interpretação
input para o computador dos inputs do usuário

I
Pensar N
Tomada de T Pensar
decisões (o que E Processamento
fazer com a HOMEM R COMPUTADOR do input de
resposta F acordo com os
recebida do A algoritmos
computador) C
E

Ler-examinar Responder
Fonte: adaptado de: Reconhecimento e Resposta do computador
interpretação da informação enviada ao usuário
Barreto et al. (2018, p. 67). apresentada pelo computador
 Elementos de uma Interface

A interface é composta por dois elementos:

 Software – programas que apresentam informação e acionamento da dinâmica de interação.
 Hardware – dispositivos de interação.

Observação: É através desses elementos que os inputs (ou entrada de dados) podem ser
reconhecidos e processados; desenhados na tela através do software e impressos no display
ou tela.
 Tipos de Interface

 Interface Visual
 Interface Sonora
 Interface Tátil
 Benefícios de uma boa interface

 Aumento da produtividade dos usuários;

 Redução do número e a gravidade dos erros cometidos pelos usuários;
 Redução do custo de treinamento;
 Redução do custo de suporte técnico;
 Aumento das vendas e a fidelidade do cliente.
 Interação

 Interação é um processo que envolve a ação de um usuário sobre a interface de uma

ferramenta, além das considerações e interpretações sobre os resultados obtidos.
 Perspectivas da Interação

 Perspectiva de Sistema: usuário se comporta como se fosse uma máquina.

 Perspectiva de parceiro de discurso: computador/sistema se comporta como se fosse
uma pessoa.
 Perspectiva de ferramenta: computador/sistema apoia o usuário em uma tarefa.
 Perspectiva de mídia: computador/sistema se comporta como um meio de comunicação
entre seres humanos. sistema parceiro de discurso

usuário como computador

computador como pessoa

mídia ferramenta
trabalho ou
produto

Fonte: adaptado de: Barbosa (2010, p. 21).

 Conceito de Affordances

 Conjunto de características dos objetos físicos que determinam ou sugerem ao observador

que tipo de ação/uso se pode fazer com o objeto.

 Características dos objetos de interface que mostram aos seus usuários como tais objetos
podem ser manipulados.

 Favorece a navegação intuitiva e sem dúvidas.

 Qualidade da Interação

 A qualidade de artefatos e ferramentas normalmente depende de quanto eles são

agradáveis, úteis, fáceis de se utilizar, fáceis de se lembrar o funcionamento, seguros,
eficazes, eficientes, dentre outros.
 Fatores de Qualidade da Interação

 Acessibilidade – está relacionada à remoção das barreiras que impedem mais usuários de
serem capazes de acessar a interface do sistema e interagirem com ele.
 Aplicabilidade – relacionada à utilidade de um sistema com uma variedade de situações
e problemas.
 Comunicabilidade – propriedade de transmitir a visão (as intenções e os princípios de
interação que guiaram o projeto) do projetista sobre a lógica (o funcionamento) da interface
ao usuário.
 Usabilidade – refere-se à qualidade da interação usuário-computador proporcionada pela
interface de um sistema computacional.
 Experiência de usuário – qualidade da interação de pessoas
(usuário) com produtos tecnológicos consumidos e as
consequências emocionais e cognitivas que decorrem
desta interação.
 Interatividade

Qual das alternativas a seguir não pode ser considerada uma perspectiva de interação do
usuário?

a) Perspectiva de Sistema.
b) Perspectiva de parceiro de discurso.
c) Perspectiva de ferramenta.
d) Perspectiva de Affordance.
e) Perspectiva de mídia.
 Resposta

Qual das alternativas a seguir não pode ser considerada uma perspectiva de interação do
usuário?

a) Perspectiva de Sistema.
b) Perspectiva de parceiro de discurso.
c) Perspectiva de ferramenta.
d) Perspectiva de Affordance.
e) Perspectiva de mídia.
 O usuário e as suas experiências

 Experiência do usuário existe desde que as pessoas começaram a “usar” objetos para
realizar alguma tarefa.
 Estas experiências são subjetivas, ou seja, cada um tem a sua experiência.
 Ela é influenciada por fatores humanos e por fatores externos.
 A experiência do usuário com a interface é de grande importância.
 A experiência de usuário é um fator que atesta a qualidade de uma interface
humano-computador.
 A experiência do usuário e o valor

 A experiência do usuário é muito ligada ao valor oferecido pelo produto.

 O valor é o resultado dos benefícios, subtraído dos gastos e sempre mensurando os riscos.
 Qualitativamente, o valor está associado à:
 Utilidade – funcionalidade oferecida;
 Garantia – promessa de atendimento dos requisitos acordados.
 Conceito de Experiência de Usuário

 Também conhecida como User eXperience (UX).

 É um aspecto da qualidade da interação de pessoas (usuário) com produtos tecnológicos
consumidos e as consequências emocionais e cognitivas que decorrem desta interação.
 A experiência de usuário trata da definição do problema que precisa ser resolvido (o porquê),
definição para quem esse problema precisa ser resolvido (o quem) e definição do caminho
que deve ser percorrido para resolvê-lo (o como).

 Observação: A Experiência é do Usuário, já a Usabilidade é do Sistema.

 Dimensões da Experiência do Usuário

 Dimensão Pragmática (prática, realista e objetiva) – ligada a metas do fazer.

 Dimensão Hedônica (prazerosa) – ligada a metas do ser.

 Amplitude da Experiência do Usuário em IHC

 A experiência de usuário é abrangente e toca em todos os aspectos relacionados ao sistema

(marketing, suporte, interface, financeiro, dentre outros).

 A experiência de usuário é longitudinal e não está limitada ao uso instantâneo, mas pode
variar de acordo com o ciclo de vida (antes do uso, no momento do uso, no uso continuado e
após o uso).
 Usabilidade x Experiência de Usuário

 Usabilidade é um atributo de qualidade de software e é definida como a capacidade do

produto de software de ser compreendido, aprendido, operado e atraente ao usuário, quando
usado sob condições especificadas.

 Experiência de usuário é um atributo de qualidade de interação relacionada à perspectiva

individual e subjetiva do usuário, influenciada pelas expectativas, vivências anteriores,
condições individuais e interações com outros produtos.
 Influências na Experiência de Usuário

 Fatores humanos
 Fatores ligados ao ambiente externo
 Localização, movimentação e situação
 Desenho e a estratégia
 Desenho da Experiência de Usuário

 É o desenho da definição de como as pessoas irão interagir com o produto, quais tarefas
conseguirão realizar dentro dele, qual a ordem na qual as telas serão apresentadas,
dentre outros.

 É uma ação estratégica dentro do processo de criação.

 Situa-se entre o pensamento estratégico (planejar um produto) e o pensamento prático

(desenhar um produto), ajudando a definir como as ideias, especialmente as digitais, irão
tomar forma.
 Ações do desenho da Experiência de Usuário

 Definição da estratégia – momento inicial que visa embasar decisões mais abstratas sobre a
“razão de ser” do produto.
 Geração de ideias – etapa criativa, na qual ocorrem a coleta das ideias de todos os membros
do time e a garantia que eles estejam alinhados em relação ao que o produto está
começando a se tornar.
 Planejamento do produto – aqui ocorrem o planejamento e desenho do conteúdo.
 Pesquisa e validação – entendimento de como o consumidor pensa, o que espera do produto
e como interage com ele.
 Desenho de interfaces – documenta como determinada tela deve funcionar.
 Interatividade

A dimensão da experiência do usuário ligada a metas do ser que é prazeroso é chamada de:

a) Dimensão hedônica.
b) Dimensão pragmática.
c) Dimensão longitudinal.
d) Dimensão latitudinal.
e) Dimensão artificial.
 Resposta

A dimensão da experiência do usuário ligada a metas do ser que é prazeroso é chamada de:

a) Dimensão hedônica.
b) Dimensão pragmática.
c) Dimensão longitudinal.
d) Dimensão latitudinal.
e) Dimensão artificial.
 O que não é desenho de experiência de usuário

 Não é direção de arte.

 Não é planejamento.
 Não é gerência de projetos.
 Não é desenvolvimento de software.
 Não é ciência exata.
 Aspectos Humanos e a Experiência de Usuário

 O trabalho com interfaces e com a experiência de usuário é multidisciplinar, envolvendo

diversas disciplinas, inclusive aquelas que estudam o ser humano e os seus
processos internos.
 Para bem projetar as interfaces para o usuário de forma que ele tenha uma boa experiência,
precisamos conhecer bem o ser humano.
 Conhecer como o ser humano “funciona”.
 Precisamos conhecer a forma como as pessoas pensam e percebem o mundo ao seu redor.

Entrada Saída
ou Seleção da Execução da
Codificação Comparação ou
estímulo resposta resposta
resposta
Estágio 1 Estágio 2 Estágio 3 Estágio 4

Fonte: adaptado de: Barreto et al. (2018, p. 94).

Modelo de Processador Humano de Informações

Memória de Longo Prazo

Memória de Trabalho
Visual Auditiva

Processador Processador Processador

Perceptivo Cognitivo Motor

Receptores
Atuadores
(olhos, ouvidos,...)

Processador Humano de Informação

Entrada Mundo Externo Saída

Fonte: adaptado de: Card et al. (1983).

 Memórias do Processador Humano de Informações

 Memória sensorial – armazenamento de decaimento rápido associado aos sentidos.

 Memória de trabalho (curta duração) – responsável por armazenar as representações
produzidas pelo processador perceptivo.
 Memória de longo prazo (longa duração) – responsável por armazenar a massa de
conhecimentos da pessoa humana oriundos do processamento cognitivo.
 Processos da memória humana

 Reconhecimento: é a capacidade do homem de reencontrar no seu campo perceptivo

elementos anteriormente memorizados (reconhecer o nome de uma opção de menu após
muito tempo sem vê-la).
 Reconstrução: é a capacidade do homem de recolocar os elementos memorizados na sua
organização anterior (quais eram os parâmetros iniciais da configuração de um parágrafo de
texto antes de reconfigurá-lo?).
 Lembrança: é a capacidade do homem de recuperar, de forma integral, uma situação
anteriormente vivenciada, sem a presença de nenhum dos elementos dessa situação.

Fonte: CYBIS (2003, p. 18).

 Subsistemas de Processamento Humano

 Processador Perceptivo – subsistema responsável pela transmissão das sensações do

mundo físico detectadas pelos sistemas sensoriais do corpo (visão, audição, tato, olfato,
paladar) para representações mentais internas.
 Processador Motor – subsistema responsável pela tradução do pensamento em ações
através da ativação de padrões de músculos voluntários, em uma série de micromovimentos
discretos realizados pelo sistema motor.
 Processador Cognitivo – subsistema responsável por receber a informação codificada
simbolicamente dos armazenamentos sensoriais na sua memória de trabalho e utilização das
informações previamente armazenadas na memória de longo prazo para tomar decisões
sobre como responder aos estímulos recebidos.
 Subsistemas de Entrada e Saída

 Receptores – operam por meio dos nossos sentidos (visão, olfato, paladar, tato, audição).
 Atuadores – operam por meio das nossas expressões faciais, da nossa voz e do nosso
sistema motor.
 Receptores

 Os receptores produzem sensações.

 A sensação é o resultado do estímulo físico sobre os receptores sensoriais nos órgãos

dos sentidos.

 Os receptores são formados pelos nossos sentidos (Visão, Audição, Tato, Olfato, Paladar).
 Percepção

 Envolve o processamento da sensação e a tradução dela em uma experiência organizada.

 A memória interfere no processo com experiência e expectativas.

 Bons exemplos de percepções são: sabor, equilíbrio, movimento e propriocepção

(reconhecimento da localização espacial do corpo).
 Percepção Visual

 A percepção visual é o processo resultante do uso do sentido da visão e da interpretação do

estímulo luminoso.
 A compreensão da percepção visual fundamenta processos como:
 Busca visual – processo de encontrar um item procurado.
 Discriminação – processo de separação entre sinal e ruído.
 Interatividade

Considerando o processador humano das informações e as interfaces de usuário dos sistemas

de informação, podemos afirmar que a memória de decaimento mais rápido do ser humano
quando ele utiliza uma interface computacional é a:

a) Memória sensorial.
b) Memória de trabalho.
c) Memória de curta duração.
d) Memória de longo prazo.
e) Memória de longa duração.
 Resposta

Considerando o processador humano das informações e as interfaces de usuário dos sistemas

de informação, podemos afirmar que a memória de decaimento mais rápido do ser humano
quando ele utiliza uma interface computacional é a:

a) Memória sensorial.
b) Memória de trabalho.
c) Memória de curta duração.
d) Memória de longo prazo.
e) Memória de longa duração.
 Percepção Auditiva

 É a capacidade de receber e interpretar informações captadas por meio do sentido

da audição.

 É a representação mental que fazemos quando estamos submetidos ao estímulo sonoro.

 Os processos motores e as Interfaces

 A percepção somada à reação e o movimento levam quase 1 segundo para os

seres humanos.

 Os processos motores do ser humano acionam as interfaces de entrada de dados.

 Vivências afetivas e as Interfaces

 As vivências afetivas (principalmente a emoção e o sentimento) são relevantes para o estudo

da experiência de usuário.

 Promover emoções e sentimentos ajuda a reter as informações necessárias para

a interação.

 Perceber as emoções e os sentimentos ajuda a adaptar o comportamento do sistema.

Estilos de fonte e emoções/sentimentos associados
Estilo Utilização Emoções associadas
Tradicionais, respeitáveis e
Corpo de texto de editoriais, artigos
confiáveis (COY, 2014;
Serif e documentos impressos (BULAT,
GENDELMAN, 2015; MICHAEL,
2015; COY, 2014)
2015; VISUALLY, 2013)
Limpas, modernas, objetivas,
Mídias digitais e no corpo de textos
estáveis, universais (COY, 2014;
Sans-serif pequenos (BULAT, 2015; COY,
MARMOL, 2013; MICHAEL, 2015;
2014; GENDELMAN, 2015)
VISUALLY, 2013)
Elegantes, femininas, amigáveis,
Títulos e decorações; convites,
intrigantes, criativas (BULAT, 2015;
Cursive cartões e logotipos (BULAT, 2015;
COY, 2014; GENDELMAN, 2015;
COY, 2014)
MICHAEL, 2015; VISUALLY, 2013)
Títulos; produtos; logotipos (BULAT, Amigáveis, divertidas e casuais
Fantasy 2015; MARMOL, 2013; MICHAEL, (GENDELMAN, 2015; MICHAEL,
2015) 2015)
Exclusivas, modernas, elegantes,
inteligentes, futuristas (COY, 2014;
Moderna Títulos e logotipos (COY, 2014)
GENDELMAN, 2015; MICHAEL,
2015 VISUALLY, 2013)
Fonte: adaptado de: Garcia & Neris (2015).
 Teorias de Gestalt

 Gestalt – palavra alemã que significa “forma” ou “figura”.

 É uma teoria da psicologia que estuda a percepção visual e a psicologia das formas.
 O princípio básico da Psicologia da Gestalt nos diz que o todo é diferente da soma de
suas partes.
 Com base nesta crença, psicólogos da Gestalt desenvolveram um conjunto de princípios
para explicar a organização perceptiva, ou a forma como a mente agrupa pequenos objetos
para formar outros maiores.
 Estes princípios são muitas vezes referidos como as “leis da organização perceptiva”.
 O estudo de Gestalt está relacionado à percepção que os
usuários têm do mundo e o que nele contém.
 Ele explica como o cérebro pode nos influenciar em
determinadas situações, através da interpretação do
que vemos.
 Princípios de Gestalt

 Proximidade: as entidades visuais que estão próximas umas das outras são percebidas
como um grupo ou unidade.
 Boa continuidade: traços contínuos são percebidos mais prontamente do que contornos que
mudem de direção rapidamente.
 Simetria: objetos simétricos são mais prontamente percebidos do que objetos assimétricos.

proximidade continuidade simetria

Fonte: adaptado de: Barbosa (2010, p. 51).

 Princípios de Gestalt

 Similaridade: objetos semelhantes são percebidos como um grupo.

 Destino comum: objetos com a mesma direção de movimento são percebidos como
um grupo.
 Fecho: a mente tende a fechar contornos para completar figuras regulares, “completando as
falhas” e aumentando a regularidade.

similaridade destino comum fecho

Fonte: Barbosa (2010, p. 51).

 Princípios de Gestalt e as Interfaces de usuário

 Determinar quais elementos de design são mais eficazes em alguma situação. Por exemplo,
através da utilização de sombreamento de fundo, hierarquia visual, agrupamento de itens
semelhantes e distinção de itens diferentes.
 Esses princípios psicológicos influenciam nossa percepção visual permitindo que designers
direcionem a atenção dos usuários para pontos específicos de foco que vão levar a executar
ações e criar mudanças comportamentais.
 Em um nível mais elevado, os princípios de Gestalt ajudam a projetar produtos que resolvem
problemas e atendem às necessidades do usuário de maneira agradável e objetiva.
 Interatividade

O princípio de Gestalt que menciona que “objetos com a mesma direção de movimento são
percebidos como um grupo” é conhecido como:

a) Proximidade.
b) Boa continuidade.
c) Simetria.
d) Similaridade.
e) Destino comum.
 Resposta

O princípio de Gestalt que menciona que “objetos com a mesma direção de movimento são
percebidos como um grupo” é conhecido como:

a) Proximidade.
b) Boa continuidade.
c) Simetria.
d) Similaridade.
e) Destino comum.
 Referências

BARBOSA, S. D. J. Interação humano-computador. Rio de Janeiro: Elsevier, 2010.

BARRETO, J. S. et al. Interface humano-computador. Porto Alegre: SAGAH, 2018.
CARD, S. et al. The Psychology of Human-Computer Interaction. Hillsdale, NJ: Lawrence
Erlbaum Associates, 1983.
GARCIA, A. C.; NERIS, V. P. A. Um estudo sobre emoções e interfaces de usuário em
sistemas web. Tecnologias, Infraestrutura e Software. v. 4, n. 3, p. 180-190, set-dez 2015.
TEIXEIRA, F. Introdução e boas práticas em UX Design. São Paulo: Casa do Código, 2014.
ATÉ A PRÓXIMA!