APRESENTAÇÃO

DE APOIO

DESIGN CENTRADO NO USUÁRIO

 Ementa da disciplina
Caracterização de Design Centrado no Usuário, seus fundamentos, princípios,
técnicas e ferramentas. Discussão sobre Usabilidade e User Experience (UX),
seus princípios, metodologias e aplicações.
 Professores
DON NORMAN MARCELO SOARES PIMENTA
Professor convidado Professor PUCRS

Diretor do Laboratório de Design da Universidade da Doutor em Informática - Université Toulouse 1 (1997), Bacharel
Califórnia, San Diego, onde também é professor emérito de (1988) e Mestre (1991) em Ciências da Computação pela UFRGS ,
psicologia e ciências cognitivas e membro do departamento de com pós-doutorado na Université Paul Sabatier, Toulouse, França
(2002-2003). Atualmente é professor titular e pesquisador no
Engenharia Elétrica e de Computação. Co-fundador do Nielsen
Instituto de Informática (INF) da Universidade Federal do Rio
Norman Group, empresa de consultoria executiva que ajuda Grande do Sul (UFRGS), orientando alunos de doutorado e
empresas a produzir produtos e serviços centrados no ser humano. mestrado. Atua na área de Ciência da Computação, com ênfase em
Professor honorário da Faculdade de Design e Inovação da Interação Homem Computador, Engenharia de Software,
Universidade de Tongji (Xangai). Foi vice-presidente da Apple, Computação Musical e na integração entre estas áreas. Associado
responsável pelo Grupo de Tecnologia Avançada e executivo da número 1948 da Sociedade Brasileira de Computação (SBC).
Hewlett Packard e da UNext. Foi um dos fundadores da Cognitive
Science Society e presidente da sociedade e editor de seu jornal.
Foi membro do corpo docente da Universidade de Harvard. Ele é
professor emérito da University of California, San Diego (UCSD) e
Breed Prof. of Design, Emérito, da Northwestern University. É autor
de vários livros, incluindo The Design of Everyday Things,
Emotional Design eLiving with Complexity.
 Encontros e resumo da disciplina
AULA 1 AULA 2 AULA 3

Se o usuário perceber serventia em uma Estamos acostumados a um modelo de Uma boa UX consiste em sistemas
mudança de design, e isso lhe despertar utilização das coisas, de configurações que úteis, funcionais, e acessíveis.
interesse, irá abraçar essas mudanças e se utilizamos no cotidiano. O péssimo design é
adaptar. aquele que foge dessas regras.

É preciso tempo para procrastinar: irão O erro humano, detectado pelo sistema, Requisitos mudam quando começamos a
surgir ideias boas e inovadoras se o geralmente está associado a um problema tentar trabalhar com a funcionalidade
tempo do projeto for respeitado desde o de robustez da interface. associada à questão do design centrado no
princípio. usuário.

A “trapaça” de usar o máximo possível de Em nenhum método teremos todas as É melhor se evitar erros, do que se
ajuda de todos que você puder vai te levar informações que precisamos sobre os preocupar em ações para desfazer os erro
ao êxito. usuários. Sugere-se a utilização de mais de cometidos.
uma das técnicas.

DON NORMAN MARCELO SOARES PIMENTA MARCELO SOARES PIMENTA

Professor convidado Professor PUCRS Professor PUCRS
…Desconstruindo o título desta disciplina:

 Design
+
Usuário
+
Centrado em Usuário
…Desconstruindo o título desta disciplina:

Design
+
 Usuário
+
Centrado em Usuário
• Fundamentos : IHC, Usabilidade, Acessibilidade, UX

• Processo de Design Centrado no Usuário: princípios,

metodologias, técnicas e aplicações.
A experiência do usuário (UX) não é só interação com
algo, uma interface, um layout. Ela está relacionada com
a transmissão de ideias, emoções, sentimentos e valores
de uma marca, serviço ou produto. Ela engloba todos
aspectos da interação com o produto, serviço , enfim
com a sua organização.

Marcelo Pimenta ;-)

Lembre-se: User Experience é o link entre os objetivos
de negócio e as necessidades do usuário; UX facilita a
conexão entre o que seus usuários querem fazer e o que
você quer que seus usuários façam.
Interface com Usuário (UI) e UX são muitas vezes confundidas
e (erroneamente) usadas como sinônimos.

