트렌드와 사례연구를 통한모바일 커머스 차별화 UI/UX 전략 모델 통찰

트렌드와사례연구를 통한

모바일 커머스차별화 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>



차별화된 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*


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*


12

I0

INavigation

0Findability

IAdd to Cart

0Personalization

IPurchase

0QOL*


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*


18

I0

INavigation

0Findability

IAdd to Cart

0Personalization

IPurchase

0QOL*


P

S1

S2

S3

P

19

• 레시피와 소스를 동시 판매

• 로컬 마켓과 연계 판매

변화하고 있는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)



Zero Effort UI/UX Strategic Framework(continue)

Zero Effort UI/UX Strategy Load

C+V+M=0

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

부하

22

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




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

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




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


HInteraction

based context


HGroup

Society

CContent

Service

Interaction based context


HGS



H based embodied cognition

GS

CCSConnected Thing

Culture-(eco)System

Company



H based embodied cognition

GS



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

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