2015년 UX 최신 트렌드 및 전망

2015.1
성균관대학교 일반대학원 휴먼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

© 2015 성균관대학교 일반대학원 휴먼ICT융합학과 교수
최병호 All rights reserved.
2015년 UX 최신 트렌드 및 전망
Table of Contents
1. 24h(Time Technology) + BT(Bio Technology) based UX
2. ZEC(Zero Effort & Connected) UX
3. Cultural-Ecosystem driven UX; New Habit & New Motivation centric UX
• 사례에서 길어 올린 UX/UI의 이해와 전략적 통찰
1

AliveCor (심전도 모니터링)
• 캘리포니아주의 얼라이코사는 전극이 장착된 아이폰용 케이스를 통해 심전도를 측정할
수 있는 앱 개발함
• 앱을 작동시킨 후에 손으로 아이폰용 케이스를 가슴에 대면 심전도를 측정하고,
그래프와 수치를 확인할 수 있으며, 정보를 의사에게 전송할 수 있음
• 자체 내장 배터리 전원으로 측정하며, 데이터는 무선으로 스마트폰에 전송함.
FDA(식품의약국) 승인 받아 미국에서 199달러 판매 중임
3
See how it works - AliveECG by AliveCor http://youtu.be/0pE_InOy1mk
생체인식 기술, 시장동향과 참여업체 사업전략, 편집부, 임팩트, 2014년 10월 10일

Zero Effort UX/UI Strategic Framework
14
Zero Effort
UX/UI 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)

TI의 오토모티브 기술: 차세대 기술 실현
http://cdnapi.kaltura.com/index.php/extwidget/openGraph/wid/0_apapb0fg

TI의 오토모티브 기술: Car Access System
http://www.ti.com/solution/car_access_system

사례 연구: 재규어랜드로버
17
http://www.motorgraph.com/news/articleView.html?idxno=3400
• 운전자의 선호도와 운전 스타일 기억하는
학습 알고리즘을 통해 포괄적인 서비스를
제공하며 운전자의 주의력을 분산시키는
요소를 최소화해 사고 발생을 방지한다.
• 이 기술은 운전자를 인식해 시트
포지션, 실내 온도 등 개인별 선호 사항을
자동으로 맞춰주고 날씨 및 당일 일정 등
다양한 변수에 기반해 상황별 맞춤 옵션을
제공한다. 예를 들어, 특정 시간이나 어떤
장소로 가는 도중에 늘 마사지 기능을
사용한다면 소프트웨어는 이를 기억해
자동으로 마사지 기능을 작동 시킨다.
• 또한 어댑티브 크루즈 컨트롤은 운전자의
과거 주행 정보와 교통 상황에 기반해
거리와 속도를 자동으로 설정한다.

객관식 문제: HMI
18
• 다음은 운전부하(workload)와 관련된 내용이다. 가장 적절한 것은?
① 운전부하는 나이가 많을수록 감소한다.
② 주행속도가 높을수록 시선영역이 증가하여 운전부하가 높아진다.
③ 텔레매틱스 장비를 조작하고 응시하다가 발생하는 운전자 부주의
사고는 극히 적은 편이다.
④ 주행 중 전달되는 정보의 양이 많아질수록 시선영역(visual field)의
범위가 커진다.
⑤ 답이 없다.
• 다음은 운전부하(workload)와 관련된 내용이다. 가장 적절한 것은?
① 운전부하는 나이가 많을수록 감소한다.
② 주행속도가 높을수록 시선영역이 증가하여 운전부하가 높아진다.
③ 텔레매틱스 장비를 조작하고 응시하다가 발생하는 운전자 부주의
사고는 극히 적은 편이다.
④ 주행 중 전달되는 정보의 양이 많아질수록 시선영역(visual field)의
범위가 커진다.
⑤ 답이 없다.

