Segmented Controls (세그먼트 컨트롤)

간혹 디자인 회의를 할 때 동료 디자이너들과 User Interface (UI)에 대한 관점이 다른 경우가 있습니다. 디자인의 Look&Feel을 논의할 때는 서로의 의견이 다른 경우, 관점이 다르더라도 자기의 생각이 주관적임을 인식하고 얘기하기 때문에 이해할 수 있다라고 생각하는데 반해 UI의 경우는 상대방을 설득하기가 쉽지 않습니다. 여러가지 이유가 있겠지만 가장 큰 이유는 UI는 주관적이 아니라 객관적이고 보편적이라고 생각하기 때문이 아닌가 합니다.

User Interface

오늘 글의 주제는 요즘 많이 쓰이는 UI 인 Segmented Controls(버튼 형식의 탭)입니다. 본론으로 들어가기 앞서 UI의 기본적인 원칙(?)을 짚고 가려합니다.  UI의 기본은 선택입니다. 버튼을 예로 들면 버튼이 선택된 것과 선택되지 않는 것이 존재합니다.  아래의 예제가 버튼의 기본 동작과 디자인의 보편원칙이 반영된 형태입니다.

버튼은 누르지 않은 것(왼쪽)과 누른 것(오른쪽) 을 구분하는게 어렵지 않습니다. 버튼이 하나 하나 분리되어 있고 입체로 표현된 경우 볼록하면 선택되지 않는 버튼이고, 오목하면 눌러진거(선택된 거)라고 쉽게 인식하기 때문이지요.  하지만 이런 볼록한 형태의 버튼은 플랫하고 단순한 디자인 트렌드 영향으로 현재 많이 사용되고 있지는 않습니다. 하지만 서비스가 커지고 컨텐츠가 많아지면 자연스럽게 기능과 컨텐츠는 그룹화가 되고 탭 형태의 UI 사용빈도가 올라가지요. 탭은 디자인에 따라 내가 지금 선택한 것과 그렇지 않은 요소로 나뉘어 지는데 아래의 형태가 일반적입니다.

탭의 역할

1. 눌러졌을 때 탭 (현재 위치 표시)
2. 눌러야 할 탭 → 눌러지지 않았을 때 액션 가능한 기능 또는 봐야할 컨텐츠가 있음을 알림

위의 예제를 보시면 사회라는 탭이 선택되어져 있고 종합, 정치, 생활/문화를 누를 수 있다는 것을 비교적 쉽게 알 수 있습니다. 이런 인지가 비교적 쉽게 가능한 건 버튼이 2개 이상이고 ‘사회’가 파란색이며 하단 영역에 테두리 없이 컨텐츠와 연결된 배경색이 있기 때문입니다. 그렇다면 아래의 예제1과 같은 버튼 형식의 탭 UI(Segmented Controls)는 어떤가요?

예제 1)  from 네이버게임

여기서 눌러야 할 버튼은 장르별일까요, 가나다순일까요?

예제 2)  from 네이버 금융

예제 1의 경우는 장르별의 배경색이 전체적인 bar와 가나다순 배경색보다 어두워서  눌러졌다는 인지가 예제 2 보다는 쉽습니다. 그리고 가나다순을 누를 수 있다는 느낌도 주고 있습니다. 예제2 는 어떤가요? 어느 탭이 선택되어 있고 어떤 탭을 누를 수 있다고 생각하시나요?

답을 알려드리면 예제1은 장르별이 선택되어져 있고 가나다순을 누를 수 있습니다. 예제 2는 최근 조회가 선택되어져 있고 MY STOCK이 누를 수 있는 버튼입니다.

예제 2의 MY STOCK은 누를 수 있다거나 누르고 싶다라는 힌트를 전혀 주고 있지 않습니다. 그렇다고 눌러져 있다는 현재 위치를 인식시키기에는 탭의 배경이 너무 묻혀보이는 색입니다. 최근 조회가 MY STOCK보다 훨씬 잘 보이므로

1. 현재 나는 최근 조회를 보고 있다
2. 최근 조회를 눌러야 한다

로 생각해 볼 수 있습니다.

만약 1번이 목적이라면 MY STOCK이 눌러질 탭인데 눌러 질 것 같지 않다는것입니다.
2번이 목적이라면 이미 최근 조회에 있기 때문에 컨텐츠에는 아무 변화가 없습니다.

최근 조회를 강조함으로서 현재 위치를 부각 하다보니 눌러야 할 MY STOCK이 묻혀보이는 문제가 있습니다.

