좋은 UX 디자인을 위한 6가지 심리학 법칙

 

 

웹 디자인과 상호작용하는 모든 사용자는 인간이다. 적어도 특이점에 도달할 때까지는 말이다. 이것은 즉, 각각의 사용자들은 특정한 심리학 법칙을 따른다는 것을 의미한다. 수십 년간의 연구로 심리학자들과 철학자들은 오늘날까지 진실된 인간 본성에 대해 관찰해왔으며, 당신이 그들의 가치를 지닌 UX 디자이너라면, 그들에게 주목할 것이다.

 

 

UX 디자인에서 심리학을 이용하는 것은 원활한 사용자 경험을 만드는 가장 좋은 방법이다. 인간 심리에 관심을 두지 않는 웹 사이트를 탐색하는 것은 밀어야 하는 문을 당기는 것과 같다.  VOX의 Joe Posner가 설명하는 것처럼, 사용자의 잘못이 아니더라도, 스스로를 바보처럼 느끼게 한다.

 

다행히도, 당신은 디자인을 시험하기 위해 임상 시험, 학술 논문을 쓰는 등의 힘든 일을 할 필요는 없다. 심리학자들이 이미 당신을 위해 그런 과정을 거쳐 연구를 진행했기 때문이다. 다음은 UX 디자인을 따를 때 염두에 두어야 할 몇 가지 규칙이다.

제이콥의 법칙: 익숙한 디자인(Jakob’s Law: Be Familiar)

첫 번째 법칙은 참신함과 독창성의 균형에 관한 것이다. 디자이너들은 종종 그들의 웹사이트가 경쟁자들 사이에서 돋보이기를 원하기 때문에 예술적인 개성을 통해 새롭게 재창조하기 시작했다. 불행히도 이러한 유형의 경우, 사용자들이 이 새로운 경험을 좋아하지 않는다는 것이 일반적으로 받아들여진다.

 

닐슨 노먼 그룹Nielsen Norman Group의 제이콥 닐슨Jakob Nielsen은 사용자들이 웹 사이트에 관해 익숙한 경험을 중요시한다는 이 법칙의 배후에 있다. 이것은 시선 추적에 대한 그룹의 2008년 연구와 관련이 있다. 본질적으로 대부분의 인터넷 사용자는 거의 동일한 방식으로 정보를 읽고 소화한다. 특히 사용자는 웹 사이트 상단을 읽고 눈을 약간 아래로 이동하여 다시 읽은 다음 일반적으로 화면 왼쪽을 위아래로 스캔한다. 많은 사람들이 글 머리 기호와 이미지로 기사를 분할하는 것과 같이 소비자의 이러한 행동을 방지하기 위해 콘텐츠를 디자인하지만 가끔은 평범하고 지루한 콘텐츠도 괜찮다. 익숙함에서 크게 벗어나려고 하면 확실히 눈에 띄겠지만, 좋은 일이 아닐 수도 있다.

 

물론, 이것은 페이스북이나 가장 큰 경쟁 업체의 모든 디자인 선택을 고수해야한다는 의미가 아니라 시간을 내어 그들이 고객의 요구를 어떻게 충족시키는지 확인하기 위해 시간을 들여야 한다는 것이다. 그들이 현재 당신이 직면한 문제나 유사한 문제를 어떻게 접근했는지 알 수 있으며, 어쩌면 그것들로 인해 당신은 문제를 파악하고 다른 선택지를 찾을 수 있을 것이다.

 

포럼 사이트인 Quora(위 이미지)는 Reddit 포럼을 포함하여 많은 사이트에서 사용하는 검색창의 표준, 공통적인 배치를 준수한다. 이러한 선택은 숙련된 포럼 사용자와 초보 사용자 모두에게 사이트를 직관적으로 보이게 한다.

힉의 법칙:  더 쉬운 선택(Hick’s Law: Make Choices Easier)

힉-하이먼Hick-Hyman 법칙으로도 알려져 있는 이 두 번째 법칙은 개인이 다양한 다른 선택지에서 한 가지를 선택하는데 걸리는 시간을 다루고 있다. 이 법칙은 선택지의 수를 늘림으로써 결정하는데 걸리는 시간이 기하급수적으로 증가하는게 아니라, 그저 로그적으로 증가한다고 명시하고 있다.

이 뜻은, 한 가지 선택권이 주어질 때 결정 시간이 0이지만 최초 몇 가지 선택권이 추가되면서 결정 시간이 급격히 증가하다가 결국 그 증가율이 수평으로 떨어진다는 것을 의미한다. 하지만 본질적으로 이것은 선택에 의해 망가진 문구를 설하고, 너무 많은 선택지가 있다면 결국 결정하기가 훨씬 더 어렵다는 것을 알게 된다.

 

이것이 UX 디자인에 있어 의미하는 바는 무엇인가? Writinity and Last Minute Writing의 UX 디자이너인 시오아예프 키Sioarvis Key는 다음과 같이 지적한다. "처음에 사용자에게 너무 많은 선택권을 주는 것은 사용자를 참여시키기보다 오히려 혼란스럽게 하고 성가시게 할 수 있다. 이것이 반드시 사용자에게 제공하는 선택의 수를 제한해야 한다는 것을 의미하지는 않지만, 단순성있게 보이도록 제공하는 분기 경로 기능으로 선택지를 구축해야 한다는 것을 의미한다. 햄버거 네비게이션 메뉴를 생각해 보아라. Wes McDowell 이 글을 쓴 것처럼, 사용자가 특정 지점을 따라 이동할 때 좀 더 구체적일 경우 사용하기가 더 쉽다.

 

페이스북은 앱 전반에 걸쳐 힉-하이먼법을 적용, 스마트폰의 작은 화면에 한 번에 나오는 선택지를 최소화해 사용 가능한 공간을 최대화한다.

밀러의 법칙:  단순성 유지(Miller's Law: Keep It Simple)

세 번째 법칙은 프린스턴의 심리학 교수인 조지 A. 밀러George A. Miller 로부터 우리에게 전달된 것으로, 우리의 기억력에 관한 것이다. 간단히 말하자면, 이 법칙은 우리가 일반적으로 한 번에 7가지 생각만을 담을 수 있다고 말한다. 물론 우리가 더 많은 것을 담을 수 있지만 더 많은 작업을 필요로하는 장기 기억보다는 한 순간에 적극적으로 그려낼 수 있는 일들, 즉 단기 기억을 설명하고 있다.

 

UX 디자인에 적용되는 이 법칙은 우리에게 단순함을 유지하라고 말한다. 첫 페이지에 7개 이상의 개념을 사용자에게 제시하는 경우, 다음 페이지로 이동하기 전에 최소한 하나는 잊어버리도록 근본적으로 요청하는 것이다. 힉-하이먼 법칙과 유사하게, 그 정보를 더 작은 단위로 분류해 사이트가 진행되도록 노력해야한다. 보다 쾌적한 경험을 위해 정보를 4~7개의 그룹으로 그룹화해야한다.

 

Dogtime의 이 블로그 게시물은 밀러의 법칙을 잘 적용하고 있으며, 사회적 요소, 갤러리 및 이미지가 첫 번째 단락, 즉 4개의 그룹으로 그룹화되어 있다. 이 그룹들은 여백에 의해 오른쪽의 품종 검색 기능과 분리되어 있다. 이로 인해 사용자의 주의가 산만해지는 걸 방지한다.

게슈탈트 법칙:  스마트 그룹 만들기(Gestalt Principles: Make Smart Groups)

그룹화 정보에 대해, 드래프트 비욘드 앤 리서치페이퍼룩Draft Beyond and Researchpapersuk의 디자인 블로거 알렉사 파르카드Alexa Farqad는 게슈탈트 법칙에 대해 이렇게 말했다. "1920년대에 몇몇 독일 심리학자들은 인간은 혼란스러운 정보에서 패턴을 발견하는데 매우 능숙하며, 우리가 공통적으로 그렇다는 것을 발견했다. 예를 들어 선이나 점의 집합이 거의 알아볼 수 있는 형태를 형성하는 경우 그 간격을 메우거나, 서로에 대한 공간적 관계와 상관없이 같은 색이나 형태를 가진 요소들을 함께 묶어 그룹화한다."

 

루빈의 꽃병Rubin's Vase(출처: Interaction Design Foundation)

위의 유명한 이미지에서 인간의 뇌는 자연스럽게 두 간격을 두 개의 얼굴 그림으로 분류하지만, 꽃병의 이미지도 존재한다. 이것이 게슈탈트 원리의 대표적인 예다.

주요 웹 사이트에서 사용되는 게슈탈트 법칙의 예는 많은데, 대부분의 사람들은 자기도 모르는 사이에 자동으로 영향을 받는다. 이러한 법칙은 사용자가 모양과 색을 이해하는 방법으로 디자인 요소를 연결하거나 연결을 해제하도록 할 수 있음을 의미한다. 대시 보드 요소, 랜딩 페이지 또는 인포그래픽 디자인, 어떤 것이든 관계없이 법칙을 아는 것이 좋다.

 

지속적으로 페이지를 업데이트 함에도 불구하고 아마존Amazon은 업데이트를 진행할 때 항상 게슈탈트 법칙에 주의를 기울일 것이다. 위 페이지를 보면, 다양한 기사로 연결되는"Discover Amazon" 클립 아트 버튼은 직사각형 안에 함께 그룹화되어 있으며, 이 직사각형과 위의 작은 직사각형 사이에 약간의 공간이 있다. 이러한 그룹화 및 간격은 사용자에게 넓게 느껴지도록 하며, 원하는 정보를 빠르고 정확하게 찾을 수 있도록 도와준다.

폰 레스토프 효과:  신중한 강조(The Von Restorff Effect: Highlight Judiciously)

폰 레스토프 효과Von Restorff Effect는 우리의 뇌가 유사한 대상을 어떻게 그룹화하느냐에 대한, 그 방식에 관한 것이다. 이 규칙은 우리가 항상 비슷하게 생긴 물체를 그룹화하지만, 실제로 기억하는건 가장 다르게 보이는 물체라는 것을 말한다.

폰 레스토프 효과는 사용자가 다른 요소보다 특정 요소를 기억하도록 유도하는는 데 유용하다. 쇼핑몰에서 한 항목에 대한 할인 판매를 알리고 싶을 경우 모든 썸네일이 동일한 가운데 그 중 할인 판매에 해당하는 것은 강조 표시된다. 반면에 너무 과하게 강조하다가는 오히려 강조하지 않은 요소가 돋보이게 된다. 이 법칙은 매우 비주얼적인 표현 방법이고, 신중하게 강조해야 한다.

 

Memrise는 학습 세션이 끝나면 프리미엄 요금제를 사용자에게 표시하는 것으로 유명하다. 여기에서 그들은 연간 플랜을 다른 색상의 "구독" 버튼과 대조시키고 "50% 할인" 태그를 부여하면서, 나머지 계획보다 더 적합한 계획처럼 보이도록 강조한다.

정신적 모델:  쓸데없는 수고를 하지 마라(Mental Models: Don't Reinvent The Wheel)

친숙함에 대한 또 다른 교훈은 정신적 모델의 형태이다. 이것은 특정 사물이 어떤식으로 경험에 근거하여 사실로 받아들여지는지를 설명하는 광범위한 심리적 추세이다.  이 진실의 본질은 논리적이고 심리적인 것이 아니라, 단지 이전부터 그랬기 때문에 진실이라고 말할 수 있다. 이 마지막 부분이 핵심이다.

이것이 UX 디자인과 어떤 관련이 있냐면, 예를 들어 당신은 당신의 스마트폰에서 기사를 아래로 스크롤하는 방법을 알고 있는가? 이 질문이 UX 디자인에서 정신적 모델을 사용하는 예이다. 이 글에서 물리적으로는 내용이 많아 스마트폰 화면에 모든 내용이 표시되지 않는다. 하지만 심적으로는 글이 아래까지 계속됨을 알고 있기 때문에, 자동으로 스크롤하여 계속되는 내용을 찾는다.

 

더욱이, 정신적 모델은 새로운 기술에 의해 끊임없이 업데이트된다. 지금 우리가 왼쪽, 오른쪽으로 스와이프 하는 것은 Tinder 이전에는 없었던 연관성을 가지고 있다. 만약 왼쪽, 오른쪽이 뒤바뀐 스와이프 앱을 디자인한다면 그것은 사용자들을 혼란스럽게 할 것이다. 본질적으로, 가능하다면 일반적으로 이해되는 익숙함을 따라가는 디자인을 해야 한다.

 

위 이미지는 페이스북의 레이아웃을 거의 정확하게 모방한 교육 소셜 네트워크인 에드모도Edmodo의 스크린샷이다. 학생들은 페이스북과 동일한 위치에 있는 버튼을 클릭하여 게시물을 좋아하고 공유할 수 있으며, 설정과 메뉴도 같은 곳에 위치한다. 정신적 모델에 대한 이러한 의존은 이 플랫폼을 인기 있게 만드는데 도움을 주었다.

마무리

물론, 당신은 이 모든 법칙들을 따른다고 하더라도 여전히 사용자를 혼란스럽게 할 수 있다. 법칙이 모든 부분에서 완벽하지는 않다. 그러나 이 기본 법칙들은 사용자의 입장에서 디자인이 어떻게 잘못 해석 될 수 있는지 확인하는 것이다. 결국, 우리는 모두 인간이다.

 

 

<원문>

usabilitygeek.com/rules-for-ux-principles/usabilitygeek.com/6-laws-of-psychology-for-good-ux-design/

6 Laws Of Psychology For Good UX Design - Usability Geek