애니메이션 진행률 표시기를 Advantage에 배포하기 위한 모범 사례

PC를 사용해 본 적이 있다면 시스템이 부팅될 때 나타나는 애니메이션 Windows 기호를 알고 있을 것입니다. 오늘날 우리가 보는 것과 같이 발전하기 위해서는 디자인과 애니메이션의 발전이 필요했지만 Windows 1995에서는 이미지가 전혀 움직이지 않았습니다. 이 애니메이션 표시기를 사용하는 이유가 무엇인지 생각하는 사람도 있을 것입니다.

그러나 이것을 고려하십시오. 작업이 완료되는 것을 보기 위해 빈 화면을 보고 기다리는 것이 더 낫습니까? 아니면 화면이 다시 나타날 때까지 의미 있는 일을 계속 하시겠습니까?

사용자 인터페이스 디자인의 가장 기본적인 기능 중 하나는 진행 상황을 시스템 상태로 표시하는 기능입니다. 사용자는 시스템이 해당 작업을 인식하고 그에 따라 응답하는지 알아야 합니다. 애니메이션 진행률 표시기는 광범위한 텍스트 또는 비디오 기능을 사용하지 않고 거의 모든 주어진 시간에 작업의 현재 컨텍스트를 표시할 수 있습니다. 따라서 백그라운드에서 진행이 완료되는 동안 시스템 상태를 제공하는 데 이상적입니다.

시스템 진행 중에 사용자와 상호 작용하는 것이 중요한 이유는 무엇입니까?

누가 앱이나 웹사이트의 빠른 응답을 좋아하지 않습니까? 사용자에게 많은 의미가 있지만 흔들리지 않는 일관성으로 실행할 수는 없습니다. 애플리케이션 속도를 방해할 수 있는 특정 요소가 항상 방정식에 추가됩니다. 이러한 요인에는 대부분 인터넷 연결 불량, 과부하로 인한 성능 저하 및 프로그램 오류가 포함됩니다. 이러한 상황에서 가장 좋은 조치는 사용자의 긴장을 최소화하고 앱이 작동하고 진행되고 있다는 확신을 주는 것입니다. 그렇게 하려면 시간이 사용자의 인내심을 해치지 않도록 사용자에게 피드백을 제공해야 합니다.

피드백으로 사용자의 관심 유지

사용자가 작업을 수행하면 대기 시간이 거의 즉시 시작됩니다. 그러나 문제를 악화시키는 것은 시스템의 진행 상황을 나타내는 적절한 지표가 없다는 것입니다. 시스템에 시간이 걸린다는 알림을 표시하지 못하면 사용자는 자연스럽게 앱이 응답하지 않았다고 가정합니다. 앱이 제 시간에 피드백을 제공하지 않았기 때문에 결과는 만연한 클릭에서부터 사용자 이탈에 이르기까지 다양할 수 있습니다.

진행률을 다시 시작하거나 시스템을 새로 고치기 위해 연결된 작업은 로드하는 데 예상보다 시간이 더 오래 걸릴 때 수행되는 경우가 많습니다. 다시 말하지만, 피드백이 없으면 백그라운드에서 이루어지더라도 요청에 대한 응답을 나타낼 수 없습니다. 그렇기 때문에 필요할 때마다 앱의 시스템 진행 상황을 옹호하기 위해 애니메이션 표시기를 도입해야 합니다.

1초 이상 걸리는 작업에 진행 표시기를 사용하는 방법은 무엇입니까?

일반적으로 앱을 로드하는 데 1초 미만이 소요되면 진행 상황이 거의 방해받지 않고 사용자가 초점을 잃지 않습니다. 그러나 로딩 시간이 1초를 초과하면 사용자가 계속 참여하도록 조치를 취해야 합니다. 짧은 지연이 눈에 띄고 사용자는 애플리케이션에서 수행 중인 작업의 효율성에 대해 방황하기 시작합니다.

그렇기 때문에 앱은 신뢰할 수 있는 대기 이유를 제공하고 통제 불능 상태가 되기 전에 사용자의 불확실성을 줄이기 위해 진행률 표시기를 통해 응답해야 합니다. 로드하는 데 1초 미만이 소요되는 작업에는 애니메이션 표시기가 반드시 필요한 것은 아니지만 이미지는 할 수 있습니다. 동작을 할 때마다 화면에서 계속 깜박이는 애니메이션은 사용자의 방향을 잃을 수 있으므로 권장합니다. 애니메이션 진행률 표시기는 장기간 대기의 영향을 중화하고 사용자가 앱이나 웹사이트에 계속 참여하도록 하는 데 가장 잘 사용됩니다.

진행 표시기의 유형

