사용자 관점의 sw개발-ux적용확산: 7가지 방법 제언

SW중심사회 실현을 위한 SW/IoT 산업 전망

사용자 관점의SW개발-

UX적용확산: 7가지 방법 제언

2015

성균관대학교 일반대학원 휴먼ICT융합학과 교수/홍익대학교 영상대학원 HCI개론 강의/

HEDcentric UX미래융합전략연구소 연구소장Billy(최병호)/ [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.

사용자 관점의 SW개발-UX 적용 확산: 7가지 방법 제언

Table of Contents

1. 사람의 특징을 근거로 SW를 디자인한다.

2. 사용자를 관찰하여 SW를 디자인한다.

3. 사용자의 행동 패턴을 중심으로 SW를 디자인한다.

4. UI 원리를 응용한 차별화된 UX 전략 모델로 SW를 디자인한다.

5. ZEC(Zero-Effort & Connected) 트렌드를 적용하여 SW를 디자인한다.

6. Cultural-Ecosystem driven UX(New Habit & New Motivation centric UX)

방법론으로 SW를 디자인한다.

7. ‘인류학적 상수’ 가치를 투영하여 SW를 디자인한다.

1

사람의 특징을근거로 SW를디자인한다.

Images source: http://bit.ly/1IQspyE

Agenda: 스마트 글라스에서제공해야 할 정보의 최적 위치는어디인가?

3

4

Source: A Study on the Media Space using the Inattentional Blindness spatial information processing(비주의적(非注意的) 시각정보 처리를 고려한 미디어 공간 연구), 2014

5

Source: Wearable Glass UX Design Guide Based on Human FOV(Field of View) Principle(인간 시각장(Field of View)을 고려한 웨어러블 글래스의 UX 디자인 가이드), 2015

문자, 형태, 색채 인식범위는 서로 다른데 문자 식별 한계 시야각은 좌/우 10 ~ 20°, 색채 식별은 30 ~ 60°, 부호 식별은 5 ~ 30°로 문자 식별 시야각에 비해 크다Souce: J. Panero, M. Zelinik Human Dimension and Interior Space: A Source Book of Design Reference Standards, Watson-Guptill, 1979, p.4.

Useful Field Of View

6

Image source: Wearable Glass UX Design Guide Based on Human FOV(Field of View) Principle(인간 시각장(Field of View)을 고려한 웨어러블 글래스의 UX 디자인 가이드), 2015

7

Source: Wearable Glass UX Design Guide Based on Human FOV(Field of View) Principle(인간 시각장(Field of View)을 고려한 웨어러블 글래스의 UX 디자인 가이드), 2015



객관식 문제: HMI

8

• 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)

Agenda: 스마트 글라스에서제공해야 할 정보의 최적 위치는어디인가?

1. UFOV 권고2. 배경 정보와 콘텐츠 중첩 지양;

분산 주의집중 (Divided Attention) 고려

3. Single glance time: Max 2S, Total visual task time: Max 15S

9

사용자를관찰하여 SW를디자인한다.

Agenda: 24개월의 남성성이 강한남자 아이를 위한 디자인은 어떻게해야 하는가?

11

19

1. 아이의 눈높이를 맞추지 못했다?

2. 열쇠 달린 줄이 너무 짧다?

3. 열쇠가 없어도 열 수 있다?

4. 차 간 장벽이 없어서 자동차를꺼내기 힘들다?

20

Agenda: 24개월의 남성성이 강한 남자 아이를 위한 디자인은어떻게 해야 하는가?

1. 열쇠와 바퀴를 결합한 도전을 하되, bit와 atom 동시에적용할 내러티브도 디자인을 해야 한다.

2. Eye contact 가능한 다양한 시나리오를 지원하라.3. 열쇠 달린 줄의 길이는 불편함이 없는 정도이어야 한다.4. 열쇠가 없으면 열 수 없도록 조치해야 할 뿐만 아니라,

3개를 초과하는 다양한 열쇠를 제공하고, 각 차고 문마다열쇠가 다르도록 ‘불편함’을 디자인해라.

5. 차 간 장벽을 제공하고, 차고와 자동차의 칼라 매핑을요구하는 ‘불편함’을 디자인해라.

6. 불편함을 디자인할 때 목표 가속화 효과(goal-gradient effect)을 고려한다.

Agenda: 24개월의 남성성이 강한 남자 아이를 위한 디자인은어떻게 해야 하는가?

1. 열쇠와 바퀴를 결합한 도전을 하되, bit와 atom 동시에적용할 내러티브도 디자인을 해야 한다.

2. Eye contact 가능한 다양한 시나리오를 지원하라.3. 열쇠 달린 줄의 길이는 불편함이 없는 정도이어야 한다.4. 열쇠가 없으면 열 수 없도록 조치해야 할 뿐만 아니라,

3개를 초과하는 다양한 열쇠를 제공하고, 각 차고 문마다열쇠가 다르도록 ‘불편함’을 디자인해라.

