di karine e leandro 2011 parte i

236
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.410 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Design de InteraçãoKarine Drumond e Leandro Alves

Page 2: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Quem somos?‣ Especialistas em Design de Interação pela PUC Minas

‣ Professores de Design de Interação na PUC Minas e na UNI BH

‣ Leandro: sócio da Latitude14 (design de intetação) e Mobian (desenvolvimento mobile)

‣ Karine: sócia da Negócio de Mulher (Design e Marketing feminino)

‣ Fundadores do capítulo IxDA BH (Interaction Design Association)

‣ http://negociodemulher.com.br/blog

‣ http://latitude14.com.br e http://mobian.com.br

@karinedrumond

@lbalves

Page 3: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Programa‣ Entendendo o que é design

‣ O que é e de onde vem o design de interação

‣ Marketing + design de interação

‣ Princípios, metas e leis do design de interação

‣ Design research:

‣ Técnicas de planejamento

‣ Técnicas de prototipação/design

‣ Técnicas de avaliação

Page 4: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Recomendação de leitura

PREECE, Jennifer; ROGERS, Yvone; SHARP, Helen. Design de interação: além da interação homem-computador. Porto Alegre: Bookman, 2005.

SAFFER, Dan; Designing for interaction. Berkeley, New Riders, 2010.

Kuniavsky, Mike. Observing the User Experience. San Francisco, MKP, 2003.

COOPER, Alan. About face 3.0 - the essentials of Interaction Design. Indianapolis: Wiley Publishing, 2009

MEMÓRIA, Felipe. Design para Internet – projetando a experiência perfeita, Rio de Janeiro: Campus/Elsevier, 2005.

NORMAN, Donald. The design of everyday things, New York: Basic Books, 1988.

Page 6: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

A vida é permeada deproblemas e desafios.

Page 7: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

A família se preocupa, pois o velhinho tem pressão alta, e gostaria que o Seu Nicolau usasse um celular.

Como este celular poderia ser?

Seu Nicolau tem 76 anos, mas é muito ativo. Gosta de fazer suas coisas sozinho, retirar a pensão no banco, visitar vizinhos... Mas nem sempre dá satisfação pra família, e não gosta de usar celular, pois acha “Muito difícil”.

Page 8: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Que tal um iPhone pro Nicolau?

Page 9: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

melhor ≠ mais sofisticadosolução simples = solução elegante

Page 10: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

FOCO na demanda REAL.

Page 11: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

“É pesada meu filho, e machuca minha mão. Quase não consigo virá-la na xícara, fico com medo de me queimar.”

Vamos pensar uma chaleira pra ela?

Dona Lucinha adora um cházinho com bolo de fubá, quando recebe as amigas em casa pra falar de novela. Mas a senhorinha tem artrite e ultimamente reclama muito de usar a chaleira.

Page 12: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

OXO - Good Grips

Maior acessibilidade pode ser melhor para TODOS

Page 13: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

“Eu queria que a menina cortasse os rabanetes, batatas, cenouras, mas é perigoso”

Vamos pensar um cortador de legumes seguro e interessante?

Mariana tem 5 anos, e queria aprender a cozinhar com a mãe. Sua mãe gostaria que a filha comesse mais legumes, mas não quer ver a filha usando facas. Quase tudo na cozinha é perigoso!

Page 14: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Mushroom Chopper

boa solução resolve mais de um problema

Page 15: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

“Os fios do fone embolam porque são muito separados. Mas se fossem menos separados, também não ia dar pra dividir com a Aninha.”

Vamos ajudar o Mário.

Mário tem 32 anos, trabalha em Betim, mas mora em Belo Horizonte. Todos os dias pega o transporte da empresa às 7 da manhã na Praça da Liberdade e escuta músicas no trajeto. Às vezes divide o fone com sua paquera, Ana Luiza.

Page 16: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

YI | Sound Invention

a solução pode vir de outro lugar

Page 17: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

existem várias soluções para o mesmo problema

Page 18: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Evolution Pillow

alguma mais robustas que outras

Page 19: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Music Branch Headphone Splitter

algumas mais simples

Page 20: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

“Precisava, na verdade, de um quarto e um escritório, pois trabalho em casa. E meus filhos também precisam de um lugar pra estudar.”

Como resolver o problema do Luíz?

