UX(User Experience)는 사용자 경험을 의미한다.
사용자가 어떤 시스템, 제품, 서비스를 직/간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험이라는 것이 사전적 정의이다. 정보기기나 소프트웨어 화면 등 사람과 접하는 면을 의미하는 UI(또는 구체적으로 GUI)는 시대가 흐르면서 보다 '단순화' 되어 간다. 그 예로 최근 모든 앱, 웹의 화면들이 심플하게 구성된 비슷한 디자인의 모습을 하고 있다는 것을 쉽게 알 수 있다.
그렇기 때문에 UX의 중요성은 더욱 커져 간다.
UX는 디자인 그 자체를 고려하기보다 프로덕트, 기능을 사용할 사용자들의 '행동'과 그로 인한 '감정'에 더 집중하기 때문이다. 결국 UX는 제품을 사용할 사람의 느낌, 태도, 행동을 설계한다는 의미이다. UI는 그 설계에 맞게 화면에 '표현'하는 것으로 UX의 일부라고 생각할 수 있다.
UX에서 심리학이 중요시되는 이유도 여기에 있다.
제품을 사용할 때 처음 사용하는 제품일수록 사용자는 학습에 어려워한다. 그 학습의 어려움이 지속된다면 사용자는 그 제품을 사용하는 것을 포기하고, 이탈할 확률이 높아진다. 이에 사용자들의 심리를 이해하고 UI, GUI를 만들어야 한다.
UX/UI 심리학 법칙에 대해 가장 유명한 책인
'Laws of UX'에서는 사용자의 마음을 읽을 수 있는 심리학 10가지를 설명하고 있다.
이 10가지의 법칙을 보다 쉽게 이해하고 공부하기 위해 '런드리고' 앱을 관찰하며 그 안의 심리학이 적용된 부분을 찾아보았다.
Laundrygo에서 발견한 UI/UX 심리학
2019년 3월에 론칭한 Laundrygo(이하 런드리고)는 비대면 세탁 서비스를 제공하는 모바일 플랫폼이다.
주로 20~30대에서 많이 이용된다는 런드리고는 '구독 서비스'를 도입하여 '월정액 서비스'를 제공하고 있다. 월정액 서비스는 월마다 자동 결제가 되는 시스템으로 세탁물 유형별로 나눠져 있다. 평소 주로 세탁을 하게 되는 세탁물 유형에 맞춰 사용자는 보다 합리적인 가격으로 서비스를 이용할 수 있다는 장점이 있다.
Miller's Law (밀러의 법칙)
밀러의 법칙은 쉽게 말해 '그룹핑'을 하는 것이 좋다는 의미다. 밀러의 법칙에서는 사람이 7개에서 ±2개의 항목까지만 한 번에 기억할 수 있다고 예측한다. 이에 정보를 탐색하는 과정에서 너무 많은 정보를 보여주면 사용자는 혼란스러움을 느끼고 정보를 제대로 인지하기 쉽지 않다.
① 앱 카테고리 그룹핑
런드리고의 비대면 세탁 서비스는 타 서비스들보다 취향(색상, 모양, 장르 등)을 타지 않는다.
얼마나 더 깨끗이 옷감이 상하지 않게 세탁이 되느냐, 그리고 얼마나 신속하고 간편하게 배달을 해주느냐가 관건이기 때문이다. 즉 개인 취향별로 호불호가 정해지기보다 서비스의 '기본에 충실'하느냐가 더 중요하다.
그만큼 런드리고 앱에는 군더더기가 없는 편이다.
비대면 세탁물 서비스를 신청하기 위해 필요한 내용들만 화면에 그룹핑되어 구성되어 있다.
런드리고의 카테고리는 총 '홈', '수거요청', '이용내역', 'MY' 4가지로 이루어져 실제 서비스를 사용하는 순서에 맞게 구성되어 있다. 사용자가 가장 궁금해할 이용금액에 대해 바로 소개하고 있는 '홈'에서 서비스 이용권을 구매하고, '수거요청' 탭에서 세탁물 수거를 요청하면 서비스 이용은 끝이 난다. 서비스 신청 후에 대한 결제정보 등은 '이용내역'과 'MY' 탭을 순서대로 확인해 보면 된다.
흩어져서 복잡해 보일 수 있는 정보를 정돈해 그룹핑하여 사용 순서에 맞게 구성한 카테고리는 런드리고 서비스를 이용을 더 쉽게 만들어주고 있다고 생각한다.
② 결제 단계 주제별 그룹핑
런드리고에서 발견할 수 있었던 또 다른 밀러의 법칙 UI는 '결제 단계'에 있었다.
여기서 '런드리렛'은 세탁이 완료되어 배송될 때 세탁된 옷을 이동용 수거함에 넣어주는 런드리고만의 서비스이다. 런드리고를 한 번쯤 이용해봤거나 런드리렛이 무엇인지 사전에 안다면 크게 문제가 없지만 처음 이용해본 사용자 입장에서는 정보가 많아 결제 창이 다소 복잡하게 느껴질 수 있다.
이에 런드리고는 결제 내용에 필요한 것들을 주제별로 그룹핑하여 한 화면에 2~3개 그룹만 보이도록 하였다.
결제 과정에서 사용자들의 피로도를 줄이고 정보의 기억이 오래 남도록 돕는다고 볼 수 있다.
Tesler's law (테슬러 법칙)
테슬러 법칙은 복잡성 보존의 법칙이라고도 불린다. 모든 시스템에는 더 줄일 수 없는 최소한의 복잡성이 존재한다는 것을 의미한다. 즉, 사용자들의 편의성을 위해 간단하게 만드는 것은 좋지만 너무 불친절하게 만들면 안 된다는 것이다.
런드리고를 이용하기 위해서는 사용자에게 받고 제공할 필수 정보들이 많겠지만,
그중 하나가 '서비스 가능 지역'이다.
런드리고에서는 아직 서비스가 가능하지 않은 지역들이 꽤 많기 때문이다. 그렇기에 이는 사용자들이 정확하고 상세하게 그 내용을 인지하도록 하는 것이 필요하다.
런드리고에서 결제를 하기 위해 맨 처음 사용자가 작성해야 하는 부분이 '주소'이다.
주소 입력을 통해 결제 첫 단계에서 자신이 서비스를 이용할 수 있는지 확인할 수 있다. 만약 배송 가능 지역이 아니라면 왼쪽 이미지처럼 빨간색의 '배송 가능 지역이 아닙니다'라는 메시지로 알려준다. 더불어 '서비스 가능 지역 확인하기' 버튼을 통해 오른쪽 이미지처럼 현재 서비스가 가능한 지역이 어디인지 시각적으로 안내해 주고 있다.
위 과정이 다소 복잡하고 번거롭게 느껴질 수 있지만, 서비스 가능 지역이 어디인지를 상세하고 정확하게 알려주는 것이 중요하기에 위와 같은 상세 정보를 결제 화면에서 맨 처음에 제공하고 있다.
조금 아쉬운 것은 '서비스 가능 지역'을 결제창이 아닌 메인 페이지에서 미리 확인하는 것이 쉽지 않다는 것이다. 결제까지 오기 전에 사용자는 이미 많은 고민과 선택의 과정을 거쳤을 것이다. 그렇기에 서비스 가능 지역이 아니라면 앞에 고민하는데 사용하는 고객의 시간을 제거해 주는 것이 필요하다 보인다.
물론 현재도 메인 화면에 서비스 가능 지역을 확인할 수 있는 버튼이 있지만,
보다 잘 눈에 띄도록 개선이 필요하다 생각한다.
Hick's Law (힉의 법칙)
힉의 법칙은 의사 결정에 걸리는 시간이 선택의 개수와 복잡성에 비례해 늘어난다는 의미다.
즉 선택지가 많을수록 사용자는 결정을 쉽게 내리지 못하는 것을 말한다. 그렇기 때문에 선택지를 제시할 때는 최소한의 정보를 제공해 사용자의 빠른 결정을 유도하는 것이 좋다.
런드리고를 살펴보면 서비스 이용권 종류가 다양하다.
그런데 런드리고는 서비스 이용권 선택 과정에서 모든 종류를 나열해 보여주지 않는다. 단계별로 나눠 한번에 보여주는 선택의 가짓수를 줄이고, 선택 과정의 복잡성을 최소화하여 사용자들의 빠른 의사결정을 돕는다.
먼저 사용자들의 선택을 돕기 위해 맨 처음 홈 화면에 제시되는 이용권의 종류는 '월정액'과 '자유이용' 2가지뿐이다. 월정액은 구독 서비스처럼 매월 결제를 하고 빨래를 맡기는 것이라면, 자유이용은 자유롭게 필요할 때만 사용할 수 있는 서비스 이용권이다.
이 둘 중 하나를 선택하면 그다음 서비스 종류들이 나열된다.
'월정액'을 선택하면 그 아래에 6개의 옵션(좌측 이미지)이 나열된다. 이 중에 내가 원하는 옵션 하나를 선택하면 또 다른 3개의 옵션이 사용자에게 제공된다. 여기까지 하면 '서비스 신청'을 통한 결제가 이루어진다.
만약 이렇게 구조화하여 순차적으로 정보를 제공하지 않았다면 복잡한 정보들 속에서 사용자는 결정을 포기하고 이탈할 수도 있다. 그러나 '힉의 법칙' 심리학을 적절히 잘 이용하여 런드리고 서비스를 선택하고 이용하는데 불편함을 줄여주고 있다고 본다.
Fitts' Law (피츠의 법칙)
피츠의 법칙이란 대사에 도달하는 시간은 거리가 가까울수록, 크기가 클수록 빨라진다는 의미다.
목표물을 충분히 크게 만들어 주고 목표물들 간의 사이의 간격을 충분히 주어 오류를 최소화하는 것을 말한다. 여기서 '목표물'은 화면 상의 버튼 UI(또는 GUI)라고 말할 수 있다.
런드리고의 앱 메인 화면에서 가장 강조하고 있는 부분은 '서비스 이용권 소개' 부분이다.
다른 내용 없이 첫 화면부터 런드리고 이용금액이 어떻게 되고 있는지 제시하고 있기 때문이다.
그런데 이를 제시하는 방법도 런드리고만의 색깔이 잘 드러나게 '피츠의 법칙' 심리학을 매우 잘 사용했다고 생각한다.
가장 눈에 띄는 것은 큰 네모 박스이다.
서비스 이용권 종류별로 큰 네모 박스로 구분 지어 사용자가 클릭할 수 있는 면적이 매우 넓다.
'피츠의 법칙'에 따르면 '버튼'은 크게 만들수록 클릭할 때 실수를 유발하지 않아 사용자의 불편함을 줄여줄 수 있다.
더불어 큼지막한 네모 박스들은 서비스 종류들을 명확하게 구분 지어 주어 각 정보 간의 경계선을 분명한다는 점도 사용자의 클릭 오류를 최소화하는 방법이라 본다.
Von Restorff Effect(폰 레스토프 효과)
폰 레스토프 효과는 최대한 눈에 띄게 하는 것이 더 잘 기억되는 현상을 의미함으로써 중요한 정보나 핵심 동작을 강조할 때 사용된다. 여기서 주의해야 할 점은 강조하고 싶은 것을 최대한 강조하되, 의도가 뻔히 보이게 하면 안된다는 것이다. 예를들어 광고를 강조할 때는 광고라는 것을 너무 드러냈을 때 오히려 역효과를 불러일으킬 수 있다.
런드리고에서는 자신의 메인 컬러인 형광색을 통해 '폰 레스토프 효과'를 주었다.
한 예로 위 이미지는 서비스 이용권을 구매한 후 세탁물 수거를 요청할 때 이용되는 화면이다.
해당 화면에서는 다른 기능은 필요하지 않고 결국 위 버튼 하나만 클릭하면 된다.
이에 화면 버튼 클릭을 '형광색'으로 표시함으로써 사용자들이 이용 방법에 헷갈리지 않도록 도와주고 있다.
Aesthetic-Usability-Effect(심미적 사용성 효과)
심미적 사용성 효과는 '보기 좋은 떡이 먹기도 좋다'라는 의미다. 사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다. 또한 심미적인 디자인을 그렇지 않은 디자인보다 더 사용하기 쉽다고 받아들이는 경향이 있다고 한다.
전반적으로 런드리고는 심플하고 깨끗한 이미지들을 활용하며 디자인에 통일성을 잘 주고 있다.
그런데 하나 특이한 점은 '일러스트 화면'이 그 안에 존재한다는 것이다.
위 이미지는 런드리고 앱 '수거요청' 탭의 전체 화면이다.
현재는 가장 오른쪽 이미지로 보이지만, 이는 계절이나 특별한 이벤트 등을 고려해 일러스트가 주기적으로 변화하고 있다. 공통점은 일상의 풍경을 담고 있다는 점에서 아마 사용자들에게 '친근감'을 선사하기 위함이 아니었을까 싶다. 빨래라는 것이 '일상' 속에 이루어지는 생활이다 보니, 친근하고 따뜻한 느낌의 일상을 그려낸 일러스트로 심미적인 것에 더 관대한 사용자의 심리를 활용하고자 한 것 같다.
참고로 아래는 실제 런드리고가 일러스트가 바뀔 때 안내했던 문구다.
"오늘 런드리고 앱 수거요청 페이지의 일러스트가 바뀌었네요. 초록의 배경색과 그 안에서 함께하는 사람들의 모습이 왠지 마음에 안정감을 줍니다. 런드리고에서는 빨래 없는 생활을 통해 누릴 수 있는 다양한 일상을 제안해드리고 있어요. 빨래는 런드리고에 맡기고 소중한 사람들과 행복하고 의미 있는 시간을 보냈으면 좋겠습니다."
출처 : Watch_런드리고 페이지
서비스 이용권을 선택하는 과정에서 느끼는
복잡함을 줄여주고자 했던 'Laundrygo'
위에서 발견한 런드리고 UX/UI 속 심리학들을 전반적으로 살펴보면,
런드리고는 사용자가 가장 중요한 작업에만 집중할 수 있는 환경을 제공하고자 했던 것 같다.
비대면 세탁 서비스는 앞서 말한 것처럼 어떤 취향의 문제로 선택되지 않는다.
이에 세탁 서비스를 이용하려는 사용자는 더 명확하고 쉽게 정보를 파악하고 빠르게 자신의 목적(빨래를 맡기는 것)을 달성하고 싶어 할 것이다.
그래서 아마 런드리고는 최대한 간결하게 사용자가 이루고자 하는 목적을 달성시키는데 최선을 다한 것 같다.
즉 낯설 수 있는 정보들과 다양한 선택 안들을 간소화함으로써 사용자가 과부하 걸리지 않도록 하는 것이
런드리고 UX/UI의 핵심이었다고 생각한다.
※ 참고 출처
- PXD Story, UI 가벼운 이야기, 이재용
- DesignCompass, UX디자인
- designhouse M+, 모바일 앱으로 이루어낸 세탁 혁신, 이기태 기자
- 티스트리, '디자인 불변의 법칙 125가지', 캐누리 캐누리