6.스플릿 버튼
[1]인풋컨트롤
스플릿 버튼은 두가지 기능을 메뉴버튼으로서 제공한다. 디폴트 옵션이 있고 다른 옵션들을 선택할 수 있다.
복잡한 앱의 경우 너무 많은 옵션, 명령어, 툴과 컨트롤들을 사용자가 접하게 될때 벅찰 수 있다. 너무 많은 툴들을 한번에 보여주는 것은 사용자를 벅차게하고 사용자가 어떤 조작을 해야하는지 인지 하는데 시간이 너무 오래 걸린다. 스플릿 버튼은 시각적인 복잡도를 비슷한 기능들을 그룹핑하는 것을 통해 낮출 수 있다. (네비게이션 메뉴들을 연관성 있는 것 끼리 묶어서 정보 구조를 이해 할 수 있는 컨셉으로 만드는 것을 그룹핑이라고 말한다.)
스플릿 메뉴는 2개 이상의 컴포넌트들을 가진 버튼으로 라벨과 화살표 기호가 함께 표기되며 디폴트 옵션 라벨을 선택하게 되면 화살표 방향으로 선택할 수 있는 다른 메뉴들이 열린다.
스플릿 메뉴 버튼은 하이브리드 버튼으로 그 자체가 버튼의 역할도 하면서 메뉴를 갖는다. 이 그룹은 연관성 있는 기능들이 드랍다운 안에 있고 또한 한번의 클릭으로 메뉴를 열지 않고도 기본 옵션을 선택 할 수 있다. (포토샵에서 스픨릿메뉴가 있는 툴을 선택 할때 버튼의 기능으로 메뉴를 열지 않고도 툴을 선택 할 수 있다.)
만약 한개의 버튼이 자주 사용된다면 스플릿 버튼을 몇개의 연관된 툴의 대표 버튼이 된다. 가장 자주 사용하는 옵션을 디폴트 버튼으로 만들어서 인터렉션 효율성을 높여서 옵션을 열어보고 선택하지 않아도 되도록 만든다.
컨텍스쳘 메뉴와 다르게 스플릿 버튼은 메인 툴바에 위치한다. 그리고 해당 기능에 관련된 옵션들은 대메뉴를 선택하지 않고도 제한 없이 바로 툴바에서 스플릿메뉴를 선택 할 수 있다. (포토샵에서 툴바가 꺼내져있어 언제든지 선택 할 수 있다.)
스플릿 버튼은 당연하게 메뉴버튼 안에 위치해 있을 것 같지만 이렇게 되면 찾기가 어려워진다. 사용자는 (특히 학습이 아직 덜 된) 는 메뉴 안에 들어가 있는 기능을 알기 어렵고 대메뉴안에 있는 소메뉴버튼을 찾아내기도 어렵다. 그러므로 제일 먼저 고려해야하는 점은 디폴트 옵션을 꼭 선택해야하는 버튼이 있는지 없는지 판단한 뒤에 스필릿 버튼을 사용해야한다. 만약 사용자가 자주 사용하는 디폴트 기능이 없다면 메뉴버튼안에 디폴트 옵션을 주지 않고 기능을 제공하여 자주 사용하지 않는 기능은 알아서 찾을 수 있을 있도록 디자인 한다.
1. 화살표 버튼을 분리해서 보여줘라
잘 적용된 디자인은 기본적으로 스플릿버튼이 잘 인식되는 것이다. 화살표가 메뉴를 펼칠 수 있는 기능으로 보여지려면 라벨과 떨어져있어야한다.
스플릿버튼이 잘못 디자인 된 경우는 일반 메뉴버튼이랑 비슷하게 디자인 될 경우이다. 스플릿 버튼의 화살표 버튼 영역을 다른 색상의 박스 또는 구분선을 주어 확실하게 구분되도록 디자인 한다. 디폴트 옵션이 선택이 되어있는 상태임을 알려줘야하기 때문에 항상 스플릿버튼을 볼 수 있고 단순히 호버이펙트로 커서를 올렸을때만 보여주는 것이 아닌 항상 구분되는 영역으로 보여줘야 일반 메뉴버튼과 혼동되지 않을 수 있다.
화살표 버튼 영역의 크기는 너무 작을 경우 클릭하기 어려울 수 있기 때문에 사용성을 고려하여 적절한 크기로 적용해야한다. 손가락으로 터치해야하는 경우라면 통통한 손가락을 가진 사용자를 위해 최소한 1x1cm가 될 수 있도록 크기를 조정한다.
포토샵에서는 스프릿버튼의 화살표 크기를 코너에 아주 작게 넣어서 선택하기 어렵게 만들었다. 스프릿버튼을 열기 위해서는 클릭하고 홀드해야하는 제스쳐를 취해야한다. 이런 방법은 추천하는 방법이 아니다. 스플릿 버튼이라는 특수한 어포던스도 없고 학습이 덜된 사용자의 경우 클릭 후 홀드해야하는 것을 알 수 가 없기 때문에 다른 스플릿메뉴안의 기능들에 접근하는데 어려움을 겪을 수 있기 때문이다. 그리고 사용자가 공들여서 스플릿 버튼을 성공적으로 눌렀다고 하여도 홀드하는 것을 몰라서 실망할 수 있다.
2.스플릿버튼에 라벨을 적어라
몇몇의 스플릿 버튼은 아이콘과 글자가 함께 표시된다. 아이콘은 들어 갈수도 안들어 갈수도 있지만 텍스트는 필수 요소이다. 텍스트는 사용자가 학습하고 해당 기능을 발견하고 찾는데 도움이 된다. 선택 할 수 잇는 버튼의 영역을 키운다. 디폴트 선택지 뿐 아니라 다른 선택지들고 항상 텍스트라벨을 포함해야한다.
일반적인 메뉴버튼과 다르게 스플릿 메뉴들의 텍스트 라벨은 분명하게 기본 옵션 툴에 대한 이름 또는 기능을 표현하는 단어로 적혀야 한다.
3.효율적인 스플릿 버튼만들기 위한 다른 팁들
메뉴바와 컨텍스쳘 메뉴(흔히 우리가 사용하는 우클릭 했을때 펼쳐지는 메뉴)가 아닌
스플릿 메뉴를 효과적으로 적용하기 위해서는
- 선택 할 수 있는 선택지만 제한적일때 : 10-12개 이하의 옵션을 선택 할 수 있는 기능으로 묶을 수 있을 때 사용한다.
- 스플릿 메뉴 안에 하위 메뉴를 선택 하도록 하는 것은 지양한다. 커서를 스플릿메뉴를 킨 다음 또 하위 메뉴로 이동하여 선택하게 하는 것은 어렵다. 잘못하면 메뉴를 닫는 실수를 범하기 쉽기 때문이다.
- 현재 작업에서 할 수 없는 것 또는 관련이 없는 것은 비활성화 한다.
- 자주 사용되는 순서로 스플릿버튼의 순서를 정렬하거나 알파벳 또는 글자순서대로 정렬한다. 순서대로 배열하는 것은 사용자가 원하는 메뉴를 찾는데 도움이 된다. 만약에 5개이하의 옵션이라면 자주 사용되는 순서대로 배열한다. 5개보다 많은 메뉴 옵션이라면 알바벳 순서 또는 글자 순서대로 배열하는 것이 빨리 찾는데 도움이 된다.
- 만약 키보드 단축키를 제공한다면 단축키를 메뉴안에 배치하여 다음에 단축키를 사용 할 수 있도록 학습시킨다.
4.지속적인 스플릿 버튼
지속적인 스플릿 버튼은 모달 스플릿 버튼이라고도 불리는데 이 버튼은 디폴트 옵션이 마지막에 선택된 옵션으로 지속되는 것을 말한다. 사용자가 디폴트 값을 세팅에 가서 바꾸지 않더라도 마지막에 선택된 옵션이 다음에 사용하려고 할때 기본 옵션으로 적용되어 있는 상태가 된다. 반복적인 작업을 하게 될때 사용자는 한개의 옵션을 자주 사용할 때 효율적인 방법으로 적용 할 수 있다.
지속적인 스플릿 버튼이 파워 유저에게는 장점이지만 학습이 던된 사용자에게는 단점이 될 수 있다. 사용자가 인터페이스에 대해서 학습을 하는 단계에서는 인터페이스의 익숙한 위치의 있는 메뉴를 선택해서 작업을 하게되는데 작업을 할때마다 메뉴가 바뀌어 있으면 버튼이 어디에 있었는지 찾게되고 같은 버튼인데도 헷갈릴 수 있기때문이다.
지속적인 스플릿버튼은 파워 유저와 학습 초기 단계의 유저가 섞여있을때는 피하는 것이 좋다.
결론
스플릿 버튼은 자주 데스크탑 앱에서 많은 기능이 있을때 적용된다. 스플릿 버튼은 자주 사용하는 기능에 적용될때 효과적이다. 화살표 부분은 확연하게 선택될 수 있도록 확실하게 제공하되 텍스트 라벨을 꼭 표기한다. 웹사이트에서 네비게이션 메뉴를 스플릿 버튼으로 적용하지 않는다.
https://www.nngroup.com/articles/split-buttons/
