슬라이더 디자인(UX)

슬라이더 디자인. 맞게 사용하고 계시나요?

본 글은 닐슨 노먼 그룹의 <Slider Design: Rules of Thumb>를 바탕으로 구성했습니다.

---

요약

슬라이더는 사용자가 고정 옵션 집합에서 값 또는 범위를 선택할 수 있는 UI입니다. 주로 볼륨이나 화면의 밝기 등을 제어하는 시스템으로 사용되고 있으며, 정확한 값이 아닌 대략적인 범위를 표현할 때 유용하게 쓰입니다.

정확한 값이 필요한가?

슬라이드는 정확한 값을 상정하는 것에서는 유용하지 않을 수 있습니다. 예로 들면 나의 나이, 몸무게 등 정확한 값을 쓰일 때 말이죠.

슬라이드의 범위가 넓거나 밀도가 높을수록 정확한 값을 선택하기가 어렵고, 정확하고 세세한 평가를 받고 싶은 어플에서 주로 사용하는데 이는 적합하지 않습니다.   

초기 아이폰 화면 잠금 디자인

엄지손가락의 사용

슬라이드 형식을 사용할 때는 엄지손가락의 위치를 중요하게 고려해야 합니다. 터치스크린의 경우, 화면상의 손가락 위치와 모양을 고려하여야 합니다. 특히 슬라이드 아래에 라벨을 배치하게 되면 엄지에 가려져 잘 보이지 않으므로 유의해야 합니다.

터치 스크린 내에서 라벨 배치가 잘못된 예시

내 휴대폰 속 화면 밝기 조절

작성자: 김상완
아이패드 화면부터 시작해서 슬라이더는 항상 자주 쓰이는 요소입니다. 이러한 슬라이더 요인 안에서도 슬라이드를 사용하여 만드는 UI에도 사람들의 행동을 분석해야 한다는 것을 알았고 세세한 변화를 캐치해야 한다고 생각했습니다.

---

<관련 글>

슬라이더 디자인:엄지의 법칙