Ux design/Experiência do Usuário - Conexão KingHost 2015

U.X. Design /
Experiência do Usuário
Luisa Ambros

Educação
❖ Pós graduanda em MBA em Marketing e Branding
❖ Diplomada em Design
Cursos de extensão
❖ Design Thinking
❖ Arquitetura da informação
❖ Web para designers
❖ Objective C/iOS, Flash CS4 + Action Script 3.0, PHP/MySQL, Photoshop
Contato contínuo com computador e videogames desde 1993 (e contando… :)
Quem é Luisa Ambros

Experiências profissionais em empresas
❖ Ideia SEO
❖ Agência Nuve
❖ Mandarina Digital
❖ uTouchLabs
❖ BraSzil Design
❖ IRDEB - Educadora FM e TVE
Projetos próprios
❖ Autora do http://luisaambros.com
❖ Colaboradora do http://respire.blog.br
❖ Primeiro site no ar em 2002
❖ Primeira experiência tentando montar um site em 1999
Quem é Luisa Ambros

MOMENTO 1: PALESTRA
U.X. Design/Experiência do Usuário: O que é e por que importa
❖ Conceito e origem
❖ Como o usuário, você e seu negócio se beneficiam
❖ O que faz um profissional de UX
MOMENTO 2: WORKSHOP
Entregáveis de UX & Teste de Usabilidade
Sumário da apresentação

UX Design / Experiência do Usuário
O que é e por que importa
MOMENTO 1: PALESTRA

Conceito e origem
MOMENTO 1: PALESTRA

UX Design/Experiência do Usuário: O que é e por que importa
Conceito e origem
U.X. Design
=
User Experience Design
=
Design da Experiência do usuário

Conceito e origem
“A ‘experiência do usuário’ abrange todos os
aspectos da interação do usuário final com a
empresa, seus serviços e seus produtos.”
JAKOB NIELSEN & DON NORMAN — NN/G, http://www.nngroup.com

Donald Norman
❖ Pioneiro nos estudos de usabilidade;
❖ Bacharel em ciência, engenharia elétrica pelo MIT e
Ph.D. em psicologia pela Universidade da Pensilvânia;
❖ Primeiro livro em 1975. Este e os primeiros
normalmente abordavam psicologia e ciência
cognitiva;
❖ No livro “O Design do Dia-a-dia” usa o termo user-
centered design pela primeira vez;
❖ Foi responsável pelo primeiro uso de “User Experience”
em um cargo, como User Experience Architect na
Apple, em 1992.
Conceito e origem

Jakob Nielsen
❖ Cientista da computação com Ph.D. em interação
homem-máquina;
❖ Se denomina um User Advocate (“defensor do
usuário”);
❖ Diretor da Nielsen Norman Group;
❖ Autor das 10 heurísticas de Nielsen, usadas para
avaliação de usabilidade.
Conceito e origem

Para alcançar a experiência do usuário de alta
qualidade nas colaborações de uma empresa,
deve haver uma fusão perfeita dos serviços de
várias disciplinas, incluindo:
❖ Engenharia;
❖ Marketing;
❖ Design gráfico e industrial;
❖ Design de interface.
Conceito e origem
Fonte da imagem:
http://desenvolvimentoparaweb.com/seo/o-que-seo-pode-aprender-com-ux/

Segundo NNGroup, uma experiência de
usuário exemplar:
❖ Atende às necessidades exatas do
cliente, sem confusão ou incômodo.
❖ Possuem simplicidade e elegância,
produzindo produtos que geram prazer
em possuir e em usar.
A verdadeira experiência do usuário vai muito
além de dar aos clientes o que eles dizem que
querem, ou de fornecer listas de verificação.
Conceito e origem
Pirâmide hierárquica das necessidades do usuário
SIGNIFICATIVO
PRAZEROSO
CONVENIENTE
USÁVEL
CONFIÁVEL
FUNCIONAL
FOCO EM EXPERIÊNCIA
FOCO EM TAREFA