OX 퀴즈: HMI
19
운전 중 전화통화나 대화와 관련한 음성적
인지부하 작업에서도 복잡도에 따라 시선 집중화
현상(visual tunneling)이 나타난다. 이 현상은
인지부하 정도에 따라 시선의 할당에 변화가
나타나는 것으로, 운전에만 집중할 때와 비교하여
인지부하가 주어진 동안 운전자는 정면을
집중하여 응시하기 때문에 유효시야가 좁아지며,
인지부하 작업이 어려워질수록 유효시야는 더욱
좁아진다. (O, X)
운전 중 전화통화나 대화와 관련한 음성적
인지부하 작업에서도 복잡도에 따라 시선 집중화
현상(visual tunneling)이 나타난다. 이 현상은
인지부하 정도에 따라 시선의 할당에 변화가
나타나는 것으로, 운전에만 집중할 때와 비교하여
인지부하가 주어진 동안 운전자는 정면을
집중하여 응시하기 때문에 유효시야가 좁아지며,
인지부하 작업이 어려워질수록 유효시야는 더욱
좁아진다. (O, X)

객관식 문제: HMI
20
• In-vehicle navigation system HMI 가이드라인으로 적절하지 않은 것은?
① 내비게이션을 한 번 잠시 보는 시간(single glance time)은 최대 2초를 넘지 않도록
디자인할 필요가 있다. 이것은 운전자가 도로에서 시선을 떼는 시간을 1.5초 이내로
제한하려는 경향성(ISO 15005)을 반영한 것이다.
② 내비게이션을 보는 횟수(number of glances)는 최소 6번에서 최대 10번을 넘지
않도록 디자인할 필요가 있다.
③ 내비게이션을 조작하거나 보는 총 시간(total visual task time)은 최소 7초에서 최대
15초를 넘지 않도록 디자인할 필요가 있다. 이것은 15초 법칙이라고 불린다. (SAE
J2364에서 정의한 total eye glance time, AAM)
④ 내비게이션을 조작하지 않고 단순히 참조만 할 때에는 20초가 넘어가도 운전에 큰
지장을 초래하지 않는다. (SAE J2364에서 정의한 TSOT(Total Shutter Open Time))
⑤ 내비게이션을 조작하는 시간이 7.5초를 경과하기 시작하면 운전부하가 높아진다.
(JAMA)
• In-vehicle navigation system HMI 가이드라인으로 적절하지 않은 것은?
① 내비게이션을 한 번 잠시 보는 시간(single glance time)은 최대 2초를 넘지 않도록
디자인할 필요가 있다. 이것은 운전자가 도로에서 시선을 떼는 시간을 1.5초 이내로
제한하려는 경향성(ISO 15005)을 반영한 것이다.
② 내비게이션을 보는 횟수(number of glances)는 최소 6번에서 최대 10번을 넘지
않도록 디자인할 필요가 있다.
③ 내비게이션을 조작하거나 보는 총 시간(total visual task time)은 최소 7초에서 최대
15초를 넘지 않도록 디자인할 필요가 있다. 이것은 15초 법칙이라고 불린다. (SAE
J2364에서 정의한 total eye glance time, AAM)
④ 내비게이션을 조작하지 않고 단순히 참조만 할 때에는 20초가 넘어가도 운전에 큰
지장을 초래하지 않는다. (SAE J2364에서 정의한 TSOT(Total Shutter Open Time))
⑤ 내비게이션을 조작하는 시간이 7.5초를 경과하기 시작하면 운전부하가 높아진다.
(JAMA)

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
system
http://www.designresourcebox.com/why-usability-is-the-most-important-aspect-of-designing-a-site/
21
사용품질을
by Billy Choi
(@ILOVEHCI)

Zero Effort
UI/UX Strategy
F-shaped
pattern
based
Satisficing
Interface=F
만족화 원리에
기반한 F패턴
HCI Quick Guide (Emanuel Fernandes, May 2010)
22
사용품질을
by Billy Choi
(@ILOVEHCI)

Zero Effort
UI/UX Strategy Load
C+V+M=0
인지부하(Cognitive),
시각부하(Visual),
운동부하(Motor)
부하
23
사용품질을
by Billy Choi
(@ILOVEHCI)

