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

Designing physical and digital experience in social web

Embed Size (px)

DESCRIPTION

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

Citation preview

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