15 min to read

UX/UI의 10가지 심리학 법칙

Featured image

좋아보이는 것에 대한 이유를 담고 있는 책
심리학 법칙들에 기대어 디자인의 여러 요소를 설정한다면 디자인의 근거가 될수 있다. 뛰어난 사용자 경험은 성공의 이유, 혹은 경쟁력이 되기도 한다.
확실한 근거 없이 사용자 경험을 개선해야한다는 말은 진부한 이야기

기반데이터가 없을 경우 주관적 의견과 개인적 편견에 의해 좌우된다. 심리학은 디자인의 실질적 증거가 된다.

https://lawsofux.com/

제이콥의 법칙

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

사용자는 여러 사이트에서 대부분 시간을 보낸다. 그래서 여러분의 사이트도 자신이 이미알고 있는 다른 사이트들과 같은 방식으로 동작하길 바란다.

멘탈모델
과거의 경험으로 쌓은 지식. 즉 해당 지식으로 새로운 대상과 인터랙션할 때 사용한다.

인터페이스를 익히는데 드는 정신적 에너지가 줄어들수록, 사용자가 목표달성에 투자할 에너지는 늘어난다. 인터페이스를 만들때 사용자를 불편하게 할 방해요소를 최대한 제거해서 사용자가 목적을 달성하게 해줘야 한다. 페이지 구조, 작업 흐름, 네비게이션, 검색 같은 특정 요소 배치등 전략적인 영역에 일반적인 디자인 패턴이나 관례를 활용하는 건 방해 요소를 줄이기 위해 흔히 쓰는 방법이다.

제이콥의 법칙은 모든 웹사이트나 앱의 작동 방식이 동일해야한다고 주장하는 것은 아니다. 혁신이 필요한 기와 장소도 분명 존재한다. 하지만 사용자의 니즈와 맥락, 그리기고 기술적 제약까지 고려해 최선의 방법을 찾아야한다. 그 과정에서 사용성의 희생되지 않게 주의해야한다.

제이콥의 법칙은 사용자가 새로운 경험을 이해하기 위해 기존 경험을 활용한다는 사실을 상기시는 지침이다.

피츠의 법칙

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

인터랙티브 요소의 크기와 위치를 적절하게 지정함으로써, 사용자가 해당 요소를 손쉽게 선택하게 하고, 선택 가능 영역에 관한 사용자의 기대에 부응시켜야한다.

대상이 커지면 대상 선택에 드는 시간이 줄어들고, 선택을 위해 움직이는 거리가 줄면 선택하는데 드는 시간도 줄어든다. 대상의 크기가 적당하면, 사용자는 인터렉티브 요소를 쉽게 선택할 수 있고, 사용하기 쉬운 인터페이스라고 기억한다. 요소 사이의 거리가 너무 가까우면 잘못 선택할 가능성이 커진다. 구글 머터리얼 디자인 가이드 라인에서는 터치 대상간의 거리를 최소 8dp 이상 확보해서 정보 밀도와 사용성을 적정 수준으로 유지 하라고 권고 한다.

텍스트 입력 폼의 레이블을 선택하면 입력 폼에 포커스가 가거나, 폼 전송 버튼이 입력 란 주변에 배치되는 것이 피츠의 법칙의 예이다.

특히 모바일 인터페이스 같은 경우엔 화면이 작으므로 피츠의 법칙을 각별히 유념해야한다. 인터랙티브 요소의 크기를 충분히 키우고 요소 사이에 넉넉한 간격을 두면, 사용자는 실수로 옆에 있는 항목을 선택하는 불상사를 겪지 않을 수 있다.

힉의 법칙

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

온보딩
신입사원이 새로운 회사에 입사하여 적응하는 것을 돕는 과정을 의미하는 말이었으나 의미가 확장되어 사용자가 처음 접하는 시스템에 적응하도록 돕는 과정을 일컫는 말로도 사용된다.