UI é o que os usuários vêem e com que interagem,

enquanto UX são todos os aspectos (voltados para o usuário)
de um sistema, e são relacionados a como o usuário
SENTE-SE quando usa o Sistema.
“Usability is the bare minimum of UX, if your audience
can’t use your product, they certainly won’t want
to use it. When it comes down to it, a system’s
usability should be effortless. The less attention the
user has to pay to figure out how to use the system,
the easier it will be for them to accomplish the task
at hand. Usability is essential – a system must first
be usable before you can work on making it
desirable.”

Jakob Nielsen
“Embora usabilidade e Design de interação sejam aspectos
importantes de Design de UX, eles são apenas parte do que
interessa – Design de UX cobre várias áreas também. Um designer
de UX dedica-se ao processo inteiro de concepção de um produto,
incluindo aspectos de marca (branding), design, usabilidade e
funcionalidade. É uma história que começa antes que o dispositivo
esteja nas mãos do usuário“

Fonte: https://www.interaction-design.org/literature/topics/ux-design
Def. UX é a totalidade de percepções que o usuário final tem
ao interagir com um produto ou serviço. Estas percepções incluem
eficiência, satisfação emocional e a qualidade do relacionamento
com a instituição que criou o produto ou o serviço.
– Kuniavsky, 2010.

O designer de UX tem a habilidade de encapsular no produto

as necessidades do usuário e de validar isto através de
pesquisa com usuário (user research) e teste com usuário…
Interações podem ser categorizadas como todo click,
rolagem e ação realizadas pelo usuário ao usar seu
sistema e formam uma parte da UX.

“If a user can’t interact successfully with your site then they’re not going
to have a positive experience while doing so. Interaction Design seeks to
push the boundaries of mere functionality by creating delight with every
interaction and ultimately, a desirable and engaging experience for your
user.”
• Fundamentos : IHC, Usabilidade, Acessibilidade, UX

• Processo de Design Centrado no Usuário: princípios,

metodologias, técnicas e aplicações.
 Análise Contextual

Avaliação

Design

Prototipação Rogers et el. (2013)

Barbosa e Silva (2010)
 Então,

Design Centrado no Usuário…

(User Centered Design – UCD)
not restricted to interfaces or technologies

Depoimento
…Um pouco de teoria:
 155
adaptado de Rogers
et al. (2013)
 Metas de acessibilidade

• Informação e elementos de
interação perceptíveis
• Informação e elementos de
interação compreensíveis
• Interface navegável e operável
• Robustez e confiabilidade
 Metas de acessibilidade

Delimitação do espaço do problema

Necessidades relevantes para a

realização de tarefas pelo usuário

Modelo conceitual do sistema

 Projetar interação é projetar espaços de comunicação

Metas de projeto Metas de usabilidade Metas de acessibilidade Metas de UX

(1) Contexto da aplicação (2) Usuários (3) Tarefas

Modelo conceitual
 Fatores de Qualidade e Requisitos para Sistemas Interativos

Fator de Qualidade Requisitos Área

Utilidade Funcionais Engenharia de Software (ES)

Usabilidade Comportamentais IHC

Acessibilidade/UX Usabilidade IHC

Desenvolvimento de sistemas
interativos úteis, usáveis, Integração de conceitos,
acessíveis e garantindo boa modelos, técnicas e
experiência ao usuário ferramentas de ES e IHC
1- Princípio Básico de Integração UX-SW:

NENHUM deles deve se sobrepujar ao outro

• “High quality software products that are functional and useful require the skills
and expertise of different professions. Software development processes are effective
at producing working software but often overlook the actual requirements of real
users. UX design focuses on gathering requirements and acting on behalf of the end
user to create and improve the usefulness and usability of products. When integrated
effectively the outcome is a product that is functionally sound, usable and useful to
The end user. For this to happen both software development and UX design need to
combine methodologies, integrate and collaborate.”
2 – Educar a organização sobre o papel de UX design

3 – Prever tempo para descoberta do produto e

Estudo sobre Usuário(s) (Users Study)

4 – Iterativo e Incremental
“User-centered software dev approaches should support software
design and development in short iterations and in an incremental
manner”

5 – Profissionais de UX participam de todas etapas do

