(웹월드 인사이트 컨퍼런스2013-디자인전략)2013.6.26InnoUX CEO 최병호InnoUX@InnoUX.com, @ILOVEHCI
© 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트UX관점에서 본 2013년 웹디자인 트렌드1. The Pinterestizati...
© 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트Table of Contents1. The Pinterestization Of ...
• Pin• Re-pin• Pin it• Pinner• Pinterester• Pinfluencer: A Pinterest user with a large following, orreach, on the network....
http://pinterest.com/ (2013.6.25)The Pinterestization Of The Web - Pinterest
Aggregated Alphabetized List (3/18/2012)http://20blinks.com/http://buyosphere.com/http://chill.com/http://clipboard.com/ht...
http://www.ebay.com/ (2013.6.25)The Pinterestization Of The Web(1/9) - ebay
http://www.etsy.com/ (2013.6.25)The Pinterestization Of The Web(2/9) - Etsy
http://www.polyvore.com/ (2013.6.25)The Pinterestization Of The Web(3/9) - Polyvore
http://www.20blinks.com/ (2013.6.25)The Pinterestization Of The Web(4/9) – 20BLINKS
http://buyosphere.com/ (2013.6.25)The Pinterestization Of The Web(5/9) - Buyosphere
http://clipie.it/ (2013.6.25)The Pinterestization Of The Web(6/9) - Clipie
http://fab.com/ (2013.6.25)The Pinterestization Of The Web(7/9) - Fab
http://gentlemint.com/ (2013.6.25)The Pinterestization Of The Web(8/9) - Gentlemint
http://www.glittercats.com/ (2013.6.25)The Pinterestization Of The Web(9/9) - Glittercats
1. 습관의 변화와 멘탈 모델창조• 이미지 탐색 시습관적으로 접근하는사이트로 인식 전환• 점차 정보 탐색 시습관적으로 접근하는사이트로 인식 전환• 도파민 시스템 응용. 즉적은 정보량과 링크
2. 실패한 즐겨찾기/스크랩의신선한 부활과 이미지큐레이션 모델링• (소셜) 북마크/스크랩의 또다른 버전의 신선한 부활:북마크 행위와 접근의불편함, 북마크의 낮은수준의 인터페이스/인터랙션/ 감성 극복• 정보의 필터링은 이...
Social proof is thephenomena where peopletend to believe that thedecision and actions of othersreflect the correct behavio...
http://j.mp/1aKGL2V/ (2013.6.25)11 great ways to use social proof in ecommerce(1/6) - Naked Wines
http://j.mp/17AkLJb (2013.6.25)11 great ways to use social proof in ecommerce(2/6) - Kiddicare
http://kr.hotels.com/ (2013.6.25)11 great ways to use social proof in ecommerce(3/6) - Hotels.com
http://fab.com/feed/popular (2013.6.25)11 great ways to use social proof in ecommerce(4/6) - Fab.com
http://www.amazon.co.uk/s/ref=nb_sb_noss_1?url=search-alias%3Daps&field-keywords=sd+cards (2013.6.25)11 great ways to use ...
http://www.bookdepository.co.uk/live (2013.6.25)11 great ways to use social proof in ecommerce(6/6) - Book Depository
1. Peer-to-peer salesplatforms (eBay, Etsy, AmazonMarketplace)2. Social network-drivensales (Facebook, Pinterest, Twitter)...
사람은 스스로 뭔가 해내고 있다는 느낌을 받길 좋아한다.뭔가를 배우고 성취하고 있다는 느낌도 좋아한다.목표에 가까워질수록 남은 한 두 번의 과정을 더 하도록 동기가 부여된다
© 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트사람은 목표에 가까워질수록 더욱 동기를 부여 받는다• 목표 가속화 효과(goal...
다른 사람에게 어떤 일을 최대한 많이 시키고자 한다면 변동 비율 스케줄을 사용한다(간격=시간, 비율=횟수, 변동=평균)B.F. 스키너의 조작적 조건화 이론의 강화 스케줄변동 비율고정 비율변동 간격고정 간격
© 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트People’s Behavior Can Be Shaped(사람들의 행동은 인위적...
© 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트외적 동기부여보다 내적 동기부여• 조작적 조건화 및 고전적 조건화에 대한 비평 ...
© 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트사람들은 진보, 숙련, 통제에 동기부여 받는다• 사람들은 자기가 발전하고 있다(...
숙련은 실제로는 도달할 수 없다
© 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트사람들은 의무감을 줄이기 위해 행동한다• 내가 당신에게 선물을 주거나 호의를 베...
© 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트희소성이 높을수록 더 소중하게 여긴다• 희소성이 있으면 사람들은 그것을 더 소중...
© 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트상실의 두려움이 획득의 기대보다 크다• 사람들은 자기가 이미 가진 것 또는 거의...
by 최병호(@ILOVEHCI)
by 최병호(@ILOVEHCI)
by 최병호(@ILOVEHCI)
by 최병호(@ILOVEHCI)
by 최병호(@ILOVEHCI)
http://www.the-bea.st/ (2013.4.28)Folk singer Laura Marlings latest album, A Creature I Dont Know, has an accompanying web...
http://www.the-bea.st/ (2013.4.28)Folk singer Laura Marlings latest album, A Creature I Dont Know, has an accompanying web...
http://www.the-bea.st/ (2013.4.28)Folk singer Laura Marlings latest album, A Creature I Dont Know, has an accompanying web...
http://www.chromeweblab.com/en-GB/#home (2013.4.28)Chrome Web Lab launched as a partnership between Google and agency B-Re...
http://www.chromeweblab.com/en-GB/sketchbots# (2013.4.28)
http://www.chromeweblab.com/en-GB/lab-tag-explorer (2013.4.28)
경청해주셔서고맙습니다!
ux관점에서 본 2013년 웹디자인 트렌드 및 인사이트
ux관점에서 본 2013년 웹디자인 트렌드 및 인사이트
ux관점에서 본 2013년 웹디자인 트렌드 및 인사이트
ux관점에서 본 2013년 웹디자인 트렌드 및 인사이트
Upcoming SlideShare
Loading in...5
×

ux관점에서 본 2013년 웹디자인 트렌드 및 인사이트

3,589

Published on

UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트 (웹월드 인사이트 컨퍼런스 2013-디자인전략)

The Pinterestization Of The Web
Social Proof
Gamification UX
HTML5 Web Design Examples For Inspiration

Published in: Design
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,589
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
113
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

ux관점에서 본 2013년 웹디자인 트렌드 및 인사이트

  1. 1. (웹월드 인사이트 컨퍼런스2013-디자인전략)2013.6.26InnoUX CEO 최병호InnoUX@InnoUX.com, @ILOVEHCI
  2. 2. © 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트UX관점에서 본 2013년 웹디자인 트렌드1. The Pinterestization Of The Web2. Social Proof3. Flat design of Landing page4. Responsive Web Design (RWD)5. Web App & Mobile Web6. Gamification UX7. HTML5 Web Design Examples For Inspiration1
  3. 3. © 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트Table of Contents1. The Pinterestization Of The Web2. Social Proof3. Gamification UX4. HTML5 Web Design Examples For Inspiration2
  4. 4. • Pin• Re-pin• Pin it• Pinner• Pinterester• Pinfluencer: A Pinterest user with a large following, orreach, on the network.• Pinnable: An object, such as a photo or article, that can bepinned to (i.e. bookmarked on) Pinterest.• Pinterestization• p’influence• Pinterest look• Pinterest-style design• Pinterest strategy• ShopPINg• (p)interest of marketers• Pinterest converts
  5. 5. http://pinterest.com/ (2013.6.25)The Pinterestization Of The Web - Pinterest
  6. 6. Aggregated Alphabetized List (3/18/2012)http://20blinks.com/http://buyosphere.com/http://chill.com/http://clipboard.com/http://clipie.it/ [Japanese]http://fab.comhttp://friendsheet.comhttp://gentlemint.com/http://getvega.com/http://glittercats.comhttp://heimaoz.com/ [Chinese]http://imgspark.com/http://juxtapost.comhttp://lyst.com/http://markpic.com/http://minglewing.com/http://mulu.me/http://pinme.ru/http://pinspire.com/http://pixacar.com/ [automotive]http://snip.it/http://stylepin.com/http://styloko.com/http://thinng.com/http://uberpaper.comhttp://wasai.com.tw/ [Chinese]http://weheartit.com/http://wookmark.com/http://xsoar.com/http://dafoodie.comSource:http://www.quora.com/What-websites-strongly-resemble-Pinterests-design
  7. 7. http://www.ebay.com/ (2013.6.25)The Pinterestization Of The Web(1/9) - ebay
  8. 8. http://www.etsy.com/ (2013.6.25)The Pinterestization Of The Web(2/9) - Etsy
  9. 9. http://www.polyvore.com/ (2013.6.25)The Pinterestization Of The Web(3/9) - Polyvore
  10. 10. http://www.20blinks.com/ (2013.6.25)The Pinterestization Of The Web(4/9) – 20BLINKS
  11. 11. http://buyosphere.com/ (2013.6.25)The Pinterestization Of The Web(5/9) - Buyosphere
  12. 12. http://clipie.it/ (2013.6.25)The Pinterestization Of The Web(6/9) - Clipie
  13. 13. http://fab.com/ (2013.6.25)The Pinterestization Of The Web(7/9) - Fab
  14. 14. http://gentlemint.com/ (2013.6.25)The Pinterestization Of The Web(8/9) - Gentlemint
  15. 15. http://www.glittercats.com/ (2013.6.25)The Pinterestization Of The Web(9/9) - Glittercats
  16. 16. 1. 습관의 변화와 멘탈 모델창조• 이미지 탐색 시습관적으로 접근하는사이트로 인식 전환• 점차 정보 탐색 시습관적으로 접근하는사이트로 인식 전환• 도파민 시스템 응용. 즉적은 정보량과 링크
  17. 17. 2. 실패한 즐겨찾기/스크랩의신선한 부활과 이미지큐레이션 모델링• (소셜) 북마크/스크랩의 또다른 버전의 신선한 부활:북마크 행위와 접근의불편함, 북마크의 낮은수준의 인터페이스/인터랙션/ 감성 극복• 정보의 필터링은 이미지큐레이션으로 접근
  18. 18. Social proof is thephenomena where peopletend to believe that thedecision and actions of othersreflect the correct behaviourin a given situation.http://econsultancy.com/kr/blog/62602-11-great-ways-to-use-social-proof-in-ecommerce
  19. 19. http://j.mp/1aKGL2V/ (2013.6.25)11 great ways to use social proof in ecommerce(1/6) - Naked Wines
  20. 20. http://j.mp/17AkLJb (2013.6.25)11 great ways to use social proof in ecommerce(2/6) - Kiddicare
  21. 21. http://kr.hotels.com/ (2013.6.25)11 great ways to use social proof in ecommerce(3/6) - Hotels.com
  22. 22. http://fab.com/feed/popular (2013.6.25)11 great ways to use social proof in ecommerce(4/6) - Fab.com
  23. 23. http://www.amazon.co.uk/s/ref=nb_sb_noss_1?url=search-alias%3Daps&field-keywords=sd+cards (2013.6.25)11 great ways to use social proof in ecommerce(5/6) - Amazon
  24. 24. http://www.bookdepository.co.uk/live (2013.6.25)11 great ways to use social proof in ecommerce(6/6) - Book Depository
  25. 25. 1. Peer-to-peer salesplatforms (eBay, Etsy, AmazonMarketplace)2. Social network-drivensales (Facebook, Pinterest, Twitter)3. Group buying (Groupon, LivingSocial)4. Peerrecommendations (Amazon, Yelp, JustBoughtIt)5. User-curated shopping (TheFancy, Lyst, Svpply)6. Participatorycommerce (Threadless, Kickstarter, CutOnYourBias)7. Socialshopping (Motilo, Fashism, GoTryItOn)http://mashable.com/2013/05/10/social-commerce-definition/
  26. 26. 사람은 스스로 뭔가 해내고 있다는 느낌을 받길 좋아한다.뭔가를 배우고 성취하고 있다는 느낌도 좋아한다.목표에 가까워질수록 남은 한 두 번의 과정을 더 하도록 동기가 부여된다
  27. 27. © 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트사람은 목표에 가까워질수록 더욱 동기를 부여 받는다• 목표 가속화 효과(goal-gradient effect): 1934년 클락 헐(Clark Hull)의 쥐 실험 처음 연구.우리의 행동이 목표에 가까워질수록 더욱 가속된다. 목표까지 남은 거리가 짧을수록 더빨리 그것을 성취하려는 기질이 있다. 끝이 눈에 보였을 때 더욱 동기를 부여 받는다.• ‘무엇을 완성했나’보다 ‘무엇이 남았는가’에 더욱 집중하는 경향이 있다. 무엇을 더 해야하는지 집중할 때 계속해서 과업을 수행할 동기를 부여 받는다. 또한 목표를 향해얼마만큼 다가갔는지 보여준다.• 동기부여 효과는 목표가 달성된 직후 급락한다. 이를 보상 이후의 재설정 현상이라고한다.29
  28. 28. 다른 사람에게 어떤 일을 최대한 많이 시키고자 한다면 변동 비율 스케줄을 사용한다(간격=시간, 비율=횟수, 변동=평균)B.F. 스키너의 조작적 조건화 이론의 강화 스케줄변동 비율고정 비율변동 간격고정 간격
  29. 29. © 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트People’s Behavior Can Be Shaped(사람들의 행동은 인위적으로 조성할 수 있다)• 어떤 새로운 행동을 조성하려면 그 행동을 유발하는 이전 행동을 강화해야 한다 = 조성• 강화를 사용해서 이전 행동이 조성되고 나면 그 행동에 대한 강화는 멈추고 최종적으로원하는 행동에 더 근접하게 하는 또 다른 행동을 강화한다.• 예: 학생은 교수를 무시하고(강화하지 않기) 교수가 문 쪽을 볼 때만 반응 -> 교수는 문을자꾸 쳐다본다 -> 학생들은 문을 쳐다보지 않는다(강화를 멈췄다) -> 교수가 문 쪽으로한 걸음 걸어갈 때만 집중해서 쳐다봤다 -> 교수는 문 쪽으로 한 걸음씩 걸어간다. ->교수는 강의실 밖으로 나간다^^• 조성(shaping)에 대한 정식 설명은 연속적 근접의 차별적 강화(the differentialreinforcement of successive approximations)이다.31
  30. 30. © 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트외적 동기부여보다 내적 동기부여• 조작적 조건화 및 고전적 조건화에 대한 비평 중 하나는 행동이 영원히 고착되는 게아니다라는 점이다.• 외적인 보상보다 내적인 보상을 찾아라. 보상 및 강화(외적 동기부여)를 주는 것보다사람들이 활동 그 자체를 즐기게 하는 것(내적 동기부여)이 더 효과적이다(Mark Lepper,David Greene and Richard Nisbett, 1973). 외적인 보상인 경우, 예측 불가능한 보상이더욱 동기를 부여한다.• 알고리즘적 작업(algorithmic work)에서 휴리스틱 작업(Heuristic work)으로: 알고리즘작업은 공장에서 기계를 사용하는 것처럼 사람들의 작업 상당수가 하나의 과제 완수를위한 절차 중 일부일 뿐. 휴리스틱 작업은 정해진 절차, 지침, 원칙이 아무 것도 없다.전통적인 징벌과 보상 시나리오는 외적 동기 부여에 기반을 둔 것으로, 알고리즘적작업에는 효과가 있지만 휴리스틱 작업에는 효과가 없다.32
  31. 31. © 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트사람들은 진보, 숙련, 통제에 동기부여 받는다• 사람들은 자기가 발전하고 있다(making progress)는 느낌을 좋아하며, 새로운 지식과기술을 배우고 숙련(mastering)되고 있다는 느낌을 좋아한다. (예) 위키피디아, 오픈소스활동 등• 숙련(mastery)은 아주 강력한 동기유발자라서 작은 발전의 신호라도 사람들이 다음단계로 전진하게 하는 동기부여에 큰 효과가 있다.• 숙련은 접근은 할 수 있으나 도달할 수 없다. 그래서 숙련이 그토록 강한 동기유발이되게 하는 요소 중 하나다.33
  32. 32. 숙련은 실제로는 도달할 수 없다
  33. 33. © 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트사람들은 의무감을 줄이기 위해 행동한다• 내가 당신에게 선물을 주거나 호의를 베푼다면 당신은 나에게 빚진 기분이 들 것이다.당신은 보답으로 나에게 선물을 주거나 호의를 베풀어 줄 것이다. 이것은 부채감(thefeeling of indebtedness)을 없애기 위해서이며, 대개 무의식적인 느낌인데 상당히강하다. 이를 상호성(reciprocity)라고 한다.35
  34. 34. © 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트희소성이 높을수록 더 소중하게 여긴다• 희소성이 있으면 사람들은 그것을 더 소중하고 더 좋은 것으로 여기고 더 갖고 싶어한다.(예) 희소성 있는 제품이나 정보, 10개가 들어있는 쿠키 단지와 2개가 들어있는 쿠키단지의 선택(Worchell, Lee and Adewole, 1975)• 값이 비쌀수록(그래서 얻기 힘들수록) 품질이 좋다고 생각한다. 즉 무의식적으로‘비싼=더 좋은’으로 생각한다.• 절대 희소성 즉 금지된 것을 사람들은 정말로 갖고 싶어한다.• 사회적 타당화(social validation)과 결합하면 강위력하다. 이것은 다른 사람들이 나에게무엇을 하라고 얘기해 주기를 기대한다 또는 남들이 대신 결정해 주기를 바란다는것이다. (예) 환풍구 연기 실험(Bibb Latane and John Darley, 1970)36
  35. 35. © 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트상실의 두려움이 획득의 기대보다 크다• 사람들은 자기가 이미 가진 것 또는 거의 가진 것을 잃는 것을 가장 두려워한다. (예)자동차 풀옵션 상태에서 옵션 제거(Barry Schwartz, 2004)• 사람들이 행동하게 하려면 얻을 것에 대한 기대보다는 잃을 것에 대한 두려움 위주로접근해야 한다.• 친숙함을 소망하는 것은 상실의 두려움과 관련이 있다. 사람들은 슬프거나 무서울 때,구뇌와 중뇌(감정 관할)가 깨어서 자신을 보호하려 한다.(Marieke de Vries, 2010). 기분좋을 때 그리고 친숙한 것에 그리 민감하지 않을 때 새롭고 다른 것을 시도한다.37
  36. 36. by 최병호(@ILOVEHCI)
  37. 37. by 최병호(@ILOVEHCI)
  38. 38. by 최병호(@ILOVEHCI)
  39. 39. by 최병호(@ILOVEHCI)
  40. 40. by 최병호(@ILOVEHCI)
  41. 41. http://www.the-bea.st/ (2013.4.28)Folk singer Laura Marlings latest album, A Creature I Dont Know, has an accompanying website made byLondon agency Studio Juicewith illustrations by Shynola. Its a site that self-scrolls as a poem is read out,while vivid illustrations and animations with parallax perspectives are revealed.http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
  42. 42. http://www.the-bea.st/ (2013.4.28)Folk singer Laura Marlings latest album, A Creature I Dont Know, has an accompanying website made byLondon agency Studio Juicewith illustrations by Shynola. Its a site that self-scrolls as a poem is read out,while vivid illustrations and animations with parallax perspectives are revealed.http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
  43. 43. http://www.the-bea.st/ (2013.4.28)Folk singer Laura Marlings latest album, A Creature I Dont Know, has an accompanying website made byLondon agency Studio Juicewith illustrations by Shynola. Its a site that self-scrolls as a poem is read out,while vivid illustrations and animations with parallax perspectives are revealed.http://www.creativebloq.com/web-design-tips/examples-of-html5-1233547
  44. 44. http://www.chromeweblab.com/en-GB/#home (2013.4.28)Chrome Web Lab launched as a partnership between Google and agency B-Reel. Its available online to all, but is also featured in theLondon Science Museum. The Lab relies heavily on WebGL but also features some complex JavaScript, in particular the use of the canvaselement and heavy use of three.js, a lightweight 3D JavaScript library that supports both canvas and WebGL.http://www.creativebloq.com/web-design/examples-of-javascript-1233964
  45. 45. http://www.chromeweblab.com/en-GB/sketchbots# (2013.4.28)
  46. 46. http://www.chromeweblab.com/en-GB/lab-tag-explorer (2013.4.28)
  47. 47. 경청해주셔서고맙습니다!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×