2014 web ux trends & zero effort & connected ux/ui strategy

64
(*ZEC=Zero Effort & Connected(WoT/WoE)) 2014.6 InnoUX CEO 최병호 [email protected], @ILOVEHCI

Upload: billy-choi

Post on 12-Jun-2015

1.227 views

Category:

Design


4 download

DESCRIPTION

2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

TRANSCRIPT

Page 1: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

(*ZEC=Zero Effort & Connected(WoT/WoE))

2014.6InnoUX CEO 최병호

[email protected], @ILOVEHCI

Page 2: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

Table of Contents

• 화두

• Zero Effort UI/UX

• ZEC(Zero Effort & Connected) UI/UX

1

Page 3: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy
Page 4: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

화두

1. 2014년 Web UX 트렌드는?

2. Zero Effort UI/UX란 무엇이며, 어떤 전략이 필요한가?

3. WoT/WoE(Web of Things/Web of Everything) 시대의 ZEC(Zero Effort & Connected) UI/UX란 무엇이며, 어떤 전략이 필요한가?

4. ‘전략’ 개념은 제대로 알고 있는가?

3

Page 5: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

2014 Web UX Trends

4

1. Flat UI will continue to grow2. 'Mobile first‘3. Yet more scrolling4. More HTML5 goodness5. More HTML5 badness6. Micro UX7. Less text8. Minimalist navigation9. CSS replaces images10. Video / moving backgrounds11. Richer content experiences 12. Making the most of one page13. Varied typography14. Monochromatic design15. Hypercolour16. Cards / tiles17. Bigger, better imagery18. Fixed position content / navigation

18 pivotal web design trends for 2014 https://econsultancy.com/blog/64096-18-pivotal-web-design-trends-for-2014#i.ro5yqlfkkcry10

http://www.thedailybeast.com/articles/2014/05/31/the-stacks-gordie-howe-hockey-s-greatest-war-horse.html

Page 6: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

2014 Web UX Trends(cont.)

5

1. Grid-Style Layouts2. Crafty Image Captions3. Extended Form Elements4. Deeply-Focused Landing Pages5. HTML5 Video Players6. 3D Transition Effects7. Flat Design Elements8. Personal Portraits9. SVG Images & Icons10. Unique Web Copy11. Lazy-Loading Animations12. Customized Image Galleries13. Mega-Navigation Menus14. Expanding Search Bars15. Featured Detail Lists16. Mobile-First Design17. HTML5 Canvas18. Pixel Sprites & Browser Games19. Quick User Registration20. CSS3 Animated Keyframes

Web Design: 20 Hottest Trends To Watch Out For In 2014 http://www.hongkiat.com/blog/web-design-trends-2014/

http://www.thepetedesign.com/demos/label_better_demo.html#http://www.unheap.com/section/inputs-forms/

Page 7: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

2014 Web UX Trends(cont.)

6

1. Flat Design2. Experimental typography3. Slide Out Menus4. Big Background Videos5. Endless Scrolling6. Simple Color Schemes7. Focus on Mobile8. Less Text, More Video9. Scroll Activated Animations

Web Design Trends for 2014 http://webdesignledger.com/trends-2/web-design-trends-for-2014

http://ihatetomatoes.net/merry-christmallax/

Page 8: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

Web UX & WoT/WoE UX

7

• Extending the Open Web Platform as the basis for Open Markets of Services that combine the Web of Devices with the Web of Data to form the Web of Things.

• The Web of Things is expected to have broad and sweeping economic and societal impact. Open standardswill be critical to enabling exponential growth of the kind we experienced with the early days of the Web, that saw it growing from a handful of enthusiasts in the early nineties to a global phenomenon in just a few years.

http://www.w3.org/2014/02/wot/Overview.html

Page 9: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

8http://www.slideshare.net/EVRYTHNG/android-the-web-of-things-bluetooth-low-energy-bluetooth-40-ibeacons-barcodes-qrs-nfc-arduino