Loops de feedback
Nos engajamos com situações em que vemos
nossas ações modificar resultados
subseqüentes.
Curiosidade
Quando provocados com um uma pequena
parcela de informação interessante, as
pessoas querem saber mais.
Apelo visual
Visão supera todos os outros sentidos e é a
forma mais direta de percepção.
Reconhecimento sobre recordação
É mais fácil de reconhecer coisas que já
experimentaram do que recuperá-las da
memória.
Alguns aspectos psicológicos que fazem os usuários quererem continuar usando sua aplicação:
Conceito e origem
Fonte da imagem e conteúdo: “Seductive Interaction Design: Creating
Playful, Fun, and Effective User Experiences.” Stephen P. Anderson

“Quando a tecnologia proporciona
necessidades básicas (funcional, de confiança,
etc) é a experiência que domina.”
Donald Norman no livro “The Invisible Computer”.
“objetos esteticamente agradáveis parecem ao
usuário ser mais eficaz em virtude de seu
apelo sensual.”
Donald Norman no livro “Emotional Design”.
Conceito e origem
Recorde! Você leu os termos de uso em 2.3
segundos. — Ou talvez não?
Ex. de como aplicar humor, do livro “Seductive Interaction
Design” de Stephen P. Anderson.

Como o usuário, você e seu negócio se
beneficiam
MOMENTO 1: PALESTRA

Desenvolvedor e designer,
“80% dos custos durante o ciclo de vida de
um software originam-se na fase de
manutenção.
A maioria desses custos surge porque as
necessidades de navegação do usuário não
foram previstas e/ou atendidas.” 1
Como o usuário, você e seu negócio se beneficiam
Empreendedor,
“Proporcionar uma melhor experiência para
seus clientes pode aumentar o número de
compradores em 40%.” 2
“Fornecer “informação suficiente para os seus
clientes na hora certa” você pode aumentar
as vendas em seu site em até 225%.” 3
Fontes — 1: Pressman 1992. citado aqui: http://usabilitygeek.com/roi-usability/ ; 2: http://www.slideshare.net/inusese/the-roi-of-good-user-experience-sdsc-2013 ;
3: http://www.uie.com/publications/whitepapers/PogoSticking.pdf .

TheROIofUserExperiencewithDr.SusanWeinschenk
Vídeo:https://www.youtube.com/watch?v=O94kYyzqvTc

UX pode ter desempenho medido
Veja estatisticamente as melhorias através do
acompanhamento do desempenho de:
1. Taxas de conversão;
2. Receita média por usuário;
3. Custos com suporte;
4. Performance do usuário.

Grau de custo de mudanças e risco e incerteza (eixo vertical) e tempo de
projeto (eixo horizontal). Fonte: PMBOK 5ª Edição, 2013.
Baixo
Alto
Grau
Risco e incerteza
Custo de mudanças
Tempo do projeto
“As decisões-chave do
sistema de design feitas
durante os primeiros 10%
do processo de concepção
de um produto, pode
determinar 90% do custo e
desempenho do produto.”*
* Fonte: http://www.amanda.com/joomla_uploads/whitepapers/AM+A_ROIWhitePaper_20Apr0%201.pdf
10%

O que faz um profissional de UX
MOMENTO 1: PALESTRA

O que faz um profissional de UX?
Entende as necessidades, contexto de uso e tenta solucionar problemas reais do
usuário.
Como trabalha o profissional de UX?
Através da criação de experiências amigáveis de uso e ajudando a eliminar
barreiras existentes no projeto.
Ele é um User Advocate ou Advogado/Defensor do usuário?
O que faz um profissional de UX

Entregáveis UX & Teste de Usabilidade
MOMENTO 2: WORKSHOP

Entregáveis UX
MOMENTO 2: WORKSHOP

UX Design/Experiência do Usuário: Entregáveis UX & Teste de Usabilidade
Entregáveis UX
Baixe grátis: http://www.
livrodesignthinking.com.br/
Design Thinking

LEAN UX
Fonte da imagem: http://www.fpemy.com/edu_agni/projetando-com-lean-ux
Entregáveis UX

