[실용서] UX/UI의 10가지 심리학 법칙

Overview

- 추천여부 :  추천

- Why : 책이 짧고 컬러로 된 예시가 많음!

- 요약평 : 심리학에 관심있는 IT 종사자에게 추천 (특히 UXUI 디자이너 / PM과 프론트 개발자도 알면 인생에 유용할 것 같다)

 

+ 아래 거의 대학생 시험공부를 해놨지만, 사실 개념을 이해하는데에는 예시가 필요하므로 책을 보는 것을 추천

 

 

---

의식의 흐름

Disclaimer
여기부터는 나를 위한 의식의 흐름일 뿐 남을 위해 쓰는 글이 아닙니다.

 

역자의 말부터 공감... 별다른 근거 없이 사용성 개선만을 이유로 무언가를 주장하는 건 설득력이 떨어진다.

 

제목에 충실한 책이기 때문에 10가지 심리학의 법칙을 다룬다.

간단하게 각 법칙을 기록해두면 미래의 내가 읽어주지 않을까??

 

1장 제이콥의 법칙

 사용자는 자신에게 익숙한 제품을 통해 구축한 기대치를 그와 비슷해 보이는 다른 제품에도 투영한다
(= 익숙하다는 것의 가치, 사용자가 배우지 않고도 목표를 달성할 수 있도록 하자)

- 특이하고 새로운 것을 적용하면? 사용자는 불만과 혼란을 느끼고 작업을 포기할 수 있다 (← 해야 한다고 예상하는 사용자의 기대 충족 X)

- 멘탈 모델 : 우리가 어떤 시스템에 관해, 특히 그 시스템의 작동방식에 관해 알고 있다고 생각하는 바 / 과거의 경험을 통해 쌓은 지식을 새로운 대상과 인터랙션할 때 사용함 

- 멘탈 모델 부조화 : 디자인이 멘탈 모델과 어긋날 때 사용자가 제품을 인지하는 방식, 이해하는 속도에 악영향 / 익숙한 제품이 갑자기 변할 때 발생 

 

- 다만 모든 제품과 경험이 똑같을 필요는 없다 / 이건 사용자가 새로운 경험을 이해하기 위해 기존 경험을 활용한다!! 라는 걸 기억해라!! 란 뜻임

- 독창성을 추구하기 이전에 사용자의 니즈와 맥락, 기술적 제약을 고려한 최선의 방법을 알아내야 한다 + 그 과정에서 사용성 희생되어서는 X

- 디자인 관례를 따르지 않을 때는 UT 꼭 해보기

 

 

거의 뭐 대학수업 시험공부 하고 있는 줄... 

 

2장 피츠의 법칙

사용자가 대상을 사용하기까지 걸리는 시간이 (1)대상의 크기와 (2)대상까지의 거리와 연관이 있다 

- 터치 대상의 크기는 사용자가 쉽게 알아보고 정확하게 선택할 수 있을 정도로 충분히 커야 한다

- 터치 대상 사이에 충분한 거리를 확보해야 한다

- 터치 대상은 인터페이스 상에서 쉽게 도달할 수 있는 영역에 배치해야 한다 

 

사례가 재미있다

- 입력 폼의 텍스트 레이블 : 텍스트 레이블 요소와 입력을 연결해두면 입력 표면적이 확장되어 사용성 증가

- 폼 전송 버튼이 마지막 입력 폼과 가까운 위치에 있다

 

하단 내비게이션이나 과업 버튼등의 디자인에서 생각해야 하는 요소 같다 

 

3장 힉의 법칙

의사결정에 걸리는 시간은 선택지의 개수와 복잡성과 비례해 늘어난다

(선택지 개수가 늘면 의사결정에 걸리는 시간이 로그함수적으로 늘어난다)

- 인터페이스에 선택지가 너무 많으면 효율적이지도 간결하지도 않다 (= 이는 제작자가 사용자 니즈를 완벽하게 이해하지 못했다는 의미)

- 인지 부하(cognitive load) : 인터페이스를 익히고 인터랙션하는 데 필요한 정신적 자원의 양

- 인간의 뇌도 가용공간을 초과하는 정보가 유입되면 정신이 버거워지고 / 새로운 정보를 수용하기 위해 작업 기억에 있던 기존 정보를 지우게 됨 / 근데 잃어버린 정보가 수행하려던 임무 수행에 꼭 필요하면 문제가 될 수 있다.

- 지나친 단순화 : 하지만 단순화가 사용자 경험에 부정적인 영향을 미치는 시점도 존재 / 추상화라고 할 정도로 단순해지면 작업 수행이나 정보 수집을 방해하기도 함 (광범위한 지식과 경험이 있는 사용자조차 즉시 알아보지 못하는 아이콘 등)

 

