디자인 원칙
인지심리학의 관점에서 디자인할 때 지켜야 할 규칙을 정해놓은 것.
많은 사람들이 비슷하게 느끼고, 행동하는 방식에 기초해 디자인하는 방법을 제시.
종류 : 게슈탈트 심리학, ux 비주얼 디자인 원칙, ux/ui 심리학 법칙, 기업의 디자인 원칙
게슈탈트 심리학
사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론.
- 왜 알아야 할까?
착시 현상(시각 자극을 인지하는 과정에서 주변의 다른 정보에 영향을 받아 원래의 사물에 대해 시각적인 착각이 생기는 현상)을 생각하면 쉬운데, 사람의 의식이 기본적으로 통일성, 연속성, 유사성을 요구하기 때문에 착시 현상이 생긴다.이처럼 뇌는 필요 없는 것은 지우고 기억하기 쉬운 상태로 정리해 받아들인다. - 게슈탈트 심리학의 원리들
1) 유사성의 원리
크기나 형태, 방향, 색 등의 특성이 비슷한 것끼리 묶어서 지각하려는 경향.
- 모양을 이용한 유사 관계 형성
모양의 그룹화 효과는 크기, 색을 이용한 것보다 훨씬 약함.
- 크기를 이용한 유사 관계 형성
크기가 더 큰 사각형이 더 중요하게 보임.
- 색상을 이용한 유사 관계 형성
유사성은 색상에 큰 영향을 받음.
색상이 유사성의 원리 중 가장 강력함.
- 방향을 이용한 유사 관계 형성
특정 요소만 방향을 바꾸면 그 요소들끼리 별도의 그룹을 형성
- 유사성 원리의 사례
유튜브처럼 모양이 유사한 컴포넌트는 자연스럽게 하나의 그룹이라는 느낌을 준다. 따라서 정보의 그룹화가 잘되면 사용자가 내용을 파악하기 편하다.
2) 근접성의 원리
가까운 것끼리 묶어서 지각하려는 경향.
사람들은 가까이 있는 요소들이 멀리 있는 요소들보다 더 관련성 있다고 생각함.
어떤 것들이 모두 비슷한 간격으로 떨어져 있다면, 사이에 특별한 관계가 있다고 생각하지 않을 것.
- 여백을 사용한 근접 관계 형성
- 사례(아마존 북스)
Footer에서 같은 카테고리끼리는 가까이 두고 사이에는 여백을 크게 주어 그룹별로 잘 구분하며, 그룹마다 상단에 타이틀을 가까이 두어 그룹마다 어떤 정보가 있는지 빠르게 인지할 수 있도록 도와줌.
3) 폐쇄성의 원리
공백이 있더라도 틈이나 간격을 메워서 닫힌 형태로 인식하려는 경향.
- 사례(스포티파이)
폐쇄성의 원리 덕분에 이미지의 일부가 잘려있어도 옆으로 계속해서 요소들이 이어질 것이란 걸 추측 가능.
4) 연속성의 원리
연속적으로 직선이나 곡선을 이루는 요소들을 잘 인지하는 경향.
사람은 어떤 요소가 방향성을 가지고 연속되어 있을 때 편안함을 느낌.
직선이나 곡선을 따라 배열된 대상을 하나의 단위로 인식.
- 사례(핀터레스트)
핀터레스트 홈 화면의 이미지는 크기가 모두 다르지만, 수직선을 만드는 열로 배열되어 있음. 여기서 연속된 세로의 수직 레이아웃으로 인해 사용자는 편안함을 느낌. 더불어 사용자가 앱을 위아래로 스크롤 하도록 유도하는 역할도 힘.
5) 공통성의 원리
같은 방향으로 움직이는 것들끼리 더 관련성이 높다고 인식하는 경향.
이 원리는 주로 모션 그래픽에 자주 사용.
- 사례(넷플릭스)
Netflix를 탐색할 때 영화와 TV 프로그램이 장르나 테마에 따라 가로로 그룹화됨. 각 장르나 테마에 따라 썸네일 + 제목의 리스트가 한 방향으로 움직이는 것을 보고 한 그룹이라는 것을 알 수 있음.
UX 비주얼 원칙
UX에 영향을 끼치는 시각 디자인의 원칙을 정리한 것.
- 써야하는 이유
시각적으로 매력적인 이유를 근거를 들어 설명할 수 있도록 도와줌.
UX 비주얼 디자인 원칙을 잘 활용하면 심미적으로 아름다울 뿐만 아니라 사용성도 높여준다.
원칙에 따라 잘 설계된 디자인은 사용자가 제품에 몰입하는 것을 도와주고 쓰기에도 편리. - 종류
1) 스케일(Scale)
상대적인 크기를 사용하여 구성의 중요도와 순위를 표시하는 것.
가장 중요한 요소는 덜 중요한 요소보다 크게 표현.
당연하게도 크기가 크면 더 주목받을 가능성이 높음.
시각적으로 보기 좋은 디자인은 일반적으로 3가지 이하의 크기를 사용.
사례(미디엄)는 하기와 같다. 인기 있는 아티클을 다른 아티클과 구분되는 크기로 훨씬 키워 상단에 배치.
2) 시각적 위계(Visual hierarchy)
중요한 순서에 따라 시선의 흐름이 이동하도록 디자인하는 것.
시각적 위계는 크기, 색상, 간격, 배치 등을 통해 표현할 수 있음.
사용자가 화면에서 정보를 찾는 데 어려움을 겪는 경우 명확한 시각적 위계가 없을 가능성 높음.
명확한 시각적 위계를 만들기 위해서는 2~3개 정도의 텍스트 크기를 사용.
위계의 낮음, 중간, 높음에 따라 요소의 크기를 large, medium, small로 분류하기.
중요하다고 생각되는 요소는 채도가 높고 색상 대비가 크게, 덜 중요한 요소에는 채도가 낮고 색상 대비가 크지 않도록 적용하기.
사례(미디엄)는 하기와 같다. 중요도의 순으로 눈에 들어올 수 있게끔 타이틀을 가장 크게, 서브 타이틀을 중간, 본문을 작게 표현했음.
우버 같은 경우 지도와 화면 하단이 절반으로 분할되어 사용자에게 똑같이 중요하다는 생각이 들게 한다. 대신 회색 배경 때문에 시선은 즉시 'Where to?'에 끌린다. 이후 다시 글씨 크기가 약간 작은 그 아래의 최근 위치로 이동한다.
3) 균형
디자인 요소 간에 적당한 배열이나 비율을 주는 것.
시소처럼 디자인 요소 간의 균형을 맞춘다고 생각하면 쉬움.
수직이나, 수평의 가상 축에 비슷한 양의 시각적 정보가 배치되도록 해보자. 이때, 꼭 대칭이 아니어도 괜찮다.
※ 균형에 활용할 수 있는 요소들
1. 대칭
디자인 요소가 가상의 중심출을 기준ㄴ으로 대칭으로 분포하는 것.
안정적이고, 정적인 느낌을 주고 싶을 때 사용.
2. 비대칭
디자인 요소가 가상의 중심축을 기준으로 비대칭으로 분포하는 것.
역동적이고 신선한 느낌을 주고 싶을 때 사용.
3. 방사형
중앙의 점을 기준으로 원형으로 배치한 것.
시선을 중앙에 집중시키고 싶을 때 사용.
4) 대비
눈에 띄게 구별되도록 강조하기 위해 두 요소 간의 차이를 두는 것.
특정 부분을 사용자에게 돋보이게 하고 싶을 때 사용.
크기나 색상을 사용해 두 디자인 요소 간에 뚜렷한 차이를 줌.
주로 명암의 차이를 주거나 색상의 차이를 주는 방법을 많이 사용함.
※주의해야 할 것은, 덜 중요한 텍스트의 강조를 줄이기 위해 배경과의 명도 차이를 너무 줄이지 않도록 하세요. 너무 흐릿한 글자는 사용성을 떨어뜨림.
사례(모니모)는 하기와 같다. 탈퇴는 돌이킬 수 없는 기능이기 때문에 제품에서 사용하지 않는 전혀 반대의 색상을 사용해 강조하고 있다.
UX/UI 심리학 법칙
심리학 법칙은 사람이 어떻게 행동하고, 왜 그런 행동을 하는지를 설명한다.
정량적, 정성적 데이터가 없는 초기 제품에 대한 의사결정의 근거가 되어줌.
스스로 좋은 디자인을 할 수 있도록 도와주는 체크리스트가 되어줌.
사용자의 경험을 근원적으로 이해할 수 있도록 도와줌.
참고문서1- 디자이너가 알아야 할 10가지 심리학 법칙(상)
참고문서2- 디자이너가 알아야 할 10가지 심리학 법칙(하)
참고도서
- 종류
1) 제이콥의 법칙
사용자는 새로운 제품을 사용할 때 이미 알고 있는 익숙한 방식으로 작동하길 원한다는 법칙.
누구나 새로운 제품을 처음 접하면 기존에 학습된 지식과 경험을 바탕으로 비슷하게 사용하려고 시도한다.
인터페이스를 익하는데 드는 정신적 에너지가 줄어들수록, 사용자가 목표 달성에 투자할 에너지가 늘어난다. 목표 달성이 수월해질수록 목표를 성공적으로 달성할 확률도 높아진다.
이때, 멘탈모델이 큰 영향을 끼친다.
새로운 디자인을 할 때나 제품에 큰 변화가 있을 땐 기존의 멘탈모델을 잘 활용하는 것이 좋다. 사용 방법을 새로 익히지 않아도 되니 사용자가 들여야 하는 시간과 비용, 노력이 줄어든다.
- 사례(iOS 7의 스큐어모피즘 양식)
나무 질감을 살린 책꽂이, 게이지와 버튼의 조작부가 실제와 비슷하게 동작하는 녹음기, 카메라 조리개를 그대로 옮겨온 카메라 등, 현실 세계의 요소를 그대로 디지털 환경에 옮겨와 실제 물건을 사용하던 멘탈모델 그대로 어려움 없이 사용할 수 있도록 한 것.
2) 피츠의 법칙
터치 대상에 도달하는 시간은 대상까지의 거리와 크기와 함수 관계에 있다는 법칙. 즉 쉽게 말해, 사용자가 인터랙션해야 하는 대상은 거리가 가깝고, 크기가 커야 사용성이 좋다는 뜻.
-사례(아이폰의 화면 상단 간편 접근 기능)
화면 상단을 아래로 내려 상단에 접근할 수 있는 기능을 제공.
아이폰을 한 손으로 사용 중인 경우에도 엄지손가락으로 모든 화면에 손쉽게 닿을 수 있도록 도움.
3) 힉의 법칙
의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다는 법칙
사람의 뇌에 한꺼번에 복잡하고 많은 양의 정보가 들어오면 이를 처리하기 위해 인지 부하가 생김.
- 사례(토스의 회원가입 과정)
회원가입에 필요한 정보를 한 번에 노출하고 입력을 받을 수도 있지만 입력 폼을 단계적으로 노출하여 사용자의 부하를 낮춘다.
하나하나의 단계가 쉽게 넘어가기 때문에 사용자는 실제보다 거치는 단계를 짧다고 느끼는 효과를 얻을 수 있다.
4) 밀러의 법칙
보통 사람은 작업 기억에 7(+-2)개 정도의 항목밖에 저장하지 못한다는 법칙.
- 여기서 중요한 건 개수가 아니라 정보 덩어리라는 것.
'덩어리'는 한 그룹으로 묶여서 기억에 저장되는 기본 단위.
덩어리 크기는 크게 중요하지 않다.
인간의 단기 기억은 한계가 있기 때문에 정보를 덩어리로 만들면 더 효과적으로 이해하고 기억할 수 있음.
- 사례(네이버 뉴스)
콘텐츠의 정보 밀도가 굉장히 높다.
콘텐츠를 덩어리 화하고, 모듈별로 그룹을 지어줌.
규칙과 체계가 있기 때문에 사용자가 쉽게 이해할 수 있고, 화면을 훑으면서 관심 있는 콘텐츠를 빠르게 찾을 수 있음.
기업의 디자인 원칙
기업의 철학을 담고, 심미성과 사용성이 높은 제품을 만들 수 있도록 제시하는 가이드.
기업과 제품의 비전을 공유.
공통된 느낌을 주는 일관된 원칙을 제시.
심미적인 UI와 인터렉션을 구현하는 동시에 사용성을 지키는 방법을 안내.
의사결정 기준이 되고 시간을 절약.
- 사례(Spotify)
1) 연관성
스포티파이는 개인화를 통해 사용자 개인을 위해 만들어진 것이라는 느낌을 주어야 한다. 이를 위해 정보를 적시에 제공하는 것이 중요하다. 예를 들어 재생 목록의 커버 이미지를 보여줄 때 문화권에 맞춘 정보를 제공한다.
2) 인간
스포티파이는 기술에 뿌리를 두고 있지만, 모든 것은 사람을 위한 것이다.
인간의 논리로 생각하고 감정을 나누며, 지나치게 영리하거나 기술적, 기능적인 것은 인간처럼 보이지 않는다. 예를 들어, 프로필 사진을 설정할 때 본인의 프로필 사진을 넣을 수 있도록 한다던가, 키즈 프로필에 재밌는 캐릭터를 사용하는 방법을 활용할 수 있다.
3) 통일성
디자인하는 모든 것이 스포티파이처럼 보이게 한다.
제품 안에서의 일관된 경험을 통해 친숙함과 신뢰를 구축.
새로 발명하기보다는 재사용하는 방법을 추천.
경험을 재사용하고, 일관성을 유지.
예를 들어, 마케팅할 때 오프라인의 경험과 스포티파이의 앱 경험이 이어지도록 한다.
UX/UI 학습