상호작용
메모
이 디자인 가이드는 Windows 7용으로 만들어졌으며 최신 버전의 Windows용으로 업데이트되지 않았습니다. 지침의 대부분은 여전히 원칙으로 적용되지만 프레젠테이션과 예제는 현재 디자인 지침을 반영하지 않습니다.
상호 작용은 터치, 키보드, 마우스 등 사용자가 앱과 상호 작용하는 다양한 방법입니다. 이러한 지침을 사용하여 터치에 최적화되었지만 입력 장치에서 일관되게 작동하는 직관적이고 독특한 환경을 만들 수 있습니다.
터치 우선 환경을 위한 디자인
무엇보다도 터치가 사용자의 기본 입력 방법이 될 것이라는 기대로 앱을 디자인합니다. 플랫폼 컨트롤을 사용하는 경우 Windows에서 무료로 제공하므로 터치 패드, 마우스 및 펜/스타일러스를 지원하려면 추가 프로그래밍이 필요하지 않습니다.
그러나 터치에 최적화된 UI가 항상 기존 UI보다 우수한 것은 아닙니다. 둘 다 기술과 애플리케이션에 고유한 장점과 단점을 제공합니다. 터치 우선 UI로 이동하는 경우 터치(터치 패드 포함), 펜/스타일러스, 마우스 및 키보드 입력 간의 핵심 차이점을 이해하는 것이 중요합니다. Windows 8의 터치는 단순히 해당 기능을 에뮬레이트하는 것 이상을 수행하므로 친숙한 입력 장치 속성 및 동작을 당연하게 여기지 마세요.
곧 알게 되겠지만 터치 입력에는 UI 디자인에 대한 다른 접근 방식이 필요합니다.
터치 조작 요구 사항 비교
이 표에서는 터치 최적화 Windows 스토어 앱을 디자인할 때 고려해야 하는 입력 디바이스 간의 몇 가지 차이점을 보여 줍니다.
| 요소 | 터치 조작 | 마우스, 키보드, 펜/스타일러스 상호 작용 | 터치 패드 |
|---|---|---|---|
|
전체 자릿수 |
손가락 설명의 접촉 영역이 단일 x-y 좌표보다 크면 의도하지 않은 명령 활성화 가능성이 높아집니다. |
마우스와 펜/스타일러스는 정확한 x-y 좌표를 제공합니다. |
마우스와 동일합니다. |
| 접촉 영역의 모양은 이동 내내 변경합니다. |
마우스 이동 및 펜/스타일러스 스트로크는 정확한 x-y 좌표를 제공합니다. 키보드 포커스는 명시적입니다. |
마우스와 동일합니다. |
|
| 대상 지정에 도움이 되는 마우스 커서가 없습니다. |
마우스 커서, 펜/스타일러스 커서 및 키보드 포커스는 모두 대상 지정을 지원합니다. |
마우스와 동일합니다. |
|
|
인체 해부학 |
손가락 하나 이상의 손가락을 가진 직선 동작은 어렵기 때문에 손가락 이동은 정확하지 않습니다. 이것은 손 관절의 곡률과 움직임에 관련된 관절의 수 때문입니다. |
마우스 또는 펜/스타일러스를 제어하는 손이 화면의 커서보다 더 짧은 물리적 거리를 이동하기 때문에 직선 동작을 수행하는 것이 더 쉽습니다. |
마우스와 동일합니다. |
| 디스플레이 장치의 터치 표면의 일부 영역은 손가락 자세와 장치의 사용자 그립으로 인해 도달하기 어려울 수 있습니다. |
마우스와 펜/스타일러스는 화면의 모든 부분에 도달할 수 있지만 탭 순서를 통해 키보드에서 컨트롤에 액세스할 수 있어야 합니다. |
손가락 자세와 그립이 문제가 될 수 있습니다. |
|
| 개체는 하나 이상의 손끝이나 사용자의 손으로 가려질 수 있습니다. 이를 폐색이라고 합니다. |
간접 입력 디바이스는 폐색을 일으키지 않습니다. |
마우스와 동일합니다. |
|
|
개체 상태 |
터치는 2개 상태 모델을 사용합니다. 디스플레이 장치의 터치 표면은 터치(켜기)되거나 끄지 않습니다. 추가 시각적 피드백을 트리거할 수 있는 호버 상태가 없습니다. |
마우스, 펜/스타일러스 및 키보드는 모두 위쪽(꺼림), 아래쪽(켜기) 및 가리키기(포커스)의 세 가지 상태 모델을 노출합니다. 가리키기를 사용하면 사용자가 UI 요소와 연결된 도구 설명을 탐색하고 학습할 수 있습니다. 가리키기 및 포커스 효과는 대화형 개체를 릴레이할 수 있으며 대상 지정에도 도움이 됩니다. |
마우스와 동일합니다. |
| 풍부한 상호 작용 |
터치 표면에서 다중 터치: 여러 입력 지점(손끝)을 지원합니다. |
단일 입력 지점을 지원합니다. |
터치와 동일합니다. |
| 탭, 끌기, 슬라이딩, 꼬집기 및 회전과 같은 제스처를 통해 개체의 직접 조작을 지원합니다. |
마우스, 펜/스타일러스 및 키보드가 간접 입력 장치이므로 직접 조작을 지원하지 않습니다. |
마우스와 동일합니다. |
참고
간접 입력은 25년 이상 개선된 이점을 가지고 있습니다. 호버 트리거 도구 설명과 같은 기능은 터치 패드, 마우스, 펜/스타일러스 및 키보드 입력을 위한 UI 탐색을 해결하도록 설계되었습니다. 이와 같은 UI 기능은 이러한 다른 디바이스에 대한 사용자 환경을 손상시키지 않고 터치 입력에서 제공하는 풍부한 환경을 위해 다시 설계되었습니다.
여기서는 몇 가지 일반적인 사용자 상호 작용 지침을 제공하고 이러한 항목에서 디바이스별 지침을 다룹니다.
피드백을 위한 시각적 개체
앱과 상호 작용하는 동안 적절한 시각적 피드백은 사용자가 앱과 Windows 시각적 피드백 모두에서 상호 작용이 해석되는 방식을 인식, 학습 및 조정하는 데 도움이 되며, 성공적인 상호 작용을 나타내고, 시스템 상태를 릴레이하고, 제어 감각을 개선하고, 오류를 줄이고, 사용자가 시스템 및 입력 디바이스를 이해하고, 상호 작용을 장려할 수 있도록 도와줍니다.
시각적 피드백은 사용자가 위치에 따라 정확도 및 정밀도가 필요한 활동에 터치 입력을 사용하는 경우에 중요합니다. 터치 입력이 감지될 때마다 피드백을 표시하여 사용자가 앱 및 해당 컨트롤에서 정의한 사용자 지정 대상 지정 규칙을 이해할 수 있도록 지원합니다.
정확도 최적화
터치 입력에는 손가락의 전체 접촉 영역이 포함됩니다. 이 접촉 기하 도형은 가장 가능성이 큰 대상 개체를 결정하는 데 사용됩니다. 컨트롤 크기를 조정하여 대상에 쉽고 안전한 개체 및 컨트롤이 있는 편안한 UI를 보장합니다.
사용자 상호 작용 자체에 의해 UI가 가려지는 손가락과 손 폐색을 제거하는 데 도움이 되도록 컨트롤의 크기, 공간 및 위치를 지정합니다.
가능하면 대화 상대 영역 위에 메뉴, 팝업 및 도구 설명을 배치합니다.
신뢰도 제한
UI 제약 조건을 사용하여 실수 조작을 방지하거나 최소화합니다.
- 끌기 지점을 사용하면 원하는 위치에서 더 쉽게 중지할 수 있습니다. 맞춤 지점은 앱 콘텐츠에서 논리적 중지를 지정합니다. 인지적으로 스냅 포인트는 사용자의 페이징 메커니즘 역할을 하며 과도한 슬라이딩, 스 와이프 또는 회전으로 인한 피로를 최소화합니다. 이를 통해 부정확한 사용자 입력을 처리하고 콘텐츠 또는 키 정보의 특정 하위 집합이 표시되는지 확인할 수 있습니다.
- 동작 축(세로 또는 가로)을 강조하는 방향 "레일"입니다.
시간이 초과된 상호 작용 방지
상호 작용은 시간별로 구분해서는 안 됩니다. 동일한 상호 작용은 수행하는 데 걸린 시간에 관계없이 동일한 결과를 가져야 합니다. 시간 기반 활성화는 사용자에게 필수 지연을 도입하고 직접 조작의 몰입형 특성과 시스템 응답성에 대한 인식을 모두 손상합니다.
시간이 지정된 상호 작용은 일반적으로 시간, 거리 또는 속도와 같은 보이지 않는 임계값에 따라 수행될 명령을 결정합니다. 시간 제한 상호 작용은 시스템이 작업을 수행하고 사용자가 결과를 얻기 위해 임의 및 보이지 않는 임계값에 도달해야 할 때까지 시각적 피드백이 없습니다. 상호 작용 중에 즉각적인 시각적 피드백은 사용자가 더 참여하고, 자신감을 갖고, 제어할 수 있도록 합니다.
개체에 직접 영향을 미치고 실제 상호 작용을 모방하는 상호 작용은 더 직관적이고 검색 가능하며 기억에 남습니다. 모호하거나 추상적인 상호 작용에 의존하지 않습니다.
참고: 예외는 특정 시간 지정 상호 작용을 사용하여 학습 및 탐색을 지원하는 경우입니다(예: 길게 누르기). 적절한 설명과 시각적 신호를 사용하면 고급 상호 작용을 사용하는 데 큰 영향을 줍니다.