Luíz mudou há pouco para Belo Horizonte, e achou os preços de imóveis muito caros. Veio com mulher e dois filhos, e teve condições de financiar um pequeno imóvel de 2 quartos com 80 m2.

Page 21: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Resource Furniture(ver vídeo)

Page 22: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

A solução para espaço pequeno não precisa ser mais espaço.

Temos de identificar o problemae usar os recursos que temos.

Page 23: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Uma solução inserida no projeto é uma

Solução de design

Page 24: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Uma solução inserida no projeto é uma

Solução de design

Page 25: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Uma solução inserida no projeto é uma

Solução de design

Page 26: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Uma solução inserida no projeto é uma

Solução de design

Page 27: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Uma solução inserida no projeto é uma

Solução de design

Page 28: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Uma solução inserida no projeto é uma

Solução de design

Page 29: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Uma solução inserida no projeto é uma

Solução de design

Page 30: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

mesmo o que funcionapode melhorar.

Page 31: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

mesmo o que funcionapode melhorar.

Page 32: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

mesmo o que funcionapode melhorar.

Page 33: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

mesmo o que funcionapode melhorar.

Page 34: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

mesmo o que funcionapode melhorar.

Page 35: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

mesmo o que funcionapode melhorar.

Page 36: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Para resolver bem,

precisamos entender o problema...

“Se eu perguntasse para as pessoas o que queriam,

me diriam cavalos mais rápidos.” -Henry Ford

...pensar simples...... e pensar sem limites.

Page 37: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Pensar simples a princípio

quanto mais simples, mais fácil de ser compreendido/usado

Page 38: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

concentrar onde há maior valor de USO

começar pela espinha e ITERAR

Page 39: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

não focar em tecnologia...

...mas em comportamento

Page 40: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

O que eles têm em comum?

Page 41: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandrodesi

gn!

Page 42: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

todo mundo é designer!

Page 43: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Design = Projeto

Page 44: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

negócio

pessoas tecnologia

Produtonasce do conhecimento

destes 3 elementos

Page 45: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Qual é o melhor

caminho para criar

soluções?

Page 46: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

sorte...

Page 47: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

sorte...

Page 48: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

...ou tática/metodologia

Page 49: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

...ou tática/metodologia

Page 50: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

metodologia

sorte

...15%, 25%, 40%, 70%...

0,00001% ... 50%

Page 51: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

pesqu

isades

ign/

protot

ipação

valida

ção

METODOLOGIA DE DESIGN

Page 52: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

UM POUCO DE

HISTÓRIA

Page 53: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

1986 | Design Centrado no Usuário (DCU)

Design Centrado no Usuário (DCU) é o campo de estudo que reúne metodologias de design nos quais o público-alvo de um produto ou serviço influencia as diretrizes e requisitos do sistema.

Termo cunhado por Norman enquanto trabalhava como pesquisador na Universidade California San Diego (UCSD), no artigo User-Centered System Design: New Perspectives on Human-Computer Interaction (Norman & Draper, 1986) e popularizado em 1988 no popular Psychology of everyday things (mais tarde rebatizado como The design of everyday things).

Page 54: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Design Centrado no Usuário (DCU)“…é uma filosofia baseada nas necessidades e interesses do usuário, com ênfase em fazer produtos usáveis e inteligíveis.” – Donald Norman

“A filosofia por trás do Design Centrado no Usuário é simplesmente esta: O usuário sabe mais. Pessoas que utilizarão um produto ou serviço sabem de suas necessidades, metas e preferências, e é papel do designer descobrir isto e projetar para eles.” – Dan Saffer

“...é uma abordagem ao design que fundamenta o processo em informações sobre as pessoas que usarão o produto. Processos de UCD focam em usuários através de planejamento, design e desenvolvimento do produto.” – Usability Professionals Association (UPA)

“...é um estabelecido processo usado pela IBM e muitas outras organizações para prover produtos que atendam as expectativas dos usuários.” – IBM

“...é focar o design no usuário, simples assim.” – Peter J. Bogaards

Page 55: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

abordagem DCU

Design Centrado no Usuário

Planejamento Design Validação Pós-lançamento

usuário

Page 56: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

USUÁRIOSdevemos perguntá-los como fazer nosso trabalho?

