Designing natural user interface

NUI : Interaction De-sign

User Experience Designer, Sungwook Baek

2013.01.12

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

아이디어 인터렉션 알고리즘Conclu-sion사용성 평가Definition

It’s as simple as nature herself

What is the Natural User Interface?

A natural user interface is a user interface designed to use natural human behaviors for interacting directly with content.

Joshua Blake

Bill Buxton

NUIs are designed

NUIs reuse existing skills

NUIs have direct interaction with content

NotNATURAL USER INTERFACE,

butNATURAL USER INTERFACE

Daniel Wigdor, Dennis Wixon

아이디어 인터렉션 알고리즘Conclu-sion사용성 평가Definition

History 인터렉션 알고리즘 결론사용성 평가Definition

1965, Engelbart

1981, Xerox Star

1966, Engelbart's Workstation

1982, Apple Lisa

1974, Xerox Smalltalk

1984, Apple Machintosh

Brief history of WIMP technology

http://www.dougengelbart.org/firsts/mouse.html

http://www.mac-history.net/wp-content/uploads/2012/03/500004657-03-01.jpeg

History 인터렉션 알고리즘 결론사용성 평가Definition

Brief history of NUI technology

Ivan Sutherland, Sketchpad in 1962 Alan Kay, Dynabook in 1972Donald Bitzer’s PLATO in 1967

Bolt’s Put That There in 1979 Myron Kruger’s Video Place in 1986

History Now Design Q&AConclusionDefinition

Ivan Sutherland, Sketchpad in 1962


Donald Bitzer’s PLATO in 1967


Alan Kay, Dynabook in 1972

What you see is what you get(WYSIWYG)


Bolt’s Put That There in 1979


Myron Kruger’s Video Place in 1986


Apple, Knowledge Navigator in 1987




사람들은 기술에 대한 기대치가 상당히 높다




Microsoft illumiroom



Emotiv

Definition History Now Design Q&AConclusion

Newton vs Palm


NUI 정의 : 특별한 노력과 연습 없이도 기술을 습득하고이뤄내야 한다 .

NUI Interaction 의 3 가지 고려요소- 재미- 기술 향상을 이끌어냄- 문맥에 적절함

NUI 를 표현하기 위한 새로운 형태의 GUI 를 작업해야 된다 .


3D Interface

http://2.bp.blogspot.com/-Cigi8jFTRsA/T0x2bZot2DI/AAAAAAAABIk/XIpj4drvRZw/s1600/a+copy.jpg


Seamless

Suspension of disbelief

-> Interaction 과정을 방해하는 모든 요소들을 제거 , 기술적으로 해결해야 될 문제

Self Monitoring-> 액션을 수행하기 위해 필요한 패턴 또는 템플릿과 유저의 행동을 비교하지 않고 수행

행동과 오브젝트 간의 연관성을 고려

상태와 전이 변화 : 애니메이션 , 질량 , 가속 , 마찰 , 중력을 활용한 표현


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




유저 인터페이스 컨트롤을 통하지 않고 직접 콘텐트를 조작하도록 하자 .

사용자가 상호작용 하지 않는 동안에도 동작 중이라는 사인을 주자 .

초보자에서 전문가로 이동할 수 있는 자연스러운 과정을 제공할 메커니즘을 만들자 . 전문가용 사용패턴을 별도로 두어 전문가용에서 좀 더 효과적으로 Interaction 할 수 있도록 하자 .


Scaffolding Instruction: 학습과 수행의 통합 .

커다란 문제를 잘게 나누어 해결하게 하는 교수법이다 .

잘게 나눈 뒤 특정 프롬프트 힌트 유도질문과 같은 방식으로 설명해라 .

EX)

커다란 문제점

어떻게 전체 시스템이 작동하는가 ?

시스템이 가지고 있는 가능성에는 어떤 것이 있는가 ?

작은 문제점이 액션을 어떻게 초기화할 것인가 ?

다음으로 무엇을 해야 하는가 ?

