GN⁺: 토글 버튼은 현재 상태를 표시해야 하나, 아니면 변경될 상태를 나타내야 하나? (2010)

토글 버튼은 현재 상태를 표시해야 하나, 변경될 상태를 표시해야 하나?

• 토글 버튼은 사용자에게 현재 상태를 알려주는 역할도 해야 함.
• 토글 버튼이 '켜짐' 상태일 때 '꺼짐'을 표시하면 혼란을 줄 수 있음.
• 버튼이나 메뉴에서 플립플롭 컨트롤 사용을 피해야 함.

토글 스위치가 현재 상태와 변경될 상태를 모두 표시할 수 있음

• 버튼 외부에 텍스트를 두어 현재 상태와 변경될 상태를 모두 표시하는 방법이 있음.
• 예를 들어, iOS 스위치 디자인은 상태가 '켜짐'일 때 파란색으로 표시하고 '꺼짐'은 그렇지 않음.
• OS X 스위치 디자인은 모호함이 없으며, 사용자는 현재 상태를 명확히 알 수 있음.

트위터의 토글 버튼 사용을 피해야 함

• 트위터의 토글 버튼은 마우스 오버 시 정보를 제공하지만, 터치 스크린에서는 혼란을 줄 수 있음.

영어에서 "켜짐"과 "꺼짐"은 부사와 형용사 모두 될 수 있음

• 버튼에 동사나 형용사를 사용하여 명확한 라벨을 제공하는 것이 좋음.
• 예: "활성화/비활성화", "시작/중지"

상태와 행동을 구분하는 것이 중요함

• 토글이 행동을 나타낼 때는 (예: 재생/일시정지) 클릭할 때 발생할 행동을 표시해야 함.
• 토글이 옵션을 나타낼 때는 (예: 셔플/일반 재생) 현재 상태를 표시해야 함.

체크박스 사용을 고려할 수 있음

• 상태 전환을 '예/아니오' 질문으로 요약할 수 있다면 체크박스 사용이 적합할 수 있음.

토글 버튼 대신 상태와 행동을 모두 표시하는 방법 사용

• 비활성화 상태일 때는 버튼을 강조하지 않고, 활성화 상태일 때는 강조하여 상태를 표시함.

토글 버튼을 사용하지 않는 것을 고려할 수 있음

• 예를 들어, 셔플/일반 재생의 경우 '셔플'이라는 라벨이 있는 체크박스를 사용할 수 있음.

페이스북의 '좋아요' 버튼이 좋은 토글 버튼의 예시임

• 페이스북 안드로이드 앱에서는 '좋아요' 버튼이 비활성화 상태일 때 회색, 활성화 상태일 때 파란색으로 표시됨.

현재 상태와 행동을 모두 표시하는 것이 가장 명확함

• 비활성화 상태의 라벨과 활성화 상태를 변경할 수 있는 클릭 가능한 버튼을 함께 제공하는 것이 좋음.

GN⁺의 의견:

• 토글 버튼 디자인은 사용자 경험에 큰 영향을 미칠 수 있으며, 현재 상태와 변경될 상태를 명확히 표시하는 것이 중요함.
• OS X의 스위치 디자인은 사용자에게 혼란을 주지 않고 직관적으로 현재 상태를 이해할 수 있게 해주는 좋은 예시임.
• 이 글은 소프트웨어 개발자들이 사용자 인터페이스를 설계할 때 고려해야 할 중요한 요소들을 제공함으로써, 더 나은 사용자 경험을 만드는 데 도움이 될 수 있음.

[neo]

Hacker News 의견

• Microsoft Teams의 음소거 버튼에 대한 혼란

  • Teams 앱에서 음소거 버튼은 마이크에 줄이 그어져 있음을 나타내며, 음소거가 활성화되어 있을 때 마이크가 꺼져 있음을 의미함.
  • 전화 앱에서는 같은 아이콘이 음소거가 아님을 나타내며, 배경색이 채워진 상태로 변경되어 음소거 상태를 표시함.
  • 버튼이 현재 상태를 나타내는 데는 문제가 없지만, 상태가 바뀌었을 때의 모습을 알아야 함.
  • 이러한 혼란은 '플랫 UI' 디자인에서 실제 세계의 참조 없이 디자인 요소를 파악하는 과정에서 발생하는 문제일 수 있음.

• 테슬라 차량 UI의 일관성 없는 토글 버튼 문제

  • HVAC 시스템의 버튼은 터치 방식과 지속 시간에 따라 다르게 반응함.
  • 운전 중에 화면을 잠깐 볼 수밖에 없는 상황에서 미세한 터치 오류로 인해 의도치 않은 조작이 발생할 수 있음.
  • 테슬라의 블루투스 연결 UI는 매우 혼란스러운 디자인으로, 운전 중에는 더욱 문제가 됨.

• NASA의 푸시 버튼 스위치의 상태 피드백 메커니즘

  • 스위치가 꺼져 있을 때는 모든 불이 꺼져 있고, 스위치를 누르면 노란색 불이 켜지며, 실제로 원하는 장치가 켜지면 노란색 불이 꺼지고 녹색 불이 켜짐.
  • 이는 스위치를 눌렀을 때의 확인과 실제 작동의 확인을 제공함.

• 체크박스의 사라짐에 대한 아쉬움

  • 체크박스는 완벽하고 모호함이 없었지만, 스마트폰 디자이너들이 선호하지 않았음.

• 테슬라 대시보드 스크린 UI의 혼란스러운 디자인

  • 'Open'이라고 표시된 라벨은 해당 부분이 열려 있음을 명확하게 나타내지만, 실제로는 부품을 여는 버튼임을 사용자가 알 수 없음.

• 토글 버튼의 문제점과 해결 방안

  • 토글 버튼은 시스템의 상태와 그 상태를 변경하는 동작을 동시에 포함하고 있어 혼란을 줄 수 있음.
  • 현재 상태를 나타내는 'ON'이 실제로는 'OFF'로 바꾸는 동작을 의미할 수 있음.
  • 상태와 동작을 분리하는 것이 해결책이며, 버튼 외부에 라벨을 쓰거나 아이콘을 그대로 두고 버튼의 다른 속성을 변경하는 방법이 있음.

• 토글 버튼의 비동기성 문제

  • 버튼을 눌렀을 때 시스템 상태가 즉시 변경되지 않을 수 있어, 원하는 상태로 확실히 변경하기 위해 여러 번 누를 필요가 있음.
  • 각 상태에 대한 별도의 버튼이 있으면 여러 번 눌러도 문제가 없음.

• 애플의 슬라이더 토글 디자인의 장점

  • 애플의 슬라이더 토글은 현재 상태와 변경될 상태를 명확하게 보여줌.
  • 활성화된 기능은 파란색 배경, 비활성화된 기능은 회색 배경으로 구분됨.

• 토글 버튼의 현재 상태와 변경될 상태의 명확한 표시 필요성

  • 현재 상태가 무엇인지, 토글을 변경했을 때 어떤 상태로 바뀔지 명확해야 함.
  • 재생/일시정지 버튼은 물리적 선행 사례를 따르며, 미디어 재생 여부가 명확하기 때문에 아이콘이 변경되지 않아도 사용자가 이해할 수 있음.
  • 토글의 색상을 약간 변경하는 것은 도움이 되지 않으며, 라벨이 필요함.