UNIDADE II

Estudos Disciplinares
Interfaces e a
Experiência de Usuário
(User Experience – UX)
Prof. Me. Antônio Palmeira
 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 dessa 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.

 Subáreas da Experiência do Usuário

 Arquitetura de informação.
 Usabilidade.
 Design de interação.
 Taxonomia.
 Estratégia de design.
 Pesquisa com usuários.
 Subáreas da Experiência do Usuário

Arquitetura de informação
 Objetivo: catalogação e organização de dados e informação de forma a garantir uma boa
experiência de usuário.
 Indagações relativas a esta subárea:
 Como organizar informações de forma que o usuário acesse facilmente aquilo que deseja?
 A informação é buscada por usuários de qual perfil?

Fonte: Teixeira (2014, p. 9).

 Subáreas da Experiência do Usuário

Usabilidade
 Objetivo: garantir que as interfaces sejam fáceis de usar.
 Indagações relativas a essa subárea:
 O usuário consegue realizar uma tarefa sem transtorno ou demora?
 Em um número razoável de passos?
 As informações são fáceis de entender?
 O residual após a experiência é positivo ou o usuário saiu cognitivamente exausto dali?

Fonte: Teixeira (2014, p. 10).

 Subáreas da Experiência do Usuário

Design de interação
 Objetivo: entender e definir o comportamento das interfaces quando o usuário interage
com elas.
 Indagações relativas a essa subárea:
 O que acontece quando eu clico em determinado botão?
 Qual a exata quantidade de informação que o usuário precisa saber para realizar a tarefa
naquele momento?
 Como a interface pode ser usada para criar uma narrativa na experiência do usuário?

Fonte: Teixeira (2014, p. 10).

 Subáreas da Experiência do Usuário

Taxonomia
 Objetivo: organizar e rotular a informação de forma que faça sentido para o usuário.
 Indagações relativas a essa subárea:
 Como deve ser chamada uma determinada categoria da loja virtual que estou projetando?
 E se o usuário procurar um nome diferente, o que acontece?
 O perfil demográfico do usuário daquele site/app está habituado com aquela linguagem?

Fonte: Teixeira (2014, p. 11).

 Subáreas da Experiência do Usuário

Estratégia de design
 Objetivo: entender e definir os porquês do produto.
 Indagações relativas a essa subárea:
 Para quem ele foi criado?
 Quais os seus objetivos de negócio e como eles serão alcançados em cada etapa de
sua evolução?
 Como medir sucesso, uma vez que o produto é lançado?
 Quais ferramentas de design podem ser usadas para atingir e mensurar esse sucesso?

Fonte: Teixeira (2014, p. 12).

 Subáreas da Experiência do Usuário

Pesquisa com usuários

 Objetivo: entende o público-alvo do produto.
 Indagações relativas a essa subárea:
 O que faz uma pessoa ir até o site?
 Quais as necessidades, anseios e motivações que essa pessoa tem ao usar o produto?
 Quais as principais tarefas que ela quer realizar?
 Quais as particularidades do comportamento desse grupo de usuários que influenciam as
decisões de design à medida que o produto é construído ou evolui?

Fonte: Teixeira (2014, p. 12).

 Métodos e entregáveis em UX

 Variam bastante de acordo com o tipo de projeto, as expectativas do cliente, os objetivos de

design e os membros do time envolvidos na hora de pensar nos detalhes do produto.

 Os métodos e entregáveis sofrem a influência de processos e métodos de outras áreas

relacionadas ao desenvolvimento da experiência o usuário.
 Classificação dos métodos e entregáveis em UX

 Foco na definição da estratégia.

 Foco na geração de ideias.
 Foco no planejamento do produto.
 Foco na pesquisa e validação.
 Foco no desenho de interfaces.
 Métodos e entregáveis em UX (foco na definição da estratégia)

Foco na definição da estratégia

 Composto de métodos utilizados na etapa inicial do projeto, quando a estratégia está sendo
