2013 IT 산업전망컨퍼런스 스마트감성경험시대, UX - Context 중심의 UX 디자인과감성 UX 트렌드 - 서울여자대학교산업디자인학과 UX Design Lab 박남춘
1. Context 중심의 UX 디자인
스마트감성경험 Emotional Experience : Three Levels of Brain
스마트감성경험 Emotional Experience : Three Levels of Brain Donald A. Norman은인간의뇌활동에는다음의세가지수준이있다고보았다. : Visceral( 본능적인 ), Behavioral( 행동의 ), Reflective( 반영하는, 사려깊은 ) Sensory Motor Reflective Eye Ear Mouth Behavioral Control Arms Legs Control Visceral Visceral level : 어떤상태에본능적으로반응 생물학적특성 Behavioral level : 상태를분석, 뇌활동의관조적인부분 Reflective level : 경험을반영할수있는지각있는생각
스마트감성경험 Emotional Experience : Three Levels of Brain Visceral은외관 (Appearance) 을, Behavioral은기능 (function) 을, Reflective는상징 (symbol) 을다룬다. Visceral 의식하거나생각하기이전의제품에대한초기반응 appearance, feel, touch Behavioral 제품의사용과경험에관한 function, performance, usability Reflective Interpretation, understanding, reasoning Interaction between self-identity and product About the feelings of satisfaction produced by owning, displaying, using a product
스마트감성경험 Process of Human Interaction with product 인간과제품간의 Interaction Process는 Image의인식으로부터시작해 Behavoir, Belief의단계로이루어진다. 1 Image 2 Behavior 3 Belief
스마트감성경험 Process of Human Interaction with product 사용자는처음제품을접할때주관적이고직관적으로판단을한다. 이러한첫인상은사용자에게있어제품에대한관심을자극하게된다. Wow, that s cool! I like it. Aesthetic, Instinctual, Value, Subjective
스마트감성경험 Process of Human Interaction with product 두번째단계로사용자는인지적이해와물리적작동을통해제품을사용함으로써이성적으로제품을경험하게된다. Oh, easy to use, remember and learn! Aesthetic, Instinctual, Value, Subjective Cognitive, Logical, Behavioral, habitual
스마트감성경험 Process of Human Interaction with product 마지막으로반복적인제품의사용을통해사용자는제품에대한자신만의경험과믿음을가지게된다. Ah, that is my type of thing! Aesthetic, Instinctual, Value, Subjective Cognitive, Logical, Behavioral, habitual Belief Symbolic, Sub-conscious, Brand, Loyalty, Story, Context
Context 의중요성 프로포즈를하기좋은장소는?
Context 의중요성 방법이같으면결과도같을까? Case A Case B
Context?
Context 의중요성 What is Context? 맥락, 정황, 전후관계, 배경, 환경
Context 의중요성 What is Context? 컨텍스트는거시적인환경과미시적인상황을포함한다. 컨텍스트는지속적으로변화한다. 미디어는컨텍스트를변화시킬수있다. 1995 년 280 만장 VS 2012 년 38 만장
Context 의중요성 What is Context? Context 에대한이해가 공감 을불러일으킨다
Context 의중요성 What is Context? Context 가대박과쪽박을결정한다
Context 의중요성 What is Context? 사용장소, 주변사람과물체의집합에따라적응적이며, 동시에시간이경과되면서발생하는대상의변화로사용자가어디에있고, 누구와함께있으며, 근처에어떤사물이있는가에대한부분 by Schilit & Theimer(1994) 사용자의감정상태, 관심의초점, 장소와위치및방위, 날짜와시간, 사물, 사용자의주위환경과사람들 by Anind K, Dey(1998) 사용자가제품을사용하는데있어사용자를그들의목표, 태스크, 하드웨어와소프트웨어를포함한인프라, 그리고물리적 / 사회적환경과결합하도록하는것 by ISO 9421-11
Context 의중요성 What is Context? Product
Context 의중요성 What is Context? User-Product
Context 의중요성 What is Context? User-Product in Context
Context 의중요성 What is Context? User-Service in Context
Context 의중요성 What is Context? 왜컨텍스트에관심을가져야하는가? - 제품 (Product), 서비스 (Service), 사용자 (User), 환경 (Environment) 의조화 - 창의적인사용자경험을만들기위한출발점 - 변화하는컨텍스트에대한대응의중요성 - 특정한환경에있는타인을이해 - 복잡한환경속에서사용되는제품과서비스를디자인하기위해 디자이너에게있어컨텍스트는모든주변상황중선별된일부이며, 디자인컨셉의배경으로사용된다.
Context 의중요성 Context in Research & Design for Product Past / Present Context Factors P U P Research & Analysis Selecting factors, Positioning oneself Designing P Future P STATEMENT : Goal of Designing U METAPHOR : Cognition, Use, Experience of Product CHARACTERISTICS : Form & Function CONTEXT INTERACTION PRODUCT
Context 의중요성 Context in Research & Design for Service Past / Present Context Factors S U S Research & Analysis Selecting factors, Positioning oneself Designing S Future S STATEMENT : Goal of Designing U METAPHOR : Cognition, Use, Experience of Service CHARACTERISTICS : Form & Function & Process CONTEXT INTERACTION SERVICE
2. 미래감성 UX 트렌드
미래감성 UX 트렌드 History of Interface Command Line Interface Graphic User Interface Natural User Interface First Person Interface Codified Strict Metaphor Exploratory Direct Intuitive Nearby Immediate
미래감성 UX 트렌드 Usage Curve (Luke wroblewski) Luke wroblewski, First Person User Interface, 2011 : http://www.lukew.com/presos/preso.asp?21
미래감성 UX 트렌드 Definition of Natural User Interface 마우스나키보드와같은별도의인공적인제어장치없이사람의자연스런감각 / 행동 / 인지 능력을통해직접교감하는방식으로디지털기기를제어하는인터페이스기술 Gesture Interface Multi- Touch Interface NUI Voice Interface Sensory Interface LG CNS 김태우, Natural User Interface, 2013 : http://www.lukew.com/presos/preso.asp?21
미래감성 UX 트렌드 Definition of First Person Interface 1 인칭시점으로현재경험하고있는것을즉각적으로실제세계와디지털간의상호작용을일으키는인터페이스기술 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) Natural User Interface
NUI : Gesture Interface G-Speak Oblong Industries 모션인식이가능한장갑을끼고손가락동작을활용하여자신이원하는동작을명령하는입력장치 (by John Underkoffler) Video : http://www.ted.com/talks/john_underkoffler_drive_3d_data_with_a_gesture.html http://www.oblong.com/g-speak/
NUI : Gesture Interface Holo Desk Microsoft 가상의 3D 오브젝트를손으로다룰수있게하는기술웹캠을통한좌표계정보획득과 MS의게임콘솔인 Xbox 360의동작인식시스템 Kinect, 그리고증강현실기술을융합하여 3D 오브젝트와사용자간의상호작용을가능케한다. Video : http://www.youtube.com/watch?v=jhl5tj9ja_w http://research.microsoft.com/en-us/projects/holodesk/
NUI : Gesture Interface Space Top MIT, 이진하 동작인식을이용한양방향가상기술. 키넥트에사용되었던동작인식기술을사용하여사용자의손가락과손동작을인식해 3차원오브젝트를손으로컨트롤할수있다. Video : http://vimeo.com/59231624 http://leejinha.com/spacetop
NUI : Gesture Interface AquaTop Display 도쿄대전기통신학과연구팀 물을이용한터치스크린 Video : http://www.youtube.com/watch?v=fyjneaa2o8i https://googledrive.com/host/0b_e3lrlf4dozdm84vvozv09qc /
NUI : Gesture Interface Leap Motion Leap Motion 컨트롤러를 USB 에꽂아앞에올려놓은후손짓을하거나펜, 손가락을움직이면그움직임을감지해 PC 에입력해주는신개념컨트롤러 Video : https://www.youtube.com/watch?feature=player_embedded&v=3b4w749tud8 https://www.leapmotion.com/
NUI : Gesture Interface Iron Man Marvel
NUI : Multi Touch Interface Surface_Table Microsoft 여러사람이동시에 50 개이상의접촉에반응하여, Table 형태의 Screen 을사용할수있다.
NUI : Multi Touch Interface Surface_Tablet PC Microsoft http://www.microsoft.com/surface/ko-kr
NUI : Multi Touch Interface Samsung's Smart Window Samsung Video : http://www.youtube.com/watch?v=ps1hm9uey5m http://www.youtube.com/watch?v=m5rltrdf5cs
NUI : Multi Touch Interface Pocket Touch Microsoft & CMU 사용자가옷이나기타물질을통해서도터치기기를조작하는기술포켓터치기술은터치기기의후면에장착되는정전용량 (capacitive sensor) 센서를사용한다. 마이크로소프트는이센서를통해사용자가주머니속의휴대폰을케이스에서꺼낼필요도없이조작할수있음 Video : http://www.youtube.com/watch?v=fhsdpe0ktag&feature=player_embedded http://research.microsoft.com/apps/video/default.aspx?id=155018&l=i
NUI : Voice Interface Siri Apple 사용자가 What can I do? 라고물어보면 Siri 가음성검색의리스트와말하는방법알려준다. 음성으로받은메시지를듣고, 바로답문보내기 음성으로스케줄설정과친구초대하기 음성으로리마인드맞추기 탁월한음성인식능력으로검색, 상거래지원기능을갖추고있는 iphone 4S ios5 전용음성인식프로그램이다. 인공지능기능 단순히사용자의말을텍스트로바꾸지않고실생활에서유용하게사용할수있도록의미를이해해서바꿔주는기능이있다. http://www.apple.com/kr/ipad-mini/features/?cid=wwa-kr-kwg-features-com
NUI : Voice Interface Siri Apple
NUI : Voice Interface Text to speech in Car BMW App Ford My Touch ConnectedDrive 시스템에서아이폰캘린더어플리케이션과의통합으로운전자의일정을 BMW센터화면에서볼수있음예정된약속표시이외에세부사항을읽어주는 (text to speech) 기능 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
NUI : Voice Interface Interactive Voice Response UA Airway IVR System by Nuance IVR Choice View US Airway Contact Center에서 Nuance의음성인식솔루션을도입하여여러단계를거쳐서필요한정보를얻는것이아니라음성인식을통하여고객이원하는서비스로직접연결함 Radishsystems의 ChoiceView는기존의 IVR에화면인터랙션을추가하여사용자가음성인식과화면선택을통해서상담을받을수있도록함 http://www.nuance.com/company/news-room/press-releases/us-airways-customers-receive-personalized.docx http://www.radishsystems.com/products/the-choiceview-app/
NUI : Voice Interface http://www.nuance.com
NUI : Sensory Interface MYO 2013 Thamic Labs Video : https://www.youtube.com/watch?v=o Wu9TFJjHaM&feature=player_embedd ed 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. https://www.thalmic.com/myo/
NUI : Sensory Interface EPOC NeuroHeadset - A headset that reads your brainwaves Emotiv Video : http://www.youtube.com/watch?v =fvhgggsjxvg#at=72 http://www.emotiv.com/
NUI : Sensory Interface necomimi neurowear 뇌파에따라반응하는고양이귀모양의헤어밴드놔파를측정하는센서를이용하여고양이귀의모양이변하는새로운커뮤니케이션도구집중하면쫑긋하고진정하고평정심을유지하면귀가내려감 Video : http://www.youtube.com/watch?v=w06zvm2x_lw http://neurowear.com/projects_detail/necomimi.html
2) First Person Interface
First Person Interface Google Glass Google Video : http://www.youtube.com/watch?v=4evnxwhskf8 http://www.youtube.com/watch?v=jsnb06um5r4 http://www.google.com/glass/start/what-it-does/
First Person Interface Finger link Fujitsu 어떠한테이블에서든프로젝터를쏘아서터치가능한컴퓨팅이가능하도록만들어주는시스템. 단순히프로젝터로사물을비추는것이아니라물체를기반으로인터랙션이가능하게해준다. 스캔하여복사등이가능하다. Video : http://www.youtube.com/watch?v=i2l0qklszks http://www.youtube.com/watch?v=i2l0qklszks
First Person Interface OmniTouch Microsoft & CMU, Chris Harrison Video : http://www.chrisharrison.net/index.php/research/omnitouch 스마트폰이나태블릿 PC와같이멀티터치기반입력경험을웨어러블프로젝터기술을사용하여일반종이나벽, 심지어손바닥까지임의의표면에인터렉티브한환경을조성할수있는기술 http://www.chrisharrison.net/index.php/research/omnitouch http://www.chrisharrison.net/projects/omnitouch/omnitouch.pdf
First Person Interface Illumi Room Microsoft & University of Illinois Video : https://www.youtube.com/watch?v=l2w-xqw7bf4#at=16 Xbox Kinect를이용하여방안을스캐닝하고, 프로젝터를이용하여게임플레이시화면을벽면까지확장시켜준다. 프로젝션증강현실기술을활용하여방전체를디스플레이화면으로만든다. 게임플레이시방전체가게임화면이되어몰입감을극대화, 리빙룸의엔터테인먼트경험을증대시킨다. http://www.brettrjones.com/illumiroom/#more-464
First Person Interface Eyecan Samsung C Lab eyecan은눈만을사용하여기기나서비스를쉽게이용할수있게도와주는입력장치이다. 눈으로컴퓨터를사용하고, 책장을넘기고, 글을써서늘고마운사람에게자신의마음을전할수있게도와준다. 게임도할수있고, 때로는지도를보고그장소로여행을할수도있다 http://www.eyecanproject.org/
First Person Interface Jawbone UP Jawbone 건강정보추적기 jawbone UP 손목의밴드가사용자의움직임과수면활동, 식사등을추적하여해당데이터를앱에전송하여자신의생활패턴을파악하게함 Video : https://www.youtube.com/watch?v=l3xk48gspig https://jawbone.com/up
First Person Interface FuelBand Nike 개인의활동량을측정하여 Fuel Score로환산해주는밴드스마트폰과블루투스로연결하여실시간데이터를전송하면해당데이터를수치화하여제공당일의활동량에따라밴드의 LED가붉은색에서녹색으로변화하여동기부여를함 Video : http://www.youtube.com/watch?v=lc6wptkt2wk http://www.nike.com/us/en_us/c/nikeplus-fuelband
First Person Interface Smart Watch SONY Smart Watch I m Watch
First Person Interface Galaxy gear & iwatch 예상도 Samsung VS Apple
First Person Interface GM Advanced Tech Window 2012 GM HMI Group & Bezalel Academy Video : http://www.youtube.com/watch?v=9g4cyyliacc http://www.youtube.com/watch?v=9g4cyyliacc
Epilogue
Epilogue 최초의 Electronic Consumer Product 는? The Original Kodak Camera, 1888 The First Roll Film, 1884
Epilogue 최초의 Digital Camera 는? 코닥의기술자스티브새슨이발명한최초의디지털카메라, 1975
사용자의 Context 를고려한감성경험 UX
감사합니다. ncpark@swu.ac.kr