Design de Interação

75
Design de Interação Professora: Adriana Chammas Alunos: Fernanda Sarmento e Lucien Evangelista PUC - Rio | Pontifícia Universidade Católica do Rio de Janeiro Pós-graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação Março/2016

Transcript of Design de Interação

Page 1: Design de Interação

Design de Interação

Professora: Adriana Chammas

Alunos: Fernanda Sarmento e Lucien Evangelista

PUC - Rio | Pontifícia Universidade Católica do Rio de Janeiro

Pós-graduação em Ergodesign de Interfaces: Usabilidade e Arquitetura de Informação

Março/2016

Page 2: Design de Interação

Design de Interação“Como as outras disciplinas de design, o design de interação se preocupa com a forma. Entretanto, o design de

interação se preocupa primordialmente com algo que as disciplinas tradicionais do design nao se preocupam:

comportamento.

[…]

O design de interacao é também um empreendimento humano. Preocupa-se principalmente em satisfazer as

necessidades e os desejos das pessoas que irão interagir com o produto ou serviço"

COOPER, 2007, p.xxvii - xxviii

Traduzido pelos autores de: COOPER, Alan. About Face 3: The Essentials of Interaction Design 3rd Edition. Willey Publishing Inc.: Indianápolis, 2007.

Page 3: Design de Interação

Trabalho 1Individual em sala de aula

Page 4: Design de Interação

T1: a atividade- Dê três exemplos de gatilhos externos em produtos (podem ser produtos diferentes).

- Imagine outras três formas de gatilho para cada exemplo.

- Que investimentos o produto exige do user? Que recompensas ele oferece? Como?

- Para cada um dos produtos que escolheu, explique:

- Quais hábitos o modelo de negócio requer?

- Que problemas o user tenta resolver com o produto?

- Como os users resolvem o problema?

- Isso era um problema antes do produto existir?

- Qual a frequencia de uso do produto?

- Que comportamento do user o produto pretende transformar em um hábito?

Page 5: Design de Interação

T1. Fernanda SarmentoLoja online da Cantão, Jogo Subway Surfers e LinkedIn App

Page 6: Design de Interação

Produto 1

Loja online da Cantão

Page 7: Design de Interação

Produto 1- Gatilho: Publicidade Online (incessante e constante)

- Possiveis gatilhos (pelo menos 3):

- Hoje você consegue promover reportagens para uma lista de remarketing (com a mesma tecnologia

da publicidade incessante acima). A ideia seria passar a impactar a usuária com reportagens sobre

como o item desejado (e não comprado) está na moda.

- A própria publicidade exibida poderia variar as fotos (hoje não é feito) com fotos não apenas dos

produtos, mas com modelos mostrando possíveis usos do item.

- Estímulo ao login com redes sociais e mostrar quem mais dos meus amigos comprou essa bota para

que eu possa perguntar se está satisfeito.

- SMS de lembrete (caso já tenha realizado compra anteriormente e cadastrado meu telefone).

- Permitir cadastro de “avise-me quando estiver em promoção”.

Page 8: Design de Interação

Produto 1- Que investimentos o produto exige do user? Que recompensas ele oferece? Como?

- Investimentos:

- Dinheiro (bastante dinheiro)

- Internet/Energia

- Tempo

- Confiança (comprar sem experimentar)

- Minha imagem/Minha reputação (quando for usar um item)

- Recompensas:

- Roupas e acessórios bonitos entregues conforme o combinado

- Status

Page 9: Design de Interação

Produto 1- Para cada um dos produtos que escolheu, explique:

- Quais hábitos o modelo de negócio requer?

- Compras regulares de roupa através da internet

- Busca de tendências de moda

- Que problemas o user tenta resolver com o produto?

- Encontrar o tamanho

- Aproveitar ofertas

- Comprar com praticidade

- Consumir de maneira rápida

Page 10: Design de Interação

Produto 1- Como os users resolvem o problema?

- Acessando o site e comprando ou indo até a loja

- Isso era um problema antes do produto existir?

- Sim, já era antes de o produto existir

- Qual a frequencia de uso do produto?

- Depende da disponibilidade financeira do usuários, promoções, novas coleções, etc. No meu caso

visito a loja semanalmente e faço uma compra bimestralmente.

- Que comportamento do user o produto pretende transformar em um hábito?

- Comprar roupas e acessórios da Cantão.

Page 11: Design de Interação

Produto 3

LinkedIn App

Page 12: Design de Interação

Produto 3- Gatilho: Notificações no celular

- Possiveis gatilhos (pelo menos 3):

- Outcall (ligação com mensagem de voz automática padrão) avisando de novas oportunidades;

- SMS notificando novas mensagens - já aparecer parte da mensagem;

- Connect com a agenda do celular de forma a aparecer a foto sempre com a marca do LinkedIn do

lado.

Page 13: Design de Interação

Produto 3- Que investimentos o produto exige do user? Que recompensas ele oferece? Como?

- Investimentos:

- Tempo

- Paciência para buscar, ler, atualizar perfil, etc.

- Internet/Energia

- Recompensas:

- Acesso a artigos

- Acesso a oportunidades de emprego

- Currículo público e com visibilidade

- Facilitar a manutenção de network com antigos parceiros de trabalho

Page 14: Design de Interação

Produto 3- Para cada um dos produtos que escolheu, explique:

- Quais hábitos o modelo de negócio requer?

- Atividade profissional de leitura ou redação de artigos, participação em fóruns, etc.

- Atualização de perfil;

- Troca de mensagens.

- Que problemas o user tenta resolver com o produto?

- Dificuldade de manter networking;

- Dificuldade de conseguir emprego;

- Dificuldade em encontrar candidatos adequados sem ficar refém das empresas de

headhunting.

Page 15: Design de Interação

Produto 3- Como os users resolvem o problema?

- Mantendo seu perfil atualizado e realizando buscas na plataforma.

- Isso era um problema antes do produto existir?

- Sim, já era antes de o produto exisir.

- Qual a frequencia de uso do produto?

- Depende da disponibilidade de tempo do usuário. De um modo geral, diária ou pelo menos

semanal.

- Que comportamento do user o produto pretende transformar em um hábito?

- Ler e publicar artigos, falar com sua rede de parceiros profissionais, etc.

Page 16: Design de Interação

T1. Lucien EvangelistaDuolingo, site Jaguar e 365 scores

Page 17: Design de Interação

A atividade- Dê três exemplos de gatilhos externos em produtos (podem ser produtos diferentes).

- Imagine outras três formas de gatilho para cada exemplo.

- Que investimentos o produto exige do user? Que recompensas ele oferece? Como?

- Para cada um dos produtos que escolheu, explique:

- Quais hábitos o modelo de negócio requer?

- Que problemas o user tenta resolver com o produto?

- Como os users resolvem o problema?

- Isso era um problema antes do produto existir?

- Qual a frequencia de uso do produto?

- Que comportamento do user o produto pretende transformar em um hábito?

Page 18: Design de Interação

Produto 1

Duolingo

Page 19: Design de Interação

Produto 1- Gatilho: e-mail para fazer teste de fluência na língua.

- Possiveis gatilhos:

- Ações em cursos de inglês oferecendo o serviço como uma forma de estudo complementar da

língua;

- Permitir que o usuário insira a informação de quais idiomas deseja aprender. No momento que eles

estiverem disponíveis, mandar notificações pelo e app e via e-mail;

- Publicidade em lojas de cds internacionais. Instigar a vontade de entender as músicas dos seus

artistas favoritos. QR code na embalagem dos cds.

Page 20: Design de Interação

Produto 1- Que investimentos o produto exige do user? Que recompensas ele oferece? Como?

- Investimentos:

- Espaço no celular

- Tempo

- Internet

- Dedicação

- Recompensas:

- Aprendizado de uma nova língua - Através das lições;

- Inclusão social e no mercado de trabalho - Saber inglês hoje se tornou pré-requisito;

- Satisfação de dominar uma nova língua.

Page 21: Design de Interação

Produto 1- Para cada um dos produtos que escolheu, explique:

- Quais hábitos o modelo de negócio requer?

- Acesso constante ao aplicativo;

- Busca pelo conhecimento/aprimoramento de novos idiomas;

- Que problemas o user tenta resolver com o produto?

- Facilidade e rapidez ao estudar idiomas;

- Acessibilidade, como o aplicativo é grátis qualquer pessoa que tenha um smartphone pode usar;

- Troca de informações, o serviço disponibiliza um forum online onde é possível tirar dúvidas

de idiomas como o Esperanto.

Page 22: Design de Interação

Produto 1- Como os users resolvem o problema?

- Usando o serviço ou se inscrevendo em cursos.

- Isso era um problema antes do produto existir?

- Sim, nem todo mundo tinha condições financeiras de se matricular em um curso presencial. E se

estivessem matriculados, não teriam acesso à todo conteúdo pelo celular.

- Qual a frequencia de uso do produto?

- Depende da disponibilidade de tempo e motivação do usuário, mas geralmente é diário.

- Que comportamento do user o produto pretende transformar em um hábito?

- A motivação de aprender novas línguas.

Page 23: Design de Interação

Produto 2

Site Jaguar

Page 24: Design de Interação

Produto 2- Gatilho: publicidade dentro do instagram.

- Possiveis gatilhos:

- Publicidade dentro de jogos de corrida;

- Envio de brindes através de parcerias com revistas voltadas ao público automobilístico;

- Permitir que o usuário favorite seus carros no site para quando eles estiverem em promoção receber

e-mails ou sms avisando.

Page 25: Design de Interação

Produto 2- Que investimentos o produto exige do user? Que recompensas ele oferece? Como?

- Investimentos:

- Dinheiro

- Tempo

- Internet

- Atenção

- Recompensas:

- Automóvel

- Status - Andar num Jaguar é uma demonstração de status.

- Satisfação - Satisfação de andar num Jaguar.

- Conforto

- Inovação - A Jaguar sempre oferece inovação aos seus clientes, tanto em design quanto em tecnologia.

Page 26: Design de Interação

Produto 2- Para cada um dos produtos que escolheu, explique:

- Quais hábitos o modelo de negócio requer?

- Compra de automóveis em curtos períodos de tempo;

- Busca por carros que ofereçam mais do que locomoção;

- Que problemas o user tenta resolver com o produto?

- Facilitar o acesso à informações como: o preço e facilidades para pagamento / características e

features do carro / imagens detalhadas do automóvel;

Page 27: Design de Interação

Produto 2- Como os users resolvem o problema?

