사람 중심의 자동차 구현을 위한 ui/ux 방향성 고찰

2014.8

성균관대학교 일반대학원휴먼ICT융합학과 교수/

InnoUX CEO 최병호

[email protected], @ILOVEHCIhttp://Slideshare.net/BillyChoi

© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/InnoUX CEO 최병호All rights reserved.

사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰

Zero Effort UI/UX Strategic Framework

Zero Effort UI/UX Strategy Load

C+V+M=0

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

부하

3

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

by Billy Choi(@ILOVEHCI)


사람 중심의 자동차 구현을 위한 UI/UX 방향성 고찰 4

객관식 문제: HMI

• 다음은 운전부하(workload)와 관련된 내용이다. 가장 적절한 것은?

① 운전부하는 나이가 많을수록 감소한다.

② 주행속도가 높을수록 시선영역이 증가하여 운전부하가 높아진다.

③ 텔레매틱스 장비를 조작하고 응시하다가 발생하는 운전자 부주의사고는 극히 적은 편이다.

④ 주행 중 전달되는 정보의 양이 많아질수록 시선영역(visual field)의범위가 커진다.

⑤ 답이 없다.

• 다음은 운전부하(workload)와 관련된 내용이다. 가장 적절한 것은?

① 운전부하는 나이가 많을수록 감소한다.

② 주행속도가 높을수록 시선영역이 증가하여 운전부하가 높아진다.

③ 텔레매틱스 장비를 조작하고 응시하다가 발생하는 운전자 부주의사고는 극히 적은 편이다.

④ 주행 중 전달되는 정보의 양이 많아질수록 시선영역(visual field)의범위가 커진다.

⑤ 답이 없다.



OX 퀴즈: HMI

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

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




