UI 구성요소인 로딩 및 진행률 표시하기

 

로딩 및 진행률 표시기는 사용자가 대기 시간 동안 정보를 얻고 참여를 유도하는 데 도움이 되는 UX/UI 디자인의 필수 요소입니다. 웹페이지 로딩, 트랜잭션 처리, 콘텐츠 다운로드 등 어떤 상황에서든 잘 디자인된 지표는 사용자 경험을 크게 향상시킬 수 있습니다.

시스템 속도와 응답성을 개선하는 데 가장 중점을 두어야 하지만, 그것이 불가능하다면 적절한 사용자 경험을 디자인하는 것이 중요합니다. 이 글에서는 로딩 및 진행률 표시기의 중요성, 대기 심리에 대해 알아보고 효과적이고 사용자 친화적인 디자인을 만들기 위한 사례를 살펴봅니다.

 

 

불확정 지표와 확정 지표의 차이점 이해하기

불확정 지표와 확정 지표의 차이점을 이해하는 것은 다양한 시나리오에 적합한 유형을 선택하는 데 매우 중요합니다.

 

 

 

불확정 지표 

지정되지 않은 시간을 표시합니다.
프로세스의 기간이나 진행 상황을 알 수 없거나 가변적인 경우 불확정 지표를 사용합니다. 시스템이 작동 중임을 사용자에게 안심시키고 지연을 오류나 실패로 인식하는 것을 방지할 수 있습니다.

결정 지표

프로세스에 소요되는 시간과 진행 상황을 표시합니다. 기간이나 진행 상황을 측정하거나 추정할 수 있는 경우 결정적 지표를 활용하세요. 완료되었거나 남은 작업을 시각적으로 표시하여 사용자가 진행 상황을 측정하고 기대치를 관리할 수 있습니다.

 

 

주요 유형 및 변형

스피너

스피너는 시스템이 콘텐츠를 처리 중이거나 로드 중임을 나타내기 위해 계속 회전하는 간단한 애니메이션 아이콘입니다. 많은 애플리케이션과 웹사이트에서 널리 인식되고 사용됩니다.

스켈레톤 로더 또는 스텐실

스켈레톤 화면은 로드 중인 콘텐츠의 예상 레이아웃을 모방하는 플레이스홀더 구조입니다. 실제 콘텐츠가 로드되는 동안 페이지 또는 인터페이스의 대략적인 시각적 윤곽을 제공합니다.

진행률 표시줄

진행률 표시줄은 점진적으로 채워지는 가로 막대를 통해 작업 또는 로딩 프로세스의 진행 상황을 시각적으로 나타냅니다. 사용자는 완료된 비율 또는 남은 시간을 확인할 수 있습니다.

진행률 원

진행률 표시줄과 마찬가지로 진행률 원은 서서히 채워지는 원형 모양을 사용하여 작업 또는 로드 프로세스의 완료를 나타냅니다.

 

 

 

애니메이션 아이콘 또는 일러스트레이션

로딩 프로세스 중에 매력적인 애니메이션이나 아이콘을 사용하여 사용자에게 즐거움을 줄 수 있습니다. 시각적 흥미를 더하고 대기 시간을 더욱 즐겁게 만들어 줍니다.

텍스트 또는 메시지 로딩 중

“로드 중...” 또는 ‘잠시만 기다려 주세요’와 같은 문자 메시지를 표시하면 시스템이 사용자의 요청에 대해 적극적으로 작업 중이라는 명확한 피드백을 사용자에게 제공할 수 있습니다.

백분율 표시기

이 유형의 표시기는 진행률을 백분율로 표시하여 사용자가 로딩 프로세스의 완료를 수치로 추적할 수 있도록 합니다.

하이브리드 표시기

서로 다른 유형의 로딩 지표를 결합하면 독특하고 매력적인 경험을 만들 수 있습니다. 예를 들어 진행률 표시줄과 함께 스피너를 사용하거나 진행률 원 안에 애니메이션을 통합할 수 있습니다.

 

 

