[Apple] Apple Design Challenge (3) - Affordance

 

 

 

 

 

2023. 03. 20 월요일

뛰어난 앱 사용성 알아보기

애플은 디자인을 매우 중요시한다

어플 디자인에서 중요한 것

지난 시간에 이어, 오늘은 part 2

마찬가지로 예시 어플인 피콜로 앱과 함께!

지난 시간까지 바뀐 디자인 모습

Affordance

접시를 보면 어떤 생각이 드나요? (행동)

음식을 놓을 것

or 강아지를 기른다면, 이걸 던질수도 있다 (?)

어포던스는 주관적인 개념

컵을 올려두고 컵 받침으로 쓸 수도 있다.

햄버거

맥북에 유도되는 행동

버튼 디자인의 비밀

키보드와 동일한 디자인이 적용되어있다! (처음 알았을 때 신기했음)

주변에 그림자 효과를 주어, 뒷 배경과 분리시켜준다. (드래그 행동 유도)

약간 잘린 화면 -> 그 뒤에 이어질 정보가 있음을 암시 (스크롤 행동 유도)

ui component와 상호작용

아이폰 기본 어플들 속에 적용된 다양한 행동 유도성

메세지 어플 - 터치 가능한 부분들

메일 어플의 하단 modal view

캘린더 어플 - 마찬가지로 터치 가능한 부분에 색상을 달리 설정해두었다

다양한 방식으로 어포던스 전달 가능하다

색상을 추가하여 터치를 유도

캘린더 뷰를 예시로 보자

수락하는 버튼을 초록색으로 변경한다면? -> maybe와 decline은 어떻게 구분할 것인가?

셋다 다른 색상을 적용? -> 헷갈린다 (정확한 기능을 전달하고 있지 않음) 따라서 통일하는 것이 올바르다.

주식 어플의 경우, 서양 문화권에서는 붉은 색이 부정적, 초록색이 긍정적

중국에서는 붉은 색상이 긍정적인 의미(주관적) -> 색상에 대한 문화적 인식도 고려해야한다.

동일한 색상 + 폰트 굵기 차별화

심볼과 악세서리로도 어포던스 전달 가능

세대 차이

저장 - 플로피디스크 (연령대에 따라 모를 수 있다.)

우리의 앱에서는 커피를 주문하는 과정이니, 컵과 포장용기로 더 정확한 의미를 전달할 수 있다.

첼린지 액티비티

3가지 색상이 사용되었다 (흰 색은 네비게이션 바에 활용되었다)

하나로 통일

컨티뉴 - 동사 / 카트 - 명사 (정확한 표현을 사용하자)

행동을 나타내도록 동사로 변경 buy

폰트 굵기 변경

박스에 체크 표시

모양도 중요한 요소이다

네모로 통일!

나아가 상호작용 가능한 요소들을 네모로 두었기에, 커피 부분은 원으로 변경 (이것도 신기했다)

add to cart -> 상단으로 이동

훨씬 애플(?)스러워진 모습!

각자의 프로젝트에 적용시켜보자

 

 

 

 

 

 

 

Resources

Essential design principles

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

 

The life of a button

https://developer.apple.com/wwdc18/804

 

Design with iOS pickers, menus and actions

https://developer.apple.com/wwdc20/10205

 

What’s new in SF Symbols 4

https://developer.apple.com/wwdc22/10157

 

Human Interface Guidelines

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