2023 Apple 디자인 챌린지 - Part 1: Navigation + Workflow

* 에반젤리스트 Evangelist
: 기독교에서 신앙을 전파하는 전도사처럼, IT 분야에서는 자신들의 기술을 시장에 전파시키고 확산시키는 역할을 하는 사람들을 말함

 

좋은 인터페이스란?

• 예측 가능성과 안정성 - 튜토리얼이 필요없는 직관적인 설계
• 명확하고 도움이 되는 정보 
• 자연스럽고 단순한 워크플로우
• 즐거운 경험 - 앱과 감정적 연결

 

디자인 챌린지 Part 1

1. 내비게이션 Navigation 

- 길 찾기

- 멘탈 모델

2. 워크플로우 Workflow

- 점진적 공개

- 80/20 규칙

 

1. 내비게이션 Navigation 

길찾기 Wayfinding

어디로 가야할 지 알려주는 정보 제공.

좋은 길 찾기는 다음 질문에 대한 답을 준다

- 내가 어디에 있지?

- 어디로 가야하지?

- 거기로 가면 무엇을 찾을 수 있지?

- 근처에 무엇이 있지?

- 어떻게 나갈 수 있지?

 

멘탈 모델 Mental Model

시스템 모델 System Model

상호작용 모델 Interaction Model

ex) 수도꼭지

 

우리가 만드는 앱은 사용자들이 사용하는 수많은 앱 중 하나로, 그 수많은 앱들을 사용한 경험을 바탕으로 사용을 하기 때문에

사용자들의 기대와 예측에 부합하는 것이 중요

 

- 탭 바

- 계층적 내비게이션

- 모달 프레젠테이션

 

탭바

가장 중요하고 우선순위 높은 것들을 탭바에 배치. (최상위 계층구조)

탭의 구성만으로도 이 앱이 무슨 서비스를 하는 앱인지 알 수 있어야. 

< 탭 바 설계 팁 >

- 탭을 사용하여 앱 구조의 계층을 반영할 수 있도록 설계하기 

- 탭들 간의 기능을 밸런스 있게 구성하기

- 중복되는 기능을 여러 탭에 넣지 않기

- 앱 전반적으로 탭들을 지속적으로 유지하기

- 명확하고 간결한 레이블 사용

- 자동으로 탭 이동되지 않도록 설계하기

- 모달을 띄우지 말기 (모달 뷰로 사용 X)

 

계층적 네비게이션

push navigation 애니메이션을 기반으로 상위 수준에서 하위 컨텐츠로 이동하는 것을 직관적으로 보여줌

< 계층적 내비게이션 설계 팁 >

- 앱의 계층을 탐색해야 할 때 사용하기

- 내비게이션 바를 통해 현재 위치를 제공

- 꺽쇠와 같은 인디케이터 사용

 

모달 프레젠테이션

독립적인 작업에 사용

간단한 작업 / 여러 스텝이 포함된 작업 / 전체화면

< 모달 프레젠테이션 설계 팁 >

- 간단하거나 여러 단계의 작업, 혹은 전체 화면을 보여줄 때 사용하기

- 적절한 취소 액션을 사용

- 모달 위에 모달을 띄우지 않기

 

* 햄버거 메뉴의 문제 

햄버거 메뉴는 한단계 안으로 숨겨져있어 사용자들이 메인화면에서 내가 어디로 갈 수 있는지 바로 정보를 알기 힘든 구조. 

카테고라이징을 제대로 해서 탭바를 구성하고 그 안에서 제공하는 것이 중요.

 

내비게이션 리뷰 
1. 내비게이션 타입 확인 (탭 바, 내비게이션 컨트롤러, 모달)
2. 적절한 내비게이션 시스템을 사용하였는지 확인
3. 인터랙션이 시스템 인터렉션과 어떻게 다른지 확인
4. 개선점 확인

 

2. 워크플로우 Workflow

점진적 공개 Progressive Disclosure

사람들이 간단한 것 부터 시작해서 점점 복잡한 결정을 내릴 수 있도록 도움을 주는 원칙

