사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰 Zero Effort & Connected(ZEC) UI/UX

1. 2014.8
성균관대학교 일반대학원
휴먼ICT융합학과 교수/
InnoUX CEO 최병호
InnoUX@InnoUX.com, @ILOVEHCI
http://Slideshare.net/BillyChoi

4. © 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호
All rights reserved.
Zero Effort UI/UX Strategic Framework
Zero Effort
UI/UX Strategy Load
부하
C+V+M=0
인지부하(Cognitive),
시각부하(Visual),
운동부하(Motor)
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰
3
“인지/시각/운동
부하와 인터페이스
복잡성을 혁신적으로
줄이고, F패턴에
부흥하며, 높은
사용품질을
내재화하는 것”
by Billy Choi
(@ILOVEHCI)

5. • 다음은 운전부하(workload)와 관련된 내용이다. 가장 적절한 것은?
① 운전부하는 나이가 많을수록 감소한다.
② 주행속도가 높을수록 시선영역이 증가하여 운전부하가 높아진다.
③ 텔레매틱스 장비를 조작하고 응시하다가 발생하는 운전자 부주의
④ 주행 중 전달되는 정보의 양이 많아질수록 시선영역(visual field)의
© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호
All rights reserved.
객관식 문제: HMI
사고는 극히 적은 편이다.
범위가 커진다.
⑤ 답이 없다.
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰 4

6. 운전 중 전화통화나 대화와 관련한 음성적
인지부하 작업에서도 복잡도에 따라 시선 집중화
현상(visual tunneling)이 나타난다. 이 현상은
인지부하 정도에 따라 시선의 할당에 변화가
나타나는 것으로, 운전에만 집중할 때와 비교하여
인지부하가 주어진 동안 운전자는 정면을
집중하여 응시하기 때문에 유효시야가 좁아지며,
인지부하 작업이 어려워질수록 유효시야는 더욱
좁아진다. (O, X)
© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호
All rights reserved.
OX 퀴즈: HMI
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰 5

7. • 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초를 경과하기 시작하면 운전부하가 높아진다.
© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호
All rights reserved.
객관식 문제: HMI
않도록 디자인할 필요가 있다.
(JAMA)
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰 6

8. Zero Effort UI/UX Strategic Framework(continue)
© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호
All rights reserved.
Zero Effort
UI/UX Strategy
복잡성 보존의 법칙
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰
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% 100% 0%
http://youtu.be/L8TkhHgkBsg
7
“인지/시각/운동
부하와 인터페이스
복잡성을 혁신적으로
줄이고, F패턴에
부흥하며, 높은
사용품질을
내재화하는 것”
by Billy Choi
(@ILOVEHCI)

9. Apple Carplay Demo in Volvo Concept Estate -- Geneva Motor Show 2014
http://youtu.be/pIo0wu0PVAs
https://www.apple.com/kr/ios/carplay/

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

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

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

13. Zero Effort UI/UX Strategic Framework(continue)
© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호
All rights reserved.
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
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰
• 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/
12
“인지/시각/운동
부하와 인터페이스
복잡성을 혁신적으로
줄이고, F패턴에
부흥하며, 높은
사용품질을
내재화하는 것”
by Billy Choi
(@ILOVEHCI)

14. © 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호
All rights reserved.
OX 퀴즈: HMI
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰 13

15. © 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호
All rights reserved.
OX 퀴즈: HMI
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰 14

16. • 다음은 운전 사고의 내용이다. 가장 적절하지 않은 것은?
① 운전 사고의 대부분이 인간의 에러(90% 이상)라는 사실은 심리학, 인간공학,
HCI/UX 등의 도입이 필요하게 되는 결정적인 이유가 되었다.
② 사람들이 과속하는 이유는 의식적으로 형성된 목표의 결과이므로, 그 외에 영향을
③ 안전한 정지를 위해 권고되는 최소 차간 거리가 2초임에도 불구하고, 복잡한
고속도로에서 평균 차간 거리는 1.32초이다. 이것은 사람의 지각적이고 인지적
편파가 원인일 가능성이 높다.
④ 거리-크기의 판단 때문에(즉, 작은 차들은 실제보다 더 멀리 떨어져있는 것으로
지각된다) 크기가 작은 차들에 대한 추돌 가능성이 더 큰 것은 지각적 편파의 한
예이다.
⑤ 운전 중에 위험요소들이 갑자기 출현하지 않을 것이고, 만일 갑자기 출현한다고 해도
자신이 충분히 차량을 정지시킬 수 있다는 과 다 확 신 감 (overconfidence)로
위험가능성을 과소평가하는 것이 인지적 편파(cognitive bias)의 전형적인 예이다.
© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호
All rights reserved.
객관식 문제: HMI
미치는 요인은 미미하다.
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰 15