ZEC UI Strategic Framework
24
ZEC* UI/UX
Strategy
(*ZEC=Zero Effort &
Connected(IoT/IoE))
UI
Connected
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
Things
Services
Logical Shortcuts
• Nymi
Things
http://youtu.be/c3h0eKGfUfI
http://youtu.be/jUO7Qnmc8vE
• Smart Glasses
상품 내비게이터,
상품 정보 열람,
카트 정보, 쇼핑
목록 관리, 즉시
결제
http://youtu.be/xnIoGzur0h4
“기본적인 사용성과
커넥티드 기반의
사용성을 충족하면서
현실에서 제공하지
못하는 차별화된
가치와 생태계를
디자인하여 구매자의
숨은 니즈에
부합하는 것”
by Billy Choi
(@ILOVEHCI)

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)
25
숨은 니즈에
부합하는 것”
by Billy Choi
(@ILOVEHCI)

자기효능감
(self-efficacy)

자기효능감
(self-efficacy)
친구(Social)
오픈(Open-eco)

ZEC UX/UI Strategic Framework
ZEC* UX/UI
Strategy
(*ZEC=Zero Effort &
Connected(IoT/IoE))
UX
Ferdinand de
Saussure’s
Syntagm &
Paradigm
S+P=CE
소쉬르의 2분법적
구조인 결합체
(Syntagm)과
계열체
(Paradigm)
응용하여 Culture
Ecosystem 구축
34
FualBand
SE
Mobile
Web
Statistical
Information
based open
data
Coaching/
SNS
Nike+ Kinect
Training
Web App
PC(iTunes)
Sportwatch
GPS
Chip+Shoes Web
Mobile
App
Things Media Information Triggers
Syntagm/
Synchrony
(공시성/현재)
Paradigm/
Diachrony(통시성)
숨은 니즈에
부합하는 것”
by Billy Choi
(@ILOVEHCI)
[Nike의 Culture Ecosystem 분석]
“무수히 많은 가능성들 가운데
어느 하나가 선택되어 ‘결합체’로
완결되면 결합의 결속력은 매우
견고해진다. 이후에 하나의
이미지로 굳어져 이후의 인식과
관념에 지배적인 영향력을
행사한다.”(기호학/전동열,2012)
선택할 수 있는 모든 가능성
랑그(자연/
습관)가 된다.
컬쳐코드를
만든다.

ZEC UI/UX Strategic Framework(continue)
ZEC* UI/UX
Strategy
(*ZEC=Zero Effort &
Connected(IoT/IoE))
UX
Jean
Baudrillard’s
Simulation &
Hyperreal
일상의 가치 지향적인
시뮬라시옹
장 보드리야르의
시뮬라시옹과
과잉현실의 가치 응용
35
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 of
reality; they affect and produce the
reality that they mediate’”(John
Fiske,1994),
Smart Mirror의 시뮬라시옹
Smart Bathroom의 시뮬라시옹
Smart Signage의 시뮬라시옹 Smart Shop의 시뮬라시옹

시뮬라시옹
36
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
디즈니랜드*
디즈니랜드의
시뮬라시옹**

일상의 가치 지향적인 시뮬라시옹
37
거울
진짜 가짜
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

ZEC UI/UX Strategic Framework(continue)
ZEC* UI/UX
Strategy
(*ZEC=Zero Effort &
Connected(IoT/IoE))
UX
Quantified
Self & Change
Life
Six phase
• 자가 측정 결과를
통한 자기 및 동료의
동반 성장 리딩
• MSSUSC Self로의
변화
• C2S, S2C, C2C로의
변화
38
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)

Six phase of Quantified self for ZEC* 1.0a by Billy Choi
*ZEC=Zero Effort & Connected(IoT/WoT/IoE)
39
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
(자연성 회복 및 타인의 변화에 영향력 행사)

The Overview of ZEC(Zero Effort & Connected) UX/UI Strategy 1.0a
47
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

48
HCD Human-Centered Design
UCD User-Centered Design
ACD Activity-Centered Design
GDD Goal-Driven Design (Persona & Scenario design)
CCD Collaboration-Centered Design (Agile UX)
MCD Metrics-Driven Design (Lean UX)

49
UX/UI
Method
I
UX/UI
Method
II
UX/UI
Method
III
UX/UI
Method
IV
UX/UI
Guideline
I
UX/UI
Guideline
II
UX/UI
Guideline
III
UX/UI
Guideline
IV

