[UI/UX Challenge] Buttons - Close Buttons, Common Button Types

0. Background

썸네일 샤라웃 투 28기 아팟장 프린스송...
29기 SOPT iOS파트에서 'UI/UX Challenge' aka '유쾌한 육회스터디'스터디를 하게 되었다.
일주일동안 애플에서 제공하는 HIG(Human Interface Guide)문서를 읽어보면서 해당하는 사례들을 분석하는 스터디인데, 'UX'라는 것을 처음 접해보기도 하고, 항상 이미 나온 디자인대로 개발만하다가 어떻게 하면 조금 더 나은 사용자 경험을 줄 수 있을까?를 분석하다 보니까 상당히 흥미로웠다...
1주차에는 버튼 중 Close Buttons, Common Button Types를 분석하며 공부했던 내용을 정리해보려고 한다.

1. Close Buttons

❗️Close Button은 parent view를 닫는 역할을 하고, 위에 구석 코너에 위치합니다.

A close button closes its parent view. Display a close button in the top trailing corner of a sheet or a self-contained view in a collection.

왼쪽 예제 → 싱글 뷰 : San Francisco가 보이는 화면이 오른쪽 X버튼을 누르면 꺼지게 됩니다

오른쪽 예제 → in Collection : 컬렉션 안에 있는 화면들이 오른쪽 X버튼을 누르면 삭제되게 됩니다

❗️Within a view, provide either a close button or a done button — don’t provide both.
❗️뷰 안에서 close button 이나 done button 중 하나만 들어가게 해야합니다.

✅ 이유가 뭔가요?

Close and done buttons both dismiss the view, but because they’re not opposite actions, providing both presents a confusing choice.

Close button 과 done button은 둘다 뷰를 사라지게 하는 기능을 가지고 있습니다.
따라서, 같은 뷰에서 둘다 제공하는것은 사용자를 헷갈리게 할 수 있습니다.

✅ 그럼 언제 어떤걸 사용해야 할까요? Done Button vs. Close Button

In general, use a done button when people can make changes in the view — in this scenario, you might also want to add a cancel button to let people explicitly discard their changes when they dismiss the view.

❗️Done Button : 수정이 가능한 뷰

→ 이 경우에는 사용자가 수정한 내용을 버리고 싶을 경우를 대비해서 cancel 버튼도 함께 넣어주면 좋습니다.

A close button doesn’t signal that it saves or discards changes, so it works well in a view that people can’t edit, or in a view that people can remove from a set of views.

❗️Close Button : 수정이 불가능한 뷰 또는 삭제가 가능한 뷰

→ Close Button은 사용자의 변경사항을 저장하거나 버린다는 뜻을 내포하지 않습니다.

✅ 간단하게 정리를 하자면,

• Close Button은 창을 꺼줄때나 컬렉션에서 아이템을 삭제할때 쓰입니다.
• 보통 뷰의 상단 코너에 넣어줍니다.
• 수정이 가능한 뷰에서는 Done Button을, 수정이 불가능한 뷰 또는 삭제가 가능한 뷰에서는 Close Button을 활용하며, 두개를 동시에 사용하지 않습니다.

✅ 개인적인 의견

• Modal창에서 dismiss 해줄 때 가장 많이 쓰이는 것 같습니다.
• 계속 봐야하는 뷰 보다는 일시적인 성격이 강한 뷰에서 많이 본 기억이 납니다... 예를 들면 광고 팝업 같은?
• 왼쪽 상단 보다는 오른쪽 상단에 많이 배치되는 것 같습니다.

2. Close Buttons 예제 탐구

❗️우선 Close Button 예제를 먼저 살펴보겠습니다.쿠팡 Coupang
앱을 들어갈때마다 밑에서 나오는 광고를 끌 수 있도록 오른쪽 상단 구석에 X 버튼이 있습니다.
광고 화면은 일시적인 뷰라고 할 수 있겠네요!

인스타그램 Instagram
스토리를 보면 오른쪽 상단 구석에 X 버튼이 있습니다.
스토리도 시간이 지나면 사라지는.. 어떻게 보면 일시적인 뷰라고 할 수있을까요?
개인적으로 항상 쓸어내리는 제스쳐로 스토리 화면을 꺼서 저기에 있는지도 몰랐네요...

지니뮤직
지니뮤직의 Close Button은 조금 특이하다고 생각했던 점이, 일단 왼쪽 상단에 X표시가 아닌 아래로 향한 화살표 V모양의 Close Button이 있습니다.
보통 X모양의 버튼은 아예 화면이 사라지는 느낌을 주는데, V모양은 뭔가 아래로 내려가서 어디에 남아있을 것만 같습니다... 눌러보니 아래에 저렇게 플레이어로 남아있네요!