• 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초 법칙이라고 불린다. (SAEJ2364에서 정의한 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초 법칙이라고 불린다. (SAEJ2364에서 정의한 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

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

7



http://youtu.be/pIo0wu0PVAs

Apple Carplay Demo in Volvo Concept Estate -- Geneva Motor Show 2014

https://www.apple.com/kr/ios/carplay/

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

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



사례 연구: 재규어랜드로버

11

http://www.motorgraph.com/news/articleView.html?idxno=3400

• 운전자의 선호도와 운전 스타일 기억하는학습 알고리즘을 통해 포괄적인 서비스를제공하며 운전자의 주의력을 분산시키는요소를 최소화해 사고 발생을 방지한다.

• 이 기술은 운전자를 인식해 시트포지션, 실내 온도 등 개인별 선호 사항을자동으로 맞춰주고 날씨 및 당일 일정 등다양한 변수에 기반해 상황별 맞춤 옵션을제공한다. 예를 들어, 특정 시간이나 어떤장소로 가는 도중에 늘 마사지 기능을사용한다면 소프트웨어는 이를 기억해자동으로 마사지 기능을 작동 시킨다.

• 또한 어댑티브 크루즈 컨트롤은 운전자의과거 주행 정보와 교통 상황에 기반해거리와 속도를 자동으로 설정한다.




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 systemhttp://www.designresourcebox.com/why-usability-is-the-most-important-aspect-of-designing-a-site/

12





OX 퀴즈: HMI




• 다음은 운전 사고의 내용이다. 가장 적절하지 않은 것은?

① 운전 사고의 대부분이 인간의 에러(90% 이상)라는 사실은 심리학, 인간공학,HCI/UX 등의 도입이 필요하게 되는 결정적인 이유가 되었다.

② 사람들이 과속하는 이유는 의식적으로 형성된 목표의 결과이므로, 그 외에 영향을미치는 요인은 미미하다.

③ 안전한 정지를 위해 권고되는 최소 차간 거리가 2초임에도 불구하고, 복잡한고속도로에서 평균 차간 거리는 1.32초이다. 이것은 사람의 지각적이고 인지적편파가 원인일 가능성이 높다.

④ 거리-크기의 판단 때문에(즉, 작은 차들은 실제보다 더 멀리 떨어져있는 것으로지각된다) 크기가 작은 차들에 대한 추돌 가능성이 더 큰 것은 지각적 편파의 한예이다.

⑤ 운전 중에 위험요소들이 갑자기 출현하지 않을 것이고, 만일 갑자기 출현한다고 해도자신이 충분히 차량을 정지시킬 수 있다는 과다확신감(overconfidence)로위험가능성을 과소평가하는 것이 인지적 편파(cognitive bias)의 전형적인 예이다.

• 다음은 운전 사고의 내용이다. 가장 적절하지 않은 것은?

① 운전 사고의 대부분이 인간의 에러(90% 이상)라는 사실은 심리학, 인간공학,HCI/UX 등의 도입이 필요하게 되는 결정적인 이유가 되었다.

② 사람들이 과속하는 이유는 의식적으로 형성된 목표의 결과이므로, 그 외에 영향을미치는 요인은 미미하다.

③ 안전한 정지를 위해 권고되는 최소 차간 거리가 2초임에도 불구하고, 복잡한고속도로에서 평균 차간 거리는 1.32초이다. 이것은 사람의 지각적이고 인지적편파가 원인일 가능성이 높다.

④ 거리-크기의 판단 때문에(즉, 작은 차들은 실제보다 더 멀리 떨어져있는 것으로지각된다) 크기가 작은 차들에 대한 추돌 가능성이 더 큰 것은 지각적 편파의 한예이다.

⑤ 운전 중에 위험요소들이 갑자기 출현하지 않을 것이고, 만일 갑자기 출현한다고 해도자신이 충분히 차량을 정지시킬 수 있다는 과다확신감(overconfidence)로위험가능성을 과소평가하는 것이 인지적 편파(cognitive bias)의 전형적인 예이다.




• 다음은 In-vehicle navigation system HMI 일반 가이드라인으로 적절하지않은 것은?

① 시각 정보인 경우, 영어 단어 기준으로 6~8개 단어를 최적으로 권장한다.이때 6~8개의 단어는 지명이나 도로명이 아니라 문장 속에 포함된 단어수이다.

② 색깔 배합은 휘도대비 1.5 이상을 권장한다.

③ 교차로 수가 5개 이하인 정보 형태를 권장하지만, 지형인 익숙한 사람인경우에는 설정에서 최대 20개까지 제공할 수 있도록 조정하여전문가시스템을 지향할 필요가 있다.

④ 5~6인치 크기의 제약된 공간에서 사람의 화상인식은 평균 50bit/sec이며,문자는 약 8문자/sec 정도이다.

⑤ 도로명을 제시할 때는 좋은 가시도나 가독성을 보장하는 것이 보다효율적인 항법 장치라고 권장한다.

• 다음은 In-vehicle navigation system HMI 일반 가이드라인으로 적절하지않은 것은?

① 시각 정보인 경우, 영어 단어 기준으로 6~8개 단어를 최적으로 권장한다.이때 6~8개의 단어는 지명이나 도로명이 아니라 문장 속에 포함된 단어수이다.

② 색깔 배합은 휘도대비 1.5 이상을 권장한다.

③ 교차로 수가 5개 이하인 정보 형태를 권장하지만, 지형인 익숙한 사람인경우에는 설정에서 최대 20개까지 제공할 수 있도록 조정하여전문가시스템을 지향할 필요가 있다.

④ 5~6인치 크기의 제약된 공간에서 사람의 화상인식은 평균 50bit/sec이며,문자는 약 8문자/sec 정도이다.

⑤ 도로명을 제시할 때는 좋은 가시도나 가독성을 보장하는 것이 보다효율적인 항법 장치라고 권장한다.




Zero Effort UI/UX Strategy

F-shaped patternbased

Satisficing

Interface=F

만족화 원리에기반한 F패턴

HCI Quick Guide (Emanuel Fernandes, May 2010)

17






• 다음은 운전자의 시각적 주시(scanning) 관련 내용이다. 가장 적절하지 않은 것은?

① 운전 과제에 있어서 중심시(foveal vision)만큼이나 주변시(peripheral vision)가중요하다.

② 디스플레이가 시각장(field of view)을 벗어나서 위치한다면, 운전자의 주변시도차량 앞쪽의 예기치 못한 움직임을 탐지하는데 효과적으로 사용될 수 없다.

③ 전형적인 운전자의 시각 검색 행동(visual monitoring behavior)은 도로와디스플레이 사이를 번갈아 주시하는 것으로, 이것을 흔히 전환(switching)이라고한다. 디스플레이가 시각장 앞쪽으로 멀리 떨어지면, 전환시간(switching time)이증가하여 운전을 방해할 가능성이 높다.

④ 국내에서 초기에 도입된 항법시스템은 운전석 대쉬보드의 하단에 설치되어 있었는데,이는 시각적 전환 시간의 감소를 유도하여 결과적으로, 안전한 운전이 가능하였던대표적인 사례이다.

⑤ 대부분의 자동차 과제가 수행되는 동안, 전환이 매 1~1.5초 마다 발생한다.디스플레이가 도로에서 멀리 떨어져있으면 있을수록, 전환은 더 길어지면, 운전 중에도로에 더 짧은 시간이 투자될 수 있다.

• 다음은 운전자의 시각적 주시(scanning) 관련 내용이다. 가장 적절하지 않은 것은?

① 운전 과제에 있어서 중심시(foveal vision)만큼이나 주변시(peripheral vision)가중요하다.

② 디스플레이가 시각장(field of view)을 벗어나서 위치한다면, 운전자의 주변시도차량 앞쪽의 예기치 못한 움직임을 탐지하는데 효과적으로 사용될 수 없다.

③ 전형적인 운전자의 시각 검색 행동(visual monitoring behavior)은 도로와디스플레이 사이를 번갈아 주시하는 것으로, 이것을 흔히 전환(switching)이라고한다. 디스플레이가 시각장 앞쪽으로 멀리 떨어지면, 전환시간(switching time)이증가하여 운전을 방해할 가능성이 높다.

④ 국내에서 초기에 도입된 항법시스템은 운전석 대쉬보드의 하단에 설치되어 있었는데,이는 시각적 전환 시간의 감소를 유도하여 결과적으로, 안전한 운전이 가능하였던대표적인 사례이다.

⑤ 대부분의 자동차 과제가 수행되는 동안, 전환이 매 1~1.5초 마다 발생한다.디스플레이가 도로에서 멀리 떨어져있으면 있을수록, 전환은 더 길어지면, 운전 중에도로에 더 짧은 시간이 투자될 수 있다.



ZEC UI Strategic Framework

ZEC* UI/UX Strategy(*ZEC=Zero Effort & Connected(IoT/IoE))

UIConnected 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

ThingsServices

Logical Shortcuts

• Nymi

Thingshttp://youtu.be/c3h0eKGfUfI

http://youtu.be/jUO7Qnmc8vE

• Smart Glasses상품 내비게이터, 상품 정보 열람, 카트 정보, 쇼핑목록 관리, 즉시결제

20

http://youtu.be/xnIoGzur0h4

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




인간 중심의 차량용 헬스케어 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로, 스큐어모피즘에서미니멀리즘으로 전환



인간 중심의 차량용 헬스케어 UI/UX 전략 프레임워크(계속)

22

프로젝트에 활용할 주요한 기법은 약 14개 정도임

신규 콘텐츠

발굴

헬스케어

개발 시스템

연계

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

AREA PROCESS METHODS



Six phase of Quantified self for ZEC* 1.0a by Billy Choi

*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

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) UI/UX Strategy 1.0a

26

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

I/U

X S

trat

egy

ZEC

UI/

UX S

trat

egy



ZEC UI/UX Strategic Framework(continue)

ZEC* UI/UX Strategy(*ZEC=Zero Effort & Connected(IoT/IoE))

UX

Ferdinand de Saussure’s Syntagm & Paradigm

S+P=CE

소쉬르의 2분법적구조인 결합체(Syntagm)과계열체(Paradigm) 응용하여 Culture Ecosystem 구축

27

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


“무수히 많은 가능성들 가운데어느 하나가 선택되어 ‘결합체’로완결되면 결합의 결속력은 매우견고해진다. 이후에 하나의이미지로 굳어져 이후의 인식과관념에 지배적인 영향력을행사한다.”(기호학/전동열,2012)

FualBandSE

MobileWeb

Statistical Information based open

data

Coaching/SNS

Nike+ Kinect Training

Web App

PC(iTunes)

SportwatchGPS

Chip+Shoes Web

Mobile App

Things Media Information Triggers

Syntagm/Synchrony

(공시성/현재)

Paradigm/Diachrony(통시성)

[Nike의 Culture Ecosystem 분석]

선택할 수 있는 모든 가능성

랑그(자연/ 습관)가 된다.

컬쳐코드를만든다.

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

사람 중심의 자동차 구현을 위한 ui/ux 방향성 고찰

Design