UX/UI 의 10가지 심리학 법칙 - 리뷰 :: 마이구미

이 글은 "UX/UI 의 10가지 심리학 법칙" 이라는 책을 리뷰한다.
"Uxer 를 위한 101가지 법칙" 이후에 읽은 책으로써, 조금 더 심화된 책으로 느껴진다.
본인은 UX 디자이너가 아닌 FE 개발자라는 것을 염두에 두길 바란다.
책 링크 - http://www.yes24.com/Product/Goods/92426632

 

 

개인적으로 직군 상관없이 이 책을 읽어보는 것은 추천한다.

제목처럼 심리학을 중점으로 다루어진다고 해서, 이해하기 힘든 내용이 아니다.

책을 읽는 내내 우리가 일상적으로 느낄 수 있는 것들을 토대로 읽게 되어, 많은 생각과 재미를 느꼈다.

본인은 문제 해결에 있어, 조금 더 이해하기 쉽게 혹은 명료하게 대답할 수 있는 힌트들을 얻었다고 생각한다.

다시 한번 말하지만... 본인은 디자이너가 아닌 프론트엔드 개발자이다.

 

본인이 기억에 남았던 것을 정리해보고자 한다.

주관적인 생각이 포함되어서 오류가 있을 수 있다.

더 많고 좋은 내용이 있기에, 꼭 책을 읽어보길바란다.

 

---

=> 알아두면 좋은 용어는 * 로 표시되어있고, 하단에 설명이 존재한다.

 

1. 제이콥의 법칙

 

사용자는 다른 웹 사이트의 축적된 경험을 통해 디자인 관례에 대한 기대치를 형성하는 경향을 보인다.

알다시피 사용자는 여러 사이트에서 대부분의 시간을 보낸다.

대부분의 사이트는 같은 방식으로 동작하고 있고, 사용자는 당신의 사이트도 그러길 원한다.
예를 들어, 쇼핑몰 사이트들은 대부분 비슷하게 구성되어 있어, 사용자는 별도 학습 없이 상품에 더욱 집중할 수 있다.
그렇다고 이 법칙이 제품에 대해 똑같은 디자인을 옹호하는 법칙은 아니다.

사용자가 새로운 경험을 이해하기 위해 기존 경험을 활용한다는 사실을 상기시키는 지침 정도로 생각하면 된다.

 

2. 피츠의 법칙

 

대상에 도달하는 시간은 대상까지의 거리와 대상의 크기와 함수 관계에 있다.

 

클릭 혹은 터치를 할 수 있는 거리가 가까울수록 그리고 크기가 클수록 사용성이 높아진다는 것이다.
프론트 개발에서는 input 태그를 사용할 경우에 label 태그를 감싸서 사용한다.

그 결과 label 영역까지 작동 범위를 확장함으로써, 사용성을 높이고 있다.

 

이 법칙은 화면이 작은 모바일 인터페이스에서 더 유념해야한다.
거리를 너무 가깝게 배치하다가 요소 사이의 간격이 너무 가까워지면 실수할 수 있다. ex) 모달 영역에서의 취소, 확인 버튼
다른 예로는 아이폰은 한 손 사용 시 터치 대상이 너무 멀다는 불편을 완화하기 위해 제스처로 화면 상단 간편 접근 기능을 제공하고, 갤럭시 또한 제스쳐로 앱스 화면을 볼 수 있다는 점을 참고하면 된다.

 

3. 힉의 법칙

 

자극의 개수와 자극에 대한 반응 사이의 상관관계에서,
의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다.

 

인터페이스에 요소가 너무 많으며, 취해야 할 동작이 명확하지 않고, 핵심 정보를 찾기 어려우면, 사용자는 원하는 것을 찾기 위해 많은 지적 능력(인지 부하*)을 동원해야 한다.
결과적으로 고스란히 의사결정 시간은 늘어나게 된다.
이 법칙의 사례로는 구글 사이트의 경우 첫단계를 검색으로 단순화하고, 검색 후 필터 기능을 제공하고 있다.

 

 

4. 밀러의 법칙

 

보통 사람은 작업 기억에 7(+-2) 개의 항목밖에 저장하지 못한다.

 

“내비게이션 항목 개수는 7개 이하로 제한해야한다" 는 잘못된 오해이다.
실제 의미하는 것은 bit 단위가 아닌 chunk 단위를 의미한다.

작은 아이템의 개수의 중점이 아닌 유의마한 단위로 그룹화하는 것을 강조하고 있다.
7개가 넘는 항목으로 인해 사용자는 사용성에 있어, 전혀 문제 삼지 않는다.

 

쿠팡 웹 사이트

 

5. 포스텔의 법칙

 

소프트웨어를 위한 일반적인 설계 지침으로써, “자신이 행하는 일은 엄격하게, 남의 것을 받아들일 떄는 너그럽게” 를 의미한다.

 

