design de interação parte ii

113
Design de Interação | Karine e Leandro Design de Interação Karine Drumond e Leandro Alves

Upload: karine-drumond

Post on 19-May-2015

1.311 views

Category:

Design


1 download

DESCRIPTION

Aula lecionada por Karine Drumond e Leandro Alves em 2011 na pós em Marketing Digital. Belo Horizonte.

TRANSCRIPT

Page 1: Design de Interação parte II

Design de Interação | Karine e Leandro

Design de InteraçãoKarine Drumond e Leandro Alves

Page 2: Design de Interação parte II

Design de Interação | Karine e Leandro

Técnica de modelagem

personas ágeis

Page 3: Design de Interação parte II

Design de Interação | Karine e Leandro

Ciclo de vida ágil

Personas são modelos descritivos de usuários.

Page 4: Design de Interação parte II

Design de Interação | Karine e Leandro

exemplo de persona tradicional

Page 5: Design de Interação parte II

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.

Page 6: Design de Interação parte II

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

Page 7: Design de Interação parte II

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.

Page 8: Design de Interação parte II

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.

Page 9: Design de Interação parte II

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

Page 10: Design de Interação parte II

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

Page 11: Design de Interação parte II

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?

Page 12: Design de Interação parte II

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?

Page 13: Design de Interação parte II

Design de Interação | Karine e Leandro

Como criar personas

Page 14: Design de Interação parte II

Design de Interação | Karine e Leandro

Ciclo de vida ágil

1o passo: Determinar tipos de usuários

Page 15: Design de Interação parte II

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?

Page 16: Design de Interação parte II

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

Page 17: Design de Interação parte II

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?

Page 18: Design de Interação parte II

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:

Page 19: Design de Interação parte II

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

Page 20: Design de Interação parte II

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)

Page 21: Design de Interação parte II

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

Page 22: Design de Interação parte II

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

Page 23: Design de Interação parte II

Design de Interação | Karine e Leandro

Page 24: Design de Interação parte II

Design de Interação | Karine e Leandro

Page 25: Design de Interação parte II

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

Page 26: Design de Interação parte II

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

Page 27: Design de Interação parte II

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

Page 28: Design de Interação parte II

Design de Interação | Karine e Leandro

Prototipaçãoquebrando ovos para fazer omeletes

Page 29: Design de Interação parte II

Design de Interação | Karine e Leandro

Protótipo = modelo~

Page 30: Design de Interação parte II

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...

Page 31: Design de Interação parte II

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

Page 32: Design de Interação parte II

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

Page 33: Design de Interação parte II

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

Page 34: Design de Interação parte II

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”

Page 35: Design de Interação parte II

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.

Page 36: Design de Interação parte II

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.

Page 37: Design de Interação parte II

Storyboards

Design de Interação | Karine e Leandro

Page 38: Design de Interação parte II

StoryboardsTécnica da publicidade, HQs e cinema, que ilustra interações

complexas

Design de Interação | Karine e Leandro

Page 39: Design de Interação parte II

Storyboards• Imagens + legendas

• Ilustram fluxos, momentos chave

• Casos de uso

• Mostram ambientes e contextos

• Complementam wireframes

Design de Interação | Karine e Leandro

Page 40: Design de Interação parte II

Design de Interação | Karine e Leandro

TO DO DONE

EM GRUPO!

Criar um storyboard para o

cenário criado.

Page 41: Design de Interação parte II

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

Page 42: Design de Interação parte II

Design de Interação | Karine e Leandro

Task flowsdiagrama de fluxo

Page 43: Design de Interação parte II

Design de Interação | Karine e Leandro

FFFFFFFFFFFFFFFFFFFFFFFFUUUUUUUUUUUUUU

Page 44: Design de Interação parte II

Design de Interação | Karine e Leandro

Fluxos são interações de um indivíduo, elementos / escolhas

Task flowsdiagrama de fluxo

Page 45: Design de Interação parte II

Design de Interação | Karine e Leandro

Exemplo: Adicionando um item na TO-DO do Basecamp.

Task flowsdiagrama de fluxo

Page 46: Design de Interação parte II

Design de Interação | Karine e Leandro

• É rápido de fazer e simples de enxergar.

Task flowsdiagrama de fluxo

Page 47: Design de Interação parte II

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

Page 48: Design de Interação parte II

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.

Page 49: Design de Interação parte II

Design de Interação | Karine e Leandro

Rascunhos

Page 50: Design de Interação parte II

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

Page 51: Design de Interação parte II

Design de Interação | Karine e Leandro

Wireframes

Page 52: Design de Interação parte II

