디자인할 때 유용한 심리학 법칙 10가지

목차

1. 본 레스토프 효과
2. 듀얼 코딩 이론
3. 서열 위치 효과
4. 핵심 위치 효과
5. 단순성의 법칙
6. 폐쇄성의 법칙
7. 그림-배경의 법칙
8. 근접성의 법칙
9. 유사성의 법칙
10. 공통 영역의 법칙
11. 마무리

1.본 레스토프 효과

고독 효과라고도 알려져 있는 본 레스토프 효과는 여러 물체가 함께 있을 때, 우리는 다른 것 하나만 기억하는 경향이 있음을 의미하는 것이다.

반대의 경우에도 적용된다: 다른 것보다 덜 튀는 물체들은 덜 기억되는 경향이 있다. 우리는 치명적인 요소들을 만들고 중요한 정보를 사이즈, 컬러, 위치, 모양 등을 조절함으로써 시각적으로 구별시켜야 한다.

드롭박스의 결제 페이지는 본 레스토프 효과가 소비자에게 얼마나 영향력이 있는지를 보여준 가장 중요한 사례다.

그들은 Advanced plan(주력 상품)을 Standard나 Enterprise plan과 시각적으로 구별되도록 만들었다.

이러한 시각적 대조 없으면, 보는 사람이 화면의 텍스트를 보았을 때 무엇을 먼저 보아야 하는지 명확한 디렉션을 받을 수 없다.

반면 시각적 대조가 있다면, 그들은 Advanced plan을 보고 기억할 가능성이 높다.

2. 듀얼 코딩 이론

1971년 Allan Paivio에 의해 창시된 듀얼 코딩이론은 정보를 전달할 때, 언어와 비언어적 요소를 함께 쓰는 것이 기억하기에 더 용이함을 의미한다.

이 이론은 우리 머릿속에서 언어 정보가 비언어 정보와 서로 다른 인지 시스템으로 처리 되며, 두 시스템을 활용하여 정보를 전달하는 것은 독자로 하여금 정보를 정확하게 인식할 수 있게 한다는 생각을 바탕으로 한다.

우리(디자이너)가 이 이론에서 배울 수 있는 것은 심플하다. : 이해와 기억을 전제로 하는 작업이라면, 보충 설명하는 텍스트와 관련된 이미지 넣기.

여기서 중요한 것은 “관련된"이다; 추상적인 디자인 요소를 사용해서는 안 된다는 말이다.

이해력을 높일 수 있는 의미 있는 시각적인 그래프나 도표여야만 한다.

3.서열 위치 효과

서열 위치 효과는 리스트의 처음과 끝에 있는 요소가 중간에 있는 것보다 기억하기 쉽다는 의미이다.

리스트의 처음에 있는 요소들은 장기 기억(중요한 효과)에 저장될 확률이 높고, 반면 마지막에 있는 요소들은 단기 기억(최신 효과)에 새롭게 다가가는 경향이 있다.

이는 특히 디자인 프레젠테이션, 레포트, 또는 부수적으로 학습해야 할 요소들과 관련이 있다.

우리가 프레젠테이션의 마지막을 요약하는 슬라이드로 마무리하는 것과 긴 글의 블로그 아티클에서 결론이 매우 중요한 이유도 이 때문이다.

물론 웹 디자인 심리학과도 관련이 있다.

중요한 네비게이션 요소는 보는 사람이 기억하고 찾기 쉽도록 네비게이션 바로부터 먼 왼쪽, 혹은 먼 오른쪽에 위치해야 한다.

4.핵심 위치 효과

핵심 위치 효과는 비슷한 요소들의 배열을 제공할 때, 우리는 중앙에 있는 하나를 선호하는 경향이 높다는 의미이다.

이는 소비자가 판매자가 가장 인기 있는 제품을 리스트의 중앙에 배치한다고 가정한다는 생각과 같다. 그리고 이 생각은 핵심 위치 효과와 일맥상통한다.

이유야 어쨌든, 이는 우리가 제품 판매를 띄워야 할 때마다 고려해야 하는 것이다.

예를 들어 여러 개의 제품이 함께 등장하는 제품 사진은 ‘중앙에 있는 제품 하나와 그 주변의 것들'로 이루어져야 한다.

E-커머스 플랫폼 역시 핵심 위치 효과를 염두에 두고 디자인할 수 있다.

당신은 어쩌면 단지 특정 제품을 중앙에 놓는 것만으로도 판매 증진을 기대할 수 있다.

5.단순성의 법칙