desenvolvimento
• UX é obtida por construção
– Clara compreensão dos requisitos de UX durante as etapas iniciais da
concepção e não somente ao final
•BUSCAR: UX como requisito do sistema (´built-in approach´)
•EVITAR: UX somente como critério de teste (´day-after approach´)

• Processo de design em paralelo ao processo de software

• Várias abordagens:
Little Design Up Front , User Study Up front , Prototipação,
Avaliação de UX junto com Teste ,
Artefatos de HCI usados no desenvolvimento
1- Prática de UX não limitada a designers mas considerada como
uma responsabilidade do time todo (“any problem is a team´s problem”)

2- Aumentar conhecimento de design da equipe de SW e estimular

trocas de ideias (o que cada um pensa)

3 – Inclua um SPRINT 0

 “a sprint zero to allow for designers to create and identify a suitable design concept from the start
(little design up front), and for developers to size the workload (how long they think it will take to code)
and to understand how it functions ”

4 – Designers trabalham UM sprint na frente (one sprint ahead)

Fonte: Norman, D. The Design of Everyday Things. Cap 7 –User-Centered Design, pag 190
 modelo de
design
golfo de execução
modelo de usuário,
modelo modelo de tarefas,
de uso requisitos

designer
golfo de avaliação

modelo
físico
usuário
imagem do
sistema

Lógica de Uso Lógica de Funcionamento

It is common to think of interaction between a person and technology as communicating with the technology.
de Sousa shows that the real communication is between designer and person, where the technology is the medium
[Clarisse S. de Souza (2005). The Semiotic Engineering of Human Computer Interaction. Cambridge, MA: MIT Press.]
Veja Don Norman falando sobre este livro em : https://jnd.org/design_as_communication/
Da Teoria da Ação (Norman, 1991)
atividade mental atividade física

avaliação interpretação percepção

objetivos
golfo de avaliação
expectativas
golfo de execução

especificação
intenção execução
de ação

distância semântica distância articulatória

 “Escrever um conto”

distância semântica distância articulatória

objetivos

golfo de execução

especificação
intenção execução
de ação

Ação Física (com mouse

E teclas) para
“Eu quero um Selecionar trecho
texto sem E confirmar (OK, enter)
um Apagar Selecionar trecho
certo parágrafo e acionar
parágrafo” operação
apagar
Quanto mais o usuário precisar realizar esforço
cognitivo na elaboração da solicitação da tarefa, A distância articulatória é pequena quando a
maior a distância semântica. forma de executar a tarefa é próxima à forma  ERROS
como o usuário a conhece.
 avaliação interpretação percepção

objetivos distância semântica distância articulatória

expectativas

Golfo de avaliação

Alteração Física
A distância semântica se refere à quantidade A distância articulatória se refere ao (perceptível)
de esforço que o usuário precisa esforço para perceber uma mudança de estado do estado do sistema
realizar para determinar se a meta foi atingida. que possa ser interpretada. (tela, som,
vibração, etc)

atividade mental atividade física

cortesia de Barbosa e Silva, 2010
Análise Contextual

Design Prototipação

Avaliação
 Análise Contextual

Design Prototipação

Avaliação
 Análise Contextual

Avaliação

Design

Prototipação Rogers et el. (2013)

Barbosa e Silva (2010)
The Elements of User Experience - User-Centered Design
for the Web and Beyond - Jesse James Garrett - 2nd
Edition - December 2010
The Elements of User Experience - User-Centered Design
for the Web and Beyond - Jesse James Garrett - 2nd
Edition - December 2010
 Tenha
responsáveis
por todas
dimensões...

180

Garrett, 2010
181
Compreender o Problema e o Contexto do Problema
 Depoimento

Apoia
Design do
Contexto de uso Sistema

Modifica
análise contextual

189
modelos de usuário e de tarefas são usados junto com os modelos de análise
• Saber para quem vc está desenvolvendo

 Usuário <> Cliente <> Stakeholder

• Para obter informações sobre usuários:

 Técnicas de coleta
 Pesquisa quantitativa e qualitativa (UX research)
 Feedback constante dos usuários

• Entender seus Objetivos, Necessidades e Desejos

 Criar Empatia
 Personas, perfis