Page 10: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

9http://www.slideshare.net/EVRYTHNG/android-the-web-of-things-bluetooth-low-energy-bluetooth-40-ibeacons-barcodes-qrs-nfc-arduino

Page 11: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

ZEC UI/UX Strategic Framework 1.0a by Billy Choi

Zero Effort UI/UX Strategy

ZEC* UI/UX Strategy(*ZEC=Zero Effort & Connected(WoT/WoE))

LoadLaw of

conservation of complexity

Quality in Use

F-shaped patternbased

Satisficing

UI

UX

Zero Effort UI/UX Strategy

Connected Shortcuts &

Defaults

Connected FFA**

DAG***

ZEC UI Strategy

Ferdinand de Saussure’s Syntagm & Paradigm

Jean Baudrillard’sSimulation &

Hyperreal

Quantified Self & Change

Life

**FFA=Feedback, Feedforward and perceived Affordances

***DAG=The Dopamine seeking system, unconscious selective Attention, Goal-gradient effect

10

Page 12: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

출처: 문철우(2011)11

Page 13: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

출처: 문철우(2011)12

Page 14: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

출처: 문철우(2011)13

Page 15: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy
Page 16: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

Zero Effort UI/UX Strategic Framework by Billy Choi

Zero Effort UI/UX Strategy Load

Law of conservation of

complexityQuality in Use

F-shaped patternbased

Satisficing

“인지/시각/운동부하와 인터페이스복잡성을 혁신적으로줄이고, F패턴에부흥하며, 높은사용품질을내재화하는 것”

by Billy Choi(@ILOVEHCI)

C+V+M=0

인지부하(Cognitive), 시각부하(Visual),운동부하(Motor)

I.C=0%, S.C=100%

사용자 인터페이스의복잡성(Interface Complexity), 시스템의복잡성(System Complexity)

I=100%, L=0%,Ef=

M=0%, Er=0%S=100%

Intuitive design, ease of Learning, Efficiency of use, Memorability, Error frequency and severity, subjective Satisfaction

부하 복잡성 보존의 법칙 사용품질

Interface=F

만족화 원리에기반한 F패턴

15

Page 17: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

Zero Effort UI/UX Strategic Framework(continue)

Zero Effort UI/UX Strategy Load

C+V+M=0

인지부하(Cognitive), 시각부하(Visual),운동부하(Motor)

부하

16

“인지/시각/운동부하와 인터페이스복잡성을 혁신적으로줄이고, F패턴에부흥하며, 높은사용품질을내재화하는 것”

by Billy Choi(@ILOVEHCI)

Page 18: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

Zero Effort UI/UX Strategic Framework(continue)

Zero Effort UI/UX Strategy

Law of conservation of

complexity

I.C=0%, S.C=100%

사용자 인터페이스의복잡성(Interface Complexity), 시스템의복잡성(System Complexity)

복잡성 보존의 법칙

CLI

GUI

NUI

NEST-like UI

Interface Complexity

System Complexity

0% 0%100%

http://youtu.be/L8TkhHgkBsg

17

“인지/시각/운동부하와 인터페이스복잡성을 혁신적으로줄이고, F패턴에부흥하며, 높은사용품질을내재화하는 것”

by Billy Choi(@ILOVEHCI)

Page 19: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

Zero Effort UI/UX Strategic Framework(continue)

Zero Effort UI/UX Strategy Quality in Use

I=100%, L=0%,Ef=

M=0%, Er=0%S=100%

Intuitive design, ease of Learning, Efficiency of use, Memorability, Error frequency and severity, subjective Satisfaction

사용품질

• Intuitive design: a nearly effortless understanding of the architecture and navigation of the site

• Ease of learning: how fast a user who has never seen the user interface before can accomplish basic tasks

• Efficiency of use: How fast an experienced user can accomplish tasks

