[HIG] 애플 휴먼 인터페이스 가이드라인 리딩 -2
Loading
3> Loading
콘텐츠가 로딩될 때 보여지는 화면은 여러가지이다. Spinner, Bar 등 브랜드마다 커스텀된 로딩 페이지를 보여주기도 한다. 로딩 페이지 역시도 사용자 경험에 아주 중요한 부분중 하나이다. 로딩 페이지는 이 서비스가 활성화 되고 있다는것을 사용자에게 알려주며, 이 앱을 사용할 수 있다는것을 인지할 수 있게 도와주는 아주 중요한 요소이다. 만약 로딩중이라는 것을 사용자에게 알려주지 않는다면 사용자는 이 서비스는 비활성화된 서비스로 인지하고 서비스를 떠나게 될 것이다.
When content is loading, a blank or static screen can make it seem like your app is frozen, resulting in confusion and frustration, and potentially causing people to leave your app.
콘텐츠가 로딩되고 있을 때, 빈 화면 혹은 정지 화면을 보여준다면 앱이 멈춘것 처럼 보일 수 있으며, 혼란스럽고 좌절감을 낳을 것이고, 잠재적으로 사용자들이 앱을 떠나버릴 수 있습니다.
Progress Indicator, Activity Indicator ?
HIG 에서는 Progress Indicator 과 Activity Indicator 라는 개념이 나뉘어져 있는데, 나는 이를 Progress Indicator 를 "진행" 상태를 보여줄때 표시되는 것으로, Activity Indicator 는 "작동" 상태를 보여줄 때 표시 되는 것으로 이해하였다. 두가지를 명확하게 구분하고 있지는 않지만, 진행중이냐, 작동중이냐 에 따라 적절한 UI 를 고민해 보는것은 디자이너에게 중요한 일일것이다.
Progress Indicator 는 흔히 스피너와 바 두가지 를 많이 사용하는 듯 하다.Make it clear when loading is occurring. At minimum, show an activity spinner that communicates something is happening. Even better, display explicit progress so people can gauge how long they’ll be waiting.
현재 로딩 진행 중임을 확실히 하세요. 최소한, 무언가 일어나고 있다는 것을 알리는 움직이는 스피너를 보여주세요. 얼마나 기다려야 하는지 판단할 수 있는 확실한 진행 상황을 알려주면 더 좋습니다.
A progress bar includes a track that fills from left to right to show the progression of a task with a known duration.
프로그레스 바는 왼쪽부터 오른쪽으로 채워지는 길(트랙)을 포함하며, 이는 예측 가능한 지속시간값이 있는 일의 진행 척도를 보여줍니다.
Use progress bars for tasks with a well-defined duration. Progress bars are great for showing the status of a task, especially when it helps convey how much longer the task needs to complete.
프로그레스 바는 알기 쉬운 지속시간 값이 있는 일에 사용하세요. 프로그레스 바는 일의 현재 상태를 보여주기 매우 좋으며, 특히 일이 완료될 때까지 얼마나 남았는지 전달하는데 좋습니다.
Activity Indicator 는 주로 스피너 형태의 그래픽을 많이 사용하는 추세이다. 이것이 활성화 중이라는것을 알려주는 좋은 지표이다. 세번째 이미지는 맥 사용자라면 누구나 아는 무지개 커서 ..
Don’t make people sit around staring at a static screen waiting for your app to load content or perform lengthy data processing operations. Use activity indicators and progress bars to let people know your app isn’t stalled and to give them some idea of how long they’ll be waiting.
사용자들이 콘텐츠를 로딩하거나 데이터와 관련해 긴 작동을 하길 기다리며 고정된 화면을 바라만 보게 만들지 마세요. Activity Indicator와 Progress bar를 사용해 사용자들이 앱이 설치되지 않았다는걸 알게 하고, 얼마나 기다려야 할지 감을 잡을 수 있도록 하세요.
Educate or entertain people to mask loading time.
로딩되는 시간에 사용자들에게 지식을 알려주거나 즐겁게 하세요.
다음은 배달의 민족 로딩 페이지인데, 배달의 민족 답게 콘텐츠를 로딩할때 지루하지 않게 음식 이미지를 넣어 신선함을 주고 자신들의 브랜딩을 강화한다.
배달의 민족 로딩페이지
에어비앤비 로딩페이지. 무난하다.우리는 이미 수많은 서비스를 거쳐가며 '아 이것은 로딩중이고, 곧 화면이 등장하겠군' 을 수없이 학습해왔다. 많은 브랜드들은 랜딩페이지부터, 로딩페이지까지 1-2초 밖에 안되는 짧은 화면에도 자신들의 브랜딩을 강화하기 위한 수단으로 활용하고 있다. 로딩페이지에 사용된 그래픽이 점이든, 이미지이든, 스피너이든, 우리는 로딩 화면이라는것을 안다. 요즘에는 유튜브 로딩 화면처럼, 글과 그림, 영상 등 콘텐츠 위주의 서비스들은 콘텐츠의 뼈대만 보여주는 화면을 로딩 화면으로 사용한다. 콘텐츠 중심 서비스는 이러한 로딩 화면 이후에 다양한 콘텐츠가 바로 활성화 될것이라는것을 사용자들에게 알려준다.
유튜브 로딩페이지. 뼈대만 보여준다는 의미에서 <스켈레톤 UI> 라고 부르기도 함.Don’t make people sit around staring at a static screen waiting for your app to load content or perform lengthy data processing operations. Use activity indicators and progress bars to let people know your app isn’t stalled and to give them some idea of how long they’ll be waiting.
사용자들이 콘텐츠를 로딩하거나 데이터와 관련해 긴 작동을 하길 기다리며 고정된 화면을 바라만 보게 만들지 마세요. 활동 표시자와 진행 바를 사용해 사용자들이 앱이 설치되지 않았다는걸 알게 하고, 얼마나 기다려야 할지 감을 잡을 수 있도록 하세요.
Keep activity indicators moving. People associate a stationary activity indicator with a stalled process. Keep it spinning so they know something’s happening.
액티비티 인디케이터는 계속 움직이게 하세요. 사용자들은 멈춰있는 인디케이터가 정지된 진행상황을 의미한다고 생각합니다. 계속 돌아가게 하여 무언가 일어나고 있다는걸 알려주세요.
Indicator 들은 끊임없이 움직여야 한다. 짧은 시간뒤에 바로 페이지가 넘어가지만, 그 짧은 순간에도 로딩 페이지의 인디케이터들은 움직여야한다. 사용자에게 이 서비스는 사용 가능하다는 것을 계속해서 인지 시켜야 하는것이다. 이런 짧은 순간도 사용자 경험에 영향을 미친다.