- Acessando o site ou indo até a loja.

- Isso era um problema antes do produto existir?

- Sim, os usuários só conseguiriam saber as informações indo na loja.

- Qual a frequencia de uso do produto?

- Depende da disponibilidade financeira ou curiosidade dos usuários. Pode ser semanalmente ou até

anualmente.

- Que comportamento do user o produto pretende transformar em um hábito?

- A compra de carros da Jaguar.

Page 28: Design de Interação

Produto 3

365Scores

Page 29: Design de Interação

Produto 3- Gatilho: notificação sobre o resultado do jogo.

- Possiveis gatilhos:

- Parcerias com blogs esportivos;

- Ações em jogos de futebol oferecendo período de teste gratuito na versão premium;

- Parcerias com lojas de artigos esportivos (online ou não) oferecendo brindes ao comprar.

Page 30: Design de Interação

Produto 3- Que investimentos o produto exige do user? Que recompensas ele oferece? Como?

- Investimentos:

- Espaço no celular

- Internet

- Interesse em algum esporte

- Cadastro em rede social

- Recompensas:

- Agregador de diversos tipos de informações dos times cadastrados - Através de notificações ou

abrindo o aplicativo;

- Socialização - Ficar por dentro das novidades esportivas e poder conversar conversar com os

amigos;

- Prazer em acompanhar tudo sobre os times que o usuário mais gosta.

Page 31: Design de Interação

Produto 3- Para cada um dos produtos que escolheu, explique:

- Quais hábitos o modelo de negócio requer?

- Acesso constante ao aplicativo;

- Interesse em informações sobre esportes;

- Que problemas o user tenta resolver com o produto?

- Rapidez e facilidade em encontrar informações esportivas em tempo real;

- Facilidade no compartilhamento de informações. O aplicativo tem diversas opções de

compartilhamento, como facebook e whatsapp.

Page 32: Design de Interação

Produto 3- Como os users resolvem o problema?

- Usando o aplicativo ou acessando diversos sites para conseguir informações diferentes.

- Isso era um problema antes do produto existir?

- Sim, não existia um agregador de informações de diversos esportes diferentes.

- Qual a frequencia de uso do produto?

- Depende da motivação do usuário, de quantos times cadastrou e frequencia de jogos, mas

geralmente diária.

- Que comportamento do user o produto pretende transformar em um hábito?

- A busca por informações esportivas.

Page 33: Design de Interação

Trabalho 2Em dupla no lar

Page 34: Design de Interação

T2: a atividade- Selecione um produto:

- Defina os requisitos;

- Determine as habilidades para solucioná-los;

- Aponte a solução dos requisitos e mostre outra forma de solucionar o problema que o produto

resolve;

- Encontre e justifique os 5 princípios essenciais da interface (consistência), previsibilidade,

visibilidade, learnability e feedback;

- Defina e justifique como o produto escolhido motiva o usuário.

- A interface provoca o flow? Explique.

- Como o Design da interface é conjugada com seu target - em termos de Design, timing, abstração,

metáforas, etc? Explique.

- Em termos de design de interação, o que essa interface tem de melhor? E de pior?

Page 35: Design de Interação

O produto

Site Trip Advisor

Page 36: Design de Interação

T2: a atividade- Selecione um produto:

- Defina os requisitos;

- Determine as habilidades para solucioná-los;

- Aponte a solução dos requisitos e mostre outra forma de solucionar o problema que o produto

resolve;

- Encontre e justifique os 5 princípios essenciais da interface (consistência), previsibilidade,

visibilidade, learnability e feedback;

- Defina e justifique como o produto escolhido motiva o usuário.

- A interface provoca o flow? Explique.

- Como o Design da interface é conjugada com seu target - em termos de Design, timing, abstração,

metáforas, etc? Explique.

- Em termos de design de interação, o que essa interface tem de melhor? E de pior?

Page 37: Design de Interação

Os requisitos: framework para o trabalho

Adaptado de: COOPER, Alan. About Face 3: The Essentials of Interaction Design 3rd Edition. Willey Publishing Inc.: Indianápolis, 2007.

Page 38: Design de Interação

Personas: divisão geralProficiência em planejar

Desejo em planejar

Geraldo

Tereza César

Verônica Viagem como realização de um sonho/desejo+ aquisição de conhecimento/cultura

Viagem como uma conquista: financeirae de independência

Viagem como algo social: desde o planejamento até o

compartilhamento da experiência

Viagem como um momento

para não se preocupar

As personas acima são frutos do trabalho de Análise da Tarefa.

Page 39: Design de Interação

Tereza é uma professora divorciada com uma agenda agitada, sempre fazendo passeios e encontrando pessoas, ela prefere o contato ao vivo!

Apesar de possuir um iphone 6S não é muito ligada em aplicativos e já baixou alguns por indicação de amigos, mas usa apenas o “app de pedir taxi” e o whatsapp.

Tereza também adora viajar, mas detesta toda a burocracia envolvida. Por isso, fica sempre à disposição para acompanhar amigos e parentes em suas viagens… desde que eles planejem! Quando quer muito fazer uma viagem e não tem companhia, procura uma agência de viagens, melhor ainda se for com excursão!

Planejar uma viagem para Tereza equivale a: 1) pedir alguém que planeje por ela2) começar a aproveitar!

Tereza - 57 anos, professoraViagem como um momento para não se preocupar

