ux/ui의 전략적 접근: 스마트 헬스케어 사례 고찰

55
2014.11 성균관대학교 일반대학원 휴먼ICT융합학과 교수 (산학협력중점)/ HEDcentric UX미래융합전략연구소 연구소장 최병호/ [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

Upload: billy-choi

Post on 03-Jul-2015

1.117 views

Category:

Design


12 download

DESCRIPTION

UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰 - 5가지 사례에서 길어 올린 스마트 헬스케어 UX/UI의 전략적 통찰 :Sproutel’s Jerry the Bear & A.C. Camargo Cancer Center’s Justice League :Zeo Sleep Manager Pro :Janssen’s Care4Today App and SMS :AliveCor :Fitness Shirt - UX/UI, 우리에게 시사하는 것

TRANSCRIPT

Page 1: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

2014.11

성균관대학교 일반대학원 휴먼ICT융합학과 교수 (산학협력중점)/ HEDcentric UX미래융합전략연구소 연구소장

최병호/ [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

Page 2: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/HEDCENTRIC UX미래융합전략연구소 소장 최병호 All rights reserved.

스마트 헬스케어 UX/UI의 전략적 접근

Table of Contents

• 5가지 사례에서 길어 올린 스마트 헬스케어 UX/UI의 전략적 통찰

1. Sproutel’s Jerry the Bear & A.C. Camargo Cancer Center’s Justice League

2. Zeo Sleep Manager Pro

3. Janssen’s Care4Today App and SMS

4. AliveCor

5. Fitness Shirt

• UX/UI, 우리에게 시사하는 것

1

Page 3: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰
Page 4: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰
Page 5: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

① 디바이스를 개발하여 착용시킨다.② 디바이스로 측정하여 데이터를 전송한다.③ (빅)데이터를 분석하여 멋있게

인포그래픽 처리한다.④ 스마트폰 앱으로 정보를 제공한다.

Page 6: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

① 디바이스를 개발하여 착용시킨다.② 디바이스로 측정하여 데이터를 전송한다.③ (빅)데이터를 분석하여 멋있게

인포그래픽 처리한다.④ 스마트폰 앱으로 정보를 제공한다.

Page 7: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

http://youtu.be/FFwCigfzaak

Page 8: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/HEDCENTRIC UX미래융합전략연구소 소장 최병호 All rights reserved.

스마트 헬스케어 UX/UI의 전략적 접근

Sproutel’s Jerry the Bear

http://youtu.be/FFwCigfzaak

Jerry is an interactive teaching toy for children with type 1 diabetes.

He shows them how to manage blood glucose levels, recognize their symptoms, and maintain a healthy diet - all through play. Using games, positive reinforcement, and real world scenarios, Jerry allows children to learn the skills necessary to take care of themselves for the rest of their lives.

http://slidesha.re/1uBY9gv

Page 9: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰
Page 10: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

① 어둠을 알려준다.② 어둠을 지배하는 방법을 알려준다.③ 어둠과 공존하는 방법을 알려준다.

Page 11: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

① 심리적인 두려움을 스스로 케어하는 방법을 제시한다.② ‘또래의 동병상련’을 공유하여 ‘외로운 싸움’이 아님을

공유한다.③ 24시간 동안 또 하나의 신체로서 체화될 수 있는

거대한 환경, 기호를 선물한다. (예) 인형④ 목표 가속화 효과를 활용하여 행동의 변화를 유도한다.

Page 12: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰
Page 13: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/HEDCENTRIC UX미래융합전략연구소 소장 최병호 All rights reserved.

스마트 헬스케어 UX/UI의 전략적 접근

A.C. Camargo Cancer Center’s Justice League

http://youtu.be/KC2y3s-MCMs

They transformed the children’s ward into a superhero paradise, complete with a “Hall of Justice” game room and superhero-themed decorations.

The intravenous chemotherapy bags became magic power against cancer when they were concealed in colorful superhero cases and rebranded as “Superformula.”

http://slidesha.re/1uBY9gv

Page 14: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰
Page 15: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰
Page 16: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

① 수면패턴을 정확하게 측정할 수 있는 형태의디바이스를 개발하여 착용시킨다.

② 디바이스로 측정하여 데이터를 전송한다.③ (빅)데이터를 분석하여 멋있게 인포그래픽

처리한다.④ 스마트폰 앱으로 정보를 제공한다.

Page 17: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

① 수면패턴을 정확하게 측정할 수 있는 형태의디바이스를 개발하여 착용시킨다.

② 디바이스로 측정하여 데이터를 전송한다.③ (빅)데이터를 분석하여 멋있게 인포그래픽

처리한다.④ 스마트폰 앱으로 정보를 제공한다.

Page 18: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

http://bit.ly/11uJkFx

Page 19: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

http://youtu.be/j3Y7PGhHR20

Page 20: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰
Page 21: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

http://bit.ly/1pnoH9v

Page 22: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

각성

성과

여크-도슨 법칙은 난이도가 높은 과업은 최적의 성과를 위해 적은 각성을필요로 하며, 각성 수준이 너무 높으면 붕괴되기 시작한다. 비교적 단순한

과업은 상대적으로 많은 각성이 필요하고, 빠르게 감소하지 않는다.

Susan M. Weinschenk, 2011

Page 23: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰
Page 24: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

① ‘Here and Now’를 알려준다.② 스트레스와의 공존 가치를 알려준다.③ 널 미치게 하는 것을 발견하게 한다.

Page 25: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

① 수면장애의 심리적인 이슈를 스스로 케어하는 방법을제시한다.

② 숙면 가능한 환경으로의 전환을 지원한다.③ 인위적이고, 숙면을 방해하는 유형의 착용을 지양한다.

(예) 존재감 없는 스마트 밴드

Page 26: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰
Page 27: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰
Page 28: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰
Page 29: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰
Page 30: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

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

Susan M. Weinschenk, 2011

Page 31: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

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

Susan M. Weinschenk, 2011

Page 32: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/HEDCENTRIC UX미래융합전략연구소 소장 최병호 All rights reserved.

스마트 헬스케어 UX/UI의 전략적 접근

정보를 인식하는 것이 기존의 기억을 회상하는 것보다 훨씬 쉽다

• 사용자에게 정보를 회상(recall)하게 하는 것은 지양한다. 기억의 저편에서 정보를끌어오는 것(recall)보다 재인(recognize)시켜 주는 편이 사용자에게 훨씬 쉽다.

• 재인(recognition)은 맥락(context)을 이용한다. 맥락은 우리의 기억을 돕는다.

31

Page 33: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/HEDCENTRIC UX미래융합전략연구소 소장 최병호 All rights reserved.

스마트 헬스케어 UX/UI의 전략적 접근

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

Page 34: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/HEDCENTRIC UX미래융합전략연구소 소장 최병호 All rights reserved.

스마트 헬스케어 UX/UI의 전략적 접근

Zero Effort UX/UI Strategic Framework

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

33

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

by Billy Choi(@ILOVEHCI)

Page 35: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

① ZEC(Zero Effort & Connected) UX/UI 전략을 구사해야한다. (예) 병원에서 알람 규칙 자동 제공, 약 열람 현황식별 가능한 smart drug box 서비스, Deep learning 기술이적용된 손자의 먹거리 챙기기 서비스

② 패밀리와 유관 에코시스템의 협력 서비스를 도입해야 한다.③ Gamification을 적용해야 한다. (예) 약속 어길 시 기부④ 실버의 신체적/심리적 제약 조건에 부합하는 UI 디자인

Page 36: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰
Page 37: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/HEDCENTRIC UX미래융합전략연구소 소장 최병호 All rights reserved.

스마트 헬스케어 UX/UI의 전략적 접근

AliveCor (심전도 모니터링)

• 캘리포니아주의 얼라이코사는 전극이 장착된 아이폰용 케이스를 통해 심전도를 측정할수 있는 앱 개발함

• 앱을 작동시킨 후에 손으로 아이폰용 케이스를 가슴에 대면 심전도를 측정하고, 그래프와 수치를 확인할 수 있으며, 정보를 의사에게 전송할 수 있음

• 자체 내장 배터리 전원으로 측정하며, 데이터는 무선으로 스마트폰에 전송함. FDA(식품의약국) 승인 받아 미국에서 199달러 판매 중임

36

See how it works - AliveECG by AliveCor http://youtu.be/0pE_InOy1mk생체인식 기술, 시장동향과 참여업체 사업전략, 편집부, 임팩트, 2014년 10월 10일

Page 38: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/HEDCENTRIC UX미래융합전략연구소 소장 최병호 All rights reserved.

스마트 헬스케어 UX/UI의 전략적 접근

Fitness Shirt (심박/호흡능력/혈중산소포화도)

• 독일 프라운호퍼 집적회로연구소에 의해 설계된 실험 셔츠로, 건강과 체력을모니터링하고 스마트폰과 무선으로 교신하는 스포츠 셔츠 개발함

• 직물 전극(천의 도전 부분)은 가슴 둘레의 탄성 밴드로 호흡을 측정하고, 심근에서나오는 전기 신호를 픽업함. 심박, 호흡능력, 혈중산소포화도, 자세와 이동 등 각종의학적 및 신체적 지표들을 추척함. 전자 유닛은 셔츠에 끼우고 모니터링을 하고, 세탁시 쉽게 분리함. 유닛은 배터리를 내장하고 있으며, 데이터를 저장하고 무선으로 전송함. 셔츠는 원래 ECG 녹음을 모니터링하는 스포츠 셔츠로 설계됨

37

생체인식 기술, 시장동향과 참여업체 사업전략, 편집부, 임팩트, 2014년 10월 10일

Page 39: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰
Page 40: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

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

Page 41: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

(이미지 출처: UX South Africa 2014 - Keynote/ http://slidesha.re/1tr7rSk )

가슴 뛰는 가치를 정의하는 것이 vision이죠.

그 비전을 남들이 아무리 노력해도 베낄 수 없도록대체와 모방이 불가능한 독보적인 방법을 규정하는 것이 strategy이죠.

고객이 기대하는 그러나 그 이상의 놀라움을 포장하여 제공할 수 있는 선물을 고르는 것이proposition이죠.

그 선물을 누구라도 이해할 수 있는 스토리텔링이라는 옷을 입히고 끄덕끄덕 거리는 것이 concept이죠.

고객에게 가장 실체화될 수 있는 concept을 직접적으로 보여주는 것이 information이죠.

그 information을 고객의 멘탈모델과 태스크모델에부합되도록 조직화하고 구조화하는 것이 structure이죠.

고객의 목적을 달성할 수 있도록 눈에 보이지 않는usage process을 설계하는 것이 interaction이죠.

보자마자 숨이 멈출 것 같은 총체적인 감성을 제공하는 것이 appearance이죠.

이 모든 것이 동작되도록 기술력을 투영하는 것이front-end이죠.

지금까지 순차적으로 언급했던 핵심 단어는 상위가치로부터 상세 가치까지 이어지는 일련의 흐름을 가지고 있다는 것을 잊지 않으면 위대한 작품을만드는데 기여할 것이죠.^^

Page 42: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

41

Page 43: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

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

Page 44: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

(이미지 출처: http://slidesha.re/1qosi1H )

Martin Granstrom의 UX전략 프레임워크

Page 45: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

(이미지 출처: http://slidesha.re/1qosi1H )

Martin Granstrom의 UX전략 프레임워크

Page 46: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

(이미지 출처: http://slidesha.re/1qosi1H )

Martin Granstrom의 UX전략 프레임워크

Page 47: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

(이미지 출처: http://slidesha.re/1qosi1H )

Martin Granstrom의 UX전략 프레임워크

Page 48: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

(이미지 출처: http://slidesha.re/1qosi1H )

Martin Granstrom의 UX전략 프레임워크

Page 49: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

(이미지 출처: http://slidesha.re/1qosi1H )

Martin Granstrom의 UX전략 프레임워크

Page 50: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

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

Page 51: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰
Page 52: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰
Page 53: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/HEDCENTRIC UX미래융합전략연구소 소장 최병호 All rights reserved.

스마트 헬스케어 UX/UI의 전략적 접근

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상품 내비게이터, 상품 정보 열람, 카트 정보, 쇼핑목록 관리, 즉시결제

52

http://youtu.be/xnIoGzur0h4

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

by Billy Choi(@ILOVEHCI)

Page 54: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

© 2014 성균관대학교 일반대학원 휴먼ICT융합학과 교수/HEDCENTRIC UX미래융합전략연구소 소장 최병호 All rights reserved.

스마트 헬스케어 UX/UI의 전략적 접근

BJ Fogg's Behavior Model(FBM)

53

Page 55: UX/UI의 전략적 접근: 스마트 헬스케어 사례 고찰

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