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