Design Centrado no Usuário (DCU)

Page 57: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

a princípio, NÃO

Design Centrado no Usuário (DCU)

Page 58: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Design Centrado no Usuário (DCU)

Devemos identificar seus padrões de comportamento

e projetarmos soluções adequadas.

Page 59: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Bill Morgride, diretor da IDEO, sintetizou no livro Designing for Interactions uma série de metodologias de design + comunicação usadas e aprimoradas na empresa para a elaboração de produtos úteis e usáveis.

1990 | Design de Interação

Page 60: Di   karine e leandro 2011 parte i

Este campo multidisciplinar centraliza e integra as diversas áreas de conhecimento relacionadas a interação entre artefato / usuários

Design de Interação | Karine e Leandro

Espaço do Design de Interação

Page 61: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

POR QUE DESIGN DE INTERAÇÃO ?

Page 62: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

PORQUE O MARKETING NÃO FUNCIONA MAIS (sozinho)

Page 63: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Projetar dispositivos e interfaces usáveis vai além de evitar erros: um projeto

bem pesquisado, planejado, desenvolvido e testado pode agregar valor ao uso, negócio ou mesmo mudar totalmente a natureza do produto/sistema para outra melhor e mais adequada.

“...Design de Interação não é apenas sobre corrigir problemas; diz respeito a facilitar interações entre pessoas de uma

maneira mais rica, profunda e melhor - ou seja, encontrar novas formas de melhor conectar as pessoas e tornar o mundo

um lugar melhor.”

-Dan Saffer

Por que Design de Interação?

Page 64: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

1) MARKETING TRADICIONAL

Page 65: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Produtor

consumidor

mix de m

arketing

público-alvo

Page 66: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandrohttp://www.slideshare.net/Inmetaweb/mercado-das-mdias-sociais

Page 67: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Page 68: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Page 69: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Page 70: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

valor agregado

Page 71: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Page 72: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

2) MARKETING 2.0

Page 73: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

“A revolução não acontece quando a sociedade adota novas ferramentas. Acontece quando a sociedade adota novos comportamentos”

-Clay Shirky (New York Times)

Page 74: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Mídias Sociais tomaram o lugar da pornografia como conteúdo

mais acessado da Internet.1/8 dos casais se formam em mídias sociais nos EUA

http://www.slideshare.net/Inmetaweb/mercado-das-mdias-sociais

Page 75: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

50% da população está abaixo dos 30 anos.

96% dessas pessoas já estão em mídias sociais.

http://www.slideshare.net/Inmetaweb/mercado-das-mdias-sociais

Page 76: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

facebook ultrapassou o Google no tráfego semanal nos EUA.

http://www.slideshare.net/Inmetaweb/mercado-das-mdias-sociais

Page 77: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

78% dos consumidores confiam mais em

recomendações pessoais.Apenas 14% confiam em propagandas

http://www.slideshare.net/Inmetaweb/mercado-das-mdias-sociais

Page 78: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

1/3dos brasileiros fora das redes sociais pretende participar de alguma em breve

http://www.slideshare.net/Inmetaweb/mercado-das-mdias-sociais

Page 79: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

2/3usam a rede há mais de 3 anos

http://www.slideshare.net/Inmetaweb/mercado-das-mdias-sociais

Page 80: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

273amigos em média nas redes sociais.Em BH, 13% tem mais de 700 amigos!

http://www.slideshare.net/Inmetaweb/mercado-das-mdias-sociais

Page 81: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

60%pensam que as redes oferecem toda a informação

que precisam.

http://www.slideshare.net/Inmetaweb/mercado-das-mdias-sociais

Page 82: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

45%consideram que as redes sociais substituem os

portais de notícias

http://www.slideshare.net/Inmetaweb/mercado-das-mdias-sociais

Page 83: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

80%das pessoas nas redes aceitam tranquilamente receber divulgação,

comunicações e serem avaliadas por empresas

http://www.slideshare.net/Inmetaweb/mercado-das-mdias-sociais

Page 84: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

8.000 xtwitter é

mais eficaz que Procon

Page 85: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Page 86: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Page 87: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

compartilhar > criar

Page 88: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Produtor

consumidor consumidor consumidor

Page 89: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandrohttp://www.slideshare.net/Inmetaweb/mercado-das-mdias-sociais

