슬라이더 디자인:엄지의 법칙
여러분은 슬라이더를 디자인할 때 엄지를 얼마나 신경 쓰나요?
본 글은 닐슨 노먼 그룹의 <Slider Design: Rules of Thumb>를 바탕으로 구성했습니다.
요약
슬라이더로 정확한 값을 선택하기는 어렵다. 정확한 값이 중요한 경우 다른 ui 요소를 선택해야 한다.
[부정확한 상호작용]
인터페이스가 사용될 환경을 고려해야 한다.
모바일 사용자는 한 손으로 핸드폰을 할 경우가 많아서 정확한 드래그가 어렵다.
ui 요소의 접근성을 고려해야 한다.
장애가 있거나 나이가 많은 사람들은 손이 덜 안정적이라 정확한 드래그가 어렵다.
[정확한 값이 필요한가]
슬라이더는 대략적인 값만 필요할 때 유용하다. 나이, 체중, 수량 등을 입력할 때는 적절하지 않다.
슬라이더로 선택할 범위가 넓거나 촘촘할수록 정확한 선택이 어렵다. 별점을 주는 앱을 만들 때는 소수점, 슬라이더를 빼고 별 5개로 만드는 게 더 간단하다.
[엄지손가락에 대해 생각하기]
슬라이더를 조작하는 동안 화면에서 사용자의 손가락이 위치할 곳, 화면의 가려질 곳을 고려해라.
이 슬라이더는 엄지손가락이 슬라이더를 움직이면 숫자 값이 가려지기 때문에 좋지 않다.
결론
대략적인 범위에만 슬라이더를 사용하라.
사용자가 애쓰지 않아도 원하는 범위를 설정할 수 있는지 확인하라.
슬라이더의 값은 아래가 아니라 위, 옆에 표시되어야 한다.
탭, 입력할 수 있는 다른 UI를 고려해라.
1. 셀렉트샵 29cm의 가격대 슬라이더
가격대의 최소~최대 폭이 너무 크기 때문에 값을 조절하는 것이 매우 힘들다. 숫자 값은 위에 나타나 있어서 보기에 편리하다.
2. 무신사의 가격대 ui
슬라이더 디자인이 아니라 결론에서 말한 값을 입력할 수 있는 ui이다.
3. 에이블리의 가격대 슬라이더
상대적으로 저렴한 제품들이 많아서 그런지 가격대의 폭이 좁다. 그래서 29cm의 슬라이더보다 움직임이 수월하다. 또한 슬라이더에 어느 가격대의 제품이 가장 많이 분포되어 있는지 나타낸다.
작성자: 장유정
슬라이더에도 많은 고민이 필요하다는 것을 간과하고 있었다. 지금까지 29cm를 쓰면서 불편하다고 생각했지만, 그 이유를 정확히 알지는 못하고 있었다. 최대한 슬라이더를 대체할 수 있는 UI를 사용해야겠다.
<관련 글>