17. • 다음은 In-vehicle navigation system HMI 일반 가이드라인으로 적절하지
① 시각 정보인 경우, 영어 단어 기준으로 6~8개 단어를 최적으로 권장한다.
이때 6~8개의 단어는 지명이나 도로명이 아니라 문장 속에 포함된 단어
수이다.
② 색깔 배합은 휘도대비 1.5 이상을 권장한다.
③ 교차로 수가 5개 이하인 정보 형태를 권장하지만, 지형인 익숙한 사람인
경 우 에 는 설 정 에 서 최 대 20 개 까 지 제 공 할 수 있 도 록 조 정 하 여
전문가시스템을 지향할 필요가 있다.
④ 5~6인치 크기의 제약된 공간에서 사람의 화상인식은 평균 50bit/sec이며,
⑤ 도로명을 제시할 때는 좋은 가시도나 가독성을 보장하는 것이 보다
© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호
All rights reserved.
객관식 문제: HMI
않은 것은?
문자는 약 8문자/sec 정도이다.
효율적인 항법 장치라고 권장한다.
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰 16

18. Zero Effort UI/UX Strategic Framework(continue)
© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호
All rights reserved.
Zero Effort
UI/UX Strategy
만족화 원리에
기반한 F패턴
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰
F-shaped
pattern
based
Satisficing
Interface=F
HCI Quick Guide (Emanuel Fernandes, May 2010)
17
“인지/시각/운동
부하와 인터페이스
복잡성을 혁신적으로
줄이고, F패턴에
부흥하며, 높은
사용품질을
내재화하는 것”
by Billy Choi
(@ILOVEHCI)

19. • 다음은 운전자의 시각적 주시(scanning) 관련 내용이다. 가장 적절하지 않은 것은?
① 운전 과제에 있어서 중심시(foveal vision)만큼이나 주변시(peripheral vision)가
② 디스플레이가 시각장(field of view)을 벗어나서 위치한다면, 운전자의 주변시도
차량 앞쪽의 예기치 못한 움직임을 탐지하는데 효과적으로 사용될 수 없다.
③ 전형적인 운전자의 시각 검색 행 동 (visual monitoring behavior) 은 도로와
디스플레이 사이를 번갈아 주시하는 것으로, 이것을 흔히 전환(switching)이라고
한다. 디스플레이가 시각장 앞쪽으로 멀리 떨어지면, 전환시간(switching time)이
증가하여 운전을 방해할 가능성이 높다.
④ 국내에서 초기에 도입된 항법시스템은 운전석 대쉬보드의 하단에 설치되어 있었는데,
이는 시각적 전환 시간의 감소를 유도하여 결과적으로, 안전한 운전이 가능하였던
대표적인 사례이다.
⑤ 대부분의 자동차 과제가 수행되는 동안, 전환이 매 1~1.5초 마다 발생한다.
디스플레이가 도로에서 멀리 떨어져있으면 있을수록, 전환은 더 길어지면, 운전 중에
도로에 더 짧은 시간이 투자될 수 있다.
© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호
All rights reserved.
객관식 문제: HMI
중요하다.
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰 18

21. http://youtu.be/JLOzF0Y4Mqw
Things
© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호
All rights reserved.
ZEC UI Strategic Framework
ZEC* UI/UX
Strategy
(*ZEC=Zero Effort &
Connected(IoT/IoE))
UI
Shortcuts Defaults
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰
Connected
Shortcuts &
Defaults
Thing to Service
Internet
Internet
Things
Things
Services
Services
Connecting
Physical Shortcuts
Invisible Shortcuts
• Amazon Dash
• iBeacon
Internet
Things
Services
Logical Shortcuts
• Nymi
http://youtu.be/c3h0eKGfUfI
http://youtu.be/jUO7Qnmc8vE
• Smart Glasses
상품 내비게이터,
상품 정보 열람,
카트 정보, 쇼핑
목록 관리, 즉시
결제
20
http://youtu.be/xnIoGzur0h4
“기본적인 사용성과
커넥티드 기반의
사용성을 충족하면서
현실에서 제공하지
못하는 차별화된
가치와 생태계를
디자인하여 구매자의
숨은 니즈에
부합하는 것”
by Billy Choi
(@ILOVEHCI)

