· 인지심리학의 관점에서 디자인할 때 지켜야 할 규칙을 정해놓은 것 · 다양한 사람들이 비슷하게 느끼고, 행동하는 방식에 기초해 디자인하는 방법을 제시함 · 디자인 원칙을 기반해 디자인하면, 사람들이 편안하게 느끼고 자연스럽게 행동하도록 유도할 수 있음 + 사용성 높은 제품을 만들도록 도와줌
디자인 원칙의 종류
게슈탈트 심리학
UX 비주얼 디자인 원칙
UX/UI 심리학 법칙
기업의 디자인 원칙
게슈탈트 심리학
사람이 이미지를 인식할 때 주변에 있는 요소 간의 관계와 맥락에 영향을 받는 다는 이론
게슈탈트 심리학은 사용자가 제품을 경험하는 데 영향을 끼침
제품을 이용하는 사용자의 의식은 계속해서 화면 구성의 통일성, 연속성, 유사성을 기대함
화면이 기대한 대로 구성되어 있지 않다면, 사용자의 몰입이 깨지고 제품을 이탈하는 상황 발생
게슈탈트 심리학의 원리들
유사성의 원리: 크기나 형태, 방향, 색 등의 특성이 비슷한 것끼리 묶어서 지각하려는 경향 (모양의 유사성보다 색상의 유사성이 더 강력함)
근접성의 원리: 가까운 것끼리 묶어서 지각하려는 경향 (모양이 달라도 여백을 두고 나눠진 요소들끼리는 서로 그룹화가 되어 보임) (색상의 유사성 보다 여백의 근접성이 더 강력함)
폐쇄성의 원리: 공백이 있더라도 틈이나 간격을 메워서 닫힌 형태로 인식하려는 경향 출처: UXUI 디자인 입문(챕터5-1)(일부를 보여주면서 잘라야 함)
연속성의 원리: 연속적으로 직선이나 곡선을 이루는 요소를 잘 인지하는 경향 출처: UXUI 디자인 입문(챕터5-1)이미지의 크기가 모두 다르지만, 수직선을 만드는 열로 배열되어 있음 ▶️ 연속된 세로의 수직 레이아웃으로 인해 사용자는 편안함을 느낌 ▶️ 왜 익숙함을 느끼는가? 직선, 곡선으로 이어지는 것에 익숙함을 느끼기 때문
공통성의 원리: 같은 방향으로 움직이는 것들끼리 더 관련성이 높다고 인식하는 경향 (주로 모션 그래픽에서 사용됨)
5-3) UX 비주얼 디자인 원칙
📌 UX 비주얼 원칙 📌 · UX 에 영향을 끼치는 시각 디자인의 원칙을 정리한 것
UX 비주얼 디자인 원칙의 힘
시각적으로 매력적인 이유를 근거를 들어 설명할 수 있음
이 원칙을 사용하면 심미적으로 아름다울 뿐 아니라 사용성도 높여줌
사용자가 제품에 몰입하는 것을 도와주고쓰기도 편리함
UX 비주얼 디자인 원칙 종류
스케일 Scale
상대적인 크기를 사용해 구성의 중요도와 순위를 표시하는 것
크기가 크면 더 주목받을 가능성이 높음
시각적으로 보기 좋은 디자인은 3가지 이하의 크기를 사용
시각적 위계 Visual hierarchy
중요한 순서에 따라 시선의 흐름이 이동하도록 디자인하는 것
크기, 색상, 간격, 배치 등을 통해 표현 가능
명확한 시각적 위계를 만들려면 2-3개 정도의 텍스트 크기를 사용해야 함
요소의 크기는 large, medium, small 정도로 분류하기
중요한 요소는 채도가 높고, 색상 대비가 크게 / 덜 중요한 요소는 그 반대로
균형 Balance
디자인 요소 간에 적당한 배열이나 비율을 주는 것
수직이나, 수평의 가상의 축에 비슷한 양의 시각적 정보가 배치되도록 하기 ▶️ 꼭 대칭이 아니어도 괜찮음
대비 Contrast
눈에 띄게 구별되도록 강조하기 위해 두 요소 간의 차이를 두는 것
특정 부분을 사용자에게 돋보이게 하고 싶을 때 사용 (어느 정도의 위계)
주로 명암 차이를 주거나 색상 차이를 주는 방버을 많이 사용함
주의점: 덜 중요한 텍스트의 강조를 줄이기 위해 배경과 명도의 차이를 너무 줄이지 말아야 함 ▶️ 왜? 너무 흐릿한 글자는 사용성을 떨어뜨림
5-4) UX/UI 심리학 법칙
📌 UX/UI 심리학 법칙 📌
· 정량정, 정성적 데이터가 없는 초기 제품에 대한 의사결정의 근거가 되어줌 · 명확한 이론적 근거를 바탕으로 주장할 수 있고, 설득의 무기로 활용할 수 있음 · 스스로 좋은 디자인을 할 수 있도록 도와주는 체크리스트가 되어줌 · 사용자의 경험을 근원적으로 이해할 수 있도록 도와줌
UX/UI 에 영향을 주는 심리학 법칙들
제이콥의 법칙
사용자는 새로운 제품을 사용할 때, 자신이 이미 알고 있는 익숙한 제품과 같은 방식으로 작동하길 원한다는 법칙
누구나 새로운 제품을 처음 접하면, 기존에 학습된 지식과 경험을 바탕으로 비슷하게 사용하려고 시도함
멘탈모델이 중요한 영향을 끼침
멘탈모델: - 자신이나 타인, 개념, 사물, 현상 등 다양한 대상에 대해 갖고 있는 생각패턴 - 개개인마다 경험과 학습을 통해 형성되고 사용자의 생각, 행동, 의사결정에 영향을 미침 - e.g. 스마트폰에서 사진을 확대하려면? ▶️ 보통 두 손가락을 오므렸다 펼치는 동작을 할 것임 🟰 디지털 제품 속 사진에 대한 보편적인 멘탈모델 중 하나로 볼 수 있음
💡 활용 방법💡
새로운 디자인을 할 때, 제품에 큰 변화가 있을 때 ▶️ 기존의 멘탈 모델을 잘 활용하는 것이 좋음
사용 방법을 새로 익히지 않아도 되니 사용자가 들여야 하는 시간, 비용, 노력이 줄어들음
피츠의 법칙
터치 대상에 도달하는 시간은 대상까지의 거리와 크기와 함수 관계에 있다는 법칙 = 사용자가 인터랙션 해야 하는 대상은 거리가 가깝고, 크기가 커야 사용성이 좋다는 뜻
💡활용 방법💡
터치해야 하는 대상의 크기 ▶️ 사용자가 정확하게 선택할 수 있을 만큼 충분히 커야 함
터치해야 하는 대상이 2개 이상이라면? ▶️ 잘못 누르지 않도록 둘 사이에 충분한 거리를 확보해야 함
터치해야 하는 대상은? ▶️ 마우스나 손가락이 쉽게 닿을 수 있는 영역에 배치해야 함
규격과 영역🔽
출처: UXUI 디자인 입문(챕터5-4)
힉의 법칙
의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다는 법칙
선택지가 늘어나면 결정까지 시간이 늘어남 ▶️ 사람의 뇌는 한꺼번에 많고 복잡한 정보가 들어오면 이를 처리하기 위해 인지부하가 생김
인지부하: - 정보를 학습·문제를 해결 하는 과정에서 필요한 인지적 요구사항 - 뇌가 처리할 수 있는 양보다 처리할 정보가 많으면 인지 부하가 생김 - 인지부하의 한계점을 넘어가는 순간 사용자는 이탈함
💡활용 방법💡
복잡한 작업은 더 작은 단계로 나누기
의사결정 시간을 줄이기 위해 선택지 개수 최소화 (추천 선택지를 강조해서 사용자 부담을 줄이는 것도 도움됨)
너무 추상적으로 단순화하지 않도록 주의하기 ▶️ 정보의 양이 지나치게 적을 때에도 인지 부하가 생김
사례: 토스의 회원가입 과정(입력폼을 단계적으로 노출하여 사용자의 부하를 낮춤, 쉽게 넘어가서 사용자는 실제보다 거치는 단계를 짧다고 느끼는 효과를 얻음)
밀러의 법칙
보통 사람은 작업 기억에 7(+-2)개 정도의 항목 밖에 저장하지 못한다는 법칙
덩어리는 한 그룹으로 묶여서 기억에 저장되는 기본 단위로, 덩어리의 크기는 크게 중요하지 않음
인간의 단기 기억은 한계가 있기 때문에 정보를 덩어리로 만들면 더 효과적으로 이해하고 기억할 수 있음
💡 활용 방법 💡
사용자가 쉽게 이해하고 기억할 수 있도록 ▶️ 정보를 구조화, 그룹화 하기
유사한 정보끼리 시각적으로 뚜렷이 구별되도록 그룹으로 나누고 명확하게 체계화하기
즉, 정보를 정보를 적절히 덩어리로 그룹핑하기
5-5) 기업의 디자인 원칙
📌 기업의 디자인 원칙 📌
· 기업의 철학을 담고, 심미성과 사용성이 높은 제품을 만들 수 있도록 제시하는 가이드 · 기업과 제품의 비전을 공유 · 공통된 느낌을 주는 일관된 원칙을 제시 · 심미적인 UI 와 인터랙션을 구현하는 동시에 사용성을 지키는 방법을 안내 · 의사결정 기준이 되고 시간을 절약함
Spotify
연관성
스포티파이는 개인화를 통해 사용자 개인을 위해 만들어진 것이라는 느낌을 줘야 함
무엇을, 누구에게, 어떤 맥락을 제시해야 하는지 신중하게 고려
e.g. 재생 목록의 커버 이미지를 보여줄 때 ▶️ 문화권에 맞춘 정보를 제공
인간
기술에 뿌리를 두고 있지만, 모든 것은 사람을 위한 것
지나치게 영리하거나 기술적, 기능적인 것은 인간처럼 보이지 않음
e.g. 프로필 사진을 설정할 때 ▶️ 본인의 프로필 사진을 넣을 수 있도록 하거나 or 키즈 프로필에 재밌는 캐릭터를 사용하는 방법 활용