• Memorability: after visiting the site, if a user can remember enough to use it effectively in future visits

• Error frequency and severity: how often users make errors while using the system, how serious the errors are, and how users recover from the errors

• Subjective satisfaction: If the user likes using the systemhttp://www.designresourcebox.com/why-usability-is-the-most-important-aspect-of-designing-a-site/

18

“인지/시각/운동부하와 인터페이스복잡성을 혁신적으로줄이고, F패턴에부흥하며, 높은사용품질을내재화하는 것”

by Billy Choi(@ILOVEHCI)

Page 20: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

Zero Effort UI/UX Strategic Framework(continue)

Zero Effort UI/UX Strategy

F-shaped patternbased

Satisficing

Interface=F

만족화 원리에기반한 F패턴

HCI Quick Guide (Emanuel Fernandes, May 2010)

19

“인지/시각/운동부하와 인터페이스복잡성을 혁신적으로줄이고, F패턴에부흥하며, 높은사용품질을내재화하는 것”

by Billy Choi(@ILOVEHCI)

Page 21: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy
Page 22: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

ZEC UI/UX Strategic Framework 1.0a by Billy Choi

ZEC* UI/UX Strategy(*ZEC=Zero Effort & Connected(WoT/WoE))

UI

UX

Zero Effort UI/UX Strategy

Connected Shortcuts &

Defaults

Connected FFA**

DAG***

ZEC UI Strategy

Ferdinand de Saussure’s Syntagm & Paradigm

Jean Baudrillard’sSimulation &

Hyperreal

Quantified Self & Change

Life

**FFA=Feedback, Feedforward and perceived Affordances

***DAG=The Dopamine seeking system, unconscious selective Attention, Goal-gradient effect

21

“기본적인 사용성과커넥티드 기반의사용성을 충족하면서현실에서 제공하지못하는 차별화된가치와 생태계를디자인하여 구매자의숨은 니즈에부합하는 것”

by Billy Choi(@ILOVEHCI)

Page 23: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

ZEC UI Strategic Framework by Billy Choi

ZEC* UI/UX Strategy(*ZEC=Zero Effort & Connected(WoT/WoE))

UI Zero Effort UI/UX Strategy

Connected Shortcuts &

Defaults

Connected FFA

DAG

• 부하• 복잡성 보존의법칙

• 사용품질• 만족화 원리에기반한 F패턴

Thing to Service • Feedback• Feedforward• perceived

Affordances

• the Dopamine seeking system

• unconscious selective Attention

• Goal-gradient effect

22

“기본적인 사용성과커넥티드 기반의사용성을 충족하면서현실에서 제공하지못하는 차별화된가치와 생태계를디자인하여 구매자의숨은 니즈에부합하는 것”

by Billy Choi(@ILOVEHCI)

Page 24: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

ZEC UI Strategic Framework(continue)

ZEC* UI/UX Strategy(*ZEC=Zero Effort & Connected(WoT/WoE))

UIConnected Shortcuts &

Defaults

Thing to Service

Internet

Internet

Things

Things

Services

Services

Shortcuts Defaults

Connecting

Physical Shortcuts

Invisible Shortcuts

• Amazon Dash

• iBeacon

http://youtu.be/JLOzF0Y4Mqw

Internet

ThingsServices

Logical Shortcuts

• Nymi

Thingshttp://youtu.be/c3h0eKGfUfI

http://youtu.be/jUO7Qnmc8vE

• Smart Glasses상품 내비게이터, 상품 정보 열람, 카트 정보, 쇼핑목록 관리, 즉시결제

23

http://youtu.be/xnIoGzur0h4

“기본적인 사용성과커넥티드 기반의사용성을 충족하면서현실에서 제공하지못하는 차별화된가치와 생태계를디자인하여 구매자의숨은 니즈에부합하는 것”

by Billy Choi(@ILOVEHCI)

Page 25: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

ZEC UI Strategic Framework(continue)