Entregáveis UX
Design Strategy / Design Estratégico / Design Thinking
FONTE: UXDESIGN.CC
Jornada do usuário
Mapa conceitual EntrevistasAuditoria Competitiva Proposta de valor

Entregáveis UX
FONTE: UXDESIGN.CC
KPI/Indicadores de desempenho são usados em gestão para medir o nível de desempenho e
sucesso de uma organização ou de um determinado processo, focando no “como” e indicando
quão bem os processos dessa empresa estão, permitindo que seus objetivos sejam alcançados.
Design Strategy / Design Estratégico / Design Thinking

Entregáveis UX
Métodos de Concepção
FONTE: UXDESIGN.CC
Fluxo do usuário

Planejamento do Produto
Entregáveis UX
FONTE: UXDESIGN.CC

Entregáveis UX
Pesquisa de Usuários e Validação
FONTE: UXDESIGN.CC

Entregáveis UX
Design de Interface
FONTE: UXDESIGN.CC

Teste de Usabilidade
MOMENTO 2: WORKSHOP

O QUE É
Observar as pessoas tentarem usar o que você está
criando/projetando/construindo (ou já fez) com a intenção de:
a) Facilitar o seu uso para as pessoas ou
b) Provar que é fácil de usar.
Cuidado!
Em situações que envolvem vidas, como um sistema de controle de tráfego
aéreo, obviamente contrate uma equipe especializada que usem amostras
grandes com resultados estatisticamente significantes.

TIPOS
Muitos tipos de testes de usabilidade, todos
valiosos para diferentes finalidades.
O comum entre eles é observar as pessoas de
fato a usar o produto.
O abordado aqui será um tipo “faça você
mesmo”, qualitativo com o objetivo não de
provar algo, mas ter ideias que permitam
melhorar o que você está criando.
❖ Qualitativo
❖ Quantitativo
❖ Resumido
❖ Formativo
❖ Formal
❖ Informal
❖ Amostra grande
❖ Amostra pequena
❖ Testes comparativos
❖ De benchmark

POR QUE APLICAR
Para identificar os problemas graves que possam
estar, por exemplo, criando um bloqueio para a
conclusão de uma tarefa que poderia transformar
um usuário em cliente.
❖ “Todo projeto tem problema de usabilidade”;
❖ A maiorias dos sérios costumam ser
facilmente encontrados;
❖ Te torna um projetista melhor, porque você
aprende como os usuários pensam;
❖ É divertido e você sempre aprenderá algo
novo.
Fonte da imagem: http://www.fpemy.com/edu_agni/projetando-com-lean-ux

QUANDO APLICAR
— O quanto antes!
“É mais fácil e menos caro consertar problemas de usabilidade no início.” — Steve Krug
O site está
pronto?
Iniciar o teste
agora
Continue
trabalhando nele.
Não há razão para
testá-lo ainda.
Não
Sim
Pensamento incorreto Pensamento correto
Você está
trabalhand
o no site?
Comece a
testá-lo agora.
Sim

COMO APLICAR
❖ Recrute os participantes;
❖ Selecione tarefas e crie cenários;
❖ Faça listas de checagens;
❖ Organize o ambiente do teste;
❖ Aplique o teste.
Não assim...
Assim!
VERSÕES DE PROTÓTIPOS/PROJETOS PARA TESTE

RECRUTE OS PARTICIPANTES
Ideal
Com o perfil de quem de fato visitará o site,
que tenha o domínio no conhecimento do
tópico do projeto e dos termos da área.
Na real
❖ Há muito a aprender com qualquer um
usando seu site, mesmo não sendo ele o
público-alvo.
❖ Quando um participante que não possui
o perfil do público tem um problema,
basta se perguntar: nosso público-alvo
teria?
É interessante comunicar de forma que
qualquer pessoa possa usar seu site/projeto.

Quantos? 3! Porque:
❖ Dá menos trabalho de reunir os usuários
para teste (e de manter entretida a equipe
que participará);
❖ Identifica os erros mais significativos, o que
ajuda a focar onde consertar pontos
críticos (ao invés de lidarmos com muitos
problemas menores);
❖ A quantidade de informações geradas é
menor, o que torna mais ágil para analisar,
corrigir e fazer uma nova rodada.