예상 대기 시간에 따라 적절한 유형의 표시기를 선택합니다.

대기 시간에 따라 사용자의 참여와 정보를 유지하기 위한 접근 방식이 달라져야 합니다.

 

 

 

대기 시간이 1초 미만인 경우

사용자에게 혼란을 줄 수 있는 글리치와 같은 시각적 경험을 제공할 수 있으므로 명시적인 로딩 효과를 구현하지 않는 것이 좋습니다.

짧은 대기 시간(1~3초)의 경우 

스켈레톤 화면이나 스피너 사용과 같은 불확실한 표시기를 사용하는 것이 좋습니다.
* 디자이너는 애니메이션이 완료되거나 사용자가 메시지를 소비할 시간이 충분하지 않을 수 있으므로 복잡한 애니메이션 그림이나 자세한 로더는 피해야 합니다.

사용자가 시스템 응답성에 의문을 제기할 수 있는 중간 대기 시간(3~10초)의 경우 

진행률 표시줄 및 퍼센트 표시기와 같은 명확한 진행률 표시기를 사용하여 로딩 진행 상황을 보여주고 사용자 참여도를 유지하는 것이 좋습니다.

대기 시간이 긴 경우(10초 이상) 

진행 상황을 보여주고, 사용자 상호작용을 허용하며, 불안감을 줄여주는 명확한 인터페이스를 제공합니다. 쉬머 효과, 백그라운드 작업, 스토리텔링/팁 등의 전략을 조합하여 장시간 대기하는 동안 사용자의 참여를 유도하세요.

 

 

기다림의 심리학

피오나 푸이훈 나하세스드 연구원의 '참을 수 있는 대기 시간과 피드백이 사용자 인내력에 미치는 영향'에 관한 연구에서는 사용자가 웹 페이지를 포기하기까지 얼마나 기다릴 수 있는지, 그리고 피드백이 참을 수 있는 대기 시간에 미치는 영향에 대한 질문을 다루었습니다. 연구 결과 피드백이 있으면 웹 사용자의 참을 수 있는 대기 시간이 길어진다는 사실이 밝혀졌습니다.

진행률 표시줄이 표시된 참가자 그룹의 평균 대기 시간은 22.6초인 반면, 진행률 표시줄이 표시되지 않은 참가자의 평균 대기 시간은 9초였습니다.

 

 

 

사용자의 시간 인식, 불안 수준, 통제감, 시각적 매력, 투명성, 방해 요소의 포함 여부가 중요한 역할을 합니다. 또한 기대치는 업계별 규범에 따라 달라질 수 있습니다.

다음은 기다림을 더욱 악화시키는 요인을 다룬 훌륭한 글입니다.

기다림의 심리학

기다림을 더 길게 느끼게 하는 8가지 요인

 

모범 사례

콘텐츠를 로드할 때 동일한 진행률 표시기의 여러 인스턴스를 표시하지 않도록 합니다.

한 페이지 내의 여러 카드와 같이 일련의 프로세스 또는 항목 로딩에 대한 진행률을 표시할 때는 각 개별 카드의 진행률을 보여주는 여러 표시기 대신 하나의 글로벌 진행률 표시기를 표시하는 것이 좋습니다. 이렇게 하면 사용자가 전체 프로세스의 전반적인 진행 상황을 쉽게 이해할 수 있습니다.

 

스텐실 로더로 로딩 속도 인식 향상

스켈레톤 화면은 사용자에게 현재 진행 상황을 보여주고 다음에 나올 내용을 미리 보여주는 등 다양한 용도로 사용됩니다. 스켈레톤 화면은 콘텐츠가 로드되는 동안 방해받지 않는 보기를 제공함으로써 인지 부하를 최소화하고 사용자가 잠재적인 오류에 대한 걱정 없이 작업에 집중할 수 있도록 도와줍니다.
스켈레톤 로더에 대한 자세한 내용은 Bill Chung의 이 문서에서 확인할 수 있습니다.

 

 

 

