사용자 온보딩에서 빈 상태의 역할

사용자가 상호작용하는 첫 번째 화면 세트는 앱의 기대치를 만들어 냅니다. 사용자가 처음 사용 후 앱을 삭제하지 않도록 하려면 중요한 작업을 완료하는 방법을 가르쳐야 하며 다시 돌아오도록 해야 합니다. 즉 첫 번째 상호작용을 하는 동안 사용자를 성공적으로 참여시켜야 합니다. 

온보딩 프로세스는 제품 성공을 위해 사용자를 설정하는 중요한 단계입니다. 첫 인상을 줄 기회는 오직 하나뿐입니다. 여기서는 "빈 상태empty states"라는 간단한 패턴을 사용하여 온보딩에 접근하는 방법에 대한 몇 가지 팁을 제공하겠습니다. 

빈 상태란 무엇인가?

링크 콘텐츠는 대부분의 앱에 가치를 제공합니다. 뉴스피드, 할 일 목록 또는 시스템 대시보드 등 모든 사람들이 앱을 사용하는 이유는 바로 콘텐츠 때문입니다. 이것이 빈 상태를, 즉 아직 사용자를 위한 콘텐츠를 가지고 있지 않은 상태에서의 사용자 여정의 순간을 어떻게 설계할지 고려하는 것이 중요한 이유입니다.  

기본 상태가 비어 있고 사용자가 하나 이상의 단계를 거쳐 데이터를 채우도록 하는 앱 화면은 온보드하기에 아주 적합합니다. 빈 상태는 사용자가 페이지에서 어떤 내용을 기대하는지 알려주는 것 외에도 사람들에게 응용 프로그램 사용 방법을 알려줍니다. 온보딩 프로세스가 단 하나의 단계로 구성되어 있더라도, 그 지침은 사용자가 옳은 일을 하고 있음을 알려줄 겁니다.

Expensify 앱의 빈 상태는 시작하는 방법을 알려줌으로써 사용자를 안심시킵니다.

온보딩 연결 중에 빈 상태의 가치

일관된 온보딩 경험의 일부로 "처음 사용하는" 빈 상태를 고려하세요. 빈 상태 화면을 활용하여 사용자를 교육하고 참여시켜야 합니다. 아무것도 없는 순간을 전환할 수 있는 기회로 이 화면을 사용할 수 있습니다. 

사용자 교육하기

가장 먼저 빈 상태 화면은 사용자가 컨텍스트를 이해하는 데 도움이 됩니다. 일어날 일에 대한 기대치를 설정하면 사용자는 편안해질 수 있습니다. 이 정보를 전달하는 가장 좋은 방법은 표시 또는 알림 형식입니다. 사용자에게 화면이 내용으로 가득 차 있을 때의 모습을 보여주거나 명확한 지침을 알려줍니다.

행동 유도하기

대부분의 빈 상태는 그것이 무엇인지, 왜 사용자가 그것을 보고 있는지 알려줍니다. 그러나 효과적인 빈 상태는 더 먼 곳을 바라보며 사용자가 할 수 있는 그 이상의 것을 알려줍니다. 사용자 교육은 중요하지만 첫 번째 빈 상태에서의 진정한 성공은 행동을 유도하는 것입니다. 이 빈 상태를 출발점으로 생각하고 사용자의 활동을 장려하도록 설계하는겁니다.

유쾌한 사용자 경험 만들기

앱은 기능적이어야 하며 (사용자를 위해 문제를 해결할 수 있어야 함), 유용하고 (배우기 쉽고 사용하기 편리해야 함), 즐거워야합니다. 빈 상태는 사용자와 사람과의 관계를 형성하고 앱의 개성을 뛰어 넘는 훌륭한 기회입니다. 

이상적인 빈 상태를 디자인하는 방법

