'토스'로 살펴본 UX/UI 10가지 심리학 법칙 ①
토스에서 발견한 디자이너의 배려심
토스는 어디에 어떤 가치를 두고 디자인할까?
토스의 디자인 컨퍼런스를 보면서 많은 것을 배웠고 때로 좋은 사수가 되어주기도 했어요. 디자이너에게 좋은 근거가 되어주는 10가지 심리학 법칙을 토스 안에서 발견했습니다. 이 10가지 심리학 법칙은 디자이너에게 서비스를 더 책임감 있게, 더 좋은 의도로 디자인할 수 있도록 도와주고 있었죠.
1장 | 제이콥의 법칙
여러분의 서비스도 자신이 이미 알고 있는 다른 서비스들과 비슷한 방식으로 작동하길 원한다.
토스/카카오페이/네이버페이/알다사용자가 익숙한 방식을 더 잘 사용하는 이유는 기존의 서비스를 이용한 경험을 활용하기 때문인데, 핀테크 서비스의 홈 화면에서 공통의 특징들을 찾아볼 수 있었어요.
기능별로 그룹 지어 묶은 카드 형식의 UI, 아이콘 이용하여 표현한 기능들, 카드가 잘 보이기 위해 조금 낮은 톤의 bg.
홈 화면은 서비스의 첫 화면인 만큼 사용자가 쉽게 인지하고 사용할 수 있도록 비슷하게 구성됐어요.
비슷하게 표현한 이유는 다른 서비스에서 이용했던 방식대로 사용하곤 하는 사용자를 배려하는 것도 있었겠지만, 복잡하고 어려운 금융 기능을 덩어리 지어 쉽게 인지하기 위함(밀러의 법칙)이지도 않았을까요.
2장 | 피츠의 법칙
터치는 크기가 클수록, 쉽게 도달할 수 있는 거리일수록 빨라진다.
크기가 클수록 쉽게 도달할 수 있는 거리일수록 터치가 빨라지는 건 당연하다고 생각되는데요. 토스에서 당연한 특징 외에도 어떤 방법으로 터치를 빠르게 유도하는지 찾아봤어요.
주로 arrow(화살표)를 이용하고 있었어요. arrow가 있으면 더 clickable하기 때문인 것 같았어요. 더 강력한 터치를 유도하고 싶을 때는 arrow와 함께 '~하기' 텍스트 버튼을 컬러로 강조하며 추가했어요.
세 번째 이미지는 우리가 자주 접하는 강력한 CTA 버튼이 있는 화면이에요. 도달해야 하는 목표가 강한 CTA 버튼으로 컬러와 크기로 강조하고 있는 모습이죠.
Thumb zone/크기/거리도 중요하지만 어떻게 누르고 싶도록 유도하는지가 더 중요하다고 생각되는 법칙이었어요.
3장 | 힉의 법칙
의사결정에 걸리는 시간은 선택지의 개수와 복잡성에 비례해 늘어난다.
위 화면들은 토스에서 대출을 받기 위해 겪는 플로우에요. 직업을 물어보고 그 다음 직장 이름을 물어보고 그 후 입사한 날과 연소득까지.
이 정보들을 한꺼번에 물어본다면 어땠을까요? 사용자에겐 인지부하가 오지 않았을까요. 그렇기에 단계별로 받아야 하는 정보를 쪼개서 보여주고 있어요. 입력해야 하는 정보를 한 화면에 한 개씩 물어보면서.
무엇을 입력해야 할지 덜 고민할 수 있다면, 단계를 완료할 확률은 더 높아질 거라고 말하는 법칙이죠.
(4번째 이미지) 의료보험과 주거 형태 그리고 자동차 보유에서는 선택지를 먼저 제공하고 사용자가 선택하는 방식으로 부담을 줄이고 있었어요.
4장 | 밀러의 법칙
사람은 7개의 항목 정도 인식한다.
많은 혜택을 나열하고 있지만, 그 정보가 많아보이지 않고 어떤 혜택을 받을 수 있는지 명확히 보여요.
소비 내역 또한 그렇게 보이는데요. 소비한 내역을 토대로 카테고리를 나눠 적절히 덩어리(그룹화)로 묶어 정확히 표현하고, 그래프까지 더해 이해하기 쉽게 담아낸 화면이에요.
정보를 덩어리로 구성하면 쓱 훑어보고 필요한 정보를 선택해 사용자의 목표를 더 빠르게 이루도록 도와주죠.
뚜렷이 구분하고 명확하게 체계화하면 사용자는 정보를 쉽게 얻을 수 있어요.
5장 | 포스텔의 법칙
사용자의 행동을 유연하고 관대하게 대처하라.
사용자는 실수하기도 하고, 실패를 마주하기도 하죠. 그럴때 건네야 하는 말은 무엇일까요?
실수가 왜 일어났는지, 어떻게 해결하면 되는지 알려주면 된다고 생각해요. 어떤 행동을 하던 간에 공감하는 태도로 말이죠. 다양한 가능성에 대해 잘 예측하고 대비할 수록 디자인 회복 탄력성은 좋아져요.
토스는 에러메시지 6가지 원칙을 만들었어요.
1. 최고의 에러는 발생하지 않는 것
2. 적절한 컴포넌트 쓰기
3. 스스로 해결할 수 있는 방법 알려주기
4. 사용자 입장에서 이해할 수 있는 언어로 쓰기
5. 쉽게 해결할 수 있게 도와주기
6. 부정적인 감정 최소화하기
※ 6-10장의 법칙은 https://brunch.co.kr/@20373cd4029441d/6 여기서 볼 수 있어요 :)
