0. 사진 및 GIF 출처

출처 및 참고 사이트(pencilandpaper.io)
출처 및 참고 사이트(tech.kakaopay.com)

1. 본인의 경험

사이트를 돌아다니다 보면 로딩중일때 아무것도 아닌 흰색 화면이 나와서 인터넷이 끊긴건지, 무언가 잘못된건지 인지하지 못할때가 있었고, 그때마다 새로고침을 연타했었던 기억이 있음.

2. Loading UX란?

• 로딩으로 인한 고객 이탈을 방지할 수 있는 UX 패턴
• 작업이 진행되고 있다고 인지시키고 안심시키는 것
• 로딩 시간을 줄이기 위한 서비스 설계 방법

• 카카오페이의 서비스에는 로딩 상황에 정적인 화면이 아닌 스켈레톤 애니메이션을 화면에 보여줌으로써 사용자의 요청이 진행줌임을 알려준다. 그러나...
• 지연시간이 짧으면 스켈레톤 UI가 오히려 사용자로 하여금 거슬리게 할 수도 있다.
• 자세한건 링크 참고
  

3. 로딩 시간별 UI

1. 0.1 ~ 1초

• Fake Loader
  

2. 1초 ~ 2초

• 로딩 스피너
  
• 쉬머 효과
  
• 펄스 애니메이션
  

3. 2초 ~ 10초

• 시간 표시 (추천)
  
• 진행률 표시
  
• 단계 표시
  

4. 10초 이상

• 퍼센트 (추천)
  
• 나중에 오세요
  
• 백그라운드 작업 표시 (추천)
  

더 보면 좋을만한 링크들

Skeleton UI 적용기