5. 차 간 장벽을 제공하고, 차고와 자동차의 칼라 매핑을요구하는 ‘불편함’을 디자인해라.

6. 불편함을 디자인할 때 목표 가속화 효과(goal-gradient effect)을 고려한다.

사용자의행동패턴을중심으로 SW를디자인한다.

Agenda: 수면패턴 및 활동량 측정이아닌 스마트폰의 사용패턴으로우울증을 진단하고 케어할 수 있을까?

22

Source: http://www.jmir.org/2015/7/e175/

23

• Entropy: The variability of the time the participant spent at the location clusters; −∑ipilog pi• Normalized Entropy: By dividing the entropy by its maximum value, which is the logarithm of the total number of clusters;

Entropy ∕ log N• Location Variance: The variability in a participant’s GPS location; log(σlat

2+ σlong2)

• Home Stay: The percentage of time a participant spent at home relative to other location clusters• Transition Time: The percentage of time during which a participant was in a non-stationary state• Total Distance: the total distance in kilometers taken by a participant• Circadian Movement: To capture the temporal information of the location data. This feature measured to what extent the

participants’ sequence of locations followed a 24-hour, or circadian, rhythm.• Number of Clusters: The number of location clusters found by the K-means algorithm in the preprocessing stage• (Phone) Usage Duration: The total time in seconds that a participant spent each day interacting with their phone• (Phone) Usage Frequency: How many times during a day a participant interacted with their phoneSource: Mobile Phone Sensor Correlates of Depressive Symptom Severity in Daily-Life Behavior: An Exploratory Study, http://www.jmir.org/2015/7/e175/

24

Source: https://ginger.io/the-science/

25

Source: The Practice vs Science of Medicine: Ginger.io - Anmol Madan, CEO of Ginger.io, https://youtu.be/bkgA6wVw69s

26


27


28

Health start-up Ginger.io, for example, targets extremely sensitive behavioral health problems such as depression with its mobile app solution.

For a patient diagnosed with depression, the app would track data such as how much users are moving and who they’re calling, emailing, and texting (and how often). Source: Julie Bernstein (vice president, Ginger.io) interview with the authors, September 22, 2014.

29

BEHAVIORAL INTERVENTION PLATFORMS

There exist innovative behavioral intervention platforms such as UBhave (ubhave.org), ginger.io [1-3], LifeGuide(lifeguideonline.org), or Minddistrict (minddistrict.com).

These platforms can not only be used for behavioral interventions in general but also for fully automated health interventions in particular. However, there are several shortcomings that must be noted and which, in turn, represent design requirements for the MobileCoach platform.

[1] A. Madan, K. Farrahi, G.-P. D., and A. Pentland, "Pervasive Sensing to Model Political Opinions in Face-to-Face Networks," presented at the 9th International Conference on Pervasive Computing, San Francisco, CA, 2011. [2] A. Madan, S. Moturu, D. Lazer, and A. Pentland, "Social Sensing: Obesity, Unhealthy Eating and Exercise in Face-to-face Networks," presented at the Wireless Health 2010, San Diego, CA, 2010. [3] S. Moturu, I. Khayal, N. Aharony, W. Pan, and A. Pentland, "Sleep, Mood and Sociability in a Healthy Population," presented at the 33rd Annual International Conference of the IEEE Engineering in Medicine and Biology Society (EMBC ’11), Boston, MA, 2011.

Source: MobileCoach: A Novel Open Source Platform for the Design of Evidence-based, Scalable and Low-Cost Behavioral Health Interventions Overview and Preliminary Evaluation in the Public Health Context

UI 원리를 응용한차별화된 UX 전략모델로 SW를디자인한다.

31Source: <Criteo State of Mobile Commerce Q1 2015>

32

I0

INavigation

0Findability

IAdd to Cart

0Personalization

IPurchase

0QOL*

* QOL: Quality of Life

33

I0

INavigation

0Findability

IAdd to Cart

0Personalization

IPurchase

0QOL*


34

Source: http://browsy.com/

• 제품 탐색과 쇼핑 카트에 담는 행위 분리: Input의 부분적 소멸= 제품 탐색의즐거움 강화 효과 유발, 쇼핑 시간 단축착각 유도

• 거대한 쇼핑 카트 전문 채널로서 강화된개인화 접근

35

Source: http://amzn.to/1dIPgS6

• 타 채널의 제품 탐색과 자신의채널의 쇼핑 카트에 담는 행위 통합: 자신의 채널에서 Input의 부분적소멸= 타 채널의 목적대로 활용도중에 제품 탐색의 즐거움 강화효과 유발, 쇼핑 시간 단축 착각유도

• 단, 해시태크는 CLI의 단점 보유로, Like와 같은 고유의 버튼 지원 필요

36

I0

INavigation

0Findability

IAdd to Cart

0Personalization

