[ch5] 디자인 원칙

디자인 원칙

• 인지심리학 관점에서 디자인할 때 지켜야 할 규칙을 정해놓은 것.
• 인지 심리학 : 인간이 어떻게 보고, 생각하고, 받아들이는 지를 연구하는 학문.
• 많은 사람들이 비슷하게 느끼고, 행동하는 방식에 기초해 디자인하는 방법을 제시한다.
• 원칙을 기반해 디자인하면 사람들이 편안하게 느끼고 자연스럽게 행동하도록 유도할 수 있고, 사용성이 높은 제품을 만들 수 있도록 도와준다
• 종류 : 게슈탈트 심리학, UX 비주얼 디자인 원칙, UX/UI 심리학 법칙, 기업의 디자인 원칙.

디자인 원칙의 종류 : 게슈탈트 심리학

• 게슈탈트 심리학 : 사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는다는 이론.

• 위의 사진이 사람이 키스를 하는 사진으로도, 또는 길다란 잔으로도 보일 수 있는 것처럼 어떠한 대상의 의미가 대상이 속한 그룹 전체의 특성에 따라 영향을 받아 달라진다는 이론이다.

1. 유사성의 원리 : 크기나 형태, 방향, 색 등의 특성이 비슷한 것끼리 묶으려는 경향.
   비슷한 것을 하나로 묶는 인간의 본성에 의해 겉모습이 비슷하면 서로 더 관련성이 있다고 보고 그룹화하려는 모습을 보이는 것으로, 모양, 크기, 색상,방향 등의 요소를 통해 유사한 것끼리 그룹 관계를 형성하며 그 강함 정도는 모양<크기<색 순이다.
   
   
2. 근접성의 원리 : 가까운 것끼리 묶으려는 경향으로 유사성의 원리보다 강하다.
   사람들은 가까이 있는 요소들이 멀리 있는 요소들보다 더 관련성이 있다고 느끼기에, 어떤 것들이 모두 비슷한 간격으로 떨어져 있다면, 사이에 특별한 관계있다고 생각하지 않는 모습을 보인다. 이를 통해 여백을 둬서 나눠진 요소끼리 서로 그룹화 되어 보이게 한다. 
   
   
3. 폐쇄성의 원리 : 공백이 있더라도 틈이나 간격을 메워서 닫힌 형태로 인식하려는 경향.
   덕분에 도형의 일부가 끊어져 있거나, 이어져 있지 않더라도 완벽한 형태로 인식할 수 있다.
   
   
4. 연속성의 원리 : 연속적으로 직선이나 곡선을 이루는 요소를 잘 인지하는 경향.
   사람은 어떤 요소가 방향성을 가지고 연속되어 있을 때 편안함을 느끼고, 직선이나 곡선을 따라 배열된 대상을 하나의 단위로 인식하게 된다.
   
   
5. 공통성의 원리 : 같은 방향으로 움직이는 것들끼리 더 관련성이 높다고 인식하는 경향.
   모양, 색상 등에 관계없이 함께 움직이거나 바뀌는 요소는 서로 더 관련이 있다고 느끼며, 이는 주로 모션 그래픽에서 자주 사용한다.

UX 비주얼 디자인 원칙

• UX 비주얼 디자인 원칙을 잘 활용하면 시각적으로 매력적인 이유를 근거를 들어 설명하거나, 심미적으로 아름다울 뿐만 아니라 사용성을 높여준다.
• 원칙에 따라 잘 설계된 디자인은 사용자가 제품에 몰입하는 것을 도와주고 쓰기에도 편리해진다.

1. 스케일 : 상대적인 크기를 사용하여 구성의 중요도와 순위를 표시.
   가장 중요한 요소를 덜 중요한 요소보다 크게 표현하여 더 주목받도록 하게 한다.
   
   
2. 시각적 위계 : 중요한 순서에 따라 시선의 흐름이 이동하도록 디자인.
   크기, 색상, 간격, 배치 등을 통해 표현하며, 중요도에 따라 요소의 크기를 large , medium , small 로 분류하거나, 혹은 요소의 색상 채도와 대비 정도를 다르게 적용한다.
   
   