(출처: http://slidesha.re/1sp6mrT)

(이미지 출처: UX South Africa 2014 - Keynote/ http://slidesha.re/1tr7rSk )
가슴 뛰는 가치를 정의하는 것이 vision이죠.
그 비전을 남들이 아무리 노력해도 베낄 수 없도록
대체와 모방이 불가능한 독보적인 방법을 규정하
는 것이 strategy이죠.
고객이 기대하는 그러나 그 이상의 놀라움을 포장
하여 제공할 수 있는 선물을 고르는 것이
proposition이죠.
그 선물을 누구라도 이해할 수 있는 스토리텔링이
라는 옷을 입히고 끄덕끄덕 거리는 것이 concept
이죠.
고객에게 가장 실체화될 수 있는 concept을 직접
적으로 보여주는 것이 information이죠.
그 information을 고객의 멘탈모델과 태스크모델에
부합되도록 조직화하고 구조화하는 것이 structure
이죠.
고객의 목적을 달성할 수 있도록 눈에 보이지 않는
usage process을 설계하는 것이 interaction이죠.
보자마자 숨이 멈출 것 같은 총체적인 감성을 제공
하는 것이 appearance이죠.
이 모든 것이 동작되도록 기술력을 투영하는 것이
front-end이죠.
지금까지 순차적으로 언급했던 핵심 단어는 상위
가치로부터 상세 가치까지 이어지는 일련의 흐름
을 가지고 있다는 것을 잊지 않으면 위대한 작품을
만드는데 기여할 것이죠.^^

(출처: http://www.uie.com/articles/ux_strategy_blueprint/ )

(이미지 출처: http://slidesha.re/1qosi1H )
Martin Granstrom의 UX전략 프레임워크

(이미지 출처: The ux of user experience/ http://slidesha.re/1qolLUN )

회상해야 할 항목의 개수가 많을수록 기억력의 정확도는 떨어진다
Susan M. Weinschenk, 2011

망각 곡선으로,
장기 기억에 저장돼 있는 정보임에도 얼마나 빨리 기억을 잊어버리는지 보여준다
Susan M. Weinschenk, 2011

정보를 인식하는 것이 기존의 기억을 회상하는 것보다 훨씬 쉽다
• 사용자에게 정보를 회상(recall)하게 하는 것은 지양한다. 기억의 저편에서 정보를
끌어오는 것(recall)보다 재인(recognize)시켜 주는 편이 사용자에게 훨씬 쉽다.
• 재인(recognition)은 맥락(context)을 이용한다. 맥락은 우리의 기억을 돕는다.
68

Janssen’s Care4Today App and SMS
http://youtu.be/65Ri11jYaTc
Care4Today pairs image-driven
reminders with incentives and
social support. Through an app or
text messaging (user’s choice), the
program helps support daily
adherence to treatment plans.
Care4Today has a refill reminder and
a two-way secure messaging
platform. It also has images of over
20,000 pills – making it a lot easier
to know exactly what to take. To
motivate users, it can alert a
designated “caregiver” if a user
misses a dose or give 5¢/day to a
chosen charity when the user
confirms a dose.
http://slidesha.re/1uBY9gv

BJ Fogg's Behavior Model(FBM)
70

① ZEC(Zero Effort & Connected) UX/UI 전략을 구사해야
한다. (예) 병원에서 알람 규칙 자동 제공, 약 열람 현황
식별 가능한 smart drug box 서비스, Deep learning 기술이
적용된 손자의 먹거리 챙기기 서비스
② 패밀리와 유관 에코시스템의 협력 서비스를 도입해야 한다.
③ Gamification을 적용해야 한다. (예) 약속 어길 시 기부
④ 실버의 신체적/심리적 제약 조건에 부합하는 UI 디자인

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

2015년 UX 최신 트렌드 및 전망

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to 2015년 UX 최신 트렌드 및 전망

Similar to 2015년 UX 최신 트렌드 및 전망 (20)

More from Billy Choi

More from Billy Choi (20)

2015년 UX 최신 트렌드 및 전망