EuripEdEs magalhãEs - @EuripEdEsm
Design Thinking
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.
o pEnsamEnto do dEsignEr
O que é design thinking?O que é design?
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
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.
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.
Então....
o que é design thinking afinal?
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.
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
Design Thinking é centrado no ser humano. É
criar para o ser humano.
the macrocosm and microcosm (from a title page by robert fludd)
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.
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.
a quEstão é... ondE quEro chEgar?
© l
ora
na g
alle
ry
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.
NEGÓCIOS
TECNOLOGIA
PESSOAS
NEGÓCIOS
TECNOLOGIA
PESSOASDESIGN
THINKINGDESIGN
THINKING
NEGÓCIOS
TECNOLOGIA
PESSOAS
NEGÓCIOS
TECNOLOGIA
PESSOASEQULÍBRIO
dEsign thinking
Modelos
modElo cEntrado no valor - jEss mcmullin
vácuo
NEGÓCIOS
PESSOAS
NEGÓCIOS
PESSOAS
NEGÓCIOS
PESSOAS
NEGÓCIOS
PESSOAS
valorvalorAcaso
Design
procEsso comum
Marketing Marketing
Engenharia
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
dEsign como EmBElEzamEnto
Marketing
Marketing
DesignEngenharia
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
dEsign como inovação
Marketing
Marketing
Design
Engenharia
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
dEsign como Estratégia
Marketing Marketing
Design
Engenharia
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 uma postura e entregar outro tipo de produto.
ipad
cultura E ética
independente da postura, é importante a empresa não enfatizar certos aspectos que não são atributos essenciais de sua marca.
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?
transparência
Empresas transparentes em momentos de crise conseguem se reestabelecer mais rapidamente e sem grandes danos em vendas ou em imagem.
“Não é o que ele pensa a respeito, mas o que ele
sente a respeito”
tim Brown
© s
Ba
73
empatia!
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.
dEsign thinking
O processo ideo
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.
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.
DISCOVERY INTERPRETATION IDEATION EXPERIMENTATION EVOLUTION
procEsso idEo
momento de pensar como será o processo de trabalho.
a partir de um desavio, como encará-lo.
ETAPAS:
1. definir o desafio2. preparar a pesquisa3. procurar inspiração
DISCOVERY
1. DEfinir o DESAfio
• Entender o desafio• Definir sua audiência• Montar um time• Compartilhar conhecimento
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
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
DISCOVERY
hora de entender o que foi pesquisado, de transformar o conteúdo colhido em uma linha de pensamento.
Organizar as informações. ETAPAS:
1. contar histórias2. procurar por significados3. quadro de oportunidades
INTERPRETATION
1. conTAr hiSTóriAS
• Capturar aprendizados• Compartilhar histórias inspiradoras
DISCOVERY
2. ProcurAr Por SignificADoS
• Procurar temáticas• Promover os sentidos das descobertas• Definir perspectivas
DISCOVERY
3. JAnElAS DE oPorTuniDADES
• Criar um lembrete visual• Promover os sentidos das descobertas• Elabore insights usuais
DISCOVERY
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:
1. contar histórias2. procurar por significados3. quadro de oportunidades
IDEATION
1. gErAr iDéiAS
• Preparar o brainstorm• Facilitar o brainstorm• Selecionar idéias promissoras• Construir para pensar
IDEATION
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.
IDEATION
nei grando
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.
IDEATION
nei grando
2. rEfinAr AS iDéiAS
• Cheque se é possível ser produzido• Descreva sua idéia
IDEATION
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. ETAPAS:
1. criar protótipos2. ver feedbacks
EXPERIMENTATION
1. fAzEr ProTóTiPoS
• Criar um protótipo
EXPERIMENTATION
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
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
EXPERIMENTATION
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. ETAPAS:
1. avaliar aprendizados2. construir a experiência
EVOLUTION
1. AvAliAr APrEnDizADoS
• Integrar os feedbacks• Definir o sucesso
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
EVOLUTION
Estudo/casE
Website para produtos Elma chips, linha clássicos.
produtocriação
planejamento
tecnologia
gerência de projetos
processo - concepção
processo - produção
Aprovação AprovaçãoConteúdo
Arte Q.A.
Q.A.
Entrega inicial
EntregaFinal.
Arquitetura deInformação Tecnologia
Benchmark,análise deconcorrência eoutras análisesnecessárias.
Definição doconceitoe meta parao novo site.
processo - arquitetura de informação e user Experience
Benchmark
produtoexistente
novaproposta
PESQUISA DE TENDÊNCIASTECNOLÓGICAS E DE PRESENÇA
Análise da situação atual / Estudo do Objeto
Desenho da interação e navegação
Análise heurística
Cardsorting
Testes de usabilidade
Fluxogramas de interação e navegação
Wireframe
Mind Maps e Mood Boards
Prototipaçãoe testes deusabilidade
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ô
EuripEdEs magalhãEs - @EuripEdEsm
User Experience
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.
usEr ExpEriEncE
“Algumas pessoas dizem que design é solução de problemas. É óbvio que designers resolvemalguns problemas, mas isso os dentistas também fazem. Design é uma forma de invenção cultural.”
jack schulze
fErramEnta dE traBalho, acEssório? comunicador?
“Design is not just what it looks like and feels like. Design is how it works.”
steve jobs
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.
?
visual
gestual
Sonoro
Tátil
olfativo
E o que mais?
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.
http://nymag.com/nymetro/health/features/11700/
http://nymag.com/nymetro/health/features/11700/
1. Fácil identificaçãoo nome do medicamento é impresso no topo da embalagem.
2. cor vermelhaa cor vermelha é o símbolo universal para alerta.
3. Hierarquia de informaçãonome do medicamento, posologia, data de validade organizadas de acordo com sua importância e uso
4. economia de papela forma e posição do papel gera um melhor aproveitamento por folha e facilita a visualização
http://nymag.com/nymetro/health/features/11700/
5. Identificação por corpor 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. Posologiaidentificação da posologia, quantos dias dura o tratamento e quantas vezes por dia se utiliza.
User Experience
Usability
Design (Visual & UI)
Project Mgmt.
AJAX (JavaScript)
Back-EndInformation Architecture
Account Mgmt.
Flash Progra mming
APIsPackaged Solutions
Interaction Design
Content User Research
Design Deliverables
Business Intelligence
Problem Framing
Requirements Gathering /
Research
DOM Scripting
Accessibility
CSS
Front-End Development
User AgentsMarkup
Designing the Experience
Managing the Project
Defi ning the Problem
Architecting the Technology
Delivering the Experience
Prototyping
Creative inking
http://garrettdimon.com/pages/improving_interface_design
Arquitetura da Informação
Design de Interação
Design de Serviços
Experiência do Usuário
Usabilidade
Encontrabilidade
Socialidade
Continuidade
faber ludens
usEr ExpEriEncE honEycomB
peter morville
Emocional...
david armano
criatividadE “Em t”
a mEntE Em forma dE t
david armano
http://vimeo.com/21691333
iluvuxdEsign part ii
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.
Estudo da nokia sobre tv móvel
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.
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
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
Mind Map
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
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.
http://wiki.openmoko.org/wiki/main_page
Á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.
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.
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.
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
EuripEdEs magalhãEs - @EuripEdEsm
Usabilidade
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.
mEmória humana vs computacional
faber ludens
seleTiva inDiscriMinaDa
evOluTiva esTável
assOciaTiva DiscreTa
norman (2006) - conhecimento na cabeça
conhecimento no mundo
conhecimento no mundo
conhecimento no mundo
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?
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
click tale
depois
antes - recorde
depois - recorde
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.
hEurísticas - jakoB niElsEn
1) Feedbacko 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árioa 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 demarcadaso usuário controla o sistema, ele pode, a qualquer momento, abortar uma tarefa, ou desfazer uma operação e retornar ao estado anterior.
usabilidoido
hEurísticas - jakoB niElsEn
4) Consistênciaum 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 errosEvitar 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árioo 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
hEurísticas - jakoB niElsEn
7) AtalhosPara 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 naturaisdeve-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
hEurísticas - jakoB niElsEn
9) Boas mensagens de errolinguagem 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çãoo 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
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.
youvitória
• 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
Links úteis e bibliografia
youvitória
• http://www.designthinkingforeducators.com/• http://www.uxnet.org/• http://mitworld.mit.edu/video/357/• http://designthinking.ideo.com/• http://arquiteturadeinformacao.com/• http://www.usabilitycounts.com/• http://www.intuitionhq.com/• http://nform.com/tradingcards/affinity-diagram
Links úteis e bibliografia
digitalks
web: www.euripedes.com.brmail: [email protected]: @euripedesm
Mais:www.futurecast.com.brhttp://posmktdigital.wordpress.com/www.twitter.com/mktdigimpacta
Obrigado
Top Related