워크플로우의 복잡함을 의도적으로 숨기고 사용자로 하여금 앱이 단순하다고 느낄 수 있도록 경험을 제공.

불필요한 정보를 제공하여 의사결정을 방해하는 것을 막을 수 있어 좋지만

but 점진적 공개의 문제 - 내가 선택한 것 이외의 정보를 볼 수 없다는 점,, 

복잡성을 관리하고 의사결정을 단순화하는데 굉장히 유용한 기술이기는 하지만, 추가정보나 기능을 묻어버릴 수도 있다. 

이 문제를 관리하는 방법이 80/20 규칙

 

80/20 규칙

시스템 결과의 80%는 20%의 원인에서 나온다는 디자인 원칙

= 80%의 이점이 20% 의 작업에서 나온다..?

= 앱 사용하는 모든사람들의 80%가 앱 기능의 20%만 사용한다..?

 

사용자들의 혼란을 줄이고 의사결정을 단순화하기 위해 덜 중요한 것을 의도적으로 숨기는 방법을 통해 점진적 공개를 사용하는 것이 좋음

앱이 복잡해보인다면 minor한 정보 80%를 숨김으로서 중요한 20%의 기능을 더 빠르게 확인할 수 있도록 디자인 하는 것이 좋다. 

 

 

QnA

- 사파리 뷰의 네비게이션 바가 아래로 내려온 이유..?

디자인 원칙에 대해 고정관념을 갖지 않는 것도 중요. 

시스템모델, 멘탈모델과는 맞지 않지만 핸드폰이 점점 길어지고 있음. 

한 손으로 핸드폰을 컨트롤 할 수 있어야 한다는 철학이 있었지만 핸드폰이 점점 길어지면서

엄지 스트레스(?) -> 조금더 편하게 하기 위해 어드레스 부분을 한손으로 쉽게 편하게 할 수 있도록 하단으로 내림

디자인 원칙과 사용성 사이에서 고민을 하는 것이 중요. 

 

- 계층적 네비게이션 사용하다 보면 동일 뷰에 접근할 때가 있는데 ..

앱스토어 앱 게임 탭 검색 앱 통해 디테일 화면으로 들어가면 결국 동일한 화면으로 들어가게 됨 

따로 해결법이 있는 건 아니고,, 동일한 화면 보이는 것이 큰 문제는 아닐듯,,? 

모달을 고려하는 것도 하나의 방법..?

 

- 가장 상위계층 탭바에서 하위계층으로 넘어갔을 때 탭바를 계속 노출하는 것의 이점?

탭바는 모달 띄우는 것 이외에는 탭바를 계속 유지하는 것이 좋음. 탭바를 가리는 것은 좋은 건 아니다. 

탭바를 의도적으로 숨기는 것은 좋지 않음. 

기능을 인지하고 바로 넘어갈 수 있도록

 

- 안드로이드 경우 햄버거 자주 사용. 애플에서는 햄버거 보다는 탭바를 많이 사용하는거 같은데 어떤 방법이 있는가

햄버거 메뉴가 있다는 말은 앱에서 제공하는 기능의 카테고리화를 제대로 못했다는 의미로 보이기도함

그냥 한곳에 몰아넣자 라는 의미의 햄버거 메뉴..?

카테고라이징을 잘 하는 것이 먼저 중요

앱에서 제공하는 가장 중요한 기능이 탭 바로 내려옴

만약 설정이 중요하면 설정이 탭바로 내려오고 크게 중요하지 않다면

중요한 기능들 탭바에 넣고 그 외의 것들을 안에 잘 녹이는 것이 중요..? 

 

 

---

레퍼런스 리소스

- Essential design principles

https://developer.apple.com/wwdc17/802

Essential Design Principles - WWDC17 - Videos - Apple Developer

- Explore navigation design for iOS 

https://developer.apple.com/videos/play/wwdc2022/10001/

- Love at first launch 

https://developer.apple.com/wwdc17/816

- Human Interface Guidelines 

https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/