ux/ui의 이해와 전략적 접근

2014.12

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

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

UX/UI의 이해와 전략적 접근

Table of Contents

• 3가지 사례에서 길어 올린 UX/UI의 이해와 전략적 통찰

1. Janssen’s Care4Today App and SMS

2. Zeo Sleep Manager Pro

3. AliveCor

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

1

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

Susan M. Weinschenk, 2011

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




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

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

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

8



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



Zero Effort UX/UI Strategic Framework

10

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)



ZEC UI Strategic Framework

11

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

http://youtu.be/xnIoGzur0h4

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




BJ Fogg's Behavior Model(FBM)

12

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

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

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

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

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

http://bit.ly/11uJkFx

http://youtu.be/j3Y7PGhHR20

http://bit.ly/1pnoH9v

각성

성과

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

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


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

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

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

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



AliveCor (심전도 모니터링)

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

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

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

27

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



Zero Effort UI/UX Strategic Framework

Zero Effort UI/UX Strategy Load

C+V+M=0

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

부하

29

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


(출처: 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 )



The Overview of ZEC(Zero Effort & Connected) UI/UX Strategy 1.0a

43

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




44

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)




45

UI/UXMethod

I

UI/UXMethod

II

UI/UXMethod

III

UI/UXMethod

IV

UI/UXGuideline

I

UI/UXGuideline

II

UI/UXGuideline

III

UI/UXGuideline

IV

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