스마트감성경험시대, UX서울여자대학교 산업디자인학과 UX Design Lab 박남춘 스마트감성경험시대, UX-Context 중심의UX디자인과감성UX 트렌드-

서울여자대학교산업디자인학과UX Design Lab

박 남 춘

스마트 감성경험시대, UX- Context 중심의 UX디자인과 감성UX 트렌드 -

2013 IT산업전망 컨퍼런스

1. Context 중심의 UX디자인

Emotional Experience : Three Levels of Brain

스마트 감성경험

Sensory Motor

Eye

Ear

Mouth

Arms

Legs

Reflective

Behavioral

Visceral

Control

Control

Visceral level : 어떤 상태에 본능적으로 반응 – 생물학적 특성Behavioral level : 상태를 분석, 뇌활동의 관조적인 부분Reflective level : 경험을 반영할 수 있는 지각 있는 생각

“Donald A. Norman은 인간의 뇌활동에는 다음의 세가지 수준이 있다고 보았다. : Visceral(본능적인), Behavioral(행동의), Reflective(반영하는,사려 깊은)



Visceral

Behavioral

Reflective

의식하거나 생각하기 이전의 제품에 대한 초기 반응appearance, feel, touch

제품의 사용과 경험에 관한function, performance, usability

Interpretation, understanding, reasoning Interaction between self-identity and product About the feelings of satisfactionproduced by owning, displaying, using a product

Visceral은 외관(Appearance)을, Behavioral은 기능(function)을, Reflective는상징(symbol)을 다룬다.



Process of Human Interaction with product

1 Image

2 Behavior

3 Belief

“인간과 제품간의 Interaction Process는 Image의 인식으로부터 시작해Behavoir, Belief의 단계로 이루어진다.”


Wow, that’s cool! I like it.

Aesthetic, Instinctual, Value, Subjective

“사용자는 처음 제품을 접할 때 주관적이고 직관적으로 판단을 한다. 이러한첫인상은 사용자에게 있어 제품에 대한 관심을 자극하게 된다. ”



Oh, easy to use, remember and

learn!


Cognitive, Logical, Behavioral, habitual

“두 번째 단계로 사용자는 인지적 이해와 물리적 작동을 통해 제품을 사용함으로써 이성적으로 제품을 경험하게 된다. ”




Cognitive, Logical, Behavioral, habitual

BeliefSymbolic, Sub-conscious, Brand, Loyalty, Story, Context

Ah, that is my type of

thing!

“마지막으로 반복적인 제품의 사용을 통해 사용자는 제품에 대한 자신만의경험과 믿음을 가지게 된다. ”



프로포즈를 하기 좋은 장소는?

Context의 중요성

Case A Case B

방법이 같으면 결과도 같을까?


Context

?

맥락, 정황, 전후 관계, 배경, 환경

What is Context?


컨텍스트는 지속적으로 변화한다.

What is Context?


VS1995년280만장

2012년38만장

컨텍스트는 거시적인 환경과 미시적인 상황을 포함한다.

미디어는 컨텍스트를 변화시킬 수 있다.

What is Context?


“Context에 대한 이해가 ‘공감’을 불러 일으킨다”

What is Context?


“Context가 대박과 쪽박을 결정한다”

“사용 장소, 주변 사람과 물체의 집합에 따라 적응적이며, 동시에 시간이 경과되면서 발생하는 대상의 변화로 사용자가 어디에 있고, 누구와함께 있으며, 근처에 어떤 사물이 있는가에 대한 부분”

by Schilit & Theimer(1994)

What is Context?


“사용자의 감정상태, 관심의 초점, 장소와 위치 및 방위, 날짜와 시간, 사물, 사용자의 주위환경과 사람들”

by Anind K, Dey(1998)

“사용자가 제품을 사용하는 데 있어 사용자를 그들의 목표, 태스크, 하드웨어와 소프트웨어를 포함한 인프라, 그리고 물리적/사회적 환경과결합하도록 하는 것”

by ISO 9421-11

Product

What is Context?


User-Product

What is Context?


User-Product in Context

What is Context?


What is Context?


User-Service in Context

왜 컨텍스트에 관심을 가져야 하는가?

What is Context?


디자이너에게 있어 컨텍스트는 모든 주변 상황 중 선별된일부이며, 디자인 컨셉의 배경으로 사용된다.

- 제품(Product), 서비스(Service), 사용자(User), 환경(Environment)의 조화

