내보내기(0) 인쇄
모두 확장

Windows Phone과 상호 작용 및 유용성

2013-12-05

적용 대상: Windows Phone 8 | Windows Phone OS 7.1

 

다음 항목에서는 레이아웃이 앱 유용성에 미치는 영향에 대해 설명합니다. 검색 및 설정과 같은 다른 일반적인 UI도 앱 유용성 컨텍스트에서 설명합니다.

컨트롤 및 상호 작용 작업을 계속하기 전에 다음을 수행합니다.

이 항목에는 다음 단원이 포함되어 있습니다.

 

앱은 충분한 크기의 터치 대상을 사용자에게 제공해야 합니다. 사용자는 탭이 컨트롤을 작동했으며 앱에서 컨트롤이 진행되도록 허용되었다는 피드백을 받아야 합니다. 이러한 목적을 위해 Windows Phone 에는 터치 대상 및 텍스트 사용에 대한 특정 요구 사항이 있습니다.

크기 요구 사항

터치 디자인은 크기, 간격 및 시각적 요소 간에 복잡한 균형을 찾는 것입니다. 이러한 균형을 찾으면 "대상 취득 시의 장애 인덱스로 알려진 요소가 감소합니다." 즉, 컨트롤을 누르기가 더 쉬워집니다.

광범위한 사용자 테스트를 통해 모든 Microsoft 터치 플랫폼에서 9mm 정사각형이 적절한 터치 대상 크기임을 확인할 수 있습니다.

UX_Interactions_IdealHitTarget

9mm 이상의 정사각형이 터치 UI 자산에 적절한 터치 대상입니다.

더 작은 적중 대상 높이가 보증되는 경우 최소 대상 크기는 7mm입니다. 이 경우 더 넓은 시각적 자산을 사용하는 것이 좋습니다. 예를 들어 목록 항목이나 메뉴 항목이 더 넓어야 합니다.

UX_Interactions_MinHitTarget

7mm가 최소 대상 크기입니다.

9mm 요구 사항 정보

권장 터치 대상 크기는 9mm 정사각형보다 크거나 같습니다. 대부분의 작업을 지원하는 컨트롤에 사용합니다.

공간이 심하게 제한된 경우 너비가 훨씬 더 크면 최소 터치 대상 크기 7mm를 사용할 수 있습니다.

9mm는 수백 시간의 사용자 테스트에 의해 결정된 숫자이며 개별 작업과 일련 작업에서 모두 가장 낮은 평균 오류 비율(또는 총 탭 수에 대한 false 탭 수의 비율)을 나타냅니다. 9mm 최소 터치 대상 크기는 오류 비율을 1.6%까지 제한할 수 있습니다.

최소 터치 대상 크기는 7mm입니다. 크기가 크면 디자인이 제한되는 경우에만 충분히 넓은(15mm 이상) 컨트롤에 사용하거나 자주 사용하지 않는 컨트롤에 사용합니다.

최소 시각적 크기

터치 가능한 항목의 최소 시각적 크기는 4.2mm 이상이어야 합니다. 이보다 작으면 사용자가 항목을 터치 가능하다고 인식하지 못합니다. 작은 시각적 자산이 필요한 경우에만 이 크기를 사용합니다. 대상은 10-15mm 이상일 수 있습니다.

팁팁:

대체로 시각적 크기를 터치 대상 크기와 같도록 설정합니다. 간격을 사용하여 컨트롤을 적중하기 쉽도록 만듭니다.

시각적 크기가 대상 크기와 같은 경우 컨트롤 사이에 안쪽 여백을 추가하여 컨트롤을 적중하기 쉽게 만들 수 있습니다. 사용자가 편안함을 느낄 수 있도록 하세요.

잘못된 탭의 결과 평가

항상 작업 컨텍스트를 명심하고 컨트롤에 대상 크기를 할당할 때 오류 비율을 평가합니다. 오류 결과가 많은 컨트롤에는 더 큰 대상을 사용해야 합니다. 동작에 사용된 컨트롤에도 더 큰 대상이 있어야 합니다.

예를 들어 시스템 휴대폰 다이얼은 잘못 탭할 경우 비용이 크기 때문에 큰 터치 대상을 사용합니다. 사용자가 잘못된 번호를 걸 수 있습니다. 오류가 쉽게 허용되는 작업에서는 작은 대상을 사용할 수 있습니다.

