소개
이 세션은 2023년 3월 6일부터 7일까지 진행됩니다.
Apple 개발자 자격이 있는 개발자 또는 디자이너라면 Apple 에반젤리스트를 만나 디자인 원칙의 기초를 배우십시오.
저는 3월 6일 오전 10시에 회의에 참석했습니다.
세부 사항
경로 찾기, 정신 모델, 80/20 규칙, 점진적 공개와 같은 디자인 원칙과 앱에 적용되는 방법에 대해 알아보세요.
디자인 원칙과 챌린지 활동을 도입하여 샘플 앱을 개선합니다.
교재가 캡쳐되지 않아 챌린지 활동과 관련된 내용 작성이 어렵습니다.
안내 받기
나는 길을 찾기 위해 표지판을 보는 상황을 먼저 생각했다.
좋은 길 찾기는 다음 질문에 답합니다.
- “내가 어디 있지?”
- “난 어디로 가야 해?”
- “거기서 무엇을 찾을 수 있습니까?”
- “근처에 무엇이 있습니까?”
- “어떻게 나가죠?”
내비게이션과 마찬가지로 앱은 사람들이 원하는 것을 쉽게 찾을 수 있도록 해야 합니다.
위에서 언급한 5가지 원칙이 여기에도 적용됩니다.
- “내가 어디 있지?” : 스트라바
- “난 어디로 가야 해?” : 애플리케이션
- “거기서 무엇을 찾을 수 있습니까?” : 앱 콘텐츠 및 다운로드 버튼
- “근처에 무엇이 있습니까?” : 앱 콘텐츠 및 다운로드 버튼
- “어떻게 나가죠?” : < 애플리케이션
정신 모델
결국 사람들은 익숙한 방식으로 물건을 원합니다.
위의 수도꼭지로 왼쪽 수도꼭지는 뜨거운 물, 오른쪽 수도꼭지는 냉수라는 것을 누구나 알고 있습니다.
왼쪽 수도꼭지는 온도를 조절하고 오른쪽 수도꼭지는 수압을 조절하면 다들 헷갈리실 거에요.
이러한 측면을 염두에 두어야 합니다.
앱의 해당 부분
탭 표시줄, 계층적 탐색 및 모달 프레젠테이션이 특징입니다.
탭 바
탭 표시줄은 우리에게 매우 친숙하며 계층 구조의 맨 위에 있습니다.
앱의 의도를 전달하고 현재 사용자가 어디에 있는지, 어디로 가고 있는지, 무엇을 찾을 수 있는지 보여주어야 합니다.
모양
- 사진 및 라벨
- 같은 무게
- 앱 색조 색상
상호 작용
- 탭
횡단
- 존재하지 않는다
디자인 팁
- 탭을 사용하여 앱 구조의 계층 구조를 반영하도록 스타일을 지정하세요.
- 균형 잡힌 방식으로 탭 간에 기능을 구성합니다.
- 여러 탭에 겹치는 기능을 배치하지 마십시오.
- 앱 전체에서 최신 상태를 유지하십시오.
- 명확하고 간결한 레이블을 사용하십시오.
- 자동으로 탐색되지 않는 디자인.
- 모달을 열지 마십시오. (단, 처음부터 끝까지 독립적인 작업이나 과정임을 강조할 때 사용합니다.)
계층적 탐색
모양
- 테이블 보기 행: 레이블 + 오른쪽 꺾쇠괄호
- 컬렉션 보기: 모서리가 둥근 사각형 모양
- 뒤로 버튼: 왼쪽 꺾쇠괄호, 이전 보기 이름
상호 작용
- 탭으로 앞으로/뒤로 이동
- Edge Swipe로 돌아가기
횡단
- 오른쪽에서 왼쪽으로 스와이프하여 계속
- 왼쪽에서 오른쪽으로 스와이프하여 뒤로
디자인 팁
- 앱의 계층 구조를 탐색해야 할 때 사용하세요.
- 내비게이션 바를 사용하여 현재 위치 입력
- 꺾쇠 괄호와 같은 표시기를 사용하십시오.
모달 표현
주로 다음 3가지 상황에서 사용됩니다.
- 쉬운 일
- 여러 직원이 참여하는 일련의 작업
- 전체 화면(비디오)
모양
- 색조 색상이 있는 작업 버튼
상호 작용
- 아래로 스와이프하여 마무리
횡단
- 아래에서 위로 슬라이드
디자인 팁
- 단순 또는 다단계 작업 또는 전체 화면 보기에 사용
- 적절한 취소 조치를 사용하십시오.
- 모달이 모달에 뜨지 않도록 하십시오.
내비게이션 검토
1. 탐색 유형 확인(탭 표시줄, 탐색 슬라이더, 모달)
2. 올바른 내비게이션 시스템이 사용되는지 확인하십시오.
3. 상호 작용이 시스템 상호 작용과 어떻게 다른지 확인하십시오.
4. 개선점 찾기
점진적 공개
워크플로의 복잡성을 의도적으로 숨깁니다.
모든 메뉴를 한 번에 보여주지 않고 하나씩 보여줍니다.
예: 카페에서 커피 주문하기
1. 에스프레소가 들어갈지 선택
2. 에스프레소 메뉴에서 원하는 것을 선택
3. 그런 다음 콩, 우유, 시럽 등을 선택하십시오.
여기 80/20 규칙 적용된다면?
80% 어드밴티지 + 20% 액션
=> 복잡성을 줄이고 의사 결정 프로세스를 단순화합니다.
QnA
두 가지 질문이 떠올랐습니다.
Q. Safari에서 주소 표시줄을 아래로 이동하는 것이 정신 모델에 위배되지 않습니까?
A. 디자인 원칙을 지키는 것이 중요합니다. 그렇기 때문에 사물이 어떠해야 한다는 고정관념을 가지지 않는 것이 중요합니다.
새로운 시작이 필요합니다. 시스템 모델과 멘탈 모델과 일치하지는 않지만 휴대폰은 점점 더 길어지고 있습니다.
스티브 잡스가 강조한 한 손 휴대전화 시대에서 더 큰 화면으로 콘텐츠를 보는 시대로 트렌드가 바뀌었다.
상단의 주소 표시줄은 한 손으로 조작하기에는 실용적이지 않기 때문에 디자인이 변경되었습니다.
유사한 유형의 앱이 어떻게 작동하고 디자인 원칙을 따르는지 확인하는 것이 좋을 것입니다.
Q. 서로 다른 두 개의 탭에서 같은 화면을 불러오는 것은 탭바의 원칙에 위배되는 건가요?
A. App Store의 경우. 앱의 세부정보 페이지로 이동하는 방법에는 두 가지가 있습니다.
게임 탭을 찾아서 들어가는 방법과 검색 후 검색 탭으로 들어가는 방법입니다.
해결책은 없지만 두 화면이 똑같이 보여도 상관없습니다.
단, 탭바의 위치는 명시적으로 지정해야 하며, 콘텐츠를 누르고 있는 동안 탭바가 토글되지 않도록 해야 한다.
이렇게 하면 괜찮을 것입니다.
같은 화면이라면 모달을 고려해도 괜찮습니다.
검토
이 디자인 챌린지의 키워드는 매우 중요하지만 익숙한 개념입니다. 이것은 이미 WWDC와 HIG에서 많이 논의되었습니다. 애플이 어떤 시각으로 바라보고 있을지 궁금해서 신청을 했습니다.
다양한 콘셉트를 먼저 설명하고 각각의 챌린지 활동을 이어갔다.
PPT에서 앱의 구체적인 상황과 개선 방안에 대해 이야기하는 시간이었습니다.
이번 포스팅에서는 말을 제대로 못했는데 챌린지 활동과 관련된 부분이 굉장히 인상적이었습니다.
처음 봤을 때 처음 만든 앱 같았어요.
굉장히 어색하고 부자연스럽고 모호한 부분이 많았기 때문이다.
다양한 원리를 앱에 적용하고 개선하는 과정을 보여주느라 정신이 없었는지 한 시간이 금방 지나갔다.
공부할 생각으로 참석했지만 이렇게 재미있을 줄은 몰랐습니다.
그런 것 애플 에반젤리스트의 힘이 아닐까 싶었다.
그리고 사파리가 처음에는 많이 불편했던 기억도 납니다.
노치 디자인을 만든 후에 적용했던 것으로 기억합니다.
디자인을 이렇게 바꾸려고 한 이유는…
주소 표시줄은 가장 중요한 콘텐츠가 있는 곳입니다.
수축 베젤에 노치 적용, 다이내믹 아일랜드 사용자 경험 향상
나는 그것이 두 가지라고 생각합니다.
첫째, 기존 주소창을 웹에 적용해 모바일로 가져왔다.
디자인이 모바일 친화적이라고 생각하지 않습니다.
사이트의 유용성에 대한 Nielsen Norman Group의 2006년 연구에 따르면 사람들의 눈은 위에서 아래로, 왼쪽에서 오른쪽으로 “F” 패턴으로 움직이는 것으로 나타났습니다. (모바일이 아닌 웹 설문조사입니다.)
눈이 가장 먼저 가는 주소 표시줄 대신 웹의 콘텐츠가 먼저 표시됩니다.
주소창은 정상적으로 인터넷 접속 후 크게 중요한 부분이 아니기 때문에 아래로 이동한 것으로 보입니다.
둘째, Dynamic Island인 Notch에서의 사용자 경험 때문입니다.
상단 영역과 보안 영역의 자연스러운 연결이 사용자에게 더 나은 경험을 제공한다고 생각합니다.
또한 사용 가능한 공간보다 사용 가능한 공간이 더 많다고 생각하게 만듭니다.
어디까지나 추측일 뿐이지만
디자인을 의심하고 과거에는 누구도 의심하지 않았던 새로운 변화를 시도했다는 사실이 지금의 애플을 있게 했다고 생각합니다.
애플의 iOS를 개발하면서 이런 소소한 재미를 느끼는 것 같다.
애플이 앞으로도 계속 발전하기를 바랍니다. (내 밥그릇은 보장…)
자원
필수 설계 원칙
https://developer.apple.com/wwdc17/802
iOS용 내비게이션 테마 살펴보기
https://developer.apple.com/videos/play/wwdc2022/10001/
첫 시작에 사랑
https://developer.apple.com/wwdc17/816
휴먼 인터페이스 지침
https://developer.apple.com/design/human-interface-guidelines/guidelines/overview/
디자인 챌린지(아시아 태평양)
사람들이 온라인에서 읽는 방법: 새롭고 오래된 통찰력