brunch

로딩 시, 사용자 경험 개선을 위해 사용되는 방법들

by UXUI 니디자인랩

대부분의 웹사이트,앱에서 사용자가 기다려야 할 때는 애니메이션 로딩 아이콘을 보여주고 있다. 하지만 모든 기다림의 순간에 항상 로딩 표시를 해줄 필요는 없다. 때로는 로딩 아이콘을 아예 보여주지 않는 것이 더 나은 경우도 있다.



'기다림'으로 인한 부정적 감정을 줄일 수 있는 방법



1. 베스트 해결 방법


최고의 방법은 당연히 기다림 자체를 없애는 것이다. 사용자가 기다리는 시간을 1초 미만정도로 짧게 만드는 것이다.

1초 미만일 때는 로딩 아이콘을 아예 보여주지 않는 것이 좋다. 이 경우, 로딩 아이콘을 보여주면 오히려 사용자가 '에고, 더 기다려야 하는구나..' 하는 생각을 하게 만들 수있기 때문이다.

로딩 시간을 1초 미만으로 만드는 것은 기술적 이슈이기 때문에 이 글에서는 건너뛰기로 하고, 이 글에서는 UX 디자이너 입장에서 생각해낼 수 있는 방법들 위주로 정리해보았다.





2. 차선의 해결방법들


2-1. 로딩 시간이 1~3초 정도 걸릴 경우

spinner.gif
skeleton.gif

2-1-1. ▲ 로딩 표시 방법1 : 스피너.

2-1-2. ▲ 로딩 표시 방법2 : 스켈리톤 로딩 (skeleton loading). 이 방법은 기다림을 좀 더 '덜' 지루하게 만드는 심리적 효과가 있다고 한다.


2-2. 로딩 시간이 3초 이상 걸릴 경우

91937-progress-bar-fast.gif
plane.gif


2-2-1. ▲ 로딩 표시 방법1 : 프로그레 바 또는 좀 더 시선을 끄는 애니메이션. (사용자가 기다리면서 느낄 지루함을 조금이라도 달래기 위해)

2-2-2. ▲ 로딩 표시 방법2 : 스켈리톤 로딩





3. 문제


그럼 페이지 로드 타임은 어떻게 측정할 수 있을까? 다행히 그런 서비스를 제공해주는 웹사이트가 많이 있다. 여기 소개하는 웹사이트들은 그것들 중 한 사례일 뿐이다. 구글링 해보면 이것저것 많이 나온다.


▼ Web 페이지 로드 타임 확인해볼 수 있는 사이트

https://pagespeed.web.dev/


▼ 모바일 App 페이지 로드 타임 확인해볼 수 있는 사이트

https://logrocket.com/pricing/


로드 타임 예측 어려울 때

로드 타임을 어느정도 측정해볼 수 있으면 다행이다. 그런데 남은 대기시간 예측 불가한 경우도 꽤 많다. 대략 얼마가 걸리는지를 알아야 어떤 로딩 UI를 쓸지, 남은 시간을 보여줄 때 %를 사용할지 시간을 사용할지를 정할 수 있는데 남은 대기시간을 예상조차 할 수 없으면 어떤 방법을 사용해야 할지 정하기 어렵다. 이 부분은 추후 아이디에이션이 필요하다.


남은 시간에 대한 표시방법은? % VS. 시간으로 표시해줄 것인가?

남은 대기시간을 표시해줄 때 3초 미만에면 %로 표시 (e.g. 90% 완료), 3초 이상이면 시간으로 표시해주는 것이 좋다고 하는 내용을 어디에선가 읽은 적이 있다. (e.g. 예상 남은 시간 1초) 그런데 그 연구 결과가 어떤 사람들을 대상으로 / 몇명에게 / 어떤 task에서 한 실험인지는 모르겠다. 이 기준은 케바케일 것 같다.

keyword
작가의 이전글빈 페이지를 디자인하는 방법들