ZEC* UI/UX Strategy(*ZEC=Zero Effort & Connected(WoT/WoE))

UI Connected FFA

• Feedback• Feedforward• perceived

Affordances

HCI Quick Guide (Emanuel Fernandes, May 2010)

24

“기본적인 사용성과커넥티드 기반의사용성을 충족하면서현실에서 제공하지못하는 차별화된가치와 생태계를디자인하여 구매자의숨은 니즈에부합하는 것”

by Billy Choi(@ILOVEHCI)

Page 26: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

ZEC UI Strategic Framework(continue)

ZEC* UI/UX Strategy(*ZEC=Zero Effort & Connected(WoT/WoE))

UI Connected FFA DAG

• Feedback• Feedforward• perceived

Affordances

• 도파민 시스템(the Dopamine seeking system)

• 무의식 선택적주의(unconscious selective Attention)

• 목표 가속화효과 (Goal-gradient effect)

자신의 이름, 움직이는 모든 것, 우리를 쳐다보고 있는 사람 얼굴 그림, 음식/섹스/위험 그림, 이야기, 큰 소음

100 Things Every Designer Needs to Know About People, (Susan M. Weinschenk, 2011)

25

“기본적인 사용성과커넥티드 기반의사용성을 충족하면서현실에서 제공하지못하는 차별화된가치와 생태계를디자인하여 구매자의숨은 니즈에부합하는 것”

by Billy Choi(@ILOVEHCI)

Page 27: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

ZEC UI/UX Strategic Framework by Billy Choi

ZEC* UI/UX Strategy(*ZEC=Zero Effort & Connected(WoT/WoE))

UX ZEC UI Strategy

Ferdinand de Saussure’s Syntagm & Paradigm

Jean Baudrillard’sSimulation &

Hyperreal

Quantified Self & Change

Life

• 부하• 복잡성 보존의 법칙• 사용품질• 만족화 원리에

기반한 F패턴

• Connected Shortcuts & Defaults

• Feedback• Feedforward• perceived

Affordances

• the Dopamine seeking system

• unconscious selective Attention

• Goal-gradient effect

S+P=CE

소쉬르의 2분법적구조인 결합체(Syntagm)과계열체(Paradigm) 응용하여 Culture Ecosystem 구축

일상의 가치지향적인시뮬라시옹

장 보드리야르의시뮬라시옹과과잉현실의 가치응용

Six phase

• 자가 측정결과를 통한자기 및 동료의동반 성장 리딩

• MSSUBC Self로의 변화

• C2S, S2C, C2C로의 변화

26

“기본적인 사용성과커넥티드 기반의사용성을 충족하면서현실에서 제공하지못하는 차별화된가치와 생태계를디자인하여 구매자의숨은 니즈에부합하는 것”

by Billy Choi(@ILOVEHCI)

Page 28: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

ZEC UI/UX Strategic Framework(continue)

ZEC* UI/UX Strategy(*ZEC=Zero Effort & Connected(WoT/WoE))

UX

Ferdinand de Saussure’s Syntagm & Paradigm

S+P=CE

소쉬르의 2분법적구조인 결합체(Syntagm)과계열체(Paradigm) 응용하여 Culture Ecosystem 구축

27

FualBandSE

MobileWeb

SNS Self-efficacy

Nike+ Kinect Training

Web App

PC(iTunes)

SportwatchGPS

Chip+Shoes Web

Mobile App

Open data

Avatar

Things Manage Services Change

Syntagm/Synchrony

(공시성/현재)

Paradigm/Diachrony(통시성)

“기본적인 사용성과커넥티드 기반의사용성을 충족하면서현실에서 제공하지못하는 차별화된가치와 생태계를디자인하여 구매자의숨은 니즈에부합하는 것”

by Billy Choi(@ILOVEHCI)

[Nike의 Culture Ecosystem 분석]