사용자의 목표를 정확히 이해하고 이를 방해하는 요소를 줄이거나 없애는 것을 궁극적인 목표로 삼아야한다. 즉, 효율적이고 간결한 방식으로 복잡성을 단순화하는데 정진해야한다.

인터페이스가 너무 복잡하고, 취해야할 동작이 불명확하거나 알아보기 어렵고 중요한 정보를 찾기가 난해한 경우 사용자에게 더 많은 인지 부하가 요구된다.

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

인터페이스나 프로세스를 단순하게 만들면 사용자가 느끼는 정신적 긴장은 줄어들지만, 그 대신 어떤 선택지가 있는지, 자신의 목표와 관련있는 정보인지를 사용자가 쉽게 알아보도록 맥락에 관한 단서를 제공해야한다.

밀러의 법칙

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

밀러는 자극에 포함되는 정보의 양에 큰 차이를 두어도 청소년의 기억범위는 대략 7 정도로 제한된다는 사실을 알아냈다. 그리고 기억 범위에 더 큰 영향을 미치는 것은 정보 덩어리(chunk)의 개수라는 결론에 이르렀다.

정보 덩어리 (chunk)
한 그룹으로 묶여서 기억에 저장되는 기본 단위를 의미한다. 인간의 단기 기억은 한계가 있고 정보를 덩어리로 만들면 정보를 더욱 효과적으로 암기할 수 있다.

덩어리화(chunking)는 UX디자인에서 콘텐츠를 다를때 큰 도움이 된다. 콘텐츠를 시각적으로 뚜렷이 구별되는 그룹으로 나누고 명확하게 체계화 하면, 사람들이 디지털 콘텐츠를 평가하고 처리하는 방식에 잘 맞게 정보를 표시할 수 있다.

가장 쉬운 덩어리화의 예제로 전화번호 구성방식을 둘 수 있다. 덩어리화 한 전화번호는 보다 기억하기 쉽다.

01012345678 vs 010-1234-5678

또다른 예제로 택스트 장벽(wall of text)라는 무시무시한 존재를 들 수 있을 것이다. 서식이 없고, 행 길이도 적절히 나누지 않은 컨텐츠를 가르킨다. 이렇듯 훑어보거나 처리하기 어려운 콘텐츠는 사용자의 인지 부하를 가중시킨다.

콘텐츠를 적절한 크기의 덩어리로 나눠 정리해두면 사용자가 정보를 더 쉽게 처리하고 이해하고 기억하는데 도움이 된다.

포스텔의 법칙

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

포스텔의 법칙 첫 문장은 “자신이 행하는 일은 엄격하게”이다. 이를 디자인에 적용하면, 인터페이스나 시스템은 안정성과 접근성을 보장해야한다는 뜻으로 해석할 수 있다. 즉, 누구에게나 정상 작동하는 인터페이스를 제공할 수 있어야 한다는 뜻이다.

포스텔의 법칙 뒤 문장은 “남의 것을 받아들일 때는 너그럽게”이다. 이를 디자인에 적용하면, 사용자의 입력은 포맷이나 입력 메커니즘을 막론하고 무조건 수용해야한다는 의미로 해석할 수 있다. 마우스나 키보드, 보조 기술, 터치 입력, 제스쳐 입력, 음성 입력 등 사용자가 행하는 다양한 입력 방식을 고려해야한다.

존 포스텔은 TCP (Transmission Control Protocol)의 초기 모델을 구현했고, 자신의 견고함의 원칙을 적용했다. 데이터를 보내는 프로그램은 명세를 준수해야하며, 데이터를 받는 프로그램은 의미만 명확하다면 명세를 따르지 않는 입력이라 해도 너그럽게 받아드리고 구문 분석할 수 있을 정도로 견고해 야한다는 의미였다. 이 원칙은 많은 분야에 영향을 미쳤다. HTML을 예로 들어보자. 제작 상의 실수나 브라우저에서 지원하지 않는 기능등이 존재하더라도 브라우저는 무시하고 넘어간다.

