https://pencilandpaper.io/articles/ux-pattern-analysis-loading-feedback/
이 글은 상황에 따른 적절한 로딩 전략을 사용하여 사용자 경험을 높이는 방법을 알려줍니다. 개발자뿐만 아니라 디자이너, QA 및 제품 담당자가 적절한 로딩 패턴을 구축하기 전에 사용자와 시스템의 컨텍스트를 모두 고려할 수 있도록 돕기 위해 작성되었습니다.
[목차/요약]
- 시간 인식 제어 (Controlling the perception of time)
- UI로 기대치 설정 (Setting expectations with the UI)
- 로딩 피드백을 디자인할 때 고려해야 할 사항 (Things to consider when designing loading feedback)
- 로딩이 사용자에 의해 트리거되나요?
- 화면 전체를 차단해야 하나요?
- 콘텐츠가 로드되는 시간을 예측할 수 있나요?
- 백그라운드에서 항상 동기화 상태로 유지되나요? 사용자가 가끔씩 페이지를 수동으로 새로 고쳐야 하나요?
- 모바일 환경을 고려해 보셨나요?
- ..등등
- 로직 결정하기 (Deciding on your logic)
- 패시브 로딩: 시스템이 무언가를 불러올 때
- 액티브 로딩: 사용자가 실행해서 불러올 때
- 로딩 패턴 (Loading Pattern)
- Determinate progress indicators: 시작과 끝이 존재하는 UI (ex: 다운로드 진행률을 나타내는 bar)
- Indeterminate progress indicators: 종료 시점이 불확실한 UI (ex: 빙글빙글 도는 스피너)
- (TL;DR) 핵심 원칙
- 요청을 받은 직후 항상 즉각적인 피드백 제공
- 2초 이상 대기할 경우 반복되는 애니메이션 사용 (Indeterminate progress indicators)
- 10초 이상 대기할 경우 Determinate progress indicators 사용
- 정적 로딩 메시지를 사용하지 말고 상황에 맞는 동적 메시지를 사용하세요.
- 마무리 (Wrapping up)