다음 그림에서는 터치 대상의 개별 부분을 보여 줍니다.

UX_Interactions_TouchTargetDiagram

터치 대상 다이어그램

이전 타일 그림에서 다음에 유의하세요.

  • 시각적 간격: 컨트롤과 버튼 사이 중간 간격이 터치 편의성을 높여줍니다.

  • 시각적 자산: 사용자가 보는 아이콘/컨트롤/텍스트의 실제 크기입니다. 공통 컨트롤 스타일 가이드에서 빨간색 선으로 표시됩니다.

  • 터치 대상: 위의 이미지에 표시된 시각적 자산 주위에 나타나는 녹색 테두리입니다. 터치 대상은 시각적 자산 크기보다 크거나 같을 수 있지만 작으면 안 됩니다. 공통 컨트롤 스타일 가이드에서 녹색 선으로 표시됩니다.

  • 비활성 공간: 두 개의 터치 가능 항목 사이 공간은 작업이 발생하지 않는 영역입니다.

멋진 타일 모양 만들기에 대해 자세히 알아보려면 Windows Phone용 타일 디자인 지침을 참조하세요.

작은 대상 사용

공간 및 작업 제약 조건은 올바른 터치 대상을 사용하는 기능을 방해하므로 터치 대상의 다음 특성을 변경하여 환경을 향상시킬 수 있는 방법을 고려합니다.

  • 모양

  • 위치

  • 사용 빈도

  • 작업 컨텍스트

  • 시각적 디자인(안쪽 여백/간격)

  • 오류 결과

UX_Interactions_SmallAssets_01

대상 크기를 시각적 자산보다 더 크게 설정합니다. 자산 시각적 크기가 대상보다 작은 경우 시각적 자산 크기가 4.5mm 아래로 내려가지 않도록 합니다.

UX_Interactions_SmallAssets_02

인접한 시각적 자산 사이에 간격을 사용합니다. 이 경우 더 나은 적중 대상을 사용할 수 있도록 인접한 자산 사이에 공간(최소 2mm)을 포함하여 적중 대상 크기를 조정합니다.

UX_Interactions_SmallAssets_03

자산 주위에 시각적 안쪽 여백을 만듭니다. 시각적 패딩을 도입하여 안전한 경계를 만들면 작은 대상을 적중하는 것이 덜 어려울 수 있습니다. 이 경우 대상 적중 시 인식되는 어려움이 감소합니다.

UI 요소의 올바른 크기를 정의할 때는 요소 및 수행자 작업의 중요도를 고려합니다. 이메일 확인 등의 일상적인 작업은 사용자의 주의가 덜 필요하고 특별한 작업은 더 많은 주의를 끌어야 합니다.

작은 컨트롤에 간격 지정

작은 요소가 있는 경우 간격을 사용하여 대상 크기를 조정할 수 있습니다. 간격을 사용하여 간격이 가까운 작은 컨트롤을 조정합니다. 간격이 가까운 작은 컨트롤에 간격을 사용해야 합니다.

중요중요:

실제 컨트롤의 크기에 관계없이 9mm 최소 터치 대상 크기를 수용할 수 있는 간격을 사용합니다.

4mm 확인란 컨트롤이 있다고 가정합니다. 터치 대상 3-5mm를 더 크게 설정하여 필수 크기 7-9mm가 되게 합니다. 오류를 추가로 줄이려는 경우 확인란 컨트롤과 인접한 다음 9mm 대상(또는 262dpi 장치의 경우 대략 90픽셀) 사이에 간격을 삽입합니다. 캘리퍼를 사용하여 장치의 이미지를 측정합니다. 픽셀 수가 아니라 크기가 중요합니다.

예외

화상 키보드, 하이퍼링크 컨트롤 등의 일부 컨트롤은 알고리즘을 사용하여 터치 정확도를 향상시킵니다.

키보드, 하이퍼링크 목록 등의 예외에는 더 나은 적중 대상을 사용할 수 있도록 적중 대상 크기 조정 알고리즘 또는 확대/축소와 같은 수정 메커니즘이 있어야 합니다. 대체로 대상의 높이가 너비보다 더 중요하지만 몇 가지 예외도 있습니다. 예를 들어 가상 키보드의 키에서는 너비가 대상 취득에 영향을 줄 수 있습니다. 적어도 하나의 치수에서는 대상 크기가 적절해야 합니다.

UX_Interactions_SoftKeyboard

소프트 키보드