“무수히 많은 가능성들 가운데어느 하나가 선택되어 ‘결합체’로완결되면 결합의 결속력은 매우견고해진다. 이후에 하나의이미지로 굳어져 이후의 인식과관념에 지배적인 영향력을행사한다.”(기호학/전동열,2012)

선택할 수 있는 모든 가능성

랑그(자연/ 습관)가 된다.

컬쳐코드를만든다.

Page 29: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

자기효능감(self-efficacy)

Page 30: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

http://www.slideshare.net/misterdom/evrythng-web-of-things

29

Page 31: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

http://www.slideshare.net/misterdom/evrythng-web-of-things

30

Page 32: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

http://www.slideshare.net/misterdom/evrythng-web-of-things

31

Page 33: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

http://www.slideshare.net/misterdom/evrythng-web-of-things

32

Page 34: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

http://www.slideshare.net/misterdom/evrythng-web-of-things

33

Page 35: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

ZEC UI/UX Strategic Framework(continue)

ZEC* UI/UX Strategy(*ZEC=Zero Effort & Connected(WoT/WoE))

UX

Jean Baudrillard’sSimulation &

Hyperreal

일상의 가치 지향적인시뮬라시옹

장 보드리야르의시뮬라시옹과과잉현실의 가치 응용

34

RRADA

http://youtu.be/3pXNYciHCLc

MemoMi

http://youtu.be/kvJbu1rvd_w

UNIQLO

http://youtu.be/oUD57MpHAE8

ALKE

http://youtu.be/qqFcaewtBJA

http://youtu.be/rhH1ZNmCEdghttp://youtu.be/1qkf3kjurZw

Dunk Tank Play

“기본적인 사용성과커넥티드 기반의사용성을 충족하면서현실에서 제공하지못하는 차별화된가치와 생태계를디자인하여 구매자의숨은 니즈에부합하는 것”

by Billy Choi(@ILOVEHCI)

“The ‘postmodern media’ no longer provide ‘secondary representations ofreality; they affect and produce the reality that they mediate’”(JohnFiske,1994),

Smart Mirror의 시뮬라시옹

Smart Bathroom의 시뮬라시옹

Smart Signage의 시뮬라시옹 Smart Shop의 시뮬라시옹

Page 36: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

시뮬라시옹

35

REAL HYPERREAL***

일상의 스캔들

진짜 가짜

O X 일상의 스캔들

진짜 가짜

X O

스캔들 O X

베트남 전쟁

진짜 가짜

O X 베트남 전쟁

진짜 가짜

O O

지옥의 묵시록 O X

스캔들

지옥의 묵시록

스캔들의시뮬라시옹

‘지옥의 묵시록’의시뮬라시옹

* “디즈니랜드는 디즈니랜드가 바로 ‘진짜’ 나라, 즉 ‘진짜’ 미국의 모든 것이라는 사실을 감추기 위해서 존재한다(이는 마치 완전한 형태의 사회도 감옥과 다를 바가없다는 것을 숨기려고 감옥을 부각시키는 것과 같다). 디즈니랜드가 상상의 세계로 묘사되는 것은 그 외의 세계가 진짜임을 믿게 하려는 이유에서이다. 그런데사실상 그 주위의 로스앤젤레스나 미국도 더 이상 진짜가 아니며, 그것들도 과잉 현실과 시뮬라시옹의 질서에 따르고 있을 뿐이다. 현실의 거짓 재현(이데올로기)은이제 더 이상 문제가 아니며, 오히려 진실이 아니라는 사실을 감추는 것이 문제이다.” (Cultural theory and popular culture/John Storey, 2009)** Baudrillard argues that the very distinction between original and copy has itself now been destroyed. He calls this process ‘simulation’. Baudrillard (1983) calls simulation ‘the generation by models of a real without origins or reality: a hyperreal’. (출처 상동)*** In the realm of the hyperreal, the distinction between simulation and the ‘real’ implodes; the ‘real’ and the imaginary continually collapse into each other. The result is that reality and simulation are experienced as without difference – operating along a roller-coaster continuum. (출처 상동)

