상단바와 Docks에 적용된 피츠의 법칙
피츠의 법칙은 마우스로 어떤 대상을 클릭할때, 대상의 크기가 작거나, 거리가 멀수록 클릭 난이도가 높아진다는 법칙입니다. 반대로 대상의 크기가 크거나, 거리가 가까우면 클릭 난이도가 줄어들죠. 경험적으로 알고있는 내용이지만, 피츠의 법칙은 이를 수학적 공식으로 체계화 했습니다.
맥북의 UI에도 피츠의 법칙이 적용되어 있습니다. 화면 맨 위의 상태바와 아래의 Docks 가 대표적인 예시인데요, 피츠의 법칙에 따르면 화면 가장자리에 있는 UI는 크기가 무한입니다. 왜냐면 마우스는 화면을 벗어나지 못하기 때문이죠. 따라서 가장자리에 있는 UI들은 클릭 난이도가 낮습니다. 맥북은 사용자가 쉽게 Docks 와 상단바에 접근 할 수 있도록 가장자리에 이 UI들을 배치한 것이죠. 여기서 알 수 있는 것은, 사용자가 자주 클릭하는 UI는 피츠의 법칙을 고려해 쉽게 클릭할 수 있도록 만들어야한다는 점입니다.
상단바와 Docks에 적용된 피츠의 법칙
힉의 법칙은 의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다는 법칙입니다. 1952년 심리학자 에드먼드 힉이 진행한 자극의 개수와 자극에 대한 반응 사이의 상관관계에 관해 진행한 실험을 통해 만들어졌습니다. 힉은 이 실험을 통해 선택지의 개수와 반응시간은 로그함수로 비례한다는 것을 발견했습니다.
선택지가 너무 많다면 유저는 인지부하가 오고, 이탈할 가능성이 높아집니다. 따라서 효율적이고 간결한 방식으로 복잡한 비즈니스 흐름을 단순화 해야합니다. 좋은 예로는 토스의 UI가 있습니다. 토스는 복잡하고 어려운 금융을 단순하고 쉽게 풀어내 2000만 이상이 사용하는 거대한 애플리케이션이 되었습니다.
실제 유저가 필요한 기능이 무엇인지 고심하여, 불필요한 선택지들은 제거해 단순한 흐름을 만드는 것이죠.
토스의 UI
폰 레스토프 효과는 비슷한 사물이 여러 개 있으면 그 중 가장 눈에 띄는 한 가지만 기억 할 가능성이 크다는 이론입니다. 폰 레스토프는 1933년 연구에서 참가들에게 유사한 항목으로 구성한 목록을 보여주고, 사람들이 그중 뚜렷히 구분되는 항목을 가장 잘 기억한다는 사실을 밝혀냈습니다.
선택적 주의력이라는 개념이 있는데, 넘쳐나는 감각 정보의 홍수에서 인간은 주요한 정보에만 집중하고 그 외 정보들은 걸러낸다는 내용입니다. 따라서 UI를 만들때 중요한 정보나 핵심 동작은 시각적으로 눈에 띄게 디자인해야합니다. 각 요소간에 경쟁을 피하고, 중요한 항목을 강조해야하는 것이죠.
우리가 사용하는 서비스는 대부분 요금제를 운영하며, 그 중 추천하는 요금제를 강조해두는 경우가 많습니다. 유저는 무의식적으로 강조된 부분이 가장 보편적이고 중요한 곳이라고 인식하죠.
PRO 요금제를 강조한 미리캔버스의 UI
우리가 일상적으로 접하는 UI들의 기저에 심리학 법칙이 숨어있다는게 흥미롭고 놀랍지 않나요?
도허티 임계란 사용자와 컴퓨터가 인터렉션을 할때 0.4초 이하로 인터렉션 하면 생산성은 급격히 증가한다는 이론입니다.
PC가 등장한 초창기에는 응답 시간의 임곗값은 2초로 여겨졌습니다. 만약 우리가 어떤 버튼을 클릭하고 응답을 받기까지 2초나 기다려야한다면 그 서비스를 쓸까요? 무신사에서 검색을 할때마다 2초씩 기다려야 한다면 우리는 무신사를 쓸까요?
월터 도허티는 [IBM 시스템 저널]을 통해 응답 시간이 0.4초 이하면 생산성이 급격히 증가한다는 논문을 썼습니다. 만약 도허티 임계보다 더 많이 걸리는 작업이 있을 경우에는 사용자에게 처리 시간에 관한 피드백을 주면 괜찮다고 합니다.
예를들면 롤에서는 게임에 입장 전 로딩 진행률을 보여줍니다. 이를 통해 사용자는 기다리는 것에 대해서 확신을 가지고 더 관대해집니다.
게임 시작 전 로딩을 나타내는 UI - 롤토체스
다른 예시로 인스타그램은 사진을 로딩하는 동안 뼈대 이미지를 보여줍니다. 일반적인 동작에서 도허티 임계(0.4초)보다 빠른 응답을 추구해야 하지만, 그렇지 못한 경우에는 유저의 이탈을 막기 위해서, 로딩 진행률이나 뼈대 이미지를 사용하여 유저에게 로드중이라는 피드백을 줘야합니다.
실제 이미지를 불러오는 동안 뼈대 이미지를 보여주는 인스타
이 책을 꼭 읽어보길 권장합니다. 제가 포스팅에 소개한 법칙 말고 6가지 법칙이 더 있습니다.
사용자와 맞닿아 있는 디자이너와 프론트엔드 개발자가 이 법칙을 바탕으로 UI를 구성하면 UX를 향상시킬 수 있을 것 입니다.
이상으로 UI/UX의 10가지 심리학 법칙 리뷰를 마치겠습니다.