컴퓨터와 사용자가 서로를 기다리지 않아도 되는 속도(0.4초 이하)로 인터렉션하면 생산성은 급격히 높아진다.
핵심요약
- 사용자의 주의가 분산되는 것을 막는 동시에 생산성도 향상시키려면 시스템 피드백을 0.4초 이내에 제공하라.
- 반응시간을 개선하고 체감 대기 시간을 줄이려면 체감 성능을 활용하라.
- 애니메이션은 로딩이나 프로세싱이 진행되는 동안 사람들의 시선을 끄는 한 가지 방법이다.
- 설사 정확하지 않다고 해도 진행표시줄을 보여주면 사용자는 대기 시간이 좀 더 관대해진다.
- 실제 작업이 훨씬 빨리 완료되더라도 의도적으로 작업 완료를 늦게 알리면 체감 가치를 높이고 신뢰를 형성하는 데 도움이 되기도 한다.
개요
- 뛰어난 사용자 경험을 만드는 필수 요소 중 하나는 성능이다.
- 사용자가 작업을 완료하려고 애쓰는 중에 처리 속도는 더디고, 피드백도 없으며 로딩이 느림 -> 불만을 느끼고 부정적인 인상을 받음
- 속도는 휼륭한 사용자 경험의 핵심이 되는 디자인 요소로 간주해야 함
- 시스템의 반응속도는 전체 사용자 경험을 좌우하는 열쇠임
- 시스템이 느리게 반응하면 인터페이스를 사용하는 사람의 생산성도 떨어짐
- 반응이 즉각적으로 느끼게 하려면 0.1초 이내여야 함
- 0.1초 ~ 0.3초 사이의 지연은 맨눈으로 감지된 수준이어서 사용자는 해당 시스템이 자신의 통제에서 벗어나고 있다고 생각함
- 지연이 1초 이상 늘어나면 작업을 이어가는데 필요한 인지 부하가 커지고 사용자 경험은 전체적으로 나빠짐
기원
- 초장기에 나온 PC들은 작업을 수행하는 반응시간의 임계값이 2초로 여겨짐
- 당시에는 사용자가 그 다음 작업에 대해 생각할 시간으로 쓸 수 있다고 간주되어 표준으로 받아들임
- 하지만 1982년 IBM 직업 2명은 반응 시간이 0.4초 이하일때 생산성은 반응 시간 감소의 정비례 이상으로 증가한다라고 발표함
- 컴퓨터 반응 시간이 생산성에 불균형한 영향을 미친다는 도허티의 발견을 바탕으로 생겨나게됨
사례
- 콘텐츠를 로딩하는 동안 표시하는 뼈대 화면이 있음
- 뼈대 화면은 콘텐츠가 로딩되는 동안 콘텐츠 영역에 임시로 자리표시자 블록을 표시하는 것을 가리킴
- 이 기법을 쓰게 된다면 사이트가 더 빨리 로딩하는 것처럼 보임
- 사용자는 콘텐츠 로딩속도가 느려도 기다린다는 느낌이 덜해서 속도와 반응성이 실제보다 낫다고 생각함
- 각 항목의 자리가 미리 확보되므로 로딩 상황에 따라 갈피를 못 잡고 왔다 갔다 하는 현상도 방지됨
미디엄(Medium)
- 블러 업은 로딩 시간을 최적화 해줌
- 이미지가 웹이나 네이티브 애플리케이션의 로딩 시간을 지나치게 증가시키는 주범이라는 점에서 착안함
- 실제 큰 이미지를 표시할 공간에 먼저 아주 작은 크기로 이미지를 로딩해 크게 확대함
- 저해상도 이미지가 커짐에 따라 픽셀 단위가 깨지고 노이지가 생기는 문제는 가우시안 블러를 이용해서 감춤
- 표시 할 큰 이미지의 로딩이 완료되면 저해상도 버전을 뒤로 감추고 페이드 효과와 함께 실제 이미지를 표시함
- 이 기법은 콘텐츠보다는 성능을 우선시해 빠른 로딩을 보장
- 이미지 영역을 미리 확보해서 고해상도 버전 로딩이 완료되기 전에 페이지 레이아웃을 깨지는 것을 방지함
진행상태 표시자(Progress indicator)
- 로딩이나 프로세싱이 진행되는 동안 애니메이션으로 시선을 끌기도 함
- 연구에 따르면 정확도와 상관없이 진행 표시줄을 보는 것만으로 사용자는 대기 시간을 관대하게 받아드림
- 그 이유는 다음과 같음
- 요청한 작업이 처리되고 있다는 사실을 분명이 알 수 있음
- 사용자가 기다리는 동안 볼거리를 제공함
- 실제 대기 프로세스가 아닌 진행표시줄 애니메이션에 관심이 집중되어 기다린다는 느낌을 줄여줌
Gmail
- 구글의 지메일도 애니메이션을 활용해서 대기 시간을 유발하는 불확신성과 불만을 줄임
- 앱이 로딩되는 동안 화면에 움직이는 로고와 함께 간단한 진행표시줄을 표시함
- 간단하지만 특별한 애니메이션은 사용자가 확실히 앱이 로딩되고 있다는 것을 알려줌
- 체감 대기 시간을 줄이고 전체 사용자 경험을 개선함
Apple
- 사용자가 눈앞의 작업에 집중을 유지할 수 았는 한계는 일반적으로 10초라고 함
- 대기 시간이 10초를 넘어서면 딴짓을 하고 싶어 함
- 사용자가 10초 이상 기다려야 할 때도 진행표시줄은 도움이 됨
- 완료하기 까지의 예상 대기 시간과 현재 수행 중인 작업에 대한 설명을 추가로 제공하는 편이 좋음
- 사용자는 작업이 완료되기 까지 얼마나 남았고 그 사이 다른 일을 할 자유시간이 얼마인지 알 수 있음
- 낙관적 UI도 체감 성능을 개선하는 영리한 기법
- 동작이 완료된 후에 피드백을 제공하는 방식과 다름
- 이 기법은 작업을 처리하는 도중에 동작을 성공적으로 수행했다는 낙관적인 피드백을 미리 제공함
- 인스타그램도 이 기법을 활용해서 실제로 게시가 완료되기 전에 사진에 대한 댓글을 표시함
- 앱이 실제보다 더 빠르게 반응하는 것 처럼 보임
정리
- 성능은 개발팀만 고려하면 되는 기술적인 문제가 아니라 본질적인 디자인 요소
- 디자이너라면 자신이 디자인한 제품이나 서비스의 사용자가 작업을 최대한 빠르고 효율적으로 완수하도록 도와야 함
- 이러한 목표를 이루려면 사용자에게 적절한 피드백을 제공, 체감 성능 높임, 진행표시줄을 사용해 기다린다는 느낌을 줄여줘야 함