Upload
billy-choi
View
445
Download
4
Embed Size (px)
Citation preview
트렌드와사례연구를 통한
모바일 커머스차별화 UI/UX
전략 모델 통찰
2015.6
성균관대학교 일반대학원 휴먼ICT융합학과 교수 (산학협력중점)/ 최병호/ [email protected]
Research Data: http://www.slideshare.net/BillyChoi/Twitter/Facebook: ILOVEHCI
휴먼ICT융합 blog: http://humanictconvergence.blogspot.kr/UX미래융합전략연구소 blog: http://blog.naver.com/soularchitec
© 2015 성균관대학교 일반대학원 휴먼ICT융합학과 교수최병호 All rights reserved.
트렌드와 사례연구를 통한 모바일 커머스 차별화 UI/UX 전략 모델 통찰
Table of Contents
I. 모바일 커머스 트렌드 연구II. 차별화된 UI/UX 전략 모델 통찰III.변화하고 있는 UI/UX 트렌드에서 참조해야 할 몇 가지
1
모바일 트렌드연구
3Source: <Criteo State of Mobile Commerce Q1 2015>
4Source: <Criteo State of Mobile Commerce Q1 2015>
5Source: <Criteo State of Mobile Commerce Q1 2015>
차별화된 UI/UX 전략 모델 통찰
7
I0
INavigation
0Findability
IAdd to Cart
0Personalization
IPurchase
0QOL*
* QOL: Quality of Life
8
I0
INavigation
0Findability
IAdd to Cart
0Personalization
IPurchase
0QOL*
* QOL: Quality of Life
9
Source: http://browsy.com/
• 제품 탐색과 쇼핑 카트에 담는 행위 분리: Input의 부분적 소멸= 제품 탐색의즐거움 강화 효과 유발, 쇼핑 시간 단축착각 유도
• 거대한 쇼핑 카트 전문 채널로서 강화된개인화 접근
10
Source: http://amzn.to/1dIPgS6
• 타 채널의 제품 탐색과 자신의채널의 쇼핑 카트에 담는 행위 통합: 자신의 채널에서 Input의 부분적소멸= 타 채널의 목적대로 활용도중에 제품 탐색의 즐거움 강화효과 유발, 쇼핑 시간 단축 착각유도
• 단, 해시태크는 CLI의 단점 보유로, Like와 같은 고유의 버튼 지원 필요
11
I0
INavigation
0Findability
IAdd to Cart
0Personalization
IPurchase
0QOL*
* QOL: Quality of Life
12
I0
INavigation
0Findability
IAdd to Cart
0Personalization
IPurchase
0QOL*
* QOL: Quality of Life
13
Source: https://pixbi.com/
• 다다익’선’이 아닌 ‘제약’ 전략추구: 한정된 정보량은인지부하 축소 유발
• 즉각적인 정보 확인 및 결재유도
14
• 선택 과정 생략
Source: http://apple.co/1K6b0Dy
15
• 스캔 대상 확대: 새로운 기회, WYSIWYG의 확장
Source: http://slyce.it/
16
• 다다익’선’이 아닌 ‘제약’ 전략추구: 한정된 정보량은 인지부하축소 유발
• 즉각적인 정보 확인 및 결재 유도
• 선택 과정 생략• 스캔 대상 확대: 새로운 기회
• 가정용 아마존 대시, 아마존 대시버튼 응용: IoT 제품인 휴대용스마트 카드 적용 검토 => Input의 부분적 소멸, 제품 간통합 시스템 접근 필요
Source: http://hiku.us/how-it-works
17
I0
INavigation
0Findability
IAdd to Cart
0Personalization
IPurchase
0QOL*
* QOL: Quality of Life
18
I0
INavigation
0Findability
IAdd to Cart
0Personalization
IPurchase
0QOL*
* QOL: Quality of Life
P
S1
S2
S3
P
19
• 레시피와 소스를 동시 판매
• 로컬 마켓과 연계 판매
변화하고 있는UI/UX 트렌드에서참조해야 할 몇가지
© 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)
© 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)
© 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)
© 2015 성균관대학교 일반대학원 휴먼ICT융합학과 교수최병호 All rights reserved.
트렌드와 사례연구를 통한 모바일 커머스 차별화 UI/UX 전략 모델 통찰
The Overview of ZEC(Zero Effort & Connected) UX/UI Strategy 1.0a
24
Man MachineInterface
Human Computer
Interface based context
H CInteraction
based context
Info. Architecture based context
H CInteraction
based context
Info. Architecture based context
HInteraction
based context
Info. Architecture based context
HGroup
Society
CContent
Service
Interaction based context
Info. Architecture based context
HGS
Interaction based context
Info. Architecture based context
H based embodied cognition
GS
CCSConnected Thing
Culture-(eco)System
Company
Interaction based context
Info. Architecture based context
H based embodied cognition
GS
Interaction based context
Info. Architecture based context
HCI
1.0
HCI
2.0!
HCI
3.0?
UI
UX 0
.0U
X 1
.0!
UX 2
.0?
Zer
o E
ffort
U
X/U
I St
rate
gy
ZEC
UX/U
I St
rate
gy
경청해주셔서고맙습니다!