H.I.G: Human Interface Guideline(스위프트 하이) - Navigation

HIG: Human Interface Guideline (=사용자 인터페이스 지침서)

즉, 절대적으로 이 지침을 따라야 한다는 것이 아니라 앱 개발과 디자인에 있어 "권장"하는 내용이다.

무분별한 백지개발로 퀄리티가 낮은 앱이 개발되는 것을 예방하고, 어느 정도 일정한 패턴과 형식을 가진 앱을 개발하기를 바라는 마음에서 만들어진 지침이다.

 

https://www.youtube.com/playlist?list=PLLFDewH7eSVxGMERS4CrwkDXXYZoE5mVZ 

온라인 독서모임

오늘 공부한 내용은 '스위프트 하이 유튜브 온라인 독서모임'의 'Navigation'이다.

앱 개발 간 앞으로 고려해야할 내용들이기에 공부하게 되었다.

 

 

< 요약 >

1. Navigation은 사용자가 사용한 줄 모를 정도로 자연스러워야 한다.

2. iOS에서의 Navigation style 3가지

   •Hierarchy Navigation(계층적 형태)

   •Flat Navigation(평면적 형태)

   •Content-Driven or Experience-Driven Navigation(콘텐츠(경험) 주도적 형태)

3.  화면전환은 사용자에게 Logical(논리적이고), Predictable(예상할 수 있고), easy to follow(따르기 쉬워야) 한다.

4. 최소한의 Tap, Swipe, Screen으로 사용자가 원하는 정보를 얻을 수 있게 해라.

5. Fluidity(유연한 화면전환)을 위해 Touch gesture를 이용해라.

6. 기본적인 Navigation component를 사용해라.

7. 동등한 Contents 카테고리나 기능을 보여주기 위해서는 Tab bar를 이용해라.

8. 같은 종류의 컨텐츠로 여러 Page가 있으면, Page control을 이용해라.

9. Segmented control과 Toolbar는 Navigation을 사용할 수 없다. 

 

< Navigation >

1. 일반 사용자는 Navigation을 본인의 예상이나 기대를 벗어나지 않으면 인식하지 못한다. (그만큼 자연스러워야 하고, 사용자가 의문을 품게 만들어서는 안 된다.) 예를 들어, '뒤로 가기'라는 버튼을 눌렀는데 로그인 화면이 나오면 얼마나 당황스러울까(이정도면 버그임.)

2. iOS에서는 3가지 Navigation style이 있다.

 

  _가) Hierarchy Navigation: 계층적 형태

    - 연관된 Context끼리 연결되는 모습

    - 사용자가 원하는 Context에 도달하기 위해 단 하나의 선택지만 존재해야하며, 사용자가 다른 Context를 이용하기 위해서는 뒤로 가거나, 첫 화면으로 돌아가야 한다.

    - 설정이나 메일이 이러한 Navigation style을 사용한다.

<Hierarchy Navigaion: 계층적 형태>

 

 _ 나) Flat Navigation: 평면적 형태

    - 연관성이 없는 Context 간의 구분. 주로 TabView를 말함.

    - Music과 App Store에서 이러한 Navigation style을 사용한다.

<Flat Navigation: 평면적 형태>

 

  _다) Content-Driven or Experience-Driven Navigation: 콘텐츠(경험) 주도적 형태

    - Contents를 통해 자유롭게 이동하거나 Contents 그 자체로 Navigation을 정의한다.

     (뭐라는 거임? -> 단순히 NavigationView와 TabView 외의 스타일이라는 말이다.)

    - 게임, Mobile book, 그 외 몰입형 앱들이 주로 이러한 Navigation style을 사용한다.

<Content-Driven or Experience-Driven Navigation: 콘텐츠(경험) 주도적 형태>

3. 명확한 경로를 제공해라.

   - 사용자는 항상 앱 어디에 무엇이 있는지와 목적지에 도달하기 위한 방법을 알 수 있어야 한다.

   - Navigation style 외의 방식일지라도, Contents를 통한 이동은 Logical(논리적이고), Predictable(예상할 수 있고), easy to follow(따르기 쉬워야) 한다.

 

4. 최소한의 Tap, Swipe, Screen으로 사용자가 원하는 정보를 얻을 수 있게 해라.

 

5. Fluidity(유연한 화면전환)을 위해 Touch gesture를 사용해라.

   - 예를 들어, 좌->우 Swipe하여 뒤로가기 또는 우->좌 Swipe 하여 앞으로 가기

 

6. Standard Navigation component를 사용해라. 사용자에게 친숙하고 직관적으로 알기 때문이다. Custom하여 만들 수 있지만, 꼭 필요한 것이 아니라면 하지 말자. 개발자원낭비가 심하다.

 

7. 동등한 Contents 카테고리나 기능을 보여주기 위해 Tab bar를 사용해라. Tab bar를 사용하는 방식은 사용자가 쉽고 빠르게 카테고리를 전환하기 용이하다. 슬라이드 메뉴(햄버거)는 지양할 것.

 

8. 같은 종류의 컨텐츠로 여러 Page가 있으면, Page control을 사용해라. (단, 10페이지를 넘기면 사용자가 지루해할 수 있다. 책이나 웹툰 등은 예외.)

 

9. Segmented control과 Toolbar는 Navigation을 사용할 수 없다. Tab bar보다 작은 카테고리를 구분할 때 Segmented control을 사용함. Toolbar는 Navigationbar의 멀티 개념이다.

<Segmented control>

 

< 애플 HIG공식문서 - Navigation >

https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/navigation/

Navigation - App Architecture - iOS - Human Interface Guidelines - Apple Developer