7.슬라이더,노브 그리고 매트릭스트를 사용한 값 조정
[1]인풋컨트롤
수치를 조절 하기 위해서 흔하게 값을 조절하는 인풋 컨트롤러로 텍스트 필드, 슬라이더, 가상의 노브 그리고 2D 매트릭스 (커브를 조정하여 조절), 스태퍼 에서 값을 올리거나 내리는 수 있는 것들이 있다. 각각의 컨트롤들은 다른 환경과 전달해야하는 정보에 따라서 알맞게 적용되어야한다.
컨트롤러와 데이터의 타입에 따라 자연스러운 인풋컨트롤러가 적용되어야한다. 예를 들어 노브 UI를 적용한다면 노브의 각도를 조정하는 만큼 값이 변화되도록 일치시키는 것이다.
많은 앱과 웹사이트에서는 특히 창의적인 것을 추구(디자인 프로그램, 비디오 에디팅 툴 등)하거나 데이터 분석의 경우 특정한 값으로 세밀하게 조정할 수 있는 매개변수들이 많다. 복잡한 연속 매개변수들은 두가지 사이의 밸런스안에서 세팅되어야한다.
- 탐색성 : 사용자가 쉽게 컨틀롤러의 전체 범위값을 조절한 효과를 보여준다
- 세밀함 : 사용자가 세밀하게 특정 값을 선택 할 수 있도록 한다
개별조정 vs 연속값조정
- 개별 조정 : 개별 조정이란 제한된 숫자단계 또는 옵션이 제공되어 조정하는 것이다. 예를 들어 아래 이미지 킨들의 맥디바이스 폰트 사이즈 컨트롤러 킨들의 화면 조정 기능을 보면 12개의 세팅된 단계별 값을 슬라이더로 조정 할 수 있고 각 단계는 슬라이더 밑에 마커로 표시되어있다.
- 연속값 조정 : 최소 최대값 사이에서 값을 선택 할 수 있는 컨트롤러이다. 슬라이더 또는 노브로 디자인 되어있으며 예를 들어 아래 킨들의 화면 조정 기능을 보면 화면 밝기의 경우 구간안에서 조정 할 수 있다.
엄격하게 이야기하면 슬라이더 중에 1-100단계의 정수 (숫자)로 조정되는 것이 있다면 이것은 개별조정이라고 할 수 있다. 정수는 1,2,3,4,5... 연속값이 아니기 때문이다. 슬라이더는 보통 연속값을 조정하는 컨트롤러이기 때문에 몇개의 옵션을 조정하는 것으로 적합하지 않다.
노출을 조정하는 UI 컨트롤러들
-선형 슬라이더 : 선형슬라이더는 최소 최대값이 있는 정해진 구간의 값을 조정하는데에 기본적인 컨트롤러이다. 사용자는 선형슬라이더로 조정할 때 정확한 값으로 조정되기를 바라지는 않을 것이다. 세밀한 값을 슬라이더로 조정하는 것은 어렵기 때문에 대략적인 값을 조정하는데 적합하다. (Accot-Zhai Steering Law : 좁고 긴 터널을 통과하는데 더 많은 시간이 소요된다.HCI 원칙에서는 사용자가 2D 터널 = 슬라이더 을 조정하는 데 소요되는 시간은 슬라이더의 길이와 폭에 영향을 받는다라고 정의한다.) 대부분의 슬라이더들은 좁기 때문에 그래서 사용자는 정확한 지점을 찍는데 어려움을 겪는다.
슬라이더는 사용자가 실시간으로 적용되는 반응을 보며 조정하는데 효과적이다.만약에 실시간 반응이 반영되지 않고 사용자의 행동과 효과 적용에 지연이 생긴다면 이것은 좋은 선택이 아니다. standard response-time guidelines 에 따르면 사용자가 실시간으로 느끼는데 걸리는 시간은 0.1초이하이다. 예를 들어서 슬라이더가 비디오 이팩트 조정같이 복잡한 조작을 요구하는 곳에 적용된다면 렌더하는 시간 때문에 실시간으로 반영되지 않고 로딩하는 시간이 걸리므로 좋은 선택이라고 할 수 없다.
슬라이더의 변형된 모양으로는 양 끝에 컨트롤러가 있는 것으로 양옆으로 최소와 최대값을 고를 수 있는 것이다. 이 변형된 슬라이더는 웹사이트에서 필터링하는 컨틀로러로 자주 적용되며 사용자들은 최소, 최대 가격의 구간을 지정하거나 비행시간의 구간 설정 등을 할 수 있다. 일반적인 슬라이더와 마찬가지로 미세한 값을 조정하는데는 어렵기 때문에 특정 환경에만 적용이 된다.
아래의 카약 항공권 조회 사이트의 필터처럼 히스토그램 바 그래프와 함께 적용되는 경우 듀얼 컨트롤러 슬라이더는 사용자가 선택한 구간에 매칭되는 자료와 옵션이 얼마나 있는지 보여줄 수 있다. 이렇게 히스토그램과 함께 보여주면 필터링하면서 결과값이 노출되지 않는 것을 방지한다.
가상 노브
가상 노브의 경우 사용자가 반드시 '돌려서'사용해야하는 것으로 자연스럽게 값이 조정됨을 표현한다. 오디오 엔지니어가 소리를 왼쪽에서 오른쪽 스피커로 이동시켜야 할때 또는 오디오를 믹싱해야 할때 적용되는 컨트롤러를 떠올리면 된다. 그러나 가상 노브는 물리적인 제한이 있는데 마우스나 트랙패드같은 일반적인 입력 장치로 조작하는데 어려움이 있다. 회전시키는 어포던스가 마우스와 트랙패드에 없기 때문이다. 간혹 어떤 노브 디자인은 숨겨진 드래그 방법으로 사용자가 클릭하여 드래그를 위 아래로 수직선형으로 하게되면 값이 증가하고 감소할 수 있도록 지원하기도 한다. 그러나 이런 행동을 할 수 있다고 기대되지 않고 이렇게 해야한다고 표기되어 있지 않기 때문에 많은 사용자들은 숨겨진 드래그 노브 조작 방법을 알아챌 수 없다. 덧붙여 대충 적용 경우에는 노브를 마우스로 원형으로 드래그해서 돌리게 하는 것인데 원형으로 드래깅을 한다는 것은 어렵다.
2D 매트릭스
2D매트릭스는 동시에 다양한 값을 조정해야할때 복잡한 커브를 그리며 사용되는 컨트롤러로 특화되어있다. 이 컨트롤러는 전형적으로 존재하는 선 또는 커브에 브레이크포인트를 클릭함으로 추가하는 상호작용으로 조작 할 수 있다. 한개의 새로운 분기점을 추가하고 분기점을 드래그하여 옮겨 선 또는 커브를 그릴 수 있다.이런 타입의 컨트롤은 사용자가 상호 영향을 미치는 두개의 값을 가진 것을 조정 할때, 전형적으로 두개의 값이 함께 변경되는 조정 할때 (예를 들어 사진 또는 비디오 편집앱에서 휘도 또는 RGB 커브) 또는 2D 영역에서 위치 또는 경로를 나타내야하는 경우(예를 들어 서라운드 사운드 또는 필름)에 유용하다
대략적인 값과 세밀한 값을 조정하는 링크 컨트롤들
정밀한 값을 조정하는 가장 간단한 방법은 텍스트 인풋 박스를 사용해서 사용자가 정확한 값을 입력하도록 하는 것이다. 그러나 이 해결책은 정확한 값을 입력하도록 하게 할 수는 있지만 사용자가 효율적으로 조절 할 수 있는 범위의 값들을 탐색할수는 없다. 만약에 당신이 미리 값을 알고 있다면 타이핑하면 되지만 만약 당신이 어떤 숫자를 입력해야 원하는 값을 얻을 수 있는지 모른다면 아무 값이나 넣고 원하는 결과나오는지 랜덤하게 추측해야하고 추가로 스탭퍼 버튼이 있어서 값을 올리고 내릴 수 있더라도 비효율적이다. 더 나아가 텍스트 박스는 입력가능한 범위의 값을 보여주지 않는다 (예를 들어 RGB컬러는 0-255까지 입력이 가능하지만 새로운 사용자에게는 원하는 색을 만들기 위해 숫자를 입력하는 것이 직관적이지 않다. )
이 문제를 해결하는 전형적인 방법은 각각 링크 컨트롤을 같은 값을 조정할 수 있도록 사용하는 것이다. 링크 컨트롤은 두개이거나 더 많을 수도 있는 조작방법으로 하나의 값을 조정할 수 있다. 전형적으로 연속적인 컨트롤러 예를 들어 슬라이더를 이용하는 것은 거친 입력값을 조정 할 수 있고 조정 할 수 있는 값의 범위를 쉽게 탐색 할 수 있다. 원하는 값을 찾을 수 있도록 대략적으로 조정해볼 수 있다. 세밀한 컨트롤은 숙련된 사용자들이 이미 정확한 값을 알고 적용하고 싶을때 사용할 수 있다. 지금 보여지고 있는 값이 얼마인지 숫자로 표기되고 정확한 숫자를 입력해서 값을 조정 할 수 있다.
이 두개의 연결된 컨트롤은 같은 값으로 표시되고 한개를 조정하면 그에 따라서 다른 값도 함께 따라 조정되어야하기 때문에 계속해서 연결되어 있어야만 한다. 함께 동작하는 것은 0.1초 이하의 시간으로 조정됨을 의미한다.
키보드는 연결된 컨트롤에 포커싱되어야한다.
연결된 컨트롤을 쉽게 사용 할 수 있도록 만들려면 사용자가 대략적인 값을 슬라이더로 조정하며 탐색할 때 키보드 포커싱은 텍스트박스에 위치해야한다. 이렇게 포커싱 되어 있으면 더 쉽게 원하는 값이 얼마인지 알고 텍스트 필드에 그 값을 입력 할 수 있게된다. 이렇게 포커싱 되어있다면 마우스로 텍스트박스를 클릭하고 다시 슬라이더를 클릭하는 등의 비효율적으로 조작하는 시간을 줄일 수 있게된다.
값을 조정하기 위한 기본 값
좋은 기본 값은 중요하다. 사용자의 시간과 노력을 절약할 수 있을 뿐만 아니라 초기사용자에게 가이드 값으로 제공되기도 한다. 전형적인 기본값은 중립의 상태를 나타내는 것으로 적용된다 예를 들어 줌 슬라이더의 경우 기본값은 100%로 설정되어 있고 슬라이더가 중간에 위치하게된다. 그리고 예를 들어 리셋버튼 처럼 기본값으로 돌아갈 수 있는 쉬운 방법을 제공한다. 이런 리셋 버튼 같은 것은 특히 중립값이 중간에 위치하는 경우라면 더욱 유용하다. 리셋버튼이 없다면 기본값으로 돌아가기위해 중간위치에 다시 두는 것이 번거롭기 때문이다. 또는 기본값의 범위가 0-100부터 시작하는게 아닌 경우, 초기 사용자가 기본값을 알기 어려운 경우 리셋버튼 처럼 기본값으로 돌아갈수있는 버튼이 추가되어야한다. 또 다른 도움이 되는 기본값을 나타내는 요소로는 시각적으로 기본값을 표시해두는 것이다. 예를 들어 작은 틱표시 또는 해시마크를 슬라이더 위에 넣어 기본값의 위치를 볼 수 있도록 적용한다.
결론
값을 세밀하게 조정하는데에는 적합한 컨트롤러가 필요하다. 컨트롤들은 어떻게 사용되어야하는지, 적합한 값의 범위에 대한 정보가 전달되어야한다. 컨트롤은 쉽게 조작 가능한 범위의 값이 무엇인지 탐색 할수 있도록 그리고 정확한 값을 입력 할 수 있도록 제공되어야만 한다. 사용자들에게 연결된 컨트롤로 대략적인 값과 세밀한 값을 조정 할 수 있도록 제공해라. 좋은 기본값을 적용하고 사용자가 대략적인 값을 조정 하고 있을 때 키보드 포커싱을 제공하여 세밀한 값을 조정 할 수 있게한다.
*저는 전문 번역가가 아니기 때문에 정확한 정보는 아래 원문을 참고하세요*
https://www.nngroup.com/articles/sliders-knobs/
https://www.nngroup.com/articles/design-pattern-guidelines/#Input%20Controls