Como encontrar
❖ Onde esse perfil tende a se reunir.
Ex: Grupos em redes sociais (y)
❖ Se você quer pessoas que usem seu site,
coloque anúncios nele com um convite
❖ Na sua própria empresa, alguém de um
setor que não faça parte do projeto
❖ Podendo ser qualquer um, convide amigos
e familiares.
❖ Considere um teste remoto.
Avalie os candidatos e selecione os promissores.

Acompanhe!
Registre e envie por e-mail em seguida todos
os detalhes: quando, onde e o quê.
Tenha uma carta na manga
Quando agendar testes, tenha uma opção
disponível no local próximo e que possa ser
interrompida quando estiver realizando
testes.
Como recompensá-los?
Algumas ideias (acordadas antes, claro):
❖ Agradeça, reforce que a opinião ajudará
a melhorar o projeto;
❖ Forneça brindes da empresa;
❖ Vales;
❖ Dinheiro.

SELECIONE TAREFAS E CRIE CENÁRIOS
Tarefas
São as coisas que você quer que elas tentem fazer.
❖ Escolha primeiro as 5 coisas principais que você
gostaria que seus visitantes fizessem no seu site;
❖ Em seguida, escolha 3 dos mais importantes.
Exemplo aplicado a luisaambros.com:
Tarefas selecionadas
Tarefa 1
Verifique se está claro o conteúdo da publicação
“Abrir arquivo CDR sem Corel e SVG, EPS, AI, PDF
sem Illustrator”
Tarefa 2
Descubra se a autora possui o perfil profissional
para realizar o site da empresa que você trabalha;
Tarefa 3
Descubra como entrar em contato com a autora.

Cenários
Pequenos scripts que criem um contexto e motivação para a realização das tarefas mais críticas.
Ex:
Você é um designer, recebeu um arquivo do programa Corel e não tinha como instalá-lo.
Pesquisou então por “como abrir arquivo cdr sem corel” no Google e descobriu uma
publicação sobre isso no site. Agora, você precisa avaliar se o conteúdo está claro. Depois, você
gostaria de saber se a autora pode ajudá-lo na criação do site da agência em que trabalha.
Descubra se ela tem esse perfil e como contatá-la.

Cenários
Observações:
❖ Se possível, faça um pré-teste
❖ Imprima:
➢ Uma tarefa por folha para o
usuário, e
➢ Uma lista com todas para os
observadores.

ORGANIZE O AMBIENTE DO TESTE
Então, o que você
faria depois?
Acho que eu
clicaria aqui...

ORGANIZE O AMBIENTE DO TESTE — Adapte, mas não deixe de fazer!
Tablet com câmera Mouse
Meu notebook com
webcam e microfone
Cenário e tarefa
(Meu quarto)
Namorado

APLIQUE O TESTE
Preparação anterior
❖ Teste o gravador de tela;
❖ Teste o compartilhamento de tela;
❖ Deixe o cursor do mouse maior que o normal;
❖ Desative qualquer outro software que possa
interromper;
❖ Verifique se você adicionou as páginas
relevantes ao teste nos Favoritos do
navegador;
❖ Tente usar o que você está testando;
❖ Faça contato com o seu recepcionista
designado.
Recepção
❖ Deixe claro que o que está sendo testado é o
projeto, não o usuário;
❖ Peça para o usuário sempre falar em voz alta o
que estiver pensando;
❖ Registre que usuário aceitou ser gravado e
assine formulários relacionados;
❖ Tente estabelecer uma conexão com o usuário,
através também com contato visual;
❖ Leia o script/dê orientação de forma tranquila,
sem pressa mas sem ser muito lento.

