알아두면 좋은 21 Laws of UX (2)
Jon Yablonski가 말하는 21가지 UX/UI 심리학 법칙
들어가며
https://brunch.co.kr/@f7413a9d5cff457/29
지난 번에는 Jon Yablonski가 말하는 21가지 UX/UI 심리학 법칙의 4가지 카테고리
HEURISTIC / PRINCIPLE / GESTALT / COGNITIVE BIAS 에서 HEURISTIC과 PRINCIPLE에 대해서 알아보았다. 오늘은 GESTALT와 COGNITIVE BIAS에 대해서 마저 알아보도록 하자.
GESTALT
형태와 패턴을 지각하는 방식
공통 영역의 법칙 (Law of Common Region）
요소들이 특정 영역에 모여 있으면 그룹으로 인식되는 경향이 있다.
공통 영역 내에 요소를 배치하게 되면 유저는 이들이 서로 연관되어 있다는 사실을 쉽고 효과적으로 인식할 수 있다. 공통 영역을 만드는 방법으로는 영역 간 경계를 추가하거나 요소들이 배치된 위치의 배경색을 다르게 하는 방법이 있다. 이는 대부분의 인터페이스에서 흔히 볼 수 있는 법칙이다. 아래의 예시를 보자. 아마존은 푸터(Footer) 영역의 배경을 진하게 하여 메인 컨텐츠 영역과 경계를 명확히 나누고 있다. 소비자 입장에서는 굳이 내용을 보지 않더라도, 배경색이 확연하게 변한것만으로 영역이 바뀐 것을 알 수 있다.
(출처: 아마존 웹사이트) 근접성의 법칙 (Law of Proximity)
사람은 가까이 있는 물체들을 그룹화하려는 경향이 있다.
사람들은 서로 가까이 있는 물체에서 연관성을 찾고, 가까이 붙어 있을수록 서로 비슷한 기능이나 특성을 지닐 것이라고 인식한다. 이러한 '근접성(Proximity)'은 유저가 보다 빠르고 효과적으로 정보를 이해하고 조직화할 수 있도록 도와준다. 네이버의 주제별 카테고리를 보면, 경계선의 색상이 희미함에도 불구하고 유저는 보는 즉시 이를 그룹화하여 인식할 수 있다. 카테고리 내의 텍스트들은 서로 가깝게 배치하고, 각 카테고리 간의 간격은 어느정도 벌려놓았기 때문이다.
(출처: 네이버)프래그난츠의 법칙 (Law of Prägnanz)
사람은 이미지를 가장 단순한 형태로 인식하고 해석하고자 한다.
인간은 정보를 받아들일 때 이를 최대한 간소화하려는 경향이 있는데, 이는 인간의 뇌가 항상 인지 부하(Cognitive load)를 최대한 줄이는 방향으로 작동하기 때문이다. 같은 이유로 복잡한 이미지를 인식할 때에도 우리는 이미지를 최대한 단순한 형태로 이해하고자 한다. 즉, 형태가 단순할수록 정보는 더 빠르게 처리되고, 오래 기억에 남는다. 앱/웹 설계 시 로우파이(Low Fidelity) 와이어프레임을 만드는 것도 프래그난츠 법칙이 적용된 사례라 볼 수 있다. UI가 단순할수록 이해가 쉽고, 빠르고 효과적으로 팀원 간 아이디어를 공유하고 검토할 수 있기 때문이다.
Lo-Fi Wireframe 예시 (출처: Miro)유사성의 법칙 (Law of Similarity)
사람은 유사한 요소를 묶어서 지각하려는 경향이 있다.
사람은 시각적으로 유사한 것에 연관성을 부여한다. 즉 색상, 모양, 크기, 방향과 움직임이 비슷한 요소들을 그룹화하고 이들이 서로 같은 의미를 지니고 기능을 보유할 것이라고 여긴다. 따라서 요소들을 시각적으로 잘 구분하는 것이 중요하다. 예를 들어 링크나 카테고리의 텍스트는 일반 텍스트와 시각적으로 구분하는 것이 중요하다. 브런치에서는 링크를 초록색으로 표시하여 기본 텍스트와 구분하고 있다.
유사성의 법칙을 적용한 버튼의 색 구분 (출처: uxmisfit.com)균일한 연결성 법칙 (Law of Uniform Connectedness)
시각적으로 연결된 요소는 그렇지 않은 요소보다
더욱 연관성 있는 것으로 인지된다.
색상, 선, 프레임, 모양 등의 시각적 단서를 사용하여 요소들을 그룹화할 수도 있지만, 요소간의 관계를 나타내는 직선, 화살표 등의 참조선을 활용하여 연결성을 강화할 수도 있다. 아래의 그림을 보면, 같은 모양의 도형의 관계성보다는, 직선을 통해 만들어진 요소 간의 관계성이 더 커보인다.
(출처: Smashing Magazine)COGNITIVE BIAS
경험에 의해 만들어진 비논리적 추론
피크엔드 법칙 (Peak-End Rule)
인간은 경험 중 느꼈던 가장 극적인 감정과 마지막 순간에 느낀 감정을 바탕으로 그 경험 전체를 판단한다.
우리는 경험을 평가할 때, 가장 강한 자극(긍정적이든 부정적이든)을 주었던 순간의 정서와 그 경험의 마지막 순간에 느낀 (즉 가장 최근의) 정서에 의존한다. 따라서 사용자 경험을 디자인할 때는, 사용자가 가장 기억에 남고 즐거웠던 순간과 마지막 순간을 만들어 주는 것이 중요하다. 이를 위해서는 사용자의 관점에서 가장 도움이 되거나 가치 있는 순간을 파악하고, 사용자의 마지막 경험을 즐겁게 만들어 줄 수 있도록 심혈을 기울여야 한다. 마지막으로 인간은 부정적인 경험을 긍정적인 경험보다 더욱 생생하게 기억한다. 한번의 부정적 경험이 기존의 모든 긍정적 경험을 뒤엎을 수도 있는 셈이다. 언어 앱 듀오링고의 예를 살펴보자. 10개의 문제를 다 맞히면 마스코트 캐릭터가 등장하여 유저를 축하해준다. 이는 정답을 다 맞춘 유저의 성취감을 향상시키고, 문제를 풀고 정답을 맞히는, 즉 듀오링고를 이용하는 과정을 긍정적인 경험으로 각인시킨다.
(출처: Duolingo)서열 위치 효과 (Serial Position Effect)
인간은 서열(Series)의 처음과 마지막 항목을 가장 잘 기억하는 경향을 보인다.
일반적으로 인간은 가장 처음과 마지막을 잘 기억하고, 중간의 항목들은 잘 기억하지 못한다. 따라서 중요한 항목은 처음과 끝에 배치하고 덜 중요할수록 중간에 배치하는 것이 좋다. 애플의 iPad Pro 랜딩 페이지를 살펴보면, 차세대 성능을 자랑하는 프로의 핵심 'M2 칩'에 관한 내용을 가장 첫번째 섹션에서 공개한다. 스크롤하여 중간 지점으로 가보면, 와이파이 등 상대적으로 덜 중요한 내용에 대해서 다루는 것을 확인할 수 있다. 이는 처음과 마지막 항목을 기억하는 서열 위치 효과가 적용된 사례로 볼 수 있다.
(출처: 애플 공식 홈페이지)폰 레스토프 효과 (Von Restorff Effect)
비슷한 사물이 여러 개 있으면
그중에서 가장 차이나는 한 가지만 기억할 가능성이 크다.
다양한 항목 중에 특정 항목이 독특하거나 뚜렷한 경우, 그 항목이 가장 기억에 잘 남게 된다. 따라서 중요한 정보일수록 시각적으로 눈에 띄게 표시해야 한다. 색상에만 치중해서는 안된다. 색약이나 시각 장애가 있을 수도 있기 때문이다. 색, 크기, 모양, 패턴 등의 디자인 기법을 적절하게 활용할 줄 알아야하며, 과한 시각적 처리는 오히려 광고로 보이는 역효과를 일으킬 수 있다. 폰 레스토프 효과는 주로 요금제(Pricing plan)에서 찾아 볼 수 있다. 예를 들어 아래의 요금제를 보면, Professional 플랜에 시각적인 차별화를 주어 해당 요금제가 가장 중요한 정보로 인식될 수 있도록 했다.
(출처: Hootsuite)자이가르니크 효과 (Zeigarnik Effect)
사람은 마치지 못하거나 완성하지 못한 일을 쉽게 마음 속에서 지우지 못한다.
하던 일을 완성하거나 목표를 달성하고 나면 기억에서 쉽게 잊히지만 마치지 못하거나 완수하지 못 한 일은 쉽게 마음에서 지워지지 않고 미련이 남으며 긴장과 심리적 불편을 유발한다. 이러한 현상은 인간의 인지적 욕구 중 하나인 완성욕구(completion drive)와 관련이 있다. 장편 시리즈물을 연재할 때 특히 이러한 심리를 잘 이용하는 것을 볼 수 있다. 결말을 보지 않으면 마음 한켠의 찝찝함이 사라지질 않는다. 이는 UX 디자인에서 작업의 진행 상황에 대한 명확한 피드백을 제공함으로써 유저가 작업을 완수하도록 유도하는 데 사용될 수 있다. 아마존의 경우 가입부터 구매까지의 절차를 시각화하여 보여줌으로써 유저가 구매를 완료하도록 유도하고 있다.
아마존의 구매 절차 진행 상황 표시(출처: 미디움)끝맺으며
존 야블론스키의 21가지 UX 심리학 법칙에 대해서 알아보았다. 앞으로 UX/UI에 대해 다양하고 재밌는 글들을 많이 써볼 예정이다.
