눈과 손에 대한 interaction을 디자인 하는 법에 대해 다룰 것이다.
Spatial input을 위해서 버튼을 보고 손가락을 탭하여 선택할 수 있고 팔은 편하게 무릎 위에 놓을 수 있다.
이 시스템은 멀리서 UI와 편하게 상호 작용할 수 있게 디자인되었다.
어떤 경우에는 element와 직접 상호 작용 할 수도 있다.
예를 들자면 손가락을 이용해 가상 키보드 타이핑하기.
손을 공중에 들고 있으면 피로할 수 있지만 직접적인 Interaction이 더 적합한 경우도 있다.
눈과 손은 새로운 공간 입력 방식이다. 하지만 기존의 익숙한 다른 방법도 사용가능하다.
타이핑하지 않고 목소리로 검색할 수 있고,
키보드나 트랙패드 같은 것도 있다.
게임 컨트롤러를 연결할 수도 있다.
이 세션에서는 가장 흥미로운 spatial input인 눈과 손에 집중할 것이다.
눈과 손을 사용하여 상호 작용하는 것은 몇 가지 측면에서 특수하다.
Spatial input is personal
시선과 손 동작은 개인적인 행동이다. 기기 내부와 외부에 있는 카메라가 자연스러운 움직임의 세세한 부분까지 모두 개인정보를 보호하면서 캡처한다.
Spatial input is comportable
손을 편하게 내려놓을 수 있다. 기기가 주변의 넓은 영역을 볼 수 있기 때문이다.
Spatial input is precise
공간 상호 작용이 정확해진다. 기기는 모든 데이터를 필터링하고 앱에서 사용할 수 있는 정확한 상호 작용으로 변환한다.
Eyes
눈은 spatial experience에서 primary targeting mechanism이다. 시스템의 모든 인터페이스가 바라보는 곳에 반응한다.
아무리 멀리 있더라도 바라보는 것만으로 어떠한 element든 쉽게 targeting이 가능하다.
Comfortable
눈에 편안한 앱을 빌드하기 위해서는 콘텐츠가 기기에 어떻게 표시되는지 고려해야 한다.
앱의 캔버스는 무한하지만 사람들은 시야에 들어오는 콘텐츠만 볼 수 있다.
시야 내에서는 중앙을 보는 것이 가장 편하며 가장자리를 보는 것은 덜 편안하다.
그래서 시야에 맞는 앱을 디자인하고 목과 몸의 움직임을 최소화해야 한다.
시야의 중앙에 주요 콘텐츠를 배치해라.
시야의 가장자리를 보는 것은 눈이 피로할 수 있으므로 항상 필요하지 않는 콘텐츠를 그 영역에 사용해라.
예를 들면 주요 콘텐츠를 방해하지 않는 보조 작업 같은 것들이 있다.
언제나 눈과 목의 편안함을 극대화해야 하므로 시야 내에 콘텐츠를 배치해야 한다.
또한 눈의 편안함을 생각해서 깊이도 고려해야 한다.
depth는 spatial experience의 독특한 특징인데 콘텐츠를 가까이 혹은 멀리 배치하면 프로젝트에서 다른 느낌이 든다.
하지만 눈은 한 번에 하나의 거리에만 초점을 맞추기 때문에, 초점 거리를 자주 변경하면 눈이 피로해질 수 있다.
그래서 UI 간에 이동하는 것이 쉽도록 상호 작용하는 콘텐츠를 동일한 깊이로 유지해야한다.
예를 들어 모달 뷰를 표시하면 main view가 z축으로 밀려 나가고 모달이 원래 위치에 배치된다. 같은 z축을 유지하기 때문에 눈은 새로운 거리에 적응 할 필요가 없다.
깊이의 미묘한 변화를 이용해서 hierachy를 전달 할 수도 있다.
Easy to use
눈으로 사용하기 쉽게 만드는 방법.
눈은 매우 정확하지만 눈이 UI element들을 잘 targeting하는데 도움이 되는 특성들도 있다.
중앙에 초점 맞추게 하기
눈은 자연스럽게 객체 중앙에 초점을 맞추게 된다.
눈을 돕기 위해 원, 모서리가 둥근 사각형 등 원형 모양을 사용해라.
모서리가 각진 모양은 사용하지 않도록 한다.
각진 모서리를 사용하면 눈 외부에 초점을 맞추게 되어 정확도가 떨어지게 된다.
평평한 모양을 사용하고 두꺼운 윤곽선은 피하며
모서리에 주의를 집중하게 하는 effect는 피해라.
텍스트와 glyph는 중아에 배치하고 패딩을 넉넉하게 사용해라.
언제나 UI 디자인을 통해 눈이 element의 중앙으로 이끌어지게 해라.
컨트롤의 적절한 크기
눈의 targeting을 위한 최소 영역은 60pt이다.
하지만 Element는 60pt보다 작아도 된다.
크기와 간격을 고려해서 최소 targeting 영역을 설정할 수 있다.
element들을 배치 할 때는 넓은 간격을 둬라.
눈으로 사용하기 쉬운 UI를 만들려면 크기와 간격을 조합해서 최소 targeting 영역이 60pt를 준수해야 합니다.
기본적으로 표준 컴포넌트는 targeting하기 쉬운 크기이다. 가능한 한 이런 컴포넌트를 사용해라.
자체 컴포넌트를 활용한다면 크기 지침을 따라야 한다.
포인트와 레이아웃에 대해 더 학습하고 싶다면 'Design for spatial user interface'세션을 확인해라.
눈의 타깃 영역 뿐만 아니라 공간 내의 모든 위치에서 이 타깃 영역을 유지하는 것도 중요하다.
이를 위해서는 UI의 크기를 조절하는 법을 알아야 한다.
두가지 다른 scale mechanism을 살펴보겠다.
시스템은 app window에 동적 scale을 제공한다.
윈도우가 멀어질수록 커지고 가까워질수록 작아진다.
Dynamic scale은 윈도우가 어디 위치하던 상관 없이 UI를 같은 시야 영역에 맞추고 타겟 영역의 크기를 유지한다.
fixed scale을 사용하는 경우 UI는 멀어질수록 작아진다.
fix scale은 interface의 크기를 변경해서 앱이 눈으로 사용하기 어려워 질 수 있다.
dynamic scale은 UI와 target 영역을 같은 크기로 유지하고 fixed scale은 크기를 변경하여 타깃 영역이 너무 작아지게 된다.
custom UI를 만들 때는 dynamic scale을 사용하여 눈으로 모든 컨트롤을 targeting 가능하게 해야한다.
방향 또한 앱을 사용하는데 영향을 준다.
인터페이스가 기울어져 있으면 읽고 사용하기 어렵다.
그래서 시스템 윈도우는 항상 사람을 향해있다.
custom window를 만들 때는 언제나 UI가 사용자를 향하도록 해야한다.
윈도우의 올바른 scale과 방향은 눈의 정확성을 높이기 위해 필수적이다.
윈도우가 어떻게 동작하는지 더 알고 싶다면 'Principleds of spatical design'을 봐라.
Responsive
바라보는 곳에 반응하는 interface를 만들면서도 개인정보를 보호하는 방법.
눈은 매우 혁신적인 입력 방식으로 인터페이스가 눈에 반응하는 것이 매우 중요하다. Interactive element가 하이라이트 되면, 눈과 상호작용하고 있다는 것을 알 수 있다.
이러한 하이라이트에는 hover effect를 사용한다.
하지만 눈은 빠르게 움직이기에, effect는 과하지 않아야하고 모든 콘텐츠 위에서 작동해야 한다.
인지한 것은 보이지만 두드러지지는 않아야 한다.
시스템에서 제공하는 컨트롤들은 호버 effect가 적용되어 바라보면 하이라이트로 표시된다.
앱에 custom element를 추가한다면 hover effect를 사용해서 눈의 feedback을 추가하고 element가 응답하는 느낌을 줄 수 있게 해라.
Eye intention은 매우 민감한 정보이다.
눈 데이터를 다룰 때는 Privacy가 가장 중요하다.
hover effect는 앱의 프로세스 외부에서 일어나서 우리가 받게 되는 정보는 gesture에 의해 element와 상호 작용 했을 때 초점을 받은 element의 정보 뿐이다.
Intentional
눈으로 element에 hovering하는 것은 intention을 나타낸다.
무언가를 오랫동안 바라보면 관심이 있다는 것을 알 수 있다.
버튼에 툴팁을 추가할 수 있는데 이는 바라보면 나타난다.
tab bar는 바라보면 확장되어 Label을 보여준다.
search field의 마이크를 바라보면 Speack to search 기능이 활성화 된다.
모든 system element는 필요할 때 추가 정보를 제공하며 focus하지 않을 때는 깔끔한 UI를 유지한다.
앱을 개발 할 때 이런 부분을 활용해라.
또한 개인정보 보호를 고려하여 빌드되어서 focus information은 앱으로 전송되지 않는다.
Eye intent는 assistive technology에도 좋은 기회를 제공한다.
예를 들어 Dwell Control feature를 사용한다면, 콘텐츠를 눈을 통해서만 선택할 수도 있다.
버튼을 잠깐 집중해서 보면 Dwell Control UI가 나타나서 tap gesture 없이도 버튼을 선택할 수 있게 된다.
Eyes 정리
눈은 훌륭한 타겟팅 메커니즘이며 손을 함께 사용하면 훨씬 강력해진다.
Hands
타겟팅을 위해 눈과 함께 사용되는 hand gesture는 시스템 전체의 primary interacting 방법이다.
Hand gesture
12:40에는 제스처들에 대한 설명이 나온다.
제스처는 시스템 전체에서 같은 방식으로 작동하며 Multi-touch 제스처와 비슷한 logic을 가지고 있다.
경험을 디자인 할 때 익숙한 패턴을 활용하고 사람들이 기대하는 방식대로 제스처에 응답해야 한다.
앱의 experience가 unique한 동작이라면 표준 제스쳐로는 표현이 어려울 것이다.
이럴 때는 커스텀 제스쳐가 필요할텐데 커스텀 제스쳐를 만드는 팁을 알려주겠다.
Eyes and intent
Input model의 가장 흥미로운 점 중 하나는 눈의 intent를 나타낸다는 점이다.
눈의 방향과 손 제스처를 결합하면 정확하고 만족스러운 상호 작용을 만들 수 있어서 다른 플랫폼에서는 불가능한 기능을 제공할 수 있다.
예시) 줌 제스처
제스처 시작 할 때, 줌의 시작점은 이미지 내에서 눈이 초점을 맞춘 위치이다.
예시) Markup에서의 포인터 이동
그림을 그리기 위해 마우스 포인터처럼 손으로 brush cursor를 조절하고
다른 곳을 바라보게 되면 캔버스에서 이동이 가능하다.
눈은 element를 target하는데만 사용되는것이 아닌 상호 작용을 위해 더 구체적인 위치를 제공하는 데 사용된다.
Direct touch
시스템 전체에서 손 끝을 사용하는 interaction을 지원한다.
사파리를 가까이에 놓고 페이지를 직접 스크롤 할 수 있다.
양손을 사용한 키보드 타이핑도 가능하다.
팔의 도달 범위 내에서 3D 콘텐츠 조작도 가능하다.
눈으로 컨트롤을 타겟팅 하기 쉽기 때문에 distance에서 interaction할 때 손은 최소한의 동작을 하며 쉴 수 있기 때문에 오랫동안 편한하게 interaction이 가능하다.
Direct interaction을 디자인 할 때는 손을 공중에 계속 들고 있으면 지칠 수 있다는 것을 염두에 두어야 한다.
하지만 몇몇 앱은 팔의 도달 범위 내에 콘텐츠를 배치하는 것이 유리하다.
Direct interaction을 디자인 할 때는 촉각적 반응이 없다는 점도 고려해야 한다.
실세계에서 우리는 무언가를 만질 때 마다 손의 다양한 감각적 피드백을 받는데 이는 Perception의 essential한 요소이다.
하지만 손을 뻗어서 가상의 콘텐츠를 만질 때는 그 모든 일이 일어나지 않는다.
그래서 상호 작용을 가능하게 하려면 누락된 감각 정보를 다른 유형의 피드백으로 보완해야 한다.
애플에서는 그래서 키보드에
버튼이 판보다 높게 위치해서 직접 누를 수 있다.
손가락이 키보드 위에 있는 동안 버튼은 호버 상태와 하이라이트를 표시해 버튼 표면에 다가갈수록 밝아지게 된다.
이를 통해 근접했다는 것을 알려주며 손가락으로 타깃을 찾는데 도움을 준다.
contact 되었을 때는 빠르게 변화하고 응답하며 적합한 spatial audio effect가 발생하게 된다.
이러한 추가적인 피드백은 누락된 촉각 정보를 대신하는 데 매우 중요하며 신뢰할 수 있고 만족스러운 direct interaction이 가능해진다.
input과 virtual content의 연결에 audio는 특별한 역할을 한다.
자세한 것은 'Explore immersive sound design'을 봐라
Hands 정리
Recap
디자이너와 개발자는 이러한 경험을 편안하고 접근하기 쉽게 만들어야 한다.
가상 콘텐츠와 손으로 상호작용하는 건 대부분 사람들에게 새로운 일이다. 그래서 명확한 피드백을 제공하고 가능하면 익숙한 interaction pattern을 사용하는 것이 매우 중요하다.
다른 플랫폼을 위해 디자인 할 때는 great input experience는 생각할 필요가 없었다.
소프트웨어의 반응은 신체 움직임과 자연히 연결되며 interaction intent와 완벽하게 일치한다.
눈을 input model로 사용하면 놀라운 정확도로 상호 작용에 응답하게 된다.
