슬라이더 UI는 언제 사용해야 하는가?
슬라이더 UI는 유용성과 효율성에 관한 것입니다.
한 줄 요약: 슬라이더 컨트롤은 볼륨, 밝기처럼 정성적인 설정을 조정하는 데 유용하며 수량이나 값이 정확할 필요가 없는 경우 사용자에게 효율적인 구성 요소가 될 수 있다.
슬라이더는 페이지의 인지 부하를 줄이는 재미있는 방법이 될 수 있습니다. 하지만 무엇이 좋은 슬라이더를 만드는 걸까요? 이번 포스팅에서 알아보세요!
슬라이더는 많은 사용자 인터페이스에서 환영받습니다. 일반 인풋 필드를 이길 수 없을 때가 있더라도 슬라이더에는 정말 역동적인 것이 있습니다. 수년에 걸쳐 사용자는 특정 상황에서 슬라이더를 보는 데 점점 익숙해졌습니다.
UI 디자인에서 슬라이더란 무엇인가?
슬라이더는 아날로그 라디오의 튜닝 또는 볼륨 조절 다이얼을 나타내는 UI 구성 요소입니다. 사용자는 직선 트랙을 따라 손잡이, 핸들 또는 바를 왼쪽에서 오른쪽으로 또는 그 반대로 슬라이드할 수 있습니다. UI 슬라이더는 사용자가 다양한 옵션이나 값을 빠르고 동시에 탐색할 수 있도록 하는 데 유용합니다. 무엇보다도 수량이나 값이 정확할 필요가 없는 경우 사용자에게 실용적인 구성 요소입니다.
UI 슬라이더 디자인은 사용자가 다양한 값을 선택하거나 밝기나 볼륨과 같은 설정을 조정하는 데 도움이 됩니다. Youtube, Vimeo, Netflix 등에서 볼 수 있는 일반적인 비디오 재생 컨트롤에서 영감을 얻었지만 스타일은 다양합니다.
슬라이더는 단일 또는 이중 포인트(이중 슬라이더)일 수 있으며, 이중 슬라이더는 가격 또는 예산 범위 선택기에서 자주 볼 수 있습니다. 이동 측면에서 보면 빠르게 움직일 수도 있고 연속적으로 움직일 수도 있습니다. 즉, 트랙을 따라 다른 지점에 맞춰지거나 부드럽게 미끄러질 수 있습니다.
슬라이더 UI 디자인은 유용성과 효율성에 관한 것입니다. 또한 실용적인 구성 요소일 뿐만 아니라 시각적으로 더욱 매력적인 상호작용 방식을 제공하여 사용자가 웹 사이트나 앱에서 목표를 달성할 수 있도록 합니다.
상호작용은 사용자의 참여를 유지하는 데 도움이 되며, 입력 필드에 고정된 값을 입력하는 대신 값 범위를 사용하여 작업할 수 있다는 사실은 인지 부하가 감소함을 의미합니다.
하지만 사용자가 값을 선택할 수 있도록 하는 데 있어 UI 슬라이더 디자인이 항상 올바른 솔루션은 아닙니다. 올바르게 사용하면 많은 이점을 얻을 수 있지만, 잘못 사용하면 디자인이 손상될 수 있습니다.
UI에서 슬라이더를 사용하는 경우
가장 궁금한 점은 슬라이더 UI를 언제 사용할 것인가입니다. 먼저 UI 슬라이더 디자인의 주요 목표인 '상호작용성을 향상시키면서 사용자가 최대한 빠르고 쉽게 작업을 완료할 수 있도록 돕는 것'에 초점을 맞추어봅시다.
그렇다면 슬라이더로 어떤 작업이 가장 잘 작동할까요? 슬라이더는 단순한 볼륨 조절 이상의 다양한 작업을 수행할 수 있습니다. 이는 사용자가 사소한 핵심 세부 사항을 입력하지 않고도 검색 범위를 좁히는 것을 도와주는 편리한 방법이 될 수 있습니다. 예를 들어, 모기지 계약금의 가격 범위나 전자 가전기기 품목의 크기를 선택할 수 있는 슬라이더 컨트롤을 접했을 수 있습니다.
슬라이더 UI 디자인을 사용하려는 경우는 다음과 같습니다.
많은 옵션을 제시할 때
사용자가 다양한 옵션을 신속하게 탐색할 수 있도록 하기 위해
값이 정확할 필요가 없는 경우
옵션을 설명하기 위해
확대 또는 축소하기 위해
볼륨을 조절하기 위해
밝기, 대비 및 채도/투명도 제어를 조정하기 위해
3D 오브젝트를 회전하기 위해
일련의 옵션을 탐색할 때
마지막으로, 대체 UI 디자인 요소를 쉽게 사용할 수 있는 디자인에서는 슬라이더 UI 컨트롤을 사용하지 마십시오. 예를 들어, 사용자가 옵션 목록에서 선택할 수 있도록 해야 한다고 가정해 보겠습니다. 가능하고 공간이 있다면 처음부터 사용 가능한 모든 옵션을 표시하는 것이 항상 모범 사례입니다.
사용자가 표준에서 특급까지 네 가지 옵션 중에서 선택해야 하는 배송 사양을 생각해 보세요. 대부분의 고전적인 슬라이더 디자인에서는 사용자가 사용 가능한 모든 옵션을 즉시 볼 수 없기 때문에 이것이 슬라이더를 잘 사용하는지 여부에 대해 약간의 논쟁이 있습니다. 여기서 더 나은 대안은 간단한 라디오 버튼 디자인 입니다 .
슬라이더 UI는 다양한 적용 예시가 포함된 다용도 컨트롤이지만 완벽한 용도를 찾는 것은 말처럼 쉽지 않습니다. 결국 슬라이더는 디자인 세계에서 논란의 여지가 있는 구성 요소인 경향이 있습니다. 작업에 사용할 수 있는 기회는 토글 스위치, 드롭다운 및 라디오 버튼과 같이 풍부하지 않습니다. 잘못된 상황에서 슬라이더 UI를 적용하면 디지털 제품의 UX가 파괴될 수 있습니다. 하지만 올바르게 설정하면 정말로 향상시킬 수 있습니다.
*다음 아티클을 번역 및 가공한 내용입니다.
https://medium.com/@justinmind/slider-design-ui-patterns-and-examples-d01cbefe8c94
