토글 스위치 켜러 갔다가 인지 오류가 났다
시각 요소(컬러, 텍스트, 버튼 위치) 3박자의 중요성
toggle (v.)
1836, "fix or fasten by or as if by a toggle, make secure with a toggle," from toggle (n.). The meaning "to alternate back and forth between opposite actions" is by 1982. Related: Toggled; toggling.
1836년, "토글로 고정하거나 마치 토글로 고정한 것처럼 만들다, 토글로 고정하여 안전하게 하다"라는 의미로 사용되기 시작했음. "반대되는 행동들 사이를 번갈아 가며 전환하다"라는 의미는 1982년부터 사용됨.
수많은 UX라이팅 콘텐츠가 있는 닐슨앤노먼그룹 홈페이지에 들어갔다가 물음표 하나를 갖게 됐다. 토글 스위치 설정 화면 때문이다.
Customize cookies를 누르면 아래 화면으로 이동
NN/g Cookiebot닐슨앤노먼 사이트 쿠키봇 콘텐츠 케이스가 바로 그 주인공이다.
Necessary 볼드체를 쓱 보고 반사적으로 토글 스위치를 켰다. 종종 필수 쿠키는 on을 선택했기에 이번에도 응당 그러려니 했다. 하지만 아무리 눌러도 반응이 없었다. 회색 토클 스위치를 눌렀을 때 아래 메시지가 나왔지만 긴 글이라 패스하고 그냥 '오류가 났나'라고만 생각했다.
필수 항목 - 선택 해제가 불가능합니다."엥-----?"
찰나의 순간 다시 내용을 스캐닝하고, 내가 어떤 착각을 했는지 깨달았다.
하나, 필수 쿠키는 직접 On 해야 한다는 착각: 디폴트로 활성화되어 있을 것이라고 생각하지 못함
둘, 회색=비활성화: 학습된 경험에 따라 회색 토글을 보고 비활성화 상태라고 착각
셋, 검은색과 녹색만 옵션 컬러라는 착각
착각은 깨졌지만, 뭔가 찝찝하다
게다가 화면 아래 3가지 버튼 컬러도 혼란을 더했다. 무엇을 더 강조하고 싶은 건지 반문하게 하는 혼란이랄까.
▼ About 탭에 있을 때의 하단 버튼 문구
Customize cookies를 누르면 Details로 이동토글 버튼: 명확하고 자발적인 허락
그래서 보다 간결하고 시각적으로도 명쾌하게 이해할 수 있는 다른 케이스를 눈여겨보게 됐다.
ⓒstack overflow디폴트 활성화인 경우, Always Active라는 문구로 사용자의 헛수고를 덜어준다. Inactive/Active 문구도 컬러 대비와 어우러져 의미를 더 명확하게 한다. UX라이터 입장에서 이런 문구를 보면, 그냥 지나치지 못하고 한 번쯤은 고민하게 된다.
ⓒUnity, Always Active
ⓒUnity, Inactive
ⓒUnity, Active/국내 사례도 아카이브 예정/
참고.
https://osoma.kr/blog/cookie-consent/
https://www.nngroup.com/articles/toggle-switch-guidelines/
