로딩 스피너는 UX 킬러입니다! 여기 대안이 있습니다

우리는 당신이 기다리는 것을 싫어한다는 것을 알고 있습니다. 모두가 그러 하듯.

2017년 연구에서 Google은 다음을 발견했습니다.

• 로드 시간 1~3초로 이탈률이 32% 증가했습니다.
• 로드 시간 1~5초로 이탈률이 90% 증가했습니다.
• 1-6초의 로딩 시간은 이탈률을 106% 증가시켰습니다.

사람들은 정당한 이유가 없는 한 기다리는 것을 좋아하지 않으며, 기다림이 길수록 그 이유가 쌓이지 않습니다. 시스템 상태의 가시성이 UI 디자인을 위한 Nielsen의 10가지 사용성 휴리스틱 중 하나인 이유입니다. 시스템 상태의 가시성은 다음을 의미합니다.

"디자인은 합리적인 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황에 대한 정보를 항상 제공해야 합니다."

로딩 표시기가 들어오는 곳입니다. 좋은 로딩 표시기:

1. 사용자에게 애플리케이션이 작동 중임을 알립니다.
2. 기다림을 견딜 수 있게 합니다.
3. 사용자에게 볼 것을 제공합니다.

UI 디자인에서 가장 일반적인 로딩 표시기는 짐작하셨겠지만 로딩 스피너입니다.

하지만 때로는 한계를 뛰어넘고 혁신적인 솔루션을 찾기 위해 일반적인 관행에 의문을 제기해야 합니다. 이 경우 로딩 스피너에는 디자이너가 너무 오랫동안 간과해 온 결함이 있습니다.

스피너 디자인: 로딩 스피너가 불편한 이유

로딩 애니메이션이 진행되는 한, 로딩 스피너는 특히 10초 이상 대기하는 경우에 불행한 선택입니다. 왜요?

짧은 이야기부터 시작하겠습니다.

로딩 스피너에 대한 나의 첫 기억은 사용자 경험에 대해 배우기 훨씬 전인 10년이 넘었습니다. 학교 컴퓨터실에서 친구들과 죽음의 수레바퀴라고 부르는 운명적이고 두려운 일을 만났습니다. macOS 대기 커서의 일반적인 이름이 아닙니다.

How-To Geek의 macOS 대기 커서 이미지.

회전하는 죽음의 수레바퀴와 마찬가지로 로딩 스피너는 피드백을 제공하지 않으며 진행의 징후도 없습니다. 그것들은 무한히 소용돌이치며 우리에게 응용 프로그램의 진행 상황과 이루어지지 않은 진전에 대해 아무 것도 알려주지 않습니다. 그것은 사용자에게 실망스럽고 급할 때 완전히 화를 유발합니다.

다음과 같은 질문을 하게 됩니다.

• 로딩이 언제 끝나나요?
• 거의 다 됐어?
• 고장났어?

그러나 당신의 질문은 답이 없어 포기합니다.

더 나쁜 것은 스피너가 느려지는 시간입니다.

운동을 하다가 타이머가 끝나기를 간절히 바랐던 적이 있습니까? 아니면 수업을 탈출하기 위해 참을성이 있습니까? 이런 경우에 시계를 보고 목적 없이 기다리다 보면 시간이 흐를 것입니다. 스피너는 카운트다운의 이점을 제외하고 동일한 작업을 수행합니다. 마치 식당에서 뱃속이 덜덜 떨리는 음식을 기다리는 것과 같습니다. 셰프가 주문을 받았는지 여부는 알 수 없습니다.

물론, 로딩 애니메이션은 실제로 시간을 제어하지 않지만 우리가 작업을 즐기는 것은 그것에 대한 우리의 인식에 영향을 미칩니다. 우리가 좋은 시간을 보낼 때 시계는 빨라집니다. 우리가 기다리는 것을 싫어하면 속도가 느려집니다.

그리고 다시 한 번 스피너는 사용자에게 포기를 권장합니다.

또한 콘텐츠가 사용자에게 가치가 있기를 원합니다. 사용자의 기대치를 초과하지는 않더라도 충족해야 합니다. 우연히 페이지가 원하는 대로 되지 않으면 스피너를 너무 오래 쳐다보는 것에 대한 좌절감이 더해져 피해가 커집니다.

검토하려면 로딩 스피너:

1. 진전의 기미를 보이지 않습니다.
2. 사용자의 질문에 대답하지 못했습니다.
3. 기다림이 생각보다 길게 느껴진다.
4. 사용자의 기대치를 준비하지 않습니다.

로딩 애니메이션 옵션

로딩 스피너로 사용자의 불만을 해결하는 가장 좋은 방법은 처음부터 그 불만을 제거하는 것입니다. 이는 대기 시간이 없어질 때까지 대기 시간을 줄이거나 대체 진행 표시기를 사용하는 것을 의미합니다.

