41
Um método ainda sem nome mas que vai te ajudar a pensar.

Behavioral Design & 9 States of Design

Embed Size (px)

Citation preview

Page 1: Behavioral Design & 9 States of Design

Um método ainda sem nomemas que vai te ajudar a pensar.

Page 2: Behavioral Design & 9 States of Design

Inconsistências,você já sofreu

desse mal?

Page 3: Behavioral Design & 9 States of Design

O que foi projetado O que foi programado O projeto final

inconsistências:

Page 4: Behavioral Design & 9 States of Design

Hipótese #1 - Problemas com o Front EndPor que isso acontece?

Page 5: Behavioral Design & 9 States of Design

possível solução:

Styleguide

Banners

Fonts

BUTTONS

COLORS

Page 6: Behavioral Design & 9 States of Design

Problema resolvido!

NO

Page 7: Behavioral Design & 9 States of Design

Hipótese #2 - Pixel PerfectPor que isso acontece?ainda

Page 8: Behavioral Design & 9 States of Design

possível solução:

Diversos aplicativos Styleguide

Banners

Fonts

BUTTONS

COLORS

Page 9: Behavioral Design & 9 States of Design

NO

Page 10: Behavioral Design & 9 States of Design

¯\_(ツ)_/¯

NO

Page 11: Behavioral Design & 9 States of Design

O que foi projetado O que foi programado O projeto final

inconsistências:

Page 12: Behavioral Design & 9 States of Design

Hipótese #3 - ConteúdoPor que isso acontece?ainda

Page 13: Behavioral Design & 9 States of Design

Diversos aplicativos Styleguide

Banners

Fonts

BUTTONS

COLORS

Placeholders reais

solução:

Page 14: Behavioral Design & 9 States of Design

NOT BAD

Page 15: Behavioral Design & 9 States of Design

O que foi projetado O projeto final

inconsistências:

GAP

Page 16: Behavioral Design & 9 States of Design
Page 17: Behavioral Design & 9 States of Design

9 States of Design & Behavioral Designa solução para os nossos problemas

Page 18: Behavioral Design & 9 States of Design

Correct,Incorrect,

Done.

Page 19: Behavioral Design & 9 States of Design

Correct Done

3 estados utilizados:

Incorrect

Page 20: Behavioral Design & 9 States of Design

Before

existem 9 estados:

Loading None

One Some Too many

1 2 3 … 5

Incorrect Correct Done

Page 21: Behavioral Design & 9 States of Design

Isso é o suficiente?Ainda não, estamos quase lá

Page 22: Behavioral Design & 9 States of Design

"Understanding the psychology and science behind how people interpret information, make decisions, and take action enables

us to deliver more effective designs” (Aaron Otani)

Page 23: Behavioral Design & 9 States of Design

Grab attention,Influence decisions,

Facilitate actions,

Sustain behavior.

Page 24: Behavioral Design & 9 States of Design

Os estágios do behavioral design:

Atrairatenção

Influenciardecisões

Facilitar a ação

Sustentar ocomportamento

Page 25: Behavioral Design & 9 States of Design

Grab attention,Influence decisions,

Facilitate actions,

Sustain behavior.

Page 26: Behavioral Design & 9 States of Design

Técnicas:Seja convidativo

Você pode contar uma boa história, apelar para uma forte estética ou até mesmo utilizar recursos de motion design para ser convidativo.

Provoque reações emocionaisDesenhe interfaces que se sobressaem e permanecem memoráveis, apelando

para as reações emocionais. Sejam elas Surpresa, curiosidade ou urgência.

Trabalhe com conteúdo personalizadoAs pessoas costumam responder mais a conteúdos personalizados, baseados

no seu comportamento, interesses e valores.

Page 27: Behavioral Design & 9 States of Design

airbnb

Page 28: Behavioral Design & 9 States of Design

Grab attention,Influence decisions,

Facilitate actions,

Sustain behavior.

Page 29: Behavioral Design & 9 States of Design

Técnicas:Trabalhe com conteúdo claro e direto

Esqueça os “jargões”, transmita a sua mensagem de uma forma clara e simples de ser entendida. Ofereça conteúdo que responda perguntas e ajude nas decisões.

Ofereça recomendaçõesA prova social é muito forte para nós na hora da tomada de decisão. Além de

passos claros, as pessoas ficam confortáveis com depoimentos e fontes seguras.

Descreva os benefíciosInclua benefício extrínsecos, como conforto, descontos e benefícios de um estilo de

vida. Apele também para a motivação intrínseca.

Page 30: Behavioral Design & 9 States of Design

kickstarter

Page 31: Behavioral Design & 9 States of Design

Grab attention,Influence decisions,

Facilitate actions,

Sustain behavior.

Page 32: Behavioral Design & 9 States of Design

Técnicas:Simplifique a ação

Quebre as grandes ações em um passo a passo, faça que as pessoas pensem menos, crie experiências progressivas e guie a experiência.

Ajude as pessoas a criarem planosEncoraje cada pessoa a tomar uma ação, criar um objetivo e acompanhe-a ao

longo tempo. lembrando-a do seu objetivo final e do seu progresso.

Incentive no momento certoTimming é tudo, tenha certeza de encorajar as pessoas na hora em que elas

estarão mais propensas a tomar a decisão que você precisa que elas tomem.

Page 33: Behavioral Design & 9 States of Design

brigade

Page 34: Behavioral Design & 9 States of Design

Grab attention,Influence decisions,

Facilitate actions,

Sustain behavior.

Page 35: Behavioral Design & 9 States of Design

Técnicas:Celebre o progresso

Pequenos ganhos não deixam de ser ganho, celebre cada pequena conquista junto com as pessoas. Como aplicativos de controle financeiro fazem.

Construa longos relacionamentosProjete as suas interfaces não para uma comunicação única, mas para um

relacionamento que evoluí conforme você conhece mais quem usa o produto.

Enfatize a motivação intrínsecaA a motivação intrínseca é o maior motivador na hora da tomada de decisões e

existem algumas pesquisas que provam isso. Pessoas são atraídas por propósitos.

Page 36: Behavioral Design & 9 States of Design

nest

Page 37: Behavioral Design & 9 States of Design

9 States of Design Behavioral Design

Page 38: Behavioral Design & 9 States of Design

Eles funcionam muito bem em pares:

Done

Sustentar

None

Influenciar

Before

Atrair

Page 39: Behavioral Design & 9 States of Design

As inconsistências,elas ainda acontecem?

Page 40: Behavioral Design & 9 States of Design

Poucas inconsistências Validado com devs

DEV-PROOF

Em uso na SocialBase

Banners

Fonts

BUTTONS

COLORS

cenário atual:

Page 41: Behavioral Design & 9 States of Design

Muito obrigado :)Dúvidas? Comentários? Feedbacks?