다른 방법이 모두 실패하면 작은 적중 대상 주위에 인접한 적중 대상이 너무 많지 않도록 합니다.

UX_Interactions_AdjacentHitTargets

인접한 적중 대상이 너무 많음

인쇄 요소의 크기와 배치는 화면 레이아웃을 구성하는 데 중요합니다. Windows Phone 시각적 스타일의 기초는 크롬 요소가 없다는 것이며, 따라서 Windows Phone 에서는 텍스트와 한글 입력 체계가 다른 Microsoft 플랫폼에서보다 더 중요합니다. Windows Phone 의 최소 글꼴 크기는 15포인트입니다.

팁팁:

글꼴 레이블과 프롬프트를 읽기 쉽고 적절한 간격이 있도록 설정합니다. Windows Phone 의 최소 글꼴 크기는 15포인트입니다.

핵심 요소는 대체로 테두리, 프레임 등의 추가 요소를 사용하여 콘텐츠 레이아웃을 만듭니다. 사용자가 기본 및 보조 작업을 쉽게 식별할 수 있도록 다른 글꼴 크기, 색 또는 스타일을 사용하여 화면에 필요한 계층 구조를 만들어야 합니다.

사용자 지정 컨트롤 만들기

Windows Phone용 컨트롤 디자인 지침 섹션을 검토하여 페이지의 고유 사용자 지정 컨트롤을 만들기 전에 앱 콘텐츠를 맞추거나 표시할 방식을 고려합니다.

기능, 작업 또는 작동을 완료하거나 이해하는 데 도움이 되는 경우에만 사용자 지정 컨트롤을 만들어야 합니다.

시스템 표준 컨트롤을 사용자 지정 컨트롤 작업의 패러다임으로 사용합니다. 예를 들어 버튼, 확인란 및 기타 컨트롤로 작동하는 그래픽 요소를 사용합니다. 콘텐츠를 보는 동안 컨트롤을 사용하려는 경우 개별 요소로 만듭니다. 전체 화면을 보는 동안 컨트롤이 페이드 아웃되어야 합니다.

Windows Phone 플랫폼 전체에서 일관성 있는 환경을 제공하려면 버튼을 배치하는 동안 일반적인 구조를 따르는 것이 중요합니다. 이렇게 하면 사용자에게 일관성 있고 간단한 탐색 구조가 제공됩니다.

또한 하드웨어와 소프트웨어가 무료로 제공하는 항목을 이해하는 것이 중요합니다. 초보자를 위해 모든 Windows Phone 에는 세 개의 하드웨어 버튼인 뒤로, 시작 및 검색이 있습니다. 시스템 전체에서 이러한 버튼이 사용되는 방식을 이해하면 앱의 UI와 흐름 내에서 문제를 방지할 수 있습니다.

홈 버튼 및 후방 스택

사용자 인터페이스에 홈 버튼을 배치하면 Windows Phone 탐색 모델을 벗어나게 됩니다. 플랫폼의 독창적인 시도가 반드시 나쁘지는 않지만 플랫폼의 예상 상호 작용 모델을 변경할 경우 사용자에게 혼동을 줄 수 있습니다.

앱에 홈 버튼을 구현하면 앱에 훨씬 더 심각한 영향을 주는 두 번째 문제가 발생할 수도 있습니다. 홈 버튼과 하드웨어 뒤로 버튼을 모두 사용하여 탐색하는 경우 사용자가 무기한(또는 무기한에 가까운) 루프에 잠기는 시나리오가 실수로 생성될 수도 있습니다. 뒤로 버튼을 사용하여 앱을 통해 한 앱에서 다른 앱으로 이동하는 경우 이 루프가 더 심해질 수도 있습니다. 이러한 문제가 앱에 영향을 주지 않도록 합니다.

UX_Interactions_BasicBack

기본 뒤로 버튼

모든 앱에는 다른 대화형 흐름이 있으며 일부 흐름은 다른 흐름보다 더 복잡합니다. 하지만 앱의 아키텍처를 가능한 한 얕게 유지하고 사용자가 몇 단계만으로 랜딩 화면으로 돌아가고 여기서 다시 이전에 시작한 앱으로 돌아갈 수 있도록 목록과 피벗을 사용합니다.

뒤로 및 닫기 버튼

