[HIG-Toggle] 코레일톡 UX 분석을 통한 HIG 정리 - 1주차 스터디

현재 나는 애플 디벨로퍼 아카데미에서 나 포함 6명의 러너들과 함께 "히그히구"라는 HIG 분석 스터디를 진행하고 있다.

매주마다 하나의 앱을 정해서 각자 느꼈던 Pain Point를 정리하고 HIG 문서를 통해 개선점을 찾고 있다.

스터디 1주차는 코레일톡 앱을 선정했고 나는 Toggle에 대해 정리했다. 

 

Pain Point

코레일톡 - 캡쳐 화면

첫번째,

할인,정기권 탭을 클릭하면 코레일에서 제공해주는 특가 상품 목록을 볼 수 있다.

이때, 토글 버튼을 통해 사용자가 구매 가능한 상품만 볼 수 있도록 하였는데 토글을 selected 한 뒤 다시 unselected를 하면 토글이 갑자기 사라진다….. 개어이없음!

사라질거면 대체 왜 토글 버튼을 둔 것일까 ..?

두번째,

사용자가 구매 가능하지 않은 상품은 버튼이 활성화되지 않다는 걸 나타내기 위해 버튼 색상을 회색으로 설정해두었다. 그렇다면 사용자는 어차피 구매 못한다는 것을 인지하고 있을 텐데.. 굳이 토글 버튼이 필요할까?

---

Toggles

토글을 사용하면 서로 다른 모양을 사용하여 온/오프와 같은 한 쌍의 반대 상태를 선택하여 각 상태를 표시할 수 있습니다.
A toggle lets people choose between a pair of opposing states, like on and off, using a different appearance to indicate each state.

 

다양한 플랫폼에서 토글의 스타일을 다양한 방식으로 사용할 수 있다.

iOS, iPadOS

1. 리스트의 행에서만 스위치 토글 스타일을 사용하라.
   1. 행의 컨텐츠가 스위치 제어 상태에 대한 컨텍스트를 제공하므로 이 상황에선 label을 제공할 필요가 없다.
2. 필요한 경우에만 스위치의 기본 색상을 변경하라.
   1. 대부분의 경우 기본 녹색이 잘 작동하지만 대신에 앱의 accent color를 사용할 수도 있다.
   2. 무색의 외관과 인지될 수 있을 만큼 충분한 대비를 제공하는 색상을 사용해야 한다.
3. 리스트 외부에서는 스위치가 아닌 토글처럼 작동하는 버튼을 사용하라.
   1. 버튼의 목적을 설명하는 label 을 제공하지 말아라. → 너가 생성한 인터페이스 아이콘은 alternative background appearances과 결합되어 사람들이 버튼의 기능을 이해하는 데에 도움이 된다.
      https://developer.apple.com/documentation/uikit/uibutton/3752184-changesselectionasprimaryaction

changesSelectionAsPrimaryAction | Apple Developer Documentation

 

 

macOS

1. Switches

1. 강조하고 싶은 설정에는 스위치를 권장한다.
   1. 스위치는 체크박스보다 시각적으로 더 중요하므로 일반적으로 체크박스보다 더 많은 기능을 제어할 때 보기 좋다. ex) 스위치를 사용하면 하나의 설정이 아닌 여러 설정을 온/오프 할 수 있다.
   2. grouped form 내에서 하나의 행의 설정을 제어하려면 미니 스위치를 사용하는 것이 좋다.
      
      • 계층 구조를 표시해야 하는 경우, 기본 설정에는 일반 스위치를 사용하고 하위 설정에는 미니 스위치를 사용할 수 있다.
        https://developer.apple.com/documentation/SwiftUI/ControlSize
   3. 체크박스를 스위치로 바꾸지 말자.
      • 인터페이스에서 이미 체크박스를 사용하고 있다면 계속 사용하는 것이 좋다.

 

2. Checkboxes

체크박스는 버튼이 꺼져 있을 때는 비어 있고, 버튼이 켜져 있을 때는 체크 표시가 있고, 버튼 상태가 혼합되어 있을 때는 대시를 포함할 수 있는 작은 사각형 버튼입니다. 일반적으로 확인란의 뒤에는 제목이 포함됩니다.
A checkbox is a small, square button that’s empty when the button is off, contains a checkmark when the button is on, and can contain a dash when the button’s state is mixed. Typically, a checkbox includes a title on its trailing side.

1. 설정계층을 표시해야 하는 경우 스위치 대신 체크박스를 사용하라.
   • 체크박스의 시각적 스타일은 잘 정렬되고 그룹화를 전달하는 데 도움이 된다.
   • 일반적으로 체크박스의 앞쪽 가장자리를 따라 정렬과 들여쓰기를 사용하면 체크박스의 상태가 하위 체크박스의 상태를 제어하는 경우와 같은 종속성을 표시할 수 있다.