단순성의 법칙은 인간의 시각적 인지 법칙을 설명하는 학설인 게슈탈트 심리학의 기초가 되는 법칙이다.

이 법칙은 우리가 시각적 자극에서 패턴을 발견하고, 조직된 그룹에 속하는 오브젝트를 인식하며, 복잡한 형태에서 단순성을 찾음으로써 세상을 이해함을 의미한다. 몇몇 게슈탈트 법칙은 이 단순성의 법칙에서 파생됐다.

폐쇄성, 그림-배경, 유사성, 근접성 및 공통 영역의 원칙은 모두 시각적인 자극이 어떻게 해석되는지를 이론적으로 예측한다. 우리는 이 법칙들을 추상적인 시각 요소들의 의미를 만드는 디자인을 할 때 사용할 수 있다.

명확한 커뮤니케이션이 필요한 곳이라면 디자인 의사결정을 할 때 이 법칙을 고려해야 한다. : 웹 디자인, 로고 디자인, 그래픽 디자인 등등.

이제 각각의 법칙과 그게 디자인 심리학에 어떻게 적용되는지 살펴보자.

6. 폐쇄성의 법칙

폐쇄성의 법칙은 우리가 요소들와 구멍 같은  오브젝트 간의 불완전한 공백을 채우려는 경향이 있음을 의미한다.

무슨 말인지 모르겠다면, 아래 이미지를 보자.

이 그림이 팩맨 모양으로 보이는가, 아니면 세 개의 검정색 원 위에 놓인 하얀 삼각형으로 보이는가?

폐쇄성의 법칙은 우리가 후자의 경우로 보는 경향이 더 높다고 말하는 것이다.

이 법칙은 특히, 가능한 한 필요하지 않은 잉크를 많이 제거해야 하는, 로고디자인을 할 때 유용하다. 우리는 심지어 독자로 하여금 매우 미니멀한 로고들도 이해할 수 있도록, 여백을 채우게 할 필요가 있다.

예를 들어 NBC 로고는 디자인 중앙의 네거티브 스페이스에 의미를 만들기 위해 폐쇄성의 법칙을 사용하고 있다.

우리의 뇌는 깃털로 둘러싸여 있는 공작을 “보기"위해서 공백을 메운다.

비슷한 예로, World Wildlife Fund 로고는 판다의 머리와 몸체에 공백을 남겨뒀다.

이 로고를 판다로 인식하는 데에는 별 어려움이 없었을 것이다.

만약 당신이 폐쇄성의 법칙을 디자인에 적용하고 싶다면, 이 법칙은 쉽게 알아볼 수 있는 오브젝트(판다나 공작 같은) 와 간단한 오브젝트(기하학적 모형)에 가장 유용하다는 점을 염두에 두면 좋다.

독자가 오브젝트를 해석할 수 있도록 충분한 정보를 제공해야 한다. 맥락을 지나치게 많이 제거하면, 보는 이는 그 공백을 채우기가 어려워지니까.

7.그림-배경의 법칙

그림-배경 법칙은 우리가 오브젝트의 크기와 배경과의 대비를 바탕으로, 배경으로부터 오브젝트를 구분함을 의미한다.

그림-배경의 관계는 명확한 전경 요소가 있을 때는 안정적이나, 그림과 배경의 요소가 뒤바뀌어 있거나 구분이 애매모호할 때는 불안정하다.

이 법칙은 재치 있는 효과를 주기 위해 종종 폐쇄성의 법칙과 함께 쓰인다.

예를 들어, John Randall이 작업한 이 로고는 Swan&Mallard 식당의 동물들을 묘사하기 위해 불안정한 그림-배경 관계를 사용했다.

백조의 하얀색과 검정색 배경이 백조를 “그림”으로 구별한다.

“배경"에서 드러나는 오리는 폐쇄성의 법칙에 의해 백조의 네거티브 스페이스에서 만들어진다.

그러나 배경과 확연하게 구분이 되는 안정된 그림-배경 효과는 명확한 CTA(Call To Action)가 필요한 웹 디자인 심리학에서 좀 더 유용하게 쓰인다.

예를 들어, Neil Patel의 웹사이트는 Neil과 그의 “그래, 난 Neil과 일하고 싶어!”라는 CTA에 주의를 끌 수 있도록 그림-배경 관계를 명확하게 구분시켰다.

이러한 사려 깊은 시각적 대비는 어떤 작은 비즈니스 마케팅 캠페인에도 매우 효과적이다.

그림-배경 관계를 조절하는 가장 강력한 그래픽적 요소는 컬러이다.

