제품의 '좋은 디자인'이란, 단순히 심미적으로 아름답기만 한게 아니다. 좋은 디자인이란, 해당 서비스를 통해 사용자에게 '좋은 경험'을 제공하는 것이다. 어떻게 사용자에게 좋은 경험을 제공할 수 있는지 알기위해서는 먼저, '사용자'를 알아야 한다. 그리고 오늘 배운 'UX/UI의 심리학 법칙'은 서비스를 이용하는 사용자가 제품을 통해 느끼는 생각이나 감정을 연구한 결과다. 이를 통해 사용자에게 좋은 경험을 제공하는 제품을 만드는 데 한발짝 다가설 수 있다. 따라서 이번 글에서는 UX/UI의 심리학 법칙 중 8가지를 대입해 앱 서비스를 분석해보려고 한다. 그리고 그 주인공은 국내에서 좋은 UX 디자인으로 유명한 금융 앱 서비스, <토스>다.
💡 본문에 사용할 8가지 UX/UI의 심리학 법칙 (참고)
1. 제이콥의 법칙
2. 피츠의 법칙
3. 힉의 법칙
4. 밀러의 법칙
5. 심미적 사용성 효과
6. 폰 레스토프 효과
7. 테슬러 효과
8. 도허티 임계
1. 제이콥의 법칙: 최상단 아이콘
[제이콥의 법칙] 새로운 디자인은, 새로 익혀야 한다. 그리고 새롭게 익히는 과정은 사용자에게 피로감을 줄 수 있다. 따라서 사용자에게 익숙한 디자인을 보여줘, 정보를 쉽게 받아들일 수 있도록 돕는다.
위 사진은 토스의 최상단에 자리하고 있는 아이콘이다. 각각 '회사 로고', '사각 프레임 안의 QR', '말풍선', '종모양'의 아이콘은 설명이 적혀있지 않다. 하지만 사용자는 그간의 경험을 통해 힌트를 얻을 수 있다. QR은 카메라를 통해 QR코드를 읽을 수 있는 기능, 말풍선은 채팅, 종모양은 새로운 알림이나 소식을 표시한다.
2. 피츠의 법칙: 버튼(송금, 아래로 스크롤하기)의 위치, 스와이프
[피츠의 법칙] 사용자가 무언가를 실행하기 위해 특정 대상을 클릭 할 때는 대상의 크기와 거리가 중요하다. 예를들어, 터치할 수 있는 영역이 너무 작으면 사용자는 기능을 실행하는데 불편함을 느낀다. 또, 한가지 기능을 실행한 뒤 연속으로 사용되는 기능이 너무 멀리 있다면 사용자는 불편함을 느낄 것이다.
왼쪽 사진은 토스를 실행시켰을 때 보이는 첫 화면이다. (금액이 보이는 위치는 모두 가렸다.) 사용자가 토스를 사용하면서 가장 많이 사용하는 기능은 아무래도 '송금'이다. 가장 많이 쓰는 기능을 오른손으로 휴대폰을 들었을 때, 엄지와 가장 가까울 수 있는 자리에 위치했다. 그리고, 각기 다른 통장의 송금 버튼과 헷갈리지 않을만큼 적당한 거리를 두었다.
오른쪽 사진은 사용자가 사용하는 타사 포인트나 페이를 토스에 등록할 때 동의해야하는 약관이다. 토스는 이 약관문서의 하단에 '아래로 스크롤하기' 버튼을 비치했다. 이를 클릭해서 문서의 끝에 도달하면, 같은 위치에 '동의하고 계속'으로 버튼의 문구가 바뀐다. 사용자는 굳이 스크롤하기 위해 손가락을 움직이고, 다시 하단으로 옮겨 버튼을 눌러야하는 낭비 없이 한 곳에만 머물러 프로세스를 진행할 수 있다.
여기서 궁금해지는 건, "스와이프 기능도 피츠의 법칙을 적용했다고 볼 수 있는가?"이다. 이제는 버튼의 크기와 위치를 신경쓰지 않아도 되는 기능이 있다. 클릭하지 않아도 화면의 특정 부분을 손으로 쓸어넘기면, 실제로 숨겨져있던 화면이 끌려오는 것처럼 다음 메뉴로 넘어갈 수 있다. 위키백과에 따르면, 피츠의 법칙(Fitts' Law)은 '인간-컴퓨터 상호작용과 인간공학 분야에서 인간의 행동에 대해 속도와 정확성의 관계를 설명하는 기본적인 법칙'이다. 버튼이 너무 작으면 사용자는 이를 클릭하기 어려워지고, 생산성이 떨어진다. 이렇게 봤을 때 스와이프 기능도 피츠의 법칙과 같은 문제를 해결하고 있으니, 같은 카테고리로 볼 수 있을 것 같다.
3. 힉의 법칙: 카드 생성시 옵션 선택 최소화
[힉의 법칙] 사용자에게 주어진 선택지가 많을수록, 복잡할수록 의사결정에 걸리는 시간은 비례해서 늘어난다. 이를 해결하는 방법으로 추천 서비스를 예시로 들 수 있다.
아쉽게도 해당 내용은 이미 예전해 진행했던 과정이라 캡쳐 할 수가 없었다. 글로 설명하자면, 원래는 카드를 생성하기 위해서 거쳐야 하는 과정이 너무 길다. 이때 너무 많은 선택지로 고민하느라 시간을 빼앗기고, 사용자들이 중간에 이탈할 가능성이 높아진다. 토스는 이를 최소화했다. 국내 전용 카드와 해외 겸용 카드(Visa 및 Mastercard)의 가격 차이가 없으면 해외 겸용 카드로 자동 선택되는 등 사용자 입장에서 손해가 없을 선택은 토스가 한다. 사용자는 카드의 색상과 부여할 혜택 그리고 카드를 발급받을 장소 등 꼭 필요한 정보만 입력하게 된다. 사용자는 원하는 결과에 더 빨리 도달할 수 있게되고, 이는 토스의 수익에도 연관된다.
4. 밀러의 법칙: 화면 구분
[밀러의 법칙] 평균적으로 사람들은 7(±2)개의 항목만 기억할 수 있다. 한 페이지에 너무 많은 정보를 그저 나열하면 안된다. 사용자가 더 쉽게 기억하고, 이해할 수 있도록 항목을 나눠서 정리하자.
토스는 모든 메뉴와 카테고리를 그룹핑(grouping) 해놓았다. 이를 통해 사용자는 토스가 제공하는 다양한 기능을 쉽게 구분하고, 필요한 기능의 위치를 자연스럽게 기억할 수 있다.
5. 심미적 사용성 효과: 자체 제작 폰트와 이모지
[심미적 사용성 효과] 보기 좋은 떡이 먹기도 좋다. 사용자는 보기 좋은 디자인을 가진 제품을 사용성이 뛰어난 제품으로 인식하는 경향이 있다.
토스는 그들만의 폰트와 이모지를 제작했다. 금융 서비스 특성상 숫자와 기호, 문자를 같이 사용하는 경우가 많다. 기존 폰트는 이런 상황에 좋은 가독성을 갖지 못한다고 판단해, '산돌'과 함께 전용 서체를 제작했다고 한다.
"프로덕트 산스를 만들면서 세가지에 집중했습니다. 균형, 맥락, 그리고 형태예요." (출처)
그들은 글 자간, 굵기, 둥근 정도 등 다양한 요소를 고려해 그들만의 폰트를 제작함으로써 디지털 환경의 가독성을 높였다.
또, 토스는 자체적으로 이모지를 제작해 무료로 배포했다.
"토스페이스는 3,600개의 이모지로 만들어진 폰트예요. 이모지는 누구나 이해하는 시각 언어이기에,
모두가 더 쉽게 소통하는 세상을 꿈꾸며 제작했어요."(출처)
이런 노력으로, 사용자는 다양한 정보가 적혀있는 토스 인터페이스를 마주해도 디자인적으로 통일되었다고 느낄 수 있다. 통일감은 디자인이 깔끔하다라는 인상을 주고, 보기 좋은 디자인은 결국 사용성이 뛰어난 제품이라고 인식된다.
6. 폰 레스토프 효과: 그래프 색상 구분
[폰 레스토프 효과] 유사한 물체가 여러개 존재할 때, 사용자는 그 중 가장 다른 것 한가지만 기억할 가능성이 크다. 따라서 중요한 정보를 시각적으로 구분하는 것이 좋다.
왼쪽 사진은 얼만큼의 소비가 이뤄졌는지 나타내는 그래프다. (보이는 금액은 전부 가렸다.) 앞서 다른 그래프와 달리, 내가 선택한 달은 눈에 띄는 파란 색으로 구분짓는다. 오른쪽 사진은 토스 앱 내 하단에 생성되는 팝업 창이다. '자세히 보기' 버튼을 눈에 띄는 색상으로 구분지어, 사용자가 앱에 재방문할 수 있는 기능(알림)을 사용하도록 유도한다.
이와 같이 사용자가 인지해야할 새로운 소식 및 정보가 있을 경우, 눈에 띄는 붉은 점으로 이를 알리는 방법도 있다.
7. 테슬러 효과: 중복으로 입력하는 개인정보 최소화
[테슬러 효과] 모든 시스템에는 더이상 줄지 않는 특정한 양의 복잡함이 있다. 이 복잡함을 사용자가 가져갈지, 서비스 제공자가 가져갈지 선택해야한다. 여기서 말하는 '복잡함'이란, 어떤 절차나 많은 양의 정보 등에서 온다.
위 사진은 토스의 공식 유튜브에 올라와 있는 토스 디자인컨퍼런스 영상 중 한 부분을 캡쳐한 것이다. 보통, 온라인에서 은행업무를 보기 위해서 사용자는 많은 정보를 입력하고, 동의하고, 선택해야한다. 토스는 이 과정에서 오는 불편함을 줄이기 위해 노력했다. 하나의 예시를 들면, 사용자가 토스 서비스에 주소를 한번이라도 기입했다면, 해당 정보는 토스 서버에 저장되어있고 이를 사용자가 직접 입력하지 않아도 불러올 수 있도록 한 것이다. 토스는 사용자마다 해당 정보가 다른 것을 예상하고, 각자 상황에 맞는 화면이 보이도록 한 과정에 다양한 인터페이스를 제작했다. 이에 따라 사용자는 꼭 필요한 정보만 입력해, 절차의 불편함을 훨씬 적게 느낄 수 있다.
8. 도허티 임계: 로딩 중 애니메이션
[도허티 임계] 사용자가 시스템에 요청하고 응답받는 시간이 0.4초 이하로 떨어진다면 생산성은 급격하게 높아진다. 하지만 반대로 0.4초를 넘긴다면 서비스에 대한 사용자의 주목도가 떨어지고 이탈률이 높아진다. 따라서 로딩시간 발생시, 정확성과 상관없이 진행률을 표시하거나 처리되는 동안 애니메이션 효과를 넣어주는 것도 이탈을 방지하는 좋은 방법이다.
위 사진은 토스에 포인트 및 페이를 연동시키는 짧은 대기시간에 나오는 화면이다. 캡쳐본이라 사진이 다소 어색하게 나왔지만, 정사각형의 둥근 네모와 가로로 긴 직사각형이 생겨남과 사라짐을 반복해 '데이터를 불러오는 중'임을 알린다. 사용자는 이러한 기능을 통해 무엇때문에 시간이 오래걸리는지 알고, 서비스가 정지한 것이 아님을 인지할 수 있어 기다릴 수 있는 여유를 갖는다.
해당 글에 작성하지 않았지만 UX/UI의 심리학 법칙에는 다음과 같은 법칙도 있다.
[포스텔의 법칙] 서비스 제공자는 기능을 보수적이고 촘촘하게 개발하고, 사용자는 서비스를 유연하게 이용할 수 있어야 한다. 기계는 하나를 입력받으면 그 한가지만 수행한다. 하지만 그런 기계를 사용하는 인간은 다양한 상황 속에서 다양한 요구를 한다. 서비스 제공자는 이런 다양한 변수를 예측하고, 대응해야한다.
[피크엔드의 법칙] 사용자는 서비스를 이용한 경험을 가장 강렬한 순간과 마지막에 느낀 감정으로 판단하는 경향이 있다. 따라서 해당 상황에 부정적인 인상을 주지 않도록 노력해야한다.
아직 한참 부족하지만! 특정 규칙에 대입해 토스의 기능을 찾아보는 게 나한테는 굉장히 좋은 경험이 되었다. 앞에서도 언급했지만 토스는, 사용자들이 금융을 '쉽고 간편하게' 다룰 수 있는 서비스를 제공한다. '편리한 사용성'이 이들의 경쟁력이 되는 것이다. 토스가 앞으로 더 나아가기 위해서는 계속해서 이를 개발할 것이다. 그리고 '사람들의 삶을 윤택하게 만드는 프로덕트를 만들고 싶은' 나는, 이를 주목할 필요가 있다.
'📂 케이스 수집하기 > 프로덕트 수집' 카테고리의 다른 글
| <비욘드> 랜딩페이지는 어떻게 구성되어있을까 (0) | 2022.06.10 |
|---|---|
| <배달의 민족> 배민1과 배달 카테고리를 합해보자: 페이퍼 프로토타입편 (0) | 2022.06.03 |
| 배고플 때 찾는 <배달의 민족> (0) | 2022.05.30 |
| 아이들 돌봄∙배움 앱 <자란다> 비즈니스 모델 캔버스 작성해보기 (1) | 2022.05.23 |
| <챌린저스>는 '갓생' 살기를 도와줄 수 있을까? (0) | 2022.05.21 |