QUOTES"Na verdade eu não tenho muito objetivo, não. É sempre uma grande surpresa para mim."

"Se existe a possibilidade de comprar pacotes prontos com todos os detalhes já pensados e programados, por que ainda tem gente que prefere ficar gastando horas e horas pesquisando roteiros e tudo o mais? Eu não entendo."

As personas acima são frutos do trabalho de Análise da Tarefa.

Page 40: Design de Interação

Geraldo é ultra conectado e vive no Facebook no seu iPhone 5C. Posta fotos, comenta, interage com todos. Ele reconhece que por vezes se preocupa mais em atualizar seu status do que viver o momento, mas fica bem assim. Ele se inspira ao ver o que as pessoas fazem e espera fazer o mesmo por elas, por isso, prepara com carinho as postagens.

A situação econômica de Geraldo não é ruim, mas não permite muitas estripolias. Vive na correria de trabalhar até tarde para bater metas ao mesmo tempo que dá duro no cursinho para passar para um concurso público e conseguir uma vida mais tranquila.

Geraldo gosta de viajar com os amigos, e, apesar de manjar tudo de internet e sempre conseguir os melhores negócios nas compras de passagem, não tem muita paciência para planejar os mínimo detalhes da viagem. Por isso, a regra é clara: olha alguns roteiros já prontos, grava algumas coisas na cabeça e vai! Vai e posta muita foto, afinal, a viagem não vale se não compartilhar nada, né?

Geraldo - 30 anos, vendedorViagem como algo social: desde o planejamento até o compartilhamento da

experiência

QUOTES“Lugar para viajar? Ah, conversa com amigos… ou até uma foto no Facebook. Às vezes eu vejo um lugar bonito e vou.”

"Eu leio muito comentário. Até porque depois eu comento. Eu viajo e comento."

As personas acima são frutos do trabalho de Análise da Tarefa.

Page 41: Design de Interação

Verônica está fazendo doutorado e é sócia de um prestigioso escritório de arquitetura. Sua maior paixão é viajar, por isso tem uma lista de próximos lugares para os quais deseja ir, que alimenta com algumas informações relevantes que pesquisa em seu tempo livre direto do seu Samsung Galaxy.

Quando efetivamente decide viajar, o processo de planejamento é extenso: tudo é colocado em seu aplicativo de viagens, com cálculos de rota por bairro… é uma loucura! Ela sai do Brasil sabendo até o nome das ruas que ela vai precisar andar no dia seguinte!

Planejar, de certa forma, faz parte da viagem e já é uma forma de ganhar cultura e de ficar mais próxima desse momento “off-work”.

Verônica - 36 anos, arquitetaViagem como realização de um sonho/desejo + aquisição de

conhecimento/cultura

QUOTES"Eu primeiro decido o lugar, nunca fiquei atrás de promoção não."

"Eu gosto de poder ver coisas sobre as quais eu só li. "

"Viajar me faz me sentir mais solta... mais cidadã do mundo, sabe?"

As personas acima são frutos do trabalho de Análise da Tarefa.

Page 42: Design de Interação

César é casado há 33 anos com sua esposa e possui dois filhos que não moram mais com eles. Não ter os filhos em casa é um problema até hoje, pois sempre que César precisa de ajuda com o computador - e não são raras as vezes - seus filhos precisam ir até a casa para tentar resolver.

Mesmo com toda a dificuldade, César é obstinado e quer aprender a mexer melhor no computador e em seu Moto G e a usar bem a internet como um todo. Um dos principais motivos para isso é poder planejar melhor suas viagens anuais a congressos de psicologia e ver se consegue fazê-las com um orçamento menor.

Para César, sempre que planeja sua viagem e dá “tudo certo” ele se orgulha muito do percurso de aprendizado que percorreu.

César - 62 anos, psicólogoViagem como uma conquista: financeira e de independência

QUOTES

"Apesar de estar na era da tecnologia e usar ela… Papel para mim ainda é o meu certificado.. [...] meu negócio é papel."

"Hoje não tem muito mistério. Com a internet a gente acaba achando tudo."

As personas acima são frutos do trabalho de Análise da Tarefa.

Page 43: Design de Interação

Personas: insumos para requisitosPersona Objetivos de experiência

(visceral)Objetivos finais

(comportamental)Objetivos de vida

(reflexivo)Tipo de persona

Tereza Não deseja ter nenhuma

experiência com a interface

Deseja ter sua viagem planejada

por outro.

Curtir a vida, seus

familiares e seus amigos

Negativa

Geraldo Sentir-se esperto;

Sentir-se influenciador.

Fazer um bom negócio;

Ajudar outras pessoas;

Divulgar seus feitos.

Aproveitar

oportunidades da vida e

ser popular.

Secundária

Verônica Sentir-se com as

habilidades expandidas.

Conseguir planejar a melhor

viagem possível com o tempo e o

orçamento disponíveis.

Aprender e explorar o

mundo.

Secundária

César Sentir-se capaz. Conseguir planejar uma viagem

sem ajuda de terceiros.

Ascender socialmente. Primária

Inspirado pela proposta de: COOPER, Alan. About Face 3: The Essentials of Interaction Design 3rd Edition. Willey Publishing Inc.: Indianápolis, 2007.

Page 44: Design de Interação

Personas: insumos para requisitosPersona Objetivos de experiência