앱 UI에 뒤로 또는 닫기 버튼이 없어야 합니다. Windows Phone 은 개발자가 앱 탐색을 명확하고 간단하게 유지할 수 있도록 모든 장치에 물리적 뒤로 버튼을 제공합니다.

부동 버튼

부동 버튼은 Windows Phone 앱에서 일관성 없고 혼동스러운 탐색을 야기시킵니다. 특정 페이지에 작업을 추가할 때는 앱 바를 사용하는 것이 최상의 방법입니다. 앱 바에 대한 자세한 내용은 Windows Phone의 필수 그래픽, 시각적 표시기 및 알림을 참조하세요.

UX_Interactions_FloatingButtons

부동 버튼

앱 바에 모든 아이콘을 배치할 수 없는 경우 UI에 일관성 있게 배치해야 합니다. 가변 배치는 콘텐츠 검색을 방해할 수 있으며, 임의로 배치된 아이콘은 사용자에게 대화형 요소처럼 보이지 않을 수도 있습니다.

Windows Phone 의 일반 컨트롤 라이브러리는 UI에서 아이콘과 버튼을 구현하는 일관성 있는 방법을 제공합니다. Windows Phone용 디자인 리소스에 제안된 레이아웃 아이디어에 따라 플랫폼 전체에서 공통된 상호 작용을 구현합니다.

검색은 모든 Windows Phone 의 하드웨어와 소프트웨어에 기본 제공됩니다. 하드웨어 검색 버튼의 동작을 수정하거나 변경할 수 없습니다. 버튼을 누르면 항상 사용자가 장치의 임의 위치에서 콘텐츠를 찾을 수 있는 Bing 검색 환경이 시작됩니다.

Outlook 등의 선택한 시스템 앱에서 하드웨어 검색 버튼을 누르면 앱 내 검색이 시작됩니다.

앱 내 검색을 복제할 수 없지만 SearchTask 클래스를 사용하여 앱 내 검색 버튼을 모방할 수 있습니다.

Windows Phone OS에서 앱 설정은 앱 자체 내에서 구현됩니다. 시스템과 시스템 앱 설정 안에 앱 설정을 배치할 수 없습니다.

팁팁:

시스템 설정 옵션을 알아야 하며 다양한 사용자 설정이 UI 또는 앱 동작에 미칠 수 있는 영향을 고려해야 합니다. 예를 들어 웹 서비스에 연결된 앱을 만들 때는 사용자가 휴대폰을 비행기 모드로 전환할 때의 앱 동작을 고려해야 합니다.

사용자가 선택할 수 있는 여러 설정이 있는 앱의 경우 개발자가 앱 내에 설정 페이지를 만들고 시스템 및 시스템 앱 설정의 레이아웃과 동작에 대해 모델링해야 합니다.

UX_Interactions_SystemSettings

시스템 설정 페이지를 따라 앱 페이지를 모델링합니다.

앱 설정에 대한 변경 사항은 즉시 구현되어야 합니다. 따라서 완료, 확인 또는 기타 확인 대화 상자가 필요 없습니다. 즉시 변경된 경우에도 진행 중인 이벤트가 완료되거나 이후 이벤트가 발생할 때까지 변경되었다는 피드백을 사용자가 받지 못할 수도 있습니다. 피드백 제공에 대한 자세한 내용은 Windows Phone의 애니메이션, 동작 및 출력을 참조하세요.

앱 설정을 간단하고 명확하게 유지하는 것이 디자인 목표여야 합니다. 복잡한 다중 페이지 다단계 앱 설정은 사용자를 지치게 하거나 완전히 다른 앱으로 전환되었다는 오해를 일으킬 수 있습니다.

확인 대화 상자 없이 사용자가 선택한 앱을 즉시 구현하고 변경이 발생했음을 나타내는 피드백 방법을 제공합니다.

중요중요:

세 페이지 이상인 앱 설정을 만들지 않도록 합니다.

또한 다음 사항에 주의합니다.

  • 여러 화면이 필요한 설정은 오버레이되는 절반 화면을 사용하여 SIP 키보드를 표시할 때 컨텍스트가 손실되지 않도록 해야 합니다.

  • 작업을 실행 취소할 수 없는 경우 항상 사용자에게 취소 옵션을 제공합니다. 예를 들어 텍스트 입력이 있습니다.

  • 데이터를 덮어쓰거나 삭제하는 동작에 대한 취소 버튼을 제공합니다.

  • 커밋취소 버튼이 포함된 추가 화면을 사용하려는 경우 이러한 버튼을 클릭했을 때 연관된 동작을 수행하고 사용자가 기본 설정 화면으로 돌아가야 합니다.

  • 네트워크를 통해 데이터를 가져오는 앱에서 데이터 사용을 비활성화하는 옵션을 제공합니다.

