[주니어 기획자들을 위한 실전서] 토스에서 찾아본 10가지 UX 법칙
코멘트UX/UI 심리학 법칙은 유명한 책이긴 한데요. 해당 책에서 소개된 이론에 따라 토스 앱을 리뷰한 것이 재밌었습니다. 다만 대부분 좋은 점을 위주로 리뷰돼 있어서(물론 토스 앱의 UX는 훌륭하다고 생각합니다) 더 보충되면 좋을 점이 추가됐더라면 어떨까 싶어요. 저희 서비스도 아래 법칙들에 따라 리뷰해봐도 재밌겠다고 생각했습니다.
요약<UX/UI의 10가지 심리학 법칙>에서 소개하는 10가지 UX법칙에 따라 토스를 뜯어본 아티클.
제이콥의 법칙: 사용자는 본인이 오래 사용하면서 축적된 경험을 토대로 새로운 프로덕트를 판단하는 경향이 있다. 멘탈 모델: 시스템/사물이 실제로 어떠한 방식으로 작동할 것이라고 생각하는 인간의 사고 과정 구조화한 것. 토스의 메인 화면은 타 금융앱과 다르지 않은 디자인이며, 익숙한 인터페이스와 사용성을 제공함 → 다양한 금융앱을 써온 사용자가 토스 사용하더라도 이질감이 느껴지지 않도록 함 피츠의 법칙: 목표물에 도달하는 데 걸리는 시간은 목표물의 거리와 크기에 따라 달라짐 터치할 수 있는 영역 간의 거리는 적당해야 함 → Apple의 Human Interface Guidelines에서는 각 개체간 거리는 8DP이상 떨어지는 것이 적당 각 개체의 크기와 흐름을 고려해야 함 → 손가락 지문의 면 평균 면적(10~14mm)를 고려 여러 객체 간 리스트를 나열할 때는 Horizontal보단 Vertical로 힉의 법칙: 선택지가 너무 많으면 인지 부하가 증가함 다단 형태로 구분을 두어 하나의 단면에는 하나의 목적을 가진 성격을 가진 객체끼리 그룹핑(예: 쇼핑할인 BEST와 3개의 카드 추천 인터페이스)하여 보여주는 형태로 제공 → 사용자의 인지 부하 덜고 빠르게 목적을 달성할 수 있도록 도움 밀러의 법칙: 보통 사람은 작업 기억에 7(+-2)개의 항목 밖에 저장하지 못함 레이블에 너무 많은 객체를 두면 우리는 어떤 레이블에 어떤 객체가 있었는지 금세 잊어버린다. 토스는 하나의 레이블에 적당한 객체 수와 확실한 경계선을 두어 덩어리화한 케이스라고 볼 수 있다. 포스텔의 법칙: 유저는 채워 넣어야 할 정보의 양이 많아질수록 인지부하가 증가함 토스는 서비스 초기부터 1 thing / 1 page 철학을 서비스 곳곳에 잘 녹여내 왔다. 놀랍도록 쉽고 간편한 회원가입 프로세스에도 ‘포스텔의 법칙’이 숨어있다. 피크엔드의 법칙: 사용자 경험은 평균이나 합계가 아니라 절정의 순간이나 마지막 순간에 느낀 감정을 바탕으로 판단된다 앱 사용자 경험도 마찬가지다. 우리가 앱을 사용하면서 중요한 순간, 특히 ‘실패했던 경험’은 더 오래 기억하려는 경향이 있다. 토스는 실패 순간도 최대한 부드럽게 표현하려는 세심한 노력을 곳곳에서 찾을 수 있다. 귀여운 애니메이션을 보여준다던가, 토스 특유의 친근한 비격식체 문구를 보여줌으로써 작은 실패로 느껴지도록 불편함을 최소화했다. 테슬러의 법칙: 모든 시스템에는 더 이상 줄일 수 없는 일정 수준의 복잡성이 존재한다 토스는 사용자가 계좌번호를 입력하면 해당 계좌번호에서 은행별 계좌번호 고유의 패턴을 파악해서 은행 선택 드롭다운 아래에 추천 은행명 버튼을 표시해준다. 이를 클릭하면 드롭다운으로 일일이 찾지 않아도 즉시 해당 은행을 선택할 수 있다. → 필연적인 복잡성이 발생한다면 사용자에게 어드바이스해 불편함을 줄이는 게 서비스 제공자의 역할 심미적 사용성 효과: 사람들은 보기 좋은 디자인이 사용성이 더 뛰어나다고 인식함 기존 금융앱들은 복잡하고 어렵다는 이미지가 강했지만, 토스는 훨씬 쉬운 사용성은 물론 금융앱 답지 않게 캐주얼하고 둥글둥글한 디자인 덕에 ‘금융앱’이 가지고 있던 딱딱한 이미지와 더욱 상반되게 느껴졌다. 폰 레스토프 효과: 비슷한 사물이 여러 개 있으면 그 중 가장 색다른 것만 기억한다 처음 서비스에 유입된 사용자에게 길을 알려주거나, 새로운 기능을 소개할 때, 혹은 알림이나 배지를 사용할 때 자주 마주할 수 있다.도허티 임계: 사용자의 관심을 유지하고 생산성을 높이기 위해서는 0.4초 이내에 시스템 피드백을 제공해야 한다
토스의 경우, 딜레이가 거의 없는 편이지만 계좌 정보 불러오기나, 대출 심사 등 외부 정보를 호출하는 구간에서는 귀엽고 톡톡 튀는 애니메이션을 제공→ 역동적인 볼거리를 제공함으로써 사용자가 느낄 수 있는 따분함을 해소 도허티 임계: 사용자의 관심을 유지하고 생산성을 높이기 위해서는 0.4초 이내에 시스템 피드백을 제공해야 한다 토스의 경우, 딜레이가 거의 없는 편이지만 계좌 정보 불러오기나, 대출 심사 등 외부 정보를 호출하는 구간에서는 귀엽고 톡톡 튀는 애니메이션을 제공→ 역동적인 볼거리를 제공함으로써 사용자가 느낄 수 있는 따분함을 해소