Page 90: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

3) DESIGN (DE INTERAÇÃO)

Page 91: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Bill Moggridge, diretor da IDEO, sintetizou no livro Designing for Interactions uma série de metodologias de design +

comunicação usadas e aprimoradas na empresa para a

elaboração de produtos úteis e usáveis.

1990 | Design de Interação

Relembrando...

Page 92: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Outras definições...

‣ “Criar experiências que melhorem e estendam a maneira como as pessoas trabalham, se comunicam e interagem.”Winograd, 1999

‣ “Design de interação define a estrutura e o comportamento de produtos e serviços interativos e suas interações com usuários.”Interaction Design Association (IxDA), 2004

Page 94: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Designer + Marketing

usuário/consumidor usuário/

consumidor usuário/consumidor

Page 95: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Como se faz DI?

pesqu

isades

ign/

protot

ipação

valida

ção

Page 96: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Como se faz DI?Pesquisar: identificar requisitos (usuários, tarefas, contexto)

Criar soluções alternativas que atendam aos requisitos identificados.

Validar as soluções criadas com os usuários.

pesqu

isa

design

/

protot

ipação

valida

ção

Page 97: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Principais técnicas

Prototipação em papel

Análise de satisfação

Análise de tarefas

Card sorting

Teste de usabilidade

Entrevistas

Teste dos 5 segundo

Análise Heurística

Pesquisa em campo

Benchmarking

Validação Design/Prototipação

Pesquisa

Wireframes

Story mapping

Utilidade

Page 98: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Card Sorting com a liderança de vendas do Magazine Luiza

Pesquisa para desenvolvimento do novo Desk Metrics

pesquisa

Page 99: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

design/prototipação

Page 100: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

validação

Avaliando e-learning

FIAT ISVOR

Page 101: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

O problema: Bilhões de pessoas não tem acesso a agua limpa. Crianças morrem por causa de doenças de saneamento básico.

Case - Aquaduct

Page 102: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Case - Aquaduct

Page 103: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Case - Aquaduct

Page 104: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Case - Aquaduct

Page 105: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Case - Aquaduct

Page 106: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Service design

Page 107: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Service design

Page 108: Di   karine e leandro 2011 parte i

Design de Interação | Karine e LeandroUX

Page 109: Di   karine e leandro 2011 parte i

Design de Interação | Karine e LeandroUX

Page 110: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Marketing Indireto

$389.400.000.000,00

Page 111: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

ROWE

Page 112: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

comportamento

Page 113: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

contexto

Page 114: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

acessibilidade

Page 115: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

protótipo do

twitter!

Page 116: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Page 117: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Page 118: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

iteração

Page 119: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

"I'm not here to be in a relationship"

$300.000.000,00

Page 120: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

quem é sério investe nesta abordagem

Page 121: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

quem é sério investe nesta abordagem

laboratório de UX da globo.com

Page 122: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

quem é sério investe nesta abordagem

centro de design da ASUS

Page 123: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Design

usuários

comportamento de uso

valor de uso

Marketing

público-alvo

hábitos de consumo

valor agregado

Page 124: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

DesignMarketing

+

Page 125: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Como saber o quê e como projetar?

vs

Page 126: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Metas do design de interação

Em quê devemos focar num projeto?

Ex.: facilidade de uso ou estética?

Page 127: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Metas do design de interação

Page 128: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Metas do design de interação

Visam nortear o projeto de design de interação e variam

conforme o produto.

Page 129: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Metas do design de interação

Metas doDesign deInteração

divertidoemocionalmente

adequado

compensador

inspirador

esteticamenteapreciável

motivadorproveitoso

interessante

agradável

satisfatório

eficiente

seguro

útilfácil lembrar

eficaz

fácil memorizar

Page 130: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Eficácia se refere a quão bem uma ferramenta auxilia na realização

de uma atividade proposta, em um contexto de uso.

É uma característica analógica, em escala.

Metas – Eficácia

Page 131: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Qual é mais eficaz?

Metas – Eficácia

Page 132: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Depende. Pra quê e para quem?

Metas – Eficácia

Page 133: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Quanto uma ferramenta auxilia na economia de recursos para a

realização de uma atividade proposta, em um contexto de uso.

Metas – Eficiência

Page 134: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Eficiência

