brunch

You can make anything
by writing

C.S.Lewis

by 김준범 Aug 31. 2020

프로그래스 바와 스피너 사용법

Progress Bars vs. Spinners: When to Use Which


당신이 가게에서 줄을 서 있는데 오랜 시간 동안 제자리에 있다면 어떻게 느끼겠는가? 아마 참지 못하고 떠날 것이다. 사용자들은 스크린에서 몇 초동안 스피너를 보고 있는 것도 매우 길게 느끼면서 똑같은 상황에 처하게 된다. 



스피너는 긴 시간 동안 로딩하는 데 사용하는 것이 아니다.

스피너는 사용자에게 로딩이 얼마나 걸리는지 알려주지 않는다. 만약 긴 시간 동안 로딩하는데 스피너를 사용한다면 사용자는 앱에 뭔가 이상이 있다고 느낄 것이다. 부족한 피드백은 불확실한 상황을 만들고, 사용자은 그것이 나쁜 상황이라고 가정하게 된다.

사용자는 로드하는 데 시간이 오래 걸리므로 기다리지 못할 것이라고 생각한다. 그리고 성급해져서 백 버튼을 누르거나 앱을 종료해버릴 것이다.



4초 규칙

사용자가 앱을 계속 사용하게 만들려면, 4초 이상 걸리는 로딩에는 스피너를 사용하면 안 된다. 연구 결과에 따르면 사용자가 인내심 있게 기다릴 수 있는 시간은 4초라고 한다.

이 결과는 4초 이후에는 사용자의 행동 의도가 4초 후에는 변화하기 시작한다는 것을 의미한다.



스피너를 보여주는 경우

사용자는 앱의 반응 시간이 즉각적이길 기대한다. 즉각적인 반응은 1초 이하를 의미한다. 1초 후에도 시각적인 피드백이 없다면 사용자는 걱정하기 시작한다.

1초 이상이 걸리는 프로세스라면 스피너를 보여주어야 한다. 그렇게 하면 사용자에게 앱이 로딩 중이라는 것을 알 수 있게 해 주고, 걱정을 덜어줄 수 있다.



프로그래스 바는 긴 시간을 참을 수 있게 만들어준다.

4초 이상이 걸리는 프로세에서는 프로그래스 바를 사용해야 한다. 사용자들은 프로그래스 바를 볼 때 긴 시간을 견디기 쉬워진다.

프로그래스 바는 로딩 시간이 얼마나 걸릴지 명확하게 보여준다. 막대 모양의 시각적 단서는 진행 과정을 보여주어 사용자가 기다릴 수 있도록 도와준다. 스피너는 사용자에게 로딩이 얼마나 진척되었는지 보여주지 않는다. 사용자는 액션이 진행 중이라는 것을 알 수 없어 기다릴 수 있는 동기를 가지지 못한다.



프로그래스 바를 보여주는 방식

프로그래스 바는 사용자에게 프로그래스가 얼마나 진척되었는지 보여주어야 한다. 프로그래스 바는 점진적이고 일관적인 속도로 왼쪽에서 오른쪽으로 애니메이션 되어야 한다. 애니메이션이 오랜 시간 동안 멈춰있으면, 사용자는 로딩이 멈췄다고 생각하고 더 이상 기다리지 않을 것이다.

프로그래스 바에는 또한 숫자로도 진척도를 보여주어야 한다. 프로그래스가 1분 미만이라면, 진행된 퍼센트나 로딩된 아이템의 개수를 보여주어라. 그리고 어떤 액티비티를 로딩하고 있는지도 보여주어라.

로딩이 1분이 넘어간다면, 로딩 시간이 얼마나 남았는지 보여주어야 한다. 이 정보를 통해 로딩 시간이 평소보다 더 걸릴 수 있음을 알려줄 수 있다. 몇 분이 남았는지 알려주면 사용자가 스크린을 잠시 떠났다가 돌아올 수 있게 해 줄 수 있다.



스피너를 남용하지 말아라(Don't Go Spinner Crazy).

많은 디자이너들이 모든 프로세스에 스피너를 사용하는 습관을 가지고 있다. 그러나 로딩 시간이 길 때 스피너를 사용하면 사용자의 불만을 일으킬 것이다. 필요할 때 프로그래스 바를 사용하여 사용자의 불만을 방지해야 한다.

프로그래스 바는 긴 로딩 시간을 견딜 수 있게 만들어준다. 사용자는 앱이 그들을 위해 일을 하고 있는 중이라는 것을 알고 있다면 기다려줄 수 있다. 그러나 기대한 시간보다 더 오래 걸린다면, 시각적인 피드백을 필요로 한다. 무엇을 기다리고 있는지 알려주지 않는다면, 사용자는 인내심을 잃고 떠날 것이다.




원문 출처 : https://uxmovement.com/navigation/progress-bars-vs-spinners-when-to-use-which/


작가의 이전글 사용자가 읽는 워크쓰루 디자인

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari