🫥 공백 화면에 숨결을 불어넣는 10가지 방법

Dropbox Paper: 우리 팀의 공동 작업공간

Dropbox의 무료 서비스

Dropbox Paper는 하나의 문서, 그 이상입니다. 함께 무언가를 만들고 협동하는 하나의 작업공간이죠. 문서를 작성하고, 수정하고, 아이디어를 모으고, 디자인을 리뷰하고, 업무를 관리하고, 미팅을 진행해 보세요.

[시작하기]

 사례 2: 행동 완료

 공백 화면의 두 번째 사례는 사용자가 받은 편지함이나 할 일 목록을 모두 정리하고 남은 것이 없을 때입니다.

 이번 사례는 Feedly입니다. Feedly는 여러 온라인 소스의 뉴스 피드를 모아 사용자의 니즈에 맞게 커스터마이징하는 서비스입니다. 브랜드와 어울리는 일러스트로 사용자를 안심시키고 있네요. 하지만 더 중요한 건 사용자의 행동을 유도한다는 거예요.

끝!

모두 확인했어요.

[읽은 아티클 다시 보기]

 사례 3: 오류 상황

 UX 라이터 커뮤니티에는 몇몇 오류 화면이 공백 화면으로 처리되어야 하는지에 관한 논쟁이 있습니다. 보여줄 데이터가 없어서 오류가 발생하는 경우죠.

 오류가 무엇인지에 따라 UX 라이터는 그것을 창의성을 발휘하고 사용자 행동을 유도하는 기회로 활용할 수 있습니다.

 안드로이드 환경에서 나타나는 아래 Skype의 사례는 심플하고 효과적입니다. 에러가 왜 발생했는지가 명백히 드러나 있어요. 사용자는 버튼을 누르기만 하면 페이지를 새로고침할 수 있고요.

이런!

인터넷이 연결되지 않았어요. 연결 상태를 확인하거나 다시 시도해 보세요.

[재시도]

 사례 4: 불러올 데이터가 없을 때

 사용자가 뭔가를 검색했지만 결과가 없을 때에도 공백 화면이 나타납니다. 이건 누구의 잘못이라기보단 그냥 보여줄 결괏값이 없는 경우죠. 다시 말해, UX 라이터가 사용자를 안심시키고 다른 행동을 유도할 기회이기도 해요.

 이번에는 Instacart의 사례입니다. 이 앱은 고용한 개인 쇼핑 대리인이 식료품을 구매하고 집까지 배달해 주는 식료품 배송 서비스예요.

 이건 긍정적이고, 명확하며, 사용자를 격려하는 사례예요. 세 단계에 걸쳐 다음 내용을 전달하고 있는데요.

1. 사용자에게 일어난 일을 알려 줍니다.
2. 사용자가 할 수 있는 행동을 제안합니다.
3. 도움이 안 될 수도 있지만, 나중에 사용자가 자신의 문제를 해결할 수 있도록 정보를 제공합니다.

 Instacart의 라이팅은 사용자의 시간을 절약시키면서 가치를 제공해 좋은 사용자 경험을 만들어 내고 있어요.

50마일 이내에 픽업 가능한 매장이 없습니다

픽업 서비스를 제공하는 매장이 표시되도록 위치 설정을 바꿔 보세요.

저희는 새로운 매장을 계속 추가하고 있으니 곧 다시 확인해 보세요.

 사례 5: 가능한 도와주려고 하기

 공항 게이트의 이용객 안내 사례입니다. 보통 이렇게 보여 줄 데이터가 없을 땐 광고를 띄우기 마련이죠.

 하지만 이 항공사의 UX 라이터는 이걸 기회라고 생각했습니다. 많은 사람이 비행기 탑승 전 충전기를 꽂을 콘센트가 부족해 곤란해한다는 점에 공감했어요. 캐주얼하고, 인간적이고, 약간은 위트 있는 라이팅으로 긍정적인 사용자 경험을 만들어 냈네요.

 우리가 사용자의 입장에서 경험을 개선하는 건 그들에게 잘 공감했을 때입니다. 그러면 사용자는 더 큰 충성도로 그에 보답하죠. 이 사진에서 볼 수 있듯이요.

 사례 6: 404 페이지

 대부분의 UX 전문가는 404 페이지를 공백 화면으로 보지 않지만, 제가 이렇게 사례로 가져온 이유가 있습니다. 보여줄 데이터가 없다는 점에서 맥락이 비슷하기 때문이에요.

 404 페이지의 콘텐츠는 유용하고, 재치 있으며, 목표 지향적이어야 합니다. 온라인 소셜 퍼블리싱 플랫폼 Medium이 좋은 사례가 되겠네요. 많은 사용자가 ‘404’라는 숫자가 무엇을 의미하는지 알고 있으므로, 그것을 페이지 상단에 명확한 헤드라인과 함께 배치하는 게 적합합니다.

 404 바로 아래에는 다른 검색어를 입력할 수 있게 검색 필드를 두었어요. 검색 필드 바로 아래의 작은 콘텐츠도 한번 잘 보시고요. 더 아래에는 검색 필드로도 문제를 해결하지 못한 사용자를 위해, 사용자의 열람 기록에 기반한 콘텐츠 제안 섬네일까지 넣었어요. 저는 이 404 페이지의 구조와 미니멀리즘에 홀딱 반했습니다. 때로는 이것보다 비워 놔도 괜찮겠지만요.