❗️Done Button 예제들입니다.

• 항상 이전 뷰에 있던 편집 버튼이 완료 버튼으로 바뀝니다. → 둘은 세트라고 볼 수 있겠네요!?
• 테이블뷰가 있는 화면에 많이 등장하는 것 같습니다. 편집을 누르면 테이블 뷰 안에서 순서 편집이 되는 형태가 가장 흔합니다. → 아까 Done Button은 수정이 가능한 뷰에서 쓰인다고 했었죠!
  

아이폰 기본 앱 'Watch'
왼쪽 화면에서 '편집' 을 누르게 되면, '나의 페이스' 뷰가 모달창으로 뜨면서 상단 오른쪽 구석에 '완료' 버튼이 생기고, 밑에는 테이블 뷰 가 등장하면서 자유롭게 수정이 가능합니다.

아이폰 기본 앱 '음악'
왼쪽 화면에서 '편집' 을 누르게 되면, '보관함' 뷰에 있던 플레이리스트부터 다운로드된 항목까지가 애니메이션과 함께 전체 테이블뷰로 펼쳐지면서 상단 오른쪽 구석에 '완료' 버튼이 생기고, 자유롭게 수정이 가능합니다.

3. Common Button Types

Common Button Type은 시스템 안에서 일관된 기능을 가진 버튼을 말합니다.
예를 들면, info 버튼은 항상 정보를 준다는 뜻을 내포하고 있어야 합니다.

People instantly recognize several specific button types because these buttons behave consistently throughout the system. For example, an info button always reveals details related to the current context or view.

만약에 Common Button을 하나 생성한다면, 그 버튼은 정말 "뻔하게" 동작해야합니다.

예를 들어, ➕ ← 이런 플러스 사인을 가지고 있는 아이콘은 누가봐도 아이템을 추가하는 .. 뜻을 가지고 있겠죠?

왼쪽 i 버튼과 오른쪽 > 버튼의 차이점을 아시겠나요?

뭔가 두개 다 똑같은 기능을 하고 있는 것같은데... 저도 그렇게 생각했습니다...

하지만 두 버튼은 다른 기능을 가지고 있습니다!

왼쪽 i 버튼은 info button 또는 detail disclosure button이라고 불립니다.

이 버튼은 그야말로 그 list item에 대한 정보를 제공합니다. 그리고 navigation 기능을 제공하지 않습니다!

그래서인지 클릭해보면 모두 다음 화면이 모달로 뜨는 것을 볼 수 있습니다!!!

오른쪽 > 버튼은 disclosure indicator accessory control이라고 불리는 것인데요...

놀랍게도 해당 item에 대한 정보를 제공하는 것이 아니라, 그 다음 레벨로 넘어가는 넥스트레벨
계층의 다음으로 넘어가는 기능을 제공합니다.

그러니까 저 item은 큰 카테고리라고 생각하고, 그 카테고리 안으로 한층 더 깊이 파고 들어갈때 쓰이는 것이라고 생각하면 될 것 같아요!

4. Common Button Types 예제 탐구

아이폰 기본 앱 '시계'
이 예제를 택한 이유는 위에서 본 Close/Done Button 과 Common Button Type이 같이 있었기 때문입니다...
알람 탭을 들어가서 왼쪽 상단 구석에 '편집' 버튼을 누르면 밑에 있는 알림들이 애니메이션과 함께 오른쪽으로 밀리면서 토글 버튼이 사라지고 왼쪽에 - 버튼이 생깁니다.
이 - 버튼은 정말 누가봐도 터치하면 해당 아이템이 사라질 것 처럼 생겼죠? 직관적인 아이콘이 맘에 들었습니다...

-버튼을 누르면 해당 아이템이 살짝 옆으로 밀리면서 삭제가 활성화됩니다.

근데 여기서 살짝 띠용했던것은 HIG 공식문서에서 '>' 버튼은 해당 아이템의 정보를 보여주기 보단 다음 계층으로 넘어가는것을 표현한다고 했는데, 여기서는 '>' 버튼을 누르면 모달창이 표시되면서 해당 아이템 편집 창이 열리더라구요? 뭐 어느 장단에 맞추라는

아이폰 기본 앱인만큼 HIG 가이드라인을 다른 앱들 보다 잘 따를 것 같았는데.. 음
여기에서는 뭔가 info 버튼과 동일한 효과를 주는 것 같았습니다.

5. 구현

코드는... 이거 한줄만 추가하면 됩니다!

tableView.setEditing(true, animated: true)