토글 버튼이 액션 버튼과 다르게 생겨야 하는 이유
토글 버튼은 액션 버튼과 동일하게 보여서는 안 된다. 토글 버튼과 액션 버튼에 같은 색상을 적용하는 실수를 많이들 한다. 그렇게 되면 모든 토글 버튼이 액션 버튼처럼 보이게 돼서 시각적인 노이즈를 증가시킨다. 결과적으로 액션 버튼이 강하게 보이지 않아 눈에 잘 띄지 않게 된다.
토글 버튼에 액션 버튼과 동일한 컬러를 적용하면 사용자가 선택된 상태를 나타내는 토글 버튼을 클릭 가능한 것으로 착각하게 만들 수 있다. 선택된 토글 버튼은 해당 옵션이 선택된 상태라는 사실만 알려주어야 한다. 그러나 액션 버튼과 동일한 색상을 적용하면 사용자가 실수로 그 버튼을 클릭하게 만들기 쉽다.
토글과 액션 버튼은 서로 부딪치지 않는 디자인을 적용해야 한다. 서로 다른 디자인을 적용하면 토글이나 액션 버튼을 사용할 때 서로 다른 결과가 나오리라는 것을 사용자가 예측할 수 있다. 그리고 시각적인 노이즈를 제거할 수도 있고 사용자가 동작하는 버튼을 쉽게 인지할 수 있게 해 준다.
높이와 깊이 적용
색상으로만 구분이 되게 해야 하는 것은 아니다. 액션 버튼에 사용한 색상을 토글 버튼에 사용하고 싶지도 않고 서로 다른 색상을 사용해서 사용자를 혼란스럽게 하고 싶지도 않을 것이다. 또 다른 접근방법은 높이와 깊이를 사용하는 것이다. 이 방법으로 색상을 사용하지 않고 토글 버튼의 선택된 상태를 확실히 구분해줄 수 있다.
토글 버튼의 명도를 다르게 적용해서 높이와 깊이를 만들 수 있다. 명도를 밝게 적용한 버튼이 더 가까이 있는 것처럼 느껴지고, 가까이 있는 것처럼 느껴지는 버튼은 선택된 상태로 느껴지게 된다.
명도가 어두우면 멀리 있는 것처럼 느껴지고, 명도가 밝으면 가까이 있는 것처럼 느껴진다. 그리고 겹치는 형태를 활용하여 차이를 둘 수도 있다. 위에 겹쳐져 있는 선택된 버튼은 선택되어있지 않은 버튼 위에 올라와 있는 버튼처럼 보인다. 더 도드라지게 보이며 사용자의 주의를 끌게 된다.
선택된 상태의 토글이 위에 올라와 있는 것처럼 보이게 하려면, 선택된 버튼의 모서리와 코너가 뒤에 있는 선택되지 않은 버튼의 모서리와 만나게 하면 안 된다. 모서리가 서로 만나면 선택된 상태의 버튼과 선택되지 않은 상태의 버튼이 서로 같은 레벨에 있는 것처럼 보이게 된다. 그러나 선택된 버튼의 모서리와 코너가 선택되지 않은 버튼의 안쪽으로 들어오게 적용하면 서로 겹쳐 있는 상태로 보이게 된다.
텍스트 레이블의 대비
사용자는 버튼 형태와 마찬가지로 텍스트 레이블의 차이점도 인지를 하기 때문에 레이블의 대비도 적용을 해야 한다. 색상 대비와 폰트 두께의 차이를 둠으로써 사용자는 한눈에 버튼의 상태를 인지할 수 있다.
예시에서 선택되지 않은 상태의 레이블이 밝은 그레이와 보통 두께의 서체를 적용한 반면, 선택된 상태의 레이블은 더 어두운 그레이와 두꺼운 서체를 사용하였다. 레이블이 동일한 명도와 두께로 되어 있다면 사용자는 버튼의 형태로만 상태를 인지해야 한다. 레이블의 대비를 버튼의 높이 차이와 같이 적용한다면 상태의 차이를 좀 더 명확하게 전달할 수 있다.
요약
토글 버튼과 액션 버튼은 구분이 되도록 보여야 한다.
동일한 디자인을 적용하면 사용자가 버튼의 용도를 혼동할 수 있다.
색상을 다르게 할 수 없으면 높이와 깊이의 차이를 이용하라.
어두운 명도는 더 멀리 있는 것처럼 보이고, 밝은 명도는 가까이 있는 것처럼 보인다.
가장 가까이 있는 것처럼 보이는 버튼이 활성화된 버튼처럼 보인다.
위에 겹쳐져 있는 것처럼 보이면 높이와 깊이의 차이가 더 잘 느껴진다.
배경 버튼보다 모서리와 코너를 안쪽으로 집어넣으면 위에 놓여있는 것처럼 보인다.
더 빠른 인지를 위해 레이블 텍스트에 대비를 주어라.
원문 출처 : https://uxmovement.substack.com/p/why-toggle-buttons-should-never-look-747