definida e o time está preocupado no direcionamento do produto.
 O principal objetivo não é documentar o funcionamento da interface, mas fundamentar
decisões sobre o produto.
Exemplos de métodos focados na definição da estratégia
 Blueprint.
 Mapa da Jornada do Consumidor (Consumer Journey Map).
 Histórias dos usuários (User Stories).
 Personas.
 Mapa de empatia.
 Análise competitiva.
 Proposição de valor.
 Entrevistas com stakeholders.
 Interatividade

Qual é a subárea da experiência do usuário que tem o objetivo de catalogar e organizar dados
e informação de forma a garantir uma boa experiência de usuário?

a) Arquitetura de informação.
b) Usabilidade.
c) Design de interação.
d) Taxonomia.
e) Estratégia de design.
 Resposta

Qual é a subárea da experiência do usuário que tem o objetivo de catalogar e organizar dados
e informação de forma a garantir uma boa experiência de usuário?

a) Arquitetura de informação.
b) Usabilidade.
c) Design de interação.
d) Taxonomia.
e) Estratégia de design.
 Métodos e entregáveis em UX (foco na definição da estratégia)

Blueprint
 Técnica que apresenta os pontos de contato entre cliente e a marca, além de trazer os
processos internos necessários para que essa interação aconteça.
 Facilita a compreensão do caminho que os consumidores percorrem em múltiplos canais.
EVIDÊNCIAS Estaciona- Carrinho Área de Elevadores, Manejo; Televisão, Espera Espera
FÍSICAS mento externo para malas; espera no corredores, colocação banheiro, a a conta
do hotel uniforme lobby/recepção quarto no quarto cama Cardápio chegada Comida exata

AÇÕES DOS Chega Entrega as Check-in Vai para Recebe a Toma Chama Recebe a Come Check-out,
CLIENTES ao malas para o o quarto bagagem banho, o serviço refeição vai embora
hotel carregador dorme de quarto
Fonte: adaptado de:
Fitzsimmons; Fitzsimmons Linha de interação
(2014, p. 77). FUNCIONÁRIOS DA
Cumprimenta Processo Entrega Serve a Processa o
LINHA DE FRENTE
o cliente e de registro as malas F refeição check-out
leva suas malas

Linha de visibilidade

FUNCIONÁRIOS DE Leva as Anota

RETAGUARDA malas para os F
o quarto pedidos

Linha de interação interna

PROCESSOS Sistema de Preparo Sistema de

DE APOIO registro F F das registro
refeições

F Possíveis pontos de falha

 Métodos e entregáveis em UX (foco na definição da estratégia)

Mapa de Empatia
 É uma técnica utilizada para coletar e representar informações nas perspectivas dos usuários.
 Por meio do mapa de empatia visualizamos melhor os tipos específicos de usuários de
forma colaborativa.
 Também cria-se um entendimento comum do usuário para todas as equipes de
desenvolvimento, favorecendo a priorização e categorização das necessidades.

Empatia é a capacidade de você sentir/perceber o que uma outra pessoa sente/percebe caso
estivesse na mesma situação vivenciada por ela.
Métodos e entregáveis em UX (foco na definição da estratégia)

Exemplo de Mapa de Empatia

Fonte: Camargo; Ribas (2019, p. 124).

Métodos e entregáveis em UX (foco na definição da estratégia)

Exemplo de Mapa de Empatia Completo

Gestores de Comunicar
Líderes pequenos e Se manter
bem para a
de equipes médios organizado
diretoria
negócios

ter dados para Pilhas de

evoluir sua papéis com
gestão anotações

Pessoas
Tá muito ansiosas com
bagunçado! Planilhas tanta tarefa
anexas em
Tem reunião e-mails
hoje? Perda de Projetos
tempo e e tarefas
retrabalho organizados

O que eu tinha
Te mandei Processo Acesso remoto que fazer hoje?
por e-mail! manual sofrido 24x7

Tempo p/ Cadê a lista

