싱글 토글 버튼의 어려움

토글 버튼은 두 가지 상반된 기능을 한 버튼으로 담을 때 많이 사용한다. Do/Undo 의미를 담는게 대부분이다. 아래 링크의 글에서 예로 든 팔로우 버튼이 대표적이다.

원문링크 https://uxmovement.com/buttons/the-challenges-with-single-toggle-buttons/

The Challenges with Single Toggle Buttons

이 글에 따르면 토글 버튼은 세 가지 역할을 해야 한다. 상태를 변경하고, 현재 상태를 표시하고, 선택하지 않은 옵션을 드러내야 한다. 문제는 많은 토글 버튼이 현재 상태를 제대로 표시하지 못하거나 또는 선택하지 않은 옵션을 드러내지 못한다. 많은 디자이너들이 현재 상태를 토글 버튼으로 표시하려 하는데, 문제는 이렇게 하면 많은 경우 두 번째 선택 옵션을 드러내기 어렵다는 데 있다. 아래 예시 이미지를 보자.

토글 버튼 이미지1

옵션1은 아직 팔로우하지 않은 상태와 현재 팔로우 중인 상태를 드러낸다. 문제는 만약 사용자가 지금 팔로우하고 있는 상태를 다시 팔로우하지 않는 상태로 전환하려면 "팔로잉"이라는 버튼을 선택해야 한다는 데 있다. 팔로우를 해제하기 위해 팔로잉이라고 적힌 버튼명을 선택하라니. 명확하지 않다.

옵션2는 현재 상태와 버튼의 기능을 분리했다. 현재 팔로잉 중인 것을 표시하고, 토글 버튼은 언팔로우라고 표시한다.

토글 버튼 이미지2

그럼 현재 팔로우 중인 사람을 팔로우 해제한다는 의미로 버튼 레이블을 "언팔로우"로 표시하면 어떨까. 버튼이 지닌 기능은 명확해졌지만 대신 현재 상태가 명확히 드러나지 않는다. 이 역시 토글 버튼과 현재 상태를 분리해서 좀 더 명확히 만들 수 있다.

이 글의 저자의 주장은 간단하다. 토글 버튼 하나로 세 가지 기능을 모두 담으려고 하지 말라는 얘기다. Do/Undo를 버튼으로 표시하고, 이미 Do한 경우, 현재 상태를 별도의 영역에 표시하라.