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árioO 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 feedbackNos engajamos com situações em que vemos nossas ações modificar resultados subseqüentes.

CuriosidadeQuando provocados com um uma pequena parcela de informação interessante, as pessoas querem saber mais.

Apelo visualVisã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



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 .

http://usabilitygeek.com/roi-usability/

http://www.slideshare.net/inusese/the-roi-of-good-user-experience-sdsc-2013

http://www.uie.com/publications/whitepapers/PogoSticking.pdf

The

ROI o

f Use

r Ex

peri

ence

with

Dr.

Sus

an W

eins

chen

kVí

deo:

htt

ps://

ww

w.y

outu

be.c

om/w

atch

?v=O

94kY

yzqv

Tc

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

Gra

u

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%

http://www.amanda.com/joomla_uploads/whitepapers/AM+A_ROIWhitePaper_20Apr0%201.pdf


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

UX Design / Experiência do UsuárioEntregá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

http://www.livrodesignthinking.com.br/



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

https://pt.wikipedia.org/wiki/Processo


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áfegoaéreo, obviamente contrate uma equipe especializada que usem amostrasgrandes 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á trabalhando 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 1Verifique se está claro o conteúdo da publicação “Abrir arquivo CDR sem Corel e SVG, EPS, AI, PDF sem Illustrator”

Tarefa 2Descubra se a autora possui o perfil profissional para realizar o site da empresa que você trabalha;

Tarefa 3Descubra 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 euclicaria aqui...

ORGANIZE O AMBIENTE DO TESTE — Adapte, mas não deixe de fazer!



Tablet com câmera Mouse

Meu notebook comwebcam 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 1Verifique se está claro o conteúdo da publicação “Abrir arquivo CDR sem Corel e SVG, EPS, AI, PDF sem Illustrator”

Tarefa 2Descubra se a autora possui o perfil profissional para realizar o site da empresa que você trabalha;

Tarefa 3Descubra 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

http://www.nngroup.com/

http://www.nngroup.com/

Promova melhorias!

+ conteúdo de design, desenvolvimento web, marketing etc

WWW.LUISAAMBROS.COM