pensar na Tem alguém
Cadê as de projetos?
estratégia ocioso?
prioridades?

Tá corrido!
Estou
overloaded!
Envia e-mails
com tarefas
Exporta dados
manualmente Chega mais
cedo p/ se
organizar

Fonte: adaptado de: Camargo; Ribas (2019, p. 125).

 Métodos e entregáveis em UX (foco na definição da estratégia)

Personas
 É uma técnica utilizada para criar personagens fictícios que serão usuários do software.
 Personas fazem com que os designers e desenvolvedores criem empatia com os
consumidores durante o processo de design.
Passos para criar uma persona:
 Coletar os dados.
 Estabelecer hipóteses e rascunhos gerais.
 Descrever cenários.
 Descrever diversas personas.
 Selecionar personas.
 Disseminar as personas.
 Métodos e entregáveis em UX (foco na definição da estratégia)

Exemplo de Persona
Descrição da persona
ANDREA MENDES, a gerente ocupada
• Idade: 38 anos
• Estado civil: casada (dois filhos)
• Gênero: feminino
• Profissão: gerente de Agência de
Marketing
• Educação: pós-graduada em Marketing
• Renda mensal: R$ 15.000,00
“Liderar o time de marketing e executar todas as minhas tarefas do dia a dia não é nada
fácil. Os projetos são atropelados pela correria diária. Preciso de uma maneira fácil de me
organizar e dividir bem meu tempo para dar conta de tudo sem perder a qualidade das
entregas e da minha vida.”
Andrea lidera as operações de uma agência de marketing de médio porte em São Paulo.
Recentemente, seu time cresceu, pois a agência conquistou novos clientes e assumiu
mais projetos. O gerenciamento de seus projetos e das atividades é manual e está se
tornando insustentável. Andrea necessita de uma solução prática que possibilite a
organização dos projetos e das atividades recorrentes.

OBJETIVOS INTERESSES USO DE TECNOLOGIA

• Organizar seus projetos
e atividades do dia a dia.
• Reduzir o tempo com
gestão de tarefas.
• Ter mais tempo para
passar com a família.
• Marketing digital. • Tem um notebook pessoal.
• Infoprodutos. • Tem um iPhone.
• Culinária e viagens. • Ativa no Linkedin e no
Facebook.

Fonte: adaptado de: Camargo; Ribas (2019, p. 127).

 Métodos e entregáveis em UX (foco na geração de ideias)

Foco na geração de ideias

 Compostos de métodos utilizados na etapa criativa do projeto.
 Eles auxiliam na coleta de ideia e na garantia do alinhamento aos objetivos
inicialmente estabelecidos.
Exemplos de métodos focados na geração de ideias
 Brainstorming.
 Moodboard.
 Storyboards.
 Fluxo do usuário.
 Análise de tarefas.
 Taxonomia.
 Métodos e entregáveis em UX (foco na geração de ideias)

Storyboards
 São sequências de imagens que mostram como um usuário pode desenvolver uma tarefa.
 A sequência de desenhos e ilustrações do storyboard fornece uma ideia da interação do
usuário com o produto que está sendo desenvolvido.

Fonte: Teixeira (2014, p. 12).

 Métodos e entregáveis em UX (foco no planejamento do produto)

Foco no planejamento do produto

 Composto de métodos utilizados no planejamento e desenho do produto.

Exemplos de métodos focados no planejamento do produto

 Auditoria de conteúdo.
 Análise heurística.
 Sitemap.
 Roadmap de funcionalidades.
 Cenários e casos de uso.
 Análise de métricas.
 Métodos e entregáveis em UX (foco no planejamento do produto)

Análise Heurística
 Técnica que auxilia na análise de um produto, destacando boas e más práticas de UX.
 É possível utilizar as heurísticas de Nielsen.
 Visibilidade do estado do sistema.
 Correlação entre o sistema e o mundo real.
 Liberdade e controle do usuário.
 Consistência e padrões.
 Prevenção de erros.
 Reconhecimento em vez de memorização.
 Interatividade

