Progress Indicator
제품 사용성에 대해서 어떤 필자는 프론트엔드 개발자에 대해 이렇게 말한다. "일관된 시각적 계층 구조 유지와 시각적 노이즈를 제거하고, 사용자에게 제공되는 알림, 입력 라벨을 작성하는 것은 제품 사용성에 중요한 역할을 한다." 개발자가 사용성에 대해 고민하는 것은 UX 디자이너와의 차이점이 무엇일지, 차이점이 있다면 개발자로서 어떤 역할을 이룰 수 있는지 고민해 볼 주제인거 같다.
제품 서비스는 사용자의 피드백을 받으며 제품과 경험을 만든다. 현 시대에 인터넷이 조금이라도 느리면 답답함이 느껴지는 것처럼 기업에서도 고객의 피드백을 통해서 빠른 성장, 빠른 조치, 개선된 사용자 경험으로 답답함 없이 지속적인 성장세를 타는 것을 원할거라 생각한다. 그런데 고객의 피드백 이전에 미리 적절한 UX를 제공한다면 한 스텝 더 빨리 시작할 수 있고 고객을 빠르게 잡을 수 있을거라 예상한다.
그 방법 중 Progress Indicator에 대해 알아 볼거다. Progress Indicator는 시스템이 중단되거나 사용자 입력을 기다리고 있지 않음을 확인하기 위해 작업이 지핸 중임을 사용자에게 알리기 위한 인터페이스 요소이다.
- Progress bar
- Throbber
- Splash screen
- Mouse pointer
- A simple textual percentage
The Power of Feedback: Make Users Feel You're Listening
시스템이 사용자의 입력을 이해하고 진행되고 있음을 사용자에게 확신시킨다. 빠른 피드백은 사용자 경험을 향상 시킨다. 프론트엔드 개발자로서 사용자 경험을 보완하는 것은 Javascript의 코드 레벨을 개선하고 사용자 경험을 개선할 수 있다. Javascript는 사용자를 위한 목적이 아니라 도구로서 활용되어야한다.
Progress Indicator 주요 기능
- 시스템 동작하고 있음을 인식시키고 사용자를 안심시키고 사용자의 불확실성을 줄인다.
- 사용자가 대기하는 동안 볼 수 있는 것을 제공해서 대기 시간을 더 쉽게 견딜 수 있다.
- 사용자에게 시스템 동작이 끝날 때까지 기다릴 이유를 제공한다. 단순히 무언가 일어나고 있는 것처럼 보인다.
- 사용자는 시간에 대한 인식을 줄일 수 있다. 사용자는 피드백에 인지 부하를 부과해서 대기하는 지루한 경험을 환기시킬 수 있다.
Wait-Animation Progress Indicators
시스템 동작을 기다리는 동안 사용자의 의지는 여러 요인이 있고 예측이 가능한 것과 불가능한 것이 있다. 이 중 4가지 예시가 있다.
- 원하는 목표와 긴급성, 복잡성.
- 다른 목표를 기다리며 킬링타임으로 사용되고 있는가?
- 급하게 프로젝트 업로드가 되어야하는가?
- 유사한 서비스 혹은 프로세스에 대한 이전 경험을 기준으로 사용성 기대를 하는가?
다양한 상황, 환경에서 사용자는 제품 경험을 하게 된다. 세계적인 UX 리서치 그룹 닐슨 노먼은 다음 지침을 준수하면 어떤 상황이든 사용자가 정보가 로드될 때까지 기다릴 가능성을 높일 수 있다고 한다.
1. 항상 즉각적인 피드백을 제공하십시오
2. 약 1.0초 이상 걸리는 작업에는 progress indicator를 사용하십시오
3. Loop animation: 빠른 동작에만 사용한다.
루프 애니메이션 그래픽을 표시하면 시스템이 작동한다는 피드백을 제공하지만 사용자가 기다려야 하는 시간에 대한 정보는 제공하지 않는다. 2-10초 사이의 작업에 사용을 하고 1초 미만이 소요되는 모든 항목의 경우 반복 애니메이션을 사용하면 주의가 산만해진다. 10초 이상 걸리는 작업에는 반복 애니메이션을 사용하지 않는 것이 좋다. 사용자는 진전이 없다고 느낀다면 시스템이 여전히 작동하는지 또는 중지 되었는지 확신할 수 없으므로 작업을 완전히 포기할 수 있다. 사용자가 기다리는 이유를 설명하는 텍스트를 포함하여 명확성을 더할 수 있다.
4. Percent-done animation: 10초 이상 걸리는 작업에 사용한다.
사용자는 현재 진행 상황, 이미 달성한 정도를 확인할 수 있다. 이 정보는 사용자에게 대기 여부를 결정할 수 있는 제어 권한을 제공한다. 프로세스 길이에 대한 불확실성을 줄이고 인지된 대기 시간을 줄일 수 있다. 프로세스에 대한 텍스트 설명을 추가하고 사용자가 기다릴 수 없다고 결정할 경우 프로세스를 중지할 수 있는 옵션을 제공한다. 그렇지 않으면 프로세스 제어를 사용자에게서 가로채고 사용자를 무력하게 만들 수 있다. Percent-done animation은 사용자가 작업이 처리되는 속도에 대한 기대를 갖게 한다. 사용자 만족도에 영향을 미치는 부분이다.
5. Static progress indicators: 사용하지 않는다.
어떤 피드백이 없는 것보다 낫지만 무슨 일이 일어나고 있는지에 대한 충분한 정보를 제공되지 않는다.
피드백을 제공하는 것은 긍적적인 사용자 경험의 기본이다. 대기 시간을 공개하고 투명하게 함으로써 개발자는 사용자의 불확실성은 줄이고 대기 시간을 늘릴 수 있다.
웹 성능을 동반한 UX 향상
UX 향상의 목적은 결국 고객을 잡는것이다. 하지만 사용자가 이용할 서비스의 로딩이 길어진다면 UX 인터페이스를 아무리 잘 만들어도 한계가 있다고 생각한다. 모든 것은 퍼즐과도 같다. 다른 조각을 다 맞췄어도 한조각만 없어도 완성하지 못한다. 사용자와 인터페이스로 소통하는 것도 중요하지만 사용자의 기다림이 줄어들도록 웹 성능 향상도 중요하다.
