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

(웹월드 인사이트 컨퍼런스2013-디자인전략)

2013.6.26InnoUX CEO 최병호

[email protected], @ILOVEHCI

© 2013 InnoUX & Innodesign. All rights reserved.UX관점에서 본 2013년 웹디자인 트렌드 및 인사이트

UX관점에서 본 2013년 웹디자인 트렌드

1. The Pinterestization Of The Web

2. Social Proof

3. Flat design of Landing page

4. Responsive Web Design (RWD)

5. Web App & Mobile Web

6. Gamification UX

7. HTML5 Web Design Examples For Inspiration

1


Table of Contents

1. The Pinterestization Of The Web

2. Social Proof

3. Gamification UX

4. HTML5 Web Design Examples For Inspiration

2

• Pin• Re-pin• Pin it• Pinner• Pinterester• Pinfluencer: A Pinterest user with a large following, or

reach, on the network.

• Pinnable: An object, such as a photo or article, that can be pinned to (i.e. bookmarked on) Pinterest.

• Pinterestization• p’influence• Pinterest look• Pinterest-style design• Pinterest strategy• ShopPINg• (p)interest of marketers• Pinterest converts

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/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.com

Source:http://www.quora.com/What-websites-strongly-resemble-Pinterests-design

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 the phenomena where people tend to believe that the decision and actions of others reflect the correct behaviourin a given situation.

http://econsultancy.com/kr/blog/62602-11-great-ways-to-use-social-proof-in-ecommerce

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 social proof in ecommerce(5/6) - Amazon

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 sales platforms (eBay, Etsy, Amazon Marketplace)

2. Social network-driven sales (Facebook, Pinterest, Twitter)

3. Group buying (Groupon, LivingSocial)4. Peer

recommendations (Amazon, Yelp, JustBoughtIt)

5. User-curated shopping (The Fancy, Lyst, Svpply)

6. Participatory commerce (Threadless, Kickstarter, CutOnYourBias)

7. Social shopping (Motilo, Fashism, GoTryItOn)

http://mashable.com/2013/05/10/social-commerce-definition/

사람은 스스로 뭔가 해내고 있다는 느낌을 받길 좋아한다.뭔가를 배우고 성취하고 있다는 느낌도 좋아한다.

목표에 가까워질수록 남은 한 두 번의 과정을 더 하도록 동기가 부여된다


사람은 목표에 가까워질수록 더욱 동기를 부여 받는다

• 목표 가속화 효과(goal-gradient effect): 1934년 클락 헐(Clark Hull)의 쥐 실험 처음 연구. 우리의 행동이 목표에 가까워질수록 더욱 가속된다. 목표까지 남은 거리가 짧을수록 더빨리 그것을 성취하려는 기질이 있다. 끝이 눈에 보였을 때 더욱 동기를 부여 받는다.

• ‘무엇을 완성했나’보다 ‘무엇이 남았는가’에 더욱 집중하는 경향이 있다. 무엇을 더 해야하는지 집중할 때 계속해서 과업을 수행할 동기를 부여 받는다. 또한 목표를 향해얼마만큼 다가갔는지 보여준다.

• 동기부여 효과는 목표가 달성된 직후 급락한다. 이를 보상 이후의 재설정 현상이라고한다.

29

다른 사람에게 어떤 일을 최대한 많이 시키고자 한다면 변동 비율 스케줄을 사용한다(간격=시간, 비율=횟수, 변동=평균)

B.F. 스키너의 조작적 조건화 이론의 강화 스케줄

변동 비율고정 비율

변동 간격

고정 간격


People’s Behavior Can Be Shaped(사람들의 행동은 인위적으로 조성할 수 있다)

• 어떤 새로운 행동을 조성하려면 그 행동을 유발하는 이전 행동을 강화해야 한다 = 조성

• 강화를 사용해서 이전 행동이 조성되고 나면 그 행동에 대한 강화는 멈추고 최종적으로원하는 행동에 더 근접하게 하는 또 다른 행동을 강화한다.

• 예: 학생은 교수를 무시하고(강화하지 않기) 교수가 문 쪽을 볼 때만 반응 -> 교수는 문을자꾸 쳐다본다 -> 학생들은 문을 쳐다보지 않는다(강화를 멈췄다) -> 교수가 문 쪽으로한 걸음 걸어갈 때만 집중해서 쳐다봤다 -> 교수는 문 쪽으로 한 걸음씩 걸어간다. -> 교수는 강의실 밖으로 나간다^^

• 조성(shaping)에 대한 정식 설명은 연속적 근접의 차별적 강화(the differential reinforcement of successive approximations)이다.

31


외적 동기부여보다 내적 동기부여

• 조작적 조건화 및 고전적 조건화에 대한 비평 중 하나는 행동이 영원히 고착되는 게아니다라는 점이다.

