[HIG Study] agoda 앱으로 공부하는 HIG

저번 주부터 HIG(Human Interface Guidelines) 스터디를 시작했습니다. 

매주 특정 앱을 연구 대상으로 정하고, 해당 앱을 사용하면서 불편한 점이나 궁금한 점을 파악합니다. 

이어서 관련된 HIG 문서를 통해 이론을 공부하고 내용을 정리하여 발표하는 형식의 스터디입니다. 

이번 주 대상은 'Agoda' 앱이었습니다.

---

agoda

 

 

Agoda 앱은 많은 컬렉션 뷰를 스크롤 뷰 위에 배치하여 사용하고 있습니다. 

이러한 구조가 흔하지만, 많은 스크롤 뷰 사용에 대해 애플의 관점이 궁금해졌습니다. 

따라서 이번 스터디에서는 "Scroll View"에 대해 자세히 조사해 보았습니다.

---

📌 Scroll views

• 사람들이 뷰의 경계보다 큰 컨텐츠를 세로 또는 가로로 움직여서 볼 수 있게 해준다.

Best Practices

1. 기본 스크롤 제스처와 키보드 단축키를 지원해라.
   • 뷰를 위해 맞춤형 스크롤 기능을 만들 때에는, 사람들이 기대하는 탄력적인 동작을 사용하도록 확실히 하자.
     • 탄력적인 동작: 더 이상 스크롤할 곳이 없을 때, 살짝 늘어났다가 다시 원래 위치로 돌아오는 것
       → 자연스런 스크롤 경험 제공
2. 컨텐츠가 스크롤 가능하다는 것을 분명히 보여줘라.
   • 스크롤 바가 항상 보이지 않기 때문에, 컨텐츠가 뷰를 넘어 확장될 때 분명하게 드러내줘야 도움이 된다.
     • 뷰의 가장자리에 일부 컨텐츠를 부분적으로 표시
3. 스크롤 뷰 안에 같은 방향을 가진 다른 스크롤 뷰를 넣는 것은 피해라.
   • 같은 방향 스크롤 뷰의 중첩 x
   • 수평 스크롤 뷰를 수직 스크롤 뷰 안에 넣는 것은 o (반대도 o)
4. 우리의 컨텐츠에 맞다면 페이지 단위 스크롤을 고려하자.
   • 상황에 따라 사람들은 연속적인 스크롤보다 한 번의 상호 작용에 고정된 양의 컨텐츠를 스크롤하는 것을 선호한다.
     • 대부분의 플랫폼에서는 ‘페이지’의 크기를 정의할 수 있다.
       • ex) 책 플랫폼에서는 책의 한 페이지를 정의할 수 있다.
       PagingScrollTargetBehavior | Apple Developer Documentation
5. 상황에 따라, 사용자가 위치를 찾을 수 있도록 자동으로 스크롤하는 기능을 제공하자.
   • 특정 검색어를 찾을 때 보이지 않는 영역에 있다면 선택된 내용이 보이도록 자동 스크롤
   • 사용자가 보이지 않는 위치에 정보를 입력하기 시작할 때
   • 사용자가 선택을 하는 동안 포인터가 뷰의 가장자리를 넘어갈 때
   ⇒ 모든 경우에, 사용자가 맥락을 유지할 수 있도록 필요한 만큼만 스크롤해야 한다.
   
   
6. 확대/축소 기능을 지원한다면, 적절한 최대 및 최소 스케일 값을 설정하자.
   • 텍스트를 확대하여 단일 문자가 화면을 채우는 것은 말이 되지 않는다.

iOS

• 일반적으로 한 화면에 하나의 스크롤 뷰를 표시하자.
  • 유저는 큰 스와이프 동작을 자주 사용하며, 인접한 스크롤 뷰와 상호 작용하는 것을 피하기 어렵게 만든다.
  • 한 화면에 두 개의 스크롤 뷰를 두어야 하는 경우, 서로 다른 방향으로 스크롤할 수 있도록 고려하자.
    • 그래야 한 번의 제스처로 두 뷰가 모두영향을 받을 확률이 줄어든다.

(+

여기서는 세로 방향 스크롤 뷰일때를 말하는 것 같았습니다. 
그래서 가로 스크롤 뷰는 여러 개를 써도 크게 문제가 없을 것 같다고 생각했습니다.

(잘못 이해한 걸 수도..)

)

 

---

나의 생각

아고다 앱은 크게 HIG에서 벗어나는 UI는 없었습니다.

 

굳이 굳이 찾자면...

Scroll View를 쓸 때는 사용자에게 Scroll View인 것을 티를 내줘야 한다는 것 입니다.

 

하지만, 아래 View에서는 Scroll View의 양 끝의 요소가 크게 보이지 않아 티가 나지 않았습니다!

(끝까지 넘겼을때 화면을 보면 양 끝의 다음 요소들이 조금도 보이지 않았습니다.😿)