빈 상태 – UX에서 가장 간과되는 측면

사용자 경험에 중요하지만 빈 상태는 종종 간과됩니다. 그것이 무엇인지, 어떻게 사용하는지 알고 UX 모범 사례를 적용하면 상당한 이점을 얻을 수 있습니다.

빈 상태란 무엇입니까?

UX 디자이너는 즐겁고 의미 있는 경험을 만들 기회가 많습니다. 종종 무시되는 그러한 기회 중 하나는 "빈 상태" 또는 빈 화면입니다. 비어 있는 상태는 표시할 것이 없는 제품에 대한 사용자 경험의 순간입니다.

다음은 일반적인 빈 상태 상황의 몇 가지 예입니다.

• 파일이나 폴더가 생성되지 않은 새로운 Dropbox 화면입니다.
• 할 일 목록 관리자에서 모든 작업을 완료한 후의 결과 화면.
• 명령이 지원되지 않을 때 Slack에서 오류 화면이 나타납니다.
• 새 소셜 네트워킹 계정을 시작했는데 연결이 없습니다.
• Gmail에서 검색해도 결과가 나오지 않습니다.

이러한 중간 순간 은 사용자 경험을 개선하고 결과적으로 비즈니스 기회를 확대할 수 있는 기회를 제공합니다. UX 디자이너에게 사용자 경험을 향상하고 비즈니스에 더 많은 가치를 추가할 수 있는 모든 기회를 잡는 것은 좋은 일입니다.

유용한 빈 상태는 사용자에게 무슨 일이 일어나고 있는지, 왜 그런 일이 일어나고 있는지, 어떻게 해야 하는지 알려줍니다. 다음은 좋은 빈 상태 UX 디자인의 두 가지 예입니다.

다음은 기회를 놓친 빈 상태 디자인의 몇 가지 예입니다.

빈 상태의 유형

다음은 자주 발생하는 4가지 유형의 빈 상태입니다.

• 처음 사용 – 새 Evernote 또는 Dropbox 계정과 같이 아직 표시할 것이 없을 때 새 제품이나 서비스에서 발생합니다.
• 사용자 삭제됨 – 사용자가 받은 편지함 또는 작업 목록 지우기와 같은 작업을 완료하고 결과적으로 빈 화면이 표시될 때 발생합니다.
• 오류 – 문제가 발생하거나 네트워크 문제로 인해 휴대폰이 오프라인 상태가 되는 등의 문제가 있을 때 발생합니다.
• 결과 없음/데이터 없음 – 표시할 항목이 없을 때 발생합니다. 누군가가 검색을 수행하고 쿼리가 비어 있거나 표시할 데이터가 없는 경우(예: 데이터가 없는 날짜 범위를 필터링하는 경우) 이러한 상황이 발생할 수 있습니다.

빈 상태 디자인이 더 많은 관심을 받으면서 UX 디자이너는 비즈니스 및 사용자 경험 관점에서 이를 활용하면 유익한 결과가 있음을 알게 됩니다.

사용자는 많은 앱을 사용해 보았지만 처음 3-7일 이내에 '사용을 중지'할 앱을 결정합니다. '괜찮은' 앱의 경우 7일 동안 유지되는 대부분의 사용자가 훨씬 더 오래 유지됩니다. 성공의 열쇠는 중요한 첫 3-7일 동안 사용자를 사로잡는 것입니다. – 안킷 자인

잘 설계된 빈 상태 사용의 이점

신중하고 유용한 빈 상태 화면을 디자인하면 제품 참여를 유도하고 사용자를 즐겁게 하며 이탈을 줄일 수 있습니다. 이렇게 하면 경쟁 제품에 사용자를 잃을 가능성이 줄어들어 사용자가 좌절하거나 길을 잃습니다.

Scott McKain은 자신의 책 What Customers really Want 에서 훌륭한 고객 경험을 위한 6가지 기본 원칙을 제시합니다.

그는 고객이 원하는 것을 다음과 같이 씁니다.

1. 매력적인 경험
2. 개인적인 초점
3. 상호 충성도
4. 분화
5. 조정
6. 혁신

이러한 원칙을 빈 상태 디자인에 적용하면 제품 만족도를 높이고 포기율을 낮추는 등 비즈니스에 큰 이점이 될 수 있습니다.

다음은 좋은 빈 상태 디자인의 이점을 얻을 수 있는 세 가지 추가 영역입니다.

• 사용자 온보딩 – 향상된 사용자 경험 외에도 제품에 대한 신뢰와 지속적인 사용을 구축할 수 있는 기회를 제공합니다.
• 브랜드 구축 – 브랜드 자산을 높이기 위해 인지도를 높이고 회사를 홍보합니다.
• 개인화 – 다양한 사용 상태에서 장난스럽거나, 재미있거나, 진지하거나, 역동적일 수 있습니다. 개인적인 접촉의 감각을 만듭니다.

