UX/UI의 10가지 심리학 법칙(6~10)
여섯 번째 법칙: 피크엔드 법칙
인간은 경험 전체의 평균이나 합계가 아니라, 절정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다.
인간에게는 과거 사건을 떠올릴 때, 경험 전반을 고려하기보다 감정적으로 절정에 이른 순간과 마지막 순간에 집중하는 흥미로운 경향이 있다. 그 순간이 긍정적이든 부정적이든 상관없이 말이다. 다시 말해 인간은 자신의 인생 경험을 포괄적인 타임라인이 아니라, 일련의 스냅 사진처럼 기억한다.
인지 편향이란 판단에 관여하는 사고나 이성에 발생하는 계통 오차(systematic error)를 가리킨다. 이러한 오차는 우리가 세상을 인지하고 의사결정을 하는 능력에 영향을 미친다. 의사결정을 할 때마다 검토에 온정신을 쏟기보다 평소에는 무의식적인 자동 반응에 의존해서 빠르게 일을 처리하고, 버거운 정신적 노동은 꼭 필요할 때만 하는 것이다. 하지만 인지 편향이 사고나 지각을 왜곡해서 적절치 못한 판단이나 현명하지 못한 결정으로 이어질 때도 있다.
확증 편향이란 자신의 선입견이 옳다는 걸 더 분명히 하는 방향으로만 정보를 찾고, 해석하고, 상기하는 편향된 신념을 가리키는 말이다. 인간이 매일 저지르는 수많은 편향 중 하나이다.
피크앤드 규칙은 마지막에 입수된 정보일수록 가장 잘 기억해 낼 수 있다는 최신 효과라는 또 다른 인지 편향과도 관련이 있다.
제품이나 서비스에 대한 감정에 영향을 미치는 건 긍정적인 사건만이 아니다 부정적인 사건도 감정적 절정의 순간과 경험에 대한 깊은 인상을 형성하는 데 기여한다. 예를 들어 대기 시간도 제품이나 서비스에 대한 인식에 큰 영향을 미칠 수 있다.
하지만 적절한 대비책을 마련해둔다면 위기는 기회가 된다. 흔히 볼 수 있는 404 오류 페이지를 예를 들어보자. 원하는 웹페이지를 찾을 수 없다는 메시지를 만나면 사용자는 불만을 표하고 부정적인 감정을 느끼기 쉽다. 하지만 이때 약간의 유머를 활용해서 고객과 라포를 형성하고 브랜드의 개성을 드러내는 기회로 삼는 회사도 있다.
일곱 번째 법칙: 심미적 사용성 효과
사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.
디자인이 아름다우면 긍정적인 감정 반응이 일어날 뿐 아니라, 인지 능력이 향상되고 사용하기 편하다는 인식이 커지며 신뢰도도 높아진다. 다시 말해 보기 좋은 디자인은 인간의 뇌에 긍정적 반응을 일으켜서 사용성이 뛰어나다는 생각이 들게 한다. 이러한 현상을 심미적 사용성 효과라고 일컫는다.
심미적 사용성 효과의 사례는 심미성을 업무의 중심에 두었던 두회사를 자세히 살펴보는 것으로 시작하자. 첫 번째는 독일의 전자회사인 브라운이다. 브라운은 디자인 세계에 불멸의 업적을 남겼을 뿐 아니라, 보기 좋은 제품이 얼마나 깊은 인상을 남기는지를 입증했다. 브라운은 수석 디자이너 디터 람스의 지휘 아래 기능적 미니멀리즘과 시각적 아름다움이 조화를 이룬제품을 출시하며 여러 세대의 디자이너에게 영향을 미쳤다.
기능적 미니멀리즘과 셈세한 심미성이 조화를 이룬 브라운의 유산을 여러 방면으로 계승하고 있는 애플의 사례를 보자. 브라운의 디자인 철학이 애플 제품에 미친영향은 꽤 도드라진다. 아이팟, 아이폰, 아이맥 같은 기기는 사용 편의성을 중시하는 동시에, 브라운 제품 라인의 아름다운 미니멀리즘 미학을 반영하고 있다.
애플은 우아하며 사용하기 편한 인터페이스 디자인으로 유명하다. 실상 이런 명성 때문에 애플은 경쟁 우위를 점했을 뿐 아니라, 좋은 디자인이 비즈니스 성공의 필수 덕목이 되는 새로운 시대를 열기도 했다. 애플 제품 인터페이스의 사용성에 전혀 문제가 없다는 말이 아니다. 하지만 미학적으로 아름다운 디자인 때문에 사람들이 사용성 문제를 눈감아 줄 확률은 훨씬 높아진다. 즉 심미적 사용성 효과가 작동한 것이다.
심미적 사용성 효과 때문에 사용성 문제를 간과할 가능성이 커진다. 긍정적인 부분이라고 볼 수도 있겠지만, 사용성 테스트를 할 때만큼은 보기 좋은 디자인으로 인해 사용성 문제가 가려지지 않도록 주의해야 한다.
여덟 번째 법칙: 폰 레스토프 효과
비슷한 사물이 여러 개 있으면 그중에서 가장 차이가 나는 한 가지만 기억할 가능성이 크다.
사용자는 시각적으로 대비되는 요소에 빠르게 주의를 빼앗긴다는 점에 주목해야 한다. 사용자의 목표 달성을 돕는 동시에 이들을 인터페이스의 어떤 부분에 집중하게 할지 관리하는 것도 디자이너의 중요한 역할이다. 한편으로는 시각적 강조를 활용해서 사용자의 주의를 끌고 목표로 안내할 수 있다는 뜻이다. 또 다른 한편으로는, 여러 요소가 서로 경쟁한다고 느껴질 정도로 너무 많은 부분을 강조하면 사용자가 필요로하는 정보를 찾기 어려워진다는 뜻이기도 하다.
요금제 표에 폰 레스토프 효과를 적용한 사례도 쉽게 찾아볼 수 있다. 우리가 사용하는 서비스 대부분은 요금제를 운영하며, 개중 추천하는 요금제를 강조해두는 경우가 많다. 강조하려는 항목을 차별화하기 위해 대체로 시각적 단서를 더하는 방법을 많이 쓴다. 위의 사진에는 notion사이트에서 Team 요금제를 회색의 배경색으로 강조해서 보여주고 있다.
사용자의 주의를 끌어야 하는 디자인 요소에 폰 레스토프 효과를 활용한 예도 많다. 알림을 예로 들어보자 알림은 사용자에게 할 일이 생겼다는 사실을 통보한다. 이 요소는 대부분의 앱이나 서비스에 흔히 쓰이고, 좋든 싫든 사용자의 주의를 환기시킨다.
폰 레스토프 효과를 잘 활용하면 중요한 동작이나 정보를 강조할 슬기로운 방법을 깨우치고, 사용자가 목표 달성에 필요한 요소를 빠르게 알아보도록 제품이나 서비스를 디자인할 수 있다. 시각적 강조를 제한 없이 사용하는 것도 문제가 될 수 있다. 시각적으로 차별화된 요소는 사용자의 주의를 끈다. 하지만 시각적으로 경쟁하는 요소들이 너무 많으면 강조 효과가 희석되어 어떤 요소도 도드라지지 않는다. 마지막으로 디자인 강조에 사용하는 시각적 속성이 시력 장애를 겪는 사용자에게 어떻게 인지될지, 움직임에 민감한 사용자에게는 어떤 영향을 미칠지도 반드시 고민해봐야 한다.
아홉 번째 법칙: 테슬러의 법칙
복잡성 보존의 법칙이라고도 알려진 테슬러의 법칙에 따르면, 모든 시스템은 더 줄일 수 없는 일정 수준의 복잡성이 존재한다.
테슬러의 법칙은 1980년대 중반 제록스 파크에서 컴퓨터과 학자 래리 테슬러가 인터랙션 디자인 언어 개발 업무를 수행하던 시절에 탄생했다. 당시 테슬러는 사용자가 애플리케이션 과 인터렉션하는 방식이 애플리케이션만큼 중요하다는 사실을 알아냈다. 따라서 애플리케이션과 사용자 인터페이스, 양쪽의 복잡성을 줄이는 게 중요했다. 하지만 테슬러는 모든 애플리케이션과 프로세스에는 완전히 없애거나 감출 수 없는 일정량의 복잡성이 존재함을 깨달았다.
이메일을 작성하려면 메시지 발신인과 수신인, 2가지 정보가 필요하다. 이 정보가 없다면 이메일 발송이 불가능하므로 이부분은 필수적인 복잡성이다. 최신 이메일 클라이언트는 이러한 복잡성을 줄이기 위해 다음과 같은 2가지 작업을 한다. 우선, 보낸 사람의 정보는 로그인한 사용자의 이메일 주소를 입력해 자동으로 채우고, 사용자가 받는 사람 항목에 수신인 이메일 주소를 입력하기 시작하면 기존 이메일이나 사용자의 연락처 정보를 기반으로 추천 이메일 주소를 제안한다.
복잡성이 완전히 사라지지는 않지만, 추상화를 통해 사용자가 해야 하는 수고를 줄였다. 다시말해 발신인, 수신인 이메일 주소 입력이라는 복잡성을 이메일 클라이언트에 넘긴 덕에 이메일을 작성하는 경험이 조금 더 단순해졌다. 이 경험을 만든 디자이너와 개발자가 복잡성이라는 짐을 사용자 대신 부담한 것이다.
송금 프로세스의 복잡성을 줄인 카카오 송금 서비스가 있다. 채팅창에서 송금 아이콘을 클릭하면 위의 화면을 볼 수 있다. 보낼 금액을 입력하고 보내기를 누르면 바로 송금이 된다. 상대방의 은행계좌나 은행명을 입력할 필요가 없다. 복잡성을 디자이너나 개발자가 부담한 것이다.
제품과 서비스 사용자가 겪을 불필요한 복잡성을 제거해 명쾌하고 단순한 경험을 구현하는 것은 디자이너가 추구해야 할 중요한 목표다. 결국, 좋은 사용자 경험이란 목표 달성을 방해하는 장애물을 제거한 쉽고 직관적인 경험이다. 다만 단순성을 추구할 때는 균형을 잘 잡고 선을 넘지 않는 게 중요하다. 인터페이스가 추상적인 수준까지 단순해지면 사용자가 올바른 결정을 내리는 데 필요한 정보가 충분히 제공되지 않는다.
열 번째 법칙: 도허티 임계
컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터랙션하면 생산성은 급격히 높아진다.
뛰어난 사용자 경험을 만드는 필수 요소 중 하나는 성능이다. 사용자가 작업을 완료하려고 애쓰는 중에 처리 속도는 더디고, 피드백도 없으며, 로딩도 오래 걸리는 상황을 맞닥뜨리면, 금세 불만을 느끼고 부정적인 인상을 받을 것이다. 흔히 속도를 기술적인 문제로 치부하고 간과하지만 훌륭한 사용자 경험의 핵심이 되는 디자인 요소로 간주해야 한다. 제품이나 서비스를 처음 로딩하는 데 걸린 시간, 인터랙션에 반응해 피드백을 제공한 속도, 다음 페이지를 로딩하는 데 걸린 시간 등 시스템의 반응 속도는 전체 사용자 경험을 좌우하는 열쇠다.
처리 시간이 도허티 임계가 규정한 시간(0.4초 이하)보다 더 많이 걸려도 딱히 개선할 방법이 없을 때도 있다. 이럴 때는 필요한 프로세싱이 수행되는 동안 사용자에게 처리 시간에 관한 피드백을 주면 좋다. 피드백을 받으면 사용자는 웹사이트나 앱이 실제보다 더 빠르게 작동한다고 느낀다.
페이스북 같은 플랫폼에서 흔히 보이는 사례로 콘텐츠를 로딩하는 동안 표시하는 뼈대 화면이 있다. 뼈대 화면이란 콘텐츠가 로딩되는 동안 콘텐츠 영역에 임시로 자리표시자 블록을 표시하는 것을 가리키는 데 이 기법을 쓰면 사이트가 더 빨리 로딩되는 것처럼 보인다. 블록은 실제 텍스트와 이미지가 로딩되면서 차츰 채워진다. 그러면 사용자는 콘텐츠 로딩 속도가 느려도 기다린다는 느낌이 덜해서 속도와 반응성이 실제보다 더 낫다고 인지한다. 게다가 뼈대 화면이 있으면 각 항목의 자리가 미리 확보되므로 로딩 상황에 따라 각 콘텐츠가 갈피를 못 잡고 이리저리 왔다 갔다 하는 현상도 방지된다.
로딩 시간을 최적화하는 ‘블러 업’이라는 기법도 있다. 이미지가 웹이나 네이티브 애플리케이션의 로딩 시간을 지나치게 증가시키는 주범이라는 점에 착안해서 이미지에 집중하는 것이다. 실제 큰 이미지를 표시할 공간에 먼저 아주 작은 크기로 이미지를 로딩한 후 크게 확대해 표시하는 기법이다. 이때, 저해상도 이미지가 커짐에 따라 이미지가 픽셀 단위로 깨지고 노이즈가 생기는 문제는 가우시안 블러를 이용해서 감춘다. 그리고 실제로 표시할 큰 이미지의 로딩이 완료되면 저해상도 버전을 뒤로 감추고 페이드 효과와 함께 실제 이미지를 표시한다. 이 기법은 콘텐츠보다 성능을 우선시해 빠른 로딩을 보장할 뿐아니라, 이미지 영역을 미리 확보해서 고해상도 버전 로딩이 완료되기 전에 페이지 레이아웃이 깨지는 것을 방지한다.
성능은 개발팀만 고민하면 되는 기술적인 문제가 아니라 본질적인 디자인 요소다. 디자이너라면 자신이 디자인한 제품이나 서비스의 사용자가 작업을 최대한 빠르고 효율적으로 완수하도록 도와야 한다. 이러한 목표를 이루려면 사용자에게 적절한 피드백을 제공하고, 체감 성능을 높이고, 진행표시줄을 사용해 기다린다는 느낌을 줄여주는 게 중요하다.