포스텔의 법칙에 따르면 컴퓨터는 인간의 다양한 입력을 받아들이고 그 입력을 이해하는데 그치지 않고 컴퓨터가 읽을 수 있는 형식으로 처리할 수 있을 만큼 견고해야한다. 페이스 ID를 통해 휴대전화의 잠금화면을 풀고, 반응형 웹디자인으로 다양한 상황에 맞춰 콘텐츠를 유연하게 반응할 수 있게 되었다.

콘텐츠에 초첨을 맞추고 스타일과 인터랙션을 점진적으로 쌓아가는 웹디자인 전략인 점진적 향상(progoressive enhancement)도 포스텔의 법칙의 사례이다.

점진적 향상
모든 사용자가 브라우저 기능 지원, 기기 기능이나 성능, 인터넷 연결 속도와 상관없이 기본적인 컨텐츠와 기능에 접근할 수 있어야 한다. 부가적인 스타일이나 인터랙션은 기능 지원이나 성능을 탐지해 점진적으로 추가한다.

검색상자를 예로 들어보자. 누구나 검 상자를 선택하고 검색 질의를 입력할 수 있다. 입력 인식 기능을 지원하는 기기에는 음성 입력을 허용할 수도 있다.

다양한 가능성에 대해 잘 예측하고 대비한다면 회복탄력성이 뛰어난 디자인을 만들 수 있을 것이다.

피크엔드 법칙

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

인간은 자신의 인생 경험을 포괄적인 타임라인이 아니라, 일련의 한 장면처럼 기억한다. 감정적으로 가장 강렬한 순간과 마지막 순간의 느낌이 경험에 대한 평가의 평균값을 정한다. 즉, 사용자가 전체 경험을 긍정적으로 평가하게 하려면 이러한 중요한 순간에 각별한 주의를 기울여야한다는 것이다.

인지 편향 (cognitive bias)
인지 편향이란 판단에 관여하는 사고나 이성에 발생하는 계통 오차(systematic error)를 의미한다. 상황을 철저하게 분석하기 보다 효율적으로 신속한 결정을 내리게 해주는 일종의 정신적 지름길로 볼 수 있다. 하지만 인지 편향이 사고나 지각을 왜곡해서 적절치 못한 판단이나 현명하지 못한 결정으로 이어질 도 있다.

확증 편향 (confirmation bias)
확증 편향이란 기존 신념을 지키기 위해 이를 지지하는 정보에만 주의를 기울이고 이에 반하는 정보를 무가치하다고 치부하는 경향을 의미한다. 자신의 선입견이 옳다는 걸 더 분명히 하는 방향으로 정보를 찾고, 해석하고, 상기하는 편향된 신념을 가르키는 말이다.

인지 편향의 한 종류인 피크엔드 법칙은 기억 회상을 방해하는 기억 편향(memory bias)이라고도 알려져 있다. 인간은 자신의 감정을 강하게 자극한 사건을 그렇지 않은 사건보다 더 잘 기억하는데, 이는 우리가 경험을 인지하는 방식에도 영향을 미친다.

피크엔드 법칙은 마지막에 입수된 정보일수록 가장 잘 기억해 낼 수 있다는 최신 효과 (recency effect)라는 또 다른 인지편향과도 관련이 있다.

대기 시간도 제품이나 서비스에 대한 인식에 큰 영향을 미칠 수 있는데, 택시 앱을 예로 들면 배정된 차량이 도착할 때 까지 이동경로를 보여주거나(유휴 시간에 대한 거부감), 예상 시간 표시(작동상의 투명성)와 각 단계별 진행상태를 알려주어 차량에 탑승한다는 목표를 향해 꾸준히 진전하고 있다고 느낀다.(점진적 목표 달성 효과) 시간이나 대기에 관한 사용자의 인식에 집중함으로써, 요청 취소율을 낮추고 서비스 이용 중 부정적 감정이 절정에 이를 만한 순간을 피했다.

