트렌드와 사례연구를 통한모바일 커머스 차별화 UI/UX 전략 모델 통찰 모바일 커머스 트렌드 연구 차별화된 UI/UX 전략 모델 통찰 변화하고 있는 UI/UX 트렌드에서 참조해야 할 몇 가지

1. 트렌드와
사례연구를 통한
모바일 커머스
차별화 UI/UX
전략 모델 통찰
2015.6
성균관대학교 일반대학원 휴먼ICT융합학과 교수 (산학협력중점)/
최병호/ BillyChoi@Gmail.com
Research Data: http://www.slideshare.net/BillyChoi/
Twitter/Facebook: ILOVEHCI
휴먼ICT융합 blog: http://humanictconvergence.blogspot.kr/
UX미래융합전략연구소 blog: http://blog.naver.com/soularchitec

2. © 2015 성균관대학교 일반대학원 휴먼ICT융합학과 교수
최병호 All rights reserved.
트렌드와 사례연구를 통한 모바일 커머스 차별화 UI/UX 전략 모델 통찰
Table of Contents
I. 모바일 커머스 트렌드 연구
II. 차별화된 UI/UX 전략 모델 통찰
III.변화하고 있는 UI/UX 트렌드에서 참조해야 할 몇 가지
1

3. 모바일 트렌드
연구

4. 3
Source: <Criteo State of Mobile Commerce Q1 2015>

5. 4
Source: <Criteo State of Mobile Commerce Q1 2015>

6. 5
Source: <Criteo State of Mobile Commerce Q1 2015>

7. 차별화된 UI/UX
전략 모델 통찰

8. 7
I
0
INavigation
0Findability
IAdd to Cart
0Personalization
IPurchase
0QOL*
* QOL: Quality of Life

9. 8
I
0
INavigation
0Findability
IAdd to Cart
0Personalization
IPurchase
0QOL*
* QOL: Quality of Life

10. 9
Source: http://browsy.com/
• 제품 탐색과 쇼핑 카트에 담는 행위 분리:
Input의 부분적 소멸= 제품 탐색의
즐거움 강화 효과 유발, 쇼핑 시간 단축
착각 유도
• 거대한 쇼핑 카트 전문 채널로서 강화된
개인화 접근

11. 10
Source: http://amzn.to/1dIPgS6
• 타 채널의 제품 탐색과 자신의
채널의 쇼핑 카트에 담는 행위 통합:
자신의 채널에서 Input의 부분적
소멸= 타 채널의 목적대로 활용
도중에 제품 탐색의 즐거움 강화
효과 유발, 쇼핑 시간 단축 착각
유도
• 단, 해시태크는 CLI의 단점 보유로,
Like와 같은 고유의 버튼 지원 필요

12. 11
I
0
INavigation
0Findability
IAdd to Cart
0Personalization
IPurchase
0QOL*
* QOL: Quality of Life

13. 12
I
0
INavigation
0Findability
IAdd to Cart
0Personalization
IPurchase
0QOL*
* QOL: Quality of Life

14. 13
Source: https://pixbi.com/
• 다다익’선’이 아닌 ‘제약’ 전략
추구: 한정된 정보량은
인지부하 축소 유발
• 즉각적인 정보 확인 및 결재
유도

15. 14
• 선택 과정 생략
Source: http://apple.co/1K6b0Dy

16. 15
• 스캔 대상 확대: 새로운 기회,
WYSIWYG의 확장
Source: http://slyce.it/

17. 16
• 다다익’선’이 아닌 ‘제약’ 전략
추구: 한정된 정보량은 인지부하
축소 유발
• 즉각적인 정보 확인 및 결재 유도
• 선택 과정 생략
• 스캔 대상 확대: 새로운 기회
• 가정용 아마존 대시, 아마존 대시
버튼 응용: IoT 제품인 휴대용
스마트 카드 적용 검토 =>
Input의 부분적 소멸, 제품 간
통합 시스템 접근 필요
Source: http://hiku.us/how-it-works

18. 17
I
0
INavigation
0Findability
IAdd to Cart
0Personalization
IPurchase
0QOL*
* QOL: Quality of Life

19. 18
I
0
INavigation
0Findability
IAdd to Cart
0Personalization
IPurchase
0QOL*
* QOL: Quality of Life
P
S1
S2
S3
P

20. 19
• 레시피와 소스를 동시 판매
• 로컬 마켓과 연계 판매

21. 변화하고 있는
UI/UX 트렌드에서
참조해야 할 몇
가지

22. © 2015 성균관대학교 일반대학원 휴먼ICT융합학과 교수
최병호 All rights reserved.
트렌드와 사례연구를 통한 모바일 커머스 차별화 UI/UX 전략 모델 통찰
Zero Effort UI/UX Strategic Framework
21
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
(Deep UI)
Interface
Complexity
System
Complexity
0% 0%100%
이미지 출처: http://youtu.be/L8TkhHgkBsg
“인지/시각/운동
부하와 인터페이스
복잡성을 혁신적으로
줄이고, F패턴에
부흥하며, 높은
사용품질을
내재화하는 것”
by Billy Choi
(@ILOVEHCI)

23. © 2015 성균관대학교 일반대학원 휴먼ICT융합학과 교수
최병호 All rights reserved.
트렌드와 사례연구를 통한 모바일 커머스 차별화 UI/UX 전략 모델 통찰
Zero Effort UI/UX Strategic Framework(continue)
Zero Effort
UI/UX Strategy Load
C+V+M=0
인지부하(Cognitive),
시각부하(Visual),
운동부하(Motor)
부하
22
“인지/시각/운동
부하와 인터페이스
복잡성을 혁신적으로
줄이고, F패턴에
부흥하며, 높은
사용품질을
내재화하는 것”
by Billy Choi
(@ILOVEHCI)

24. © 2015 성균관대학교 일반대학원 휴먼ICT융합학과 교수
최병호 All rights reserved.
트렌드와 사례연구를 통한 모바일 커머스 차별화 UI/UX 전략 모델 통찰
ZEC UI Strategic Framework(continue)
ZEC* UI/UX
Strategy
(*ZEC=Zero Effort &
Connected(IoT/IoE))
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)
23
“기본적인 사용성과
커넥티드 기반의
사용성을 충족하면서
현실에서 제공하지
못하는 차별화된
가치와 생태계를
디자인하여 구매자의
숨은 니즈에
부합하는 것”
by Billy Choi
(@ILOVEHCI)

25. © 2015 성균관대학교 일반대학원 휴먼ICT융합학과 교수
최병호 All rights reserved.
트렌드와 사례연구를 통한 모바일 커머스 차별화 UI/UX 전략 모델 통찰
The Overview of ZEC(Zero Effort & Connected) UX/UI Strategy 1.0a
24
Man Machine
Interface
Human Computer
Interface
based context
H C
Interaction
based context
Info. Architecture
based context
H C
Interaction
based context
Info. Architecture
based context
H
Interaction
based context
Info. Architecture
based context
H
Group
Society
C
Content
Service
Interaction
based context
Info. Architecture
based context
H
G
S
Interaction
based context
Info. Architecture
based context
H based
embodied
cognition
G
S
C
C
S
Connected Thing
Culture-(eco)System
Company
Interaction
based context
Info. Architecture
based context
H based
embodied
cognition
G
S
Interaction
based context
Info. Architecture
based context
HCI1.0HCI2.0!HCI3.0?
UI
UX0.0UX1.0!UX2.0?
ZeroEffort
UX/UIStrategy
ZEC
UX/UIStrategy

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