2. 2개 이상의 상호 배타적인 옵션을 표시해야 하는 경우 라디오 버튼을 사용해라.
   • 온/오프 이외의 옵션 중 선택해야 하는 경우엔 여러 개의 라디오 버튼을 사용하면 고유한 label 로 각 옵션을 명확히 하는 데에 도움이 될 수 있다.
3. 관계가 명확하지 않은 경우 라벨을 사용하여 체크박스 그룹을 사용하는 것을 고려해봐라.
   • 옵션 세트를 설명하고 label의 기준선을 그룹의 첫번째 체크박스에 맞춘다.
4. 체크박스의 상태를 모양에 정확하게 반영하라.
   • 체크박스의 상태에는 selected , deselected , mixed 가 있다.
   • 여러 하위 체크박스들을 전역적으로 켜고 끄는 경우 하위 체크박스의 상태가 다를 때에 mixed 상태로 표시한다.
     https://developer.apple.com/documentation/appkit/nsbutton/1528670-allowsmixedstate

mixed 상태를 허용하는 지에 대한 여부를 나타내는 boolean 프로퍼티

allowsMixedState | Apple Developer Documentation

 

 

3. RadioButtons

라디오 버튼은 작은 원형 버튼과 라벨이 붙은 것입니다. 일반적으로 2~5개의 그룹으로 표시되는 라디오 버튼은 상호 배타적인 선택 항목 집합을 나타냅니다.
A radio button is a small, circular button followed by a label. Typically displayed in groups of two to five, radio buttons present a set of mutually exclusive choices.

1. 상호 배타적인 옵션을 제공하려면 라디오 버튼 세트를 선호한다.
   • 한 세트에서 여러 옵션을 선택할 수 있도록 하려면 체크박스를 대신 사용하라.
2. 한 세트에 라디오 버튼을 너무 많이 나열하지 말아라.
   • 라디오 버튼의 긴 리스트는 인터페이스에서 많은 공간을 차지하며 부담스러울 수 있다.
   • 5개 이상의 옵션을 제시해야 한다면 팝업 버튼과 같은 구성요소를 대신 사용해도 좋다.

1. 온/오프와 같은 단일 설정을 제시하려면 체크박스를 선호한다.
   • 단일 라디오 버튼으로도 온/오프를 할 수 있지만, 체크박스의 체크 표시가 있는지의 여부가 현재 상태를 더욱 쉽게 이해할 수 있다.
   • 단일 체크박스가 반대 상태를 명확하게 전달하지 못하는 경우 (매우 드뭄)에는 제어 상태를 지정하는 label이 있는 라디오 버튼 쌍을 사용할 수도 있다.
2. 라디오 버튼을 가로로 표시할 때 일관된 간격을 사용하라.
   • 가장 긴 버튼의 label을 수용하는 데에 필요한 공간을 측정하고 해당 측정값을 일관되게 사용하라.

 

토글 외에도 모든 플랫폼은 각 상태에 대해 서로 다른 모양을 사용하여 토글처럼 작동하는 버튼도 지원한다.

https://developer.apple.com/documentation/SwiftUI/ToggleStyle

ToggleStyle | Apple Developer Documentation

 

 

Best Practices

1. 토글을 사용하면 사람들이 콘텐츠 상태나 보기에 영향을 미치는 두 가지 값 중에서 선택할 수 있다.
2. 전환이 영향을 미치는 설정, 보기 또는 콘텐츠를 명확하게 식별한다.
   1. 일반적으로 주변 상황은 사람들이 무엇을 온/오프 하는지 이해할 수 있도록 충분한 정보를 제공한다.
   2. 경우에 따라 macOS에서는 토글 컨트롤 상태를 설명하는 label을 제공할 수도 있다.
   3. 토글처럼 작동하는 버튼의 경우 일반적으로 목적을 전달하는 인터페이스 아이콘을 사용하고, 현재 상태에 따라 일반적으로 배경을 변경하여 모양을 업데이트 한다.
3. 토글 상태의 시각적 차이가 분명한지 확인한다.
   1. 색상 채우기를 추가 또는 제거, 배경 모양을 표시 또는 숨김, 확인 표시나 점과 같은 표시되는 내부 상세 정보를 변경하여 표시할 수 있다.
   2. 일부 사람들은 차이점을 인식할 수 없으므로 상태 전달을 위해 서로 다른 색상에만 의존하지는 말자.

 

결론

HIG에서는 스위치 토글을 리스트 행 내에서 사용하는 걸 권장하고 있다. 그리고 리스트 외부에서는 스위치가 아닌 토글처럼 작동하는 버튼을 사용하도록 한다.

또한, 해당 버튼의 목적을 설명하는 label은 사용하는 것을 지양하고 있다.

따라서, 토글 버튼과 버튼을 설명하는 label을 없애고 토글처럼 동작하는 버튼만 추가한 뒤 배경을 통해 버튼의 selected를 나타내면 좋을 것 같다.

요렇게~ by 아이폰 기본 캘린더 앱