심미적 사용성 효과

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

보기 좋은 디자인은 인간의 뇌에 긍정적 반응을 일으켜서 사용성이 뛰어나다는 생각이 들게한다. 이러한 현상을 심미적 사용성 효과(aestheic-usability effect)라고 일컫는다. 인간은 자동 인지 처리를 통해 처음 보는 대상의 아름다움을 본능적으로 빠르게 파악하는데, 디지털 인터페이스를 접할 때도 마찬가지다. 첫 인상은 중요하다.

그러나 사용성 테스트를 할 만큼은 보기 좋은 디자인으로 인해 사용성 문제가 가려지지 않도록 주의해야한다.

폰 레스토프 효과

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

사용자는 시각적으로 대비되는 요소에 빠르게 주의를 빼앗긴다. 따라서 어느 부분에 집중하게 할지 관리하는 것도 중요한 역할이다. 하지만 너무 많은 부을 강조하면 사용자가 필요로 하는 정보를 찾기 어려워지기도 한다. 색상, 형태, 크기, 위치, 움직임등은 모두 사용자의 주의를 끄는 요소이므로 인터페이스에 적용할때 신중하게 고민해야한다.

선택적 주의력
어떤 사물이 우리 시야에 있다고 해도 우리가 반드시 그 사물을 보는 것은 아니다. 주변 사물에 집중하는 능력은 용량과 지속 시간 면에서 제한이 있기 문에 우리는 관련없는 정보를 희생하고 관련있는 정보에 집중한다. 주의력 또한 한정된 자원이다.

배너 무시
사용자가 광고라고 인식한 요소를 무시하는 경향을 가르킨다. 꼭 필요한 콘텐츠 요소라고 해도 조금이라도 광고처럼 보인다거나 광고 근처에 있으면 무시당할 수 있다.

변화 무시
시각적 단서가 충분하지 않거나 주의력이 다른 곳에 분산되어 있을 때 사람들이 변화를 잘 알아채지 못하는 경향을 가르키는 말이다. 인간의 주의력은 한정된 자원이기에 목적과 무관하다고 여겨지는 정보를 대체로 무시한다.

인간은 다른 요소와 시각적으로나 개념적으로 분리된 항목을 더 잘 기억한다. 요금제 표에서 추천하는 요금제를 강조한다거나, 삭제 버튼을 다른색으로 두어 실수로 선택하는 것을 미연에 방지한다. 휴대전화에 표시되는 알림 아이콘도 좋든 싫든 사용자의 주의를 환기시킨다.

폰 레스토프 효과는 대조를 활용해서 사용자가 가장 중요한 콘텐츠에 주의를 기울이게 할 방법을 알려주는 훌륭한 지침이다.

절제와 접근성
너무 많은 요소를 강조하면 사용자에게 시각적인 부담을 안긴다. 시각적 요소가 서로 경쟁을 벌이지 않도록 제한적으로 강조하자. 콘텐츠를 시각적으로 강조하려다가 광고로 오인되는 경우, 사용자는 지나칠 공산이 크다.

색상이라는 속성으로만 강조하려고 하면 색맹이 있는 사용자에겐 훌륭한 사용자 경험을 제공하지 못한다. 특정 색을 인지하기 어렵거나 저시력 장애를 겪는 사용자가 불편하지 않도록, 전경 요소와 배경 요소의 색상이 충분한 대비를 이루게 해야한다.

테슬러의 법칙

복잡성 보존의 법칙이라고도 알려진 테슬러의 법칙에 따르면, 모든 시스템에는 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.

모든 애플리케이션과 프로세스에는 완전히 없애거나 감출 수 없는 일정량의 복잡성이 존재한다. 이렇게 남은 복잡성은 개발 과정이나 사용자 인터랙션 단계 중 어느 쪽에서든 처리해야 한다.

