[UXUI Design] UXUI 디자인 입문_Chapter 5

#1 TASK

 ▼ 학습 목표

• 사용성을 지키면서 심미적인 UI와 인터렉션을 구현할 수 있는 비주얼 역량
• 게슈탈트 심리학이 무엇인지 세부 원리들을 이해
• UX비주얼 디자인 원칙을 이해하고 디자인 원칙을 활용
• UX/UI 심리학 법칙의 유용성을 알고 필요한 원칙을 찾아 학습

 

#2 Learning process

 1. 디자인 원칙

 ❑ 디자인 원칙이란

• 인지심리학의 관점에서 디자인할 때 지켜야 할 규칙을 정해높은 것
• 디자인 원칙은 많은 사람들이 비슷하게 느끼고, 행동하는 방식에 기초해 디자인하는 방식
• 디자인 원칙을 기반해 디자인하면 사람들이 편안하게 느끼고 사용성이 높은 제품을 만들 수가 있음

 ❑ 디자인 원칙의 종류

1. 게슈탈트 심리학
   • 사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론
   • 유사성의 원리, 근접성의 원리, 폐쇄성의 원리, 연속성의 원리, 공통성의 원리 등이 있다.
     1. 유사성의 원리 The law of similarity
        - 크기나 형태, 방향, 색 등의 특성이 비슷한 것끼리 묶어서 지각하려는 경향 (그룹핑)
     2. 근접성의 원리 The law of proximity
        - 가까운 것끼리 묶어서 지각하려는 경향
        
     3. 폐쇄성의 원리 The law of closure
        - 공백이 있더라도 틈이나 간격을 메워서 닫힌 형태로 인식하려는 경향
        * 폐쇄성 원리 덕분에 이미지의 일부가 잘려있어도 옆으로 계속해서 요소들이 이어질 것이라는 걸 추측
        
     4. 연속성의 원리 The law of continuance
        - 연속적으로 직선이나 곡선을 이루는 요소를 잘 인지하는 경향
        * 직선이나 곡선을 따라 배열된 대상을 하나의 단위로 인식
        
     5. 공통성의 원리 The law of common fate
        - 같은 방향으로 움직이는 것들끼리 더 관련성이 높다고 인식하는 경향
        * 게슈탈트 심리학을 알아야하는 이유: 착시현상처럼 형태의 정보 중에서 필요 없는 것은 지우고 기억하기 쉬운 상태로 정리
2. UX 비주얼 디자인 원칙
   
   • UX에 영향을 끼치는 시각 디자인의 원칙을 정리
   • 스케일, 시각적 위계, 균형, 대비 등이 있음
     1. 스케일 Scale
        - 상대적인 크기를 사용하여 구성의 중요도와 순위를 표시하는 것을 말함
        * 크기가 크면 더 주목받을 가능성이 높음
        
     2. 시각적 위계 Visual hierarchy
        - 중요한 순서에 따라 시선의 흐름이 이동하도록 디자인하는 것을 말함
        - 시각적 위계는 크기, 색상, 간격, 배치 등을 통해 표현할 수 있다.
        * 중요하다고 생각되는 요소는 채도가 높고 대비가 크게 적용
        
     3. 균형 Balance
        - 디자인 요소 간에 적당한 배열이나 비율을 주는 것
        - 적절한 균형을 이루는 것이 사용성이 좋다라고 생각
        
     4. 대비 Contrast
        - 눈에 띄게 구별되도록 강조하기 위해 두 요소 간의 차이를 두는 것
        - 주로 명암의 차이를 주거나 색상의 차이를 주는 방법을 택함
        * 너무 흐릿한 글자는 사용성을 떨어트린다.
        
3. UX/UI 심리학 법칙
   • 심리학 법칙은 사람이 어떻게 행동하고, 왜 그런 행동을 하는지 설명하는 법칙
   • 정량적, 정성적 데이터가 없는 초기 제품에 대한 의사결정의 근거가 되어줌
   • 사용자의 경험을 근원적으로 이해할 수 있도록 도와줌
     1. 제이콥의 법칙
        - 사용자는 새로운 제품을 사용할 때도 자신이 이미 알고 있는 익숙한 제품과 같은 방식으로 작동하길 원함
        * 인터페이스를 익히는데 드는 에너지가 줄어들면 목표 달성이 수월해져 성공적으로 달성 확률↑
        * 멘탈모델 : 자신이나 타인, 개념 사물, 현상 등 다양한 대상에 대해 갖고 있는 생각 패턴
          -> 사용 방법을 새로 익히지 않아도 되니 사용자가 들여야 하는 시간과 비용, 노력이 줄어듦
        
     2. 피츠의 법칙
        - 터치 대상에 도달하는 시간은 거리와 크기와 함수 관계가 있음
        * 사용자가 인터랙션해야 하는 대상은 거리가 가깝고, 크기가 커야 사용성이 좋다는 뜻
        
     3. 힉의 법칙
        - 의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어남
        * 인지부하 : 정보를 학습하거나 문제를 해결하는 과정에서 필요한 인지적 요구량
         ‣ 인지 부하의 한계점을 넘어가는 순간 사용자는 이탈.
        - 입력 폼을 단계적으로 노출하여 사용자의 부하를 낮춤
        
     4. 밀러의 법칙
        - 보통 사람은 작업 기억에 7(±2)개의 항목 밖에 저장하지 못함
        * 덩어리이기 때문에 메뉴나 항목을 무조건 7개로 제한하라는 뜻 X
        * 유사한 정보끼리 시각적으로 뚜렷이 구별되도록 그룹으로 나누고 명확하게 체계화 할 것.
        
     5. 포스텔의 법칙
        - 자기 자신에게는 엄격, 남의 것을 받아들이 때는 너그럽게 해야함
        
     6. 피크엔드 법칙
        - 인간의 경험은 과정보다 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 판단하는 경향이 있음
        
     7. 심미적 사용성 효과
        - 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식
        
     8. 폰 레스토프 효과
        - 비슷한 사물이 여러 개 있으면 그 중에서 가장 차이가 나는 한 가지만 기억할 가능성이 큼
        
     9. 테슬러의 법칙
        - 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재
        
     10. 도허티 임계
         - 컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4s 이하)로 인터랙션 하면 생산성이 급격히 높아짐
         
4. 기업의 디자인 원칙
   
   • 기업의 철학을 담아 심미성과 사용성이 높은 제품을 만들 수 있도록 제시하는 가이드
     - 기업과 제품의 비전을 공유
     - 공통된 느낌을 주는 일관된 원칙을 제시
     - 심미적인 UI와 인터랙션을 구현하는 동시에 사용성을 지키는 방법을 안내
     - 의사결정 기준이 되고 시간을 절약
     
   • 구글, 페이스북, 스포티파이 등 규모가 큰 기업에서는 디자인 원칙을 정한 후 이러한 원칙 아래에서 제품을 만들고 있음