로딩을 위한 UX 디자인 패턴

(pencilandpaper.io)

50P by kuroneko 2023-08-28 | favorite | 댓글 3개

로딩 화면은 시스템이 하는 일에 대한 가시성을 제공하여 사용자 경험을 향상 시킬수 있음.
적절한 로딩 화면을 만들기 위해 고려해야 할 사항이 몇 가지 있음.
- 디자인에 앞서 로딩 시스템을 확인해야 함.
- 로딩이 사용자의 입력을 차단하는지, 진행률을 알 수 있는지, 얼마나 많은 정보를 불러오는지, 모바일 경험은 어떤지 등.
- 패시브 로딩(시스템이 미리 불러오는 것)인지, 티브 로딩(사용자의 행동에 따라 불러오는 것)인지 등.
한 번에 보여주는 양에 따른 변화
- 복잡한 구성 요소의 경우 하나씩 보여주는 게 좋을 수 있음.
- 비교적 간단한 구성 요소의 경우 로드가 완료된 후 한 번에 표시하는 게 좋음.
- 구성 요소의 수가 많으면 지연 로딩이 필요함.
  - 무한 스크롤, 더 보기 버튼, 페이징 등의 접근 방식 활용.
빈도에 따른 변화
- 계속 변경되는 경우, 로딩을 보여주는 UI를 최소화해야 함.
  - 구글 드라이브가 실시간 저장되는 UI를 참고.
- 가끔 변경되는 경우 즉시 사용자에게 보여주는게 좋음.
  - 보고 있는 콘텐츠가 업데이트 되었으니, 화면을 새로고침 하라는 팝업 등.
소요 시간에 따른 변화
- 진행률을 명확하게 알 수 있는지, 아니면 불확실한지 먼저 검토해야 함.
- 0.1초 이하인 경우
  - 즉시 결과를 보여주면 됨.
  - 몇몇 경우에는 가짜 로딩 화면을 보여주는 게 더 좋을 수 있음.
  - 사용자가 느끼기에 중요한 작업이거나 (저장 등), 사용자가 액션을 취할 수 있는 지연 시간이 필요한 경우 (메일 전송의 되돌리기 버튼 등).
- 0.1초 ~ 1초 사이인 경우
  - 아주 흔한 지연 시간이고, 사용자의 눈에 띄지 않으므로 로딩 화면을 추가하지 않는 게 좋음.
- 1초 이상인 경우
  - 1초를 넘기는 순간 사용자가 대기 시간을 인지하게 되므로, 적합한 로딩 화면을 추가하는 게 좋음.
  - 로딩되는 구성 요소가 작은 경우 로딩 스피너가 좋은 선택. (파일 업로드 등)
  - 화면이 바뀌는 경우 스켈레톤 로딩 화면이 좋음.
  - 이미지가 핵심 콘텐츠인 경우 주요 색상을 추출하여 흐리게 처리하면 아주 좋음.
- 2초 ~ 10초 사이인 경우
  - "5초 가량 소요됩니다" 와 같은 시간표시기가 효과적일 수 있음.
  - 진행 표시줄은 항상 좋은 선택임.
  - 몇 가지 단계로 구성된 경우, 해당 단계를 보여주는 것도 방법.
    - 명확한 단계가 없는 경우에도 일반적인 메시지를 사용할 수 있음. (서버 연결 중 등)
- 10초 이상 걸리는 경우
  - 진행률을 명확하게 알 수 있는 경우 퍼센트와 남은 시간 등을 표시해주는 게 좋음. (파일 업로드의 50% 등)
    - 단 99%에서 멈추는 것은 매우 치명적이므로 이런 경우가 발생할 수 있으면 다른 방법을 사용해야 함.
  - 더 오래 걸리는데 진행률을 명확하게 알 수 없으면, 작업이 완료되면 이메일 등으로 알려주겠다고 하고 사용자가 제어할 수 있도록 하면 좋음.
  - 아예 백그라운드에서 작업이 되면서 사용자의 모든 행동을 방해하지 않는 것도 좋음. (구글 드라이브의 업로드 진행 상태 등)