4장 밀러의 법칙

보통 사람은 작업 기억에 7(+-2) 개의 항목밖에 저장하지 못한다.
(단기 기억에는 한계가 있으며 정보 비트를 유의미한 덩어리로 정리하면 단기 기억을 최적화할 수 있다)

- 덩어리화 : 인간의 단기 기억은 한계가 있고 정보를 덩어리로 만들면 정보를 더욱 효과적으로 암기할 수 있다

- 텍스트 장벽 : 체계나 서식이 없고, 행 길이도 적절히 나누지 않은 콘텐츠 
(→ 훑어보거나 처리하기 어려운 콘텐츠는 사용자의 인지 부하를 가중시킨다)

- 정보의 밀도가 높은 경험을 덩어리화하면 콘텐츠 구조가 형성된다 

 

 

5장 포스텔의 법칙

자신이 행하는 일은 엄격하게, 남의 것을 받아들일 때는 너그럽게 

- 엄격하게 : 인터페이스든 포괄적인 시스템이든 안정성과 접근성을 보장해야 한다 (사용하기 쉬워야 혀)

- 너그럽게 : 사용자의 입력은 포맷이나 입력 메커니즘을 막론하고 무조건 수용해야 한다 (모바일 사용자의 터치 입력, 제스처 입력, 다양한 언어, 음성입력, 다양한 디바이스 등 ..) - 폴드와 플립의 등장과 함께 요상한 화면을 대응해야 하는 슬픈 생각이 났다 

- 반응형 웹디자인 기법 : 광범위한 유형의 입력을 수용하되, 기기의 크기나 유형에 구애받지 않고 다양한 크기의 화면에서 안정적으로 출력이 이뤄지게 한다는 철학을 잘 구현하고 있음

- 점진적 향상 전략 : 모든 사용자가 브라우저 기능 지원, 기기 기능이나 성능, 인터넷 연결 속도에 상관없이 기본적인 콘텐츠와 기능에 접근할 수 있어야 한다는 점을 강조 / 부가적인 스타일이나 인터랙션은 기능 지원이나 성능을 탐지해 점진적으로 추가 (핵심 콘텐츠의 접근성을 저해하지 않고 더 좋은 환경으로 접근한 사용자에게는 더 나은 환경 / 나머지 사용자에게는 차선의 서비스 제공) / 우아한 성능 저하 전략과 대조  (ex. 검색 상자는 기본으로 제공하고, 음성 인식이 지원되는 기기에서는 음성인식을 제공)

 

글로벌 사례에서 매우 공감되는 부분이 있다.

한글로 기본 콘텐츠를 입력하고 글로벌 고객에 대응하기 위해 영 / 중 / 일로 번역되어 나가야 했는데, 중 / 일의 경우에는 동아시아 권었기 때문에 그나마 번역된 글자 수가 비슷했는데 영어의 경우에는 글자수가 크게 차이나는 경우가 많아서 그런 면에서 번역에 신경을 써야했다. 이런 경우 디자인이나 사용성이 망가질 수 있었기 때문에 고려해야 한다는 교훈을 얻었음.

+ 추가로 어떻게 대응해야하는지를 고민해야 한다. max글자수를 설정하고 말줄임을 처리한다든지.. 선택 시에만 전체를 노출한다든지... + 어느 글자수보다는 두줄로 처리한다든지...

 

6장 피크엔드 법칙

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

- 사용자 여정 중 가장 강렬한 순간과 마지막 순간을 세심하게 신경 써야 한다

- 사람들은 긍정적인 순간보다 부정적인 순간을 더 생생하게 기억한다

- 인지편향 (cognitive bias) : 판단에 관여하는 사고나 이성에 발생하는 계통 오차를 가리킨다. 이러한 오차가 세상을 인지하고 의사결정을 하는 능력에 영향을 미침 / 상황을 철저하게 분석하기보다 효율적으로 신속한 결정을 내리게 해주는 일종의 정신적 기름길 (무의식적인 자동 반응)

 

여정지도... 다음 회사에서는 실무에서 써볼 수 있을까.... 

 

7장 심리적 사용성 효과

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

- 사용성 테스트에 미치는 영향 : 보기 좋은 디자인은 긍정적 혜택을 주는 동시에, 사용성 문제를 간과하지 않게 주의해야 한다. 

- 아름다운 디자인은 사용자에게 긍정적인 감정 반응 + 인지 능력 향상 효과 

8장 폰 레스토프 효과

비슷한 사물이 여러 개 있으면 그중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다. (선택적 주의력)

- 사용자는 시각적으로 대비되는 요소에 빠르게 주의를 빼앗긴다 / 인터페이스의 어떤 부분에 집중하게 할 지를 관리해야 한다

