Design de Interação parte II

Design de Interação | Karine e Leandro

Design de InteraçãoKarine Drumond e Leandro Alves

Técnica de modelagem

personas ágeis

Ciclo de vida ágil

Personas são modelos descritivos de usuários.

exemplo de persona tradicional

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.

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

Ciclo de vida ágil

São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a

comunicação de informações.

Ciclo de vida ágil

Boas personas destacam características relevantes das menos relevantes.

Evidenciam informações, não apenas dados.

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

Ciclo de vida ágil

1. Não são estereótipos

2. Não são segmentos de mercado:

MKT = venda / Design = uso

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?

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?

Como criar personas

Ciclo de vida ágil

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?

Ciclo de vida ágil

1.Gourmets,

2.Viajantes,

3.Namorados...

(Uma boa ideia é focar em papéis)

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?

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:

Roberto, 42 anos, Jornalista Saulinho, 22 anos, cursa LetrasMochileiro sazonal

Júlia, 16 anos, estudante, twiteira

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)

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)

usuári

não p

Sugestão de PattonNome, Idade Papel

descrição, frase emblemática

Tarefas no sistema para necessidadesNecessidades no mundo real

EM GRUPO!

1) Criar 3 personas para

seu produto

2) Escolher uma como focal

3) Montar apresentaçã

o de 5’

TO DO DONE

3o passo: Determinar usuários focais

Personas ágeis

Ciclo de vida do produto

pesquisa des

prototipação

validação

Questionários e entrevistas

personas

Benchm

arking

prototipação

Prototipaçãoquebrando ovos para fazer omeletes

Protótipo = modelo~

São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a

comunicação de informações.

lembrando...

Podem ser de baixa ou alta resoluçãoBaixa: Para explorar ideias, conceitos, fluxos

Alta: para validar decisões pontuais

“Devemos criar exatamente quanta documentação necessitamos para executar bem um projeto, e não mais.”

-Dan Saffer

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

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”

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.

TO DO DONE

EM GRUPO!

Criar um cenário (primeiro uso ou

tarefa chave) e aplicá-

lo em sua

Persona Focal.

Storyboards

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

complexas

Storyboards• Imagens + legendas

• Ilustram fluxos, momentos chave

• Casos de uso

• Mostram ambientes e contextos

• Complementam wireframes

TO DO DONE

EM GRUPO!

Criar um storyboard para o

cenário criado.

Task flows• Fluxos são tão importantes quanto telas

• Representam as possibilidades de navegação no sistema

diagrama de fluxo

Task flowsdiagrama de fluxo

FFFFFFFFFFFFFFFFFFFFFFFFUUUUUUUUUUUUUU

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

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

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

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

TO DO DONE

EM SUBGRUPO!

definir fluxo da tarefa

principal (e

mais, se der tempo) consider

os casos de uso.

Rascunhos

Rascunhos• Ideias primárias, generalistas, fluxos.

• São feios! estimulam a discussão sobre função e uso

Wireframes

Wireframesprotótipos estruturais do sistema

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)

Podem ser usados para validar ideias

Podem ser usados para validar ideiasPodem ser usados para testes com usuários

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:

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

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

Prototipando e testando low fi

wireouts

layouts

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

Ciclo de vida do produto

pesquisa des

prototipação

validação

Questionários e entrevistas

personas

Benchm

arking

prototipação

testes

Teste com usuários

Teste de usabilidade‣ Observação de usuários realizando tarefas

importantes no produto para entender padrão de uso e problemas no produto.

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)

Tipos de testes

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

Tipos de testes

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

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

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.

Etapas1.Planejamento

2.Recrutamento

3.Aplicação

4.Análise

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

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?

TO DO DONE

EM GRUPO!

determinar os objetivos do te

do produto escolhido

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

TO DO DONE

EM GRUPO!

determinar as métricas do teste

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.

3 - Definir perfil de participantes

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.

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)

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

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?

TO DO DONE

EM GRUPO!

definir tarefas e cenár

EM GRUPO!definir passos e tempo das tarefas (se relevante)

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

TO DO DONE

EM GRUPO!

criar o roteiro do teste

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)

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)

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

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)

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

Como conduzir os testes?

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

Como conduzir os testes?

Usuário comenta: “Mas isso não é inútil?”Resposta inadequada: "Não."

Resposta adequada: "Por que você acha isso?"

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

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

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

TO DO DONE

EM GRUPO!

definir orientador, obser

vador e

usuário; trocar usuário c

om outro

grupo; aplicar teste!

Card sorting

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

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

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.

Resultado do card sorting

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”

Card sorting onlinehttp://websort.net/

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

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 lbalves@gmail.com e karinedrumond@gmail.comNão esquecer de colocar o produto escolhido e fotos de demonstração.Ilustrar com imagens, fotos, tabelas etc.

50 pts

Design de Interação parte II

Design

Transcript of Design de Interação parte II

Slides baseados no livro: DESIGN DE INTERAÇÃO Além da Interação Homem-Computador Jennifer Preece Yvonne Rogers Helen Sharp DESIGN DE INTERAÇÃO Além da.

Interação Humano Computador Capítulo 9 - Design

Design Interação: por um Design Livre

Curso de Design Interação - parte 05 - Mobilidade e Comunicação Pervasiva

Introdução ao Design de Interação

Design de interação e robótica.

Palestra - Design de interação

O Diferencial do Design de Interação

Metodologias de Design de Interação

Aplicações do design de interação

Curso de Design Interação - parte 02

Design de interação e design social

Semiotica aplicada ao Design de Interação

Design de interação ecológico

Design de Interação - Parte 01

Design de Interação: Além das interfaces

Trabaho design de interação

O design de interação dos equipamentos informatizados · O Design de Interação dos Equipamentos Informatizados 6 ISHISAKI, J. M. O design de interação dos equipamentos informatizados:

Design de Interação Afetivo

Design de Interação - Livro