내 폰의 유일한 송금앱, 토스
[코드스테이츠 PMB 10기] 토스의 UX 심리학
간결함의 미학,
TOSS
1. 송금할 때는, 토스 밖에 없지!
나를 사로잡은 토스의 UX 디자인
토스를 사용하다보면 어떻게 이렇게 간결하고도 깔끔한 디자인으로 내가 원하는 욕구를 충족시킬 수 있었을까? 하고 매번 감탄하고는 한다. 그래서 이번 포스팅에서는 오늘의 학습 자료였던 존 야블론스키의 저서, <Laws of UX> 를 기반으로 토스의 UX가 어떤 원칙으로 설계되었는 지를 분석해볼 예정이다.
2. 토스에는 어떤 UX 심리학이 담겼을까?
밀러의 법칙 Miller's Law
콘텐츠의 개수는 7개 내외가 적당해요
사람들은 보통 정보를 받아들일 때 7개 내외로 제한된다고 한다. 그러므로 사람들이 정보를 잘 받아들일 수 있도록 콘텐츠는 작은 청크로 구성되어야 한다. 토스는 이러한 밀러의 법칙을 대부분의 화면에서 반영하고 있다.
홈 화면에서는 토스뱅크 / 자산 / 소비 단위로 정보를 덩어리화하여 사용자들이 쉽게 정보를 인식할 수 있도록 도와준다.
혜택 화면이나 전체화면에서는 전체적으로 음영을 통해서 청크화시키지는 않았지만, 글씨의 볼드체 또는 파란색으로 포인트를 주어 정보를 한눈에 볼 수 있도록 도와주고 있다.
피츠의 법칙 Fitts' Law
엄지손가락이 닿기 쉽게 해주셨나요?
사람들은 대부분 한 손으로 스마트폰을 이용한다. 그리고 화면을 클릭하거나 스크롤을 내릴 때 사용하는 손가락은 주로 엄지손가락이다. 그러므로 UX에서 가장 중요한 CTA (Call to Action), 사용자가 어떠한 행동을 수행할 수 있도록 하는 버튼은 엄지손가락이 닿는 부분에 위치해야 한다.
그리고 해당 부분을 Thumbs Zone 이라 한다.
Hard : 엄지손가락이 닿기 어려운 위치
Stretching : 엄지손가락이 닿기는 하지만 불편한 위치
Natural : 엄지손가락이 닿기에 편리한 위치
그렇다면 Thumbs Zone을 위주로 토스가 어떤 형식으로 UI를 구성해놓았는지 알아보자.
위의 사진과 같이 CTA 버튼은 주로 가장 하단에 위치되어 있었고,클릭이 필요한 것이라면 대부분 natural 영역에 위치된 것을 볼 수 있었다. 이러한 디자인을 통해, 고객들은 버튼을 누르기 위해 손가락을 뻗지 않아도 되고, 좀 더 빠르게 반응할 수 있게 되었다.
힉의 법칙 Hick's Law
너무 많은 선택지는 복잡해요
한번 점심 메뉴를 고른다고 생각해보자.
상대방이 '일식 먹을래? 아니면 한식 먹을래?' 라고 했을 때 대답하기 쉬울까, 아니면 '뭐 먹을래?' 라는 대답에 더 대답을 하기 쉬울까?
아마 대부분의 사람들은 전자의 상황에서 훨씬 대답하기 쉽다고 할 것이다.이처럼 선택지의 개수가 많아질 수록 사람들의 의사결정에 걸리는 시간은 늘어난다.
토스 역시 해당 법칙에 대해 인지를 하고 있었는지, 무언가를 '추천'할 때에는 개개인의 소비패턴에 맞춰 몇가지만 보여준다.
이처럼 전략적인 추천패턴은 소비자가 의사결정을 하는데 필요한 시간을 줄이고, 좀 더 빠르게 결정을 하도록 도움을 주었다.
폰 레스토프 효과 Von Rerstorff Effect
강조된 게 눈에 더 잘보여요
토스를 사용하다보면, 고객이 하길 바라는 행동을 유독 강조하여 표시하고 있는 것을 알 수 있다.
위의 사진처럼 무언가를 개설할 때, 클릭해야 하는 버튼을 파란색으로 표시하여 UI 화면을 볼 때 가장 먼저 눈에 띄도록 만들었다. 또한, 알림에서 고객이 아직 확인하지 않은 알림일 경우 파란색 바탕으로 표시하여 수많은 알림 중 확인 하지 않은 한 가지에 집중할 수 있도록 만들었다.
이처럼 강조된 버튼, 또는 바탕으로 효시하면 고객들은 토스가 의도한 바대로 집중하고 클릭하도록 유도할 수 있다.
도허티 임계
0.4초 이내에 안 나타나면 지루하다고요!
휴대폰을 쓰다가, 아니면 컴퓨터를 쓰다 화면이 나오지 않아서 짜증이 났던 경험이 있는가?
나는 사실 그 경험이 아주 많다. (정말 성질 급한 한국인..) 흰 바탕이 계속 뜨거나 뭔가 작동한다는 느낌이 들지 않으면 새로고침을 하는 경우가 허다하고, 빠르게 반응하지 않으면 '에잇, 그냥 안하고 말지' 하면서 포기하는 경우도 많다.
하지만 만약 불러올 정보가 많은 경우나 기술적 문제로 어쩔 수 없이 일정 시간을 기다려야 하는 경우는 어떻게 해야 할까?
토스는 이 부분을 아주 깔끔하게 해결해놓았다.
바로, 스켈레톤 UI와 로딩 애니메이션이다.
스켈레톤 UI는 사이트의 틀을 먼저 로드해줌으로써 사용자가 어떤 식으로 반응해야 할 지 유추할 수 있게 해주고, 로딩 애니메이션은 움직이는 모양새에 눈이 뺏겨 지루함을 좀 덜어줄 수 있었다.
특히, 대출 심사 로딩 애니메이션의 경우 진행이 거의 다달았을 때 '심사가 완료되면 알림을 보내드릴게요 (1분 이내)' 라는 알림으로 바뀌어 '1분 정도야 뭐, 기다리지.' 하는 마음 또한 가질 수 있게 하였다.
그리고 친절한 안내문구 덕분에 예상했던 시간보다 조금 더 빠르게 일처리가 된 듯한 느낌 역시 줄 수 있었다.
심미적 사용성 효과 Aesthetic-Usability Effect
보기 좋은 떡은 먹기도 좋은 법이죠!
예쁘고 귀여운 걸 보면 왠지 기분이 좋아진 적 있지 않은가?
이러한 효과가 나타나는 이유는 보기 좋은 디자인이 인간의 뇌에 긍정적인 반응을 일으키기 때문이다. 그래서 사람들은 보기 좋은 인터페이스를 접했을 때도, 사용성이 좋다고 느끼게 된다.
토스는 이러한 효과를 인지했는지, 많은 부분에서 귀여운 애니메이션 또는 아이콘을 삽입시켰다.
특히, 토스뱅크의 카드 선택에서 심미적 사용성 효과가 많이 반영되었다고 느꼈다.
왜냐하면 색을 선택했을 때 사용자가 직접 만져서 앞뒷면의 색상을 볼 수 있으면서도 밑의 '레몬블루가 좋겠어요' 의 색상 역시 사용자가 움직이는 것에 따라 색상이 바뀌었기 때문이다. 이 효과는 사용자가 인터페이스와 인터렉션하고 있다고도 느낄 수 있지 않을까? 하고 생각되는 요소였다.
3. 토스 UX를 분석해보니..
이번에는 토스에 관하여 UI를 분석해보았다. 왜냐하면 이제껏 사용한 서비스들 중 가장 학습한 내용에 맞춰 만들어진 프로덕트 같았기 때문이다. (UI가 간결하면서도 강조할 때에는 확실히 강조한 스타일이..)
하지만 분석을 하면서 생각이 난 점은, 게임에도 마찬가지의 효과가 있지 않을까? 하는 점이었다. 롤이나 쿠키런 킹덤에는 특히 도허티 임계 효과가 두드러지게 나타나는 듯 했는데 로딩할 때나 게임을 수락할 때 지속적으로 움직이는 애니메이션이 존재했기 때문이다.
만약 게임 UI를 분석했으면 어떤 글이 나왔을까, 엄청 궁금해졌다..! 그래서 이후에 시간이 된다면 아예 게임 UI들만으로 이제껏 배웠던 내용들을 분석해보고 싶은 생각이 들었다.
종종 글이 안 써질 때는 너무 스트레스 받지만, 이렇게 생각이 날 때마다 엄청! 재미있다!
