Android VS. iOS (6)
List Controls
13. List Controls
List control은 앱에서 필수적인 컴포넌트이다. Multiple section, single selection, switches, reorder grippers, leave-behinds and expand/collapse toggles와 같은 list control에 대해서 소개하도록 하겠다.
13-1. Multiple Selection: Checkboxes VS. Checkmark with Circle
Android는 다중 선택을 위해 checkbox를 사용한다. 체크가 표시된 박스는 선택된 아이템을 나타내고, 체크가 없는 박스는 선택되지 않은 아이템을 나타낸다. 체크박스는 웹사이트나 데스크톱 OS에서도 다중 선택을 위한 컴포넌트로 사용된다. iOS에서는 다중 선택을 위해 체크가 표시된 원형이 사용된다. 그러나 이 형상은 사용자를 radio button과 혼동하게 만들 수 있다.
Android checkbox는 좌측이나 우측에 위치할 수 있지만, iOS는 보통 다중 선택 컨트롤을 좌측에 배치한다.
Android는 때때로 checkbox를 기능을 켜고 끄는 용도로 사용하지만, iOS는 기능을 켜고 끄는 용도로는 원형 컨트롤보다는 switch button을 사용한다.
13–2.Single Selection: Radio Buttons/ Checkmarks VS. Checkmarks
웹페이지나 데스크톱 OS에서처럼, Android도 단일 선택 컨트롤로 radio button을 사용한다. Radio button 은 선택되었을 경우 점이 찍힌 원형으로 표시한다. Radio button은 하나만 선택될 수 있는 두 개 이상의 아이템들에서 사용된다.
iOS는 radio button이 없지만, 대신에 checkmark를 사용한다.
Android는 리스트의 우측에 radio button을 배치하지만, 점차 좌측에 배치하는 경우도 많이 보이고 있다. iOS는 checkmark를 우측에 배열하지만, 우측에 page indicator와 같은 다른 아이템이 있을 경우 좌측에 배치되기도 한다.
Material Design Guideline에서 checkmark를 소개하고 있지는 않지만, 2016년부터 checkmark가 조금씩 사용이 되고 있다. Google Calendar에서 checkmark를 찾아볼 수 있다.
Andorid의 Radio button과 Checkmarks. 좌측은 좋지 않은 예이다. 단계가 더 많아지긴 하지만 Cancel이 아닌 OK 버튼이 적용되어야 한다.13–3. Switches
Switch는 두 가지 중 하나만 선택할 수 있는 상태를 토글 하기 위해 사용된다. On과 Off 상태를 전환하는 것이다. 과거에는 Android는 switch가 없었으며, 기능을 켜고 끄는데 checkbox를 사용했었다. 그러나 이제는 switch를 점점 많이 사용하는 추세이다. iOS는 기능을 켜고 끄는데 항상 switch를 사용한다. Android와 iOS 모두 switch를 리스트의 우측에 배치한다.
Android 설정의 on & off : Gmail은 checkbox를 사용하고 Photos는 switch button을 사용한다.13–4. Reorder/Gripper
Android는 재배열을 하는 컨트롤을 navigation drawer를 열고 닫는 3개의 가로선으로 되어 있는 hamburger 아이콘과 구분하기 위해 4개의 가로선으로 구성되어 있는 형태로 사용한다. Reorder 아이콘은 주로 편집 모드에서 나타난다.
iOS의 gripper 아이콘은 안드로이드보다 오래되었다. 역시 편집 모드에서 찾아볼 수 있다. 그러나 iOS의 gripper는 Android처럼 drawer를 기본적으로 사용하지 않기 때문에 3개의 라인으로 되어 있다.
13–5. Leave-behinds (Swipe Actions)
좌측이나 우측으로 swipe를 하면, list에 숨겨져 있던 숨겨진 액션들을 발견할 수 있다. iOS에서는 매우 자주 사용되는 컨트롤이다. 과거에는, swipe 했을 때 delete액션을 찾아볼 수 있었지만, 지금은 delete 외에 더 많은 액션들이 적용되고 있다. Mail app에서는, archive, flag이 적용되어 잇고, 좌측으로 더 swipe를 하면 읽음 상태로 전환하거나, 우측으로 swipe 하면 읽지 않음 상태로 전환할 수 있다.
Android는 5.0 이후에 Leave-Behinds라고 불리는 swipe 액션이 가이드라인에 나타났다. Leave-Behinds는 tab이 적용된 화면에서는 사용되어서는 안 된다. 왜냐하면 tab을 이동하는 제스처와 충돌하기 때문이다. 이 컴포넌트가 기존에는 존재하지 않았던 이유이기도 하다.
리스트를 일정 거리로 swipe 하고 멈추면, 1~3개의 액션이 나타나고 tap 해서 액션을 수행할 수 있다. 좀 더 멀리 swipe를 하면 기본 액션이 바로 수행된다. Android는 한 가지 액션만 나타나고 길게 swipe 하면 그 액션이 수행된다.
Image Source: Google Material Design & Facebook Design13–6. Expand/Collapse
Expand/Collaps는 계층 구조를 단순하게 만들 수 있다. 정보를 한 화면에서 모두 볼 수 있게 해 주어 사용자가 정보를 보기 위해 다음 화면으로 들어가지 않아도 되기 때문이다. 이 컨트롤은 FAQ 리스트에서 자주 볼 수 있다. 질문을 선택하면, 답변이 나타난다. 이러한 QA를 살펴보는데 단계가 거의 필요 없다.
Expand/Collaps리스트는 header에 적용하여 사용자가 자주 사용하지 않는 그룹을 collapse 할 수 있도록 할 수도 있다.
Image Source: Google Material Design GuidelineExpand/Collapse는 iOS Human Interface Guidelines에는 명시되어 있지 않으며, iOS 앱에서도 거의 찾아볼 수 없다. 유사한 컨트롤이 iOS8의 App store의 Exploare 화면에 있기는 하다. 하지만 이것은 expand/collapse라기보다는 path에 가깝다. 한 화면에서 그룹핑된 다른 아이템들을 볼 수가 없기 때문이다.
iOS8 App store