Creative Dialogue

November 8, 2016 /디자인 /

XD 필수 항목: 애니메이션 진행률 표시기의 모범 사례

시스템 상태의 가시성은 유저 인터페이스 디자인에서 가장 중요한 원칙 중 하나입니다. 사용자는 사용 중인 시스템에 대해 알고 싶어하는데, 특히 시스템이 한창 가동 중일 때 언제든지 현재 상황을 파악하여 시스템 상태를 파악하길 원합니다. 대기 상태의 애니메이션 진행률 표시기는 작업이 진행 중이거나 로딩되고 있을 때 사용자에게 시스템 상태를 알리는 가장 일반적인 방법입니다.

본 게시물에서는 애니메이션 진행률 표시기의 주요 유형에 대해 살펴보고 각 유형을 언제 어떻게 사용하면 적합한지 활용 팁을 소개합니다.

우수한 인터랙션 디자인 = 사용자에게 피드백 전달

앱에서 즉각적인 반응을 눈으로 확인하는 것이 가장 바람직하지만 처리 속도 면에서 앱이 가이드라인 대로 즉시 실행되지 않는 경우가 있습니다. 인터넷 연결 상태가 좋지 않거나 OS 업데이트 설치와 같이 운영 체제 자체가 오랜 시간을 끌게 되면 이로 인해 앱의 반응 속도가 느려집니다. 이러한 경우 사용자의 불안을 최소화하기 위해 앱이 사용자가 요청한 작업을 현재 처리 중이며 실제로 진행 단계에 있다는 것을 알려 사용자를 안심시켜야 합니다. 따라서 사용자가 납득할 만한 일반적인 시간 범위 안에서 앱에서 진행되고 있는 작업에 대해 사용자에게 피드백을 제공해야 합니다.

여러 유형의 즉각적인 피드백 상시 제공

사용자의 대기 시간은 작업을 개시하는 순간부터 시작되는데 화면에 시스템이 작업 요청을 받았는지를 알려주는 표시기가 나타나지 않는다면 사용자에겐 최악의 상황입니다. 앱에서 작업을 완료하는 데 시간이 걸릴 수 있다는 사실을 사용자에게 알려주지 않으면 사용자는 앱이 요청을 수신하지 못했다고 생각하여 다시 시도하게 됩니다. 피드백이 전달되지 않아 불필요한 수많은 클릭이나 탭이 발생합니다.

버튼 클릭이나 당겨서 새로 고침과 같은 동작을 한 뒤에는 즉각적인 반응이 뒤따라야 합니다. 사용자로부터 요청을 받은 직후에 바로 몇 가지 시각적인 피드백을 통해 프로세스가 시작되었음을 알리는 것이 중요합니다.

image14

당겨서 새로 고침 동작. 이미지 출처: 비핸스(Behance)

1 이상 소요되는 모든 작업에 진행률 표시기 사용

앱이 사용자 입력에 반응하여 결과를 표시하는 시간은 보통 0.1~1초 사이입니다. 이 범위 내에서는 약간의 지연이 있더라도 현재 작업에 계속 집중하게 됩니다. 그러나 1초가 지나게 되면 사용자의 집중력은 떨어지기 시작하고 이윽고 자신들이 반응 속도가 느린 앱을 마냥 기다리고 있음을 간파하게 됩니다.

사용자의 불안을 줄이기 위해서는 1 이상 소요되는 모든 작업에 대한 기다림의 이유를 진행률 표시기를 통해 알려줘야 합니다(참고: 로딩에 걸리는 시간이 1초 미만인 경우 사용자가 화면에 잠깐 비쳤다 사라지는 변화에 오히려 불안감을 느낄 수 있으므로 애니메이션 사용을 권장하지 않음). 애니메이션 진행률 표시기는 기다림으로 인한 부정적 측면의 효과를 완화하고 사이트나 앱에서 사용자의 집중 시간을 연장해 줍니다.

진행률 표시기의 유형

진행률 표시기는 앱이 사용자의 마지막 요청 작업을 처리하는 데 더 많은 시간을 필요로 한다는 것을 사용자에게 알려줍니다. 진행률 표시기의 가장 간단한 형태는 미확정 유형으로 이러한 유형의 표시기는 사용자에게 얼마나 걸릴지 알려주지 않으면서 완료될 때까지 기다릴 것을 요청합니다.

image11

무한 루프 애니메이션은 시스템이 작업 중이라는 피드백은 전해주지만 사용자 대기 시간에 대해서는 어떠한 정보도 제공하지 않음. 이미지 출처:비핸스