1. 미정 : 애니메이션 대기 표시기는 사용자와 통신하고 마지막 사용자 작업에 대해 계속 알려주도록 설계되었습니다. 가장 일반적이고 다소 단순한 유형의 대기 표시기는 "미정"입니다. 이러한 유형의 표시기는 사용자에게 작업이 완료될 때까지 기다리라고 지시하면서 진행 상황을 완료하는 데 걸리는 시간을 알 수 없습니다. 불확실한 진행률 표시기는 가급적이면 2-10초 이내에 빠른 작업을 수행하는 데 사용해야 합니다. 그보다 더 긴 시간은 사용자의 인내심에 영향을 미칠 수 있습니다. 이렇게 하면 웹사이트의 이탈률과 애플리케이션의 이탈률이 증가할 수 있습니다.
2. Determinate : "Determinate" 진행 표시기의 경우 시간이 애니메이션 내에서 상당히 확장됩니다. 이러한 유형의 표시기는 진행을 완료하는 데 관련된 대략적인 또는 정확한 시간을 사용자에게 계속 알려줍니다. 시작 위치부터 진행 상황, 얼마나 달성했는지, 대기 시간을 없애는 데 얼마나 더 걸릴지 보여주기 때문에 더 인기 있는 유형의 대기 표시기입니다. 이것은 사용자가 애니메이션을 통해 진행되고 표시되는 진행 상황에 대해 확신을 가질 수 있도록 하는 동시에 웹 사이트나 애플리케이션에 계속 참여하려는 의지를 높이는 데 도움이 됩니다.

루프 애니메이션 표시기 및 완료율 표시기

• 루프 애니메이션 : 루프 애니메이션 표시기는 대략적이거나 정확한 로딩 시간을 표시하지 않고 진행 상황을 나타내도록 설계되었습니다. 이것이 대부분의 반복 애니메이션 진행률 표시기가 불확실한 이유입니다. 예를 들어 Windows 7 진행률 표시기는 진행률을 완료하는 데 걸리는 정확한 시간에 대한 피드백 없이 동일한 애니메이션 반복을 표시하도록 설계되었습니다. 그 외에도 부팅 기능, 인터페이스 작동 설정 및 기타 형태의 데이터 로딩에 이르기까지 모든 것이 포함되어 있습니다. 이 두 가지 이유로 인해 사용자는 웹 사이트 또는 애플리케이션의 로드 시간을 나타내는 루프 대기 표시기를 선호하지 않습니다.

• 완료율 표시기 : 이름에서 알 수 있듯이 완료율 표시기는 애니메이션 범위, 원 또는 막대를 0%에서 100%까지 채워 로딩 진행 상황을 보여줍니다. 진행을 완료하는 데 걸린 시간을 나타내므로 완료율 표시기는 확정 대기 표시기로 분류됩니다. 이 특정 품질의 경우 완료하는 데 10초 이상 필요한 작업에 대해 완료 백분율 표시기를 사용하는 것이 가장 좋습니다.

  

  

  연구에 따르면 10초가 평균 사용자 인내심의 임계값입니다. 그 이상으로, 사용자는 추가 피드백이 제공될 때까지 무모해지고 조급해집니다. 로드하는 데 10초 이상 걸리는 프로세스에 대해 완료율 진행률 표시기를 표시하면 사용자의 인내심을 손상시키지 않으면서 웹사이트나 애플리케이션에 계속 빠져들 수 있습니다.

진행률 표시기를 효과적으로 사용하는 방법?

응용 프로그램과 웹 사이트에서 진행률 표시기를 효과적으로 사용하는 것은 성공과 실패의 차이를 의미할 수 있습니다. 다음은 진행률 표시기가 제대로 작동하는지 확인하기 위한 몇 가지 팁입니다.

