YOU Educação: Apresentação - Euripedes Magalhães

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.

http://vimeo.com/3821318

microsoft sustainaBility

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

http://vimeo.com/7665624

protótipo dE papEl

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/19131028

iluvuxdEsign part i

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.

http://www.youtube.com/watch?v=gieoksm2tiu

vW fox

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: euripedes@euripedes.com.brtwitter: @euripedesm

Mais:www.futurecast.com.brhttp://posmktdigital.wordpress.com/www.twitter.com/mktdigimpacta

Obrigado