3. 균형 : 디자인 요소 간에 적당한 배열이나 비율을 주는 것.
   시소처럼 디자인 요소 간 균형을 맞추어서 정보를 대칭이 아니어도 수직이나, 수평의 가상 축으로 비슷한 양이 배치되도록 한다.
   활용 가능한 요소로는 대칭, 비대칭, 방사형 이 있다.
   
   1. 대칭 : 안정적이고, 정적인 느낌을 주고 싶을 때 사용.
   2. 비대칭 : 역동적이고 신선한 느낌을 주고 싶을 때 사용.
   3. 방사형 : 중앙의 점을 기준으로 원형으로 배치하여 시선을 중앙에 집중시키고 싶을 때 사용.
   
   
4. 대비 : 눈에 띄게 구별되도록 강조를 통해 두 요소 간의 차이를 둔다.
   특정 부분을 사용자에게 돋보이게 하고 싶을 때 크기나 색상을 사용해 두 디자인 요소 간에 뚜렷한 차이를 주는 방법을 통해 사용한다. 이때, 덜 중요한 텍스트의 강조를 줄이기 위해 배경과의 명도 차이를 너무 줄여 오히려 사용성을 떨어뜨리지 않도록 주의한다.
   
   

UX/UI 심리학 법칙

• 사람이 어떻게 행동하고, 그러는 지를 이해해 보면서 무엇이 디자인에 직접적인 영향을 끼치는지를 알 수 있다.
• 명확한 이론적 근거를 바탕으로 주장할 수 있어 정량적, 정성적 데이터가 없는 초기 제품에 대한 의사결정의 근거로 활용할 수 있다.
• 사용자의 경험을 근원적으로 이해할 수 있도록 도와주며, 좋은 디자인을 할 수 있도록 도와주는 스스로의 체크리스트가 되어준다.

 

1. 제이콥의 법칙 : 사용자는 새로운 제품을 사용할 때도 자신이 이미 알고 있는 익숙한 제품의 방식으로 시도하기에, 같은 방식으로 작동하길 원한다.
   인터페이스를 익하는데 드는 정신적 에너지가 줄어들수록, 사용자가 목표 달성에 투자할 에너지가 늘어나고, 이에 따라 목표 달성이 수월해지며, 이는 멘탈모델이 큰 영향을 기친다.
   
   
   
2. 피츠의 법칙 : 터치 대상에 도달하는 시간은 거리랑 크기에 서로 함수 관계에 있다.
   사용자가 인터랙션해야 하는 대상은 거리가 가깝고, 크기가 커야 사용성이 좋다는 뜻으로, 이때 터치해야 하는 대상의 크기는 사용자가 정확하게 선택할 수 있을 만큼 충분히 크고, 쉽게 닿을 수 있는 영역에 배치해야 하며 다수의 터치 대상 간 사이에 충분한 거리를 확보해야 한다.
   
   
3. 힉의 법칙 : 의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해서 늘어난다.
   사용자가 선택해야 하는 선택지가 늘어나면 결정까지 시간이 늘어나며, 이 많은 양의 정보가 한 번에 들어오면 사람의 뇌는 이를 처리하기 위해 인지 부하가 생기는데, 이 인지 부하의 한계점을 넘어가면 사용자는 이탈하게 된다. 
   이 부하를 줄이기 위해서, 복잡한 작업은 더 작은 단계로 나누거나 선택지의 개수를 최소화한다. 단, 너무 추상적으로 단순화하면 역으로 정보의 양이 지나치게 적으면 인지 부하가 생긴다.
   
   
   
4. 밀러의 법칙 : 보통 사람은 작업 기억에 7개 내외의 항목 밖에 저장하지 못한다.
   사람마다 다르지만, 보편적으로 무언가를 기억할 수 있는 정보의 덩어리가 크기와 상관없이 7개 내외로, 인간은 단기 기억을 보충하기 위해 정보를 덩어리로 만들어서 더 효과적으로 이해하고 기억할 수 있다. 그렇기에, 사용자가 쉽게 이해하고 기억할 수 있도록 유사한 정보를 시각적으로 구별되도록 구조화, 그룹화하고 명확하게 체계화한다. 
   
   
