(⬆️ 그저 움직이는 썸네일을 적용해보고 싶었음...)
👩💻
오늘 배운 디자인 원칙의 실제 사례를 찾아보면서 오늘 배운 것들을 복습해 보세요.
1️⃣
게슈탈트 심리학에서 3가지를 골라 실제 사례를 찾아보세요.
- 유사성의 원리
- 근접성의 원리
- 페쇄성의 원리
- 연속성의 원리
- 공통성의 원리
폐쇄성의 원리
도형의 일부가 이어져있지 않더라도 사람의 뇌는 간격이나 틈을 매워 완벽하게 이어진 형태로 인식한다.
(출처 : 넷플릭스)
포스터가 모두 보여지지 않아도 사용자는 옆에 내용이 더 있음을 짐작할 수 있다.
만약 잘린 포스터의 이미지가 옆에 위치하지 않는다면 사용자는 추가적인 내용이 더 없다고 생각할 것이다.
따라서 포스터가 화면에 모두 들어올 수 있도록 나열을 하지 않고도 유형별로 한 줄에 위치시켜 사용자가 가로로 스크롤을 하며 원하는 컨텐츠를 고를 수 있음을 짐작하게 한다.
근접성의 원리
근접하게 위치해있는 요소들끼리 관련이 있다고 느껴진다.
(출처 : Polène Paris)
위 사진은 국가를 선택하는 기능을 담은 페이지이다.
대륙별로 여백을 주어 그룹으로 나누고 그 아래에 나라들을 근접하게 위치시켜 한눈에 들어올 수 있고 사용자가 쉽게 자신의 국가를 고를 수 있다.
유사성의 원리
크기, 형태, 색 혹은 방향 등의 특성이 유사한 요소들끼리 묶어서 보려고 한다.
(출처 : 29cm)
유사한 방향성을 가진 요소들끼리 그룹을 지어 보여진다.
따라서 사용자는 화면 요소들을 모두 다 확인하지 않고도 자신에게 필요한 정보의 묶음만을 골라서 보면된다.
2️⃣
UX 비주얼 디자인 원칙에서 3가지를 골라 실제 사례를 찾아보세요.
- 스케일
- 시각적 위계
- 균형
- 대비
스케일
각 요소에 상대적인 크기를 적용하여 중요도와 순위를 부여한다.
(출처 : 아이폰 워치 링)
3개의 링의 상태를 한 눈에 볼 수 있는 요약 섹션의 크기가 가장 크고 나머지 요소들의 크기를 작게 하여 중요도를 부여하였다.
시각적 위계
요소들간의 위계에 따라 시선의 흐름이 이동하도록 만드는 디자인
(출처 : 애플 홈페이지)
글자의 크기를 다르게 하여 사용자에게 성능과 관련한 숫자들을 강조하였다.
사용자의 눈에는 M3 칩 사진 다음으로 '1.6배', '13배', '18시간' 이라는 글자가 눈에 들어올 것이다. 그 다음에 밑의 작은 글자들을 읽으며 그 숫자들이 무엇을 의미하는지 알게될 것이다.
균형
디자인 요소 간에 적당한 배열이나 비율을 적용하여 균형을 맞춘다.
(출처 : 애플 뮤직)
위의 사진에 수직의 가상의 선을 그어보면 양옆으로 비슷한 양의 시각적 정보가 위치하여 균형을 이룬다는 것을 알 수 있다.
(무려 올리비아 딘 가르마까지 대칭)
3️⃣
아래에 1가지를 골라 좋은 사례라고 생각되는 제품의 화면을 찾아보고 그 근거를 게슈탈트 심리학, UX 비주얼 디자인 원칙, UX/UI 심리학 법칙을 활용해서 설명해 보세요.
- 온보딩
- 로딩
- 검색
- 회원가입
- 리스트
온보딩
(출처 : 스픽)
'AI와 영어로 말하며 영어 실력을 향상한다' 라는 앱의 특성에 맞춰 '스픽 튜터'라는 챗봇과 함께 대화하며 온보딩이 진행된다.
만약 대중교통을 이용하는 상황처럼 대화를 할 수 없는 경우에는 세번째 사진처럼 말을 하지 않고도 선택할 수 있다.
이때 제이콥의 법칙을 적용하여 마이크 버튼을 클릭하면 사용자가 말을 할 수 있음을 짐작하게 하였다.
또한 피츠의 법칙을 적용하여 '시작하기' 와 마이크 버튼이 화면의 하단 중앙에 위치하여 사용자가 쉽게 클릭할 수 있도록 하였다.
UX/UI 비주얼 디자인 원칙인 색상의 대비를 위해 버튼, 프로그레스 바 등의 시각 요소에 스픽의 시그니처 컬러를 적용하여 기능을 강조하였다.
검색
(출처 : 29cm)
우선 힉의 법칙을 적용하여 사용자에게 추천 검색어를 제공하여 사용자의 부담을 줄였다.
(사실 사용자의 부담을 줄였다기 보다 마케팅의 도구로 활용이 되고 있는 듯 함)
또한 게슈탈트 심리학의 근접성의 원리를 적용하여 그룹으로 나눠 각 카테고리에 맞는 추천 검색어를 보여준다.
또한 '지금 많이 찾는 선물 섹션'에서 폐쇄성의 원리를 적용하여 사용자가 가로로 스크롤을 넘겨보며 내용을 확인할 수 있도록 하였다.
UX/UI 비주얼 디자인 원칙으로는 색상의 대비를 적용하여 어떤 카테고리인지 한눈에 들어올 수 있도록 하였다.
(올 👍)
리스트
(출처 : 애플뮤직)
게슈탈트 심리학의 폐쇄성의 원리를 적용하여 사용자가 내용이 더 있음을 짐작하고 가로로 스크롤을 하게 만들었다.
모양과 크기의 유사성을 적용하여 유사한 요소들을 내용별로 나누어놓았다.
새로운 음악 섹션의 크기를 가장 크게 적용하여 눈에 먼저 들어오도록 강조하였다.
또한 최신곡과 최신 발매에 사용되는 사진의 사이즈를 다르게 하여 같은 앨범의 커버라도 작은 사이즈는 개별적인 음악 한 곡으로 인식되고 중간 사이즈는 앨범 단위로 인식하게 하는 시각적 위계를 만들었다.
🎙️ 소감
디자인 원칙을 적용하여 만들어진 실제 사례들을 직접 찾아보니 (요즘 매일같이 말하고 있지만) 내가 아무 생각없이 봐오던 화면들을 이제는 생각없이 볼 수 없게 되었다. (정말 대단...🥲)
나 하나를 어플에 잡아두기 위해 이렇게 많은 고민을 하였다니 정말 감사할따름이다.
하지만 원칙이나 규칙에 대해서 인지하는 것뿐만 아니라 사용자에 대한 고려와 애정 그리고 철저한 브랜딩이 있어야 훌륭한 인터페이스 디자인과 사용자 경험이 나오는 것 같다.