404     페이지를 찾지 못했습니다.

(검색)

당신이 찾는 게 저기 어딘가에 있을 거예요…

Medium 홈페이지에서 언제든 인사이트가 담긴 이야기들을 볼 수 있어요.

아직 길을 못 찾았나요? 여러분은 혼자가 아니에요.

길을 잃고, 뭔가를 잃어버리고, 찾고 있는 줄도 몰랐던 걸 발견하는 이야기들을 감상해 보세요.

 사례 7: 시작할 때 튜토리얼 보여주기

 앞서 말했듯 공백 화면은 제품이나 서비스에 처음 가입한 사용자에게 자주 나타납니다. 이번 사례는 이 경우에 관한 또 다른 접근방식인데요. 사용자에게 제품을 소개하고, 제품을 둘러볼 기회를 주고 있어요.

 회계관리 SaaS 플랫폼 Xero의 공백 화면이 그 일을 아주 잘하고 있네요. 사용자가 어디를 먼저 클릭해야 할지 헷갈릴 때, 화면 상단의 눈에 띄게 배치된 웰컴 비디오가 몇 가지 제안을 보여주는 식이에요.

Xero에 온 것을 환영합니다 👋

처음 오셨다면 아래 단계대로 진행해 보세요.

 사례 8: 디폴트 데이터로 채워진 대시보드

 이번 사례는 공백 화면으로 보이진 않지만, 어떤 면에서 공백 화면으로 볼 수도 있어요.

 처음 로그인한 사용자는 앱의 기능을 보여주는 미리 채워진 대시보드를 마주하게 됩니다. 사용자가 직접 뭔가를 하기 전에 앱이 사용자 대신 먼저 나서는 거죠.

 Acuity Scheduling의 공백 화면이 그래요. 기본으로 탑재된 데이터로 일주일의 업무가 자동으로 정리된 걸 보고, 사용자는 이 플랫폼이 어떤 방식으로 작동하는지 바로 알 수 있게 됩니다.

 사례9: 샘플 데이터로 채워진 대시보드

 비슷한 예로 샘플 데이터를 적용한 대시보드로 공백 화면을 채울 수도 있어요.

 Trello는 이 서비스의 업무 관리 시스템이 어떻게 돌아가는지 사용자가 이해할 수 있도록 샘플 데이터가 적용된 서비스 화면을 만들었습니다. 사용자는 대시보드를 모두 지우고, 자신의 것을 처음부터 새로 만들 수도 있어요.

 어쨌든, 서비스 사용 방법은 잘 이해하게 될 테니까요.

 사례10: 게이미피케이션 요소

 Carwow의 사례처럼 공백 화면에 게이미피케이션 요소를 넣을 수도 있습니다.

 자동차 구매 비교 사이트인 Carwow에선 사용자가 프로세스를 잘못 벗어나 404 페이지가 나타났을 때 사용자가 프로세스로 돌아갈 수 있게 도와줍니다. 화면에는 8비트 게임이 나타나고, 사용자는 시작 버튼을 눌러 간단한 횡스크롤 게임을 즐기기만 하면 돼요.

 이런 공백 화면의 또 하나의 장점은, 프로세스를 잘못 벗어난 사용자를 비난하지 않는다는 거예요. 사용자가 스스로 해결하게 하죠.

이런, 저희가 길을 잘못 안내한 것 같군요.

다시 안내해 드릴게요!

당신에게 딱 맞는 차를 찾기 위해 매물 탐색 차량을 목적지까지 움직이거나, 홈페이지로 돌아가세요.

 마치며

 세심하게 계획한 유용한 공백 화면을 디자인하면 사용자 참여를 유도하고, 만족도를 높이며, 이탈률을 줄일 수 있습니다. 브랜드 보이스를 표현할 수도 있고, 사용자의 더 많은 행동을 끌어낼 수도, 사용자가 제품에 계속 머무르게 할 수도 있지요.

 사례 8, 9번에서처럼 공백 화면이 발생하는 상황이 애매하지 않은지 살펴보고 사용자에게 도움이 되는 데이터를 미리 채울 수 있는지 확인해 보세요.

 공백 화면을 가능한 도움이 되고 기분을 좋게 만드는 곳으로 만드세요. 그럼 경쟁사에 사용자를 빼앗길 가능성을 낮추고 고객 충성도는 높일 수 있습니다.

 추가 행동을 유도하는 공백 화면을 만드세요. 그리고 브랜드 보이스를 보여주는 데 활용하세요. 유용하고, 도움이 되고, 기분 좋게 만드는 공백 화면을 유지하세요. 사용자가 분명 만족할 거예요.