prototipação
DESCRIPTION
Disciplina ministrada na pós de Design de Interação da Fucapi, Manaus,em Outubro de 2014.TRANSCRIPT
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Prototipação quebrando ovos para fazer omeletes
Marcello de Campos Cardosowww.mcardoso.com.br | www.latitude14.com.br [email protected]
#1
(=Prazer, meu nome é Marcello!
Somos especialistas em metodologia (IxD - Interaction Design) com
envolvimento do usuário no processo (User Centered Design) e objetivo
interface simples e fácil de ser usada por muitos (usabilidade).
♢ Trabalhamos desde 2006 com este foco (1a empresa do ramo no Brasil) ♢ Conquistamos 16 premiações iBest em nosso portfólio (9 primeiros lugares) ♢ Fomos premiados como melhor case 2012 em mídias sociais pelo prêmio Aberje MG ♢ Lecionamos nas principais especializações de BH (UNA, PUC, Pitagoras, etc ♢ Somos fundadores e coordenadores locais da Interaction Design Association (IxDA) ♢ Organizadores locais do Dia Mundial da Usabilidade ♢ Consultores cadastrados SEBRAETEC
NOME: LATITUDE CONSULTORIA E PLANEJAMENTO LTDA NOME FANTASIA: latitude14CNPJ: 07.807.389/0001-20Representante legal: Marcello de Campos Cardoso E-mail: [email protected]
www.useit.com
www.acm.org
www.interactions.acm.org
www.upassoc.org
www.cooper.com
www.mcardoso.com.br
www.slideshare.net/marcellocardoso
www.slideshare.net/dansaffer
www.slideshare.net/LaneHalley
Referências online
Antes de mais nada, vamos falar de problemas.
A vida é permeada de problemas e desafios.
A família se preocupa, pois o velhinho tem pressão alta, e gostaria que o Seu Nicolau usasse um celular.
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”.
Como este celular poderia ser?
Que tal um iPhone pro Nicolau?
melhor ≠ mais sofisticado solução simples = solução elegante
FOCO na demanda REAL.
FOCO na demanda REAL.
“É pesada meu filho, e machuca minha mão. Quase não consigo virá-la na xícara, fico com medo de me queimar.”
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.
Vamos pensar uma chaleira pra ela?
OXO - Good Grips
maior acessibilidade pode ser melhor para TODOS
maior acessibilidade pode ser melhor para TODOS
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!
“Eu queria que a menina cortasse os rabanetes, batatas, cenouras, mas é perigoso”
Mushroom Chopper
boa solução resolve mais de um problema.
boa solução resolve mais de um problema.
“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.”
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.
YI | Sound Invention
A solução pode existir em outro lugar!
Existem várias soluções para um problema.
Algumas são “robustas”.
Evolution Pillow
Algumas são mais simples.
Music Branch Headphone Splitter
“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.”
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.
Resource Furniture (ver vídeo)
A solução para espaço pequeno não precisa ser mais espaço. Temos de identificar o problema e usar os recursos que temos.
Uma solução inserida no projeto é uma Solução de design
Uma solução inserida no projeto é uma Solução de design
Uma solução inserida no projeto é uma Solução de design
Uma solução inserida no projeto é uma Solução de design
Uma solução inserida no projeto é uma Solução de design
Uma solução inserida no projeto é uma Solução de design
Uma solução inserida no projeto é uma Solução de design
mesmo o que funciona pode melhorar.
mesmo o que funciona pode melhorar.
mesmo o que funciona pode melhorar.
mesmo o que funciona pode melhorar.
mesmo o que funciona pode melhorar.
mesmo o que funciona pode melhorar.
mesmo o que funciona pode melhorar.
mesmo o que funciona pode melhorar.
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.
Pensar simples a princípio
regra de Paretto, MVP
concentrar onde há maior valor de
USO
começar pela espinha e ITERAR
não focar em tecnologia...
...mas em comportamento
O que eles têm em comum?
design!
todo mundo é designer!
Agora designers,Vamos pensar em um problema!
TO DO DONE
Vamos pensar um problema cotidiano
Qual o proble
ma?
De quem é o problema? (5 por
quês)
Quem está envolvido no pro
blema?
Em grupo!
registrem pois vamos apresentar amanhã!
tempo: 15'
Design = Projeto
pode ser com ou sem metodologia
Qual é o melhor
caminho para criar
soluções?
sorte...
sorte...
...ou tática/metodologia
tablets da microsoft (2001): fracasso de vendas
iPad da Apple (2010): 15 milhões vendidos em 1 ano
Softw
are di
fícil é
fácil
de pr
ojetar
.
Softw
are fá
cil é
difíci
l de p
rojeta
r.
metodologia
sorte
...15%, 25%, 40%, 70%...
0,00001% ... 50%
Metodologiaé um conjunto de técnicas
Para alcançar um resultado mensurável, precisamos saber
o que medir
O que é usabilidade?
Usabilidade é característica de um sistema que determina sua
qualidade de uso.
User Experience é o resultado das interações do usuário com um
sistema
Arquitetura da Informação é parte do Design de interação focada em levantar, categorizar e
organizar os conteúdos e taxonomia de um sistema.
Design de Interação é a metodologia para projetar sistemas com a melhor
usabilidade.
Design Centrado no Usuário é a abordagem onde o comportamento do usuário
determina os requisitos do sistema.
Quem define o que é fácil de ser usado?
Usuários devemos perguntá-los como fazer nosso trabalho?
a princípio, NÃO
o paciente sabe da dor,mas o médico conhece o remédio.
Devemos identificar seus padrões de comportamento e projetarmos soluções adequadas.
Pesquisa é minerar dados e colher informações.
( )Dados vs. Informações
“Possuímos 6 mil cadastros femininos.”
Isso é um dado.( )
6 mil fem / 3 mil masc = 2/3 fem Isso é um informação.( )
( )Informação são dados tratados.
Informações Ajudam a evitar problemas clássicos
de escopo de projeto
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ê
O usuário elástico “Quem vai usar isso? - Todo Mundo!” usuário avançado / usuário iniciante ≠ usuário real
Algumas técnicas de pesquisa: ‣ Avaliação do SAC, feedback, ‣ Análise métrica, ‣ Benchmarking, ‣ Etnografia online, ‣ Entrevistas, ‣ Questionários, ‣ Focus group ‣ etc...
Negócio
Pessoas
Tecnologia
AS 3 FORÇAS DA INOVAÇÃO
INOVAÇÃO disruptiva ou incremental
pesquisa
prototip
ação
validaçã
o
CICLO DE VIDA DO PRODUTO
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Idear é se libertar
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Regras da ideação Agora pode tudo! Errar aqui é barato.
Não é uma disputa de ideias, é a construção coletiva da melhor ideia.
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Servem para guiar o desenvolvimento de produtos fáceis de usar, eficientes e agradáveis. São elas (Preece, Rogers, Sharp):
1. Utilidade 2. Eficácia 3. Eficiência 4. Segurança 5. Facilidade de aprendizado 6. Facilidade de lembrar como se usa
Eficácia: O quanto um produto é bom em se fazer o que se espera deleEficiência: Como um produto auxilia a execução de suas tarefas com o mínimo de recursos
Metas de Usabilidade
TO DO
Colinha 1. Utilidade 2. Eficácia 3. Eficiência 4. Segurança 5. Facilidade de aprendizado 6. Facilidade de lembrar como se usa
Como resolver o problema com software?
Qual a ordem
das metas que devem ser
priorizadas?
Qual platafo
rma?
Concorrentes (diretos
e indiretos)?
Requisitos?
Diferenciais?
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Prototipação quebrando ovos para fazer omeletes
Marcello de Campos Cardosowww.mcardoso.com.br | www.latitude14.com.br [email protected]
#2
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
recapitulando…
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Usabilidade é objetivo
Design de interação é metodologia
Design Centrado no Usuário é abordagem
. . . é atributo que define a facilidade de uso
. . .métodos e técnicas para criar produtos mais usáveis
. . . é aplicar técnicas envolvendo o usuário
Negócio
Pessoas
Tecnologia
AS 3 FORÇAS DA INOVAÇÃO
pesquisa
desenvo
lviment
o
validaçã
o
Questionários e entrevistas
personasprototip
açãoStory mapping
Benchm
arking Card Sorting
Análise Heurística
Percurso Cognitivo
MISMétodo de I
nspeção Semiótica
focus group
etnografia
testes de usabilidadeMAC
Método de Avaliação de comunicabilidade
netnografia
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Protótipo = modelo~
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Podem ser de baixa ou alta resoluçãoBaixa: Para explorar ideias, conceitos, fluxos
Alta: para validar decisões pontuais
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
O que são modelos?
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Modelos são representações estruturadas de fenômenos e abstrações complexas.
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
The helical model
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
São usados nas ciências naturais e sociais.“Economistas utilizam modelos para descrever o comportamento de mercados, físicos os utilizam para compreender partículas, descobrimos que usar pesquisa para criar modelos descritivos de nossos usuários é uma ferramenta útil e poderosa para o Design de Interação.” - Cooper,
About Face 3.0
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Por que usar modelos?
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
São ferramentas simples e poderosas para melhorar a visibilidade, compreensão e a
comunicação de informações.
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Bons modelos destacam características relevantes das menos relevantes.
Evidenciam informações, não apenas dados.
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Prototipação quebrando ovos para fazer omeletes
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Prototipação física
apple lisa, 82
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
macbook, 82
tablet 83
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
earbuds 83
telefonia móvel
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
relógio e fone de ouvido
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
google glass
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
google glass
1o passo: Determinar tipos de usuários (Uma boa ideia é focar em papéis)
1. Gourmets, Viajantes, Namorados…
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. Objetivos: Quais os problemas ele tem relacionados ao contexto do seu produto? Nunca perguntar diretamente. Pergunte por exemplo: “Me conte da última vez que gostou de ir a um restaurante.” depois “Agora me conte a última vez que não gostou.”
6. Necessidades: diretas e periféricas (mas importantes. ex: segurança no metrô)
7. Desejos: o que eles querem, não o que dizem que querem. (Gladwell, spaghetti sauce)
8. Conhecimento: Na área relacionada, cultura geral. Novatos? Experts? Curiosos?
9. Lealdade: Frequência de uso, compromisso (software sazonal, apple vs android...).
10. Dê um nome, um rosto, uma frase emblemática:
3o passo: Determinar usuários focais (patton) ou primários (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)
Nome, Idade Papel
descrição, frase emblemática
Tarefas no sistema para necessidadesNecessidades no mundo real
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
TO DO DONE
EM GRUPO! Inventar uma 3 personas (quick and dirty)!
Uma persona inventada de 1 parágrafo, com
suas principais características.Escolher uma como focal. tempo: 30’
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Nós <3 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
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Material• Papéis de todos os tamanhos e cores • Lápis duro, macio e coloridos • Post Its • Tesoura • Estilete • Cola • Fitas adesivas (durex, fita crepe) • Canetas • Canetinhas pontas finas e grossas
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
“Devemos criar exatamente quanta documentação necessitamos para executar bem um projeto, e não mais.”
-Dan Saffer
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
“Devemos criar exatamente quanta documentação necessitamos para executar bem um projeto, e não mais.”
-Dan Saffer
É isso aí!
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
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”
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Cenário
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.
Uma imagem vale mil palavras. Mas as palavras certas podem valer algumas boas imagens.
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
TO DO DONE
EM GRUPO! Inventar uma 3 personas (quick and dirty)!
Uma persona inventada de 1 parágrafo, com
suas principais características.Escolher uma como focal.Criar um cenário (primeiro uso ou tarefa
chave) e aplicá-lo em sua Persona Focal. .
tempo: 30’
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Task flows
• Fluxos são tão importantes quanto telas
• Quanto mais “cascata”, mais robusto e formal o task flow
diagrama de fluxo
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Task flowsdiagrama de fluxo
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | FFFFFFFFFFFFFFFFFFFFFFFFUUUUUUUUUUUUUU
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Fluxos são interações de um indivíduo, elementos / escolhas
Task flowsdiagrama de fluxo
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Exemplo: Adicionando um item na TO-DO do Basecamp.
Task flowsdiagrama de fluxo
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
• É rápido de fazer e simples de enxergar. • Ideal para sprints!
Task flowsdiagrama de fluxo
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Estrutura • Barra separa a UI da ação • Barra pontilhada separa as opções para mesma ação • Setas vão da ação para a nova UI • Se a UI for fora de escopo, mantém simples, sem ação
Task flowsdiagrama de fluxo
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Twitterverse - Emily Chang
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Storyboards
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
StoryboardsTécnica da publicidade, HQs e cinema, que ilustra interações
complexas
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Storyboards
• Imagens + legendas
• Ilustram fluxos, momentos chave
• Casos de uso
• Mostram ambientes e contextos
• Complementam wireframes
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Registram as funcionalidades do produto, seus aspectos técnicos e sua lógica de negócios, sem a influência do design visual (branding, layout)
Wireframesprotótipos estruturais do sistema
Podem ser usados para validar ideiasPodem ser usados para testes com usuários
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
WireframesSubstituem documentos mais burocráticos, são
especificações visuais comprometidas com:
• Estrutura • Arquitetura da informação • Controles (padrões de interação) • Conteúdo
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Jack Dorsey’s - Twitter (stat.us)
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Biz Stone - retweet
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Dan Catt’s - Flickr Places
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
tela de perfil do Vimeo - Sockyung ‘Sox’ Hong
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
papel=desapego
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
http://www.youtube.com/watch?v=k9mTvt0LXgk
Prototipando e testando lo fi
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
> fidelidade
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
mock ups / comps / layouts
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
Lembrem que podemos mudar o que
foi decidido.
IDEAÇÃO = CAOS!
Marcello Cardoso(31) 9793-6456 | [email protected] | skype: mcardoso82
essa apresentação e seu conteúdo não deve ser reproduzida, apresentada ou reutilizada em nenhuma circustância.