- 창의적인 사용자 경험을 만들기 위한 출발점

- 변화하는 컨텍스트에 대한 대응의 중요성

- 특정한 환경에 있는 타인을 이해

- 복잡한 환경 속에서 사용되는 제품과 서비스를 디자인하기 위해…

Context Factors

Past / Present FuturePR

OD

UCT

CO

NTEX

TIN

TERACTIO

N

Desig

ning

STATEMENT: Goal of Designing

P U METAPHOR: Cognition, Use, Experience of Product

P CHARACTERISTICS: Form & Function

Res

earc

h &

Ana

lysis

P

P U

Selecting factors, Positioning oneself

Context in Research & Design for Product


SERVIC

ECO

NTEX

TIN

TERACTIO

NPast / Present Future

Context Factors

STATEMENT: Goal of Designing

Res

earc

h &

Ana

lysis

Desig

ning

S U METAPHOR: Cognition, Use, Experience of Service

S CHARACTERISTICS: Form & Function &

Process

S

S U

Selecting factors, Positioning oneself

Context in Research & Design for Service


2. 미래 감성UX 트렌드

Command Line Interface

Command Line Interface

Graphic UserInterface

Graphic UserInterface

Natural UserInterface

Natural UserInterface

First PersonInterface

First PersonInterface

MetaphorExploratory

DirectIntuitive

NearbyImmediate

CodifiedStrict

History of Interface

미래 감성UX 트렌드

Luke wroblewski, First Person User Interface, 2011: http://www.lukew.com/presos/preso.asp?21

Usage Curve (Luke wroblewski)


LG CNS 김태우, Natural User Interface, 2013: http://www.lukew.com/presos/preso.asp?21

마우스나 키보드와 같은 별도의 인공적인 제어 장치 없이 사람의 자연스런 감각/행동/인지

능력을 통해 직접 교감하는 방식으로 디지털 기기를 제어하는 인터페이스 기술

NUI

Gesture InterfaceGesture Interface

Multi-Touch

Interface

Multi-Touch

Interface

Voice Interface

Voice Interface

SensoryInterfaceSensoryInterface

Definition of Natural User Interface


1. Navigate the space around you 주위의 공간을 네비게이팅

2. Augment your immediate surroundings 즉시 당신의 주변을 증강현실로

3. Interact with nearby objects, locations, or people 근처의 사람과 사물과의 인터랙션

Luke wroblewski, First Person User Interface, 2011: http://www.lukew.com/presos/preso.asp?21

1인칭 시점으로 현재 경험하고 있는 것을 즉각적으로 실제 세계와 디지털 간의 상호작용을 일으키는 인터페이스 기술

Definition of First Person Interface


1) Natural User Interface

G-SpeakOblong Industries

http://www.oblong.com/g-speak/

모션인식이 가능한 장갑을 끼고 손가락 동작을 활용하여 자신이 원하는 동작을 명령하는 입력장치(by John Underkoffler)

http://www.ted.com/talks/john_underkoffler_drive_3d_data_with_a_gesture.htmlVideo :

NUI : Gesture Interface

Holo DeskMicrosoft

가상의 3D 오브젝트를 손으로 다룰 수 있게 하는 기술

웹캠을 통한 좌표계 정보획득과 MS의 게임 콘솔인 Xbox 360의 동작인식시스템 Kinect, 그리고 증강현실기술을 융합하여 3D 오브젝트와 사용자

간의 상호작용을 가능케 한다.

http://research.microsoft.com/en-us/projects/holodesk/

http://www.youtube.com/watch?v=JHL5tJ9ja_wVideo :


Space TopMIT, 이진하

동작인식을 이용한 양방향 가상 기술.

키넥트에 사용되었던 동작인식 기술을 사용하여 사용자의 손가락과 손동작을 인식해 3차원 오브젝트를 손으로 컨트롤 할 수 있다.

http://leejinha.com/SpaceTop

http://vimeo.com/59231624Video :


AquaTop Display 도쿄대 전기통신학과연구팀

물을 이용한 터치 스크린

https://googledrive.com/host/0B_E3lRLf4DoZdm84VVozV09Qc/

http://www.youtube.com/watch?v=fYJneaa2O8IVideo :


Leap MotionLeap Motion

https://www.leapmotion.com/

컨트롤러를 USB에 꽂아 앞에 올려놓은 후 손짓을 하거나 펜, 손가락을 움직이면 그 움직임을 감지해 PC에 입력해주는 신개념 컨트롤러

