애니메이션으로 사용성 문제 해결하기
지루한 로딩을 게임처럼 재밌게 만드는 방법
에디터: 이지은(Product Designer)
지난 7월, 제가 속한 리텐션 스쿼드는 마이데이터로 나의 대출, 카드, 계좌 정보를 한 곳에서 관리할 수 있는 ‘나의 자산’ 서비스를 신규 런칭했어요. 자산을 관리하기 위해 정보를 불러오려면 필연적으로 로딩이 생기는데요. 이 기다림의 시간을 게임처럼 즐거운 경험으로 개선한 과정을 공유드릴게요.
자산을 연동했는데 보이지 않는 문제
나의 자산에서 내 자산 정보를 보려면, 우선 보고싶은 자산을 선택하고 이를 연동하는 과정이 필요해요. 정보 연동이 완료되면 유저는 나의 자산 메인에서 내 정보를 볼 수 있어요.
당시 저는 나의 자산 배포를 앞두고 QA를 진행하면서 내가 불러온 자산이 메인에서 잘 보여지는지 확인하고 있었어요.
그런데 뭔가 이상했어요. 내가 선택한 자산 중 일부만 볼 수 있었거든요. 몇초 뒤에도 정보가 보여지지 않아서, 다른 탭으로 이동했다가 다시 나의 자산 메인으로 돌아오니 그제서야 모든 자산이 보였어요. 엔지니어분들과 이 상황을 분석해보니 아래와 같은 이유 때문이었어요.
- 연동된 자산 데이터를 백엔드에 호출해서 메인에 보여주기까지 각 자산마다 응답 소요 시간이 다르다.
- 따라서 새로고침해서 정보를 업데이트해야만 모든 자산연동이 완료되었는지 알 수 있다.
- 하지만 지금은 나의 자산 메인에서 자동으로 정보를 새로고침해서 업데이트하는 로직이 없다.
결론적으로 로직을 변경해야 근본적인 문제를 해결할 수 있었는데요. QA가 마무리되어가는 상황에서 큰 공수를 들여 로직을 변경하기는 어려운 상황이었어요. 하지만 유저가 긴 퍼널을 거쳐 연동을 완료했는데, 연동한 자산을 모두 볼 수 없는 불편한 경험을 사용자와 가장 가까워야 할 프로덕트 디자이너로서 그냥 지나칠 수는 없었어요. 그래서 디자인으로 해결할 수 있는 방법이 없을지 고민하기 시작했습니다.
디자인으로 빠른 솔루션 만들기
- 연동이 완료되면 메인에서 Skeleton UI 보여주기
처음에는 메인에서 내 자산 데이터가 모두 들어올 때 까지 Skeleton UI로 보여주려고 했어요. 그런데 데이터가 들어오는 시간을 여러번 테스트해보니 정보가 모두 보여지는 시간이 최대 20초였어요. Skeleton UI는 내 자산이 이쯤 보여질거라 예상할 수 있는 장점이 있지만, 20초라는 시간동안 하염없이 기다려야하므로 이탈할 가능성이 컸어요. 그래서 조금 더 시야를 넓혀 연동 퍼널을 살펴봤습니다.
2. 자산 연동이 완료되기 직전 로딩을 개선하기
유저는 정보를 가져오는 중이라는 로딩 메세지를 본 다음, 약 5초 뒤 완료되었다는 화면을 보게 돼요. 실제로 은행에서 자산 정보를 가져오는 연동은 빨 끝나지만 메인에서 데이터를 보여주기 위해 호출하는 시간이 길기 때문에, 유저가 기다려야하는 이 모든 과정을 하나의 로딩 경험으로 개선해보고 싶었어요.
앞서 테스트했을 때 정보가 모두 보여지는 시간은 평균 20초라는 것을 알고 있었으므로, 20초 동안 임의의 로딩을 줘서 시간을 끌어보면 어떨까 싶었어요. 그럼 유저는 메인에서 내 자산을 빠짐없이 볼 수 있게 될테니까요.
20초는 유저가 기다리다 지쳐 떠날 수 있는 긴 시간이기 때문에 이를 염두에 두고 디자인 원칙을 세워 솔루션을 만들었어요.
- 로딩 시간을 예측할 수 있게 할 것
- 기다림을 즐겁게 만들 것
3. 로딩 중일때 텍스트 변화로 진행 상황을 알려주기
먼저 로딩 과정마다, ‘자산 연동을 시작할게요', ‘은행에 다녀오고 있어요', ‘자산 연동이 거의 끝났어요' 등의 텍스트 변화로 진행 상황을 알려주려고 했어요. 그래서 빠르게 프로토타입을 만들어 테스트해보니, 단조로운 텍스트로는 로딩의 지루함이 사라지지 않았어요.
이 지루함을 어떻게하면 보완할 수 있을지 고민하던 중, 저희 팀 PM 윤아님이 ‘돼지(저금통)가 돈을 먹는 걸 보여주면 어때요?’ 라는 아이디어를 주셨는데요. 여기에 힌트를 얻어 마치 게임처럼 돼지가 은행에서 자산을 가져오는 여정을 애니메이션으로 만들게 되었습니다.
4. 애니메이션 화면 설계하기
- 우선 자산을 은행에서 가져오는 걸 시각적으로 인지할 수 있도록 실제 금융사 로고를 넣고,
- 은행을 지날 때마다 보상을 획득하는 것처럼 동전을 먹는 돼지를 그렸어요.
- 로딩이 진행되면 돼지가 말을 건네며 유저와 상호작용한다고 느끼게 만들었어요
- 마지막으로 진행 현황을 텍스트로 넣어 로딩이 언제 끝나는지 예측할 수 있게했어요.
배포 후 레슨 런
배포 후 데이터를 모니터링 해본 결과, 20초라는 긴 로딩 동안 유저가 떠날까봐 우려했던 것과는 다르게 97% 유저가 로딩을 모두 기다리고 나의 자산 메인에 도달했어요. 다행히 내부에서도 ‘로딩이 길다’는 말 대신 ‘돼지가 돈 먹는게 귀엽다’ , ‘계속 보게된다'라는 좋은 피드백을 주시기도 했습니다.
유저가 연동한 자산을 모두 볼 수 없는 문제를 해결하기 위해 로딩 퍼널까지 시야를 넓히고, 이를 게임처럼 지루하지 않게 풀어내면서 동적인 애니메이션의 임팩트를 체감했던 프로젝트였어요. 또 환경의 제약을 디자인으로 해결하기 위해 집요하게 파헤쳐본 경험을 해볼 수 있어 프로덕트 디자이너로서 더 의미있다고 느꼈습니다.
혹시 여러분도 정보를 불러오기 위해서 사용자를 가만히 기다리게 만들고 있지는 않나요? 만약 로딩 시간이 길어지는게 불가피한 상황이라면, 사용자와 상호작용하는 과정으로 바꿔서 더 재밌는 경험으로 만들어보면 어떨까요?
금융의 모든 연결고리, 알다
앱 다운로드 바로 가기
알다에서는 글에서 소개한 나의 자산뿐만 아니라 앞으로 더 재미있고 유익한 서비스를 선보일 예정이에요. 알다 디자인 팀과의 커피챗도 언제든지 환영입니다.