일상

진짜 가짜

O X 일상

진짜 가짜

O O

디즈니랜드 X O

디즈니랜드*디즈니랜드의시뮬라시옹**

Page 37: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy
Page 38: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

제임스 로 사이버텍처(James Law Cybertecture International)의사이버텍처 미러/ http://youtu.be/h_Sj-brC3-w

37

Page 39: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

Magic Mirror

http://youtu.be/HlsSLRMq8X0

Mirrors installed in the Delano Hotel in Miami on every guest floor

38

Page 40: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

http://youtu.be/x5Lr6yW9QbQ

Magic Mirror

39

Page 41: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

http://youtu.be/oLBPhh01yiY

Future department stores (Digital Mirror)

40

Page 42: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

RRADA retail experience

http://youtu.be/3pXNYciHCLc41

Page 43: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

Magic Mirror brings magical shopping experience into your shop. http://www.slideshare.net/metatechnology/magic-mirror-bring-social-shopping-into-retail-store42

Page 44: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

MemoMi unveils world's first ever body controlled smart mirror

http://youtu.be/kvJbu1rvd_w

43

Page 45: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

Sharp Electronics UNIQLO Magic Mirror Display Technology

http://youtu.be/oUD57MpHAE8

44

Page 46: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

ALKE - Smart Mirror - UK

http://youtu.be/qqFcaewtBJA

45

Page 47: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

L'Oreal Paris Magic Mirror

http://youtu.be/t5HsHaieYOI

46

Page 48: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

대우건설은 위례신도시의 송파푸르지오에서 스마트 거울을 활용한생활정보기에 대해 특허 출현을 시도하고있다.

현관에서 날씨, 주차위치, 가스 사용여부, 엘리베이터 호출, 소등, 가스 차단, 방범설치 등의 서비스를 제공하고 있다.

스마트 생활 정보기는 평소엔 거울기능을 유지하고 사용자가 가까이 가면LCD 화면으로 전환된다.

영화 속 화면처럼 외출할 때 현관에다가서면 “오늘은 비가 올 예정이오니우산을 준비하시기 바랍니다.”와 같은음성 안내가 나오고 현재 날씨와 온도등이 표시된다.

입주민이 가스 불을 켜놓고 외출하면경고음과 함께 관련 정보가 화면에나타난다.(이후연, 2012)

http://youtu.be/z2patXVyKYA

47

Page 49: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

http://youtu.be/dAI9mF_cBu0

Interactive Mirror

48

Page 50: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

49

Page 51: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

50

Page 52: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

51

Page 53: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

52

Page 54: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

Smart Toothbrush & Smart Mirror System

http://youtu.be/Cvoy4deM-VQ

53

Page 55: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

Magic mirror functionalprototypehttp://www.slideshare.net/jjoannasee/magic-mirror-functionalprototype

54

Page 56: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

Mirrors Dont Lie

http://youtu.be/VwEAaINH9X0

55

Page 57: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

• UXD는 본질을 발견하고, 새로운 본질로 재정의하는 것이다.• UXD는 새로운 고객층을 발굴하고, 그들이 원하는 것을

통찰하여 제공하는 것이다.• UXD는 광범위한 비즈니스 생태계를 구축한다.• UXD는 재미를 추구한다.• UXD는 새로운 습관을 형성하고, 궁극적으로 문화를 만든다.• UXD는 궁극적으로 수익을 창출한다.

• UXD는 본질을 발견하고, 새로운 본질로 재정의하는 것이다.• UXD는 새로운 고객층을 발굴하고, 그들이 원하는 것을

통찰하여 제공하는 것이다.• UXD는 광범위한 비즈니스 생태계를 구축한다.• UXD는 재미를 추구한다.• UXD는 새로운 습관을 형성하고, 궁극적으로 문화를 만든다.• UXD는 궁극적으로 수익을 창출한다.