(visceral)Objetivos finais

(comportamental)Objetivos de vida

(reflexivo)Tipo de persona

Tereza Não deseja ter nenhuma

experiência com a interface

Deseja ter sua viagem planejada

por outro.

Curtir a vida, seus

familiares e seus amigos

Negativa

Geraldo Sentir-se esperto;

Sentir-se influenciador.

Fazer um bom negócio;

Ajudar outras pessoas;

Divulgar seus feitos.

Aproveitar

oportunidades da vida e

ser popular.

Secundária

Verônica Sentir-se com as

habilidades expandidas.

Conseguir planejar a melhor

viagem possível com o tempo e o

orçamento disponíveis.

Aprender e explorar o

mundo.

Secundária

César Sentir-se capaz. Conseguir planejar uma viagem

sem ajuda de terceiros.

Ascender socialmente. Primária

Inspirado pela proposta de: COOPER, Alan. About Face 3: The Essentials of Interaction Design 3rd Edition. Willey Publishing Inc.: Indianápolis, 2007.

Page 45: Design de Interação

Os requisitos - step by step

Fonte: COOPER, Alan. About Face 3: The Essentials of Interaction Design 3rd Edition. Willey Publishing Inc.: Indianápolis, 2007.

1) Criar uma definição de problema e visão

2) Brainstorm (não será exibido nesta apresentação)

3) Identificar as expectativas das personas

4) Construir cenários de contexto (responderemos às perguntas sem redigir o cenário, pois não é a atividade

objetivo deste trabalho)

5) Identificar requisitos

Page 46: Design de Interação

Problema e VisãoProblema

O setor de turismo tem cada vez mais migrado para o ambiente online, mas nem todo o público que viaja é

proficiente na internet e acaba muitas vezes mantendo sua relação com as agências de viagem, pagando mais

caro por uma viagem que ele mesmo poderia planejar.

Visão

O site Trip Advisor posibilitará que esse público realize a tarefa de planejar sua viagem sozinho aproveitando as

melhores ofertas. Isso aumentará ainda mais o tamanho do mercado de viagens para este público e o market

share do Trip Advisor no segmento.

Page 47: Design de Interação

Identificar expectativas da personaAtitudes, experiências, aspirações e outros fatores cognitivos (culturais, ambientais, sociais) que influenciam a

expectativa da persona

- Dificuldade com computador ou inseguro em relação às suas habilidades recém adquiridas

- Acostumado a comprar viagens prontas na agência de viagem

- Relacional, gosta de contato com pessoas

- Apegado ao físico (papel, comprovantes, etc.)

Expectativas gerais e desejos em relação à experiência com o produto

- Expectativa de que será possível concluir a compra

- Desejo de que seja simples e intuitivo e não haja necessidade de acionar outras pessoas para concluir a

operação desejada

- Expectativa de que será possível planejar a experiência da viagem a partir de informações reais e

verdadeiras

Page 48: Design de Interação

Identificar expectativas da personaComportamentos que a persona espera do produto

- O site irá indicar a melhor escolha

- O site indicará se é um bom negócio

- O site será fácil de usar e saberei exatamente quais são os próximos passos

- O site cuidará adequadamente da confidencialidade dos meus dados pessoais

- O site oferecerá comprovantes das operações realizadas

O que a persona pensa em relação a elementos básicos

- N/A

Page 49: Design de Interação

Construir cenários de contextoEm qual contexto a pessoa usará o produto?

- Em casa, desktop

Será usado por muitas horas?

- Sim

A persona é frequentemente interrompida?

- Sim

Existe mais de um usuário na mesma estação de trabalho/no mesmo device?

- Sim, bastante provável (acompanhante da viagem)

Com quais outros produtos será utilizado?

- Google, sites de cias aéreas e outros sites informativos (após pesquisa google)

Quais atividades a pessoa precisa realizar para atingir seu objetivo?

- Google, sites de cias aéreas e outros sites informativos

Page 50: Design de Interação

Construir cenários de contextoQuais atividades a pessoa precisa realizar para atingir seu objetivo?

- Acessar tripadvisor.com.br > Inserir cidade de destino > Buscar hotel > Inserir dados para filtros de hoteis

> Analisar opções > Escolher hotel > Selecionar tipo de quarto > Reservar hotel > Pagar hotel. Repetir

passos similares para seleção de passagem de forma simultanea a fim de concatenar a passagem que é

possível de comprar com as datas de vôo e o horário de check in/check out com o horário do vôo. Ou

vice-versa.

Qual é o resultado esperado?

- Compra de passagem e hotel realizada com sucesso.

Qual é o nível de complexidade permitido em função da habilidade da persona e frequencia de uso?

- Com a menor complexidade possível.

Page 51: Design de Interação

Identificar os requisitos- Planejar e adquirir viagem de forma barata, simples e autônoma:

- Selecionar e adquirir reserva de hotel;

- Selecionar e adquirir reserva de vôo.

- Gerar comprovantes das operações realizadas.

Page 52: Design de Interação

T2: a atividade- Selecione um produto:

- Defina os requisitos;

- Determine as habilidades para solucioná-los;

- Aponte a solução dos requisitos e mostre outra forma de solucionar o problema que o produto

resolve;

- Encontre e justifique os 5 princípios essenciais da interface (consistência), previsibilidade,