디자이너와 개발자에게 흔히 접할 수 있는 "반응형 디자인" 과 "디자인 시스템"을 예로 들 수 있다.
"모바일에서 되요?" 라는 말이 구식이 되었듯이, 반응형 웹 디자인을 통해 웹의 유동적 특성을 포용하여 기기의 크기나 유형에 구애받지 않고 안정적인 출력이 이루어져야한다.
디자인 시스템은 다른 부서가 제공하는 디자인, 코드, 전략 등 모든걸 너그럽게 수용하면서, 결과물에 대해서는 가이드라인, 원칙 등 엄격한 기준을 적용해야한다.
너그러운 대응은 결과적으로 다양하고 복잡해지는 요구를 처리함으로써, 오류가 발생할 가능성도 자연스럽게 커진다.
오류를 피하기 위해 우리는 잘 예측하고 대비해야한다.

 

6. 피크엔드의 법칙

 

인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다.

 

예를 들어, 열번 잘해도, 한번 잘못하면 모든게 와르르 무너지듯 경험의 평균이 아닌 어느 한 순간에 판단되는 것들이 많다.

우리는 그 중요한 순간을 잘 파악하여, 각별한 주의를 기울여야한다.
예로 많은 배달 또는 호출앱에서, 현재 상황을 지도로 실시간으로 보여줌으로써, 요청 취소 등과 같은 부정적 기억을 피하는 방법 중 하나로 사용하고 있다.
그리고 우리가 할 수 있는 간단한 예로는, 잘못된 경로에서 404 페이지를 부정적 기억을 최대한 줄일 수 있게 잘 포장하는 것이다.

7. 심미성 사용성 효과

 

사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.

 

보기 좋은 떡이 먹기도 좋다는 말은 디자인에서도 마찬가지이다.
하지만 우리는 관대해진 사용자로부터 사소한 사용성 문제를 간과할 가능성이 높아진다.

최신 기술 또는 보기 좋은 디자인에 포커스를 중점으로 두어 오히려 사용성은 후순위로 밀리는 경향도 종종 볼 수 있다.

우리는 이것을 인지하고 잘 대처해야한다.

8. 폰 레스토프 효과

 

비슷한 사물이 여러 개 있으면 그중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다.

 

대부분 삭제 기능을 사용할 때, 팝업으로 삭제 여부를 다시 한번 묻는다.

또는 삭제 버튼에 색상을 강조하여 사용자에게 실수하지 않게 도와준다.

 

반대로 강조된 색상은 오히려 삭제 버튼을 유도할 수 있을 거라 생각도 든다.
당근마켓의 경우에는 버튼보다는 텍스트의 문구(삭제하면 상대방이 당황할 수 있어요….) 를 강조하여 "삭제"보다는 "삭제 취소"를 유도한다고 생각한다.
많은 강조는 배너 무시*, 변화 무시*와 같은 경우와 오히려 역으로 혼잡함을 증가할 수 있다는 것을 고민해야한다.

9. 테슬러의 법칙

 

복잡성 보존의 법칙이라고도 불리며, 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.

 

알다시피 모든 복잡성을 해결할 수는 없다.

이런 경우에는 디자이너와 개발자가 대신 부담할 수 있다.
예를 들어, 이메일을 보낼 때, 보낸사람은 자동으로 입력되어있고, 받는 사람은 추천하는 방식으로 후보들이 존재하여 선택하기만 하면 된다.
이로써, 사용자는 타이핑하는 수고를 덜게 된다.
흔히 겪을 수 있는 배송 정보 입력, 결제 카드 입력 등도 이에 해당한다.

 

10. 도허티 임계

 

컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4이하) 로 인터랙션하면 생산성은 급격히 높아진다.

 

지금 시대에서는 0.4 초를 넘어가는 로드가 많다.

이를 위해 사용자가 기다린다는 느낌을 덜 주기 위해 흔히 로딩바, 스켈레톤 로딩, 블러 업(미디엄) 등을 사용한다.
오래전에 작성한 글을 한번 참고하면 좋을 것이다. (https://mygumi.tistory.com/296)

 

그 외 몰랐던 용어 및 내용

 

• 무한 루프나 무한 스크롤은 단순 편의성으로 나온 것이 아닌, 사용자가 방해 요소를 제거하여 페이지에 머무르는 시간을 최대한 늘리도록 설계된 기능.
• 콜투액션(Call to Action) - 즉각적인 반응을 유도하거나 즉각적인 판매를 장려하도록 설계된 모든 장치의 마케팅 용어 ex) 상품 구매 버튼.
• 인지 부하(Cognitive load) - 학습이나 과제 해결 과정에서의 인지적 요구량.
• 배시 무시(Banner Blindness) - 광고로 생각되는 요소를 무시하는 사용자 행동.
• 변화 무시(Change Blindness) - 시각적 단서가 충분하지 않거나, 주의력이 다른 곳에 분산되어 있을 때 사람들이 변화를 잘 알아채지 못하는 경향.
• 행복 경로(Happy path) - 소프트웨어 또는 정보 모델링의 맥락에서, 행복한 길은 예외적이거나 오류 조건이없는 기본 시나리오.
• 다크 패턴(Dark pattern) - 이용자를 속이기 위해 교묘하게 설계된 UI.