컬러 선택을 적절하게 함으로써, 시각적인 특정과 대비를 사용하여 안정된/불안정된 그림-배경 관계를 둘 다 사용할 수 있다.

8.근접성의 법칙

근접성의 법칙은 서로 가까이 붙어있는 오브젝트는 서로 관련이 있는 것처럼 여겨진다는 의미다.

아래 예시를 보면, 가까이 붙어있는 원들은 떨어져있는 원들보다 더 관계가 있는 것처럼 보인다.

근접성은 모든 게슈탈트 법칙에서 가장 강력한 법칙이다. 이는 우리가 시각적 오브젝트를 분류할 때 가장 큰 영향을 끼친다.

우리는 정보를 체계화하고 싶을 때마다, 텍스트/아이콘/이미지 간의 관계를 표현하기 위해 근접성의 원리를 적용해야 한다.

근접성은 디자인에 적용하기 매우 쉽다.

관련된 요소들을 서로 가까이 두고 그 사이에 충분한 여백만 주면 된다.

이는 디자인 문제를 해결해줄 뿐만 아니라, 읽기에 더 쉽고, 정확하게 디자인하도록 도와준다.

9.유사성의 법칙

유사성의 법칙은 근접성의 법칙과 자매품이다. 이는 시각적 특징을 공유하는 오브젝트는 서로 관련이 있는 것처럼 인식된다는 의미이다.

우리는 많은 속성들에 기반하여 유사성을 판단한다. 예를 들어:

10. 공통 영역의 법칙

공통 영역의 법칙은 같은 영역에 위치한(보통 박스나 다른 도형으로 테두리가 쳐져있다.) 오브젝트는 한 그룹으로 인식된다는 의미이다.

아래 예시를 보면 알 수 있듯, 폐쇄성 효과는 유사성 및 근접성 법칙을 거뜬히 능가할 만큼 강력한 효과다.

이 법칙은 특히 시각적으로 다른 요소들을 한데 모아야 하는 웹 디자인에 유용하다.

마무리(Final thoughts on Design Phychology)

당신이 디자이너로서 할 수 있는 가장 좋은 것은 인간의 심리와 인지를 연구하는 것이다.

독자들이 어떻게 시각적 요소들을 인식하고 해석하는지를 이해하는 것은 당신이 비주얼 요소들의 효과를 컨트롤 할 수 있게 해주고, 디자인으로 좀 더 효과적인 커뮤니케이션을 할 수 있게 만들어준다.

그러나 이 법칙들을 만능 법칙으로 여겨서는 안 된다. 대신, 시각 자료를 좀 더 명확하고, 매력적이고 다른 것들에 비해 효과적으로 만들고 싶을 때 도움이 되는 가이드라인 및 도구 정도로 여겨져야 한다.

저자 소개: Midori Nediger은 웹 기반 인포그래픽 디자인 툴 Venngage에서 정보 디자이너로서, 시각 커뮤니케이션 팁 및 트릭을 알려왔다. 그녀는 특히 생체 의학 비주얼라이제이션에 기반하여, 복잡한 정보를 습득해야 하는 사람들을 돕는 데에 관심을 보였다. 링크드인/트위터로 연락할 수 있다.

1. 본 레스토프 효과
   :중요한 정보는 다른 것과 다르게, 눈에 띄게 표시하자.
2. 듀얼 코딩 이론
   :텍스트+이미지를 적절하게 섞어 함께 사용하자.
3. 서열 위치 효과
   :중요한 정보는 (중간이 아닌)처음과 끝에 배치하자.
4. 핵심 위치 효과
   :중요한 정보는 중앙(가운데)에 배치하자.
5. 단순성의 법칙
   :6~10번의 법칙을 통틀어 단순성의 법칙이라 일컫는다.
6. 폐쇄성의 법칙
   :인간은 구멍을 보면 메우려는 습성이 있으므로, 여백을 활용하여 오브젝트를 만들 수 있다. 
7. 그림-배경의 법칙
   :(전경만 신경 쓰지말고)전경(그림)과 배경의 관계를 고려하면 재치있는 디자인을 할 수 있다.
8. 근접성의 법칙
   :정보를 체계적으로 정리하고 싶으면 비슷한 것들끼리 묶어두자.
9. 유사성의 법칙
   :비슷한 특징을 가진 오브젝트들은 그룹으로 여겨지는데, 이때 '비슷한'느낌을 줄 수 있는 가장 강력한 속성은 '색깔'이다.
10. 공통 영역의 법칙
    :비슷한 요소를 그룹핑하고 싶다면 테두리를 쳐서 영역을 표시하자.