visibilidade, learnability e feedback;

- Defina e justifique como o produto escolhido motiva o usuário.

- A interface provoca o flow? Explique.

- Como o Design da interface é conjugada com seu target - em termos de Design, timing, abstração,

metáforas, etc? Explique.

- Em termos de design de interação, o que essa interface tem de melhor? E de pior?

✔✔

Page 53: Design de Interação

Habilidades e SoluçõesRequisitos Habilidades Solução Outra forma de solucionar o problema

Selecionar e

adquirir

reserva de

hotel

Exibir hotéis a partir da seleção do

local de destino;

Prover informações sobre os hotéis

exibidos de modo a facilitar escolha;

Permitir compra no site.

Filtro por preço, categoria, rede,

serviços, proximidade do centro,

tipo de acomodação,

disponibilidade, popularidade, etc.

Exibir comentários de viajantes.

Possibilidade de pagamento com

cartão de crédito.

Permitir comparar hoteis (tabela comparativa) de

acordo com os critérios selecionados.

Sugerir hoteis com disponibilidade de acordo com côo

selecionado.

Permitir pagamento por transferência, boleto bancário

ou paypal.

Selecionar e

adquirir

reserva de

vôo.

Exibir vôo a partir da seleção do local

de destino;

Prover informações sobre os vôos

exibidos de modo a facilitar escolha;

Permitir compra no site.

Filtro por preço, escala, cias aéreas,

custo x benefício, serviço, duração,

etc.

Possibilidade de pagamento com

cartão de crédito.

Permitir comparar vôos (tabela comparativa) de

acordo com os critérios selecionados.

Sugerir vôos de acordo com hotel selecionado.

Permitir pagamento por transferência, boleto bancário

ou paypal.

Gerar

comprovantes

das operações

realizadas

Permitir impressão dos comprovantes

das compras que são realizadas.

Permite impressão e envia por e-

mail.

Disponibilizar um app no qual ficam guardados todos

os comprovantes.

Page 54: Design de Interação

T2: a atividade- Selecione um produto:

- Defina os requisitos;

- Determine as habilidades para solucioná-los;

- Aponte a solução dos requisitos e mostre outra forma de solucionar o problema que o produto

resolve;

- Encontre e justifique os 5 princípios essenciais da interface consistência, previsibilidade,

visibilidade, learnability e feedback;

- Defina e justifique como o produto escolhido motiva o usuário.

- A interface provoca o flow? Explique.

- Como o Design da interface é conjugada com seu target - em termos de Design, timing, abstração,

metáforas, etc? Explique.

- Em termos de design de interação, o que essa interface tem de melhor? E de pior?

✔✔

Page 55: Design de Interação

5 princípios essenciais da interface

Inspirado pela proposta de: http://tv.adobe.com/watch/classroom-five-essential-principles-of-interaction-design/part-1-five-essential-principles-of-interaction-design/

1) Consistência;

2) Visibilidade;

3) Previsibilidade;

4) Learnability;

5) Feedback

Page 56: Design de Interação

Consistência

Inspirado pela proposta de: http://tv.adobe.com/watch/classroom-five-essential-principles-of-interaction-design/part-1-five-essential-principles-of-interaction-design/

A consistência é a padronização de elementos

no site, esqueleto das páginas e o

posicionamento dos diversos elementos deve

ser o mesmo em todo o sistema. O site

apresenta problemas de consistência nas

imagens destacadas de algumas páginas, ela se

comporta de três maneiras diferentes.

Na imagem 1 o destaque está ocupando 90%

da largura do monitor, na 2 100% e na 3 ela

ocupa 60%. Essa falta de padronização gera

desconforto na navegabilidade do site.

1.

2.

3.

Page 57: Design de Interação

Visibilidade

Inspirado pela proposta de: http://tv.adobe.com/watch/classroom-five-essential-principles-of-interaction-design/part-1-five-essential-principles-of-interaction-design/

A descoberta de funcionalidades dentro do

site não se deve ao acaso, o usuário deve ser

capaz de deduzir uma possibilidade de

interação. O princípio de visibilidade é bem

respeitado em todo o site, o mouseover

indica ação em botões, ícones e imagem.

Assim como temos uma mudaça de cor em

todos os inputs ativos, como mostra a

imagem abaixo.

Page 58: Design de Interação

Previsibilidade

Inspirado pela proposta de: http://tv.adobe.com/watch/classroom-five-essential-principles-of-interaction-design/part-1-five-essential-principles-of-interaction-design/

Para minimizar a confusão e a frustração

dos usuários, deve-se comunicar

previamente (implícita ou

explicitamente) o que deve acontecer

depois de uma interação. Como no

exemplo ao lado, em que o call to action

tem uma seta para direita indicando que

aquele botão vai encaminhar o usuário

para uma nova página.

Page 59: Design de Interação

Learnability

Inspirado pela proposta de: http://tv.adobe.com/watch/classroom-five-essential-principles-of-interaction-design/part-1-five-essential-principles-of-interaction-design/

Learnability significa tomar vantagem da

experiência do usuário. Ou seja, é aproveitar o

aprendizado baseado na experiência em

outros sites. Baseado nisso, temos o exemplo

da navegação em abas, hoje muito presente

em aplicativos e sites pela popularização do

material design.

Page 60: Design de Interação

Feedback

