Upload
karine-drumond
View
1.311
Download
1
Embed Size (px)
DESCRIPTION
Aula lecionada por Karine Drumond e Leandro Alves em 2011 na pós em Marketing Digital. Belo Horizonte.
Citation preview
Design de Interação | Karine e Leandro
Design de InteraçãoKarine Drumond e Leandro Alves
Design de Interação | Karine e Leandro
Técnica de modelagem
personas ágeis
Design de Interação | Karine e Leandro
Ciclo de vida ágil
Personas são modelos descritivos de usuários.
Design de Interação | Karine e Leandro
exemplo de persona tradicional
Design de Interação | Karine e Leandro
Alguma coisa é melhor que coisa-algumaMinimize esforços. Levante informações através de etnografia digital,
análise métrica, benchmarking ou conversas com stakeholders.
Design de Interação | Karine e Leandro
Uma Persona Ágil é uma exploração breve sobre o que sabemos dos usuários.
Pragmática - Patton
Provisória - CooperGuerrilha - Kuniavsky
Ad-Hoc - NormanÁgil - Cardoso
Design de Interação | Karine e Leandro
Ciclo de vida ágil
São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a
comunicação de informações.
Design de Interação | Karine e Leandro
Ciclo de vida ágil
Boas personas destacam características relevantes das menos relevantes.
Evidenciam informações, não apenas dados.
Design de Interação | Karine e Leandro
Ciclo de vida ágil
"Uma Persona é uma pessoa artificial, inventada para ajudar um designer entender as pessoas que usarão seu produto.”
- Norman, Persona Life Cycle
Design de Interação | Karine e Leandro
Ciclo de vida ágil
1. Não são estereótipos
2. Não são segmentos de mercado:
MKT = venda / Design = uso
Design de Interação | Karine e Leandro
Ciclo de vida ágil
1. Modelamos para discutir o que sabemos e o que não sobre usuários (Informações).
2. Modelamos para mapear melhor sua experiência (UX).
3. Personas servem para agregar um enfoque empático ao projeto (❤).
Por que modelar personas?
Design de Interação | Karine e Leandro
1. Na definição de requisitos (principalmente para produtos de contextos diferentes, desconhecidos. ex: hospital, bombeiros, polícia)
2. Durante brainstormings, reuniões
3. Ao planejar funcionalidades
Quando aplicar Personas?
Design de Interação | Karine e Leandro
Como criar personas
Design de Interação | Karine e Leandro
Ciclo de vida ágil
1o passo: Determinar tipos de usuários
Design de Interação | Karine e Leandro
1o passo: Determinar tipos de usuários
ZAGATSite que oferece reviews de mais de 50 mil restaurantes em 100 países.
Estão investindo em aplicações mobile.
Quais os tipos de usuários desse sistema?
Design de Interação | Karine e Leandro
Ciclo de vida ágil
1.Gourmets,
2.Viajantes,
3.Namorados...
(Uma boa ideia é focar em papéis)
1o passo: Determinar tipos de usuários
Design de Interação | Karine e Leandro
2o passo: Listar características de cada tipo
1. Demográficas: Idade, sexo, classe social, onde vivem, cultura, formação, profissão...
2. Tecnológicas: Quais são suas habilidades? Uso mais frequente? Hardware, conexão?
3. Contexto de uso: Onde usaria (casa, escritório, metrô..)? Que horas, por quanto tempo?
4. Estilo de vida: Valores, atitudes. O que procuram? Diversão, rapidez, desafio, conforto... Quais são seus hobbies? O que detesta, o tira do sério ou incomoda?
Design de Interação | Karine e Leandro
2o passo: Listar características de cada tipo
5. Necessidades: diretas e periféricas (mas importantes. ex: segurança no metrô)
6. Desejos: o que eles querem, não o que dizem que querem. (Gladwell, spaghetti sauce)
7. Conhecimento: Na área relacionada, cultura geral. Novatos? Experts? Curiosos?
8. Lealdade: Frequência de uso, compromisso (software sazonal, apple vs android...).
9. Dê um nome, um rosto, uma frase emblemática:
Design de Interação | Karine e Leandro
2o passo: Listar características de cada tipo
Roberto, 42 anos, Jornalista Saulinho, 22 anos, cursa LetrasMochileiro sazonal
Júlia, 16 anos, estudante, twiteira
Design de Interação | Karine e Leandro
3o passo: Determinar usuário(s) focal(is) (patton) ou primário(s) (cooper)
1. "É um usuário que deve ser atendido e não seria com uma interface projetada para outra pessoa." (Cooper)
2. Todo sistema tem ao menos 1
3. Se identificamos mais de 1, temos mais de uma interface. Se identificarmos mais de 3, temos um problema. (citar ML)
Design de Interação | Karine e Leandro
Roberto, 42 anos, Jornalista Saulinho, 22 anos, cursa LetrasMochileiro sazonal
Júlia, 16 anos, estudante, twiteira
3o passo: Determinar usuários focais (patton) ou primários (cooper)
focal
usuári
o
sazon
al
não p
aga
Design de Interação | Karine e Leandro
Sugestão de PattonNome, Idade Papel
descrição, frase emblemática
Tarefas no sistema para necessidadesNecessidades no mundo real
Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
EM GRUPO!
1) Criar 3 personas para
seu produto
2) Escolher uma como focal
3) Montar apresentaçã
o de 5’
TO DO DONE
Design de Interação | Karine e Leandro
1o passo: Determinar tipos de usuários
2o passo: Listar características de cada tipo
3o passo: Determinar usuários focais
Personas ágeis
Design de Interação | Karine e Leandro
Ciclo de vida do produto
pesquisa des
ign/
prototipação
validação
Questionários e entrevistas
personas
Benchm
arking
prototipação
Design de Interação | Karine e Leandro
Prototipaçãoquebrando ovos para fazer omeletes
Design de Interação | Karine e Leandro
Protótipo = modelo~
Design de Interação | Karine e Leandro
São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a
comunicação de informações.
lembrando...
Design de Interação | Karine e Leandro
Podem ser de baixa ou alta resoluçãoBaixa: Para explorar ideias, conceitos, fluxos
Alta: para validar decisões pontuais
Design de Interação | Karine e Leandro
“Devemos criar exatamente quanta documentação necessitamos para executar bem um projeto, e não mais.”
-Dan Saffer
Design de Interação | Karine e Leandro
Nós ❤ PAPEL!• Nada digital é mais rápido, flexível e fácil de prototipar
• Não requer habilidades específicas• É mais barato e colaborativo;
• Variedade = possibilidades: Diferentes cores, tamanhos, texturas, adesivos...
• Tamanho é documento (difícil ter um monitor do tamanho de uma cartolina)
• Estimula desapego
• Reciclável, divertido, estimula a equipe
Design de Interação | Karine e Leandro
Cenário• Os protagonistas são as PERSONAS• Devem refletir comportamento no sistema
• Uma boa prática é passar diferentes personas pelo mesmo cenário
• Um bom cenário é imaginar o primeiro uso
“São protótipos feitos de palavras”
Design de Interação | Karine e Leandro
CenárioUma imagem vale mil palavras.Mas as palavras certas podem valer algumas boas imagens.
Lúcia Maria loga em sua conta Sacolao.com. Vê seu pedido da semana passada e decide usá-lo de novo para esta semana. Remove alguns itens
arrastando-os de sua Cestinha®, e o valor ajusta automaticamente. Satisfeita com a compra, clica no botão Entrega rápida e confirma o
débito em seu cartão de crédito previamente salvo. A tela de confirmação informa para esperar a entrega nas próximas 2 horas.
Design de Interação | Karine e Leandro
TO DO DONE
EM GRUPO!
Criar um cenário (primeiro uso ou
tarefa chave) e aplicá-
lo em sua
Persona Focal.
Storyboards
Design de Interação | Karine e Leandro
StoryboardsTécnica da publicidade, HQs e cinema, que ilustra interações
complexas
Design de Interação | Karine e Leandro
Storyboards• Imagens + legendas
• Ilustram fluxos, momentos chave
• Casos de uso
• Mostram ambientes e contextos
• Complementam wireframes
Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
TO DO DONE
EM GRUPO!
Criar um storyboard para o
cenário criado.
Design de Interação | Karine e Leandro
Task flows• Fluxos são tão importantes quanto telas
• Representam as possibilidades de navegação no sistema
diagrama de fluxo
Design de Interação | Karine e Leandro
Task flowsdiagrama de fluxo
Design de Interação | Karine e Leandro
FFFFFFFFFFFFFFFFFFFFFFFFUUUUUUUUUUUUUU
Design de Interação | Karine e Leandro
Fluxos são interações de um indivíduo, elementos / escolhas
Task flowsdiagrama de fluxo
Design de Interação | Karine e Leandro
Exemplo: Adicionando um item na TO-DO do Basecamp.
Task flowsdiagrama de fluxo
Design de Interação | Karine e Leandro
• É rápido de fazer e simples de enxergar.
Task flowsdiagrama de fluxo
Design de Interação | Karine e Leandro
Estrutura• Barra separa a interface da ação• Barra pontilhada separa as opções para mesma interface• Setas vão da ação para a nova interface• Se a interface for fora de escopo, fica sem ação
Task flowsdiagrama de fluxo
Design de Interação | Karine e Leandro
TO DO DONE
EM SUBGRUPO!
definir fluxo da tarefa
principal (e
mais, se der tempo) consider
ando
os casos de uso.
Design de Interação | Karine e Leandro
Rascunhos
Design de Interação | Karine e Leandro
Rascunhos• Ideias primárias, generalistas, fluxos.
• São feios! estimulam a discussão sobre função e uso
Design de Interação | Karine e Leandro
Wireframes
Design de Interação | Karine e Leandro
Wireframesprotótipos estruturais do sistema
Design de Interação | Karine e Leandro
Registram as funcionalidades do produto, seus aspectos técnicos e sua lógica de negócios, sem a influência do
design visual (branding, layout)
Wireframesprotótipos estruturais do sistema
Design de Interação | Karine e Leandro
Registram as funcionalidades do produto, seus aspectos técnicos e sua lógica de negócios, sem a influência do
design visual (branding, layout)
Wireframesprotótipos estruturais do sistema
Podem ser usados para validar ideias
Design de Interação | Karine e Leandro
Registram as funcionalidades do produto, seus aspectos técnicos e sua lógica de negócios, sem a influência do
design visual (branding, layout)
Wireframesprotótipos estruturais do sistema
Podem ser usados para validar ideiasPodem ser usados para testes com usuários
Design de Interação | Karine e Leandro
Wireframes
•Estrutura•Arquitetura da informação
•Controles (padrões de interação)•Conteúdo
Substituem documentos mais burocráticos, são especificações visuais comprometidas com:
Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
papel=desapegoDesign de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
http://www.youtube.com/watch?v=k9mTvt0LXgk
Prototipando e testando low fi
Design de Interação | Karine e Leandro
wireouts
Design de Interação | Karine e Leandro
layouts
Design de Interação | Karine e Leandro
Lembrem que isso é ágil, podemos
mudar o que foi decidido.
IDEAÇÃO = CAOS!
EM GRUPO!Prototipar em cima dos
rascunhos, ou refiná-lostempo: resto da aula
Design de Interação | Karine e Leandro
Design de Interação | Karine e Leandro
Ciclo de vida do produto
pesquisa des
ign/
prototipação
validação
Questionários e entrevistas
personas
Benchm
arking
prototipação
testes
Design de Interação | Karine e Leandro
Teste com usuários
Design de Interação | Karine e Leandro
Teste de usabilidade‣ Observação de usuários realizando tarefas
importantes no produto para entender padrão de uso e problemas no produto.
Design de Interação | Karine e Leandro
Pra que serve?‣ Avaliar o entendimento da interface e dos fluxos projetados
‣ Identificar pontos críticos da interação (ruídos, dúvidas, rupturas)
‣ Comparar desempenho em produtos diferentes (benchmark/concorrência)
Design de Interação | Karine e Leandro
Tipos de testes
‣ Teste em campo (menos formal) ‣ Teste em laboratório (mais controlado)
Design de Interação | Karine e Leandro
Tipos de testes
Design de Interação | Karine e Leandro
Tipos de testes‣ Em laboratório (mais formal)
+ permite maior controle dos dados e variáveis+mais fácil de envolver o cliente– usuário pode se sentir mais desconfortável– mais distante do contexto de uso real
‣ Em campo (ambiente natural)
+ usuário se sente mais à vontade+mais próximo do contexto de uso real– menor controle dos dados e variáveis– dificuldade de envolver o cliente
Design de Interação | Karine e Leandro
Tipos de testes‣ Laboratório é ideal para:
‣ produção acadêmica (rigor científico para teses, artigos e dissertações)
‣ medição de performance (tempo, número de erros etc.)‣ estudos permanentes com equipe dedicada (ex.: Nokia,
Globo etc.)
‣ Avaliação em campo é ideal para:
‣ obter feedback rápido dos usuários‣ usabilidade em equipes ágeis de desenvolvimento‣ custo baixo é prioridade‣ testar conceitos e interfaces em fases iniciais de design
Design de Interação | Karine e Leandro
O que testar?
‣ Teste em protótipo em papel:Servem para testar conceitos e fluxos.
‣ Teste em produto final.Avaliar eficiência, satisfação, compreensão etc.
Design de Interação | Karine e Leandro
Etapas1.Planejamento
2.Recrutamento
3.Aplicação
4.Análise
Design de Interação | Karine e Leandro
Planejamento1. determinar metas e objetivos do teste2. escolher o que medir (tempo, compreensão, satisfação etc)3. definir perfil de participantes4. definir tarefas e contexto (motivação)5. preparar os materiais, equipe, ambiente e ferramentas6. executar um teste piloto
Design de Interação | Karine e Leandro
1 - Determinar os objetivosExemplos
‣ Os usuários entendem de forma clara o que é e para que serve a extensão?
‣ Os usuários têm alguma dificuldade para instalar a extensão?
‣ Eles sabem onde e como fazer?
‣ Completam todas as etapas de instalação corretamente?
Design de Interação | Karine e Leandro
TO DO DONE
EM GRUPO!
determinar os objetivos do te
ste
do produto escolhido
Design de Interação | Karine e Leandro
2 - Escolher o que medirA métrica depende do objetivo
‣ Satisfação geral
‣ Tempo de execução de tarefa
‣ Número de passos para conclusão de uma tarefa
‣ Quantidade de erros
‣ Quantidade de tarefas completadas
‣ Proporção de usuários favoráveis ao sistema em relação ao concorrente
Design de Interação | Karine e Leandro
TO DO DONE
EM GRUPO!
determinar as métricas do teste
Design de Interação | Karine e Leandro
3 - Definir perfil de participantes‣ Quem deve usar este produto?
‣ Quantos participantes escolher? Nielsen sugere:
‣ 5 (de cada perfil) para qualitativo (quick and dirty! rápido e sujo)
‣ 20 para quantitativo
‣ Onde encontrar?
‣ Redes sociais, contatos pessoais, contatos do cliente, usuários atuais, questionário na web, empresas de recrutamento etc.
Design de Interação | Karine e Leandro
3 - Definir perfil de participantes
Design de Interação | Karine e Leandro
3 - Definir perfil de participantesExemplo
‣ 2 usuários lead e 4 intermediários
‣ Pessoas que procuram ou procuraram imóveis recentemente.
‣ Contatos não fornecidos pelo cliente.
Design de Interação | Karine e Leandro
4 - Definir tarefas e contextoTarefas: O que precisa ser testado?
‣ Quais são as funcionalidades mais críticas?
‣ Passos esperados em cada tarefa (se for relevante)
‣ Tempo esperado em cada tarefa (se for relevante)
‣ Um teste nunca deve passar de 2h (ideal é até 1h)
Contexto: Motivação para tarefa (ajuda na compreensão)
Design de Interação | Karine e Leandro
4 - Definir tarefas e contextoExemplo (tarefas)
‣ Encontrar um imóvel
‣ Alterar filtros
‣ verificar IPTU
‣ Encontrar informações de contato
‣ Salvar nos “favoritos”
‣ Encontrar a lista de favoritos
Design de Interação | Karine e Leandro
4 - Definir tarefas e contextoExemplo (contextos)
‣ Opção 1:
Você se mudou para Curitiba e precisa arrumar um imóvel pra alugar. Como você encontraria este imóvel?
‣ Opção 2:
Facilitador: Você procurou um imóvel recentemente? Como foi essa experiência? Tente encontrar um semelhante nesse site. Usuário: Não encontrei... Facilitador: Por que você acha que o site não encontrou? Usuário: Deve ser a faixa de preço que escolhi, foi baixa. Facilitador: Como você alteraria a faixa de preços?
Design de Interação | Karine e Leandro
TO DO DONE
EM GRUPO!
definir tarefas e cenár
ios
EM GRUPO!definir passos e tempo das tarefas (se relevante)
Design de Interação | Karine e Leandro
5 - Preparar roteiroEstrutura do roteiro
‣ Propósito do teste‣ Lembrar que quem é avaliado é o sistema e não usuário‣ Que o objetivo é melhorar a interface‣ Que a identidade será mantida em sigilo‣ Participação é voluntária‣ Explicar como será o teste‣ Explicar que podem fazer perguntas, mas nem todas poderão ser
respondidas‣ Small talk, contextualizar‣ Explicar as tarefas‣ Realizar entrevista semi-estruturada no final
Design de Interação | Karine e Leandro
TO DO DONE
EM GRUPO!
criar o roteiro do teste
Design de Interação | Karine e Leandro
6 - Executando um teste pilotoExecutar com alguém não envolvido diretamente com a execução do testePermite testar as condições do teste‣ As tarefas foram compreendidas pelos usuários?‣ Todas as tarefas foram possíveis de concluir?‣ Os equipamentos estão ok?‣ O protótipo precisa ser ajustado?‣ O questionário está ok?Envolvidos: 1 a 3 usuários (depende da complexidade do teste, normalmente 1 basta)
Design de Interação | Karine e Leandro
AplicaçãoEquipe envolvida
‣ Orientador/condutor‣ Orientar o participante‣ Fazer com que se sinta a vontade‣ Responder perguntas (se possível)‣ Não induzir comportamento (tendenciar)
‣ Observador‣ Registrar interação do usuário‣ Não interferir no teste
‣ Opcionais: recepcionista e co-observadores (clientes e outros membros da equipe)
Design de Interação | Karine e Leandro
AplicaçãoParticipantes (usuários)
‣ Posso/devo pagar usuário?‣ Na publicação de papers, artigos esta prática não é aceita‣ No mercado é comum e há opções alternativas ao dinheiro
(vale-compra, brindes etc.)‣ O que o usuário precisa saber?‣ Que está sendo observado‣ Que sua identidade será preservada‣ Indicar espelhos, câmeras, microfones etc.‣ Precisa aceitar o termo de consentimento
Design de Interação | Karine e Leandro
Software espião‣ Quicktime (http://www.apple.com/quicktime/download/)‣ SilverBack (http://silverbackapp.com/) ‣ CamStudio (http://camstudio.org/)‣ Camtasia (http://www.techsmith.com/products/studio/default.asp )‣ Morae (http://www.techsmith.com/products/morae/default.asp)‣ Ovo Logger (http://www.ovostudios.com/ovologger.asp#during )‣ ScreenCam (http://www.smartguyz.com/index.html )‣ ZD Soft (http://www.zdsoft.com/downloads.html)
Design de Interação | Karine e Leandro
Como conduzir os testes?‣ Escolha somente uma pessoa para falar com o usuário (condutor)‣ O observador deve se posicionar de forma a ver a tela e as reações do
usuário‣ Comece com tarefas mais simples‣ Responda as dúvidas que puder, quando não puder diga que você não
pode responder para não interferir o teste
Design de Interação | Karine e Leandro
Como conduzir os testes?
Usuário comenta: “Mas isso não é inútil?”
Design de Interação | Karine e Leandro
Como conduzir os testes?
Usuário comenta: “Mas isso não é inútil?”Resposta inadequada: "Não."
Resposta adequada: "Por que você acha isso?"
Design de Interação | Karine e Leandro
Como observar os testes?‣ Procure por padrões de uso e fenômenos‣ Não interfira no teste (função do orientador/condutor)‣ Marque o tempo inicial (quando medindo o tempo)‣ Anote pontos de dificuldade‣ Anote o caminho percorrido‣ Anote as sugestões do participante‣ Anote se a tarefa foi realizada com sucesso ou não‣ Anote frases/depoimentos que exemplifiquem algo importante‣ Anote o tempo final
Design de Interação | Karine e Leandro
Think aloud / “pensar em voz alta”‣ Objetivo: explicitar o processo mental dos participantes
‣ Vantagens‣ Ajuda a captar entendimento‣ Ajuda a captar sugestões‣ Descobrir por que os usuários estão agindo de determinada forma
‣ Desvantagem‣ Atrapalha na medição do tempo/performance
Design de Interação | Karine e Leandro
Think aloud / “pensar em voz alta”‣ Como estimular a falar?
‣ Use perguntas!‣ “Em que você está pensando?”‣ “Por que optou por clicar aí?”‣ “Por que você desistiu de ir por lá?”‣ “O que você está entendendo por (termo)?”
Design de Interação | Karine e Leandro
TO DO DONE
EM GRUPO!
definir orientador, obser
vador e
usuário; trocar usuário c
om outro
grupo; aplicar teste!
Design de Interação | Karine e Leandro
Card sorting
Design de Interação | Karine e Leandro
Card sortingComo seus usuários enxergam seu conteúdo?• compreendendo modelos mentais
Design de Interação | Karine e Leandro
Por que usar card sorting?‣ Imagine que você deseje emitir a 2ª via de uma multa e
este é o menu do site...
‣ Detran
‣ Habilitação
‣ Veículos
‣ Infrações
‣ Estatísticas
‣ Legislação
‣ Solicitação de serviços
Design de Interação | Karine e Leandro
Etapas do card sorting1. Levantamento do conteúdo (se ainda não feito)
2. Seleção dos cartões (20 a 30 cartões é suficiente)
3. Aplicação (em grupo de usuários ou individual)
4. Análise dos resultados e criação do mapa do site.
Design de Interação | Karine e Leandro
Resultado do card sorting
Design de Interação | Karine e Leandro
Exercício card sortingCada grupo deve eleger uma pessoa para ser o “moderador”, que irá explicar e observar o agrupamento feito. Deve sempre orientar ao participante a agrupar da forma que faz mais sentido para ele.
1. Agrupar os cartões (observar o porquê do agrupamento)
2. Dar nome ao grupo de cartões
3. Apresentação dos resultados e do que foi observado
Participantes: na hora de agrupar, pensar sempre em “se eu estivesse procurando este assunto no site, onde ele estaria, perto de qual outro assunto”
Design de Interação | Karine e Leandro
Card sorting onlinehttp://websort.net/
http://www.optimalworkshop.com/optimalsort.htm
Design de Interação | Karine e Leandro
Trabalho individualEscolha um produto interativo (ex.: um celular, um aplicativo de iPhone, um software etc) e identifique os componentes da interação, respondendo: 1. Quem são os possíveis usuários deste produto? (pense em diferentes públicos)2. O que estes usuários podem fazer no produto? (liste as tarefas)3. Em qual ambiente ele é usado? E como este ambiente pode afetar a interação?4. Descreva a interface do produto, os elementos e recursos de design usados. 5. Quais elementos desta interface tornam o uso mais agradável?6. Quais elementos desta interface podem prejudicar a interação?
Prazo de entrega: 06/01/12 enviar para [email protected] e [email protected]ão esquecer de colocar o produto escolhido e fotos de demonstração.Ilustrar com imagens, fotos, tabelas etc.
50 pts