=economia de recursos

Metas – Eficiência

Page 135: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

recursos podem ser medidos em tempo, cliques...se traduzem em trabalho/custo

Metas – Eficiência

Page 136: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Metas – Eficácia X Eficiência

eficácia - fazer melhoreficiência - produtividade

Page 137: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Segurança se refere a prevenção e recuperação de erros.

Deve ser perceptível, transparente.

Metas – Segurança

Page 138: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Física

Metas – Segurança

Page 139: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Interface

Metas – Segurança

Page 140: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Prevenção de erros

Metas – Segurança

Page 141: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Prevenção de erros, transparente.

Metas – Segurança

Page 142: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Segurança percebida

Metas – Segurança

Page 143: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Clareza na interface, compreensão das funcionalidades

metáforas e modelos mentais

Metas – Facilidade de aprendizado

Page 144: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Metas – Facilidade de lembrar como se usar

Page 145: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Interface profissional, especialista

Metas – Facilidade de lembrar como se usar

Page 146: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Metas – Utilidade

Water Reminder

Page 147: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Metas – Utilidade

Water Your Body

Page 148: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Metas – UtilidadeFerramenta sem focoPra que serve?Elevator pitch,Twitter pitch!

Page 149: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Metas doDesign deInteração

divertido emocionalmenteadequado

compensador

inspirador

esteticamenteapreciável

motivador

proveitoso

interessante

agradável

satisfatórioeficiente

seguro

útil

fácil lembrar

eficaz

fácil memorizar

Metas da experiência do usuário

Page 150: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Metas da experiência do usuário

Metas doDesign deInteração

divertido emocionalmenteadequado

compensador

inspirador

esteticamenteapreciável

motivador

proveitoso

interessante

agradável

satisfatórioeficiente

seguro

útil

fácil lembrar

eficaz

fácil memorizar

Page 151: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Metas da experiência do usuário

Metas doDesign deInteração

divertido emocionalmenteadequado

compensador

inspirador

esteticamenteapreciável

motivador

proveitoso

interessante

agradável

satisfatórioeficiente

seguro

útil

fácil lembrar

eficaz

fácil memorizar

Page 152: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Metas da experiência do usuário

Metas doDesign deInteração

divertido emocionalmenteadequado

compensador

inspirador

esteticamenteapreciável

motivador

proveitoso

interessante

agradável

satisfatórioeficiente

seguro

útil

fácil lembrar

eficaz

fácil memorizar

Page 153: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Princípios de design

São características que tornam os produtos mais fáceis de usar.

VisibilidadeFeedbackRestriçõesMapeamentoConsistênciaAffordance

Page 154: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

1. Visibilidade

Oferecer informações sobre o estado do sistema para tomada de

decisão e compreensão.

Page 155: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

2. Feedback

VisualTátilAuralCombinado

Oferecer retorno sobre as ações dos usuários:

Page 156: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

2. Feedback

Page 157: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Restrições lógicasExploram o bom senso das pessoas a respeito de como o mundo funciona.

3. Restrições

Page 158: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Restrições físicasSe referem à maneira como os objetos restringem mecanicamente.

3. Restrições

Page 159: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Restrições culturaisConvenções aprendidas – universais ou específicas de culturas diferentes.

3. Restrições

Page 160: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Criar uma relação entre o controle e seu efeito.

4. Mapeamento

Page 161: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

4. Mapeamento

Page 162: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

4. Mapeamento

Page 163: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Interações semelhantes, elementos semelhantes.

5. Consistência

Page 164: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

5. Consistência

Page 165: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

6. Affordance O designer deve dar uma “dica” de como interagir.

Page 166: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

6. Affordance

Page 167: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

6. Affordance

Page 168: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

6. Affordance

Page 169: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Lei de FittsO tempo gasto para se mover de um ponto inicial para outro é proporcional ao tamanho do alvo e sua distância.

Significa que...Elementos de uma interface devem possuir um tamanho adequado a sua importância.

Elementos relacionados devem se posicionar em um contexto de uso coerente.

Paul Fitts, psicólogo - 1954

Leis do Design de Interação

Page 170: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Lei de HicksO tempo que leva para uma pessoa tomar uma decisão é proporcional ao número das escolhas possíveis.

