디자인 원칙
디자인을 할때 인지심리학의 관점에서 지켜야할 원칙
인지심리학 - 인간이 어떻게 보고 행동하는지 연구
다양한 사람들이 비슷하게 느끼고 행동하는 방식에 기초해서 디자인하는 방식
편안하게 느끼고 자연스럽게 행동할 수 있도록 유도해 사용성이 높은 제품을 만들 수 있다.
디자인 원칙의 종류
1. 게슈탈트 심리학
2. UX비주얼 디자인 원칙
3. UX/UI 심리학 법칙
4. 기업의 디자인 원칙
게슈탈트 심리학
사람이 이미지를 인식할 때 주변에 있는 요소의 관계에 따라 영향을 받는다는 이론
특정 요소를 가치판단할 때 속한 그룹에 따라 영향을 미침
게슈탈트 심리학을 알아야하는 이유
착시현상
뇌가 모든 정보를 그대로 받아들이지 않는다.
필요없는 것은 지우고 기억하기 쉬운 상태로 정리해 받아들임
사용자가 제품을 이용하는데 영향을 미침
제품을 사용하는 사용자는 통일성, 연속성, 유사성을 기대함
게슈탈트 심리학의 원리
1. 유사성의 원리
겉모습이 비슷하면 서로 관련성이 있다고 본다.
-모양을 이용한 유사 관계 형성
색상과 크기를 사용한 유사 관계 형성보다 훨씬 약하다.
-크기를 이용한 유사 관계 형성
-색상을 이용한 유사 관계 형성
색상을 사용한 유사 관계 형성은 유사성의 원리 중에서 가장 강력
-방향을 이용한 유사 관계 형성
- 근접성의 원리
가까이 있는 요소들이 멀리 있는 요소들보다 더 관련성이 있다고 느낍
-여백을 사용한 근접 관계 형성
색상을 사용한 유사 관계보다 여백을 사용한 근접 관계가 더 강하다.
-
폐쇄성의 원리
로고에서 주로 사용
공백이 있더라도 사용자는 익숙한 도형에 빗대어 매워서 인식하려함
-
연속성의 원리
사용자들은 연속적으로 이어진 직선이나 곡선을 잘 인지한다.
-
공통성의 원리
모션그래픽에서 주로 사용
같은 방향으로 움직이는 것들이 더 관련성 있다고 인식
UX 비주얼 디자인 원칙
닐슨 노먼 그룹에서 정리하고 배포한 원칙
장점
- 시각적으로 매력적인 이유를 근거를 들어 설명할 수 있다.
- 심미적인 아름다움 뿐만 아니라 사용성도 좋아진다.
- 사용자가 제품에 몰입하는 것을 도와주고 데이터로 증명이된다.
-
스케일
상대적인 크기를 사용하여 중요도와 순위를 표시한다.
크기가 클 수록 주목받을 가능성이 높다.
시각적으로 보기가 좋은 디자인은 3가지 이하의 크기를 사용한다. -
시각적인 위계
중요한 순서에 따라 시선의 흐름이 이동하도록 디자인 하는 것을 말함
크기나 색상, 간격 배치 등을 통해 표한할 수 있다.
사용자가 화면에서 길을 잃고 이탈하지 않도록 길잡이 역할을 한다.
3단계 정도의 단계로 분류하는 것을 추천
중요하다고 생각하는 요소는 채도가 높고 색상 대비를 크게, 덜 중요한 것은 채도도 낙고 색상 대비를 크지 않게 -
균형
넣은 요소들의 균형을 줘야함
시소처럼 디자인 요소 간의 균형을 맞춘다고 생각
대칭은 안정적이지만 지루할 수 있다.
비대칭은 무게감의 균형을 맞춰야하지만 역동적이다.
방사형은 시선을 집중 시킬 수 있다.
- 대비
눈에 띄게 요소간의 차이를 주는 것
특정 부분을 돋보이게 하고 싶을 때 사용
대비를 줄때 사용성을 해치지 않게 사용
UX/UI 심리학 법칙
사람이 어떻게 행동하고 왜 그런 행동을 했는지를 설명
데이터를 활용해서 디자인을 한다는건 데이터가 없는 제품 초기에 대한 의사결정의 근거가 된다.
명확한 이론적 근거
좋은 디자인을 할 수 있는 체크리스트
사용자의 경험을 근원적으로 이해할 수 있음
- 제이콥의 법칙
사용자가 새로운 제품을 사용할 때 이미 익숙한 방식으로 작동하길 원함
기존에 학습한 지식과 경험을 바탕으로 사용하려고 시도
목표를 성공적으로 사용할 확률이 높아진다.
멘탈모델
사람들이 다양한 대상에 대해 갖고 있는 생각과 패턴
새로운 디자인을 하거나 제품에 큰 변화가 있을 때 기존의 멘탈모델을 활용한다.
EX) 스큐어모피즘
- 피츠의 법칙
터치하는 대상에 도달하는 시간은 대상까지의 거리와 크기가 함수 관계에 있다는 법칙
사용자가 인터렉션해야하는 대상의 거리가 가깝고 크기가 커야 사용성이 커진다.
터치해야하는 대상은 사용자가 정확하게 선택할 수 있을 만큼의 크기
터치해야하는 대상은 마우스나 손가락이 쉽게 닿을 수 있는 곳에 배치
스티븐 후버의 연구
오른손기준
- 힉의 법칙
사용자가 의사결정을 할 때 걸리는 시간은 선택지의 개수와 복잡성에 비례
인지부화
정보를 처리하는데 필요한 인지적 요구량
뇌가 처리할 수 있는 양보다 처리해야할 양이 많으면 인지부화가 온다.
인지부화의 한께점이 넘어가는 순간 사용자는 이탈한다.
복잡한 작업은 더 작은 단계로 나눈다.
의사결정 시간을 줄이기 위해 선택지의 개수를 줄인다.
추천 선택지를 강조해서 사용자의 부담을 줄인다.
너무 추상적으로 단순화해 정보의 양이 지나치게 적을 때 인지부화가 생긴다.
- 밀러의 법칙
보통 사람은 작업기억에 7개(±2)정도 밖에 저장하지 못 함
밀러의 법칙에서 기억해야할 것은 개수가 아니라 정보 덩어리다.
정보를 적절히 덩어리로 만드는 것이 중요
메뉴나 항목을 무조건 7개로 제한하라는 뜻이 아님
-
포스텔의 법칙
자기 자신에게는 엄격하고, 남의 것을 받아들일 때는 너그럽게 해야 한다. -
피크엔드 법칙
인간의 경험은 전체 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다.
-
심미적 사용성 효과
보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.
-
폰 레스토프 효과
비슷한 사물이 여러 개 있으면 그중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다.
-
테슬러의 법칙
모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.
-
도허티 임계
컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션하면 생산성이 급격히 높아진다.
기업의 디자인 원칙
기업의 철학을 담고 심미성과 사용성이 높은 제품을 최대한 다양한 사람이 만들 수 있게 제시하는 가이드
기업과 제품의 비전을 공유할 수 있는 문서
공통된 느낌을 주는 일관된 원칙
심미적인 UI와 인터렉션을 구현하는 동시에 사용성을 지키는 방법
의사결정의 기준으로 시간을 절약
EX) Spotify
-연관성
개인을 위해 만들어진 것 같은 느낌을 줘야함
정보를 적시에 제공하는 것이 중요
정보를 제공할 때 무엇을, 누구에게, 어떤 맥락을 제히사는지 신중하게 고려
문화권에 맞춘 정보 제공
-인간
기술에 뿌리를 두고있지만 모든 것을 사람을 위한 것
지나치게 영리하거나 기능적인것은 인간처럼 보이지 않아 경계
키즈 프로필에 재밌는 캐릭터를 사용
-통일성
메세지와 이미지가 통일
스포티파이의 느낌을 가져가야함
제품안에서 일관된 경험을 통해 친숙함과 신뢰를 구축
디자인 원칙의 실제 사례 찾아보기
1.게슈탈트 심리학에서 3가지를 골라 실제 사례를 찾아보세요.
유사성의 원리
근접성의 원리
폐쇄성의 원리
2.UX 비주얼 디자인 원칙에서 3가지를 골라 실제 사례를 찾아보세요.
시각적 위계
균형
대비