Inspirado pela proposta de: http://tv.adobe.com/watch/classroom-five-essential-principles-of-interaction-design/part-1-five-essential-principles-of-interaction-design/

O feedback é o retorno de uma ação

tomada pelo usuário e tem como

objetivo complementar a sua

experiência. Na imagem ao lado, após

escolher o valor e a categoria do

hotel, o sistema dá um retorno

facilitando uma ação seguinte no

filtro de busca.

1.

2.

Page 61: Design de Interação

T2: a atividade- Selecione um produto:

- Defina os requisitos;

- Determine as habilidades para solucioná-los;

- Aponte a solução dos requisitos e mostre outra forma de solucionar o problema que o produto

resolve;

- Encontre e justifique os 5 princípios essenciais da interface consistência, previsibilidade,

visibilidade, learnability e feedback;

- Defina e justifique como o produto escolhido motiva o usuário.

- A interface provoca o flow? Explique.

- Como o Design da interface é conjugada com seu target - em termos de Design, timing, abstração,

metáforas, etc? Explique.

- Em termos de design de interação, o que essa interface tem de melhor? E de pior?

✔✔

Page 62: Design de Interação

Como o produto escolhido motiva o usuário?Embora tenhamos identificado alguns dos principios fundamentais, acreditamos que esta e uma interface que

não motiva muito seus usuarios exceto por triggers comuns comerciais (e não de design).

O principal recurso motivacional e a possibilidade de registro e de leitura de registros, identificada como um

diferencial e como algo que gera engajamento.

O produto, portanto, se beneficia de motivaçoes comerciais, da propria motivação da natureza da atividade

(planejamento de viagem) e um pouco dessa construção de storytelling/empatia/sensação de transparência com

os demais usuários.

Page 63: Design de Interação

T2: a atividade- Selecione um produto:

- Defina os requisitos;

- Determine as habilidades para solucioná-los;

- Aponte a solução dos requisitos e mostre outra forma de solucionar o problema que o produto

resolve;

- Encontre e justifique os 5 princípios essenciais da interface consistência, previsibilidade,

visibilidade, learnability e feedback;

- Defina e justifique como o produto escolhido motiva o usuário.

- A interface provoca o flow? Explique.

- Como o Design da interface é conjugada com seu target - em termos de Design, timing, abstração,

metáforas, etc? Explique.

- Em termos de design de interação, o que essa interface tem de melhor? E de pior?

✔✔

✔✔

Page 64: Design de Interação

- Ação e consciência são um só (não há divagação da mente);

- Foco no aqui e agora (demais dimensões são excluídas da consciência);

- Não existe preocupação com erros;

- Auto consciência desaparece (mente no que precisa ser realizado e não em nós mesmos);

- A noção de tempo fica distorcida;

- A atividade se torna autotélica (prazer/recompensa na atividade em si).

A interface provoca o flow?O Flow ocorre em condições de desafio ótimo, nas quais é experimentado um

sentido de unidade com o ambiente. CSIKSZENTMIHALYI (2008) aponta 9

situações que contribuem para o Flow:

- Metas claras em todas as etapas do caminho;

- Existe feedback imediato para as ações;

- Existe equilíbrio entre os desafios e as habilidades de quem os

enfrenta (se exceder a capacidade gera frustração, de ficar muito abaixo,

gera tédio);

Adaptado de: CSIKSZENTMIHALYI, M. Flow:The Psychology of Optimal Experience. New York, Harper Perennial Modern Classics, 2008.

Page 65: Design de Interação

A interface provoca o flow?Não, a interface não provoca o flow.

Por quê?

- Mais de uma ação demandada frequentemente (p.ex.: reserve agora x ver oferta), não deixando as metas

claras;

- O desafio de se encontrar no site (com termos técnicos de quem viaja tais como “escalas”) e entender

exatamente qual é o caminho crítico demanda mais habilidade do que o mapeado na persona César;

- Constantemente há abertura de novas janelas, além de publicidade e diversos call-to-actions diferentes nas

páginas, facilitando a divagação da mente;

- Como envolve pagamento, há constantemente o receio de erro;

- Não há prazer na atividade em si (o prazer permanece no output).

Page 66: Design de Interação

T2: a atividade- Selecione um produto:

- Defina os requisitos;

- Determine as habilidades para solucioná-los;

- Aponte a solução dos requisitos e mostre outra forma de solucionar o problema que o produto

resolve;

- Encontre e justifique os 5 princípios essenciais da interface consistência, previsibilidade,

visibilidade, learnability e feedback;

- Defina e justifique como o produto escolhido motiva o usuário.

- A interface provoca o flow? Explique.

- Como o Design da interface é conjugada com seu target - em termos de Design, timing, abstração,

metáforas, etc? Explique.

- Em termos de design de interação, o que essa interface tem de melhor? E de pior?

✔✔

✔✔

Page 67: Design de Interação

Como o Design da interface é conjugada com seu target - em termos de Design, timing, abstração, metáforas, etc?Design (cor, volume, forma, espaço, contraste)

- Paleta de cores adequadas: Verde (Paz, crescimento, saúde)* e Laranja (Amigável, festivo e confiável)*

- Volumes/Formas/Espaços mal distribuídos, com muita informação. Como são muitas informações para a

tomada de decisão, tenta reduzir os cliques exibindo o máximo de informação já no resultado da busca,

mas o fas de forma confusa.

