page title
범위 슬라이더는 사용자가 연속된 옵션 범위에서 값을 선택할 수 있도록 하는 경우 사용한다. 사용자가 선택한 값은 선택하는 동안 계속 보이도록 표시하여야 한다.
구조
- 1.레이블 사용자가 어떤 값을 선택해야 하는지를 안내하는 문구
- 2.슬라이더(Slider) 핸들의 이동 경로를 보여주는 영역
- 3.핸들(Handle) 정해진 범위 내 값을 선택하는 선택자로, 슬라이더를 따라 좌/우로 이동함
- 4.선택 값현재 선택된 값을 표시하는 텍스트
- 5.범위 값슬라이더의 최소 값과 최대 값
용례
사용하기 적합한 경우
-
범위가 정확도 보다 더 중요한 경우
- 선택하여야 하는 값이 특정 범위 내에서 선택해야 한다고 알려주는 것이 더 중요한 경우
-
상대적인 값이 정확한 값보다 더 중요한 경우
- 볼륨이나 해상도 밝기 설정 처럼 정확한 특정 값 보다 상대적 값 지정에 중점을 둔 경우
-
적합한 예)
- 볼륨 설정, 해상도 설정, 선호도 조사, 모드 설정, 글자크기설정, 숫자지정 등
사용하기 적합하지 않은 경우
-
정확한 값이 중요한 경우
- 사용자가 특정한 수치나 단위를 입력해야 하는 경우
-
사용자가 세밀한 조정보다는 빠른 성택을 원할 경우
- 세밀한 조정보다는 ‘ON/OFF’, “낮음/보통/높음’처럼 명확한 단일 선택이 효율적인 경우
사용성 가이드라인
모든 범위 슬라이더에 레이블 제공한다.
범위 슬라이더에 레이블이 제공되지 않으면 사용자는 어떤 값을 선택해야 하는지 알 수 없다. 레이블을 생략하고자 하는 경우에는 레이블이 없어도 사용자가 값을 선택하는 데 문제가 없다는 근거가 명확해야 한다,
사용자의 선택 값은 항상 인지할 수 있는 곳에 표기 한다.
사용자가 핸들을 이용하여 선택한 선택 값은 핸들의 위 또는 슬라이더의 끝에 배치하여 항상 사용자가 인지할 수 있게 표기하여야 한다. 플랫폼의 특성상 손가락을 이용하여 값을 선택하기 때문에 선택 값을 하단에 배치하여서는 안 된다.
모범 사례
피해야 할 사례
핸들을 드래그할 수 있어야 한다.
사용자가 슬라이더 위의 핸들을 드래그하거나, 슬라이더 자체의 특정 위치를 선택하여 값을 변경할 수 있어야 한다.
범위 정보를 표시하여야 한다.
사용자에게 슬라이더 선택 값의 최소값과 최대값에 대한 정보를 제공하여야 한다
선택 값을 너무 세밀하게 설정하지 않는다.
범위 슬라이더에서는 상대적인 값이 구체적인 값보다 중요하므로 단계 속성을 너무 세밀하게 설정하지 않는다. 단계 값이너무 세밀한 경우, 사용자에게 인지적 부담을 줄 수 있으며 단계는 전체 범위의 10%~20%로 설정하는 것이 적정하다.
모범 사례
피해야 할 사례
정보 변경 내역
| 변경일자 | 변경 내용 | 리소스 |
|---|---|---|
| 2025년 1월 15일 |
|