[UI]스켈렉톤 UI = Progress Indicator(Skeleton)

https://blog.prototypr.io/skeleton-loader-an-overview-purpose-usage-and-design-173b5340d0e1

“API 응답 시간이 짧은 경우에는 스켈레톤이 보여지지 않게끔” from KaKao tech

 

 

 스켈렉톤 UI사용 이유는

(a) 사용자에게 현재 시스템이 시간이 필요하다. (b) 대략적인 시간은 얼마다 라는 정보를 전달하기 위해서이다.

Progress indicators tell users 
(a) that the system needs more time to process the last user action (for instance, to load a file, or to install a new update), and (b) approximately how much time remains. 

https://www.nngroup.com/articles/progress-indicators/

 

Progress Indicator와 관련된 주요 지침

1. (대전제)약 1초 이상 걸리는 작업에는 Progress Indicator를 사용하십시오.

2. Loop Animation은 빠른 동작에만 사용하십시오.
- 피드백이 없는 것보다야 있는게 정적인 피드백(단순 '로딩중')이 있는게 좋지만, 그래도 정적인 피드백은 사용하지 않는게 좋다. 이유는 만약 시스템이 렉(hagns or stuck) 걸리면 사용자는 진행상황을 인지할 수 없기 때문이다.
While any feedback is better than none, static indicators should be replaced with another type of indicator, because they do not offer enough information about what is happening. If the system hangs or becomes stuck, the user has no way of knowing they need to restart the action.

3. Percent-done Animation은 10초 이상 걸리는 작업에 사용하십시오.
- 우리는 10초 이상을 기달려야 하는 상태에서는 '빙글빙글 도는 애니메이션'을 추천하지 않습니다. 왜냐하면 사용자는 빠르게 참을성이 사라지기 때문에 진행상황에 변화가 없는 상황에서 말이다. 게다가 스핀(삥글삥글)이 계속 돌고 있다면 사용자는 이게 작동하는지 아닌지 확인할 수 없다.
we don’t recommend looped animation for actions that take longer than 10 seconds, because users quickly grow impatient if they feel like they aren’t making progress. And if a spinner is rotating indefinitely, users cannot be sure if the system is still working or if it’s stopped, so they may decide to abandon the task entirely.

로드하는데 "1초 미만이 소요되는 모든 항목의 경우 반복되는 애니메이션을 사용하면 주의가 산만해집니다. 사용자는 화면에서 어떤 일이 발생했는지 따라갈 수 없고, 화면에 깜빡이는 내용에 대해 불안을 느낄 수 있습니다." 따라서 1초 미만의 로딩 상태에서는 skeleton UI를 사용하지 않는것을 카카오 테크에서는 권장합니다.

 

 

출처

https://www.nngroup.com/articles/progress-indicators/

https://tech.kakaopay.com/post/skeleton-ui-idea/#react-suspense와-함께-구현하기