A técnica utilizada para coletar e representar informações nas perspectivas dos usuários é
conhecida por:

a) Brainstorming.
b) Blueprint.
c) Mapa de empatia.
d) Persona.
e) User stories.
 Resposta

A técnica utilizada para coletar e representar informações nas perspectivas dos usuários é
conhecida por:

a) Brainstorming.
b) Blueprint.
c) Mapa de empatia.
d) Persona.
e) User stories.
 Métodos e entregáveis em UX (foco na pesquisa e validação)

Foco na pesquisa e validação

 Composto de métodos utilizados no entendimento do consumidor, sua percepção e
expectativa sobre o produto, além da sua interação com ele.
Exemplos de métodos focados na pesquisa e validação
 Focus Group.
 Pesquisa quantitativa.
 Teste de usabilidade.
 Card Sorting.
 Teste A/B.
 Eyetracking.
 Análise de acessibilidade.
 Métodos e entregáveis em UX (foco na pesquisa e validação)

Teste de Usabilidade
 O teste de usabilidade é utilizado para avaliação de um produto ou serviço envolvendo
os usuários.
 Durante um teste, os participantes tentarão completar tarefas típicas passadas a eles,
enquanto observadores assistem, ouvem e fazem anotações.
 O objetivo da aplicação dos testes de usabilidade é identificar os problemas, coletar dados
qualitativos e quantitativos e medir a satisfação do participante com o produto.
 Antes de aplicar um teste de usabilidade, é necessário desenvolver um sólido plano de teste,
recrutar os participantes e, em seguida, analisar e relatar suas descobertas.
 Métodos e entregáveis em UX (foco no desenho de interfaces)

Foco no desenho de interfaces

 Composto de métodos utilizados na documentação dos produtos, a fim de comunicar as
ideias não só para clientes, mas para toda a equipe de design.
Exemplos de métodos focados no desenho de interfaces
 Sketches.
 Wireframes.
 Protótipos.
 Biblioteca de padrões.
 Wireframes

 Desenho simplificado em tons cinza de uma interface, sem conter imagens.

 O principal objetivo é organizar os elementos que entrarão na composição final do design.
 É uma grande ajuda para diretores de arte no entendimento de elementos essenciais
utilizados no layout.
 É uma grande ajuda para os desenvolvedores no planejamento dos esforços de trabalho.

Fonte: Teixeira
(2014, p. 42).
 Fatores considerados no desenvolvimento dos wireframes

 Objetivos de negócios do cliente.

 Requisitos técnicos do sistema.
 Conceito criativo do produto.
 Boas práticas conhecidas de usabilidade e navegação.
 Limitações técnicas da plataforma de desenvolvimento (HTML, CSS, JS, C++ etc.).
 Limitações de hardware onde a interface será acessada.
 Indagações a serem feitas antes de criar um wireframe

 O que o cliente precisa visualizar em primeiro lugar quando observar a solução?

 Quais informações precisam ficar claras para o entendimento do produto?
 Como apresentar o conteúdo mais relevante?
 O que wireframe deve apresentar?

 Hierarquia da interface.
 Disposição das informações na tela.
 Quantidade e tipo de conteúdo.
 Menus e elementos de navegação.
 Comportamento em vários tamanhos de tela.
 Requisitos de negócios e sistema.
 Variações e estados diferentes do sistema.
 O que wireframe NÃO deve apresentar?

 Layout final.
 Identidade visual da marca.
 Texto e conteúdo final.
 Todos os casos de uso do produto.
 Protótipos

 Os protótipos são representações das interações que materializam ideias do projeto.

 É por meio do protótipo que os stakeholders interagem com o produto imaginado, visando
adquirir alguma experiência de como utilizá-lo em um ambiente real, explorar os usos para
ele imaginados e até mesmo perceber que algumas ideias do projeto não são viáveis.
 Protótipo de alta fidelidade

 O protótipo de alta fidelidade se parece muito mais com o produto final.

 O protótipo de uma tela de software desenvolvido no Microsoft Visual Studio™ apresenta