22. 인간 중심의 차량용 헬스케어 UI/UX 전략 프레임워크
© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호
All rights reserved.
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰
21
1. 인간 중심의 차량용 헬스케어 서비스
및 감성 디자인 방향성 수립
2. 현대자동차 고유의 차별화된 가치
도출
추진
목적
수행
범주
1. 수요 조사
2. 서비스 전략 수립
3. 감성 디자인
4. 디자인 가이드라인 수립
5. 수용성 테스트
개발 방향성
핵심 타깃
주요 시나리오 대상
적용 스크린
콘텐츠 타입
메인 디자인 원칙
플랫폼(생태계) 종류
음주운전자, 지병이 있는 운전자 및 동승객, 장시간 운전자, IoT 제품 사용자
운전 전/중/후, 진단/공유/조치, 동승객 유무
클러스터, AVN, HUD
PULL content, PUSH content, AR/VR content
인지/시각/운동 부하 감소, Less is more(정보/기능), 15초 법칙, 비주얼 터널링
디바이스 간 연계 생태계와 산업군 연계 생태계 추구
개발
필요성
• 경쟁사는 보유한 역량에
부합하는 차량용 헬스케어
서비스 개척으로 시장 및
수요 창출 도모
• 새로운 산업
패러다임으로 소비자의
건강을 측정 및 관리하는
IoT 제품 급부상
• 개발 트렌드는 제조
위주에서 인간 중심으로,
학습 강요에서 Natural
UI(NUI)로 전환
• 디자인 트렌드는 UI에서
체화된 인지를 투영한
UX로, 스큐어모피즘에서
미니멀리즘으로 전환

23. 인간 중심의 차량용 헬스케어 UI/UX 전략 프레임워크(계속)
AREA PROCESS METHODS
© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호
All rights reserved.
프로젝트에 활용할 주요한 기법은 약 14개 정도임
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰
22
신규 콘텐츠
발굴
헬스케어
개발 시스템
연계
GUI 개발
DISCOVER
DESIGN
DEFINE
리서치
전략 수립
디자인 초안 완료 및
프로토타이핑
소비자 대상으로
수용성 테스트
디자인 최종 완료 및
워크숍
가이드라인 작성
• TREND WATCHING
• INNOVATION GAME
• WORKSHOP
• PERSONA
• SCENARIO DESCRIPTION SWIMLANES
• SERVICE MAP
• STRATEGY EXPERIENCE MAP
• PICTURE CARDS
• DESIGN METRICS
• A/B TEST
• WIZARD OF OZ & SIMULATION
• DESIGN CHECKLIST
• UX/UI GUIDELINE

24. Six phase of Quantified self for ZEC* 1.0a by Billy Choi
The measurement of customer behaviors, leveraging the things
(사물로 고객의 행동 측정)
Sync measured behavior data to the service system
(측정한 행동 데이터를 서비스 시스템에 동기화)
© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호
All rights reserved.
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰
*ZEC=Zero Effort & Connected(IoT/WoT/IoE)
23
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
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
(자연성 회복 및 타인의 변화에 영향력 행사)

25. 24

27. The Overview of ZEC(Zero Effort & Connected) UI/UX Strategy 1.0a
Interface
Man Machine
Interface
based context
Human Computer
Interaction
based context
Info. Architecture
based context
H C
Interaction
based context
Info. Architecture
based context
H C
© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호
All rights reserved.
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰
26
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
HCI 3.0? HCI 2.0! HCI 1.0
UI
UX 2.0? UX 1.0! UX 0.0
Zero Effort
UI/UX Strategy
ZEC
UI/UX Strategy

28. Paradigm/
선택할 수 있는 모든 가능성
Diachrony(통시성)
Chip+Shoes Web
컬쳐코드를
만든다.
Syntagm/
Synchrony
(공시성/현재)
© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호
All rights reserved.
ZEC UI/UX Strategic Framework(continue)
ZEC* UI/UX
Strategy
(*ZEC=Zero Effort &
Connected(IoT/IoE))
UX
사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰
Ferdinand de
Saussure’s
Syntagm &
Paradigm
S+P=CE
소쉬르의 2분법적
구조인 결합체
(Syntagm)과
계열체
(Paradigm)
응용하여 Culture
Ecosystem 구축
27
“기본적인 사용성과
커넥티드 기반의
사용성을 충족하면서
현실에서 제공하지
못하는 차별화된
가치와 생태계를
디자인하여 구매자의
숨은 니즈에
부합하는 것”
by Billy Choi
(@ILOVEHCI)
“무수히 많은 가능성들 가운데
어느 하나가 선택되어 ‘결합체’로
완결되면 결합의 결속력은 매우
견고해진다. 이후에 하나의
이미지로 굳어져 이후의 인식과
관념에 지배적인 영향력을
행사한다.”(기호학/전동열,2012)
FualBand
SE
Mobile
Web
Statistical
Information
based open
data
Coaching/
SNS
Nike+ Kinect
Training
Web App
PC(iTunes)
Sportwatch
GPS
Mobile
App
Things Media Information Triggers
[Nike의 Culture Ecosystem 분석]
랑그(자연/
습관)가 된다.

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