Page 58: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

스마트 미러의 방향/ http://www.slideshare.net/BillyChoi/smart-mirror-ux

Page 59: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

스마트 홈 산업에서 스마트 미러 제품의 가치 탐색(논문)

Page 60: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

일상의 가치 지향적인 시뮬라시옹

59

거울

진짜 가짜

X O

스마트 미러 O X

스마트 미러

REAL HYPERREAL

‘스마트미러’의시뮬라시옹

RRADA

http://youtu.be/3pXNYciHCLc

MemoMi

http://youtu.be/kvJbu1rvd_w

UNIQLO

http://youtu.be/oUD57MpHAE8

거울

진짜 가짜

O X

스마트 미러 X O

Page 61: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

ZEC UI/UX Strategic Framework(continue)

ZEC* UI/UX Strategy(*ZEC=Zero Effort & Connected(WoT/WoE))

UXQuantified

Self & Change Life

Six phase

• 자가 측정 결과를통한 자기 및 동료의동반 성장 리딩

• MSSUSC Self로의변화

• C2S, S2C, C2C로의변화

60

http://youtu.be/V5RVqgmSV28

Smart Mirror

http://www.youtube.com/watch?v=GJKwHAvR4uI&feature=share&list=PL1D61EDA3FA74A9F2

Sight: Contact Lenses with AR

http://youtu.be/j3Y7PGhHR20

Zeo Sleep Manager Pro

“기본적인 사용성과커넥티드 기반의사용성을 충족하면서현실에서 제공하지못하는 차별화된가치와 생태계를디자인하여 구매자의숨은 니즈에부합하는 것”

by Billy Choi(@ILOVEHCI)

Page 62: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

Six phase of Quantified self for ZEC* 1.0a by Billy Choi

*ZEC=Zero Effort & Connected(IoT/WoT/IoE)

61

Quantified Self=MSSUBC Self

Measure Self

Sync Self

Share Self

Understand Self

Be Self

Change Self

Customer to Service

Service to Customer

Customer to Customer

The measurement of customer behaviors, leveraging the things(사물로 고객의 행동 측정)

Sync measured behavior data to the service system(측정한 행동 데이터를 서비스 시스템에 동기화)

Make the open ecosystem, by sharing in the synchronized data to the service space(동기화된 데이터를 서비스 공간에 공유하여 오픈 생태계 형성)

Understanding with the information that is accumulated in an open ecosystem of customers(오픈 생태계에서 누적된 고객의 정보로 고객의 제반 이해)

To Ship Your Package Before You Buy It(고객이 상품 구매하기 전에 배송)

The restoration of geur naturel & Providing leverage to other people's changes(자연성 회복 및 타인의 변화에 영향력 행사)

Page 63: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

© 2014 InnoUX & Innodesign All rights reserved.2014 Web UX Trends & ZEC UI/UX Strategy by Billy Choi(@ILOVEHCI)

ZEC UI/UX Strategic Framework 1.0a by Billy Choi

Zero Effort UI/UX Strategy

ZEC* UI/UX Strategy(*ZEC=Zero Effort & Connected(WoT/WoE))

LoadLaw of

conservation of complexity

Quality in Use

F-shaped patternbased

Satisficing

UI

UX

Zero Effort UI/UX Strategy

Connected Shortcuts &

Defaults

Connected FFA**

DAG***

ZEC UI Strategy

Ferdinand de Saussure’s Syntagm & Paradigm

Jean Baudrillard’sSimulation &

Hyperreal

Quantified Self & Change

Life

**FFA=Feedback, Feedforward and perceived Affordances

***DAG=The Dopamine seeking system, unconscious selective Attention, Goal-gradient effect

62

Page 64: 2014 Web UX Trends & Zero Effort & Connected UX/UI strategy

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