Significa que...Usuários encontram a informação separando-as em blocos e eliminando a metade a cada etapa do processo.

Desconsiderando outras decisões de design, seria mais simples encontrar um atalho em um grupo de 10 do que em dois de 5.

Devemos ser criteriosos na categorização de conteúdos.

Leis do Design de Interação

William Edmund Hick, psicólogo - 1983

Page 171: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Lei de Miller (complementar à lei de Hicks)A memória de curta duração humana registra 7 informações em média, variando em torno de 2 para cima ou para baixo.

Significa que...Não é uma regra rígida, mas uma orientação. Interfaces devem ser projetadas no intuito de minimizar a sobrecarga cognitiva.

Por exemplo, não devemos criar interações que forcem usuários a memorizar elementos estranhos em telas diferentes.

George Miller, psicólogo - 1956

Leis do Design de Interação

Page 172: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Leis do Design de Interação

Lei de MooreO número de transistores dos chips terá um aumento de 100%, pelo mesmo custo, a cada período de 18 meses.

Significa que...A tecnologia evolui rapidamente. Devemos nos adequar a mudança de paradigmas tecnológicos. Novos dispositivos, novas formas de interagir, novas possibilidades!

Gordon Moore, co-fundador da Intel - 1965

Page 173: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

EM GRUPO!

Discutir com os colegas

e definir:

1) O que é o site (aplic

ativo, etc)

2) Que problema ele resolv

e

3) Qual o público-alvo

4) Quem são os concorrentes

TO DO DONE

Page 174: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

recapitulando...

Page 175: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Ciclo de vida do produto

pesqu

isades

ign/

protot

ipação

valida

ção

Page 176: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Ciclo de vida do produto

Validar e descobrir novas

DEMANDAS

pesqu

isa/

planej

ament

o

Page 177: Di   karine e leandro 2011 parte i

Pesquisa é minerar dados e colher informações.

Design de Interação | Karine e Leandro

Page 178: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Ciclo de vida ágil

( )Dados vs. Informações

Page 179: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Ciclo de vida ágil

“Possuímos 6 mil cadastros femininos.”

Isso é um dado.( )

Page 180: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Ciclo de vida ágil

6 mil fem / 3 mil masc = 2/3 fem

Isso é um informação.( )

Page 181: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Ciclo de vida ágil

Informação sãodados tratados.( )

Page 182: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Ciclo de vida ágil

InformaçõesAjudam a evitar problemas clássicos de escopo de projeto

Page 183: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Ciclo de vida ágil

Não há receita de bolo, mas princípios.1. Desenvolvedor ≠ usuário

2. Dados ≠ informações

3. Mais informação = menor chance de insucesso

4. Arquétipo ≠ clichê

Page 184: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Ciclo de vida ágil

O usuário elástico“Quem vai usar isso? - Todo Mundo!”usuário avançado / usuário iniciante ≠ usuário real

Page 185: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Para evitardor de cabeça...

pesqu

isa/

planej

ament

o

Page 186: Di   karine e leandro 2011 parte i

Algumas técnicas de pesquisa:‣ Avaliação do SAC, feedback,‣ Análise métrica,‣ Benchmarking,‣ Etnografia online,‣ Entrevistas,‣ Questionários,‣ etc...

Design de Interação | Karine e Leandro

Page 187: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Page 188: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Page 189: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Page 190: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Ciclo de vida ágil

Page 191: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Entrevistasexplorando a campo

Page 192: Di   karine e leandro 2011 parte i

Entrevistasexplorando a campo

Design de Interação | Karine e Leandro

Podem ser pensadas como

uma conversação com um propósito.

(Kahn e Cannel, “The dynamics of interviewing”, 1957)

Page 193: Di   karine e leandro 2011 parte i

Entrevistasexplorando a campo

Design de Interação | Karine e Leandro

Dividem em 4 tipos1. Não estruturadas (open ended. escopo aberto)2. Estruturadas (escopo fechado)3. Semi-estruturadas (adaptáveis)4. Focus group - (Conduzida por tópicos)

quanto exploratórias, aberto o escopo+ +

Page 194: Di   karine e leandro 2011 parte i

Entrevistasexplorando a campo

Design de Interação | Karine e Leandro