APLIQUE O TESTE
Perguntas pré-teste
A aplicação delas possui 3 objetivos:
1. Deixas os participantes à vontade para falar;
2. Mostrar a eles que você ouvirá o que eles
dizem;
3. Obter informações importante para avaliação
do usuário (e o quanto ele se aproxima do
público real do seu projeto).
As perguntas
❖ Qual sua ocupação? O que você faz durante o dia
inteiro?
❖ Numa estimativa: Quantas horas por semana você
diria que gasta usando a internet em geral?
Incluindo navegação na web e e-mail, no trabalho,
celular e em casa.
❖ Como você se divide entre o e-mail e a navegação;
uma porcentagem aproximada.
❖ Que tipos de sites você procura quando navega na
web?
❖ Você tem preferência por algum site?

APLIQUE O TESTE
O passeio pela página principal
Faça as perguntas ao usuário pedindo que
respondam enquanto olham o site:
❖ O que chama sua atenção nela?
❖ De quem você acha que é o site?
❖ O que você pode fazer nele?
❖ Para que serve o site?
Essa prática é muito útil para validarmos se o site em questão está comunicando bem a que se propõe.

APLIQUE O TESTE
As tarefas
❖ Aplique as perguntas que definiu anteriormente.
Forneça por escrito para ele e pergunte em voz alta;
❖ Peça para realizarem as tarefas sem usar o
mecanismo de busca do site;
❖ Oriente que não saiam do site que está sendo testado.
Passe adiante quando:
❖ A tarefa foi completada;
❖ O usuário parece aflito;
❖ E o tempo está esgotando;
❖ E você não está aprendendo algo novo.
Tarefas selecionadas
Tarefa 1
Verifique se está claro o conteúdo da publicação
“Abrir arquivo CDR sem Corel e SVG, EPS, AI, PDF
sem Illustrator”
Tarefa 2
Descubra se a autora possui o perfil profissional
para realizar o site da empresa que você trabalha;
Tarefa 3
Descubra como entrar em contato com a autora.

APLIQUE O TESTE

“Testar com um usuário é 100% melhor
que testar com nenhum”
Steve Krug

APLIQUE O TESTE
❖ Mantenha-se neutro
❖ Haja como um terapeuta.
Para você indicar que o caminho está sendo o correto
e continua ouvindo:
❖ Usar sinais de reconhecimento
❖ Parafrasear
❖ Esclarecer para os observadores
O que você
está pensando?

APLIQUE O TESTE — Acompanhando o participante
Quando isso acontecer Diga isso
Você não tem certeza absoluta do que o participante está
pensando
“O que você está pensando?”
“O que você está olhando?”
“O que você está fazendo agora?”
Algo que parece surpreendê-los. Por exemplo, falam
“humm”, “oh” quando carrega a página após clicarem em
algo.
“É isso que você esperava que acontecesse?”
O participante está tentando fazer com que você dê uma
pista para ele (ex: “Devo usar o…?”)
“O que você faria se estivesse em casa?”
“Então por que você não vai em frente e tenta fazer isso?”
“Eu gostaria que você fizesse o que normalmente você
faria”

APLIQUE O TESTE — Acompanhando o participante
Quando isso acontecer Diga isso
O participante sugere que está preocupado em não dar o
que você precisa.
“Não, isso é muito útil.”
“É exatamente o que precisamos”
O participante pede para você explicar como funciona algo
ou como deve funcionar (ex: “Esse pedidos ao suporte são
respondidos à noite?”)
“O que você acha?’”
“Como você acha que isso funcionaria?”
“Não posso responder isso agora porque preciso saber o
que você faria quando não tem alguém por perto. Mas se
você quiser saber ainda quando terminarmos, será um
prazer responde sua pergunta.
O participante parece ter se dispersado da tarefa “O que você está tentando fazer agora?”

SONDAGEM
Ao longo do teste, tente se ater às tarefas. Anote o
que o usuário fizer que te deixou curioso e pergunte
depois. Exceto esclarecimentos quando não entender
algum apontamento dele.
Verifique com a equipe se ainda há alguma dúvida, e
então esclareça-a com o usuário.
FINALIZAÇÃO
Agradeça e parta pro próximo! :)