참조정보에 대한 사용을 삼가고 즉각적이고 간단한 큐를 통해 사용자의 다음 행동을 알려주도록 한다 .

모든 콘텐트를 터치 가능하도록 만들어 사용자가 스크린 어디를 터치하더라도 피드백을 주자 .

피드백 정말로 중요함


OORGesture Registra-

tion

Gesture Continua-

tion

Gesture Termination

Action Movement Lift

Movement

Movement

State Transition Diagram


Fat finger problem

-> Contact Visualization-> 모든 UI 구성요소를 크게 만들자-> iceberg target-> Ridgedpad


Designer 가 반드시 알아야 될 것 ! NUI Technology 를 이해하자

< 헤일로 : 레전드 > 는 전 시리즈에 걸쳐 밀리언 셀러 (100 만개 ) 를 달성했을 뿐만 아니라 , 타임즈에서 뽑은 100 개의 히트 상품 중 하나로 선정되고 , 1,2,3 편 모두 모든 매체에서 90 점 이상의 호평을 받은 명작 . 헤일로의 세계를 펼쳐나간 작품 .

사용자가 총을 겨눌 수 있는 영역을 넓히고 적에 적중하도록 하자 .

총이 적이 있는 방향을 겨누고 있으면 움직임 속도를 약간 줄여 사용자로 하여금 여전히 상대편을 겨눈 상태로 조이스틱을 놓을 수 있는 시간을 만들어 준다 .


NUI 에서 커서는 어떻게 해야 될까 ?

커서의 존재와 사용자의 입력에 대한 반응을 통해 활성화 상태 혹은 추적 혹은 명령을 받을 준비가 되었는지에 대해 피드백을 얻는다 .

시스템상에서 사용자의 입력을 이해하고 있음을 표현하는 방식의 필요성은 매우 분명하다


원거리에 있는 물체에 대한 터치

물리조작의 제한 , 거리가 있는 컨트롤과의 상호작용

Beyon constraint


false negative and false positive errors

Action

제스쳐 인식을 시작하거나 멈추는 것을 알려주는 역할 제스쳐인지 비제스처인지를 구분할 수 있도록 정확도를 높여준다 .

Clutch

시스템에서 사용할 제스쳐 Action.


Chassis Gesture

가속기 , 자기계 , 자이로스코프


MDA Framework

: 게임을 개선하고 디자인하는 데 검증된 도구이다 .

: Microsoft Studio 의 User Research 팀에서도 검증된 방법

ActionObject Conclusion

http://www.elliotmax.com/wp-content/uploads/2011/11/mda_diagram-thumb-300x208-973.jpg


RITE(Rapid iterative test evaluation methodology) : NUI 의 메타포 디자인 방법론

RITE 의 목표는 최고의 메타포어를 찾는 것 .

시스템 디자인 요소가 사용자에의 메타포어와 상호작용 하는가 ?

그 메타포어가 사용자로 하여금 납득할 수 있는 것이며 시스템을 학습 할 수 있도록 도와주고 있는가 ?

대표적인 NUI Metaphor

MAGNET, SHEPER,E UNFOD

디자인 팀은 다양하고 실현 가능한 메타포어와 디자인을 만들어야 한다 .

팀은 가장 독특한 메타포어를 선택해야 한다 . 그래야 더 좋은 피드백을 받을 수 있다 .

메타포어를 정제하는 데 목표를 두어야 한다 . 정제의 목적은 상호소통의 장애물을 제거하고

메타포어를 더 분명히 묘사하는 것이다 .

긍정오류와 부정오류를 인식하는 것을 빠르게 반복하여 언어를 향상시키는 RITE 방식이 중요하다 .

Definition History Now Design Conclusion Q&A

Right now is the time to create a practice of ubiquitous computing user experience design.

The Technology is ready.

Consumers are ready.

Manufacturers are ready.

The world is ready.

Now it is up to designers to define what that practice will mean.

Q & A

Definition History Now Design Conclusion Q&A