애니메이션을 위해 인위적으로 로딩 시간을 연장하지 마세요.
명확한 로딩 피드백 없이 불필요한 애니메이션을 사용하면 사용자의 불만을 초래할 수 있습니다. 디자이너는 사용자 만족도를 유지하고 불필요한 대기 시간을 최소화하기 위해 진행률 표시줄이나 스켈레톤 화면과 같은 의미 있는 로딩 표시기를 우선적으로 제공해야 합니다. 트립어드바이저는 에어비앤비처럼 스텐실 로더를 사용하는 대신 애니메이션 부엉이 아이콘으로 사용자에게 즐거움을 주는 방법을 선택했습니다. 애니메이션은 전반적인 경험을 향상시킬 수 있지만, 사용자가 시간을 낭비하고 있다는 느낌을 받게 해서는 안 됩니다.

점진적 로딩으로 콘텐츠를 점진적으로 표시하세요.
점진적 로딩은 사용자가 전체 페이지가 로드될 때까지 기다리게 하는 대신 필수 요소부터 우선순위를 정하여 콘텐츠를 점진적으로 표시할 수 있습니다. 이 기술은 사용자가 페이지와 더 빨리 상호 작용을 시작할 수 있으므로 체감 성능을 향상시키고 체감 대기 시간을 줄여줍니다. 프로그레시브 로딩은 더욱 매력적인 경험을 제공할 뿐만 아니라 다양한 네트워크 조건을 수용하여 사용자가 지연 없이 웹사이트 또는 앱의 핵심 기능에 액세스하고 상호 작용할 수 있도록 보장합니다.

 

 

 

진행률 표시기를 전략적으로 배치하여 사용자의 기대치를 안내하세요.
원형 진행률 표시기를 사용자 상호 작용에 맞춰 전략적으로 배치하세요. '스와이프하여 새로 고침'을 구현할 때는 표시기를 상단에 배치하여 위에서부터 새로운 콘텐츠를 예상할 수 있도록 합니다. 마찬가지로 아래로 스크롤할 때 하단에 표시기를 배치하면 곧 나올 콘텐츠를 알릴 수 있습니다. 진행률 표시기를 콘텐츠 모양에 맞춰 정렬하면 사용자의 기대치를 높이고 더 부드러운 로딩 환경을 제공할 수 있습니다.

 

 

 

긴 프로세스 중에도 중단 없이 시스템을 사용할 수 있습니다.
긴 프로세스 중에도 사용자에게 제어권과 유연성을 제공하세요. 전체 화면 진행률 표시로 차단하는 대신 백그라운드에서 프로세스를 실행하면서 진행 상황을 명확하게 파악할 수 있도록 하세요. 사용자가 시스템을 계속 사용할 수 있도록 허용하고 필요한 경우 프로세스를 취소하거나 중단할 수 있는 기능을 제공하세요. 사용자에게 제어 권한을 부여하면 사용자 환경이 개선되고 효율적인 멀티태스킹이 가능해집니다.

 

 

 

예상 시간을 전달하여 긴 프로세스 동안 사용자의 기대치를 관리하세요.
프로세스 소요 시간에 대한 예상 시간을 알리는 것은 기대치를 설정하고 사용자의 불안을 줄이는 데 매우 중요합니다. 예상 시간은 명확성과 통제력을 제공함으로써 사용자가 자신의 활동을 계획하고 대기 시간 동안의 불만을 완화하는 데 도움이 됩니다. 진행률 표시줄, 카운트다운 또는 정보 메시지를 통합하면 사용자 만족도를 크게 높일 수 있습니다.

 

 

 

긴 프로세스가 진행되는 동안 사용자가 시스템 응답성을 의심하지 않도록 명확한 시각적 신호를 제공하세요.
긴 프로세스 중에는 사용자가 시스템이 멈추거나 응답이 없는지 의심할 수 있는 상황을 피하는 것이 중요합니다. 사용자가 불확실한 상태에 놓이게 되면 좌절감과 신뢰 상실로 이어질 수 있습니다.

 

 

 