1. 사용자에게 대기 이유를 알려주십시오 : 백그라운드에서 진행 중인 로딩 진행 상황을 사용자가 알지 못하게 하는 것은 초보적인 실수입니다. 이것은 인내심을 잃고 응용 프로그램이나 웹 사이트를 종료하는 경향을 증가시킵니다. 추가 이해를 위해 일부 텍스트와 함께 애니메이션 진행률 표시기를 표시하여 사용자에게 계속 정보를 제공할 수 있습니다. 구체적으로 대상이 되는 프로세스를 표시할 수 있습니다. 예를 들어, '그래픽 로드' 또는 '지도 로드' 등과 같이 어떤 프로세스가 수행되고 있는지를 읽는 로딩 표시줄과 텍스트를 사용하여 비디오 게임의 대기 진행률을 표시할 수 있습니다.
2. 더 오랜 시간이 필요한 작업에 대한 간단한 예상 시간 표시 : 일을 미시적으로 고려하지 마십시오. 간단한 견적을 제공하여 사용자의 참여를 유지할 수 있습니다. 지킬 수 없는 약속을 속이는 것은 사용자를 짜증나게 하고 강제로 떠나게 할 수 있습니다.
3. 정확한 소요 시간 표시 : 그러나 일반적으로 사용자의 평균 대기 한도보다 더 많은 시간이 소요되는 작업의 경우 확정 진행 표시기를 선택하는 것이 더 현명한 조치입니다. 이상적인 선택은 정확한 로딩 시간을 각광받는 퍼센트 완료 진행 표시기일 것입니다. 처리하기에 훨씬 더 긴 작업의 경우 진행 상황을 강조하기 위해 여러 단계를 사용하는 것이 좋습니다.
4. 진행 상황 유지 : 작업을 로드하는 동안 진행률 표시줄의 일관성을 목표로 하십시오. 몇 번의 경험 후에 진행률 표시줄을 통해 사용자는 작업이 얼마나 빨리 완료될 것인지에 대한 기대를 갖게 됩니다. 결과적으로, 진행 중 정지는 사용자의 기대에 심각한 타격을 줄 수 있습니다. 예를 들어, 막대가 99%에 도달하고 오랫동안 이 상태를 유지하면 대다수 사용자는 이 동작에 좌절하고 응용 프로그램이 정지된 것으로 믿게 만듭니다. 이에 대응하기 위해 진행률 표시줄이 즉각적이고 꾸준히 움직이는 것을 보여줌으로써 이러한 일관되지 않은 지연을 마스킹할 수 있습니다.
5. 실제 속도보다 빠르게 막대에 진행률 표시: 진행률 표시줄이 더 빠르게 느껴지도록 만들 수 있는 간단한 인식으로 원시 속도를 나타낼 수 있습니다. 애니메이션을 처음에는 느리게 움직이고 끝을 닫을 때 속도를 선택하여 이를 수행할 수 있습니다. 이것은 작업을 완료하는 데 걸리는 시간을 희생하지 않으면서 빠른 진행의 환상을 만들 것입니다.
6. 산만함 제공 : 창의적인 진행 표시기를 도입하여 사용자의 시간 인식을 상당히 줄일 수 있습니다. 앱이 진행되는 동안 흥미로운 텍스트 또는 시각적 세부 정보를 표시하는 경우 작업을 완료하는 데 걸리는 시간에서 사용자의 마음을 산만하게 할 수 있습니다. 짧은 비디오, 흥미로운 사실, 애니메이션 및 사소한 게임과 같이 사용자를 바쁘게 만드는 다양한 항목을 제공할 수 있습니다.

대안 - 애니메이션 진행률 표시기에 대해 스켈레톤 화면을 사용

애니메이션 진행률 표시기는 대기에서 나오는 거의 모든 나쁜 감정을 흔들 수 있지만 일부 청중은 이러한 전술에 다소 탄력적입니다. 진행률 표시기를 사용하지 않고 사용자를 기다리게 하는 몇 가지 좋은 대안 중 하나는 스켈레톤 화면이라는 방법입니다. 임시 정보 컨테이너라고도 하는 이러한 기술에는 로딩 바를 여는 대신 사용자에게 실시간으로 진행 상황을 표시하는 것이 포함됩니다. 빈 화면이 완전히 채워질 때까지 구성 요소와 요소로 점차 채워지는 것을 상상해 보십시오. 이렇게 하면 애플리케이션이 로딩 시간에 따라 작동하고 표시된 진행률로 대기에 대한 보상이 주어지는 것처럼 보입니다.

이는 청중이 웹사이트나 애플리케이션에 계속 참여하도록 할 뿐만 아니라 다음 작업을 완료할 준비가 되도록 합니다. 진행률 표시기는 사용자를 만족시키는 훌륭한 수단이기도 하지만 로딩 진행 중에 스켈레톤 화면이 유지하는 사용자 내부의 에너지를 유지하는 데 실패합니다.

마지막 생각들

앱이나 웹사이트 운영이 얼마나 빠른지 상관없이 초대받지 않은 처리 시간이 발생할 가능성은 항상 있습니다. 완료율 표시기 및 로딩 스피너와 같은 애니메이션 대기 진행 표시기를 사용하면 진행 중인 프로세스와 시스템의 현재 상태를 사용자에게 안심시킬 수 있습니다. 결과적으로 로딩을 기다리고 남은 작업을 계속하기 위해 웹사이트나 애플리케이션에 머무를 가능성이 높아집니다. 프로세스를 완료하는 데 필요한 시간을 계산하려면 적절한 유형의 진행 애니메이션 표시기를 할당해야 합니다.

루프 표시기는 2-10초가 소요되는 작업에 이상적이며 시간이 더 많이 소요되는 작업은 완료율 표시기로 지원할 수 있습니다. 반복 애니메이션 및 스켈레톤 화면의 경우 몇 밀리초를 초과하는 모든 작업을 수행할 수 있고 여전히 사용자에게 시원함을 유지할 수 있으므로 스켈레톤 화면을 사용하는 것이 가장 좋습니다.