본문 바로가기

HIG

HIG Components) Progress indicators 이해하기

반응형

저번에 "Loading"에 대해서 읽었고 거기에 연관된 Progress indicators를 이어서 읽어보도록 하겠다. 

 

짧으니 가볍게 읽어보는 것도 좋을 것 같다. 

https://declan.tistory.com/72

 

HIG Patterns) Loading 이해하기

https://developer.apple.com/design/human-interface-guidelines/patterns/loading Loading - Patterns - Human Interface Guidelines - Design - Apple Developer Loading While content loads, avoid showing a blank or static screen that might make people think your

declan.tistory.com

https://stackoverflow.com/questions/44234635/horizontal-linear-progress-bar-like-android-in-ios

Progress indicators

Progress indicators는 기본적으로 앱이 콘텐츠를 로딩중이거나 긴 작업을 수행 중일때(일반적으로는 네트워크 통신이라고 할 수 있겠다.) 앱이 멈추지 않았음을 보여주는 역할을 한다. 

Progress indicators에는 작업 기간이 알려져있거나 알려지지 않은 경우, 2가지 progress indicators가 있다. 

 

 

Progress indicators를 사용하는 옳바른 방법들은 다음과 같다. 

1. 가능한 determinate progress indicator를 사용하자

흔히 사용하는 이러한 indicator는 프로세스가 진행중인 것을 알 수는 있지만, 얼마나 걸리는지, 얼마나 남은지 확인할 수는 없다. 때문에 determinate progress indicator를 사용하면 유저가 무작정 기다리는 대신, 다시 시작할지, 혹은 작업을 포기하는 것들을 도와줄 수 있다. 

 

2. determinate progress indicator를 사용할 때, 진행 상황을 보여줄 때는 가능한 정확하게 하자

사람들이 작업을 완료하는 데 필요한 시간에 대해서 어느정도 알 수 있도록 진행되는 페이스를 고려하는게 좋다. 

이러한 경우는 다들 한번 씩은 겪어봤을 텐데, 업데이트를 할 때, 초반에는 진행 속도가 빨라서 이제 곧 하겠구나 싶은데 마지막 부분에 엄청 느리게 가곤 했다. 애플에서도 이러한 방법을 되도록 지양하라고 한다. 

(XCode 업데이트 할때는 왜 그러하는지..ㅠ)

 

3. 사람들에게 계속해서 작업이 일어나고 있다는 것을 인식시키도록 progress indicator를 계속해서 움직이자.

사람들은 정지된 indicator를 보면 프로세스가 정지되었거나, 앱이 움직이지 않는 것으로 생각하는 경향이 있다. 

때문에 프로세스가 중단되었다면 사람들이 다음 행동을 할 수 있도록 피드백을 제공하는 것이 좋다. 

 

4. 가능하다면 indeterminate 에서 determinate progress bar 로 전환하자

불확실한 프로세스가 기간을 결정할 수 있는 시점에 도달한다면, deterinate progress bar로 전환하는 것이 좋다. 

사람들은 일반적으로 무엇이 일어나고 있고 얼마나 걸리는지 확인하는데 도움이 되는 determinate progress bar를 선호한다.

 

 

5. 원형 스타일의 indicator에서 바 스타일의 indicator로 바꾸지 말아라

스피너와 프로그래스 바는 크기와 모양이 다르기 때문에, 둘 사이로 전환을 하면 사람들이 혼란스러워 할 수 있다. 

 

6. 도움이 된다면 작업에 대해 추가  컨텍스트를  제공하는 설명을 표시해라

"로딩", "인증"과 같은 모호한 용어는 가치를 거의 추가하지 않기때문에 피하는게 좋다.

 

7. 일관된 위치에 Progress indicator를 표시하자 

progress indicator를 일관된 위치를 선택한다면 사람들은 작업 상태를 안정적으로 찾을 수 있다. 

 

8. 가능하다면, 사람들이 프로세싱을 중단할 수 있도록 하자

사람들이 부정적인 부작용을 일으키지 않고 프로세스를 중단할 수 있다면, 취소버튼을 추가하는게 좋다. 

프로세스를 중단하면 (다운로드된 부분을 잃는 경우?)부작용이 발생할 수 있는 경우, 취소 버튼과 더불어 일시 중지 버튼을 제공하는 것이 유용할 수 있다. 

앱스토어 업데이트를 보면 다음과 같이 진행률과 일시정지 버튼을 제공하는 것을 볼 수 있다. 

 

9. 과정을 중단하는 것이 부정적인 결과를 일으킬 수 있다는 것을 알려주자

프로세스를 취소하면 진행에 손실이 발생할 때, 취소를 확인(한번 더 취소를 할 것인지 묻는 과정?)하거나 재개할 수 있는 옵션을 제공하는 것이 도움이 된다. 

 

 

그리고 플랫폼(iOS, iPadOS)  별 고려사항이 있는데 홈페이지에서 직접 읽어보는게 더 많은 도움이 될 것 같다. 

 

 

https://developer.apple.com/design/human-interface-guidelines/components/status/progress-indicators

 

Progress indicators - Status - Components - Human Interface Guidelines - Design - Apple Developer

Progress indicators Progress indicators let people know that your app isn’t stalled while it loads content or performs lengthy operations. Some progress indicators also give people a way to estimate how long they have to wait for something to complete. A

developer.apple.com

반응형

'HIG' 카테고리의 다른 글

HIG Patterns) Loading 이해하기  (0) 2022.12.14
HIG(Human Interface GuideLines) 읽어보기  (0) 2022.12.12