빈 상태가 사용자의 관심을 끌 수 있다는 사실에도 불구하고 디자인 및 개발 중에 간과되는 경우가 많습니다. 이는 우리가 평소에 잘 정렬된 레이아웃으로 채워진 인터페이스로 디자인하기 때문입니다. 그러나 콘텐츠가 보류 중인 사용자 행동인 경우엔 어떻게 페이지를 디자인해야 할까요? 빈 상태 디자인은 사실 독창성과 유용성을 위한 놀라운 기회입니다. 

막다른 골목 피하기

빈 상태로 할 수 있는 가장 최악의 것은 사용자를 막다른 골목에 빠뜨리는 겁니다. 이러한 상황은 혼동을 야기하고 불필요한 행동을 유발합니다. Modspot의 포스트 화면에서 다음 두 예제의 차이점을 생각해보죠. 첫 번째 이미지는 Modspot의 처음 사용자를 위한 현재 화면입니다. 유용하고 효율적으로 만들어진 빈 상태는 사용자가 시작할 수 있는 행동을 안내함으로써 마찰을 줄입니다.

Modspot의 관점은 빈 상태를 효과적으로 활용하여 사용자를 안내합니다.

두 번째 이미지는 아무런 안내도 제공하지 않는 비효율적인 빈 상태를 보여주기 위해 만든 동일한 화면의 가짜 버전입니다.

동일한 화면의 막다른 버전은 빈 상태를 완전히 피하는 것이 왜 중요한지를 분명히 보여줍니다.

빈 상태를 시각적으로 단순하게 유지하기

훌륭한 빈 상태 디자인의 꽃은 바로 단순함입니다. 가장 중요한 콘텐츠를 최전선에 배치하고 산만함을 최소화하려면 최소한의 디자인 방식을 사용해야합니다. 따라서 잘 작성되고 쉽게 스캔할 수 있는 사본 (명확하고 간략한 설명 또는 쉽게 따라할 수 있는 지침) 만 포함하고 좋은 비주얼로 포장하세요.

드롭박스Dropbox iOS 버전

빈 상태를 직관적으로 만들기

빈 상태는 시각적 미학에 관한 것 뿐만 아니라 사용자가 컨텍스트를 이해하는 데 도움이 됩니다. 일시적인 온보딩 단계일 예정이라도 사용자의 커뮤니케이션 가치를 극대화하고 빈 상태를 활성 상태로 변경하는 방법에 대한 지침을 제공해야 합니다. 

구글 포토에서 빈 상태 화면을 예로 들어 보겠습니다. 시각적으로는 멋지게 보입니다. 아름다운 그래픽으로 잘 구성된 레이아웃입니다. 그러나 이 빈 상태는 사용자가 컨텍스트를 이해하는 데 도움이 되지 않으며, 다음 질문에 대한 대답을 제공하지도 않습니다. 

- 컬렉션collection은 무엇인가?

- 어떻게 얻을 수 있다는건가?

구글 포토Google Photos iOS 버전

개성을 돋보이게 하기

좋은 첫 인상은 유용성뿐 아니라 개성에 관한 것입니다. 개성은 앱을 기억할 가치 있고 즐겁게 만드는 요소입니다. 별로 좋아 보이지 않을 수도 있지만, 처음 비어있는 상태가 비슷한 다른 제품과 조금 다르게 보일 경우 사용자는 제품 경험 전체가 다를 것으로 예상하고 기대할 것입니다. 예를 들어 아래 Khaylo Workout 앱에서처럼 빈 상태를 사용하여 개성과 분위기를 전달하는 방법을 볼 수 있습니다.

Khaylo Workout iOS 버전

사용자가 행동을 취하도록 유도하기

가장 중요한 목표는 화면이 비워져 있지 않도록 가능한 빨리 사용자가 무언가를 하도록 유인하는 것입니다. 빈 상태에서 무언가 조치를 취하는 것은 사용자에게 앱과 상호작용할 때 받게 될 이점을 보여줄 뿐만 아니라 원하는 것을 취하도록 유도합니다.

