O documento discute o processo de design thinking, definindo-o como centrado no ser humano e voltado para a compreensão das necessidades do usuário. Apresenta o processo IDEO como um exemplo com etapas de descoberta, interpretação, ideação, experimentação e evolução. Resume também um caso de estudo sobre o website de uma marca de chips.
2. rEflExão/ExErcício
Pense em um produto,
pense em um serviço,
pense na sua empresa, e
tudo que for dito, tente
aplicar a isso.
3. o pEnsamEnto do dEsignEr
O que é design thinking?
O que é design?
4. dEsign
“O design, desenho industrial (português brasileiro)
ou desenho ou modelo (português europeu) é a
configuração, concepção, elaboração e especificação
de um artefato. Essa é uma atividade técnica e criativa,
normalmente orientada por uma intenção ou objetivo,
ou para a solução de um problema. Simplificando,
pode-se dizer que design é projeto.”
Wikipedia
5. dEsign é projEto
design é projeto porque não se trata de somente de uma
execução estética de algo.
se trata de planejar, com objetivos claros pré-definidos
focar na resolução de problemas de design.
é seguir uma metodologia fechada ou mutante que ajudará
a encontrar respostas para os problemas.
6. E quEm é o dEsignEr?
fazer design e ser designer é sempre ter o desejo de
melhorar a vida das pessoas.
uma boa sinalização não é feita somente de sinais
e letras, ela é feita do desejo de fazer com que as
pessoas chegem a um lugar de forma mais fácil,
rápida e inteligente.
9. dEsign thinking
trabalhar design thinking é pensar em inovação, é
diretamente relacionada com o que se fala hoje em
dia de design de serviços.
porém, pode ser aplicado para muitos tipos de
sistemas de design.
10. dEsign thinking
“Design Thinking, ou pensamento de Design, é uma abstração
do modelo mental utilizado há anos pelos designers para dar
vida a idéias. Esse modelo mental e seus poderosos conceitos
podem ser aprendidos e utilizados por qualquer pessoa e
aplicados em qualquer cenário de negócio ou social.”
tim Brown
14. dEsign thinking
é um processo experimental, colaborativo, otimista e sempre
inovador, pois nesse processo é permitido o erro, o estudo, e
pode ajudar a mudar uma mentalidade metodológica travada
porque é voltada a compreender as necessidades de quem
usará aquele produto ou serviço.
com a colaboração de todos os envolvidos, a discussão crítica
e vários pontos de vista diferenciados. é possível mudar
métodos e até mesmo mudar algo que já estava definido.
15. dEsign thinking
algumas pessoas defendem que no futuro imediato os
produtos venderão pelo design.
nunca se falou tanto de design como hoje em dia.
18. a quEstão é...
Onde quero chegar?
o equilíbrio é a peça chave para o sucesso de qualquer projeto,
existe um ponto de integração entre a tecnologia, o usuário e
os objetivos de negócio que deve ser trabalhado.
por isso a conversa deve sempre acontecer com o pensamento
em como cada área entende e trabalha o assunto discutido.
24. PrOcessO cOMuM
• Falta planejamento
• Método empírico
(tentativa e erro)
• Design em segundo plano
• Funcionalidades demais
• Pensamento no usuário?
O Office XP foi lançado
depois de muito tempo sem
existir atualização no Office,
ele traz uma somatória de
funcionalidades, o programa
não foi recriado mas sim
atualizado.
office xp
26. Design cOMO
eMbelezaMenTO
• Beleza vende?
• É inovador?
• Atende o usuário?
• Deixar “mais bonito”
resolve o problema?
Recebendo muitas
críticas e esperanças o
Windows Vista foi uma
aposta de remodelação da
Microsoft que esbarrou em
problemas tecnológicos de
performance e segurança.
Windows vista
28. Design cOMO inOvaçãO
• Aumento de qualidade
do produto e diminuição
do retrabalho
• Velocidade reduzida?
• Riscos elevados
O importante do
pensamento em inovação é
que por mais que se pense
no usuário somente, corre-
se o risco de se esbarrar em
algum problema técnico ou
que não esteja alinhado às
questões comerciais que são
importantes no processo.
office 2007
30. Design cOMO
esTraTÉgia
• Pesquisa trabalha junto
com o desenvolvimento
• Possibilidades maiores
de inovação
• Apesar do custo elevado
fortalece a marca
• A cultura da empresa é
importante
Além de se pensar sobre a
cultura organizacional deve-
se pensar sobre a Identidade
Corporativa, como a empresa
se apresenta ao mercado
pois é muito perigoso vender
ipad uma postura e entregar
outro tipo de produto.
31. cultura E ética
independente da postura, é importante a empresa não
enfatizar certos aspectos que não são atributos essenciais de
sua marca.
32. púBlico-alvo
“Alvo é passivo, só vale como parte de um jogo, só existe para
ser espetado; alvo nunca ganha”
lígia fascioni
não trabalhamos mais com alvos, mesmo porque eles se
mexem e participam do processo, como podemos considerar
esse público agora que a empresa não consegue mais
esconder seus atributos essenciais no meio digital?
39. Empatia
tudo começa com a empatia.
quanto mais pregnância o usuário tiver com o assunto, melhor
a mensagem vai ser entendida.
uma pré-conhecimento do assunto ajuda bastante nessa
identificação. trabalhar com a linguagem adequada ajudará no
aumento do acerto.
41. idEo
uma empresa de design baseada na idéia de trabalhar com o
design centralizado no ser humano.
trabalham criando desde objetos de design a idéias de
serviços para empresas.
42. tim BroWn
um designer industrial por formação, tim ganhou inúmeros
prêmios de design e já expôs trabalhos no museu de arte
moderna de nova york, axis gallery, em tóquio, e o museu do
design, em londres.
44. momento de pensar como será o
processo de trabalho.
a partir de um desavio, como encará-lo.
ETAPAS:
DISCOVERY 1. definir o desafio
2. preparar a pesquisa
3. procurar inspiração
45. DISCOVERY
1. DEfinir o DESAfio
• Entender o desafio
• Definir sua audiência
• Montar um time
• Compartilhar conhecimento
46. DISCOVERY
2. PrEPArAr A PESquiSA
• Fazer um plano
• Identificar as fontes de inspiração
• Convidar os participantes da pesquisa
• Construir um questionário de pesquisa
• Preparar o trabalho de campo
• Praticar as técnicas de pesquisa
47. DISCOVERY
3. JunTAr inSPirAção
• Inserir-se no contexto do projeto
• Aprender individualmente
• Aprender em grupos
• Aprender com especialistas
• Aprender observando
• Aprender com documentações
criadas pelas pessoas
• Procurar inspiração em novos lugares
48. hora de entender o que foi pesquisado,
de transformar o conteúdo colhido em
uma linha de pensamento.
Organizar as informações.
INTERPRETATION ETAPAS:
1. contar histórias
2. procurar por significados
3. quadro de oportunidades
50. DISCOVERY
2. ProcurAr Por SignificADoS
• Procurar temáticas
• Promover os sentidos das descobertas
• Definir perspectivas
51. DISCOVERY
3. JAnElAS DE oPorTuniDADES
• Criar um lembrete visual
• Promover os sentidos das descobertas
• Elabore insights usuais
52. momento de gerar idéias, onde
o brainstorm ajuda a conceber
expansívelmente e sem restrições.
“A melhor forma de ter uma boa idéia é
ter muitas idéias.”
ETAPAS:
IDEATION
1. contar histórias
2. procurar por significados
3. quadro de oportunidades
53. IDEATION
1. gErAr iDéiAS
• Preparar o brainstorm
• Facilitar o brainstorm
• Selecionar idéias promissoras
• Construir para pensar
55. IDEATION
As sete regras do brainstorming na fase de
geração de idéias
1 » Adie o julgamento – não existem más idéias nesta etapa.
haverá tempo mais tarde para julgá-las.
2 » estimule idéias radicais – quase sempre são as idéias
radicais que geram inovação. é sempre mais fácil trazer idéias à
realidade mais tarde!
3 » Construa sobre as idéias dos outros – pense em “e…” em
vez de ‘mas…’. se você não gosta de alguma idéia, desafie a si
mesmo a construir algo sobre essa idéia e torná-la melhor. ao
entrar na sala, deixe o ego do lado de fora.
nei grando
56. IDEATION
4 » Mantenha o foco no tópico do brainstorming - os melhores
resultados são obtidos quando todos mantiverem a disciplina.
5 » Seja visual – tente recrutar o lado lógico e o lado criativo
do cérebro.
6 » Somente uma conversa por vez – permita que idéias sejam
ouvidas para que outras idéias se criem sobre elas.
7 » Almeje quantidade – Estabeleça um objetivo alto para
o número de idéias a serem criadas no brainstorming e
ultrapasse-o! lembre-se de que não há necessidade de explicar
exaustivamente a idéia já que ninguém está julgando. idéias
devem fluir rapidamente.
nei grando
58. agora as idéias ganham vida em forma
de protótipos.
momento de aprender com esses
protótipos, entender a tangibilidade
dessas idéias e ver como refiná-las.
EXPERIMENTATION
ETAPAS:
1. criar protótipos
2. ver feedbacks
61. prototipar!
os protótipos são ferramentas importantes no design em si,
seja no design gráfico, no de produto e principalmente no
digital, eles tem o objetivo de identificar erros e acertos no
projeto, com o protótipo, se aprende muito.
http://www.youtube.com/watch?v=g32jmzkrddc
63. EXPERIMENTATION
2. vEr fEEDbAck (TESTES)
• Faça um plano para o teste
• Identifique as fontes de feedbacks
(participantes dos testes)
• Convide os participantes
• Crie um questionário guia
• Facilite as conversações
• Guarde aprendizados com os feedbacks
64. agora começa o desenvolvimento do
conceito, hora de planejar os próximos
passos, entender quem pode ajudar a
relizar essa idéia.
a documentação do processo é um
ponto importante.
EVOLUTION ETAPAS:
1. avaliar aprendizados
2. construir a experiência
66. EVOLUTION
2. conSTruir A ExPEriênciA
• Identificar o que é necessário
• Lançar o conceito
• Construir parcerias
• Planejar os próximos passos
• Documentar o progresso
• Compartilhar a história
68. processo - concepção
planejamento
criação produto gerência de
projetos
tecnologia
69. processo - produção
Arquitetura de
Informação
Arte Tecnologia Entrega inicial Q.A.
Benchmark,
análise de Definição do
concorrência e conceito Entrega
outras análises e meta para
o novo site. Final.
necessárias.
Conteúdo Aprovação Q.A. Aprovação
70. processo - arquitetura de informação e user Experience
PESQUISA DE TENDÊNCIAS
TECNOLÓGICAS E DE PRESENÇA
Benchmark
produto
existente
Prototipação
Análise da situação nova Desenho da interação e testes de
proposta e navegação
atual / Estudo do Objeto usabilidade
Análise heurística Fluxogramas de interação e navegação
Cardsorting Wireframe
Testes de usabilidade Mind Maps e Mood Boards
71. rEsumo do procEsso criativo - story tElling
• Reuniões com atendimento, gerência de projetos,
tecnologia, planejamento e criação.
• Definição de idéias, caminhos e estratégias
• Monitoramento de mídias sociais
• Pesquisa com pedagogos e crianças
• Conexão com o conceito do adulto + criança + retrô
74. do quE sE trata?
se trata de gerar “o momento em que tudo está
perfeito” se trata de fazer com que tudo o que o
usuário use seja mais fácil e melhor, se trata fazer com
que o uso daquele sistema, ferramenta ou serviço seja
o melhor possível, que gere aprendizado, afetividade
e lembrança.
75. usEr ExpEriEncE
“Algumas pessoas dizem que design é solução de
problemas. É óbvio que designers resolvem
alguns problemas, mas isso os dentistas também
fazem. Design é uma forma de invenção cultural.”
jack schulze
79. “Design is not just what
it looks like and feels like.
Design is how it works.”
steve jobs
80.
81. usEr ExpEriEncE
o iphone ganhou espaço pela sua curva de
aprendizado pequena e pela integração que ele
permite com outros dispositivos da apple.
a interface é um ponto importante neste ponto. isso
nos leva a pensar nas características do design, que
são cada dia mais abrangentes.
o design agora é um espaço de multilinguagem, e
muitos recursos podem ser utilizados.
82. visual Sonoro olfativo
?
gestual Tátil E o que mais?
83. usEr ExpEriEncE
Em quase tudo que usamos há design, de revistas à
embalagens, de cadeiras a mouses de computadores,
de maçanetas de porta à assentos de carros, tudo
de alguma forma foi pensado para atender uma
necessidade.
Essa necessidade deve ser levada em consideração, e
além dela, o usuÁrio também, o “rei” do designer.
86. 1. Fácil identificação
o nome do medicamento é impresso
no topo da embalagem.
2. cor vermelha
a cor vermelha é o símbolo universal
para alerta.
3. Hierarquia de informação
nome do medicamento, posologia,
data de validade organizadas de
acordo com sua importância e uso
4. economia de papel
a forma e posição do papel gera um
melhor aproveitamento por folha e
facilita a visualização
http://nymag.com/nymetro/health/features/11700/
87. 5. Identificação por cor
por cores customizadas é possível
identificar e separar medicamentos
quando usados por mais de uma
pessoa em casa.
6. Card com informações extras
mais difícil de perder, o cartão fica
atrás da embalagem e explica com
detalhes as informações sobre o
medicamento
7. Posologia
identificação da posologia, quantos
dias dura o tratamento e quantas
vezes por dia se utiliza.
http://nymag.com/nymetro/health/features/11700/
88. Packaged APIs
Design
Deliverables
Interaction
Solutions
Architecting the
Usability Design
Technology
Prototyping
Back-End
Creative Design Information
inking (Visual & UI) Architecture
Flash
Progra mming
AJAX
(JavaScript)
Designing the
Experience
Content User
Research DOM
Front-End Scripting
User Experience Development
CSS Delivering the
Problem
Accessibility Experience
Framing Business
Intelligence
User
Markup
Defi ning the Agents
Problem Requirements Account
Gathering / Project Mgmt.
Research
Mgmt.
Managing the
Project
http://garrettdimon.com/pages/improving_interface_design
89. Experiência do Usuário
Encontrabilidade Continuidade
Arquitetura da Informação Design de Serviços
Usabilidade Socialidade
Design de Interação
faber ludens
96. planEjando ux
Basicamente nada é criado sem uma base sólida de
pesquisa, imersão e entendimento do público e do
uso do que será criado.
por isso pode-se e deve-se fazer levantamentos sócio-
demográficos, ver estatísticas de navegação, gerar
testes de usabilidade, testes a/B, o que for possível.
98. fErramEntas
Existem muitas ferramentas para pesquisa e definição
de caminhos, um processo de design thinking mais
complexo pode ser formatado, mas também itens
pulverizados podem ajudar.
mood Boards, mind maps e diagramas podem ser
bons caminhos.
99. mood Board
ferramenta muito utilizada no processo de design
estratégico, é um “facilitador de pensamento”, por
conter informações .
as imagens contidas nele auxiliam o processo de
definição dos caminhos a serem trabalhados.
a idéia é criar esse processo de imersão, de
atmosfera, humor. imagens, tecidos, texturas, tudo
pode ser inserido nele.
http://www.scrapblog.com
100.
101.
102. mind map
Dentre muitas funções do Mind Map, uma delas é
definir os caminhos de um projeto, ação, comunicação
ou até mesmo funcionamentos de um sistema.
ajuda a planejar as etapas e identificar os caminhos
de uma forma visual e intuitiva.
http://www.mindmeister.com
104. diagrama dE afinidadEs
Método para ordenar idéias, informações ou ações, a
partir de uma classificação por grupos, as informações
podem ser agrupadas e classificadas.
Facilita o arranjo das informações porque é intuitivo,
rápido e ajuda na discussão dos resultados.
http://nform.com/tradingcards/affinity-diagram
105.
106. pErsonas
a definição de um “personagem” para pesquisa,
na técnica de personas, é traçado um perfil de um
possível usuário, suas características básicas, como ele
se relacionaria com o sistema e com o seu núcleo de
convivência, uma síntese da personalidade.
pode ser feito como uma descrição de um dia de
atividades, somente como uma listagem ou até
mesmo criando-se um perfil “fake” em uma rede social
para testes.
108. ÁrvorE dE tarEfas E Etapas
É a listagem de todas as ações necessárias para a
interação no sistema ou site.
pode conter os itens de curva de aprendizado, pode
conter as interações principais ou as interações entre
os usuários do sistema.
serve como guia para programação, para
entendimento do tempo de interação e quantidade de
páginas a serem criadas.
109.
110.
111. Estudo
app para economia de combustível.
por intermédio da colaboração entre os usuários,
o sistema apontaria os melhores locais para
abastecimento, os melhores caminhos e também o
rendimento médio do veículo.
112.
113.
114.
115. Estudo/casE
app para interação entre os amigos.
com o conceito de integrar os amigos e fazer coisas
diferenciadas, o app para facebook instigava as
pessoas a convidar os amigos para atividades no
mínimo estranhas.
116.
117.
118.
119. diagrama sEquEncial
Mostra as interações entre os usuários e a sequência
de tarefas para fazer determinada ação.
Ex.: compras em um B2B ou B2c ou c2c
123. usaBilidadE
presente na arquitetura de informação, uxd e em
qualquer lugar que uma pessoa use algo, usabilidade
ajuda a deixar tudo melhor, ou pelo menos resolver
problemas sérios que podem gerar situações
perigosas.
131. usaBilidadE - componEntEs
Aprendizagem - o quanto é difícil completar tarefas
básicas no primeiro encontro com a interface?
Eficiência - para os usuários que já tenham alguma
familiaridade com a interface, como podem fazer tarefas
mais rápido?
Lembrança - depois de um tempo sem acessar a interface,
o quanto será difícil para alcançar proeficiência no uso?
Erros - quantos erros os usuários fazem, o quanto são
preocupantes esses erros e como eles são corrigidos?
Satisfação - o quanto é prazeroso usar essa interface?
132. uxd - traBalhando mElhorias
Projeto - planeta verde tang
O que é - uma “rede social” para crianças
Objetivo - melhorar o uso do site
Aprendizados - a partir de testes, foi identificada a
dificuldade das crianças fazerem scroll no site
139. hEurísticas - jakoB niElsEn
as heurísticas são uma série de “dicas”
ou “regras” que ajudam no entendimento
de situações comuns que acontecem
diariamente e que podem atrapalhar a
navegação pelos usuários.
140. hEurísticas - jakoB niElsEn
1) Feedback
o sistema deve informar continuamente ao usuário sobre
o que ele está fazendo. 10 segundos é o limite para
manter a atenção do usuário
focalizada no diálogo.
2) Falar a linguagem do usuário
a terminologia deve ser baseada na linguagem do usuário
e não orientada ao sistema. As informações devem ser
organizadas conforme o modelo mental do usuário.
3) Saídas claramente demarcadas
o usuário controla o sistema, ele pode, a qualquer
momento, abortar uma tarefa, ou desfazer uma operação
e retornar ao estado anterior.
usabilidoido
141. hEurísticas - jakoB niElsEn
4) Consistência
um mesmo comando ou ação deve ter sempre o mesmo efeito.
a mesma operação deve ser apresentada na mesma
localização e deve ser formatada/apresentada da mesma
maneira para facilitar o reconhecimento.
5) Prevenir erros
Evitar situações de erro.
Conhecer as situações que mais provocam erros e
modificar a interface para que estes erros não ocorram.
6) Minimizar a sobrecarga de memória do usuário
o sistema deve mostrar os elementos de diálogo
e permitir que o usuário faça suas escolhas, sem a
necessidade de lembrar um comando específico.
usabilidoido
142. hEurísticas - jakoB niElsEn
7) Atalhos
Para usuários experientes executarem as operações mais
rapidamente.
Abreviações, teclas de função, duplo clique no mouse,
função de volta em sistemas hipertexto.
Atalhos também servem para recuperar informações que
estão numa profundidade na árvore navegacional a partir
da interface principal.
8) Diálogos simples e naturais
deve-se apresentar exatamente a informação que o
usuário precisa no momento, nem mais nem menos.
a seqüência da interação e o acesso aos objetos e
operações devem ser compatíveis com o modo pelo qual
o usuário realiza suas tarefas.
usabilidoido
143. hEurísticas - jakoB niElsEn
9) Boas mensagens de erro
linguagem clara e sem códigos.
devem ajudar o usuário a entender e resolver o problema.
não devem culpar ou intimidar o usuário.
10) Ajuda e documentação
o ideal é que um software seja tão fácil de usar (intuitivo)
que não necessite de ajuda ou documentação.
se for necessária a ajuda deve estar facilmente acessível
on-line.
usabilidoido
144. concluindo...
Em linhas gerais, sabemos que independente da técnica
utilizada, o olhar deve ser voltado para o ser humano que
vai utilizar essa criação.
partindo deste ponto, fica mais fácil perceber caminhos
inteligentes para o desenvolvimento.
sair do senso comum e ir em busca de algo novo e
interessante verdadeiramente.
145. youvitória
Links úteis e bibliografia
• Design Thinking - Tim Brown
• Design de Navegação Web - James Kalbach
• Design para a Internet - Felipe Memória
• Não me faça Pensar - Steve Krug
• Ergodesign e Arquitetura de Informação - Luiz Anger
• O Guia para Projetar UX - Russ Unger