- 시각적 강조를 활용해서 사용자의 주의를 끌고 목표로 안내해야 함 (색상, 형태, 크기, 위치, 움직임 등 활용)

- 배너 무시 (banner blindness) : 사용자가 광고라고 인식한 요소를 무시하는 경향 / 주의력의 용량에 한계가 있다는 점에서, 디지털 광고처럼 특별히 도움이 되지 않는 정보는 무시하는 것이 합리적

- 변화 무시 (change blindness) : 시각적 단서가 충분하지 않거나, 주의력이 다른 곳에 분산되어 있을 때 사람들이 변화를 잘 알아채지 못하는 경향

- 절제의 중요성 : 시각적 차별화를 적용할 시점과 빈도를 고려해야 함. 너무 많은 요소를 강조하지 않아야 함.

- 접근성 : 색상을 통해서 강조하려고 할 때 색맹인 사용자도 고려해야 한다. (예시)

 

9장 테슬러의 법칙

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

- 사용자가 겪을 봅작성을 줄이겠다는 목표를 두고 아무리 노력해도 모든 프로세스에는 복잡성이 남는다. 미처 없애지 못한 복잡성이 사용자 인터페이스 또는 디자이너 혹은 개발자의 프로세스나 작업 흐름 어딘가에 자리 잡는다.

- 고객이 쇼핑할 때 겪는 불편이 크게 줄었다는 건, 이 경험에 수반되는 복잡성을 디자이너와 개발자가 기능을 실현하며 떠맡았다는 뜻임.

- 좋은 사용자 경험이란? 목표 달성을 방해하는 장애물을 제거한 쉽고 직관적인 경험. → 복잡성을 줄이려다 너무 추상화될 경우 경험이 오히려 저해될 수 있다.

 

10장 도허티 임계

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

- 필요한 프로세싱이 수행되는 동안 사용자에게 처리 시간에 관한 피드백을 주면 좋다. 피드백을 받으면 사용자는 서비스가 실제보다 더 빠르게 작동한다고 느낀다.

- 스켈레톤 : 콘텐츠가 로딩되는 동안 콘텐츠 영역에 임시로 자리표시자(place holder) 블록을 표시하는 것

- 블러 업 : 로딩시간을 최적화하는 기법 (이미지가 로딩시간을 지나치게 증가시키는 주범이라는 점에 착안) 실제 큰 이미지를 표시할 공간에 아주 작은 크기로 이미지를 로딩한 후 크게 확대해서 표시 / 저해상도 이미지가 커짐에 따라 픽셀단위로 깨지고 노이즈가 생기는 문제를 가우시안 블러로 가림

- 로딩이나 프로세싱이 진행되는 동안 애니메이션으로 시선을 끌기도 ( 진행상태 표시자 - progress indicator, progress bar) / 정확도와 상관없이 진행 표시줄을 보는 것만으로도 사용자는 대기 시간을 더 관대하게 받아들인다.

 

왜 이런 간단한 UI 패턴이 효과적인가?

(1) 요청이 처리되고 있다는 사실을 알 수 있다

(2) 사용자가 기다리는 동안 볼거리를 제공한다

(3) 실제 대기 프로세스가 아닌 진행표시줄 애니메이션에 관심이 집중되어 기다린다는 느낌을 줄임

 

- 낙관적 UI :체감 성능을 개선 가능 / 동작이 완료된 후 피드백 제공 대신 작업을 처리하는 도중에 동작을 성공적으로 수행했다는 낙관적인 피드백을 주는 것 

 

 

 

---

추가 내용

 

- 슬롯머신은 현대판 스키너 상자나 다름 없다. 끊임없는 피드백을 통해 최대의 가치를 얻기 위해 사람들을 '지속적인 생산성' 상태에 빠뜨림. 스키너는 불규칙적으로 이뤄지는 무작위 강화가 행동을 형성하는 가장 효과적인 사실임을 입증 → 디지털 플랫폼에서 이런 불규칙한 보상을 활용하는 예시가 당겨서 새로고침 (pull to refresh) 이다. 

- 무한 루프 / 피드 무한 스크롤 : 방해요소를 제거해서 사이트에 머무는 시간을 늘림 (사이트 체류시간이 길어지면 광고조회수 상승!)

- 다크 패턴 : 사용자의 참여도를 높이기 위해 필요 이상의 구매, 불필요한 정보 공유, 마케팅 정보 수신 허용 등 사용자가 의도하지 않은 행동이나 그들에게 별 도움이 되지 않는 행동을 하도록 유도하는 것

- 희소성 패턴 : 재고가 부족하다고 느끼면 더 갖고 싶어하는 사람들의 심리를 이용, 제품 재고가 제한적임을 표시