심리학으로 공부하는 UXUI 디자인(2)
지각적 맹시(부주의적 맹시), 칵테일파티 효과, 도허티 임계값
UX 관점에서 사용자에게 더 효율적이고 쉽게 전달하기 위해 심리학에 대한 공부는 필요합니다.
앞선 글 '심리학으로 공부하는 UXUI 디자인 (1)'에 이어 3가지를 소개하겠습니다.
4. 지각적 맹시(부주의적 맹시)
- 하나에 집중하고 있으면 그 밖의 다른일이 눈에 들어오지 않는 현상이다.
- 동시 다발적으로 일어나는 일로 인해 메인으로 집중해야 할 일 또는 이벤트성으로 이목해야 하는 일에 집중이 흐트러지는 현상으로 좋은 UI에서는 이를 보완할 수 있는 디자인이 필요하다.
올리브영 어플, 넷플릭스 어플 캡쳐위의 올리브영과 넷플릭스 어플의 구성을 살펴보자면,
1) 올리브영의 리뷰검색 필터- 라이트 박스를 활용하여 지각적 맹시를 보안한 예시로, 리뷰 검색필터를 돋보이게 하기 위해 라이트박스가 적용되어 뒤에 리뷰페이지는 어둡게 가려지고 리뷰 검색 필터에 집중할 수 있도록 되어있다.
2) 넷플릭스의 평가 기능- 콘텐츠에서 평가를 내릴 때 이에 더 집중을 돕기 위해 라이트박스를 넣어 평가 기능에만 집중할 수 있도록 하여 지각적 맹시를 보완하였다.
위의 두 가지 예시와 같이 보통 라이트박스를 활용하여 특정한 기능을 보여주는데 이러한 것들을 모달이라고 부른다.
5. 칵테일파티 효과
- 다수의 사람이 동시에 말하고 있는 정신 없는 파티장에서도 내가 듣고자 하는 말(정보)만 선택적으로 집중해서 들을 수 있는 현상이다.
- 많은 정보 가운데 자신에게 필요한 정보만(관심있는 정보만)을 골라서 받아들이는 심리적 현상으로 사용자에게 보여주고 싶은 콘텐츠를 집중시키기 위해 이목을 끌게 만들때 사용되면 좋은 효과라고 생각된다.
올리브영, 넷플릭스 캡쳐위의 올리브영과 넷플릭스 어플을 살펴보자면,
1) 올리브영의 000님을 위한 추천 상품- 사용자의 이름을 넣어 마치 사용자만을 위한 정보로 보이게 하여 사용자의 관심을 이끈다.
2) 넷플릭스의 사용자 맞춤 추천- 000님의 취향저격 베스트 콘텐츠, 000님이 시청 중인 콘텐츠, 000님의 다시보기 콘텐츠 등 사용자의 이름을 넣어 관심을 이끌고 있다.
50% 넘는 사람들이 본인의 이름을 불러주거나 구매내역을 통해 추천해주는 곳에서 구매하려는 경향이 크다는 연구결과도 나왔다. (출처: 디비디랩 블로그)
실제로 그냥 추천해주는 것보다는 000님을 위한 추천을 보면 나만을 위해 추천해준다고 받아들임으로써 눈길을 주게 된다. (포러&바넘 효과와 이어진다고 생각한다.)
6. 도허티 임계값
- 웹사이트나 어플을 사용하면서 로딩이 되고 있는 화면을 많이 접하게 된다.
- 도허티 임계값은 사용자가 체감하는 시간당 느끼는 심리적 요소에 대한 내용으로 여기서 사용자와 컴퓨터의 생산성을 높이는 규정 시간(편하게 말하면 로딩시간)을 0.4초로 정의한다.
- 보통 로딩화면이 나올 때에는 0.4초보다 길어질 수 있어 로딩진행 상황을 알려주는 진행바(로딩바)를 띄워 언제 다음페이지로 넘어가는지 진행 상황을 알려준다.
하지만 이러한 진행바(로딩바)가 없다면 언제 다음페이지로 넘어가는지 알 수 없는 사용자는 부정적인 인상을 받게 되고 이탈을 할 확률이 높아진다. 그러기 때문에 진행바(로딩바)가 중요한 역할을 하게 된다.
올리브영, 대한민국구석구석 어플, 네이버메일 캡쳐위의 올리브영과 대한민국구석구석 어플, 네이버 메일을 살펴보자면,
1) 첫번째 이미지의 스켈레톤 스크린- 대기시간 동안 제품의 영역을 임시로 보여주는 블록 화면.
2) 두번째 이미지의 블러업- 이미지를 점진적으로 로드해 보여주는것으로 화질이 낮고 작아 픽셀이 깨지는 것을 블러처리해 먼저 보여준다.
3) 세번째 이미지의 원형 로딩 바- 로딩 바를 통해 진행되고 있음을 알려준다.
4) 네번째 이미지의 프로그레스- 막대 로딩바인 프로그레스 바를 통해 현재의 진행률을 보여준다.
5) Optimistic UI- 사용자가 제품의 반응을 기다리는걸 방지하기 위해 결과값을 미리 보여주는 것으로 데이터, 와이파이 문제로 처리되지 못할 경우 자동으로 취소한다. ex) 페이스북 좋아요 표시
반대로 특정 서비스에서는 반응 속도가 너무 빠른 경우엔 신뢰도가 떨어질 수 있는 경우가 있어서 보안 사항이 걸려있는 경우에는 실제 프로세스보다 더 긴 시간을 들어 UI를 보여주는 경우도 있다.
-> 사례1) 일부러 로딩바를 느리게 만든 ‘NOOM’의 사례
:실제로는 1초만에 다 만들어졌는데 당신을 위해 코칭을 매칭하고 있고 개인화된 커리큘럼을 맞춰주고 있다 라는 것을 보여주기 위해 로딩바 느리게 만들었다. (이미지는 혹여나 저작권 때문에 가져오지 못했다.)
웹사이트, 어플 등의 uxui 서비스는 별것 아닌 단순하게 레이아웃 디자인처럼 보이지만, 사람의 심리와 ux적인 관점을 연구하는 등 깊게 생각해야하는 분야이기 때문에 ux는 지속적인 공부와 관찰이 필요한 분야입니다.
나머지 심리학은 다음 글에서 소개하겠습니다.
(과거에 공부하려고 정리했던 것을 참고해 쓰고 있습니다. 문제시 얘기해주시면 바로 반영하겠습니다. 감사합니다.)