Regrinhas de ouro - antes1. Elabore um roteiro2. Prepare um termo de confidencialidade e consentimento3. Certifique se tudo está impresso antes de começar4. Verifique e teste equipamento de gravação

(Robson, “Real World Research”, 1993)

Page 195: Di   karine e leandro 2011 parte i

Entrevistasexplorando a campo

Design de Interação | Karine e Leandro

Teste piloto - antesRealize a entrevista para validar perguntas, estrutura, tempo.Adapte e refaça o teste piloto se necessário.

Page 196: Di   karine e leandro 2011 parte i

Entrevistasexplorando a campo

Design de Interação | Karine e Leandro

Regrinhas de ouro - durante 1. SIGA o roteiro!2. Vista e comporte +/- como o entrevistado3. Apresente-se cordialmente4.Explique o objetivo da pesquisa5.Peça que assine os termos (confidencialidade e consentimento)

continua... >

Page 197: Di   karine e leandro 2011 parte i

Entrevistasexplorando a campo

Design de Interação | Karine e Leandro

Regrinhas de ouro - durante6. Avise então que começará a gravar7. Informe que o participante pode desistir a qualquer momento8.Inicie a gravação.

Page 198: Di   karine e leandro 2011 parte i

Entrevistasexplorando a campo

Design de Interação | Karine e Leandro

Regrinhas de ouro - depoisAgradeça ao participante e pergunte se há algo que ele gostaria de acrescentar.

Page 199: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Chame o entrevistado pelo nome.E comece por perguntas fáceis, mesmo quevocê saiba a resposta.

#1

Page 200: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Vamos começar? Qual o maior constrangimento profissional que você já passou na sua vida?

#1

Page 201: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Então Camila, você fez alguma viagem recentemente?

#1

Page 202: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Evite perguntas longas!Treine seu poder de síntese e clareza.

#2

Page 203: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Na atual conjuntura sócio-econômica e política do Brasil contemporâneo, qual sua perspectiva acerca da realidade singular musical do proto-gueto das comunidades cariocas?

#2

Page 204: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

O que você acha do samba-de-roda tradicional carioca?

#2

Page 205: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Evite sentenças compostasdifíceis de entender e de anotar as respostas

#3

Page 206: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

O que você acha deste tipo de portal de notícias, e comparado a outros tipos de portais?

#3

Page 207: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

O que você acha deste portal de notícias?

#3

Page 208: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

E comparado a outrostipos de portais?

#3

Page 209: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Evite jargões e termos técnicosque o entrevistado pode desconhecer e não admitir por constrangimento

#4

Page 210: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

O que você pensa sobre uma StartUp realizar Pivot tecnológico antes do lançamento de seu MVP?

#4

Page 211: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

O que você acha sobre uma empresa mudar o foco do seu produto antes de lançá-lo?

#4

Page 212: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Evite tendenciamento e suposições.Tenha bom-senso. Busque sempre a neutralidadeem seu tom e suas palavras.

#5

Page 213: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Quais as coisas que você mais gosta nessa área do portal?

#5

Page 214: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

O que você acha desta área do portal?

#5

Page 215: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Busque uma consistência narrativaA ordem das perguntas influencia as respostas

#6

Page 216: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

#6Qual sua pretenção salarial para daqui a 2 anos?

8 mil.

Você fuma!?

Page 217: Di   karine e leandro 2011 parte i

Entrevistasexplorando a campo

Design de Interação | Karine e Leandro

Entrevistas não ou semi-estruturadas 1. Tenha um objetivo claro, uma agenda2. Estruture os temas que precisa abordar em tópicos

Page 218: Di   karine e leandro 2011 parte i

Entrevistasexplorando a campo

Design de Interação | Karine e Leandro

Entrevistas não ou semi-estruturadas

vantagens desvantagens

geram dados ricos exigem mais experiência

levam a descobertas disruptivas levam tempo pra serem analisadas (dados desestruturados)

Page 219: Di   karine e leandro 2011 parte i

Entrevistasexplorando a campo

Design de Interação | Karine e Leandro

Focus Group (entrevistas em grupo)1. De 3 a 10 participantes, representativos dos grupos em estudo2. Um orientador dirige os tópicos de discussão

Page 220: Di   karine e leandro 2011 parte i

Entrevistasexplorando a campo

Design de Interação | Karine e Leandro

vantagens desvantagens