간단한 예로 이메일을 들 수 있는데, 메시지 발신인과 수신인 2가지 정보가 필요하다. 이 정보가 없다면 이메일 발송이 불가능하므로 이 부분은 필수적인 복잡성이다. 다른 예로 온라인에서 물건을 구매할 때 고객들은 결제나 배송에 관한 많은 정보를 입력해야한다. 하지만 같은 정보를 자동으로 입력해주는 기능을 추가해서 고객이 겪은 복잡성을 줄어들게 할 수 있다. 삼성 페이 같은 서비스는 결제 시에 필요한 복잡성을 해소한 예이다. 고객이 쇼핑할 때 겪는 불편이 크게 줄었다는건, 이 경험에 수반되는 복잡성과을 디자이너와 개발자가 기능을 실현하며 떠맡았다는 뜻이다.

단순성이 추상성으로 뒤바뀐다면
단순성을 추구할 때는 균형을 잘 잡고 선을 넘지 않는 게 중요하다. 인터페이스가 추상적인 수준까지 단순해지면 사용자가 올바른 결정을 내리는 데 필요한 정보가 충분히 제공되지 않는다. 아이콘은 인터페이스 단순화에는 도움이 되지만 이따금 의미를 명확하게 전달하지 못할 때도 있다.

모든 일에는 관리해야 할 복잡성이 존재한다. 개발자와 디자이너는 만드는 인터페이스에 내재한 복잡성을 제거할 책임이 있다. 제거하지 못한 복잡성은 사용자에게 전가되고 형편없는 사용자 경험으로 귀결된다.

도허티 임계

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

제품이나 서비스를 처음 로딩하는 데 걸린 시간, 인터랙션 반응에 피드백을 제공한 속도 및 다음 페이지를 로딩하는데 걸린 시간 등 시스템의 반응 속도는 전체 사용자 경험을 좌우하는 열쇠다.

웹사이트와 앱 성능의 영향을 미치는 가장 중요한 건 전체 페이지의 용량이다. 페이지의 용량이 크면 대기시간이 길어지고, 사용자는 답답함을 느끼다 못해 아예 작업까지 포기한다.

게다가 시스템이 느리게 반응하면 인터페이스를 사용하는 사람의 생산성도 떨어진다. 반응이 즉각적이라고 느끼려면 0.1초 이내여야한다. 지연이 1초이상 늘어나면 사용자는 집중하기가 어려워지고 작업 수행에 필요한 정보를 놓치기 시작한다.

컴퓨터 반응 시간이 생산성에 불균형한 영향을 미친다는 도허티의 발견을 바탕으로 도허티 임계라는 표준이 탄생 했다.

처리시간이 도허티 임계가 규정한 시간(0.4초 이하)보다 더 많이 걸려도 딱히 개선할 방법이 없을 때도 있다. 이럴 땐 사용자에게 처리 시간에 관한 피드백을 주면 좋다. 예를 들어 뼈대 화면(skeleton screen)이 있다. 뼈대 화면이란 콘텐츠가 로딩되는 동안 콘텐츠 영역에 임시로 placeholder 블록을 표시하는 것을 가르킨다. 이를 사용하면 사용자는 콘텐츠 로딩 속도가 느려도 기다린다는 느낌이 덜하다.

블러 업(blur up) 기법도 있다. 이미지는 웹이나 애플리케이션의 로딩 시간을 지나치 증가시키는 원인 중 하나이다. 큰 이미지를 표시할 공간 이 존재한다면 먼저 저해상도 이미지를 가우시안 블러를 활용해서 감춘 뒤 이미지 로딩이 완료되면 실제 이미지를 표시하는 기법이다. 미디엄 같은 블로그에서 쉽게 찾아 볼 수 있다.

