Designing physical and digital experience in social web
-
Upload
janet-huang -
Category
Design
-
view
110 -
download
0
description
Transcript of Designing physical and digital experience in social web
![Page 1: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/1.jpg)
Designing physical and digital experience in social web
2013.01.13
Janet Huang
![Page 2: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/2.jpg)
About me
Janet Huang
http://twitter.com/janetychttp://www.facebook.com/janetyctp
![Page 4: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/4.jpg)
Designing physical and digital experience in social web
?
?
?
?
?
?
?
??
?
?
?
?
?
?
?
?
??
?
?
?
?
? ?
??
![Page 5: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/5.jpg)
Social Webis about
People
![Page 6: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/6.jpg)
So... we need to understand people!
![Page 7: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/7.jpg)
We need to understand how people behave
![Page 8: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/8.jpg)
Behavior Design
![Page 9: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/9.jpg)
BJ Fogg
Persuasive Technology Lab @ Stanford University
Behavior Design
![Page 10: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/10.jpg)
A Framework
![Page 11: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/11.jpg)
3 things
![Page 12: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/12.jpg)
B = Motivation
Ability
Trigger
![Page 13: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/13.jpg)
Behavior Model
![Page 14: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/14.jpg)
1 ability
![Page 15: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/15.jpg)
Ability Factors- Time- Money- Physical effort- Brain cycles- Social deviance- Non-routine
Simplicity
![Page 16: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/16.jpg)
Are we asking for too much?
Key question
![Page 17: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/17.jpg)
Too much money?
![Page 18: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/18.jpg)
![Page 19: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/19.jpg)
Too much text?
![Page 20: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/20.jpg)
![Page 21: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/21.jpg)
Too much information?
![Page 22: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/22.jpg)
![Page 23: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/23.jpg)
2 motivation
![Page 24: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/24.jpg)
Sensation
Anticipation
Social Cohesion
Core Motivator
pleasure/pain
hope/fear
social rejection/acceptance
Emotion
社會凝聚力
預期
感覺
![Page 25: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/25.jpg)
![Page 26: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/26.jpg)
![Page 27: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/27.jpg)
3 trigger
![Page 28: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/28.jpg)
Trigger
Facilitator
Spark
Signal
![Page 29: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/29.jpg)
![Page 30: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/30.jpg)
- Off-site trigger- On-site trigger
Web design
![Page 31: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/31.jpg)
![Page 32: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/32.jpg)
- Off-site trigger- On-site trigger
Web design
Call to action
![Page 33: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/33.jpg)
motivationability
motivationability
motivationability
![Page 34: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/34.jpg)
![Page 35: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/35.jpg)
![Page 36: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/36.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/37.jpg)
Understanding behavior model help you design better UI for people.
![Page 38: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/38.jpg)
For web design, maybe we need
Another solution
![Page 39: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/39.jpg)
Crowd-based design
![Page 40: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/40.jpg)
Crowdsourcing Web design+
![Page 41: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/41.jpg)
Why?
![Page 42: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/42.jpg)
![Page 43: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/43.jpg)
How?
![Page 44: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/44.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/45.jpg)
Integrate micro tasks
Macro task
Micro task
![Page 46: Designing physical and digital experience in social web](https://reader034.fdocuments.in/reader034/viewer/2022051515/54c825034a79592c758b45be/html5/thumbnails/46.jpg)
To be continued... :)
Thanks