Fonte: Jornal Zero Hora, 04/12/2020: https://gauchazh.clicrbs.com.br/saude/vida/noticia/2020/12/tres-pessoas-com-deficiencia-relatam-quais-os-
principais-desafios-para-a-acessibilidade-universal-cki9984bg0098019wtrd80lgt.html
Trabalha no
Centro de
Operações
Integradas
Fonte: https://medium.com/yoti-design/how-to-create-powerful-personas-f901a499573e
Fonte: https://www.interaction-design.org/literature/article/map-the-stakeholders 199
Compreender o Problema e o Contexto do Problema
modelos de usuário e de tarefas são usados junto com os modelos de análise
 A grande maioria das tarefas
NÃO se concentra unicamente
no sistema :
– Tarefas manuais , automáticas e
interativas

Objetivo São influenciadas pelo ambiente

da tarefa de trabalho (configuração física)
USUÁRIO SISTEMA e aspectos organizacionais
(papéis, dependências, etc.)
203
Winckler, M.; Pimenta, M.S. Análise e Modelagem de Tarefas. Tutorial IHC2004, Curitiba.
Ver https://www.irit.fr/~Marco.Winckler/publications/2004-IHC-tutorial.pdf
Concurrent Task Trees - CTT
Fonte: https://www.interaction-design.org/literature/article/task-analysis-a-ux-designer-s-best-friend 206
modelos de usuário e de tarefas são usados junto com os modelos de análise
• Identificar o que o usuário precisa (necessidades)
• Identificar as metas (objetivos) e requisitos
• Definir funcionalidades para usuário atingir metas

 “Caminho Feliz”

 Identificar barreiras

 Construir cenários (caminhos) alternativos

 Caminhos com Diferentes obstáculos

Saque num Caixa eletrônico:
Sistema Pronto para Uso

Cliente Identifica-se Verifica Identificação

Fornece Opções de Operações
Cliente Seleciona Saque Verifica Opção Selecionada

Solicita Valor de Saque

Cliente Fornece Valor Verifica se valor é válido
Verifica saldo do Caixa Eletrônico
Verifica saldo disponível na C. Corrente
Processa Saque
Disponibiliza Cédulas
Disponibiliza Recibo
Cliente Retira Cédulas e Recibo Encerra Saque
Saque num Caixa eletrônico:
….. ….

4. Solicita Valor de Saque

5. Cliente Fornece Valor Verifica se valor é válido
SE valor NÃO é válido:
ENTÃO
Notificar o usuário
Permitir entrar novamente o Valor
(limite de 3 vezes)

… …
Saque num Caixa eletrônico:
….. ….

4. Solicita Valor de Saque

(Alerta de valores possíveis)
“Só estão disponíveis notas de 20 e 50”

5. Cliente Fornece Valor Verifica se valor é válido

… …
Saque num Caixa eletrônico:
….. ….

4.Solicita Valor de Saque

(Alerta de valores possíveis)
“Só estão disponíveis notas de 20 e 50”
5. Cliente Fornece Valor Verifica se valor é válido
SE valor NÃO é válido:
ENTÃO
Notificar o usuário e renovar Alerta
Permitir entrar novamente o Valor
(limite de 3 vezes)
Saque num Caixa eletrônico:
….. ….

4.Solicita Valor de Saque

(Alerta de SALDO atual)
“Seu SALDO ATUAL é 300”
5. Cliente Fornece Valor Verifica saldo disponível na conta
SE valor de saque > saldo:
ENTÃO
Notificar o usuário e renovar Alerta
Permitir usuário escolher se altera ou
não o Valor fornecido
 Análise Contextual

Avaliação

Design

Prototipação Preece et el. (2002)

Barbosa e Silva (2010)
Compreender o Problema e o Contexto do Problema
Fonte: https://uxknowledgebase.com/scenarios-43e05671b07
Cenários são a antítese de uma especificação (Jack Carrol)
 Estratégia

O que NÓS queremos obter do software/produto?

O que OS USUÁRIOS querem obter do software/produto?

POR QUÊ estamos fazendo esse software/produto?

Escopo

O QUÊ vamos fazer? 225

Garrett, 2010
 Análise Contextual

Design da UX total :
Design
Avaliação tudo aquilo
que o usuário vê, ouve e
Design toca é projetado por um
time multidisciplinar

Prototipação

Rogers et el. (2013)

Barbosa e Silva (2010)
Parte do conteúdo e
de funcionalidades
mais abstratas