FAÇA LISTAS DE CHECAGENS
Antes de cada teste
❖ Limpe o histórico do navegador;
❖ Abra uma página “neutra” (ex. Google) no
navegador Web.
Enquanto o participante assina o formulário de
consentimento*
❖ Inicie o gravador de tela!
*Disponível para download aqui:
http://www.altabooks.com.br/simplificando-coisas-que-parecem-
complicadas.html (clique em “baixar arquivos de apoio”)

FAÇA LISTAS DE CHECAGENS
Ao final de cada teste
❖ Pare o gravador de tela!;
❖ Salve a gravação!;
❖ Encerre a sessão de compartilhamento de
tela, se necessário;
❖ Separe um tempo antes da próxima sessão
para fazer algumas anotações sobre as
coisas que você observou;
❖ Se for o último teste do dia e você usou um
computador desktop, copie o arquivo com
a gravação da tela para um CD ou para um
pen drive.
Anotações
● Existem alguns erros de digitação e concordância no
texto, que provocaram estranhamento e riso, além de
poder comprometer a imagem.
● No resumo da autora no final da publicação, possui
ícone do youtube não aparece.
● Perfil do youtube abre inicialmente página com vídeos
que gostei, que são fora de contexto profissional
● Usuário teve dificuldade olhando a tela. Pode ser em
função da visão deblitada, ergonomia (monitor baixo),
mas também o tamanho da letra do site, que pode estar
pequeno demais.

“Foque unicamente nos
problemas mais sérios”
Steve Krug

Ferramentas úteis
Imersão/pesquisas:
❖ Formulários Google https://www.google.com/intl/pt-BR/forms/about/
❖ Redes sociais, como grupos no facebook.com
Prototipação:
❖ InVision: http://www.invisionapp.com/
❖ Marvel app: https://marvelapp.com/
❖ Concept.ly: http://concept.ly/
❖ POP prototype: https://popapp.in/
Testes de usabilidade:
❖ CamStudio (gravação de tela e áudio gratuito): http://camstudio.org/
❖ CamTasia (gravação de tela e áudio pago): https://www.techsmith.com/camtasia.html
❖ Skype? Hangout? Facetime? Seja criativo, adapte! ;)

Referências bibliográficas
❖ http://www.nngroup.com/ — Nielsen Norman Group
❖ Livro: Emotional Design: Why We Love (or Hate) Everyday Things, Donald Norman - Basic Books (AZ) (1 de maio de 2005)
❖ Livro: The Design of Everyday Things, Donald Norman - New York: Basic Books, 1988
❖ Livro: The UX Book: Process and Guidelines for Ensuring a Quality User Experience, Por Rex Hartson,Pardha S. Pyla - Elsevier, 25 de
jan de 2012
❖ Livro: Lean UX, Jeff Gothelf
❖ Livro: Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences (Voices That Matter)
❖ Livro: “Cost-justifying Usability: An Update for an Internet Age” Por Randolph G. Bias,Deborah J. Mayhew
❖ http://www.uxmatters.com/mt/archives/2012/07/how-to-calculate-the-roi-of-ux-using-metrics.php
❖ AM+A White Paper: Return on Investment for Usable User Interface Design: Examples and Statistics
❖ http://www.uxdesign.blog.br/
❖ http://uxdesign.cc/ (en) — Segmenta tudo de UX, dando uma breve descrição e referenciando onde conseguir mais detalhes.
❖ http://www.servicedesigntools.org/ (en) — Explica cada método dos processos de design
❖ Livro: Simplificando coisas que parecem complicadas - o guia do tipo faça você mesmo para descobrir e consertar problemas de
usabilidade, Steve Krug
❖ Livro: Não me faça pensar, Steve Krug

+ conteúdo de design,
desenvolvimento web, marketing etc
WWW.LUISAAMBROS.COM

Ux design/Experiência do Usuário - Conexão KingHost 2015

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Ux design/Experiência do Usuário - Conexão KingHost 2015

Similar to Ux design/Experiência do Usuário - Conexão KingHost 2015 (20)

Ux design/Experiência do Usuário - Conexão KingHost 2015