페이스북 메신저Facebook Messengers의 설치 화면을 살펴 보겠습니다. 사용자가 이 화면에 오게되면 격려를 받게 됩니다. 화면을 통해 사용자는 제품의 이점 (사용자가 메신저를 사용하여 사진을 찍거나 비디오를 녹화할 수 있음)을 알 수 있으며, 이미 페이스북 친구 중 몇 명이 이미 이 앱을 사용하고 있는지 알 수 있습니다. '설치Install' 버튼은 빈 상태를 정리하는 데 필요한 다음 단계로 안내합니다. 사용자는 버튼을 터치하는 것 외에는 다른 옵션은 없습니다. 

페이스북Facebook iOS 버전

가능하다면 개인적인 콘텐츠를 제공하기

사용자를 위해 앱을 맞춤 설정할 때 제품의 가치를 더 빨리 보여줄 수 있습니다. 개인화의 주요 목표는 대상 사용자의 노력없이 특정 사용자 요구나 관심사에 맞는 콘텐츠를 제공하는 것입니다. 앱은 사용자의 프로필을 작성하고 해당 프로필에 따라 빈 상태 채우기 인터페이스를 조정합니다. 

사용자가 앱을 즉시 탐색할 수 있도록 시작용 콘텐츠 제공을 고려해 보세요. 예를 들어 책 읽기 앱은 모든 사용자에게 사용자 정보를 기반으로 몇 권의 책을 제공할 수 있습니다. 

Material Design

UI 안에 감정 불어넣기

빈 상태는 비지니스 또는 제품의 인간적인 측면을 보여줄 수 있습니다. 긍정적인 감정적 자극은 사용자와의 소통감을 형성할 수 있습니다. 빈 상태가 어떤 느낌을 주는지는 앱의 용도에 따라 다릅니다. 아래 예는 구글 행아웃의 빈 상태에 대한 감정적인 측면과 사용자가 행아웃에서 초대를 받도록 유도하는 방법을 보여줍니다.

Android의 구글 행아웃Google Hangouts

물론 위의 예와 같이 디자인에 감정을 표시하는 것은 위험부담이 있습니다. 일부 사람들은 이해하지 못 할 수 있고, 어떤 사람들은 그것을 싫어할 수도 있습니다. 그러나 디자인에 대한 정서적인 반응이 무관심보다 훨씬 낫기 때문에 괜찮다고 볼 수 있습니다.

성공 상태 소개하기

처음 사용자가 중요한 작업을 완료하는 순간, 사용자와 제품 사이에 긍정적 감정 관계를 형성할 수 있는 좋은 기회입니다. 진행 상황을 인정하고 사용자에게 달성한 것을 축하함으로써 잘하고 있음을 사용자에게 알립니다.

성공 상태는 잘 수행된 작업에 대해 사용자에게 축하를 보내고 새로운 상호 작용을 유도하는 놀라운 기회입니다. 예를 들어 작업 목록을 지우는 것은 확실히 WriteUpp 앱의 사용자에게는 긍정적 성취입니다. 앱에서 긍정적인 보강제로 '잘 했어!'라는 축하 메시지를 보내면 좋습니다. 이 성공 상태는 사용자를 기쁘게하고 다음 단계를 제공하여 계속 참여하도록 합니다.

WriteUpp iOS 버전

마무리

빈 상태는 절대로 공허하지 않아야 합니다. 앱을 처음 열 때 사용자가 빈 화면을 보게하지 마세요. 빈 상태는 사용자 경험의 일시적 또는 사소한 부분이 아니기 때문에 노력을 기울여야 합니다. 실제로 이것은 다른 디자인 구성 요소만큼이나 중요하며, 참여를 유도하고, 방금 가입해서 시작한 사용자를 기분 좋게 해줍니다.

원문: The role of empty states in user onboarding

Refresh Studio

해외 최신 웹/모바일/UX 디자인 글과 동향을 소개해 드립니다.