2초만에 불필요한 클릭 없애는 4가지 방법

profile-img
강영화Product Designer(Tools)
2022. 10. 20

토스 앱에는 little big detail 이 많은데요, 그중 하나를 소개하고 싶어요.바로 불필요한 클릭 없애는 방법이에요.

왜 불필요한 클릭을 줄여야 할까요? 이유는 단순해요.

  1. 사용자가 더 빠르게 원하는 태스크를 수행할 수 있어요.
  2. 빠른 속도나 빠르다는 인상을 주게 되어 사용자 경험이 좋아져요.

사용자의 1초를 줄이면 어떤 일이 일어날까요?

토스 앱으로 예를 들어볼게요. 클릭 1회를 1초의 시간이 걸린다고 가정하고요. 2022년 10월 현재 MAU(월간 활성 사용자) 1,437만 명의 클릭 한번 줄인다면 그것만으로도 약 6개월을 아낄 수 있어요. 우리 사용자가 불필요한 일을 하지 않는 대신 더 가치 있는 기능을 찾게 도와주면 이 6개월의 시간은 클릭 한번보다 더 가치 있겠죠? 😉

이렇게 토스에서는 다양한 방법으로 사용자의 클릭을 덜어내려고 해요. 이런 노하우는 디자인 시스템에 구현되어있지요.

모두 다 알려드리고 싶지만, 이 글에는 누구나 활용할 수 있는 아주 쉬운 방법을 알려드릴게요. 이 방법은 텍스트나 정보를 입력받는 인풋 필드에 적용되는 방법이에요. 디자이너뿐 아니라 개발자분들도 바로 적용할 수 있을 만큼 매우 간단해요.

따라와 보세요!

1. 정보를 하나만 입력받을 땐 CTA 없애기

메인 버튼을 CTA라고 하죠. ‘call to action’의 약자에요. 사용자가 정보 하나만을 선택하고 나가는 화면에서는 CTA를 없애보세요. 하나만 선택하는 화면에서 파란색 CTA 버튼을 없애봅시다. 사용자가 하나의 정보만 입력할 때는 요 CTA가 필요 없을 때가 있어요. 사용자가 불필요하게 CTA 버튼 클릭하는 비용을 줄일 수 있어요. 없애봅시다!

2. 자리수가 정해져 있는 정보를 받는 경우 CTA 없애기

주민등록번호, 휴대폰 번호 등 필드 자릿수가 정해져 있는 경우 CTA 버튼이 없어도 돼요. 버튼이 없어서 어색하다고 느껴질 수 있지만 UT를 해보면 사용자분들은 스스로 기억하고 있는 번호를 입력하기 바쁘세요. 앞서 쓴 회원가입 퍼널에서도 96%가 조금 넘는 사용자가 주민등록번호 퍼널을 통과하는 등 사용자는 엄청 자연스럽게 받아들인답니다. 확인 버튼을 생략할 수 있다면 없애보세요.

3. 올바른 키보드가 처음부터 세팅되어있도록 하기

텍스트를 입력 받는 인풋 필드 같은 경우 키보드 종류를 맥락에 맞게 설정해주세요. 인증번호 입력 받는 화면으로 예를 들어보면요. 인증번호는 숫자로 올 텐데, 기본값으로 한글 키보드가 세팅되어있다면 사용자는 숫자를 입력하기 위해 한 번 더 불필요한 클릭을 해야 합니다. 정보에 맞는 인풋을 받을 수 있도록 신경 쓰는 것만으로 효과 있어요.

4. Focus 상태로 진입하게 만들기

키보드가 올라온 상태로 페이지에 진입할 수 있도록 만들어보세요. Focus 상태가 아니라면 사용자는 한 번 더 텍스트 필드를 클릭해야해서 불필요한 클릭이 발생해요.

경험상 적용하는 공수는 매우 적은 데 반해 놓치기 쉬운 디테일이었어요. 놓친 화면이 있다면 적용해보세요!

사실 위 방법 말고도 사용자에게 정보를 입력받지 않고도 필요한 정보가 모두 입력되면 좋겠죠.

가령, 데모그래피를 활용해서 사용자 대신 정보를 입력해주고 추가로 필요한 정보만 입력받는 퍼널만 만들 수도 있고요. 사용자가 이전에 입력해뒀던 내용에 기반에 적극적인 추천을 해줄 수도 있고요.

토스에서는 아래처럼 여러 가지 시도했는데요. 한번 살펴보세요.

완전 멀리 나아가서 상상의 나래를 펼쳐본다면 어떨까요?

  • 사용자가 뭘 넣을지 생각만 해도 미리 채워줄 수 있다면?
  • 사용자 시선을 읽어서 뭘 찾을지 알고 미리 클릭해준다면?
  • 구두로 말하기만 해도 머신러닝 모델이 다 요약해주고 키워드를 뽑아내 자동으로 입력해준다면?

이 외에도 끝까지 갈 수 있는 모습을, 사용자의 문제가 아예 없는 미래도 상상해보세요. 모르죠. 의외로 쉽게 적용할 수 있는 아이디어를 얻게 될지도?

오늘 읽은 것 하나나 다른 작은 아이템을 여러분 제품에 적용해가면서 사용자의 클릭을 하나라도 덜어보세요.

사용자의 시간은 소중하니까요 ❤️

재미있게 읽으셨나요?

좋았는지, 아쉬웠는지, 아래 이모지를 눌러 의견을 들려주세요.

😍
🤔
다른 글 둘러보기
thumbnail
내 아이디어를 너무 믿지 마세요2023. 03. 28
thumbnail
추천할 때는 제일 좋은 것 하나면 된다2023. 03. 23
website-code-blue

토스팀이 만드는 수많은 혁신의 순간들

당신과 함께 만들고 싶습니다.
지금, 토스팀에 합류하세요.
채용 중인 공고 보기