https://www.youtube.com/watch?feature=player_embedded&v=3b4w749Tud8Video :


Iron ManMarvel


Surface_TableMicrosoft

여러 사람이 동시에 50개 이상의 접촉에 반응하여, Table 형태의 Screen을 사용할 수 있다.

NUI : Multi Touch Interface

Surface_Tablet PCMicrosoft

http://www.microsoft.com/surface/ko-kr


Samsung's Smart WindowSamsung

http://www.youtube.com/watch?v=m5rlTrdF5Cs

http://www.youtube.com/watch?v=ps1hM9UeY5MVideo :


Pocket TouchMicrosoft & CMU

사용자가 옷이나 기타 물질을 통해서도 터치 기기를 조작하는 기술

포켓터치 기술은 터치 기기의 후면에 장착되는 정전용량(capacitive sensor) 센서를 사용한다. 마이크로소프트는 이 센서를 통해 사용자가 주머

니 속의 휴대폰을 케이스에서 꺼낼 필요도 없이 조작할 수 있음

http://research.microsoft.com/apps/video/default.aspx?id=155018&l=i

http://www.youtube.com/watch?v=fHSDpE0kTag&feature=player_embeddedVideo :


Siri

NUI : Voice Interface

Apple

탁월한 음성인식 능력으로 검색, 상거래 지원기능을 갖추고 있는 iPhone 4S ios5 전용 음성인식 프로그램이다. 인공지능 기능 – 단순히 사용자의

말을 텍스트로 바꾸지 않고 실생활에서 유용하게 사용할 수 있도록 의미를 이해해서 바꿔주는 기능이 있다.

http://www.apple.com/kr/ipad-mini/features/?cid=wwa-kr-kwg-features-com

사용자가 “What can I do?”라고물어보면 Siri 가 음성 검색의 리스트와 말하는 방법 알려준다.

음성으로 받은 메시지를 듣고,바로 답문 보내기

음성으로 스케줄 설정과친구 초대하기

음성으로 리마인드 맞추기

SiriApple


BMW App

ConnectedDrive 시스템에서 아이폰 캘린더 어플리케이션과의 통합

으로 운전자의 일정을 BMW센터 화면에서 볼 수 있음

예정된 약속 표시이외에 세부 사항을 읽어주는(text to speech) 기능

Ford My Touch

Bluetooth Message Access Profile(MAP)기능 (메시지를 자동으로 읽

어주는 기능)을 제공하고, 음성인식기능으로 사용자와 모바일과 연동되

어 텍스트 메세지를 음성으로 읽어주는 기능, SMS, MMS, E-mail등을

읽어주는 기능을 제공한다.

http://reviews.cnet.com/8301-13746_7-20117026-48/bmws-apptastic-future/

http://reviews.cnet.com/8301-13746_7-20121575-48/sync-update-adds-new-yet-little-known-bluetooth-profile-to-vehicles/?tag=mncol;2n

Text to speech in Car


UA Airway IVR System by Nuance

US Airway Contact Center에서 Nuance의 음성인식 솔루션을 도

입하여 여러 단계를 거쳐서 필요한 정보를 얻는 것이 아니라 음성인

식을 통하여 고객이 원하는 서비스로 직접 연결함

IVR Choice View

Radishsystems의 ChoiceView는 기존의 IVR에 화면인터랙션을 추가하

여 사용자가 음성인식과 화면선택을 통해서 상담을 받을 수 있도록 함

Interactive Voice Response

http://www.nuance.com/company/news-room/press-releases/US-Airways-Customers-Receive-Personalized.docx

http://www.radishsystems.com/products/the-choiceview-app/


http://www.nuance.com


https://www.thalmic.com/myo/

MYO

NUI : Sensory Interface

2013 Thamic Labs

MYO lets you use the electrical activity in your muscles to wirelessly control your computer, phone, and other favorite digital technologies.With a wave of your hand, MYO will transform how you interact with your digital world.

Video : https://www.youtube.com/watch?v=oWu9TFJjHaM&feature=player_embedded

EPOC NeuroHeadset - A headset that reads your brainwaves Emotiv

Video : http://www.youtube.com/watch?v=fVhggGSjXVg#at=72

http://www.emotiv.com/


necomimineurowear

뇌파에 따라 반응하는 고양이 귀 모양의 헤어밴드

놔파를 측정하는 센서를 이용하여 고양이 귀의 모양이 변하는 새로운 커뮤니케이션 도구

