Apple Design Challenge Part 1

애플에서 개발자와 UX디자이너를 대상으로한 온라인 세션이다.

처음엔 AsyncSwift에서 애플 로고가 박힌 후드티를 준다고 하여 가벼운 마음으로 참가하였다. (결국 받았다 ㅎㅎ)

이 세션의 슬라이드는 비공개이지만 대부분의 내용이 WWDC에서 공개된 세션을 바탕으로 하기 때문에 못 들었다고 아쉬어 하지 않아도 된다.

Part1: 네비게이션 / 워크플로우 중점

• 예측 가능성과 안정성
• 명확하고 도움이 되는 정보
• 자연스럽고 단순한 워크플로우
• 즐거운 경험 - 앱을 소개해주는 계기가 됨
• 이 step이 앱을 사용하는데 이득이 되는지 항상 고민하기

네비게이션

• 길 찾기
• 멘탈 모델

워크플로우

• 점진적 공개
• 80/20 규칙

네비게이션: 길 찾기

예시 공항가는 길 / 공항에서의 게이트 → 점점 세분화하고 디테일한 정보들이 들어간다. 반대로 말하면 심플한 것만 담아야한다.

→ 우리의 앱도 길찾기와 같다

좋은 예시: 사진앱 / 날씨앱 참고: 이런 앱들을 내부적으로 Apple first party 앱이라고 부른다.

아래의 5가지 원칙

1. 어떻게 나갈 수있지
2. 내가 어디에 있지
3. 거기로가면 무엇을 찾을 수 있지
4. 근처에 무엇이 있지
5. 어디로 가야하지

[alt: 햄버거 메뉴 사이드바에 메뉴를 때려박은 이미지]

Q. 잘못된 점이 무엇인가?

A. 햄버거 메뉴는 지양해야하고, 세부 메뉴가 너무 많이 있음

 

Q. 네비게이션 타이틀에 앱 로고를 넣는 것?

A. 앱 로고보다는 그 화면의 내용을 주는 것이 낫다. ← 내가 어디에 있는가?를 유저에게 알려줘야 함 e.g. 오더 탭이면 오더를 title로

→ 내 생각: 홈 탭의 경우 예외적으로 로고를 넣어도 된다고 생각함(인스타, 유튜브 등), 하지만 이게 홈 탭이라는 이유가 명확해야 한다. 홈은 하나 이상의 정보가 있어야 한다.

[alt: 오더 탭의 음료 주문 컬렉션뷰의 아이템들 예시]

Q. 주문 항목에 사진 이외에 무엇을 넣는 것이 나은가?

A. 사진 / 가격 / 토핑 옵션 등의 부가 정보를 넣는 것이 좋다. 아이템을 눌러서 확인하고, 유저가 찾는 음료가 아니었다면, 다시 뒤로 돌아와야 하기 때문.

네비게이션: 멘탈 모델

[alt: 예시 수도꼭지]

Handle / Spout / Handle

시스템 모델

수도꼭지는 뜨거운물을 틀어도 Latency가 있다는 것을 우리가 이미 알고 있음(전제되어 있음)

상호작용 모델(Interaction Model)

인터렉션하는 부품. 수도꼭지 손잡이의 역할, 찬물 더운물 조절 기능 or 또는 수압 조절 기능

멘탈 모델

모르는 곳 예를 들어 공항 화장실에 가도 수도꼭지면 사용할 수 있다. 왜? 머리속의 멘탈모델이 같기 때문이다.

멘탈모델 적용하기

여려분의 앱은 수 많은 앱 중에 하나이다. 즉, 멘탈 모델이 타 앱과 비슷해야한다.

• 탭 바
• 게층적 내비게이션(Push)
• 모달 프렡젠테이션(Modal)

아 너무 길어지네.. 노션에 있는 거 옮기고 있는데 포스트로 옮기니 가독성이 너무 떨어지는것 같다.

 

탭 바

모양

각 계층의 Root

탭바만으로도 어떤 앱인가 예측할 수 있어야 한다. 틴트 샙 / 트랜지션에 없어야 함 / 아이콘과 레이블

사용자는 머릿속에 알고 있다. / 탭바 만 보고 이앱이 어떤 앱인지 판단이 되어야 한다. (사진 / 애플 뮤직 / 시계) 아니면 기능 중심적으로 설계해야한다.(시계 앱)

설계 팁

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

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

중복되는 기능 넣지 말기

앱 전체에서 탭을지속적으로 유지하기 탭바 숨기지 말기(모달 제외)

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

자동으로 내비게이셔닝 되지 않게 설계 - 특정 버튼누르면 A탭에서 B탭으로 넘어가게 하는 것 지양
모달을 띄우지 말기 - 탭에서 바로 모달 띄우지 않기

계층적(Push) 내비게이션

Places → SanFrancisco …

모양

• 테이블 뷰 Row 오른쪽 걱쇠
• 컬렉션 뷰 둥근모서리 네모유형
• 뒤로가기 버튼 레이블

설계 팁

• 앱의 계층을 탐색해야할떄 사용
• 내비게이션 바를 통해 현재 위치 제공(레이블 표시)
• Chevron 꺽쇠와 같은 인디케이터 사용

모달

독립적인 작업에 맞음 (모달이 꼭 풀스크린을 의미하는 것은 아님)

• 간단한 작업
  • 리마인드 작업
• 여러 스탭이 포함된 작업 / 애플 월렛
  • 한 작업에 처음과 끝이 있음(결제 / 등록 등)
  • 다른 작업으로의 이탈을 막아줌 - 트랜젝션이라고 생각하면 될 듯?
• 미디어 볼 때 (사진 / 동영상)

명사보다는 동사를 사용하여 동작을 강조할 것

설계 팁

• 간단하거나 여러단계의 작업 혹은 전체화면
• 적절할 취소 액션
• 모달위에 모달을 띄우지 말기!! 네이버 댓글