Timing (duração, frequência, ritmo; delay: user/sistema)

- O retorno após a busca é relativamente rápido e traz bastante informação conforme mencionado acima.

Entretanto, os próximos passos são morosos (conexão com outros sites para fazer reservas, abrir várias

páginas diferentes a cada clique, etc.).

*http://visual.ly/color-emotion-guide

Page 68: Design de Interação

Como o Design da interface é conjugada com seu target - em termos de Design, timing, abstração, metáforas, etc?Abstrações

- Não foram identificadas muitas abstrações, mas talvez possam se considerar algumas sutis:

- Calendário utilizado para marcar o período da viagem, que remete a um físico;

- Balão de fala nos comentários realizados sobre hotéis saindo das fotos dos usuários.

Metáforas

- Aparecem basicamente em forma de ícones (p.ex.: caderninho com lápis = avaliações, binóculo = o que

fazer);

- Não há muitas representações mais dramáticas, sendo um sistema bem “implementation model” mais do

um “mental model” (COOPER, 2007).

Page 69: Design de Interação

T2: a atividade- Selecione um produto:

- Defina os requisitos;

- Determine as habilidades para solucioná-los;

- Aponte a solução dos requisitos e mostre outra forma de solucionar o problema que o produto

resolve;

- Encontre e justifique os 5 princípios essenciais da interface consistência, previsibilidade,

visibilidade, learnability e feedback;

- Defina e justifique como o produto escolhido motiva o usuário.

- A interface provoca o flow? Explique.

- Como o Design da interface é conjugada com seu target - em termos de Design, timing, abstração,

metáforas, etc? Explique.

- Em termos de design de interação, o que essa interface tem de melhor? E de pior?

✔✔

✔✔

Page 70: Design de Interação

Em termos de design de interação, o que essa interface tem de melhor? E de pior?

Como já comentamos diversos aspectos do design de interaçãodo site, para

esta parte final analisaremos o design de interação do site pela ótica do modelo

“Hook” ou “Gancho”.

O modelo preconiza quatro fases usar para formar hábitos. Através de ciclos de

“gancho” consecutivos, produtos de sucesso alcançariam seu objetivo final de

envolvimento do usuário espontaneamente, fazendo com que seus usuários

retornem repetidamente.

1. Gatilho

É um “disparador” de comportamento - a vela de ignição no motor. Gatilhos

vêm em dois tipos: interno e externo.

Adaptado de: By Nir EYAL, Nir. Hooked: How to build habit-forming products. New York, Portfolio, 2014.

Page 71: Design de Interação

Em termos de design de interação, o que essa interface tem de melhor? E de pior?

É usual inicialmente convidar os usuários com gatilhos externos, como um e-mail, um link de site ou o ícone do

aplicativo em um telefone. Por fim, os usuários começam a formar associações com gatilhos internos, que ligam

a comportamentos e emoções existentes.

2. Ação

Seguindo o gatilho vem a ação: o comportamento feito em antecipação de uma recompensa.

3. Recompensa Variável

O que distingue o modelo Hook de um ciclo de feedback normal é a capacidade de criar um desejo. Loops de

feedback estão ao nosso redor, mas os previsíveis não criarão o desejo.

Page 72: Design de Interação

Em termos de design de interação, o que essa interface tem de melhor? E de pior?

Ao variar a recompensa é possível criar o desejo.

Pesquisas mostram que os níveis do neurotransmissor dopamina aumenta quando o cérebro está aguardando

uma recompensa e que a variabilidade da recompensa multiplica o efeito, criando um estado focado, que

suprime as áreas do cérebro associadas com o julgamento e a razão ao ativar as partes associadas com o querer

(desejo).

4. Investimento

A fase de investimento aumenta as chances de o usuário fazer uma nova passagem pelo “ciclo de gancho” no

futuro. O investimento ocorre quando o usuário coloca algo no produto de serviço como o tempo, os dados, o

esforço, o capital social, ou dinheiro.

O investimento implica uma ação que melhore o serviço para a próxima rodada.

Page 73: Design de Interação

Em termos de design de interação, o que essa interface tem de melhor? E de pior?

Tendo esse modelo em mente, e como comentamos anteriormente, avaliamos que o Trip Advisor explora todas

as suas possibilidades de engajamento com o usuario. Mesmo assim, ele explora timidamente alguns aspectos

do “gancho”.

Seu gatilho inicial normalmente e publicidade e a ação de busca atras de um bom negócio oferece naturalmente

recompensa variável de acordo com as condiçoes de mercado.

Caso opte por comprar ou comentar, toda a questão de login gera investimento, assim como o próprio

comentário em si.

Page 74: Design de Interação

T2: a atividade- Selecione um produto:

- Defina os requisitos;

- Determine as habilidades para solucioná-los;

- Aponte a solução dos requisitos e mostre outra forma de solucionar o problema que o produto

resolve;

- Encontre e justifique os 5 princípios essenciais da interface consistência, previsibilidade,

visibilidade, learnability e feedback;

- Defina e justifique como o produto escolhido motiva o usuário.

- A interface provoca o flow? Explique.

- Como o Design da interface é conjugada com seu target - em termos de Design, timing, abstração,

metáforas, etc? Explique.

- Em termos de design de interação, o que essa interface tem de melhor? E de pior?

✔✔

✔✔

✔✔