진행바 속도가 빠르다고 느끼게 만드는 방법
UX 디자인 배우기 #73
Today UX 아티클
※ 이 글은 UX Movement에 올라온 Anthony가 작성한 「How to Make ProgressBars Feel Faster to Users」를 원작자의 동의하에 전문 번역 및 게시한 글입니다.
애플리케이션이 로드되는 것을 유저가 너무 오래 기다리게 하면 유저가 조급함을 느낄 수 있습니다. 만일 유저가 그런 느낌을 느끼게 되면, 사이트를 떠나고 다른 곳에서 시간을 보내려 할 것입니다.
사이트의 속도를 높이기 위해 기술적으로 약간 수정할 수도 있긴 하지만, 어떤 앱은 유저를 기다리게 하는 것 밖에는 대책이 없기도 합니다. 그렇긴 하지만, 마치 앱이 실제보다 빠르게 로드되는 것처럼 느끼도록 유저가 느끼는 시간의 속도를 높일 수 있는 방법이 있습니다.
앱이 로딩 중일 때, 유저는 언제 로딩이 끝날지에 대한 시각적 단서로 스크린에 뜨는 진행 바(progress bar)를 보게 됩니다. 진행 바가 움직이는 방식은 유저가 로딩 시간을 어떻게 인지 하느냐에 영향을 미칩니다.
거꾸로 줄어드는 진행 바
한 연구 결과에 따르면 유저는 거꾸로 줄어드는 진행 바가 앞으로 채워지는 진행 바보다 더 빠르다고 느낀다고 합니다. [1] 이러한 연구결과는 “모션 지각이 절대적인 것이 아니라 주변의 시각적 맥락과 관련한 상대적인 것임을 보여주는 의도된 모션 효과”는 속도가 높아졌다는 착각을 하게 만들고, 이는 진행 바의 시간에 대한 인식을 바꿔버린다는 것을 보여줍니다.
박자 혹은 회전 수 높이기
진행 바가 빠른 것처럼 유저가 느끼게 하는 또 다른 방법은 박동 수를 높이는 겁니다. 앞서 얘기했던 연구 결과에 따르면, “진행바의 박동을 높이면 같은 로딩 기간을 더 짧게 인식하는 경향이 있다”고합니다. [1]
진행바의 박동수를 높이는 것은 음악의 박자를 빠르게 만다는 것과 같습니다. 한 마디당 비트가 많아질수록, 템포는 더 빨라지고 음악이 재생되는 속도도 빨라집니다. 진행바의 박동은 마치 메트로놈이 진행 시간의 “템포”를 세는 것과 같은 역할을 합니다.
로딩 표시가 더 빠르게 회전할수록 유저는로딩 시간을 더 빠르게 느낀다이런 연구 결과는 무한 로딩 표시(indeterminate activity indicator)에도 적용할 수 있습니다. 무한 로딩 표시란 선형이 아닌 방사형 진행바를 의미하며, 이런 로딩 표시는 언제 로딩이 끝날지 보여주지 않습니다.
회전 수를 늘려서 로딩 시간이 더 빠른 것처럼 느껴지게 만들 수 있습니다. 같은 기간 동안 돌아가는 회전 수가 더 많아질수록, 앱이 더 빠르다고 느낄 겁니다.
진행 막판에 가속화하기
또 다른 연구에 따르면, 사람들은 빨라지는 진행바를 느려지는 진행바보다 더 좋아한다고 합니다 [2]. 즉, “진행 막판이 다 되어서 속도가 올라가는 진행 바”를 “진행이 끝날쯤 잠시 멈추는 진행바”보다 더 빠르다고 느낀다는 겁니다.
만일 진행바가 잠시 멈춰야만 한다면, 진행 초반에 진행 속도를 늦추면 됩니다. 대신 끝으로 갈수록 속도를 높여서 완료 시간이 빨라진 것처럼 느끼게 만드는 것이죠. 유저는 막판에 잠시 멈추는 것보다 초반에 잠시 멈추는 것을 더 잘 견딥니다.
유저는 막판에 잠시 멈추는 것보다 초반에 잠시 멈추는 것을 더 잘 견딘다.진행 시간은 상대적이다
유저의 시간에 대한 인식만 살짝 바꿔줘도 앱이 실제보다 더 빠른 것처럼 느껴지게 만들 수 있습니다. 물론 이런 방법은 사이트를 최적화하기 위해 모든 일을 했을 때 도움이 되는 겁니다.
기능이 많은 앱을 보면 많은 경우에 그 기술을 이용하는 데 긴 로딩 시간이 걸립니다. 하지만 유저에게 빠르다고 지각할 수 있게 해주는 몇 가지 방법이 더 있습니다. 지각(perception)은 사용자 경험에서 가장 중요한 부분입니다. 만일 로딩 시간이 빠르다고 느낀다면, 실제로 빠른 걸 수도 있습니다.
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 Live 최소 1개에서 최대 4개 UX 강좌 (온라인) 줌 Live 강좌 진행하고 있습니다)
[VOD 강좌] (PM/PO/UI/UX) 수강생 모집 중
(인프런에서 총 20개 UX 강좌: 인터넷/VOD 오픈했습니다)
https://www.inflearn.com/users/196290
