빠른 것 같은 느낌적인 느낌
UX 디자이너의 속도 개선 꼼수
앱이나 웹이 느리면 짜증 난다. '느리다'고 느끼면 아무 버튼이나 막 눌러보거나 미련 없이 서비스를 나가 버린다. 3초만 지나도 짜증 나고 10초가 지나면 포기한다.
페이스북의 디자인 원칙 중 하나가 'Fast'다. 빠른 경험은 더 효율적이고 사용자의 노력이 덜 요구된다. 사이트의 퍼포먼스에 대해 사용자가 의식하지 않게 하고, 사이트를 최대한 빠르게 사용할 수 있게 제공하는 것이 페이스북의 주요 목표 중 하나다.
그만큼 사용자 경험에서 속도는 중요하다. 서비스의 속도를 높이는 일은 쾌적하게 서비스를 이용하기 위해 기본 중에 기본으로 필요한 작업이다.
일반적으로 속도 개선은 개발에서 해결해야 하는 경우가 많다. 그렇지만 UX 디자이너가 할 일이 아예 없는 건 아니다. 체감 속도를 높일 수 있는 눈속임을 줄 수 있다. 최근에 앱 속도 개선 프로젝트를 맡으면서 이런저런 꼼수들을 연마하였는데 찾아 두었던 방법들과 사례들을 몇 개 공유한다.
1. 로딩할 때 플레이스 홀더 두기
UX 디자이너들이 제일 많이 쓰는 꼼수다. 로딩할 때 멍-때리는 빈 화면 두지 말고 어디에 뭐가 들어올지 미리 배경을 깔아주고 로딩되는 컨텐츠를 순차적으로 불러오자.
모든 컨텐츠 로딩이 끝날 때까지 빈 화면을 3초 바라본 후에 모든 컨텐츠가 한 번에 짠-하고 나타나는 것보다 뭐라도 먼저 깔려있고 컨텐츠가 하나씩 나타나면서 3초를 기다리는 게 덜 괴롭다.
2. 버튼 피드백 주기
버튼에 프레스 피드백을 주면 즉각적으로 뭔가 일어나는 느낌을 주어 조금 빨라 보인다. 눌렸구나, 느끼게 해주자. 로드도 안되는데 눌렸는지도 확실하지 않으면 답답하게 느껴지고 버튼을 반복적으로 누르게 된다.
3. 피드백 먼저 주고 실제 값은 리프레시할 때 보여주기
인스타그램에서 좋아요를 누르면 누르는 그 순간 총 좋아요 수가 바로 하나 올라간다. 하지만 이 +1은 UI만 바뀌는 거다. 실제 좋아요 수는 앱의 뒤에서 계산 중이다. 반영된 결과는 리프레시를 해야 나온다. 근데 +1 피드백을 바로 주니까 바로 반영된 것 같아서 빠르게 느껴진다.
4. 진척도 보여주기
로딩이 어쩔 수 없이 길고 컨텐츠를 순차적으로 표현할 수 없는 경우도 있다. 이럴 때는 얼마나 기다려야 하는지 구체적으로 표시해주면 좀 참을 만하다. 끝없이 뱅글뱅글 돌아가는 로딩이나 영원한 모래시계는 답답하다.
5. 맥락 없는 UI 애니메이션 제거하기
애니메이션 때문에 로딩이 느려지는 경우가 더러 있다. 2014년과 2015년 사이에 번쩍번쩍 화려한 애니메이션이 유행하며 여기저기 맥락 없이 애니메이션을 집어넣는 서비스를 많이 봤다. 그러나 반복적으로 묵직한 애니메이션이 나오면 느리게 느껴져서 짜증을 유발한다. 맥락에 맞지 않는 애니메이션들만 없애도 앱은 훨씬 빨라진다. 별 이유 없이 그냥 멋있어 보이려고 넣었다면 이참에 담백하게 빼보자.
6. 로딩 애니메이션 보일 듯 말 듯
로딩 애니메이션이 '나 로딩 중이오!!!!!!'라고 소리 지르게 두지 말자. 뎁스도 깊어 보이고 뭔가 작정하고 기다리는 느낌이 든다. 대기실을 들어갔는데 잠깐 서서 기다리면 될 줄 알았는데 여기 앉아서 편안-히 기다리라고 할 때의 당혹스러움이 느껴진다.
로딩 애니메이션으로 서비스의 아이덴티티를 표현하거나 정보를 주려는 목적으로 로딩 애니메이션을 화려하고 눈에 띄게 하는 경우가 가끔 있다. 특히 쇼핑 앱에서는 그 잠깐의 로딩 동안에도 깨알 같은 쇼핑 정보를 알려준다. 원하는 효과는 줄 수 있을지 모르지만 '기다림' 자체를 의식하게 되니 결정할 때 신중했으면 좋겠다.
자신 없으면 시스템에서 제공하는 기본 로딩을 쓰자. 페이스북에서 커스텀 로딩과 시스템 로딩을 비교하는 실험을 했다. 커스텀 로딩 애니메이션을 보면 페이스북이 느리다고 느껴지고 시스템 로딩을 보면 아이폰이 느리다고 느껴진다는 흥미로운 결과가 나왔다. 참고로 페이스북은 지금 시스템 로딩만 쓴다.
7. 그래도 로딩을 해야 한다면, 재미있게!
(그러나 권장하지는 않는다.)
로딩이 너무 길어지고 순차 로딩이 불가하고 풀 페이지 로딩을 꼭 줘야만 한다면 그 로딩을 재밌게 해주는 건 어떨까. 익스피디아에서 항공 검색을 하면 로딩 화면에서 창문을 열었다 닫았다 할 수 있다. 그리고 폰을 좌우로 기울이면 창 밖의 하늘이 각도가 바뀐다. 호텔 검색할 때는 폰을 좌우로 흔들 때 태그가 흔들흔들한다.
처음 봤을 때 우왓! 신기하다! 생각했다. 그러나 딱 한번 재밌었다. 이런 방법이 있다, 얘기하고 싶었지만 금방 질려서 추천하고 싶지는 않다.
8. 사용자의 다음 행동 예측하기
인스타그램은 속도를 빠르게 보이기 위해 사진 업로드를 미리 해둔다. 사용자가 사진을 고르고 편집한 후 다음 단계로 넘어가는 순간 업로드를 시작한다. 우리가 멋진 글을 열심히 쓰고 해시태그를 달고, 위치정보 찾을 동안 앱의 뒷면에서는 시간 많이 걸리는 사진 업로드를 열심히 진행하고 있는 것이다. 그래서 모든 입력이 끝나고 등록 버튼을 누르는 순간 빠르게 등록이 된다고 느낄 수 있다.
크롬에는 'network action predictions'이라는 기능이 있다. 이게 참 싱기방기 한 게 사용자가 다음에 클릭할 가능성이 있는 링크를 예측하고 미리 준비를 해둔다. 예를 들어 블로그를 둘러볼 때 '다음 게시물'을 클릭할 가능성이 크다. 크롬에서는 다음 게시물을 미리 로드해두고 사용자가 클릭하면 즉시 페이지가 나타난다. 주소창에 웹 주소를 입력하면 사용자의 로컬 기록을 기반으로 어느 사이트를 방문할지 예측이 되면 해당 페이지를 미리 렌더링을 해둔다. 그래서 엔터 키를 눌렀을 때 페이지가 더 빨리 표시된다.
9. 불필요한 기능이나 정보 제거
전반적인 정보 구조와 플로우를 살펴보고 필요 없는 기능, 정보, 플로우를 싹 거둬내 보자. 무언가를 더할 때보다 뺄 때 해결이 더 명확한 경우가 많다.
위에 소개한 방법들은 대부분 눈속임이다. 건강한 신체에 약간의 상처가 났을 때 바르는 후시딘 정도의 역할이다. 심각하게 피 철철 흐르고 의식 불명의 상태라면 그에 맞는 외과 수술을 받자. 모든 문제점들을 UX 디자이너가 해결해줄 수는 없다.
그래도 대부분의 서비스에서는 몇 가지 간단한 작업으로 서비스를 약간 더 빠르게 느껴지게 만들 수 있다. 슉슉- 이건 입에서 나는 소리가 아니여-