로딩이나 프로세싱이 진행되는 동안 상태표시 줄(progress bar)에 애니메이션을 넣어 사용자의 시선을 끌기도 한다. 연구에 따르면 정확도와 상관없ㅇ이 진행 표시줄을 보는 것만으로도 사용자는 대기시간을 더 관대하게 받아들인다고 한다. 이렇게 간단한 UI패턴이 효과적인 데에는 몇가지 이유가 있다.

사용자가 눈앞의 작업에 집중을 유지할 수 있는 한계는 일반적으로 10초 라고한다. 대기 시간이 10초를 넘어가면 사람들은 딴짓을 하고 싶어 한다.

낙관적 UI(optimistic UI)도 체감 성능을 개선하는 영리한 기법이다. 이 기법은 작업을 처리하는 도중에 동작을 성공적으로 수행했다는 낙곽적인 피드백을 미리 제공한다. 실제로 메시지가 전달되기 전에 메시지를 전달한 것 처럼 표시하고, 실제 전달이 완료되면 완료 표시를 해준다. 반면에 오류가 발생하면 오류를 표시한다.

반응이 너무 빠를 때
반응이 너무 빠르면 눈치조차 채지 못할 수 있다. 사용자가 요청한 결과가 아니라 자동으로 일어난 변화라면 문제를 일으킬 가능성이 크다. 또한 무슨 일이 일어났는지 사용자가 이해하기 어려울 수 있어 오히려 신뢰도를 떨어트릴 수 있다. 실제 작업이 훨씬 빨리 완료 되더라도 의도적으로 작업 완료 늦게 알리는 것이 체감 가치를 높이고 신뢰를 형성하는 데 도움이 되기도 한다.

간헐적이고 뷸규칙한 보상
스키너는 불규칙적으로 이뤄지는 무작위 강화가 행동을 형성하는 가장 효과적인 방법이라는 사실을 입증한다. 스마트폰의 당겨서 새로고침 기능은 불규칙한 보상에 관해 살펴볼 수 있는 좋은 예이다.

무한루프
동영상 연속 재생과 무한 스크롤은 방해요소를 제거해서 사이트에 머무는 시간을 최대로 늘리도록 설계한 기능이다. 콘텐츠 사이사이에 광고도 노출되므로 사이트 체류시간이 길어진다는 건 광고 조회 수가 늘어난다는 뜻이기도 하다.

사회적 확증
인간은 본질적으로 사회적인 존재이며, 자존감과 존엄성을 유지하려는 욕구가 있다. 소셜미디어의 좋아요와 댓글은 인정과 소속감에 대한 욕구를 일시적으로 충족시켜 준다.

기본설정
대부분의 사람은 기본 설정을 절대 바꾸지 않는다. 그러므로 기본 설정에는 결정을 조정하는 엄청난 힘이 있다.

방해요소 제거
동작 수행이 쉬워지고 편해질수록 사람들이 그 동작을 수행하고 이에 관한 습관을 형성할 가능성은 커진다. 간편결제 서비스는 사용자에게 신용카드 정보나 계좌정보를 묻지 않고 저장된 정보를 이용하여 바로 결제할 수 있게 도와준다.

호혜성
다른 사람의 행동에 보답하고자 하는 경향인 호혜성은 인간이라면 누구나 느끼는 욕구이다. 링크드인을 예로 들어보면, 누군가 자신의 보유기술을 추천할 수 있는데 추천 받은 사람은 상대의 보유 기술을 추천해서 응답을 보낼 의무가 있다고 느끼는 경우가 많다. 결과적으로 양쪽 사용자 모두 플랫폼에 머무는 시간이 길어진다.

다크패턴
사용자의 참여도를 높이기 위해 필요 이상의 구매, 불필요한 정보 공유, 마케팅 정보 수신 허용 등 사용자가 의도하지 않은 행동을 유도하는 것을 가르킨다. 회원가입 시에 전체동의를 하면 선택적 약관도 동의되는 것도 다크패턴으로 볼 수 있다.

좋은 의도 그러나 의도치 않은 결과