대개는 2~10초가 소요되는 빠른 작업에 한하여 이러한 진행률 표시기를 사용하는 것이 원칙입니다. 하지만 사용자가 돌고 도는 바퀴나 무한 반복 애니메이션을 더 오랜 시간 응시하도록 방치할 경우 웹 사이트를 이탈하거나 앱을 종료할 가능성이 커진다는 것을 명심해야 합니다.

또 다른 진행률 표시기 유형에는 작업 소요 시간을 정확하게 또는 대략적으로 보여주는 유형이 있습니다. 이러한 표시기를 확정 유형이라고 합니다. 이 유형은 진행이 완료된 비율과 남은 비율을 함께 보여주면서 현재 진행 과정을 표시하므로 대기 상태의 애니메이션 피드백 중 가장 유용한 정보를 제공한다고 할 수 있습니다. 완료까지의 진행 상황을 보여주는 시각적 표시기는 사용자를 안심시켜 대기하려는 의지를 심어줍니다.

image00

미확정 표시기가 명시되지 않은 대기 시간을 시각화하는 반면, 확정 표시기는 작업에 소요되는 시간을 표시함. 이미지 출처: 머티리얼 디자인(Material Design)

가장 널리 사용되는 가지 애니메이션 진행률 표시기

가장 흔하게 사용되는 두 가지 애니메이션 진행률 표시기 유형은 루프 애니메이션완료율 표시기입니다.

루프 애니메이션

대부분의 루프 애니메이션 진행률 표시기는 미확정 유형으로 길든 짧든 각종 지연을 나타내므로 부정적인 의미를 내포하는 경향이 있습니다. 예를 들어 애플(Apple) iOS(가운데 점 영역을 기준으로 방출되는 듯한 회색 선들의 스피너)의 기본 로딩 아이콘은 다양한 운영 체제의 기능을 표시하는데 디바이스 부팅부터 네트워크 연결 및 데이터 로딩 문제에서 비롯되는 모든 시스템의 상태를 나타냅니다. 이러한 이유로 사용자는 진행률이나 대기 시간에 대한 정보 없이 로딩 스피너만 표시되는 것을 좋아하지 않습니다.

image03

로딩 스피너를 바라보는 것은 시계 바늘을 보는 것 같아서 그 시점에서 시간이 멈춘 것처럼 더디게 느껴짐. 이미지 출처: appance

완료율 표시기

완료율 표시기는 0%부터 100%까지 채워나가는 확정 유형의 진행률 표시기로 시간이 갈수록 수치가 올라갑니다. 완료율 표시기에는 선형과 원형 두 가지가 있습니다.

Loading bar

Loading bar

선형 완료율 진행률 표시기. 이미지 출처: 어도비 스톡

percentdone

원형 완료율 진행률 표시기. 이미지 출처: 어도비 스톡

대체로 10초 이상 소요되는 작업에는 완료율 애니메이션을 사용합니다. 제이콥 닐슨(Jakob Nielsen)의 반응 시간 연구에서 사용자가 작업에 집중할 수 있는 한계는 10초인 점을 감안할 때, 이 한계 시간을 넘겨 얼마나 기다려야 결과를 볼 수 있는지에 대한 충분한 정보가 없는 상태에 놓이게 되면 사용자의 인내심이 순식간에 바닥납니다.

진행률 표시기에 대한

대기 시간을 단축할 수 없다면 기다리는 시간을 즐겁게 만들기 위해 늘 노력해야 합니다.

기다려야 하는 이유 설명

대부분의 경우 기다림의 이유를 알게 된다면 사용자들이 더 인내할 가능성은 커집니다. 사용자에게 어떤 작업이 진행 중인지 알려주거나 대기해야 하는 이유를 설명하는 문구를 추가하여 상황을 더욱 명료하게 한다면 도움이 될 것입니다.

image02

스카이스캐너(Skyscanner)는 사용자에게 이용 가능한 모든 항공사를 확인하여 최적의 항공편을 검색하고 있음을 알려줌

시간 소모적인 작업의 경우 대략적인 예상 소요 시간 제공

반드시 정확할 필요는 없습니다. 간단하게 “약 5분 정도 소요됩니다.”라는 문구만으로도 사용자를 이해시키기에 충분하며 더 대기하도록 유도할 수 있습니다.

image08

애플 iOS의 소프트웨어 업데이트 예상 시간

완료된 절대 작업량 표시