5. 포스텔의 법칙 : 자기 자신에게는 엄격하고, 남의 것을 받아들일 때는 너그러워야 한다.
   
   
6. 피크엔드 법칙 : 인간의 경험은 전체 평균이나 합계가 아니라, 절정과 마지막에 느낀 감정을 바탕으로 경험을 판단한다.
   
   
7. 심미적 사용성 효과 : 보기 좋은 디자인을 사용성 더 뛰어난 디자인으로 인식한다.
   
   
8. 폰 레스토프 효과 : 비슷한 사물이 여러 개 있으면 그중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다.
   
   
9. 테슬러의 법칙 : 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.
   
   
10. 도허티 임계 : 컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도로 인터랙션하면 생산성이 급격히 높아진다.

기업의 디자인 원칙

• 기업의 철학을 담고, 심미성과 사용성이 높은 제품을 만들 수 있도록 제시하는 가이드.
• 기업과 제품의 비전을 공유하면서, 공통된 느낌을 주는 일관된 원칙을 제시한다.
• 심미적인 UI와 인터렉션을 구현하는 동시에 사용성을 지키는 방법을 안내하며, 의사결정 기준이 되고 시간을 절약한다
  
  

기업 별 디자인 원칙

• 스포티파이

1. 연관성 : 개인화를 통해 사용자 개인을 위해 만들어진 것이라는 느낌을 주기 위해, 정보를 어떻게 적시에 누구에게 무슨 맥락으로 제시해야할 지 신중하게 고려해야한다.
   
   
2. 인간성 : 기술에 뿌리를 두고 있으나, 모든 것은 사람을 위한 것임을 강조라기 위해 지나치게 영리하거나 기술적이나 기능적이어서 인간처럼 보이지 않도록 주의하며, 인간의 논리로 생각하고 감정을 나누도록 한다.
   
   
3. 통일성 : 제품 안에서 일관된 경험을 통해 친숙함과 신뢰를 구축할 수 있도록 디자인하는 모든 것이 스포티파이처럼 보이게 한다. 이를 위해서 새로 발명보다는 재사용하는 방법을 통해 일관성을 유지하도록 한다. 

 

• 페이스 북

1. 보편적인 : 페이스북의 사명은 전 세계를 더 개방적으로 만드는 것으로, 이를 위해 모든 사람과 문화, 언어, 장치를 위해 디자인되어야한다. 소수에게만 작동하는 기능을 경계하고 대다수의 사용자에게 작동하는 제품을 만든다.
   
   
2. 인간성 : 사용자는 주변의 다른 이들과 함께하기 위해 페이스북에 들어오기에, 제품보다는 사용자를 먼저 보일 수 있도록 한다.
   
   
3. 깔끔함 : 사용자가 생활할 빈 캔버스를 만들기 위해 최소한의 밝은 공간으로 사용자의 참여와 의사소통을 장려하면서도 단정한 비주얼 스타일을 고수해야 한다. 
   
   
4. 일관적 : 유사한 요소들이 비슷한 방식의 패턴을 활용함으로서 제품 안에서 일관된 인터액션으로 사용자와의 신뢰를 만들고, 시간을 절약을 통해 사용성이 향상되도록 한다.
   
   
5. 유용함 : 반복되는 일상 중 하나로 효율적인 가치를 제공하기 위해서, 핵심 인터액션은 간소화하고 불필요한 클릭과 낭비를 줄여야 한다.
   
   
6. 빠름 : 사용자들의 시간을 중요하게 하기 위해, 사이트 성능을 사용자가 알아채지 못할 정도로 빠르게 동작하여 더 빠른 경험을 제공하여 효율적으로 사용자의 노력을 줄여준다.
   
   
7. 투명함 : 사용자의 신뢰를 보답하기 위해 최대한 정직하고 투명하게 현재의 일에 명확하고 솔직하게 설명해야 한다.

---