SlideShare uma empresa Scribd logo
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 
mcardoso@latitude14.com.br 
#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: latitude14 
CNPJ: 07.807.389/0001-20 
Representante legal: Marcello de Campos Cardoso 
E-mail: mcardoso@latitude14.com.br
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.
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”. 
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?
Que tal um iPhone pro Nicolau?
melhor ≠ mais sofisticado 
solução simples = solução elegante
FO CO na demanda R EA L.
FO CO na demanda R EA L.
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. 
“É 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?
OXO - Good Grips 
maior acessibilidade pode ser melhor para TODOS
maior acessibilidade pode ser melhor para TODOS
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” 
Vamos pensar um cortador de legumes seguro e 
interessante?
Mushroom Chopper 
boa solução resolve mais de um problema.
boa solução resolve mais de um problema.
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. 
“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.”
YI | Sound Invention 
A solução pode exist ir em outro lugar!
Existem várias soluções para um 
problema.
Algumas são “robustas”. 
Evolution Pillow
Music Branch Headphone Splitter 
Algumas são mais simples.
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. 
“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.”
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... 
...pensar simples... 
... e pensar sem limit es. 
“Se eu perguntasse para as pessoas o que queriam, 
me diriam cavalos mais rápidos.” -Henry Ford
Pe n s a r s i m p l e s a p r i n c í p i o 
reg ra de Pa re t t o, M VP
concentrar onde há maior valor de USO 
começar pela espinha e IT E RA R
não focar em t ecnologia... 
...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 cot idiano 
Q ual o problema? 
De quem é o problema? (5 por quês) 
Q uem está envolvido no problema? 
Em grupo! 
registrem pois vamos apresentar amanhã! 
t empo: 15'
Design = Projeto
pode ser com ou sem 
metodologia
Qual é o melhor 
camin h o pa ra cria r 
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
Software difícil é fácil de projetar. 
Software fácil é difícil de projetar.
sorte 
0,00001% ... 50% 
metodologia 
...15%, 25%, 40%, 70%...
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 (Isso é um dfeamdininoos..” )
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...
AS 3 FORÇAS DA INOVAÇÃO 
Pessoas 
Negócio 
Te c n o l o g i a
INOVAÇÃO 
disruptiva ou incremental
CICLO DE VIDA DO PRODUTO 
pesquisa 
prototipação 
validação
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 | 
Metas de Usabilidade 
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 dele 
Eficiência: Como um produto auxilia a execução de suas tarefas com o mínimo de recursos
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? 
Q ual a ordem das metas que devem ser 
priorizadas? 
Q ual plataforma? 
Concorrent es (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 Cardoso 
www.mcardoso.com.br | www.latitude14.com.br 
mcardoso@latitude14.com.br 
#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 
...é atributo que define a facilidade de uso 
Design de interação é metodologia 
...métodos e técnicas para criar produtos mais usáveis 
Design Centrado no Usuário é abordagem 
...é aplicar técnicas envolvendo o usuário
AS 3 FORÇAS DA INOVAÇÃO 
Pessoas 
Negócio 
Te c n o l o g i a
et nografia 
Be n c hma r k in g 
pesquisa 
desenvolvimento 
validação 
Questionários e 
entrevistas 
protot ipação 
personas 
St o r y 
mapping 
Card S o rt ing 
Análise Heurística 
Pe r c u r s o 
Cognit ivo 
MIS Método de Inspeção Semiótica 
focus group 
testes de 
usabilidade 
MA C Método de Avaliação de comunicabilidade 
net nografia
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ção 
Baixa: 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 Necessidades no no sistema para necessidades 
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 caract erísticas. 
Escolher uma como focal. 
t empo: 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 | 
É isso aí! 
“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 |
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 
“São protótipos feitos de palavras” 
• 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
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | 
Cenário 
Uma imagem vale mil palavras. 
Mas as palavras certas podem valer algumas boas imagens. 
Lúcia Maria loga em sua conta Sacolao.com. Vê seu pedido da semana passada e 
decide usá-lo de novo para esta semana. Remove alguns itens arrastando-os de sua 
Cestinha®, e o valor ajusta automaticamente. Satisfeita com a compra, clica no 
botão Entrega rápida e confirma o débito em seu cartão de crédito previamente 
salvo. A tela de confirmação informa para esperar a entrega nas próximas 2 horas.
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 caract erísticas. 
Escolher uma como focal. 
Criar um cenário (primeiro uso ou tarefa 
chave) e aplicá-lo em sua Persona Focal. . 
t empo: 30’
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | 
Task flows 
diagrama de fluxo 
• Fluxos são tão importantes quanto telas 
• Quanto mais “cascata”, mais robusto e formal o task flow
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | 
Task flows 
diagrama de fluxo
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | FFFFFFFF 
FFFFFFFF 
FFFFFFFF 
UUUUUUU 
UUUUUUU
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | 
Task flows 
diagrama de fluxo 
Fluxos são interações de um indivíduo, elementos / escolhas
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | 
Task flows 
diagrama de fluxo 
Exemplo: Adicionando um item na TO-DO do Basecamp.
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | 
Task flows 
diagrama de fluxo 
• É rápido de fazer e simples de enxergar. 
• Ideal para sprints!
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | 
Task flows 
diagrama de fluxo 
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
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 | 
Storyboards 
Té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 | 
Wireframes protótipos estruturais do sistema 
Registram as funcionalidades do produto, seus aspectos técnicos e sua lógica 
de negócios, sem a influência do design visual (branding, layout) 
Podem ser usados para validar ideias 
Podem ser usados para testes com usuários
Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | 
Wireframes 
Substituem 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 | 
Prototipando e testando lo fi 
http://www.youtube.com/watch?v=k9mTvt0LXgk
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 = CA OS!
Marcello Cardoso 
(31) 9793-6456 | mcardoso@latitude14.com.br | skype: mcardoso82 
essa apresentação e seu conteúdo não deve ser reproduzida, apresentada ou reutilizada em nenhuma circustância.

Mais conteúdo relacionado

Mais procurados

Engenharia dos cargos de UI, UX, PM
Engenharia dos cargos de UI, UX, PMEngenharia dos cargos de UI, UX, PM
Engenharia dos cargos de UI, UX, PM
Marcello Cardoso
 
Testes de Usabilidade
Testes de UsabilidadeTestes de Usabilidade
Testes de Usabilidade
Daniele Zandoná
 
Moderando Testes de Usabilidade
Moderando Testes de UsabilidadeModerando Testes de Usabilidade
Moderando Testes de Usabilidade
Ana Paula Batista
 
Design Sprint: seu MLP em até 5 dias.
Design Sprint: seu MLP em até 5 dias.Design Sprint: seu MLP em até 5 dias.
Design Sprint: seu MLP em até 5 dias.
Ana Paula Batista
 
Metodologias de Design de Interação
Metodologias de Design de InteraçãoMetodologias de Design de Interação
Metodologias de Design de Interação
UTFPR
 
Pesquisa com usuários utilizando o método Lean UX
Pesquisa com usuários utilizando o método Lean UXPesquisa com usuários utilizando o método Lean UX
Pesquisa com usuários utilizando o método Lean UX
Paulo Fanton
 
MEX: Modelo Genérico de Experiência do Usuário
MEX: Modelo Genérico de Experiência do UsuárioMEX: Modelo Genérico de Experiência do Usuário
MEX: Modelo Genérico de Experiência do Usuário
Carlos Rosemberg
 
Projeto de Interfaces - Aula 02
Projeto de Interfaces - Aula 02Projeto de Interfaces - Aula 02
Projeto de Interfaces - Aula 02
Carlos Rosemberg
 
Como mimar seus usuários
Como mimar seus usuáriosComo mimar seus usuários
Como mimar seus usuários
Ana Paula Batista
 
Pesquisa de Guerrilha - Entendendo seu usuário com agilidade e baixo custo
Pesquisa de Guerrilha - Entendendo seu usuário com agilidade e baixo custoPesquisa de Guerrilha - Entendendo seu usuário com agilidade e baixo custo
Pesquisa de Guerrilha - Entendendo seu usuário com agilidade e baixo custo
Ana Paula Batista
 
Princípios de Design de Interação
Princípios de Design de InteraçãoPrincípios de Design de Interação
Princípios de Design de Interação
Felipe Dal Molin
 
Design de experiência e as novas fronteiras da inovação
Design de experiência e as novas fronteiras da inovaçãoDesign de experiência e as novas fronteiras da inovação
Design de experiência e as novas fronteiras da inovação
Carlos Rosemberg
 
MTA2 - Percurso Cognitivo
MTA2 - Percurso CognitivoMTA2 - Percurso Cognitivo
MTA2 - Percurso Cognitivo
Marcello Cardoso
 
Empreendedorismo UFMG - Design Sprint
Empreendedorismo UFMG - Design SprintEmpreendedorismo UFMG - Design Sprint
Empreendedorismo UFMG - Design Sprint
Ana Paula Batista
 
Oficina intensiva de design de interação
Oficina intensiva de design de interaçãoOficina intensiva de design de interação
Oficina intensiva de design de interação
Robson Santos
 
CRP-5215-0420-2014-08
CRP-5215-0420-2014-08CRP-5215-0420-2014-08
Design e Usabilidade na Web
Design e Usabilidade na WebDesign e Usabilidade na Web
Design e Usabilidade na Web
Marcelo Vianna
 
Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010
Mourylise Heymer
 
O processo de design de interação
O processo de design de interaçãoO processo de design de interação
O processo de design de interação
Robson Santos
 
Introdução ao Design de Interação
Introdução ao Design de InteraçãoIntrodução ao Design de Interação
Introdução ao Design de Interação
UTFPR
 

Mais procurados (20)

Engenharia dos cargos de UI, UX, PM
Engenharia dos cargos de UI, UX, PMEngenharia dos cargos de UI, UX, PM
Engenharia dos cargos de UI, UX, PM
 
Testes de Usabilidade
Testes de UsabilidadeTestes de Usabilidade
Testes de Usabilidade
 
Moderando Testes de Usabilidade
Moderando Testes de UsabilidadeModerando Testes de Usabilidade
Moderando Testes de Usabilidade
 
Design Sprint: seu MLP em até 5 dias.
Design Sprint: seu MLP em até 5 dias.Design Sprint: seu MLP em até 5 dias.
Design Sprint: seu MLP em até 5 dias.
 
Metodologias de Design de Interação
Metodologias de Design de InteraçãoMetodologias de Design de Interação
Metodologias de Design de Interação
 
Pesquisa com usuários utilizando o método Lean UX
Pesquisa com usuários utilizando o método Lean UXPesquisa com usuários utilizando o método Lean UX
Pesquisa com usuários utilizando o método Lean UX
 
MEX: Modelo Genérico de Experiência do Usuário
MEX: Modelo Genérico de Experiência do UsuárioMEX: Modelo Genérico de Experiência do Usuário
MEX: Modelo Genérico de Experiência do Usuário
 
Projeto de Interfaces - Aula 02
Projeto de Interfaces - Aula 02Projeto de Interfaces - Aula 02
Projeto de Interfaces - Aula 02
 
Como mimar seus usuários
Como mimar seus usuáriosComo mimar seus usuários
Como mimar seus usuários
 
Pesquisa de Guerrilha - Entendendo seu usuário com agilidade e baixo custo
Pesquisa de Guerrilha - Entendendo seu usuário com agilidade e baixo custoPesquisa de Guerrilha - Entendendo seu usuário com agilidade e baixo custo
Pesquisa de Guerrilha - Entendendo seu usuário com agilidade e baixo custo
 
Princípios de Design de Interação
Princípios de Design de InteraçãoPrincípios de Design de Interação
Princípios de Design de Interação
 
Design de experiência e as novas fronteiras da inovação
Design de experiência e as novas fronteiras da inovaçãoDesign de experiência e as novas fronteiras da inovação
Design de experiência e as novas fronteiras da inovação
 
MTA2 - Percurso Cognitivo
MTA2 - Percurso CognitivoMTA2 - Percurso Cognitivo
MTA2 - Percurso Cognitivo
 
Empreendedorismo UFMG - Design Sprint
Empreendedorismo UFMG - Design SprintEmpreendedorismo UFMG - Design Sprint
Empreendedorismo UFMG - Design Sprint
 
Oficina intensiva de design de interação
Oficina intensiva de design de interaçãoOficina intensiva de design de interação
Oficina intensiva de design de interação
 
CRP-5215-0420-2014-08
CRP-5215-0420-2014-08CRP-5215-0420-2014-08
CRP-5215-0420-2014-08
 
Design e Usabilidade na Web
Design e Usabilidade na WebDesign e Usabilidade na Web
Design e Usabilidade na Web
 
Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010
 
O processo de design de interação
O processo de design de interaçãoO processo de design de interação
O processo de design de interação
 
Introdução ao Design de Interação
Introdução ao Design de InteraçãoIntrodução ao Design de Interação
Introdução ao Design de Interação
 

Semelhante a Prototipação

InovaSession - Design Thinking 2012
InovaSession - Design Thinking 2012InovaSession - Design Thinking 2012
InovaSession - Design Thinking 2012
rcmello13
 
Design Thinking - Metodologia para Inovação
Design Thinking - Metodologia para InovaçãoDesign Thinking - Metodologia para Inovação
Design Thinking - Metodologia para Inovação
Paulo Oliveira
 
Metricas nas redes sociais
Metricas nas redes sociaisMetricas nas redes sociais
Metricas nas redes sociais
MOL Marketing Online
 
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
Melina Alves
 
Design Thinking: transformando a forma de pensar e resolver problemas
Design Thinking: transformando a forma de pensar e resolver problemasDesign Thinking: transformando a forma de pensar e resolver problemas
Design Thinking: transformando a forma de pensar e resolver problemas
Renata Tonezi
 
Curso de design thinking FIAP 2016 - MBA Gestão de Projetos
Curso de design thinking FIAP 2016 - MBA Gestão de ProjetosCurso de design thinking FIAP 2016 - MBA Gestão de Projetos
Curso de design thinking FIAP 2016 - MBA Gestão de Projetos
Julien Condamines
 
Alessandro Ribeiro | Fazemos nosso usuário sorrir
Alessandro Ribeiro | Fazemos nosso usuário sorrirAlessandro Ribeiro | Fazemos nosso usuário sorrir
Alessandro Ribeiro | Fazemos nosso usuário sorrir
UXPA-Rio
 
10 Fatos que você precisa saber sobre Design de Serviços
10 Fatos que você precisa saber sobre Design de Serviços10 Fatos que você precisa saber sobre Design de Serviços
10 Fatos que você precisa saber sobre Design de Serviços
.add
 
10 coisas que você precisa saber sobre Service Design
10 coisas que você precisa saber sobre Service Design10 coisas que você precisa saber sobre Service Design
10 coisas que você precisa saber sobre Service Design
Victor Gonçalves
 
Pesquisa e Experimentação Prática em Design
Pesquisa e Experimentação Prática em DesignPesquisa e Experimentação Prática em Design
Pesquisa e Experimentação Prática em Design
Carolina Palhano
 
Design Sprint - Método Google para Inovação - by Erica Marques
Design Sprint - Método Google para Inovação - by Erica MarquesDesign Sprint - Método Google para Inovação - by Erica Marques
Design Sprint - Método Google para Inovação - by Erica Marques
Erica Marques
 
Oficina de-design-thinking-elaine-andrade
Oficina de-design-thinking-elaine-andradeOficina de-design-thinking-elaine-andrade
Oficina de-design-thinking-elaine-andrade
Elaine Andrade
 
Palestra forum iot
Palestra forum iotPalestra forum iot
Palestra forum iot
Claudir Segura
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.
Jane Vita
 
Design Thinking na Indústria
Design Thinking na IndústriaDesign Thinking na Indústria
Design Thinking na Indústria
Denise Eler
 
Estratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web - BlogcampRJEstratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web - BlogcampRJ
Horácio Soares
 
Os Desafios do Design Mobile - Jun/2012
Os Desafios do Design Mobile - Jun/2012Os Desafios do Design Mobile - Jun/2012
Os Desafios do Design Mobile - Jun/2012
Horácio Soares
 
UXconf 2017 - Review
UXconf 2017 - ReviewUXconf 2017 - Review
UXconf 2017 - Review
Rafael Burity
 
Webinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerceWebinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerce
Horácio Soares
 
Workshop - Service Design
Workshop - Service DesignWorkshop - Service Design
Workshop - Service Design
Erico Fileno
 

Semelhante a Prototipação (20)

InovaSession - Design Thinking 2012
InovaSession - Design Thinking 2012InovaSession - Design Thinking 2012
InovaSession - Design Thinking 2012
 
Design Thinking - Metodologia para Inovação
Design Thinking - Metodologia para InovaçãoDesign Thinking - Metodologia para Inovação
Design Thinking - Metodologia para Inovação
 
Metricas nas redes sociais
Metricas nas redes sociaisMetricas nas redes sociais
Metricas nas redes sociais
 
Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7Campus Party_Design do dia a dia #Cpbr7
Campus Party_Design do dia a dia #Cpbr7
 
Design Thinking: transformando a forma de pensar e resolver problemas
Design Thinking: transformando a forma de pensar e resolver problemasDesign Thinking: transformando a forma de pensar e resolver problemas
Design Thinking: transformando a forma de pensar e resolver problemas
 
Curso de design thinking FIAP 2016 - MBA Gestão de Projetos
Curso de design thinking FIAP 2016 - MBA Gestão de ProjetosCurso de design thinking FIAP 2016 - MBA Gestão de Projetos
Curso de design thinking FIAP 2016 - MBA Gestão de Projetos
 
Alessandro Ribeiro | Fazemos nosso usuário sorrir
Alessandro Ribeiro | Fazemos nosso usuário sorrirAlessandro Ribeiro | Fazemos nosso usuário sorrir
Alessandro Ribeiro | Fazemos nosso usuário sorrir
 
10 Fatos que você precisa saber sobre Design de Serviços
10 Fatos que você precisa saber sobre Design de Serviços10 Fatos que você precisa saber sobre Design de Serviços
10 Fatos que você precisa saber sobre Design de Serviços
 
10 coisas que você precisa saber sobre Service Design
10 coisas que você precisa saber sobre Service Design10 coisas que você precisa saber sobre Service Design
10 coisas que você precisa saber sobre Service Design
 
Pesquisa e Experimentação Prática em Design
Pesquisa e Experimentação Prática em DesignPesquisa e Experimentação Prática em Design
Pesquisa e Experimentação Prática em Design
 
Design Sprint - Método Google para Inovação - by Erica Marques
Design Sprint - Método Google para Inovação - by Erica MarquesDesign Sprint - Método Google para Inovação - by Erica Marques
Design Sprint - Método Google para Inovação - by Erica Marques
 
Oficina de-design-thinking-elaine-andrade
Oficina de-design-thinking-elaine-andradeOficina de-design-thinking-elaine-andrade
Oficina de-design-thinking-elaine-andrade
 
Palestra forum iot
Palestra forum iotPalestra forum iot
Palestra forum iot
 
Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.Criando produtos e serviços reais para o mundo virtual.
Criando produtos e serviços reais para o mundo virtual.
 
Design Thinking na Indústria
Design Thinking na IndústriaDesign Thinking na Indústria
Design Thinking na Indústria
 
Estratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web - BlogcampRJEstratégia, Design e Acessibilidade Web - BlogcampRJ
Estratégia, Design e Acessibilidade Web - BlogcampRJ
 
Os Desafios do Design Mobile - Jun/2012
Os Desafios do Design Mobile - Jun/2012Os Desafios do Design Mobile - Jun/2012
Os Desafios do Design Mobile - Jun/2012
 
UXconf 2017 - Review
UXconf 2017 - ReviewUXconf 2017 - Review
UXconf 2017 - Review
 
Webinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerceWebinar Usabilidade no E-commerce
Webinar Usabilidade no E-commerce
 
Workshop - Service Design
Workshop - Service DesignWorkshop - Service Design
Workshop - Service Design
 

Mais de Marcello Cardoso

Design de Interação - Método de Inspeção Semiótica
Design de Interação - Método de Inspeção SemióticaDesign de Interação - Método de Inspeção Semiótica
Design de Interação - Método de Inspeção Semiótica
Marcello Cardoso
 
Percurso cognitivo
Percurso cognitivoPercurso cognitivo
Percurso cognitivo
Marcello Cardoso
 
User Story Mapping
User Story MappingUser Story Mapping
User Story Mapping
Marcello Cardoso
 
Palestra o marketing não funciona mais sozinho - Fumsoft
Palestra   o marketing não funciona mais sozinho - FumsoftPalestra   o marketing não funciona mais sozinho - Fumsoft
Palestra o marketing não funciona mais sozinho - Fumsoft
Marcello Cardoso
 
UNA - Eng Usa '12 - aula 04
UNA  - Eng Usa '12 - aula 04UNA  - Eng Usa '12 - aula 04
UNA - Eng Usa '12 - aula 04
Marcello Cardoso
 
UNA - Eng Usa '12 - aula 03
UNA  - Eng Usa '12 - aula 03UNA  - Eng Usa '12 - aula 03
UNA - Eng Usa '12 - aula 03
Marcello Cardoso
 
UNA - Eng Usa '12 - aula 02
UNA  - Eng Usa '12 - aula 02UNA  - Eng Usa '12 - aula 02
UNA - Eng Usa '12 - aula 02
Marcello Cardoso
 
UNA - Eng Usa '12 - aula 05
UNA  - Eng Usa '12 - aula 05UNA  - Eng Usa '12 - aula 05
UNA - Eng Usa '12 - aula 05
Marcello Cardoso
 
Una testes - aula 07 e 08
Una   testes - aula 07 e 08Una   testes - aula 07 e 08
Una testes - aula 07 e 08
Marcello Cardoso
 
Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06
Marcello Cardoso
 
Una - Testes de usabilidade - aula 05
Una - Testes de usabilidade - aula 05Una - Testes de usabilidade - aula 05
Una - Testes de usabilidade - aula 05
Marcello Cardoso
 
Una - Testes de usabilidade - aula 04
Una - Testes de usabilidade - aula 04Una - Testes de usabilidade - aula 04
Una - Testes de usabilidade - aula 04
Marcello Cardoso
 
Una - Testes de usabilidade - aula 03
Una - Testes de usabilidade - aula 03Una - Testes de usabilidade - aula 03
Una - Testes de usabilidade - aula 03
Marcello Cardoso
 
Una - Testes de usabilidade - aula 01 e 02
Una - Testes de usabilidade - aula 01 e 02Una - Testes de usabilidade - aula 01 e 02
Una - Testes de usabilidade - aula 01 e 02
Marcello Cardoso
 
Newton Paiva - DI - Aula 02
Newton Paiva - DI - Aula 02Newton Paiva - DI - Aula 02
Newton Paiva - DI - Aula 02
Marcello Cardoso
 
Newton Paiva - DI - Aula 03
Newton Paiva - DI - Aula 03Newton Paiva - DI - Aula 03
Newton Paiva - DI - Aula 03
Marcello Cardoso
 
Newton Paiva - DI - Aula 04
Newton Paiva - DI - Aula 04Newton Paiva - DI - Aula 04
Newton Paiva - DI - Aula 04
Marcello Cardoso
 
Newton Paiva - DI - Aula 05
Newton Paiva - DI - Aula 05Newton Paiva - DI - Aula 05
Newton Paiva - DI - Aula 05
Marcello Cardoso
 
Newton Paiva - DI - Aula 06
Newton Paiva - DI - Aula 06Newton Paiva - DI - Aula 06
Newton Paiva - DI - Aula 06
Marcello Cardoso
 
Newton Paiva - DI - Aula 01
Newton Paiva - DI - Aula 01Newton Paiva - DI - Aula 01
Newton Paiva - DI - Aula 01
Marcello Cardoso
 

Mais de Marcello Cardoso (20)

Design de Interação - Método de Inspeção Semiótica
Design de Interação - Método de Inspeção SemióticaDesign de Interação - Método de Inspeção Semiótica
Design de Interação - Método de Inspeção Semiótica
 
Percurso cognitivo
Percurso cognitivoPercurso cognitivo
Percurso cognitivo
 
User Story Mapping
User Story MappingUser Story Mapping
User Story Mapping
 
Palestra o marketing não funciona mais sozinho - Fumsoft
Palestra   o marketing não funciona mais sozinho - FumsoftPalestra   o marketing não funciona mais sozinho - Fumsoft
Palestra o marketing não funciona mais sozinho - Fumsoft
 
UNA - Eng Usa '12 - aula 04
UNA  - Eng Usa '12 - aula 04UNA  - Eng Usa '12 - aula 04
UNA - Eng Usa '12 - aula 04
 
UNA - Eng Usa '12 - aula 03
UNA  - Eng Usa '12 - aula 03UNA  - Eng Usa '12 - aula 03
UNA - Eng Usa '12 - aula 03
 
UNA - Eng Usa '12 - aula 02
UNA  - Eng Usa '12 - aula 02UNA  - Eng Usa '12 - aula 02
UNA - Eng Usa '12 - aula 02
 
UNA - Eng Usa '12 - aula 05
UNA  - Eng Usa '12 - aula 05UNA  - Eng Usa '12 - aula 05
UNA - Eng Usa '12 - aula 05
 
Una testes - aula 07 e 08
Una   testes - aula 07 e 08Una   testes - aula 07 e 08
Una testes - aula 07 e 08
 
Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06Una - Testes de usabilidade - aula 06
Una - Testes de usabilidade - aula 06
 
Una - Testes de usabilidade - aula 05
Una - Testes de usabilidade - aula 05Una - Testes de usabilidade - aula 05
Una - Testes de usabilidade - aula 05
 
Una - Testes de usabilidade - aula 04
Una - Testes de usabilidade - aula 04Una - Testes de usabilidade - aula 04
Una - Testes de usabilidade - aula 04
 
Una - Testes de usabilidade - aula 03
Una - Testes de usabilidade - aula 03Una - Testes de usabilidade - aula 03
Una - Testes de usabilidade - aula 03
 
Una - Testes de usabilidade - aula 01 e 02
Una - Testes de usabilidade - aula 01 e 02Una - Testes de usabilidade - aula 01 e 02
Una - Testes de usabilidade - aula 01 e 02
 
Newton Paiva - DI - Aula 02
Newton Paiva - DI - Aula 02Newton Paiva - DI - Aula 02
Newton Paiva - DI - Aula 02
 
Newton Paiva - DI - Aula 03
Newton Paiva - DI - Aula 03Newton Paiva - DI - Aula 03
Newton Paiva - DI - Aula 03
 
Newton Paiva - DI - Aula 04
Newton Paiva - DI - Aula 04Newton Paiva - DI - Aula 04
Newton Paiva - DI - Aula 04
 
Newton Paiva - DI - Aula 05
Newton Paiva - DI - Aula 05Newton Paiva - DI - Aula 05
Newton Paiva - DI - Aula 05
 
Newton Paiva - DI - Aula 06
Newton Paiva - DI - Aula 06Newton Paiva - DI - Aula 06
Newton Paiva - DI - Aula 06
 
Newton Paiva - DI - Aula 01
Newton Paiva - DI - Aula 01Newton Paiva - DI - Aula 01
Newton Paiva - DI - Aula 01
 

Prototipação

  • 1. 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 mcardoso@latitude14.com.br #1
  • 2. (= Prazer, meu nome é Marcello!
  • 3. 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: latitude14 CNPJ: 07.807.389/0001-20 Representante legal: Marcello de Campos Cardoso E-mail: mcardoso@latitude14.com.br
  • 4.
  • 5. 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
  • 6. Antes de mais nada, vamos falar de problemas.
  • 7. A vida é permeada de problemas e desafios.
  • 8. 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”. 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?
  • 9. Que tal um iPhone pro Nicolau?
  • 10. melhor ≠ mais sofisticado solução simples = solução elegante
  • 11. FO CO na demanda R EA L.
  • 12. FO CO na demanda R EA L.
  • 13. 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. “É 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?
  • 14. OXO - Good Grips maior acessibilidade pode ser melhor para TODOS
  • 15. maior acessibilidade pode ser melhor para TODOS
  • 16. 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” Vamos pensar um cortador de legumes seguro e interessante?
  • 17. Mushroom Chopper boa solução resolve mais de um problema.
  • 18. boa solução resolve mais de um problema.
  • 19. 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. “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.”
  • 20. YI | Sound Invention A solução pode exist ir em outro lugar!
  • 21. Existem várias soluções para um problema.
  • 22. Algumas são “robustas”. Evolution Pillow
  • 23. Music Branch Headphone Splitter Algumas são mais simples.
  • 24. 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. “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.”
  • 26. 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.
  • 27. Uma solução inserida no projeto é uma Solução de design
  • 28. Uma solução inserida no projeto é uma Solução de design
  • 29. Uma solução inserida no projeto é uma Solução de design
  • 30. Uma solução inserida no projeto é uma Solução de design
  • 31. Uma solução inserida no projeto é uma Solução de design
  • 32. Uma solução inserida no projeto é uma Solução de design
  • 33. Uma solução inserida no projeto é uma Solução de design
  • 34. mesmo o que funciona pode melhorar.
  • 35. mesmo o que funciona pode melhorar.
  • 36. mesmo o que funciona pode melhorar.
  • 37. mesmo o que funciona pode melhorar.
  • 38. mesmo o que funciona pode melhorar.
  • 39. mesmo o que funciona pode melhorar.
  • 40. mesmo o que funciona pode melhorar.
  • 41. mesmo o que funciona pode melhorar.
  • 42. Para resolver bem, precisamos entender o problema... ...pensar simples... ... e pensar sem limit es. “Se eu perguntasse para as pessoas o que queriam, me diriam cavalos mais rápidos.” -Henry Ford
  • 43. Pe n s a r s i m p l e s a p r i n c í p i o reg ra de Pa re t t o, M VP
  • 44. concentrar onde há maior valor de USO começar pela espinha e IT E RA R
  • 45. não focar em t ecnologia... ...mas em comportamento
  • 46. O que eles têm em comum?
  • 48. todo mundo é designer!
  • 49. Agora designers, Vamos pensar em um problema!
  • 50. TO DO DONE Vamos pensar um problema cot idiano Q ual o problema? De quem é o problema? (5 por quês) Q uem está envolvido no problema? Em grupo! registrem pois vamos apresentar amanhã! t empo: 15'
  • 52. pode ser com ou sem metodologia
  • 53. Qual é o melhor camin h o pa ra cria r soluções?
  • 57.
  • 58. tablets da microsoft (2001): fracasso de vendas
  • 59. iPad da Apple (2010): 15 milhões vendidos em 1 ano
  • 60. Software difícil é fácil de projetar. Software fácil é difícil de projetar.
  • 61. sorte 0,00001% ... 50% metodologia ...15%, 25%, 40%, 70%...
  • 62. Metodologia é um conjunto de técnicas
  • 63. Para alcançar um resultado mensurável, precisamos saber o que medir
  • 64. O que é usabilidade?
  • 65. Usabilidade é característica de um sistema que determina sua qualidade de uso.
  • 66. User Experience é o resultado das interações do usuário com um sistema
  • 67.
  • 68. Arquitetura da Informação é parte do Design de interação focada em levantar, categorizar e organizar os conteúdos e taxonomia de um sistema.
  • 69. Design de Interação é a metodologia para projetar sistemas com a melhor usabilidade.
  • 70. Design Centrado no Usuário é a abordagem onde o comportamento do usuário determina os requisitos do sistema.
  • 71. Quem define o que é fácil de ser usado?
  • 72. Usuários devemos perguntá-los como fazer nosso trabalho?
  • 74. o paciente sabe da dor, mas o médico conhece o remédio.
  • 75. Devemos identificar seus padrões de comportamento e projetarmos soluções adequadas.
  • 76. Pesquisa é minerar dados e colher informações.
  • 78. “Possuímos 6 mil cadastros (Isso é um dfeamdininoos..” )
  • 79. 6 mil fem / 3 mil masc = 2/3 fem Isso ( é um informação.)
  • 80. (Informação são ) dados tratados.
  • 81. Informações Ajudam a evitar problemas clássicos de escopo de projeto
  • 82. 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ê
  • 83. O usuário elástico “Quem vai usar isso? - Todo Mundo!” usuário avançado / usuário iniciante ≠ usuário real
  • 84. Algumas técnicas de pesquisa: ‣ Avaliação do SAC, feedback, ‣ Análise métrica, ‣ Benchmarking, ‣ Etnografia online, ‣ Entrevistas, ‣ Questionários, ‣ Focus group ‣ etc...
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91. AS 3 FORÇAS DA INOVAÇÃO Pessoas Negócio Te c n o l o g i a
  • 93.
  • 94. CICLO DE VIDA DO PRODUTO pesquisa prototipação validação
  • 95.
  • 96.
  • 97.
  • 98. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Idear é se libertar
  • 99. 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.
  • 100. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Metas de Usabilidade 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 dele Eficiência: Como um produto auxilia a execução de suas tarefas com o mínimo de recursos
  • 101. 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? Q ual a ordem das metas que devem ser priorizadas? Q ual plataforma? Concorrent es (diretos e indiretos)? Requisitos? Diferenciais?
  • 102. 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 mcardoso@latitude14.com.br #2
  • 103. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | recapitulando…
  • 104. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Usabilidade é objetivo ...é atributo que define a facilidade de uso Design de interação é metodologia ...métodos e técnicas para criar produtos mais usáveis Design Centrado no Usuário é abordagem ...é aplicar técnicas envolvendo o usuário
  • 105.
  • 106. AS 3 FORÇAS DA INOVAÇÃO Pessoas Negócio Te c n o l o g i a
  • 107. et nografia Be n c hma r k in g pesquisa desenvolvimento validação Questionários e entrevistas protot ipação personas St o r y mapping Card S o rt ing Análise Heurística Pe r c u r s o Cognit ivo MIS Método de Inspeção Semiótica focus group testes de usabilidade MA C Método de Avaliação de comunicabilidade net nografia
  • 108. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Protótipo ~= modelo
  • 109. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Podem ser de baixa ou alta resolução Baixa: Para explorar ideias, conceitos, fluxos Alta: para validar decisões pontuais
  • 110. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | O que são modelos?
  • 111. 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.
  • 112. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | The helical model
  • 113. 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
  • 114. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 115. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 116. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Por que usar modelos?
  • 117. 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.
  • 118. 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.
  • 119. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Prototipação quebrando ovos para fazer omeletes
  • 120. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Prototipação física apple lisa, 82
  • 121. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 122. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 123. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | macbook, 82 tablet 83
  • 124. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | earbuds 83 telefonia móvel
  • 125. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | relógio e fone de ouvido
  • 126. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | google glass
  • 127. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 128. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 129. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 130. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | google glass
  • 131. 1o passo: Determinar tipos de usuários (Uma boa ideia é focar em papéis) 1. Gourmets, Viajantes, Namorados…
  • 132. 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:
  • 133. 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)
  • 134. Nome, Idade Papel descrição, frase emblemática Tarefas Necessidades no no sistema para necessidades mundo real
  • 135. 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 caract erísticas. Escolher uma como focal. t empo: 30’
  • 136. 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
  • 137. 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
  • 138. 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
  • 139. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | É isso aí! “Devemos criar exatamente quanta documentação necessitamos para executar bem um projeto, e não mais.” -Dan Saffer
  • 140. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 141. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 142. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Cenário “São protótipos feitos de palavras” • 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
  • 143. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Cenário Uma imagem vale mil palavras. Mas as palavras certas podem valer algumas boas imagens. Lúcia Maria loga em sua conta Sacolao.com. Vê seu pedido da semana passada e decide usá-lo de novo para esta semana. Remove alguns itens arrastando-os de sua Cestinha®, e o valor ajusta automaticamente. Satisfeita com a compra, clica no botão Entrega rápida e confirma o débito em seu cartão de crédito previamente salvo. A tela de confirmação informa para esperar a entrega nas próximas 2 horas.
  • 144. 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 caract erísticas. Escolher uma como focal. Criar um cenário (primeiro uso ou tarefa chave) e aplicá-lo em sua Persona Focal. . t empo: 30’
  • 145. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Task flows diagrama de fluxo • Fluxos são tão importantes quanto telas • Quanto mais “cascata”, mais robusto e formal o task flow
  • 146. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Task flows diagrama de fluxo
  • 147. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | FFFFFFFF FFFFFFFF FFFFFFFF UUUUUUU UUUUUUU
  • 148. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Task flows diagrama de fluxo Fluxos são interações de um indivíduo, elementos / escolhas
  • 149. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Task flows diagrama de fluxo Exemplo: Adicionando um item na TO-DO do Basecamp.
  • 150. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Task flows diagrama de fluxo • É rápido de fazer e simples de enxergar. • Ideal para sprints!
  • 151. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Task flows diagrama de fluxo 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
  • 152. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Twitterverse - Emily Chang
  • 153. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Storyboards
  • 154. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Storyboards Técnica da publicidade, HQs e cinema, que ilustra interações complexas
  • 155. 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
  • 156. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Wireframes protótipos estruturais do sistema Registram as funcionalidades do produto, seus aspectos técnicos e sua lógica de negócios, sem a influência do design visual (branding, layout) Podem ser usados para validar ideias Podem ser usados para testes com usuários
  • 157. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Wireframes Substituem documentos mais burocráticos, são especificações visuais comprometidas com: • Estrutura • Arquitetura da informação • Controles (padrões de interação) • Conteúdo
  • 158. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Jack Dorsey’s - Twitter (stat.us)
  • 159. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Biz Stone - retweet
  • 160. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Dan Catt’s - Flickr Places
  • 161. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | tela de perfil do Vimeo - Sockyung ‘Sox’ Hong
  • 162. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 163. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 164. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 165. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 166. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 167. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 168. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | papel=desapego
  • 169. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 170. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 171. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 172. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 173. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 174. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br |
  • 175.
  • 176.
  • 177.
  • 178.
  • 179.
  • 180.
  • 181.
  • 182.
  • 183. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Prototipando e testando lo fi http://www.youtube.com/watch?v=k9mTvt0LXgk
  • 184. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | > fidelidade
  • 185. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | mock ups / comps / layouts
  • 186.
  • 187.
  • 188.
  • 189.
  • 190.
  • 191. Marcello de Campos Cardoso - www.mcardoso.com.br | www.latitude14.com.br | Lembrem que podemos mudar o que foi decidido. IDEAÇÃO = CA OS!
  • 192. Marcello Cardoso (31) 9793-6456 | mcardoso@latitude14.com.br | skype: mcardoso82 essa apresentação e seu conteúdo não deve ser reproduzida, apresentada ou reutilizada em nenhuma circustância.