설정 제어판의 제목을 일관되게 유지하려면 설정 페이지의 제목이 다음과 같이 표시되어야 합니다.

응용프로그램 설정

<CPL 이름/응용프로그램 이름>

다음은 Windows Phone 에서 최소 광고 품질을 유지하기 위한 기본 지침입니다. 이러한 지침을 검토할 때 광고가 Windows Phone 디자인 원칙과 일관되어야 함을 염두에 두어야 합니다.

표시할 광고가 없는 경우 AdControl이 자동으로 숨겨집니다. 이러한 경우를 고려하고 사용 가능한 공간을 회수할 코드를 Windows Phone 앱에 포함합니다.

권장 광고 단위 크기

AdControl의 기본 권장 크기는 480 x 80 픽셀입니다. 이 크기는 Windows Phone 의 권장 광고 크기입니다.

pubCenter 에서 형식 크기 300 x 50 픽셀을 사용하여 광고 단위를 만든 경우에도 더 나은 사용자 환경을 위해 AdControl 크기를 480 x 80으로 설정합니다. 작은 광고 단위 형식은 이 공간의 중심에 배치되며, pubCenter에 설정된 광고 단위 크기를 사용하여 AdControl 내에서 렌더링됩니다. 예를 들어 300 x 50 픽셀은 300 x50 픽셀로 표시되고 광고 단위의 중심이 AdControl의 중심에 있습니다. 이 구성은 다음 그림을 참조하세요.

UX_Interactions_Ad_Centered

중심에 배치된 AdControl

팁팁:

300 x 50 픽셀 AdControl 크기는 이전 버전과의 호환성을 유지하기 위해 포함되었습니다. 이후에는 사용되지 않을 수도 있습니다. 이후에 광고 단위를 수정할 필요가 없도록 표준 AdControl 크기인 480 x 80 픽셀로 새 광고를 만드는 것이 좋습니다.

광고 위치

화면의 맨 위나 맨 아래에 AdControl을 배치합니다. 권장 위치는 지정된 뷰의 맨 위 도는 맨 아래입니다.

UX_Interactions_Ad_FullSized

전체 크기 AdControl

스크롤 뷰어

스크롤 뷰어 안에 포함된 광고는 사용자가 콘텐츠를 스크롤할 때 페이지에 나타나거나 사라집니다. 사용자가 스크롤할 때 광고를 고정 상태로 유지하려면 스크롤 뷰어 외부에 AdControl을 배치합니다. 화면의 맨 위나 맨 아래에 스크롤 뷰어를 배치합니다.

Panorama 컨트롤과 함께 광고 사용

Panorama 컨트롤 내부에 포함된 광고는 Panorama 컨트롤의 다음 페이지까지 가로로 스크롤할 때 뷰에 표시되지 않습니다. 모든 페이지에 광고를 유지하려면 다음 왼쪽 그림과 같이 Panorama 컨트롤 외부에 AdControl을 배치합니다. 각 파노라마 페이지에 다른 광고를 표시하려면 다음 오른쪽 그림과 같이 각 파노라마 페이지에 각 개별 광고에 대한 새 AdControl 인스턴스를 만듭니다.

UX_Interactions_Ad_Panorama

Panorama 컨트롤의 광고

Pivot 컨트롤과 함께 광고 사용

Pivot 컨트롤 내부에 포함된 광고는 Pivot 컨트롤의 다음 페이지까지 가로로 스크롤할 때 뷰에 표시되지 않습니다. 모든 페이지에 광고를 유지하려면 다음 왼쪽 그림과 같이 Pivot 컨트롤 외부에 AdControl을 배치합니다.

각 피벗 페이지에 다른 광고를 표시하려면 다음 오른쪽 그림과 같이 각 피벗 페이지에 새 AdControl 인스턴스를 만듭니다.

UX_Interactions_Ad_Pivot

Pivot 컨트롤의 광고

컬러

시스템 테마 컬러를 사용합니다. 테마 컬러를 변경하는 경우 AdControl 테두리와 텍스트를 쉽게 읽을 수 있도록 색을 선택합니다.

표시:
© 2015 Microsoft