이를 완화하려면 진행률 표시기, 정보 메시지 또는 애니메이션과 같은 명확한 시각적 단서를 제공하여 시스템이 사용자의 요청에 대해 적극적으로 작업하고 있음을 사용자에게 알리는 것이 필수적입니다. 잠재적인 의구심을 사전에 해결하고 진행 중인 프로세스에 대한 정보를 사용자에게 제공함으로써 사용자의 신뢰를 유지하고 전반적인 사용자 경험을 향상시킬 수 있습니다.

Apple은 시스템 피드백에 관한 한 좋은 사례와 나쁜 사례의 모범이 될 수 있습니다. 예를 들어, iOS 소프트웨어 업데이트 설치 과정에서 톱니바퀴 애니메이션이 계속 회전하면 전체 진행률 표시줄에 진행 상황이 보이지 않더라도 프로세스가 진행 중이라는 사실을 사용자에게 안심시킬 수 있습니다.

 

 

 

 

진행률 표시기를 다른 인터페이스 구성 요소와 통합하기
진행률 표시기를 버튼과 같은 다른 인터페이스 구성 요소와 통합하면 일관된 사용자 경험을 제공하고 작업-응답 관계를 명확히 할 수 있습니다.

또한 불확실한 로더에서 확실한 로더 및 성공 상태로 원활하게 전환하면 사용자의 집중력과 참여도가 높아져 전반적인 만족도가 향상됩니다.

 

 

 

의미 있는 피드백을 제공하고, 복잡한 프로세스를 이해하기 쉽게 설명하며, 백그라운드에서 진행되는 작업에 대해 사용자를 교육하세요.
TurboTax는 데이터 가져오기 프로세스에 의도적으로 속도를 조절하여 사용자가 자신의 계정을 확인하고 정보를 정확하게 가져오고 있다는 확신을 가질 수 있도록 함으로써 이러한 접근 방식의 모범을 보여줍니다. 적절한 기대치를 설정하고 작업의 중요성을 강조함으로써 사용자는 프로세스를 더 깊이 이해하고, 더 많은 정보와 교육을 받았다고 느끼며, 시스템을 신뢰할 수 있는 것으로 인식하게 됩니다.

 

이미지 및 더 많은 예제 보기 https://www.appcues.com/blog/loading-pages-design#

 

 

대기 시간 동안 재미 요소를 추가하면 사용자의 스트레스를 줄이고 전반적인 경험을 향상시키는 데 도움이 될 수 있습니다.

게임에서는 게임과 관련된 힌트, 팁 또는 흥미로운 지식을 제공하는 재미있는 로딩 화면을 포함하는 방식으로 이러한 접근 방식을 도입하는 경우가 많습니다. 예를 들어, 하스스톤에서는 대기 시간이 비정상적으로 길어지면 재미있는 매치메이킹 카피라이팅과 함께 대략적인 대기 시간 요소가 표시됩니다. 이는 대기 시간 동안 사용자의 참여와 재미를 유지할 뿐만 아니라 추가 정보나 인사이트를 제공하여 대기 시간을 더욱 즐겁고 교육적인 경험으로 만들어 줍니다.

 

 

 

결론적으로 UX/UI 디자인에서 로딩 및 진행률 표시기를 최적화하는 것은 원활하고 매력적인 사용자 경험을 제공하는 데 매우 중요합니다. 디자이너는 사용자 심리를 고려하여 적절한 지표를 구현하고 다른 인터페이스 구성 요소와 원활하게 통합함으로써 사용성을 개선하고 사용자 불만을 줄이며 시스템 응답성에 대한 긍정적인 인식을 심어줄 수 있습니다.

 

 

출처:

https://uxdesign.cc/loading-progress-indicators-ui-components-series-f4b1fc35339a