잘 설계된 빈 상태의 이점은 과소평가될 수 없습니다. 이는 매력적인 고객 경험에 기여할 뿐만 아니라 고객을 만족시키고 참여를 유도할 수 있는 기회가 점점 줄어들고 있기 때문에 그저 좋은 비즈니스일 뿐입니다.

기피: UX 디자인의 잊혀진 화면

잘 설계된 빈 상태에는 명백한 긍정적인 결과가 있기 때문에 애초에 무시되는 이유는 무엇입니까?

첫째, 앱이나 제품, 웹사이트의 전체 화면 수에 비해 빈 상태가 발생하는 상황이 매우 적기 때문에 우선순위로 보지 않아 방치되는 경우가 많고, 디자이너들이 집중하는 경향이 있습니다. 디자인의 더 눈에 띄는 부분.

둘째, 사용자의 약 2-5%만이 비어 있는 상태를 보고 있기 때문에 디자이너의 시간을 항상 경제적이거나 실용적으로 사용하는 것은 아닙니다.

마지막으로, 빈 상태는 발생 위치와 처리 방법 측면에서 항상 잘 이해되지 않았기 때문에 더 인기 있는 화면과 페이지를 위해 뒷자리에 앉았습니다.

빈 상태가 무시되면 어떻게 됩니까?

안내가 없는 빈 화면은 혼란, 불확실성, 실망으로 이어질 수 있습니다. 이로 인해 포기율이 높아지고 제품에 대한 전반적인 만족도가 낮아질 수 있습니다.

운 좋게도 좋은 빈 상태 화면을 디자인하는 이점과 기회가 UX 디자인 프로세스에서 더 중요하고 우선 순위가 높은 부분이 되면서 상황이 바뀌기 시작했습니다.

목적으로 빈 화면을 채우는 방법

다음은 빈 화면이 유용하고 유용하며 유익하도록 디자인되었는지 확인하기 위한 몇 가지 UX 모범 사례입니다.

공감. 놀라움과 기쁨 , 감정 , 개성 을 더하는 것은 모두 UX 디자이너가 제품의 가장 어두운 구석에서도 더 나은 경험을 만든 방법입니다. 빈 화면의 경우 공감 메시징은 다양성을 추가하고 더 매력적이고 개인화된 경험을 만듭니다.

형상. 바이오필리아 효과라는 디자인 원칙이 있습니다. 이것은 자연경관에서 기인하는 스트레스 감소와 집중력 향상의 상태이다. 일부 풍경 이미지(예: 빈 상태 오류 화면의 배경)를 추가하면 보다 즐거운 사용자 경험을 얻을 수 있습니다.

유용한 안내. 제품의 종류에 따라 빈 상태를 이용하여 사용자를 안내할 수 있습니다. 이에 대한 좋은 예는 프로젝트 관리 응용 프로그램입니다. 새 계정을 사용하면 아직 진행 중인 프로젝트가 없으므로 사용자가 빠르게 시작할 수 있도록 하여 포기할 가능성을 줄일 수 있는 잠재적인 좋은 기회를 제공합니다. 다음은 예입니다.

시작 콘텐츠. 사용자가 좌절하고 떠날 만큼 오랫동안 비어 있는 화면이 많이 있습니다. 특정 제품의 경우 좋은 시작 콘텐츠를 제공하면 현재 진행 중인 작업과 다음에 할 수 있는 작업을 시각화하는 데 도움이 됩니다.

다음은 시작 콘텐츠가 있는 빈 상태 화면의 예입니다.

조치 단계 제공. 일부 제품의 경우 의미가 없기 때문에 안내를 제공하거나 콘텐츠로 화면을 채울 필요가 없습니다. 이러한 경우 설계자는 단순히 조치 단계를 제공할 수 있습니다.

그러나 최소한의 조치를 취하는 것이 가장 좋습니다. 힉스의 법칙은 “결정을 내리는 데 걸리는 시간은 선택의 수와 복잡성에 따라 늘어납니다.”라고 말합니다. 따라서 사용자는 클릭 유도문안이 최대 1~2개로 유지될 때 더 빠르게 행동할 수 있습니다. 다음은 좋은 예입니다.

또 다른 좋은 예는 인스타그램입니다. 사람들이 플랫폼을 처음 사용하면 아직 아무도 팔로우하지 않습니다(아무도 팔로우하지 않습니다). 인스타그램의 모든 훌륭한 기능에 집중하는 것은 쉬울 것이지만, 예를 들어 빈 상태의 좋은 화면은 "팔로잉할 사람 추가" 옵션을 제공할 수 있습니다.

빈 상태 UX 모범 사례 – 현장에서

탑탈은 디자인의 모든 영역에서 최고의 글로벌 프리랜스 인재를 보유하고 있습니다. 다음은 몇 명의 Toptal UX 디자이너가 빈 상태 화면을 디자인한 경험에 대해 말한 내용입니다.