집중하면 쫑긋하고 진정하고 평정심을 유지하면 귀가 내려감

http://neurowear.com/projects_detail/necomimi.html

http://www.youtube.com/watch?v=w06zvM2x_lwVideo :


2) First Person Interface

First Person Interface

Video : http://www.youtube.com/watch?v=4EvNxWhskf8http://www.youtube.com/watch?v=JSnB06um5r4

http://www.google.com/glass/start/what-it-does/

Google GlassGoogle

http://www.youtube.com/watch?v=I2l0qklSzks

Finger linkFujitsu

어떠한 테이블에서든 프로젝터를 쏘아서 터치

가능한 컴퓨팅이 가능하도록 만들어주는 시스

템. 단순히 프로젝터로 사물을 비추는 것이 아

니라 물체를 기반으로 인터랙션이 가능하게 해

준다. 스캔 하여 복사 등이 가능하다.

Video : http://www.youtube.com/watch?v=I2l0qklSzks


http://www.chrisharrison.net/index.php/Research/OmniTouch

http://www.chrisharrison.net/projects/omnitouch/omnitouch.pdf

OmniTouchMicrosoft & CMU, Chris Harrison

스마트폰이나 태블릿 PC와 같이 멀티터치기반 입력경험을 웨어러블 프로젝터 기술을 사용하여 일반 종이나 벽, 심지어 손바닥까

지 임의의 표면에 인터렉티브 한 환경을 조성할 수 있는 기술

Video : http://www.chrisharrison.net/index.php/Research/OmniTouch


Illumi RoomMicrosoft & University of Illinois

http://www.brettrjones.com/illumiroom/#more-464

Video : https://www.youtube.com/watch?v=L2w-XqW7bF4#at=16

Xbox Kinect를 이용하여 방안을 스캐닝하고, 프로젝터를 이용하여 게임 플레이시 화면을 벽면까지 확장시켜준다.

프로젝션 증강현실 기술을 활용하여 방 전체를 디스플레이 화면으로 만든다. 게임 플레이시 방 전체가 게임화면이 되어 몰입감을 극대화, 리

빙 룸의 엔터테인먼트 경험을 증대시킨다.


EyecanSamsung C Lab

http://www.eyecanproject.org/

eyeCan은 눈만을 사용하여 기기나 서비스를 쉽게 이용할 수 있게 도와주는 입력장치이다. 눈으로 컴퓨터를 사용하고, 책장을 넘기고, 글을 써서 늘

고마운 사람에게 자신의 마음을 전할 수 있게 도와준다. 게임도 할 수 있고, 때로는 지도를 보고 그 장소로 여행을 할 수도 있다


Jawbone UPJawbone

건강 정보 추적기 jawbone UP

손목의 밴드가 사용자의 움직임과 수면 활동, 식사 등을 추적하여 해당 데이터를 앱에 전송하여 자신의 생활 패턴을 파악하게 함

https://jawbone.com/up

https://www.youtube.com/watch?v=l3xk48GsPIgVideo :


FuelBandNike

개인의 활동량을 측정하여 Fuel Score로 환산해주는 밴드

스마트폰과 블루투스로 연결하여 실시간 데이터를 전송하면 해당 데이터를 수치화 하여 제공

당일의 활동량에 따라 밴드의 LED가 붉은색에서 녹색으로 변화하여 동기부여를 함

http://www.nike.com/us/en_us/c/nikeplus-fuelband

http://www.youtube.com/watch?v=LC6wptkt2WkVideo :


Smart WatchSONY Smart Watch I’m Watch


Galaxy gear & iWatch예상도Samsung VS Apple


GM Advanced Tech Window2012 GM HMI Group & Bezalel Academy

Video : http://www.youtube.com/watch?v=9G4cYYlIaCc

http://www.youtube.com/watch?v=9G4cYYlIaCc


Epilogue

최초의 Electronic Consumer Product는?

The Original Kodak Camera, 1888The First Roll Film, 1884

Epilogue

최초의 Digital Camera는?

Epilogue

코닥의 기술자 스티브 새슨이 발명한 최초의 디지털카메라, 1975

사용자의 Context를 고려한 감성경험

UX

감사합니다.

[email protected]

Documents

스마트감성경험시대, UX서울여자대학교 산업디자인학과 UX Design Lab 박남춘 스마트감성경험시대, UX-Context 중심의UX디자인과감성UX 트렌드-