uma fidelidade muito maior que o protótipo da mesma tela desenvolvido em cartolina.
 Os protótipos de alta fidelidade são desenvolvidos usando-se uma ferramenta de
prototipação ou uma linguagem de alto nível.
 O protótipo de alta fidelidade deve reproduzir de forma razoavelmente precisa os aspectos
das telas reais, o que permitirá que seja submetido aos usuários para avaliação.
 Benefícios dos protótipos de alta fidelidade

 Melhora a qualidade da experiência de navegação no produto a ser entregue.

 Ferramenta que apresenta de forma mais enxuta as representações.
 Disponibilização de apresentações com maior qualidade para os clientes.
 Múltiplas ferramentas disponíveis no mercado para criação de protótipos.
 Interatividade

Qual das alternativas a seguir não apresenta um método e/ou entregável em UX com foco na
pesquisa e validação?

a) Focus Group.
b) Pesquisa quantitativa.
c) Teste de usabilidade.
d) Card Sorting.
e) Wireframe.
 Resposta

Qual das alternativas a seguir não apresenta um método e/ou entregável em UX com foco na
pesquisa e validação?

a) Focus Group.
b) Pesquisa quantitativa.
c) Teste de usabilidade.
d) Card Sorting.
e) Wireframe.
 A usabilidade na UX

 Reflete a simplicidade e a facilidade com que uma interface pode ser utilizada.
 Uma boa usabilidade exige as ações remover, esconder, organizar e mover (exemplo:
controle remoto de TV).
 Em um sistema com usabilidade encontramos as informações em “pequenas doses”.
 A hierarquização é uma constante em sistemas em que as interfaces têm usabilidade.
 Para ter uma boa usabilidade é sempre bom dizer ao usuário o que ele deve fazer diante
da interface.
 Sistemas com usabilidade adequada dão sempre feedback ao usuário.
 Os detalhes e a simplicidade na experiência de usuário

 O usuário não experimenta toda uma interface de uma única vez.

 A boa e verdadeira experiência do usuário se dá muitas vezes nas “microinterações”.
 Evitar o excesso de elementos na interface simplifica e dá mais prazer na navegação.
 A revelação progressiva de informações fortalece a interação entre o usuário e o sistema.
 Ninguém quer mais esperar, então sempre seja cuidadoso com o tempo de espera do
usuário ao executar uma ação no sistema.
 Personaliza as experiências e contribui com a melhoria da interação e a experiência
do usuário.
 Os microtextos e a experiência do usuário

 Um microtexto é um pequeno fragmento de mensagem que entrega uma informação de

forma concisa, clara e direta.
 Os microtextos geram simplicidade nas ações envolvendo a interface.
 Os microtextos podem ser utilizados para antecipação de necessidades e anseios
do usuário.
 Dicas no uso de microtextos

 Evitar nomes e palavras vagas que nada revelam.

 Sempre refletir se a quantidade de palavras utilizada é mesmo necessária.
 Testar os textos com usuários reais da interface.
 Sempre utilizar a linguagem mais próxima do usuário e nunca uma linguagem do sistema.
 Deixar o microtexto comunicar o benefício e não a funcionalidade.
 Como deve ser a experiência do usuário

 Simples.
 Acionável.
 Inteligente.
 Agradável.
 Relevante.
 Como deve ser a experiência do usuário (simples)

 Algum elemento ou informação da interface pode ser retirado e mesmo assim o usuário
consegue executar a sua tarefa?
 As informações e elementos estão escondidos e são revelados de forma progressiva ou em
pequenas doses?
 Os padrões de interação estão sendo reaproveitados?
 Os textos e/ou ações podem ser reduzidos ou ocultados quando não necessários?
 É possível descobrir os gatilhos escondidos na tela?
 É possível reduzir ou retirar algum campo do formulário?
 A usabilidade do sistema já foi testada com usuários reais?
 Existe uma solução para os problemas mais comuns que os
