📌
1. 디자인 원칙
2. 게슈탈트 심리학
3. UI/UX 비주얼 디자인 원칙
4. UI/UX 심리학 법칙
5. 기업의 디자인 원칙
1. 디자인 원칙
인지심리학의 관점에서 디자인을 할 때 지켜야할 규칙
💡인지심리학
인간이 보고, 생각하고, 받아들이는 방법에 대해 연구하는 학문
많은 사람들이 느끼고 행동하는 보편적인 방식에 기초하여 디자인하는 방법 제시
디자인 원칙을 기반으로 하여 디자인을 한다면 사용자들이 편안하게 느끼고 자연스럽게 행동하도록 유도할 수 있어 사용성이 높은 제품을 만들 수 있도록 도와준다.
2. 게슈탈트 심리학
1912년 독일의 심리학자 막스 베르트하이머(Max Wertheimer)가 연구를 시작한 형태 심리학
💡 게슈탈트(Gestalt)
'형태'나 '모양'을 의미하는 단어
심리학과 철학에서 전체성을 지닌 형상을 가리킨다.
어떤 사람이 이미지를 인식할 때 주변에 있는 요소들 간의 관계와 맥락에 영향을 받는다는 이론
사람의 뇌는 대상을 있는 그대로 받아들이지 않고 형태의 정보 중 필요없는 것은 지우고 기억하기 쉬운 형태로 정리하여 받아들인다.
중요한 이유
게슈탈트 심리학은 사용자가 제품을 경험하는데 영향을 끼친다.
사용자가 화면을 볼 때 사용자의 인식은 화면 구성의 통일성, 연속성, 유사성을 기대한다.
하지만 기대한대로 구성되어 있지않다면 몰입이 깨지고 불편함을 느껴 제품을 사용하지 않게된다.
원리
1. 유사성의 원리
크기, 형태, 색 혹은 방향 등의 특성이 유사한 요소들끼리 묶어서 지각하려는 경향
겉모습이 유사하면 서로 관련성이 있다고 생각하여 그룹화하여 보려고 한다.
- 모양의 유사성
모양이 유사한 요소들끼리 무리지어 보인다.
크기, 형태 등의 다른 특성들보다 약하게 작용한다.
- 크기의 유사성
크기가 유사한 요소들끼리 무리지어 보인다.
- 색상의 유사성
색상은 유사성의 원리에 큰 영향을 미친다.
- 방향의 유사성
방향이 유사한 요소들끼리 관련지어 보인다.
2. 근접성의 원리
가까이 위치한 요소들끼리 관련이 있다고 느껴진다. (여백을 통해 표현 가능)
요소들을 나열할 때 여백을 사이에 준다면 모양과 색상이 유사한 요소들이라도 서로 다른 그룹으로 인식된다.
(유사성의 원리 < 근접성의 원리)
3. 폐쇄성의 원리
도형의 일부가 이어져있지 않더라도 사람이 뇌는 간격이나 틈을 매워 완벽하게 이어진 형태로 인식한다.
로고, 아이콘 등에 주로 사용
4. 연속성의 원리
요소들이 방향성을 갖고 연속되어 위치할 때, 사람은 하나로 이어져있다고 인식한다.
직선이나 곡선으로 이어진 것을 볼 때 편안하게 느낀다.
5. 공통성의 원리
같은 방향으로 움직이는 요소들끼리 더 관련성이 높다고 느낀다.
3. UX/UI 비주얼 디자인 원칙
UX에 영향을 끼치는 시각 요소들에 대한 디자인 원칙을 정리한 내용
중요한 이유
- 디자인이 시각적으로 매력적인 이유를 객관적인 근거를 들어 설명할 수 있다.
- 심미성과 사용성을 모두 향상시킬 수 있다.
- 사용자가 제품에 몰입하고 더 간편하게 제품을 사용하는 것을 돕는다.
내용
1. 스케일
요소들간의 위계에 따라 시선의 흐름이 이동하도록 만드는 디자인
크기, 색상, 간격, 배치 등을 이용하여 표현
보다 더 명확한 시각적 위계를 위해 2-3개 정도의 텍스트 크기 적용
중요하다고 생각되는 요소에 채도와 색상 대비를 높이고 덜 중요한 요소에는 채도와 색상 대비를 낮춘다.
2. 균형
디자인 요소 간의 균형을 유지해야 사용자가 편안하게 느낀다.
3. 대비
특정 부분을 강조하기 위해 요소간의 차이를 두는 것
주로 크기, 명암, 색상의 차이를 이용하여 뚜렷한 차이를 만든다.
대비를 주되, 사용성을 해치면 안 된다.
4. UX/UI 심리학 법칙
심리학은 사람이 어떻게 행동하고 왜 그런 행동을 하는지 설명한다.
중요한 이유
- 데이터가 부족한 MVP (초기 제품)에 대한 의사결정의 근거로 활용
- 명확한 이론적 근거를 바탕으로 한 주장과 설득이 가능
- 좋은 디자인을 위한 체크리스트로 활용
- 사용자의 경험을 근본적으로 이해하는데 도움
내용
1. 제이콥의 법칙
사용자가 새로운 제품을 사용할 때 제품이 이미 알고있는 익숙한 방식으로 작동하길 원한다.
누구나 기존에 학습된 지식이나 경험을 바탕으로 제품을 사용하기 때문에 인터페이스를 익숙하고 보편적인 방식으로 설계해야 한다.
사용자가 인터페이스를 편하다고 느껴야 인터페이스를 익히는데 드는 에너지를 목표 달성을 위해 사용할 수 있다.
💡 멘탈 모델
자신, 타인, 개념, 현상 등의 다양한 대상에 대해 갖고 있는 생각의 패턴
경험과 학습을 통해 형성되고 이후 의사결정과 행동에 영향을 미친다.
ex.
스위치를 누르면 불이 켜진다.
화면을 아래로 당겼다가 놓으면 새로운 내용이 업데이트 될 것임을 안다.
제품에 변화를 줄 때 기존의 멘탈 모델을 기반으로 한다. (ex. 스큐어모피즘)
새로운 환경에 적응하지 않아도 되니 사용자는 시간, 비용, 노력을 줄일 수 있다.
2. 피츠의 법칙
사용자가 인터렉션 (터치, 클릭) 해야하는 대상은 쉽게 선택할 수 있도록 거리가 가깝고 크기가 커야 사용성이 향상된다.
피츠의 법칙을 적용하여 사용성을 높이는 방법
- 정확하게 선택할 수 있을 만큼 충분히 커야한다.
- 선택해야 하는 요소가 다수라면 요소 간에 충분한 간격이 필요하다.
- 마우스나 손가락이 쉽게 닿을 수 있는 영역에 배치
3. 힉의 법칙
의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례하여 늘어난다.
사용자가 선택해야 할 선택지가 늘어날 수록 결정하기까지의 시간이 늘어난다.
💡인지 부하
정보를 학습하거나 문제 해결 과정에서 필요한 인지적 요구량을 의미
뇌가 처리할 수 있는 양보다 처리해야 하는 내용이 더 많으면 인지 부하가 발생한다.
인지 부하의 한계점을 넘어가는 순간 사용자는 이탈한다.
인지 부하를 줄이는 방법
- 복잡한 작업을 해야할 경우 작은 단계로 나눠서 수행한다.
- 의사 결정 시간을 줄이기 위해 선택지의 개수를 최소화한다.
- 추천 선택지를 강조하여 사용자의 부담을 줄인다.
- 너무 추상적으로 단순화하지 않는다.
4. 밀러의 법칙
보통 사람들은 7개 정도의 항목(정보의 덩어리) 밖에 정보를 기억하지 못 한다.
정보를 하나의 덩어리로 만들어 이해하고 기억하는 것이 더 효과적이다.
디자인에서 활용법
- 정보를 구조화, 그룹화
- 메뉴나 항목이 꼭 7개일 필요는 없다.
- 유사한 정보끼리 시각적으로 구별될 수 있도록 그룹을 나누어 명확하게 체계화한다.
5. 기업의 디자인 원칙
기업의 철학과 비전을 담고 제품의 심미성과 사용성을 높일 수 있도록 제시하는 가이드
의사결정과 가치 판단의 기준이 되고 효율성을 높일 수 있도록 일관된 원칙을 제시한다.
예시
스포티파이
🔗 참고 :
https://spotify.design/article/introducing-spotifys-new-design-principles
(출처 : 스포티파이)
Relevant
모든 사용자에게 보편적이고 공통된 경험을 제공하는 것이 아닌 개인화된 경험을 제공한다.
ex. 인도의 사용자들에게 초기 단계에서 선호하는 언어에 대한 선택지를 주어 앱 내부의 컨텐츠들을 선호하는 언어로 볼 수 있도록 한다.
Human
의사소통과 표현의 방식이 직관적이고 인간적이어야 한다.
ex. 어린이가 프로필을 만들 때 소통의 경험을 제공하기 위해 캐릭터를 사용한다.
Unified
사용자들에게 친숙함과 신뢰를 구축하기 위해 제품간의 일관성을 목표로 한다.
일관성을 위해 사용자의 경험을 재사용하고 적응시킬 수 있도록 한다.
ex. 버스 정류장, 지하철 등에 홍보를 할 때 앱 화면으로 컨텐츠를 만들어 실제 일상과 스포티파이 어플 내부의 화면이 이어지는 경험을 제공한다.
🐛 다음 시간에 학습할 내용
레퍼런스 분석
UX/UI 디자인 패턴