Parte dos requisitos

de conteúdo e de
funções existentes

Garrett, 2010
Garrett, 2010
• Criar ideias livremente (“Brainstorming”, “brainwriting”)

 Gerar várias soluções, NÃO a solução IDEAL

 Criatividade para suprir as necessidades do usuário

 Inovar: Deixar fluir ideias, pensar “fora da caixa”

 “We cannot solve our problems with the same
thinking we used when we created them.
Imagination is more important than knowledge.
Knowledge is limited. Imagination encircles the
world."

Albert Einstein

Fonte: https://www.inc.com/annabel-acton/10-einstein-quotes-to-fire-up-your-creativity.html
 SIM
Manter e adaptar

Elemento Atende
NOVO
(novos)
do Design requisitos Design
Atual ?

Criar novo ou
Modificar
NÃO
design da interface

244
design da interface

245
246
prototipação

248
 Requisitos do Usuário

Plano do Protótipo
i:=1
Revisão
Protótipo
(versão i)
i:=i+1 Protótipo
Descartável
Avaliação
N
OU
Experimentação
pelo Usuário
OK?
S
Refinamento
(Protótipo
Evolucionário)
“Software is the only engineering field that throws
together prototypes and then attempts to sell them as
delivered goods.“

Larry Constantine and Lucy Lockwood

Em IHC, um protótipo pode ser muitas coisas :-)
• Maquetes ou croquis (mockups) de telas
• Um storyboard (série de cenas como quadrinhos HQ)
• Um conjunto de slides (p.ex. Powerpoint slide show)
• Protótipo em papel (paper prototyping)
• Um video simulando o uso do Sistema
“Video prototyping: this is a variant of paper-prototyping that makes use of
video equipment to create short movies of the paper interface”
Designers criam uma simulação em papel dos elementos
da interface
• Ver Paper Prototyping:
• https://pt.wikipedia.org/wiki/Prototipagem_em_papel
• https://www.interaction-design.org/literature/topics/paper-prototyping

• E ver tbem: https://www.youtube.com/watch?v=k9mTvt0LXgk&t=73s

•Usa um meio (media) que NÃO é o final e geralmente não é digital,
como p.ex. papel, cartolina
•Rápido, barato, e facilmente modificável

•Exemplos: rascunhos de telas, anotações em ‘Post-it’, cartões, storyboards

•Com post-its e cartões: cada um representando uma janela ou tela, use
cores para diferentes significados, desenhe sobre eles, agrupe-os, coloque-
os numa parede ou Quadro branco e conecte-os com linhas.
From book: Designing
Interactive Systems, 2005
• Esboço é importante como protótipo de baixa
fidelidade

• Não se iniba com sua falta de habilidade ou talento

para desenhar. Faça esboços simples. A ideia é mais
importante agora do que a aparência.

• Pode-ser usar post-its, figuras de elementos de

interface, etc.
•Protótipo parece mais o sistema final
•Escolha da Ferramenta é crucial !!
•PERIGOS: clientes e gerentes querem que SEJA o sistema final !!

•Vantagens:
•Mais realista e próximo do produto final
•Permite coletar métricas

•Desvantagens:
•Mais caro, menos rápido de ser construído
•Quem o constrói reluta a mudar nas iterações
•Qualidade do Código NÃO é de um produto
avaliação
273
Depoimento
Depoimento
Depoimento
ROGERS, I.; SHARP, H.; PREECE, J
Design de Interação: Além da Interação Humano-Computador
Porto Alegre: Bookman, 2013.
avaliação
303
 análise das
tarefas de usuário

sequências de recomenda-
tarefas ções e
heuristicas

avaliação
heuristica

cenários e
projetos da tarefas de
interface usuário
avaliação represen-
formativa tativas

projetos da
interface
avaliação
refinados
somativa
iterativamente

aplicação centrada no usuário

Repita (seja iterativo)

Após a avaliação, pode-se ter que voltar a estágios

anteriores (análise contextual, design, protótipos)

 Ter que repetir partes do processo não deve ser

desestimulante pois um processo cíclico converge mais
rapidamente a um produto melhor.
 Análise Contextual

Avaliação

Design

Prototipação
307
 Muito Obrigado !

Estou à disposição para responder

suas dúvidas e trocar ideias
FIM