로딩 스피너 UI 디자인 방법

Laura M. 디자인

 

 

사용자 입력을 인식하는 방법에는 여러 가지가 있지만 로딩 애니메이션이 일반적인 방법 중 하나입니다. 로딩 스피너는 일반적인 로딩 애니메이션 유형입니다.

 

로딩 스피너 예시. Nick Babich의 이미지.

 

---

 

로딩 스피너 사용

짧은 대기 시간(10초 미만)
스피너는 짧은 로딩 시간이 필요하지만 진행률 표시줄이 표시될 만큼 길지 않은 빠른 작업(예: 양식 제출 또는 작은 데이터 세트 로딩)에 적합합니다. 일반적으로 10초 정도의 대기 시간에는 잘 작동합니다. 대기 시간이 10초를 초과하면 사람들은 시스템이 예상대로 작동하는지 걱정하기 시작하고 시스템 상태에 대한 보다 유익한 피드백을 원하게 됩니다.

참고: 매우 빠른 작업(1초 미만)에는 스피너를 표시하지 마세요. 대신 추가적인 시각적 신호 없이 작업이 즉시 완료되도록 하세요.

사용자가 작업을 시작한 후 기본 UI를 차단해야 하는 경우
로딩 스피너는 일반적으로 기존 UI 위에 표시되어 사용자가 이를 사용하여 작업을 수행하지 못하도록 차단합니다. 스피너는 사용자가 시스템과 계속 상호 작용하기 전에 작업을 완료해야 하는 경우(예: 양식 제출 또는 인증) 유용하게 사용할 수 있습니다.

스피너는 불필요한 상호작용을 방지할 수 있습니다. 결제 정보 제출이나 중요도가 높은 작업 완료와 같이 사용자가 명확한 확인을 기대하는 작업의 경우 스피너를 사용하면 이중 제출을 방지하고 안심할 수 있습니다.

 

 

대기 시간 UX를 개선하는 방법

작업에 대한 일반적인 예상 시간 또는 유용한 상황별 세부 정보 제공
제품 제작자가 로딩 스피너를 사용하는 이유 중 하나는 정확한 대기 시간을 계산하기 어렵기 때문입니다. 하지만 때로는 작업을 완료하는 데 필요한 일반적인 예상 시간을 제공할 수 있습니다. 로딩 스피너와 함께 일반적인 예상 시간(“몇 분 정도 소요될 수 있습니다”)을 제공하면 사용자가 얼마나 기다려야 하는지 쉽게 이해할 수 있습니다.

또한 사용자가 기다리는 동안 시스템이 현재 무엇을 하고 있는지에 대한 상황별 정보를 제공하는 것도 좋습니다. 예를 들어 “주문 처리 중” 또는 “최신 업데이트 가져오기”와 같이 백그라운드에서 어떤 일이 일어나고 있는지 설명하세요.

시간 초과 및 오류 메시지 디자인
제품을 디자인할 때는 항상 계획대로 진행되지 않을 수 있는 상황을 고려하세요. 로딩 스피너의 경우 너무 오래 기다릴 수 있습니다. 로딩 시간이 합리적인 임계값을 초과하는 경우 스피너를 무한정 실행하지 말고 오류 메시지를 표시하거나 재시도 옵션을 표시하세요. 문제를 명확하게 설명하고 실행 가능한 단계를 제공하세요.

너무 빠르거나 느리게 회전하지 않기
너무 빠르게 움직이는 스피너는 시각적으로 어지럽고, 너무 느리게 움직이는 스피너는 느리게 움직인다는 것을 암시할 수 있습니다. 애니메이션 속도를 적당하고 부드럽게 유지하세요.

스피너가 완전히 회전하는 애니메이션은 일반적으로 1~2초 정도 소요됩니다. 이렇게 하면 애니메이션이 눈에 띄지만 너무 빠르거나 느리지 않은 균형이 잡힙니다.

 

iOS 로딩 스피너. Nick Babich 이미지.

 

로딩 애니메이션에 독특한 디자인 사용
일반적인 스피너 대신 브랜딩 요소나 창의적인 로딩 애니메이션(예: 제품과 관련된 작은 캐릭터나 사물)을 사용하여 사용자의 시각적 참여를 유도하세요. 예를 들어 3D 하우스 플래너를 디자인하는 경우 로딩 스피너 대신 회전하는 3D 블록을 사용하여 제품의 특성을 강조할 수 있습니다.

 

3D 블록 애니메이션. Nick Babich의 이미지.

 

스피너의 스타일을 선택한 후에는 애플리케이션 전체에서 통일된 디자인을 사용하는 것을 권장합니다. 여러 가지 다른 스피너 디자인은 사용자에게 혼란을 줄 수 있습니다. 시스템 전체에 동일한 스타일, 크기, 애니메이션을 사용하여 일관된 시각적 경험을 유지하세요.

 

---

 

출처:

https://medium.com/ux-planet/loading-spinner-ui-design-tips-and-tricks-73a937e14528