토글버튼

국내에서 잘 알려진 UX 에이전시 PXD 블로그의 “UX 신입 디자이너가 알아야할 UI 디테일 용어”라는 게시글 중 아래 코멘트를 확인할 수 있었습니다.

먼저 다음 그림을 참조하길 바랍니다.

아래의 그림은 트위터에서 쓰였던 버튼 중 하나로, 하나의 버튼이 Following 또는 Unfollow 기능을 수행하는 일종의 토글 버튼이라고 볼 수 있습니다. 하지만 아래 버튼은 위 사용자가 언급한 “현 상태”와 사용자가 액션을 취했을 경우의 “다음 상태”에 대한 정보가 상당히 모호한 사례로 볼 수 있습니다. 사용자 편의를 위한다는 명목과 인터페이스의 간결함을 위한 의도라고 보여지지만 직관적이지 않을 뿐더러 사용자의 혼란을 가중시키는 사례로 볼 수 있습니다.

이와 유사한 사례는 UX를 하는 분이시라면 한번 쯤 읽어봤을 “퍼소나로 완성하는 인터랙션 디자인 About Face3.0″에서 확인하실 수 있습니다. 해당 도서의 21장에 ‘플립플롭 버튼’이라는 주제가 언급되어 있습니다.
플립플롭이란 무엇을 말하는 걸까요? 먼저 플립플롭이란 단어를 구글에서 검색해 보면 여러 종류의 푹신푹신한 슬리퍼가 검색됩니다. 해당 검색결과와 플립플롭 버튼의 쓰임새를 유추해보면 이 “플립플롭”의 의미/특징를 대략적으로 이해할 수 있을 것 같습니다.

위의 책에서 플립플롭 버튼을 설명하면서, 하나의 버튼이 두 개의 기능을 수행하는 버튼으로 공간절약과 사용자 편의를 위한다는 명목으로 제공되는 경우가 있지만 직관적이지 않고 사용자의 혼란만 제공하는 경우가 많으므로 제한적으로 사용해야 한다는 것을 분명히 하고 있습니다. 직설적으로 말하면 “대충 쓰려면 쓰지마!”(ㅎㅎㅎ 이 책은 화끈해서 좋습니다)라고 하고 있죠.

그렇다면 다음의 그림을 보겠습니다.

아래 두 종류의 스위치는 일종의 토글 스위치로써 현재 상태와 사용자가 취할 수 있는 변경 가능한 상태를 제공하고 있습니다… 하지만 버튼 안 쪽에 가이드 문구가 배치된 좌측 형태보다 버튼 밖에 가이드 문구를 제공한 우측 형태가 더 인지하기 쉽습니다. 왜냐하면 현재 설정상태와 사용자의 액션에 대한 방향성(단서)을 제공해 주기 때문입니다. 즉, ON 방향으로 스위치가 올라가 있다는 것은 현 상태가 켜져있다는 것을 말해주기 때문입니다. 그와 반대로 OFF 방향으로 스위치를 변경한다면 켜짐 상태에서 꺼짐 상태로 변경될 수 있을 것이라는 예측할 수 있습니다.

다음의 그림을 보겠습니다.

다음 버튼은 iOS에서 흔히 사용되는 토글버튼 중 하나입니다다.  iOS 사용자는 다음의 버튼을 아무런 문제를 못 느끼고 무의식적으로 사용하지만, 버튼에 표기된 가이드 문구가 현재의 상태를 말하는지, 아니면 사용자가 취할 수 있는 액션을 말하는지가 분명하지 않습니다. 쉽게 말하면, 첫 번째 버튼에서 현재 상태가 OFF되어 있는 것을 말하는지 OFF를 하려면 버튼을 눌러야하는지가 불 명확하다는 것이죠. 물론 iOS 사용자는 이 부분에 대해서 혼란을 느끼지 못합니다. 왜냐하면 iOS 사용자는 해당 버튼의 사용성을 떠나서 습관화되어 있기에 별다른 문제를 못 느낀다는 거죠.

아래의 버튼은 OS X에서 사용되던 버튼으로 위의 버튼에 비해서 현재 상태와 사용자가 취할 수 있는 액션을 비교적 이해하기가 쉬운 편이다. 즉 버튼의 방향이 현재 상태에 대한 정보를 제공해주기 때문이죠.

다음 그림의 스위치는 현재상태의 방향성 뿐만 아니라 현재상태의 가이드 문구 또는 이미지를 강조하여 좀 더 쉽게 사용자가 인지하게 할 수 있다는 특징이 있습니다.

다음의 그림은 윈도우즈8의 토글버튼입니다. 해당 토글버튼은 사용자에게 혼란을 줄 수 있는 버튼 내 가이드 문구를 삭제하고 현재 상태를 색(파란색=켜짐, 검정색=꺼짐)으로 표현했으며 해당 가이드 문구를 버튼과 분리하여 별도의 영역에서 제공하고 있다는 특징이 있습니다.

아래 그림은 얼마 전에 업데이트된 iOS7의 토글버튼입니다. 해당 토글버튼에서도 버튼 내 가이드 문구를 삭제하였으며 ON/OFF(녹색=켜짐, 회색=꺼짐)를 색으로만 구분시켜두었습니다.

위의 사례를 통해서 토글버튼을 어떻게 사용해야하며 어떤 부분을 주의해야할 지를 조금이나마 이해할 수 있었으며 “어떻게 해야겠다”라는 생각이 스쳐지나갈 수도 있을 것 입니다.

하지만 토글버튼을 어떻게 제공할지에 앞서 인간(사용자)의 특성을 생각해볼 필요가 있습니다.

기존의 토글버튼 사례를 볼 수 있듯이 사용자들이 흔히 쓰고 있는 인터페이스 요소들이 사용성이 좋아서 사용하는 것은 아니라고 생각됩니다. 단지, 인간은 쉽게 습관화되고(자의적이거나 타의적이거나) 이렇게 습관화된 것을 쉽게 포기하지 않는다는 특징을 가지고 있기 때문에 큰 무리가 없다면 더 나은 것, 더 편리한 것을 찾기보다 기존에 익숙해져 있던 것들을 유지하려고 하기 때문입니다. 달리 말하면 지금 사용하던 방식보다 좀 더 나은 사용성을 제공하는 인터페이스를 제공하더라도 사용자들은 기존의 방식에 더 호감을 느낄 가능성이 크다는 것이죠..

본 게시글은 글쓴이의 주관적인 견해 임을 사전에 알립니다.