designing physical and digital experience in social web

46
Designing physical and digital experience in social web 2013.01.13 Janet Huang

Upload: janet-huang

Post on 28-Jan-2015

106 views

Category:

Design


0 download

DESCRIPTION

This talk is presented in WebConf Taiwan 2013 (http://www.webconf.tw).

TRANSCRIPT

Page 1: Designing physical and digital experience in social web

Designing physical and digital experience in social web

2013.01.13

Janet Huang

Page 4: Designing physical and digital experience in social web

Designing physical and digital experience in social web

?

?

?

?

?

?

?

??

?

?

?

?

?

?

?

?

??

?

?

?

?

? ?

??

Page 5: Designing physical and digital experience in social web

Social Webis about

People

Page 6: Designing physical and digital experience in social web

So... we need to understand people!

Page 7: Designing physical and digital experience in social web

We need to understand how people behave

Page 8: Designing physical and digital experience in social web

Behavior Design

Page 9: Designing physical and digital experience in social web

BJ Fogg

Persuasive Technology Lab @ Stanford University

Behavior Design

Page 10: Designing physical and digital experience in social web

A Framework

Page 11: Designing physical and digital experience in social web

3 things

Page 12: Designing physical and digital experience in social web

B = Motivation

Ability

Trigger

Page 13: Designing physical and digital experience in social web

Behavior Model

Page 14: Designing physical and digital experience in social web

1 ability

Page 15: Designing physical and digital experience in social web

Ability Factors- Time- Money- Physical effort- Brain cycles- Social deviance- Non-routine

Simplicity

Page 16: Designing physical and digital experience in social web

Are we asking for too much?

Key question

Page 17: Designing physical and digital experience in social web

Too much money?

Page 18: Designing physical and digital experience in social web
Page 19: Designing physical and digital experience in social web

Too much text?

Page 20: Designing physical and digital experience in social web
Page 21: Designing physical and digital experience in social web

Too much information?

Page 22: Designing physical and digital experience in social web
Page 23: Designing physical and digital experience in social web

2 motivation

Page 24: Designing physical and digital experience in social web

Sensation

Anticipation

Social Cohesion

Core Motivator

pleasure/pain

hope/fear

social rejection/acceptance

Emotion

社會凝聚力

預期

感覺

Page 25: Designing physical and digital experience in social web
Page 26: Designing physical and digital experience in social web
Page 27: Designing physical and digital experience in social web

3 trigger

Page 28: Designing physical and digital experience in social web

Trigger

Facilitator

Spark

Signal

Page 29: Designing physical and digital experience in social web
Page 30: Designing physical and digital experience in social web

- Off-site trigger- On-site trigger

Web design

Email

Page 31: Designing physical and digital experience in social web
Page 32: Designing physical and digital experience in social web

- Off-site trigger- On-site trigger

Web design

Call to action

Page 33: Designing physical and digital experience in social web

motivationability

motivationability

motivationability

Page 34: Designing physical and digital experience in social web
Page 35: Designing physical and digital experience in social web
Page 36: Designing physical and digital experience in social web

Behavior Model

1. Ability2. Motivation3. Trigger

The Order of Design

1. Trigger2. Ability3. Motivation

http://www.slideshare.net/hreha/applying-psychology-to-web-design

Page 37: Designing physical and digital experience in social web

Understanding behavior model help you design better UI for people.

Page 38: Designing physical and digital experience in social web

For web design, maybe we need

Another solution

Page 39: Designing physical and digital experience in social web

Crowd-based design

Page 40: Designing physical and digital experience in social web

Crowdsourcing Web design+

Page 41: Designing physical and digital experience in social web

Why?

Page 42: Designing physical and digital experience in social web
Page 43: Designing physical and digital experience in social web

How?

Page 44: Designing physical and digital experience in social web

Divide and Conquer

Macro task

Micro task

Crowds can solve micro tasks with little effort in a short time

iterative task

Page 45: Designing physical and digital experience in social web

Integrate micro tasks

Macro task

Micro task

Page 46: Designing physical and digital experience in social web

To be continued... :)

Thanks