• 외적인 보상보다 내적인 보상을 찾아라. 보상 및 강화(외적 동기부여)를 주는 것보다사람들이 활동 그 자체를 즐기게 하는 것(내적 동기부여)이 더 효과적이다(Mark Lepper, David Greene and Richard Nisbett, 1973). 외적인 보상인 경우, 예측 불가능한 보상이더욱 동기를 부여한다.

• 알고리즘적 작업(algorithmic work)에서 휴리스틱 작업(Heuristic work)으로: 알고리즘작업은 공장에서 기계를 사용하는 것처럼 사람들의 작업 상당수가 하나의 과제 완수를위한 절차 중 일부일 뿐. 휴리스틱 작업은 정해진 절차, 지침, 원칙이 아무 것도 없다. 전통적인 징벌과 보상 시나리오는 외적 동기 부여에 기반을 둔 것으로, 알고리즘적작업에는 효과가 있지만 휴리스틱 작업에는 효과가 없다.

32


사람들은 진보, 숙련, 통제에 동기부여 받는다

• 사람들은 자기가 발전하고 있다(making progress)는 느낌을 좋아하며, 새로운 지식과기술을 배우고 숙련(mastering)되고 있다는 느낌을 좋아한다. (예) 위키피디아, 오픈소스활동 등

• 숙련(mastery)은 아주 강력한 동기유발자라서 작은 발전의 신호라도 사람들이 다음단계로 전진하게 하는 동기부여에 큰 효과가 있다.

• 숙련은 접근은 할 수 있으나 도달할 수 없다. 그래서 숙련이 그토록 강한 동기유발이되게 하는 요소 중 하나다.

33

숙련은 실제로는 도달할 수 없다


사람들은 의무감을 줄이기 위해 행동한다

• 내가 당신에게 선물을 주거나 호의를 베푼다면 당신은 나에게 빚진 기분이 들 것이다. 당신은 보답으로 나에게 선물을 주거나 호의를 베풀어 줄 것이다. 이것은 부채감(the feeling of indebtedness)을 없애기 위해서이며, 대개 무의식적인 느낌인데 상당히강하다. 이를 상호성(reciprocity)라고 한다.

35


희소성이 높을수록 더 소중하게 여긴다

• 희소성이 있으면 사람들은 그것을 더 소중하고 더 좋은 것으로 여기고 더 갖고 싶어한다. (예) 희소성 있는 제품이나 정보, 10개가 들어있는 쿠키 단지와 2개가 들어있는 쿠키단지의 선택(Worchell, Lee and Adewole, 1975)

• 값이 비쌀수록(그래서 얻기 힘들수록) 품질이 좋다고 생각한다. 즉 무의식적으로‘비싼=더 좋은’으로 생각한다.

• 절대 희소성 즉 금지된 것을 사람들은 정말로 갖고 싶어한다.

• 사회적 타당화(social validation)과 결합하면 강위력하다. 이것은 다른 사람들이 나에게무엇을 하라고 얘기해 주기를 기대한다 또는 남들이 대신 결정해 주기를 바란다는것이다. (예) 환풍구 연기 실험(Bibb Latane and John Darley, 1970)

36


상실의 두려움이 획득의 기대보다 크다

• 사람들은 자기가 이미 가진 것 또는 거의 가진 것을 잃는 것을 가장 두려워한다. (예) 자동차 풀옵션 상태에서 옵션 제거(Barry Schwartz, 2004)

• 사람들이 행동하게 하려면 얻을 것에 대한 기대보다는 잃을 것에 대한 두려움 위주로접근해야 한다.

• 친숙함을 소망하는 것은 상실의 두려움과 관련이 있다. 사람들은 슬프거나 무서울 때, 구뇌와 중뇌(감정 관할)가 깨어서 자신을 보호하려 한다.(Marieke de Vries, 2010). 기분좋을 때 그리고 친숙한 것에 그리 민감하지 않을 때 새롭고 다른 것을 시도한다.

37

by 최병호(@ILOVEHCI)

http://www.the-bea.st/ (2013.4.28)Folk singer Laura Marling's latest album, A Creature I Don't Know, has an accompanying website made by London agency Studio Juicewith illustrations by Shynola. It's 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

http://www.chromeweblab.com/en-GB/#home (2013.4.28)Chrome Web Lab launched as a partnership between Google and agency B-Reel. It's available online to all, but is also featured in the London Science Museum. The Lab relies heavily on WebGL but also features some complex JavaScript, in particular the use of the canvas element 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

http://www.chromeweblab.com/en-GB/sketchbots# (2013.4.28)

http://www.chromeweblab.com/en-GB/lab-tag-explorer (2013.4.28)

경청해주셔서고맙습니다!