Explora o contexto social e a interação entre os envolvidos (ambiente, contexto)

O Lead user pode ser um problema

É prático para validar uma ideia com um grupo de mercado.

O recrutamento é complicado, já que a agenda de muitos é considerada

Focus Group (entrevistas em grupo)

Page 221: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Questionáriosvalidando hipóteses

Page 222: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

oferecem quase sempre

opções fechadas de respostas

quanto objetivo, fechado o escopo+ +

QuestionáriosValidando hipóteses

Page 223: Di   karine e leandro 2011 parte i

QuestionáriosValidando hipóteses

Design de Interação | Karine e Leandro

Vantagens1. São mais fáceis de serem analisados

2. Podem abranger um maior número de questões, por serem mais objetivos

3. São replicados com maior facilidade

Page 224: Di   karine e leandro 2011 parte i

QuestionáriosValidando hipóteses

Design de Interação | Karine e Leandro

Vantagens4. Ajudam a definir subgrupos (Ex: grupo internautas. Qual subgrupo? Experiente, intermediário ou iniciante?)

5. Podem ser projetados com variações para cada grupo específico

6. Questionários longos podem ser subdivididos em partes para facilitar preenchimento

Page 225: Di   karine e leandro 2011 parte i

QuestionáriosValidando hipóteses

Design de Interação | Karine e Leandro

Cuidado com as faixas de respostas!Podem se sobrepor

a)10-20b)20-30c) 30-40d)40-50

Podem faltara)500 e 1 milb)2 e 3 milc) 4 e 5 mild) Acima de 6 mil

Page 226: Di   karine e leandro 2011 parte i

QuestionáriosValidando hipóteses

Design de Interação | Karine e Leandro

Cuidado com as faixas de respostas!

Page 227: Di   karine e leandro 2011 parte i

QuestionáriosValidando hipóteses

Design de Interação | Karine e Leandro

Respostas também podem ser binárias...1.sim/não2.curti/não curti

Page 228: Di   karine e leandro 2011 parte i

QuestionáriosValidando hipóteses

Design de Interação | Karine e Leandro

...ou em escalas.

Page 229: Di   karine e leandro 2011 parte i

QuestionáriosValidando hipóteses

Design de Interação | Karine e Leandro

Cuidados com questionários

Qual sua nota para o sorvete de Pistache?a) -2b) -1c) 0d) 1e) 2

Evite respostas com escalas negativas

Page 230: Di   karine e leandro 2011 parte i

QuestionáriosValidando hipóteses

Design de Interação | Karine e Leandro

1. Gosto do meu cereal ao leite bem crocante pela manhã.a) Concordo plenamenteb) Concordoc) Não concordo nem discordod) Discordoe) Discordo plenamente

Escala LikertAfirmativas curtas seguidas de uma escala bipolar de respostas graduais.

Page 231: Di   karine e leandro 2011 parte i

QuestionáriosValidando hipóteses

Design de Interação | Karine e Leandro

1. Gosto do meu cereal ao leite bem crocante pela manhã.a) Concordo plenamenteb) Concordoc) Discordod) Discordo plenamente

Escala LikertUse número par se quiser forçar um posicionamento

Page 232: Di   karine e leandro 2011 parte i

QuestionáriosValidando hipóteses

Design de Interação | Karine e Leandro

Escala LikertUse o mesmo número de afirmações positivas e negativas. Se vai misturá-las ou agrupá-las, é seu critério, e as opiniões são divididas entre os autores sobre isto.

Page 233: Di   karine e leandro 2011 parte i

QuestionáriosValidando hipóteses

Design de Interação | Karine e Leandro

Escala de diferencial semânticoMenos utilizada que as escalas likert, utilizam adjetivos opostos, normalmente em uma grade. O usuário deve marcar a posição que melhor representa sua opinião para cada item.

Page 234: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Interpretando dados

1. Procure padrões e tendências

2. Para menos de 60 participantes, respostas com número reais. Para mais, porcentagens.

3. Para interpretar entrevistas, é ideal manter alguma métrica ou código

Page 235: Di   karine e leandro 2011 parte i

Design de Interação | Karine e Leandro

Ciclo de vida do produto

pesqu

isa design

/

protot

ipação

valida

ção

Questionários e entrevistas

personas

Benchm

arking