4. 스탭퍼 UX UI 입력 디자인 가이드라인
[1] 인풋컨트롤
타이핑을 해서 값을 입력하도록 할 수도 있지만 한정적인 모바일 화면 공간 안에서 공간을 경제적으로 사용할 수 있는 인풋 방법이 스텝퍼를 사용하는 것이다.
주로 사용되는 인풋 스탭퍼는 숫자 정보를 입력할 때 쓰인다.
가로 또는 세로형 스탭퍼가 있다.
인풋 스탭퍼는 2개의 컨트롤러가 장착된 UI로 한 개는 수를 늘리고 다른 하나는 줄이는 데 사용된다.
대부분의 인풋 스탭퍼들은 GUI를 갖지만 목소리 또는 제스처로 스탭퍼 기능을 조작할 수도 있다. 예를 들어 "소리 키워줘" "소리 줄여줘"라는 음성 명령어를 처리할 수 있는 TV에 이야기한다면 TV는 소리를 조정할 것이다. 그리고 3D 제스처 인터페이스 안에서는 당신이 손을 올리면 값이 증가하고 손을 내리면 값이 내려가는 조정을 할 수 있을 것이다.
이 말은 스탭퍼는 사용자의 액션이 어떤 특정 값을 일정 양만큼 조정하는 데 사용할 수 있는 컨트롤러라는 것이다.
숫자를 입력하는데 간편한 방법이 스탭퍼이긴 하지만 모든 케이스에 전부다 이상적으로 적용될 수 있는 것은 아니다. 스태퍼 UI의 장단점을 아래에서 설명하고 어떻게 사용하는 것이 올바른 적용법인지 알아보자
1. 인풋 스냅퍼의 장점
- 키보드가 필요 없다.
스태퍼는 디바이스 제한이 거의 없다. 예를 들어 키보드를 스마트폰에서 사용한다면 잘못 타이핑할 수도 있고 컴퓨터의 경우 어떤 컴퓨터는 키보드가 없는 경우도 있다. 요즘 무인주문 시스템을 이용해 보면 키오스크에서 주문할 때 우리는 수량을 대부분 스텝퍼를 적용해서 사용한다.
작은 조정만 해도 될 때 스텝퍼를 이용하는 것이 좋다.
-직관적인 사용
인풋 스탭퍼는 명시적인 기호이다. 더하기 요소는 오른쪽 또는 위에 위치하고 빼기 요소는 왼쪽 또는 아래에 위치한다. 이런 위치 배정은 자연스러운 은유를 담고 있는데 왼쪽에서 오른쪽으로 진행되거나 많아지면 올라가고 적어지면 내려간다는 의미를 담는다. 하지만 언어 또는 문화적인 배경에 의해 이 메타포가 반대로 적용되는 경우도 간혹 있다. 아랍 지역에서는 왼쪽에서 오른쪽이 아닌 오른쪽에서 왼쪽으로 읽히기 때문에 반대로 표시해야 한다.
-낮은 상호작용 비용
작은 숫자 같은 것을 입력할 때 스태퍼는 조금의 노력으로 쉽게 입력할 수 있는 방법이다. 예를 들어 승객 1 명 또는 2명을 선택하는 폼에서 사용자가 플러스 버튼을 누르기만 하면 되기 때문이다. 키보드 또는 슬라이더를 사용해야 한다면 숫자를 선택하고 엔터키를 눌러야 하고 다시 적으려면 delete버튼을 눌러야 해서 번거롭다.
-사용자가 정확한 값을 모를 때 상대적인 컨트롤러
스태퍼를 사용할 때 사용자는 정확한 값을 알고 있지 않아도 값을 조정할 수 있다. 사람들은 값을 올리고 싶은지 내리고 싶은지 원하는 대로 선택하면 된다. 그 값은 현재 상태에서 상대적으로 적용된다. 예를 들어 텍스트 사이즈를 웹브라우저 상에서 원하는 크기만큼 조정하고 싶다면 사람들은 그래픽 디자이너 아니기 때문에 정확한 숫자의 폰트 사이즈를 선택하기 어렵다. 정확한 폰트숫자를 입력하는 대신 스텝퍼를 이용하여 폰트 사이즈를 상대적으로 키우고 줄일 수 있다.
글씨가 너무 크거나 작으면 스탭퍼 UI와 비슷한 역할을 하는 ctrl + 또는 ctrl -를 선택해서 텍스트 사이즈를 키우거나 줄일 수 있다. (대부분의 웹사이트에서는 이런 기능을 제공한다.)
2. 인풋스태퍼의 단점
- 습득하기 어렵다.
피츠 법칙에 따르면 선택하려는 버튼이 클수록 빨리 선택할 수 있다는 것이다. 그러나 많은 인풋 스태퍼들은 대부분 작다.
예를 들어 아래 이미지를 보면 사이즈를 줄이고 늘리는 스태퍼버튼은 정말 작기 때문에 아주 조심스럽게 해당 버튼은 눌러야 한다.
- 큰 범위의 조정에는 알맞지 않다.
너무 많이 스탭퍼 UI를 눌러야 하면 짜증이 날 것이다. 스태퍼는 큰 숫자를 입력하고 조정하는 데에는 적절하지 않다. 예를 들어 사용자가 1~50 사이의 숫자를 조정해야 한다면 스태퍼 UI는 적절한 선택이 아니다. 스태퍼는 사용자가 조정할만한 범위의 숫자들이 적용되는 것이 적절하다. 만약 자주 큰 숫자범위를 조정해야 하는 것을 디자인하고 기획하다면 스탭퍼가 아닌 다른 인풋 인터페이스를 활용한다.
3. 스태퍼 디자인 가이드라인
- 스태퍼를 숫자를 입력하는 영역에 자주 사용되는 숫자 값의 범위 안에서 사용해라. 스태퍼는 자주 입력되는 숫자와 그것보다 조금 더 크거나 작은 숫자로 조정해야 하는 곳에 적용하는 것이다. 만약 자주 입력되는 숫자가 없고 그 범위가 너무 다양하다면 타이핑을 할 수 있는 숫자 키패드를 띄우는 것이 좋다. 예를 들어 나이 또는 생년월일등을 입력할 때)
- 가장 자주 입력되는 숫자를 디폴트 숫자로 선택되어있게 한다. 예를 들어 숫자 1이 항공권을 예매할 때 가장 자주 사용되는 숫자라면 이것을 기본 숫자로 입력되어 있는 상태로 다른 동작을 하도록 한다. 고급 레스토랑 예약 시스템을 만든다면 방문객 숫자에 2로 디폴트 입력값을 두는 것이 적절하다.
- 스태퍼를 연속적인 숫자를 표현하는 방법으로 사용하지 말라.
별개의 숫자를 입력하는 데 사용하는 것이 스태퍼이다. 가끔 예를 들어 거리 또는 가격 사람의 생년월일등이 스태퍼로 디자인되는 것은 잘못된 것이다. 거리의 경우 정수로 떨어지는 숫자가 아니기 때문이다. 1.23km를 스탭퍼 유아이로 선택하게 한다면 사용자를 불편하게 할 것이다.
-확실하게 어떤 부분이 스태퍼인지 보여줘야 한다. 분명하게 어떤 부분이 스탭퍼인지 알려줘야 한다. 예를 들어서 만약 스태퍼 컨트롤러가 시간과 날짜를 변경하게 하는 곳에 위치한다면 어떤 컨트롤러가 시간이고 날짜인지 분명하게 표시해줘야 한다. 사용자가 날짜를 조정하고 있는지 시간을 조정하고 있는지 알고 조정할 수 있어야 하기 때문이다.
- 큰 버튼을 사용해라. + - 또는 < > 버튼을 선택할 수 있는 크기로 크게 적절하게 디자인해야 한다. 마우스로 조작할 수 있는 것이라고 해서 너무 작게 디자인하지 않아야 한다.
가로형 스태퍼 UI가 세로형보다 사용하기에 더 낫다. 만약 세로형으로 디자인하게 된다면 공간을 조금 더 키워서 증가, 감소 버튼을 분명하게 두어야 한다.
우리는 가로형으로 스태퍼 UI를 모바일에 적용하는 것을 추천한다.
- + - 또는 업 다운 버튼을 시각화해라. 가로형 스태퍼의 경우 더하기 빼기 기호를 사용하는 것이 적절하다. 세로형 스태퍼의 경우 상향꺽쇠 하향꺽쇠를 사용하는 것이 적절하다.
화살표 왼쪽 오른쪽은 되도록 가로형에 적용하되 드물게 추천한다 그 이유는 이것들은 더하기 빼기보다 덜 직접적인 함축적 의미가 담겨있기 때문이다. (undo redo가 < > 같은 기호로 사용되기도 한다.)
-추가적인 인풋 방법을 추가해라. 추가로 잘 디자인된 스탭퍼는 유연하게 사용자가 다른 방법으로도 인풋값을 넣을 수 있도록 부가적인 방법을 제공한다. 특히, 인풋 값이 복잡하거나 예상할 수 없을 때말이다. 아래는 스텝퍼와 합쳐진 좀 더 효율적인 방법들이다.
텍스트 필드 스태퍼는 사용자가 텍스트를 직접 입력할 수도 있고 스텝퍼로 값을 조정할 수도 있다. 사용자가 정확하게 자신이 원하는 값을 입력하거나 대략적으로 원하는 값을 타이핑으로 입력한 뒤 스태퍼로 다시 조정할 수도 있다.
롱 프레스를 허용하거나 빨리 값을 올리거나 내리는 버튼의 기능을 허용해라
사용자가 키보드 꺽쇠키를 사용할 수 있도록 허용해라. < 눌렀을 때 줄어들고 > 눌렀을 때 값이 커질 수 있도록 허용한다.
우리는 너무 많은 인터렉션 기술을 같은 목표를 달성하는 데 사용하도록 추천하지 않는다. 같은 목표에 도달하는 방법이 너무 많을 경우 학습해야 하고 UI를 사용하기 위해 방법들이 추가되어야 하기 때문이다. 그러나 스태퍼의 경우 타이핑을 대안으로 제공한다고 해서 스태퍼로 조금 조정하려는 사용자들에게 너무 많은 옵션을 제공하거나 헷갈리게 만들지 않는다.
-명확하게 스태퍼로 선택할 수 있는 범위를 분명히 해라. 디자이너들은 단위를 개당 단위를 정확하게 해야 한다. (달러인지, 센트인지, 퍼센트인지, 사람 명수인지) 만약 인풋 값이 최대 최소 한계가 정해져 있다면 이것을 정확하게 보여주는 것이 중요하다. 버튼을 한 번씩 누를 때마다 숫자가 하나씩 바뀌는 것이 좋은 반응 방법이다. 그러나 몇몇의 케이스들은 예를 들어 점수 단위가 소수점 첫 번째까지 있는 학점을 입력하게 한다고 한다면 단위가 0.1에 한 클릭씩 바뀌는 것이 맞다.
4. 언제 인풋 스태퍼를 사용해야 하는가?
이럴 때 사용해야 해라
-숫자 필드에는 가장 일반적으로 선택된 값이 있으며 대부분의 사용자는 이 값(예: 승객 수)에서 크게 벗어나지 않는다.
-숫자 필드는 소규모의 이산적인 양으로 조정해야 하며, 그렇지 않으면 정밀도가 중요하지 않다(예: 침실 수).
-스태퍼 요소를 선택할 수 있도록 충분한 버튼 공간이 부여되어야 한다. (너무 작게 만들지 말아라)
이럴 때 사용하지 말아라.
-숫자 필드가 너무 넓은 범위의 숫자를 고를 때 (예: 나이) 또는 자주 사용되는 특정값이 없는 경우에는 사용하지 말아라.
-숫자 필드가 연속되는 숫자이거나 정확한 수치가 중요한 것에는 사용하지 말아라. (예: 정확한 거리 km)
-너무 좁거나 작게 스탭퍼 조정 버튼을 두지 말아라. 잘못 선택될 할 가능성이 높기 때문이다.
결론
작은 값을 조정할 때만 스텝퍼를 적용하는 것이 맞다. 스태퍼 요소는 사용자의 실수를 방지할 수 있을 만큼 충분히 커야 한다.
이글에서는 인풋컨트롤에서 4. 스탭 UX UI 입력 디자인 가이드라인 UX UI를 다루었다.
[1] 인풋컨트롤
1. 체크박스 vs 라디오버튼
2. 토글스위치 가이드라인
4. 스탭 UX UI 입력 디자인 가이드라인
------아래는 앞으로 번역하며 공부할 내용------
5. 날짜 입력 폼의 UX 디자인 가이드라인
6. 스플릿 버튼 (드롭다운 또는 다른 기능 선택버튼) 정의
7. 슬라이더, 노브 (동그란 밸브모양 컨트롤러는 왼쪽 오른쪽으로 돌릴 수 있는 것), 메트릭스 (x, y 도표 위에 있는 선을 컨트롤하는 것)
8. 체크 리스트 모바일 입력 필드
9. 모바일 디바이스에서 쉽게 입력할 수 있는 방법
[2] 폼과 위자드
[3] 툴팁, 다이어로그, 지시문이 있는 오버레이
[4] 아이콘과 인디케이터
[5] 메뉴 디자인
[6] 내비게이션 요소들
[7] 서치
[8] 에러
저는 전문 번역가가 아니기 때문에 원문을 통해 더 정확한 정보를 습득하실 수 있습니다.
https://www.nngroup.com/articles/design-pattern-guidelines/