Toptal 디자이너: Tamara Olson

디자인 분야: UX 디자인

작업했거나 본 적이 있는 좋은 빈 상태 디자인은 무엇입니까?

내가 관찰한 훌륭하고 현대적인 빈 상태 디자인은 일반적으로 두 부분으로 된 지침과 한 부분으로 기쁨을 주는 것입니다. UI가 비어 있으면 채워질 때 공간에 무엇이 들어갈지 사용자가 이해하도록 돕는 것이 UX 디자이너의 작업입니다. 채우는 것이 사용자의 일이라면 메시지에는 방법에 대한 지침이 포함되어야 합니다. (예를 들어, edtech 제품의 빈 "Classes" 테이블에는 교사에게 첫 번째 수업을 만드는 방법을 알려주는 사본이 포함될 수 있습니다.)

나는 또한 많은 앱이 텅 빈 상태의 넉넉한 부동산을 즐거움과 장난기 있는 브랜드 개성을 주입할 기회로 사용하는 것을 보고 있습니다. 웹 사이트 404 페이지의 웹 앱 버전이라고 말할 수 있습니다.

빈 상태를 간과한 적이 있습니까? 그렇다면 그 이유는 무엇입니까?

물론 쉬운 함정입니다. 우리가 선견지명을 가질 때 우리는 앱과 제품이 콘텐츠와 사용자로 가득 찬 완전한 비행 상태일 때를 그립니다. Google에서 일할 때 제품 담당 부사장이 제품은 비행기와 같다고 말했습니다. 대부분의 문제는 이륙 및 착륙 중에 발생합니다.

사용자가 제품에 처음 들어갈 때 빈 상태는 불가피하며 시작도 하기 전에 막다른 골목에 도달하는 것을 원하지 않습니다. 주니어 디자이너가 사용자의 온보딩 흐름을 보여주는 별도의 선형 디자인 세트를 디자인하도록 권장합니다.

빈 상태를 사용하여 클라이언트가 성공하는 것을 본 적이 있습니까? 그렇다면 어떤 면에서?

저는 최근에 National Novel Writing Month와 함께 플랫폼 재설계를 진행했습니다. 이를 통해 사용자는 쓰기 진행 상황에 대한 목표를 설정하고 추적할 수 있습니다. 우리 제품 팀은 빈 상태로 절대적인 공을 가지고 있습니다. 플랫폼의 기능과 개성을 소개하고 놀리며 사용자가 진행 상황을 기록하기 시작하도록 영감을 주는 훌륭한 방법이었습니다.

당신이 경험한 빈 상태의 가장 성공적인 사용은 무엇입니까?

"받은 편지함 제로"인 저는 Gmail 앱의 빈 받은 편지함 그림에 계속 기쁩니다. 우산 아래에서 햇빛 아래에서 책을 읽고 있는 사람과 "모두 끝났습니다!"라는 캡션이 있습니다. 이는 행동 촉구가 필요한 빈 상태에 대해 내가 언급한 규칙을 기술적으로 위반하지만 잠재의식 CTA는 "이메일에서 벗어나 인생을 즐기십시오"이기 때문에 그렇지 않습니다. 나는 그것을 좋아한다.

Toptal 디자이너: Michael Clingerman

디자인 분야: SaaS 제품 디자인

빈 상태를 위해 디자인했다면 어떤 유형이 가장 자주 보입니까?

내가 가장 잘 알고 있는 빈 상태는 404/오류 상태와 사용자 삭제 상태입니다.

빈 상태를 사용하여 클라이언트가 성공하는 것을 본 적이 있습니까? 그렇다면 어떤 면에서?

네. 빈 상태 화면이 매력적이고 유쾌한 콘텐츠 및 커뮤니케이션 전략의 일부가 된 경우를 보았습니다. 클라이언트가 브랜드 개성을 구축하는 데 사용하는 다른 경우가 있습니다.

당신이 경험한 빈 상태의 가장 성공적인 사용은 무엇입니까?

저는 Dropbox가 기업 브랜드의 개성, 어조, 성격을 확립하기 위해 단순하고 단색의 일러스트레이션 스타일을 사용하는 것을 항상 좋아했습니다.

결론

UX 디자인에서 빈 상태(또는 빈 화면)는 드물게 발생하고 항상 잘 이해되지 않기 때문에 간과하기 쉽습니다. 그러나 사용자 경험을 향상시키고 보다 응집력 있는 제품을 만드는 데 도움이 되므로 포함에 따른 이점은 과소 평가됩니다.

• • •

Toptal 디자인 블로그에서 추가 읽기

• UI 디자인 모범 사례 및 일반적인 실수
• 모바일 UX 디자인 – 모범 사례, 제약 조건 및 개발자와의 작업
• 모바일 인터페이스에 대한 경험적 원리
• 디자인에 대한 영향 – 색상과 감정에 대한 안내서
• 디자인 원칙과 중요성