작업이 얼마나 걸리는지 사전에 알 수 없는 시간 소모적인 작업의 경우 완료율 표시기를 사용하는 것은 불가능하지만 완료된 절대 작업량을 통해 진행 상황에 대한 피드백을 제공할 수 있습니다. 작업 단계의 수를 명시하는 아래 예의 경우 총 몇 단계가 있고 그중 몇 단계가 완료되었는지를 아는 것만으로도 사용자는 대략적인 진행 상황을 짐작할 수 있습니다.

image01

진행률을 정확하게 모니터링할 수 없는 경우 백분율 대신 단계 수를 표시하는 방법 고려

진행률 막대를 항상 움직이는 형태로

진행률 막대를 통해 사용자는 작업 진행 속도를 짐작하여 완료 시점을 예측할 수 있습니다. 그러한 가운데 예상치 못한 중단 상황이 발생하면 사용자 만족도에 영향을 미치게 됩니다. 최악의 상황은 진행률 막대가 99%에 도달했을 때 갑자기 멈추는 것입니다. 이 경우 대부분의 사용자는 앱이 중단되었다고 생각하여 좌절하게 됩니다. 다행히도 간단한 해결책이 있습니다. 진행률 막대가 지속적으로 꾸준히 움직이도록 만들어서 미미한 지연인 것처럼 보이도록 가장할 수 있습니다.

image10

이미지 출처: 비핸스

진행률 막대를 속도감 있게 만들기

사람들이 대기 시간을 어떻게 인식하는지의 문제가 실제 앱의 처리 속도만큼 중요한 요소가 된다는 것을 명심할 필요가 있습니다. 진행률 막대의 속도가 더욱 빠르게 느껴지도록  하려면 처음에는 느린 속도로 시작한 다음 이후 갈수록 빠르게 움직이는 점진적 애니메이션으로 만들어야 합니다. 이렇게 하면 사용자는 완료 시간이 임박했음을 느끼게 됩니다.

image12

이미지 출처: 비핸스

시각적 분산 효과 활용

창의적인 진행률 표시기로 사용자의 시간 개념을 둔하게 만들 수도 있습니다. 대기하는 동안 앱에서 흥미로운 장면을 보여줄 경우 사용자는 대기 시간 자체에 덜 집중하게 됩니다. 이렇게 분산 효과를 제공하여 사용자가 기다리는 동안 지루하지 않게 만들 수 있습니다. 예를 들면 다음과 같은 재미있는 요소입니다.

image04

이미지 출처: 비핸스

귀여운 애니메이션도 있습니다.

image05

이미지 출처: 비메오

앱이 로딩될 때까지 사용자의 시선을 사로잡는 흥미로운 애니메이션도 추가할 수 있습니다.

image07

멋진 애니메이션은 방문자의 시선을 분산시켜 긴 로딩 시간을 잠시 잊게 해줌. 이미지 출처: 비핸스

결론

앱과 사이트 속도와는 무관하게 어떤 작업을 진행하는 데에는 시간이 걸리기 마련입니다. 로딩 스피너나 완료율 표시기와 같은 대기 상태의 애니메이션을 활용하면 사용자에게 현재 작업 상태를 알려 불안감을 덜어주므로 원하는 정보가 로딩될 때까지 기다릴 가능성이 커집니다. 가장 효과적인 방법은 2~10초의 빠른 작업에는 루프 애니메이션 표시기를 사용하고 10초 이상의 작업에는 완료율 표시기를 사용하는 것입니다. 효과적인 진행률 표시기는 궁극적으로 사용자가 작업이 완료될 때까지 이탈하지 않게 하고 사이트나 앱에 대해 더욱 긍정적인 인상을 심어줍니다.

 

 

디자인. 프로토타입. 공유. 모두가 가능한 하나의 올인원 앱 Adobe XD.

웹사이트 및 모바일 앱을 디자인하고  프로토타이핑하고 공유할 수 있는 최초의 올인원 툴인 Experience Design CC(베타)를 사용하면 아이디어 구상에서 프로토타이핑에 이르는 과정을 신속하게 진행할 수 있습니다. 베타 버전을 테스트해 보시고, 여러분의 피드백을 공유해 주십시오.

DOWNLOAD

 

 

 

 

60e4bf5cdc458c49be1174619cf89ccb

저자 – 닉 배비치

닉 배비치(Nick Babich)는 개발자로, 기술에 열정적이며 UX에 큰 애착을 가지고 있습니다. 그는 지난 10년 동안 전문 소프트웨어 개발 업계에 몸담았으며 그의 다양한 관심 분야 중 광고, 심리학 및 영화에 특히 조예가 깊습니다.

 

 

디자인

Join the discussion