사용자 경험을 높여줄 로딩 UX 패턴

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)

UX Design Patterns for Loading

Pencil & Paper

UX Design Patterns for Loading

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2023년 8월 28일 오전 8:47

 • 

저장 43조회 2,010

댓글 0