[HIG-Sheets] 아고다 앱 UX 분석을 통한 HIG 정리 - 3주차 스터디

Pain Point

아고다앱 캡쳐

숙소 하이라이트에 대한 각 내용들이 나열되어있고 내용 오른쪽에 information 버튼이 있어서 클릭했더니 별 내용도 없는 게 바텀 시트로 구현이 되어있었다.

1. 별 내용도 없는데 왜 굳이 바텀시트로 구현해서 유저가 2번 클릭하도록 했을까? .. 별로 도움도 되는 내용도 아님 ..
2. 그리고 바텀시트 높이도 너무 짧아서 생각보다 읽기가 너무 불편했다.
3. X 버튼의 위치가 오른쪽이 아닌 왼쪽에 있다. 우리가 익숙한 위치는 오른쪽이라고 생각했는데? 그래서 난 바텀시트를 내릴 때 저 X 버튼을 사용하지 않고 뒷 배경화면을 클릭해서 내려가도록 했다.

 

Sheets

시트는 사람들이 현재 컨텍스트와 밀접하게 관련된 범위가 지정된 작업을 수행하는 데 도움이 됩니다.
A sheet helps people perform a scoped task that’s closely related to their current context.

Best Practices

• 시트를 사용하여 간단한 콘텐츠나 작업을 제시하라.
  • 시트를 사용하면 상위 뷰 중 일부를 계속 볼 수 있으므로 사람들이 시트와 상호 작용할 때 원래 컨텍스트를 유지할 수 있다.
• 복잡하거나 장기간의 사용자 흐름의 경우 시트에 대한 대안을 고려하라.
• 기본 인터페이스에서는 한 번에 하나의 시트만 표시하라.
  • 시트를 닫으면 사람들이 다른 시트로 돌아가게 되어 앱에서 현재 위치를 추적하지 못할 수 있다.
  • 시트 내에서 수행한 작업으로 인해 다른 시트가 나타나는 경우 새 시트를 표시하기 전에 첫 번째 시트를 닫아라.
• 상위 뷰의 기본 작업에 영향을 미치는 추가 항목을 표시하려면 비모달 뷰를 사용하라.

iOS, iPadOS

비모달 시트가 화면에 표시되면 사람들은 해당 기능을 사용하여 시트를 닫지 않고 상위 뷰의 현재 작업에 직접 영향을 준다.

예를 들어 iPhone 및 iPad의 Notes는 비모달 시트를 사용하여 사람들이 메모를 편집할 때 다양한 텍스트 선택 항목에 다양한 서식을 적용할 수 있도록 돕는다.

• 크기 조정 가능한 시트는 사용자가 내용을 스크롤하거나 시트 상단에 작은 수평 표시기인 그래버 를 드래그 하면 확장된다.
• 시트 크기는 시트가 자연적으로 놓이는 특정 높이인 멈춤쇠 에 따라 조정된다 . iPhone용으로 설계된 멈춤쇠는 시트가 자연스럽게 놓이는 특정 높이를 지정한다.
• 시스템은 두 개의 멈춤쇠를 정의한다. large는 완전히 확장된 시트의 높이이고 medium은 완전히 확장된 높이의 약 절반이다.
• iPhone 앱에서는 시트 내용을 점진적으로 공개할 수 있도록 중간 멈춤쇠를 지원하는 것이 좋다.
  • 반대로, 시트 내용이 전체 높이로 표시될 때 더 유용하다면 중간 멈춤쇠를 지원하지 않을 수도 있다. 예를 들어 메시지 및 메일의 작성 시트는 사람들이 콘텐츠를 생성할 수 있는 충분한 공간을 제공하기 위해 전체 높이로만 표시된다.
• 스와이프하여 시트를 닫는 기능을 지원한다.
  • 사람들은 닫기 버튼을 누르는 대신 수직으로 스와이프하여 시트를 닫기를 기대한다.
  • 사람들이 스와이프하여 시트를 닫을 때 시트에 저장되지 않은 변경 사항이 있는 경우 작업 시트를 사용하여 작업을 확인할 수 있도록 하라.
• 사람들이 기대하는 대로 완료 및 취소 버튼을 배치한다.
  • 일반적으로 완료 또는 해제 버튼은 시트의 오른쪽 위 모서리(왼쪽에서 오른쪽 레이아웃) 또는 왼쪽 위 모서리(오른쪽에서 왼쪽 레이아웃)에 속한다.
  • 취소 버튼은 시트의 왼쪽 상단(왼쪽에서 오른쪽 레이아웃) 또는 오른쪽 상단(오른쪽에서 왼쪽 레이아웃)에 속한다.

 

Button - Help Buttons

뷰 내에 도움말 버튼이 나타나고 앱별 도움말 문서가 열린다.
A help button appears within a view and opens app-specific help documentation.

• 도움말 문서를 표시하려면 시스템에서 제공하는 도움말 버튼을 사용하라.
  • 사람들은 표준 도움말 버튼의 모양에 익숙하며 이 버튼을 선택하면 도움말 콘텐츠가 열린다는 것을 알고 있다.
• 가능하면 현재 컨텍스트와 관련된 도움말 항목을 연다.
  • 예를 들어 메일 설정의 규칙 창에 있는 도움말 버튼을 누르면 메일 사용자 가이드에서 이러한 설정을 변경하는 방법을 설명하는 도움말 항목이 열린다.
  • 현재 컨텍스트에 직접 적용되는 특정 도움말 항목이 없는 경우 사람들이 도움말 버튼을 선택할 때 앱 도움말 문서의 최상위 수준을 엽니다.
• 윈도우 당 도움말 버튼을 하나만 포함하라.
  • 동일한 컨텍스트에 여러 개의 도움말 버튼이 있으면 사람들이 하나를 클릭했을 때의 결과를 예측하기가 어렵다.
• 사람들이 찾을 것으로 예상되는 곳에 도움말 버튼을 배치하라.

• 윈도우 프레임이 아닌 뷰 내에서 도움말 버튼을 사용하라.
  • 예를 들어 toolBar나 status Bar에 도움말 버튼을 배치하지 마라.
• 도움말 버튼을 소개하는 텍스트를 표시하지 마라.
  • 사람들은 도움말 버튼의 기능을 알고 있으므로 추가 설명 텍스트가 필요하지 않다.

Solution

비모달 시트가 화면에 표시되면 사람들은 해당 기능을 사용하여 시트를 닫지 않고 상위 뷰에 현재 작업을 직접 영향을 준다.

• 비모달 시트 자체는 유저가 시트를 닫지 않고 상위 뷰에 현재 작업을 직접적으로 영향을 줄 때 사용한다고 한다. 근데 아고다 앱에서 사용하고 있는 비모달 시트의 기능은 작업에 대한 영향이 아닌 해당 라벨에 대한 자세한 내용을 제공하기 위해 사용하고 있다.
• 일단 쓰임새가 비모달 시트와 맞지 않다.
• help Button의 쓰임새를 보면 윈도우 당 하나의 도움 버튼을 포함하라고 했지만 해당 뷰에는 버튼이 5개나 있다. 해당 뷰엔 도움말 버튼 마저 쓰임이 맞지 않은 것이다.
• 저 정도의 정보를 제공한다면 그냥 Label로 한꺼번에 제공했으면 어땠을까?
  • 그럼 유저도 여러번 클릭할 일 없이 한 눈에 볼 수 있다.
  • help Button을 굳이 사용하지 않고도 충분히 정보를 받을 수 있다.