Loading UX

유인호·2023년 10월 10일

UX

목록 보기
1/3

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 적용기

profile
🍎Apple Developer Academy @ POSTECH 2nd, 🌱SeSAC iOS 4th

0개의 댓글