IPurchase

0QOL*


37

I0

INavigation

0Findability

IAdd to Cart

0Personalization

IPurchase

0QOL*


38

Source: https://pixbi.com/

• 다다익’선’이 아닌 ‘제약’ 전략추구: 한정된 정보량은인지부하 축소 유발

• 즉각적인 정보 확인 및 결재유도

39

• 선택 과정 생략

Source: http://apple.co/1K6b0Dy

40

• 스캔 대상 확대: 새로운 기회, WYSIWYG의 확장

Source: http://slyce.it/

41

• 다다익’선’이 아닌 ‘제약’ 전략추구: 한정된 정보량은 인지부하축소 유발

• 즉각적인 정보 확인 및 결재 유도

• 선택 과정 생략• 스캔 대상 확대: 새로운 기회

• 가정용 아마존 대시, 아마존 대시버튼 응용: IoT 제품인 휴대용스마트 카드 적용 검토 => Input의 부분적 소멸, 제품 간통합 시스템 접근 필요

Source: http://hiku.us/how-it-works

42

I0

INavigation

0Findability

IAdd to Cart

0Personalization

IPurchase

0QOL*


43

I0

INavigation

0Findability

IAdd to Cart

0Personalization

IPurchase

0QOL*


P

S1

S2

S3

P

44

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

• 로컬 마켓과 연계 판매

ZEC(Zero-Effort & Connected) 트렌드를적용하여 SW를디자인한다.



Zero Effort UX/UI Strategic Framework

46

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

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

by Billy Choi(@ILOVEHCI)

Cultural-Ecosystem driven UX(New Habit & New Motivation centric UX) 방법론으로 SW를디자인한다.

자기효능감(self-efficacy)

Culture-Ecosystem

Interaction

Desires

자기효능감(self-efficacy)친구(Social)

오픈(Open-eco)

Profitably



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 구축

55

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(통시성)

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

by Billy Choi(@ILOVEHCI)

[Nike의 Culture Ecosystem 분석]

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

선택할 수 있는 모든 가능성

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

컬쳐코드를만든다.

‘인류학적 상수’가치를 투영하여SW를 디자인한다.

58

Source: http://bit.ly/1D7TaPx

“탑승 직후부터 택시 기사가 사이드브레이크 옆에 놓인 휴대전화를 힐끔힐끔쳐다봐 불안했던 김씨는 '쿵' 소리와 함께 '올 게 왔구나'란 생각이 들었다”

"사고까지 났는데도 기사가 게임 중독자처럼 휴대폰 화면을 곁눈질하더라“

"'카카오택시'라는 알림 소리가 3~5분에 한 번씩 울렸는데 그때마다 핸들이오락가락해서 사선(死線)을 넘나드는 것 같았다“

"운전에 집중해달라"고 화를 냈고 기사는 "카카오택시 알림 때문에 그랬다"며사과했다.

기사들은 주행 중엔 앱 기능 중 '운행 중' 모드를 선택해 콜을 받지 말아야하는데 일부 기사가 손님이 내리기도 전에 또 다른 콜을 받기 위해 이 기능을사용하지 않기 때문이다.

휴대전화를 사이드브레이크 주변에 놓거나 바지 주머니에 넣었다 꺼내는기사도 있었고, 아예 한 손엔 휴대전화를 들고 한 손으로만 운전하는 기사도있었다. 휴대전화 거치대를 눈높이에 설치한 사람은 10명뿐이었다. "승객이내리기 10분 전부터 장거리 콜을 빨리 받아야”Source:: http://bit.ly/1D7UqCp

65

Bit Identity(& Atom)‘인류학적 상수’ 전략 ‘알튀세르의 호명이론’ 전략

Tree Planet의 ‘인류학적 상수’ 전략은실제로 나무심기임

Source: http://bit.ly/1J0K4a9

애플의 ‘호명’ 전략은 직원을 ‘천재’라고호명하는 것임

고객의 표층구조가 아닌 심층구조(deep structure)에 내포된 ‘인류학적상수’(노암촘스키)을 담을 수 있는 그릇을추구하는 위대함과 진정성의 아이덴티티 전략채택 필요

‘호명’은 세계를 지각변동시키는 힘이있음을 직시하고, ‘고객’을 ‘무엇’이라고 부를것인가를 정의하여 행동 유도 필요

66

Images source: 드라마 <밤을 걷는 선비>

“성열아! 난 말이다. 사람이 희망인세상을 만들어보고 싶구나. 함께 하지않으련.

9살이 되던 해에,전하께서 제게 하신 말씀입니다.

학식도, 재물도, 명예도 아닌사람이 희망인 세상을 만들겠다는 그말씀이 제 머리 속을 떠나지않았습니다.

그 저 서책을 읽으며 학식을 쌓는것이 좋았던 제게 더 많이, 더 넓게세상을 알아야 할 이유를 찾게 된순간이었습니다.”

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