그럼에도 불구하고 UI 리서치를 하다보면 현재의 위치를 강조하다보니 눌러야 할 다른 버튼이 묻혀 보이는 경우가 많이 있습니다. 거기에 우리는 이것을 익숙하게 사용하고 있고요. 누르면 컨텐츠가 바뀌니까 명확하게 다음 action을 유도하는 버튼으로 인지하고 누른다기 보다 눌러지니까 눌러보고 바뀐 컨텐츠로 내가 누른 버튼의 기능을 인지합니다.

예제 3) from 네이버 금융

예제 3은 어떤가요? 아마도 메뉴가 2개 이상이였다면 현재 코스피가 선택되어져 있다는 것이 보다 명확했을텐데 메뉴가 2개일 경우는 어떤 것이 선택되었는지 그리고 눌러야 할 메뉴가 어떤 버튼인지 혼란스러울수 있다고 생각합니다. 몇몇 동료들에게 뭘 눌러야 할 것 같냐고 물어봤을 때 모두 다른 답변을 했다는 것도 이 UI가 널리 쓰이는 거에 비해 디자인에 대한 원칙이나 보편성은 약하지 않나란 생각이 들었습니다. 하지만 질문을 바꿔 지금 현재 선택되어져 있는게 뭐냐고물어봤을때는 조금 더 일관성있는 답변을 얻을 수 있었습니다.

이렇게 탭 형식의 버튼을 디자인할 때는 2가지를 고려해 볼수 있습니다.

1. 눌러져 있는 버튼의 백그라운드는 눌러야 할 버튼보다 어둡게 처리한다.
2. 눌러야 할 버튼의 텍스트 색상이 너무 묻혀보이지 않게 한다

이 두가지 사항이 고려되면 아래의 디자인처럼 나옵니다.

예제 4) from 페이스북

현재 Likes가 선택되어 있고 Views와 Posts를 누를 수 있습니다.

예제 5) from 네이버 자동차

국산이 선택되어 있고 수입을 누를 수 있습니다.

Thoughts on design

디자인을 바라보는 유저는 항상 주관적으로 디자인을(당연히 UI 포함) 해석합니다. 주관적이라함은 경험이 될 수도 있고 습관이나 학습에 의해 행해지는 자기의 견해나 관점이 됩니다. 디자이너도 마찬가지로 주관적으로 디자인합니다. 그래서 사람마다 이 디자인은 좋고 싫다는 말을 할 수 있고요. 하지만 UI만을 독립적으로 보는 경우, 형태적으로 이미 보편화 되어서 좋고 싫다는 말보다는 맞고 틀리다의 관점에서 보는게 아닌가 합니다.

선택되어진 버튼과 선택되어야 할 버튼 디자인에 대한 논의는 오버로그 서비스를 개선할때 부터 회사내외에 있는 디자이너분들과도 꽤 이견이 있었습니다.  하지만 그 때도 이견을 좁히지는 못했던 것 같습니다.  (제대로 설명을 못했습니다. ㅠㅠ) 그러다  OP.GG PLUS에 있는 아래의 UI 를 보게 되었지요.

제가 보기에는 맵으로 보기를 눌러야 할 것 같은데 현재 화면은 맵으로 보기가 선택된 상태였습니다. 그래서 왜 그런지를 설명하고 서로의 의견을 나누다 보니 아래의 디자인이 제가 생각하는 것처럼 어색하지 않다는 사실을 알게 되었습니다. 그 이유 중에 하나가 위의 예제3 에서 보듯 네이버 디자인에서 선택된 메뉴가 밝게 표현되고 있기 때문이라는 것도 알게 되었죠. 앞서 얘기 드렸듯이 사용자에게 현재 위치를 알리는 것이 더 우선이라고 얘기하는 것 같습니다. 하지만 그 다음 action인 뭘 눌러야 하지라는 관점에서 보면 혼란스럽다고 생각합니다.

디자인에 정답은 없습니다. 사람들이 많이 사용하고 인지한다면 그것이 정답이 되는 거겠지요. 지금 이 탭/버튼  UI 표현 방식이 제 논리와 다르다고 답이 아니라고는 얘기하지 않겠습니다. 하지만 뭘 눌러야 하지란 관점에서는 의문이 들 수 있지요.
그래서 이 글을 읽는 디자이너들이 내용에 공감하신다면 Segmented Controls (버튼형식의 탭) 디자인을 할 때 아래의 2가지를 고려해 주세요.

1. 눌러져 있는 버튼의 백그라운드는 눌러야 할 버튼의 백그라운드보다 어둡게 처리한다.
2. 눌러야 할 버튼의 텍스트 색상이 너무 묻혀보이지 않게 한다.