다시 말하지만, 좋은 로딩 또는 진행률 표시기:

1. 사용자의 시간 인식이 빨라집니다.
2. 응용 프로그램이 진행되고 있다는 느낌을 줍니다.

UX 디자인에 사용되는 진행 표시기의 두 가지 주요 유형은 미확정 진행 표시기와 확정 진행 표시기입니다. 결정 요인은 시간입니다.

로드 시간을 알 수 없는 경우 일반적인 로드 스피너를 사용하고 알고 있는 경우 진행률 표시줄과 같은 확정 표시기를 사용하는 것이 좋습니다. 확정된 로딩 애니메이션은 완료율, 남은 시간(분) 또는 채워지는 막대와 같은 힌트와 함께 사용자가 얼마나 더 기다려야 하는지를 나타냅니다.

머티리얼 디자인의 미정 및 확정 진행 표시기.

이 전략의 문제는 로드하는 데 걸리는 시간을 정확히 알 수 없다는 것입니다. 당신은 유능한 추측을 할 수 있지만 그게 전부입니다. 그렇기 때문에 많은 카운트다운 표시기가 다음과 같이 계산됩니다. 10분 남음, 9분 남음, 8분 남음, 7분 남음, 10분 남음, 8분 남음 등. 로딩을 완료하고 결국에는 0이 되지만, 사용자가 탑승하기 전에는 그렇지 않습니다.

애니메이션 로드를 최대한 활용하는 방법

아래에서 스피너 및 진행률 표시줄에 대한 대체 솔루션에 대해 논의합니다. 그러나 더 전통적인 방식을 택하거나 UX 연구를 수행하기로 결정하고 이것이 청중이 선호하는 선택임을 알게 된 경우 따라야 할 몇 가지 지침이 있습니다.

첫째, 10초 미만의 대기 시간에만 로딩 스피너를 사용하십시오. 10초 이상 지연되는 경우 사용자가 더 오래 관심을 가질 수 있도록 명확한 표시기로 진행 상황의 환상을 만듭니다.

스피너 또는 기타 로딩 애니메이션을 디자인할 때:

1. 최대한 창의적이고 재미있게
2. 온브랜드로 만들어라
3. 가능한 한 정확한 완료 추정치를 제공하십시오.
4. 사용자가 기다리는 이유 설명
   – 결과를 계산하는 동안 기다려 주십시오.
   – 준비하는 동안 잠시만 기다려 주십시오.
   – 우리는 귀하의 데이터를 수집하고 있습니다.
   – 30개 중 21개 파일을 확인했습니다.
5. 페이지가 1초 이내에 로드되는 경우 애니메이션을 사용하지 마십시오.

Hacker Noon의 로딩 화면 gif 예시.

로딩 애니메이션을 개선하기 위해 계속 진행할 수 있지만, 이 문서의 내용은 그렇지 않습니다. 로딩 애니메이션이 아무리 재미있어도 대기 시간을 강조하고 명확한 진행 상황을 제공하지 않기 때문입니다.

그것이 바로 스켈레톤 스크린이 필요한 이유입니다.

스켈레톤 스크린을 사용한 점진적 로딩

스피너와 스켈레톤 스크린을 비교한 연구에 따르면 스켈레톤 스크린이 더 빠르게 인식되고 사용자를 더 행복하게 만드는 것으로 나타났습니다. 그렇다면 이 영웅은 무엇일까요?

아시다시피 로딩 스피너는 사용자 인터페이스가 완전히 로드될 때까지 화면을 차지하며 이 시점에서 모든 것이 한 번에 나타납니다.

스켈레톤 화면은 다른 전술을 사용하고 로딩이 진행됨에 따라 UI의 각 부분을 드러냅니다. 인터페이스 디자인의 골격 개요로 시작하여 로드가 완료되면 요소를 표시합니다. 이 전략을 점진적 진행이라고 하며 세부 정보는 일반적으로 골격 윤곽(자리 표시자 UI라고도 함), 텍스트, 이미지의 순서로 나타납니다.

Facebook Engineering의 샘플 Facebook 스켈레톤 화면.

LinkedIn, Instagram, Facebook 및 Google과 같은 유명 회사에서 사용하는 스켈레톤 화면은 수동 대기를 능동적 대기로 전환하여 더 나은 로딩 화면 경험을 제공합니다.

수동적 기다림은 스피너가 빙글빙글 돌아가는 것을 볼 때와 같이 아무 일도 하지 않고 그냥 거기에 앉아서 기다리는 것입니다. 능동적인 기다림은 기다리는 동안 진전이 있는 것처럼 느껴지는 일을 하는 것입니다. 스켈레톤 로딩은 화면이 업데이트될 때마다 처리할 새로운 정보를 사용자에게 제공하여 능동적인 대기를 권장합니다.

