UX/UI 디자이너가 알아야 할 심리학 원칙
심리학은 앱의 UX에 큰 영향을 끼칩니다. 디자인이 어떻게 인지되는지 이해함으로써, 사용자가 더 효과적으로 목표 달성을 할 수 있게 디자인을 조정할 수 있습니다.
사용자가 디자인을 어떻게 인지 하는지에 대한 몇 가지 디자인 원칙을 소개하려고 합니다.
1. Von Restorff effect (고립 효과)
같은 물체가 여러 개 있을 때 다른 물체가 한 개 있으면, 다른 한 개의 물체가 가장 기억에 남을 가능성이 높습니다. 고립 효과는 CTA(Call-To-Action)라 부르는 클릭을 유도하는 버튼에 주로 쓰입니다.
Von Restorff Effect Example2. Serial position effect (서열 위치 효과)
서열 위치 효과는 목록의 중간에 위치한 항목보다 처음과 끝에 위치한 항목을 더 잘 기억하는 것을 말합니다. 이것이 오늘날 대부분의 앱들이 햄버거 버튼을 사용하지 않고, 아래나 위의 왼쪽 오른쪽 끝에 가장 중요한 항목을 위치시키는 이유입니다. 아래의 iOS 인기 앱을 보면 "home"과 "profile" 항목을 왼쪽과 오른쪽 끝에 위치시키는 것을 알 수 있습니다.
From left to right, Twitter, Medium, ProductHunt3. Cognitive load (인지 부하)
인지 부하는 사람의 작업 기억에 사용되는 정신적 노력의 총량을 나타냅니다. 그리고 기억할 정보의 양이 많아지는 것을 "인지 과부하"라고 합니다.
인지 부하 이론은 세 가지 유형으로 구분할 수 있습니다.
1. Intrinsic cognitive load (내재적 인지부하)
학습할 과제나 학습자의 수준에 의해 생기는 부하
어렵거나 양이 많으면 사용자가 받아들이기 힘듭니다.
2. Extraneous cognitive load (외재적 인지부하)
과제의 난이도가 아닌 가르쳐주는 것에 따라 달라지는 부하
사용자에게 학습방법 및 전략을 잘 제시해주어야 합니다.
3. Germane cognitive load (본질적 인지부하)
학습자가 과제를 처리하기 위한 노력에서 생기는 부하
내재적, 외재적 부하와 다른 점은 사용자 본인이 주체가 되어서 생기는 부하라는 점입니다. 내재적, 외재적 부하를 잘 설계하여 본질적 인지부하를 잘 이끌어 내는 것이 필요합니다.
정리하자면,
내재적 인지부하가 낮으면 (학습하기 쉬우면)
본질적 인지부하를 이끌어낼 수 있어서 (스스로 처리하려고 하기 때문에)
외재적 인지부하가 발생해도 (가르쳐주지 않아도 됩니다)
문제를 해결하는데 어려움이 없기 때문에 내재적 인지부하와 본질적 인지부하가 상대적으로 더 중요합니다.
상대적으로 더 중요한 내재적 인지부하와 본질적 인지부하를 더 살펴보도록 하겠습니다.
4. Intrinsic Cognitive Load (내재적 인지부하)
내재적 인지부하는 과제의 난이도와 관련된 내용입니다. 짧은 문장(micro-copy)이 UX에서 중요한 이유이기도 합니다. 예를 들어 앱의 빈 화면(empty states)은 사용자에게 다음 행동을 하도록 유도해야 합니다. 여기에서 사용자가 지침을 쉽게 따라갈 수 있도록 하기 위해 문장을 짧고 간단하게 적절한 문장으로 작성해야 합니다.
From left to right, Stayful, Serist, Lucidchart5. Germane Cognitive Load (본질적 인지부하)
본질적 인지부하는 사용자가 새로운 지식을 받아들이려는 것을 나타냅니다. 사용자에게 적절한 수준의 과제를 제공하면 사용자는 과제를 해결하기 위해 정신적인 노력을 기울이게 됩니다. 이것은 긍정적 현상이기 때문에 사용자에게 본질적 인지부하가 생기도록 유도할 필요가 있습니다.
우리가 디자인 패턴을 사용 하는 이유 중 하나는 사용자가 익숙하게 받아들일 수 있기 때문입니다. 어떤 새로운 것을 만들때 사용자가 이미 이해하고 있는 패턴 형식으로 만들면 새로운 것을 쉽게 받아들일 수 있습니다.
6. Hick’s Law (힉스의 법칙)
힉스의 법칙은 게슈탈트 이론과 함께 가장 널리 사용되는 원리입니다. 이것을 이해하고 연습하는 것은 간단합니다. 힉스의 법칙에 따르면 사람이 결정을 내리는데 걸리는 시간은 선택할 수 있는 것의 숫자에 달려있습니다. 선택의 수가 증가하면 상대적으로 의사결정 시간이 늘어납니다. UX 디자인에 적용되는 힉스의 법칙 좋은 예시는 list입니다.
Hick’s Law Example7. Law of Proximity (근접성의 법칙)
근접성의 법칙은 게슈탈트 이론 중 하나이며, 서로 가까이 있는 물체가 그룹화되는 것을 말합니다. 우리의 두뇌는 멀리 떨어져 있는 물체보다 서로 가까이 있는 물체를 쉽게 연결합니다. 이러한 클러스터링은 인간이 정리하고 그룹화하는 경향이 있기 때문에 발생합니다.
아래의 예시를 보면 72개의 원이 있는데, 사이의 간격을 기준 삼아 원을 그룹으로 인식합니다. 대부분이 왼쪽에 원이 36개인 그룹이 있고 오른쪽에 원이 12개인 3개의 그룹이 있다고 인식합니다. 이 예제는 UI를 디자인할 때 유저가 가까이 있는 것을 서로 연관되어 있다고 생각할 수 있다는 것을 분명하게 알려줍니다.
Law of Proximity Example원글은 The Psychology Principles Every UI/UX Designer Needs to Know에서 확인할 수 있습니다. 추가된 내용 및 의역이 포함되어있습니다.
Thanks to Thanasis Rigopoulos : D
'이토록 쉬운 스케치' 저자 서한교 입니다.
치앙마이에서 Freelance Designer 그리고 백수로 살아가고 있습니다.
E-Book 링크
종이책 링크
