[Apple Developer] 디자인 원칙 (파트 2) - 웨비나

Apple Developer에서 진행하는 공식 웨비나이다.

등록하라는 메일이 왔길래 사전에 해두었지만 첫 번째 웨비나는 밥 먹느라 못 들었다.

아래의 링크를 통해서 확인하고 원하는 웨비나가 있다면 들어보자.

View - Meet with Apple Experts - Apple Developer

오늘 세션에서는 애플이 추구하는 디자인 원칙의 두 번째 세션이었다.

첫 번째 세션을 듣지 못한 게 아쉽지만 디자인을 이해하는데 도움을 많이 준 것 같다. 

예시를 보여주시면서 진행하셨는데

점점 더 깔끔하고, 군더더기 없어지는 것을 보며 디자인의 중요성과

개발할 때, 어떠한 것을 고민해 보면 좋을지에 대해 알게 해 주셨다.

두서없이 정리했지만 기록을 위해 남겨둔다.

PART 2 사용성, 피드백

행동 유도성

- 가령 접시를 예시로 들어보면, 사람마다 생각하는 것이 다를 것이다. 움직일 수 있는 것, 음식을 담을 수 있는 것, 하물며 누군가는 날리고 던질 수 있는 것이라고 말할 수 있다. 이렇게 물체가 가진 속성이 아니라 사람과의 맺는 관계를 말하는 행동 유도성은 사람마다 주관적이라는 것을 알아두어야 한다. 즉, 해석이 다를 수 있다는 것이다.

간단한 예시

1. 메시지 앱

- 클릭을 유도하는 컬러는 파란색, 둥근 사각형이나 원은 버튼임을 암시하는 모양

2. 캘린더 앱

- 색상의 경우, 앱에서 주로 사용되는 색상을 강조하는 곳에 사용하면 좋다.

- 만약 Accept와 Maybe, Decline을 모두 다른 색으로 사용하면 난잡해 보이고, 어떠한 기능을 유도하는지 사용자로서 가늠하기 어려워진다. 

- 이를 위해, Accept처럼 굵은 폰트를 사용해 행동 유도성을 가져가는 것이 좋다. 또, 색맹이나 색상에 둔감한 사람들을 위해서도 더 좋은 옵션이 될 수 있다.

3. 주식 앱

- 주식 앱에서 색상이 가진 행동 유도성의 경우, 서양과 동양이 반대이다. 서양의 경우, 주식이 올랐을 경우 우리나라와 반대로 파란색이 되고, 하락 시에 빨간색이 된다. 즉, 현지화도 고민을 해봐야 한다는 것이다.

행동 유도를 위한 특성들

1. 언어

- 동사를 사용하기 ( 더욱 명확하게 행동을 유도할 수 있다 )

2. 크기 & 두께

- 중요한 것은 굵은 폰트를, 덜 사용하게 되는 것일수록 얇은 폰트를 사용하기

3. 심벌 & 액세서리

- 익숙한 심벌을 사용해, 많은 내용을 적지 않고도 의미를 전달할 수 있다.

- 다만, 나만의 심벌은 의미가 없다. 말 그대로 나만 알고 있는 것이 심벌이 될 수는 없다.

- 아래의 예시를 살펴보자

- 나의 경우, 플로피 디스크라고 했지만, 현대에서는 대부분 저장 기능을 하는 심벌이라고 생각한다는 것이다.

4. 모양

5. 근접성

피콜로 앱을 수정해 보면서 알아보자

1. 체크박스와 스테퍼 그리고 하단의 버튼의 컬러를 동일하게 가져가기

2. Cart라는 명사가 아닌 Buy라는 동사로 변경하기 + 중요한 텍스트일수록 두께를 통해 강조하기

3. 상호작용하지 않는 것은 버튼으로 사용되는 모양으로 사용해서는 안된다. 따라서 커피의 백그라운드 모양은 원형으로 변경.

4. 기존 대비 훨씬 깔끔하게 변한 것을 확인할 수 있다.

행동 유도성 테스트

- 만들고 있는 앱이 있다면 다음과 같이 유도성 테스트를 반드시 진행해 보자.

 

일관성

- 사용성을 향상하기 위해 일관성이 필요하다. iOS에서는 아래의 아이콘이 공유라는 생각이 들지 않을 수 있다. 따라서 예측 가능한 디자인을 통해 일관성 된 디자인을 사용하자.

- 백버튼도 마찬가지

피콜로 앱을 수정해 보면서 알아보자

- 내비게이션바는 아이템보다 밑에 사용 등등

- 페이지 컨트롤의 경우, 현재 해당하는 페이지의 인디케이터에 컬러 주기 

- CollectionVIew의 타이틀에 있는 쉐브론은 타이틀 옆으로

- 뒤로 가기 버튼과 체크 박스 그리고 스테퍼

내적 일관성

- 색상은 HIG를 읽어보기

- 브랜드 스타일 가이드 ≠ 앱 스타일 가이드: 브랜드 스타일보다 앱스타일이 더 중요

일관성 테스트

- 만들고 있는 앱이 있다면 일관성 테스트하기

 

근접성

- 그룹핑을 사용해 근접성을 향상할 수 있다.

- 잘된 예시는 카메라 ( 좌측 상단, 우측 상단, 그리고 하단에 배율 등 )

근접성과 그룹핑 테스트

- 개발 중인 앱에서 테스트해보기

 

피드백

1. 상태 피드백

- 이메일 읽지 않음 표시 등

- 카메라에서 비디오 촬영 시 비디오 마크 + 시간 표시

2. 완료 시 성공 / 실패 피드백

- 예상 가능하게, 그리고 확실하게

3. 경고 피드백

- 즉각적인 피드백, 이메일, 패스워드의 오입력 등

4. 오류 피드백

- 6월 31일을 검색했을 경우, 30일까지 밖에 없어 에러를 보여주는 것이 아니라 7월 1일을 보여주는 방식

5. 사용자를 위한 피드백

- 개발을 편하게 하는 것이 아닌 사람들이 사용하기 편한 피드백

- 명확해야 하며 (Clear), 즉각적이고 (Timely), 상황에 맞게 (Contextual), 실행 가능 (Actionable)하게 만들 것

피드백을 통해 수정하기

- 실행 가능하게 확인에서 끝내는 것이 아니라 비밀번호 찾기 화면과 같은 곳으로 이동

- 어디 지점인지, 어떤 주문인지 등 정보를 명확하게 전달할 것