이런 식으로 스켈레톤 화면은 기다리는 시간의 초점을 벗어나 실제 진행 상황을 보여주기 때문에 로딩 프로세스가 더 빠르게 느껴지도록 합니다. 그리고 무엇이 로드되었고 무엇이 남았는지 보여주기 때문에 사용자는 정확한 사용자 인터페이스 기대치를 구축할 수 있습니다.

Instagram의 점진적 로딩이 실행 중입니다.

스켈레톤 화면을 구현할 때 자리 표시자 UI가 최종 UI가 어떻게 보일지 정확하게 표현해야 합니다. 그렇지 않으면 기대와 현실 사이에 간극이 생깁니다.

Medium 및 Google 이미지와 같은 일부 도구 및 웹사이트는 진행에 또 다른 단계를 추가하기 위해 점진적 이미지 로딩을 활용합니다. 프로그레시브 이미지 로드는 이미지가 완전히 로드되기 전에 이미지의 주요 색상 또는 흐릿한 버전을 표시하는 경우입니다.

스켈레톤 화면 내에서 로딩 애니메이션을 디자인하여 로딩을 표시할 수도 있습니다. 예를 들어 Facebook은 골격 화면에 회색으로 표시된 텍스트 막대가 페이지가 로드될 때 자체적으로 로드 동작을 실행합니다.

사용자는 화면을 왼쪽에서 오른쪽으로 로딩하는 동작과 느리고 안정적인 로딩 동작으로 더 빠르게 인식합니다.

스켈레톤 스크린 문제

항상 그렇듯이 비평가들이 있습니다. 가장 큰 우려는 회색 블록이 훌륭한 콘텐츠를 보기를 기대하는 사용자에게 둔하고 매력적이지 않은 솔루션이라는 것입니다.

어느 정도 이러한 우려는 스켈레톤 스크린의 요점을 놓치고 있습니다. 빠르게 진행되고 있는 훌륭한 콘텐츠를 암시하는 것입니다. 사용자는 로딩 화면을 전혀 기대하거나 원하지 않지만 스켈레톤 화면은 인터페이스가 작동하고 있으며 몇 초 안에 사용할 수 있다는 것을 아는 편안함을 제공합니다.

물론 회색 블록은 각 진행 단계 사이에 대기 시간이 너무 길면 짜증이 납니다. 대기 시간이 길어질수록 악화됩니다. 이것은 우리가 처음에 설정했듯이 아무도 오래 기다리는 것을 좋아하지 않기 때문에 모든 로딩 표시기의 경우입니다.

스켈레톤 스크린을 사용하면 여러 진행 단계를 구현하여 사용자의 초점을 계속 활성화하는 데 도움이 됩니다. 회색 자리 표시자 UI에서 한 번에 모든 것으로 이동하는 잘못 설계된 스켈레톤 화면이 있습니다. 이는 목적을 달성하지 못합니다. 효과적인 점진적 로딩은 사용자에게 정보, 관심, 희망을 줄 준비가 되는 즉시 콘텐츠를 표시합니다.

대기 시간이 이상적인 것보다 조금 더 긴 경우 자리 표시자 UI를 표시하고 콘텐츠를 로드하기 전에 몇 초 동안 스피너를 사용하는 것을 고려할 수 있습니다. 그렇게 하면 자리 표시자 UI가 상당한 진행 상황을 표시하는 한 시간을 조금 벌 수 있습니다.

로딩 시간이 너무 길다면 대기 시간을 줄이는 것이 항상 최선의 선택이며 우선 순위가 되어야 합니다. 웹사이트가 느려지는 데에는 여러 가지 이유가 있습니다.

테스트: 좋은 UX는 사용자로부터 시작됩니다

사용자 경험은 사용자로부터 시작되며 대부분의 경우에도 모든 사람에게 정답은 없습니다. 이것이 바로 좋은 사용자 경험을 제공하는 것이 청중에게 가장 적합한 것이 무엇인지 확인하기 위해 아이디어를 테스트하는 것으로 시작하는 이유입니다.

과거에는 최고의 스피너 디자인을 제공하는 것이 최선이었습니다.

이제 잘 설계된 점진적 로딩은 고려할 가치가 있는 대안입니다. 인지된 대기 시간을 단축하고 진행 상황을 제공하며 로드할 남은 항목을 암시하고 사용자 기대치를 조언합니다.

하지만 그렇다고 해서 모범 사례에 대한 질문을 중단할 때가 된 것은 아닙니다. 길고 유익하지 않은 로딩 애니메이션을 사용하던 시대는 지나갔지만 언젠가는 로딩 스피너와 동일한 방식으로 스켈레톤 스크린의 한계를 극복할 수 있는 날이 올 것입니다.

그때까지 UX를 개선하는 방법에 대해 자세히 알아보려면 연락하세요. 우리는 전략에 대해 이야기하는 것을 좋아합니다.