Design de Interação | Karine e Leandro

Wireframesprotótipos estruturais do sistema

Page 53: Design de Interação parte II

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

Page 54: Design de Interação parte II

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

Page 55: Design de Interação parte II

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

Page 56: Design de Interação parte II

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:

Page 57: Design de Interação parte II

Design de Interação | Karine e Leandro

Page 58: Design de Interação parte II

Design de Interação | Karine e Leandro

Page 59: Design de Interação parte II

Design de Interação | Karine e Leandro

Page 60: Design de Interação parte II

Design de Interação | Karine e Leandro

Page 61: Design de Interação parte II

Design de Interação | Karine e Leandro

Page 62: Design de Interação parte II

Design de Interação | Karine e Leandro

Page 63: Design de Interação parte II

papel=desapegoDesign de Interação | Karine e Leandro

Page 64: Design de Interação parte II

Design de Interação | Karine e Leandro

Page 65: Design de Interação parte II

Design de Interação | Karine e Leandro

Page 66: Design de Interação parte II

Design de Interação | Karine e Leandro

http://www.youtube.com/watch?v=k9mTvt0LXgk

Prototipando e testando low fi

Page 67: Design de Interação parte II

Design de Interação | Karine e Leandro

wireouts

Page 68: Design de Interação parte II

Design de Interação | Karine e Leandro

layouts

Page 69: Design de Interação parte II

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

Page 70: Design de Interação parte II

Design de Interação | Karine e Leandro

Page 71: Design de Interação parte II

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

Page 72: Design de Interação parte II

Design de Interação | Karine e Leandro

Teste com usuários

Page 73: Design de Interação parte II

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.

Page 74: Design de Interação parte II

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)

Page 75: Design de Interação parte II

Design de Interação | Karine e Leandro

Tipos de testes

‣ Teste em campo (menos formal) ‣ Teste em laboratório (mais controlado)

Page 76: Design de Interação parte II

Design de Interação | Karine e Leandro

Tipos de testes

Page 77: Design de Interação parte II

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

Page 78: Design de Interação parte II

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

Page 79: Design de Interação parte II

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.

Page 80: Design de Interação parte II

Design de Interação | Karine e Leandro

Etapas1.Planejamento

2.Recrutamento

3.Aplicação

4.Análise

Page 81: Design de Interação parte II

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

Page 82: Design de Interação parte II

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?

Page 83: Design de Interação parte II

Design de Interação | Karine e Leandro

TO DO DONE

EM GRUPO!

determinar os objetivos do te

ste

do produto escolhido

Page 84: Design de Interação parte II

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

Page 85: Design de Interação parte II

Design de Interação | Karine e Leandro

TO DO DONE

EM GRUPO!

determinar as métricas do teste

Page 86: Design de Interação parte II

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.

Page 87: Design de Interação parte II

Design de Interação | Karine e Leandro

3 - Definir perfil de participantes

Page 88: Design de Interação parte II

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.

Page 89: Design de Interação parte II

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)

Page 90: Design de Interação parte II

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

Page 91: Design de Interação parte II

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?

Page 92: Design de Interação parte II

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)

Page 93: Design de Interação parte II

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

Page 94: Design de Interação parte II

Design de Interação | Karine e Leandro

TO DO DONE

EM GRUPO!

criar o roteiro do teste

Page 95: Design de Interação parte II

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)

Page 96: Design de Interação parte II

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)

Page 97: Design de Interação parte II

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

Page 98: Design de Interação parte II

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)

Page 99: Design de Interação parte II

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

Page 100: Design de Interação parte II

Design de Interação | Karine e Leandro

Como conduzir os testes?

Usuário comenta: “Mas isso não é inútil?”

Page 101: Design de Interação parte II

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?"

Page 102: Design de Interação parte II

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

Page 103: Design de Interação parte II

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

Page 104: Design de Interação parte II

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)?”

Page 105: Design de Interação parte II

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!

Page 106: Design de Interação parte II

Design de Interação | Karine e Leandro

Card sorting

Page 107: Design de Interação parte II

Design de Interação | Karine e Leandro

Card sortingComo seus usuários enxergam seu conteúdo?• compreendendo modelos mentais

Page 108: Design de Interação parte II

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

Page 109: Design de Interação parte II

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.

Page 110: Design de Interação parte II

Design de Interação | Karine e Leandro

Resultado do card sorting

Page 111: Design de Interação parte II

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”

Page 112: Design de Interação parte II

Design de Interação | Karine e Leandro

Card sorting onlinehttp://websort.net/

http://www.optimalworkshop.com/optimalsort.htm

Page 113: Design de Interação parte II

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