usuários encontram ao interagirem com o produto?
 Como deve ser a experiência do usuário (acionável)

 Há clareza para o usuário sobre as ações principais em cada uma das telas?
 O rótulo da ação está claro e diz ao usuário o que vai acontecer após ele clicar ou interagir?
 Botões e links têm uma boa affordance?
 Os usuários se sentem incentivados a seguir adiante a partir dos textos da tela?
 O usuário tem acesso às informações necessárias para continuar se movendo pelo fluxo,
sem precisar fazer desvios de rota?
 O usuário consegue se localizar dentro da estrutura do site naquele momento?
 Está claro para o usuário qual é o estado do sistema?
 O usuário tem acesso a todas as informações necessárias
para seguir adiante?
 Quando uma mensagem de erro é exibida, está claro para o
usuário o que causou o erro e o que ele deve fazer
para corrigi-lo?
 Como deve ser a experiência do usuário (inteligente)

 Qual a ação mais comum que o usuário busca quando interage com seu site?
 É possível destacar essa ação em detrimento de outras?
 É possível criar atalhos para as ações mais comuns em determinada tela?
 O sistema previne erros antes de eles acontecerem?
 Olhando para as métricas do site: quais os erros mais comuns que os usuários cometem?
 Como antecipar esses erros e deixar as instruções mais claras para que eles
não aconteçam?
 O sistema é tolerante com distrações e erros do usuário?
 É possível “perdoar” alguns erros no meio do caminho?
 O usuário consegue desfazer ações com facilidade?
 Você está usando as informações que possui sobre o usuário
da melhor forma?
 Como deve ser a experiência do usuário (agradável)

 O tamanho dos elementos da interface é suficiente para que o usuário interaja com eles em
todos os dispositivos em que o produto é acessado?
 Os textos são legíveis o suficiente?
 Há contraste e hierarquia nos tamanhos de fonte?
 As animações e transições de interface estão sendo usadas da melhor forma para dar
feedback ao usuário sobre suas ações e para expressar a personalidade da marca?
 O sistema evita criar desvios de rota na experiência?
 Todas as ações que você pede para o usuário são extremamente necessárias para o
objetivo que ele tem em mente ao usar seu produto?
 Está claro para o usuário por que o sistema está solicitando
determinadas informações?
 Quando uma ação toma muito tempo para ser concluída, o
sistema permite que ele faça outras coisas no meio-tempo?
 Como deve ser a experiência do usuário (relevante)

 As funcionalidades do produto são realmente as que o usuário espera encontrar?

 Você já testou o seu produto com usuários reais?
 Por que as pessoas usariam o seu produto em vez de um produto concorrente?
 Por que elas deixariam de fazer aquela atividade do jeito que já fazem, para começarem a
fazer usando o seu produto?
 As tecnologias escolhidas para sustentar o produto são compatíveis com as tecnologias que
os usuários têm acesso?
 Os usuários dominam essas tecnologias?
 É possível eliminar funções irrelevantes para a proposição de valor do produto?
 Interatividade

Como não deve ser a experiência do usuário?

a) Acionável.
b) Inteligente.
c) Agradável.
d) Relevante.
e) Complexa.
 Resposta

Como não deve ser a experiência do usuário?

a) Acionável.
b) Inteligente.
c) Agradável.
d) Relevante.
e) Complexa.
 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.
 CAMARGO, R.; RIBAS, T. Gestão Ágil de Projetos: as melhores soluções para suas
necessidades. São Paulo: Saraiva Educação, 2019.
 FITZSIMMONS, J. A.; FITZSIMMONS, M. J. Administração de Serviços: operação, estratégia
e tecnologia da informação. Porto Alegre: AMGH, 2014.
 TEIXEIRA, F. Introdução e boas práticas em UX Design. São Paulo: Casa do
Código, 2014.
ATÉ A PRÓXIMA!