빈 상태는 막다른 골목이 아니라 일시 중지입니다. 사용자가 처음 사용, 성취 또는 오류로 인해 비어 있는 상태를 우연히 발견하더라도 제품은 사용자를 다음 논리적 단계로 안내해야 합니다. 이 기사에서는 비어 있는 상태와 UX 디자인에 대한 중요한 중요성을 살펴봅니다. 또한 주요 제품 개발자의 실제 사례와 함께 몇 가지 팁을 제공합니다. 인터랙티브 프로토타이핑을 시도한 적이 있습니까? 대화형 프로토타입은 테스트를 향상시켜 디자이너가 사용자에게 의미 있는 제품 경험을 제공할 수 있도록 합니다. UXPin으로 첫 번째 인터랙티브 프로토타입을 디자인하십시오. 무료 평가판에 가입하십시오 . 고급 프로토타입 구축 상태, 변수, 자동 레이아웃 등으로 더 나은 제품을 디자인하십시오. UXPin 사용해보기 UXPin 사용해보기 목차[보여주다] 빈 상태란 무엇입니까? 빈 상태의 유형 빈 상태 예 처음 사용/온보딩 작업 완료/사용자 삭제됨 오류 상태 데이터 없음 빈 상태 디자인 팁 시각적 신호 사용 제안 제안 빈 상태 개인화 빈 상태 복사본을 의미 있게 만들기 UXPin으로 빈 상태 프로토타입 및 테스트 인터랙티브 프로토타이핑 실행 가능한 피드백 원활한 디자인 핸드오프 고급 프로토타입 구축 빈 상태란 무엇입니까? 빈 상태는 사용자에게 시스템에 표시할 콘텐츠가 없음을 알리는 UI 디자인 패턴입니다. 일부 빈 상태는 사용자에게 콘텐츠를 찾거나 생성하거나 화면에 추가하는 방법을 알려줍니다. 디자이너는 또한 빈 상태를 사용하여 팁 및 지침과 함께 화면/기능의 목적을 전달합니다. 예를 들어 Gmail의 빈 상태는 사용자에게 받은편지함의 탭을 맞춤설정하는 방법을 알려줍니다. 빈 상태 UI 디자인 예제 빈 상태의 유형 빈 상태는 사용자 여정의 중심점을 나타냅니다. 각각은 친밀감을 형성하고, 참여를 유도하고, 교육하고, 즐겁게 하고, 사용자를 기쁘게 할 수 있는 기회입니다. 제품 디자인에서 사용자가 접하게 되는 네 가지 기본 빈 상태가 있습니다. 최초 사용: 신규 사용자가 디지털 제품과 처음 상호 작용하는 경우. 사용자 삭제됨: 사용자가 방금 작업을 완료했거나 앱 또는 사이트와 관련된 모든 콘텐츠를 삭제했습니다. 오류 상태: 사용자가 상호작용 중에 장애물에 부딪혔습니다. 데이터 없음: 시스템에 표시할 데이터가 없거나 검색어의 결과가 없습니다. 많은 설계자는 빈 상태가 사용자를 참여시킬 수 있는 기회를 간과합니다. 참여를 위해 빈 상태를 최적화하기보다는 관련 작업 및 기능에 더 집중하는 경향이 있습니다. 빈 상태 예 다음은 위에서 언급한 빈 상태 유형을 사용하는 경우와 방법에 대한 네 가지 사용자 인터페이스 디자인 예입니다. 처음 사용/온보딩 온보딩 또는 빈 상태를 처음 사용하여 사용자에게 시작 지침과 함께 빈 캔버스를 제공합니다. 이러한 화면은 일반적으로 기본 클릭 유도 문안 버튼을 사용하여 작업을 호출해야 합니다. 페이스북 메신저의 빈 상태 설치 화면은 작은 공간에서 많은 일이 벌어지고 있지만 기본 CTA는 평이한 언어를 사용하여 눈에 띕니다. 페이스북 빈 상태 이 빈 상태 화면에서 사용자가 할 수 있는 작업을 살펴보겠습니다. 앱 내에서 사진을 찍거나 동영상을 녹화할 수 있음을 알려줍니다. 얼마나 많은 Facebook 친구가 앱을 사용하고 있는지 알려줌으로써 사회적 압박을 가합니다. 설치하기 전에 앱에 대한 추가 정보를 조회할 수 있습니다. 친밀감을 형성하고 참여를 독려하는 사랑스러운 그래픽 Facebook Messenger의 설치 화면은 디자이너가 빈 상태를 사용하여 처음 사용자를 격려하고 교육하는 방법을 보여주는 환상적인 예입니다. 작업 완료/사용자 삭제됨 빈 상태는 사용자에게 새로운 상호 작용을 유도하거나 작업 완료를 축하할 수 있는 기회입니다. 이 피드백은 습관 형성 제품을 개발하는 데 도움이 되는 자리 표시자 및 보상 역할을 합니다 . 이러한 "사용자가 지운" 빈 상태는 추가 참여를 장려하는 데 필수적입니다. 작업 완료 빈 상태에 통합할 세 가지 사항은 다음과 같습니다. 1단계: 먼저 사용자에게 작업을 완료했음을 알립니다. 2단계: 사용자에게 보상(예: 축하) 3단계: 다음 단계로 안내 iOS용 WritekUpp 앱을 예로 사용하겠습니다 . 이미지03 1단계: "더 이상 할 일이 없습니다." 2단계: "잘했어!" 3단계: "다른 작업을 만들려면 아래를 탭하세요." 그 뒤에 CTA: "새 작업 만들기" 오류 상태 오류는 피할 수 없으며 사용자와 시스템 양쪽에서 발생할 수 있습니다 . 중요한 것은 사용자에게 무엇이 잘못되었는지, 왜 발생했는지(미래에 발생하지 않도록), 다음에 해야 할 일을 알려주는 것입니다. iOS App Store의 이 예는 사용자가 해당 지역에서 사용할 수 없는 앱에 대한 링크를 따를 때 어떤 일이 발생하는지 보여줍니다. App Store는 사용자에게 "사용할 수 없는 항목"이 무엇인지, "요청한 항목은 현재 영국 스토어에서 사용할 수 없는 항목"인지 알려줍니다. 이미지01 이 예에서 App Store에서 누락된 것은 다음에 해야 할 일입니다. 이는 불만을 야기할 수 있습니다 . 좋은 옵션은 "해당 지역에서 사용할 수 있는 유사한 앱 검색"입니다. 유머는 사람들이 오류에 대해 기분을 좋게 만드는 데 도움이 되지만 혼란을 주거나 추가 마찰을 일으켜서는 안 됩니다. Piccsy의 이 오류 화면은 미묘한 유머의 훌륭한 예입니다. 여기에서 Piccsy는 사용자에게 아티스트로 연결되는 일러스트레이션과 앱으로 돌아가기 위한 CTA를 제공합니다. 이미지05 IMDB는 404 페이지에서 비슷한 유머러스한 전략을 사용합니다. 페이지는 사용자에게 홈페이지로 돌아가는 링크와 함께 URL을 찾을 수 없음을 알려줍니다. IMDB에는 영화의 IMDB 페이지로 연결되는 영화의 404 변경된 인용문도 포함되어 있습니다. 이미지02 IMDB 404 오류 페이지 의 영리한 점은 교육과 즐거움을 준다는 것입니다. 사용자는 유머러스한 인용구를 들으면서 새로운 영화를 발견할 수 있습니다. 데이터 없음 빈 상태는 시스템에 답변이 없을 때 사용자가 콘텐츠를 찾는 데 도움이 되어야 합니다. DuckDuckGo의 이 예는 쿼리에 대한 결과가 없을 때 어떤 일이 발생하는지 보여줍니다. 검색 엔진에 콘텐츠가 너무 많은 경우에는 드문 경우입니다 . 먼저 DuckDuckGo는 "[QUERY]에 대한 결과를 찾을 수 없습니다."라는 사용자 쿼리를 표시합니다. 그러면 사용자에게 키워드 오류를 확인하라는 메시지가 표시됩니다. 다음으로 검색 엔진은 문제를 해결하기 위한 제안을 제공합니다. 모든 단어의 철자가 올바른지 확인하십시오. 다른 키워드를 사용해 보십시오. 보다 일반적인 키워드를 사용해 보십시오. 더 적은 수의 키워드를 시도하십시오. 이러한 "데이터 없음" 빈 상태는 시스템에 응답이 없기 때문에 사용자를 좌절시킬 수 있습니다. 실행 가능한 조언으로 사용자 인터페이스를 깨끗하게 유지하면 위에서 DuckDuckGo가 하는 것처럼 문제를 해결하는 데 도움이 될 수 있습니다 . 빈 상태 디자인 팁 시각적 신호 사용 비어 있는 상태의 일러스트레이션 또는 GIF를 통한 시각적 신호는 사용자가 다음에 수행할 작업을 이해하는 데 도움이 됩니다. 이는 격려를 제공하면서 행동과 관련이 있어야 합니다. 가장 중요한 것은 그래픽이 사용자의 주의를 산만하게 해서는 안 됩니다. 예를 들어 Google은 CTA와 함께 "여기에 파일을 드롭하거나 '새로 만들기' 버튼을 사용하십시오."라는 문서 일러스트레이션을 사용합니다. 간단한 이미지는 작업과 관련이 있고 사용자의 주의를 산만하게 하지 않으며 지침에 주의를 끕니다. 제안 제안 제안은 사용자가 시작하기 위한 지침과 아이디어를 안내하는 데 도움이 됩니다. 예를 들어 Spotify의 새로운 재생 목록 빈 상태에는 노래를 추가하기 위한 CTA가 포함되어 있지만 재생 목록 이름을 기반으로 한 "추천 노래"도 제공합니다. 즉, 사용자가 재생 목록의 이름을 "90년대 랩 재생 목록"과 같이 좀 더 설명적인 이름으로 변경하면 더 나은 추천을 받을 수 있습니다. . 빈 상태 개인화 사용자 데이터(예: 이름) 또는 개인화된 콘텐츠로 빈 상태를 개인화하면 보다 의미 있는 경험을 생성하여 참여 및 제품 만족도를 높일 수 있습니다. 예를 들어 Facebook Messager의 설치 화면에는 서비스를 사용하는 사용자의 친구도 표시됩니다. 빈 상태 복사본을 의미 있게 만들기 Microcopy 전문가이자 UX 작가인 Kinneret Yifrah는 빈 상태 복사가 의미가 있어야 한다고 주장합니다 . 그녀는 세 가지 핵심 요소로 카피를 구성합니다. 제목: 상태를 설명합니다. 동기 부여: 사용자에게 어떤 이점이 있는지 또는 어떻게 수행할 것인지 CTA: 설명이 포함된 행동 유도 버튼 이 구조를 사용하여 예제 경고에 대한 빈 상태를 만들 수 있습니다. 제목: 아직 알림을 설정하지 않았습니다. 동기 부여: 알림이 계속 최신 정보를 제공하므로 중요한 정보를 놓칠까 걱정할 필요가 없습니다. CTA: 알림 만들기 Kinneret의 사용자 중심 전략을 따르면 사용자가 행동을 취하도록 동기를 부여하는 의미 있는 카피를 만드는 데 도움이 됩니다. UXPin으로 빈 상태 프로토타입 및 테스트 UXPin의 고급 기능을 사용하여 디자이너는 최종 제품 사용자 경험을 정확하게 복제하는 빈 상태 프로토타입을 만들 수 있습니다. UXPin 프로토타입은 몰입형 코드와 같은 기능과 완전히 상호 작용하여 디자인 팀이 고품질 결과를 테스트하고 반복할 수 있는 실행 가능한 피드백을 제공합니다. 인터랙티브 프로토타이핑 대화형 프로토타입은 클릭/탭, 스와이프, 스크롤 등과 같은 사용자 참여에 응답합니다. 또한 UXPin의 프로토타입을 통해 디자이너는 사용자 입력에서 데이터를 캡처하고 애플리케이션의 다른 곳에서 사용할 수 있습니다. 이러한 프로토타입에는 최종 제품 경험을 정확하게 복제하는 탐색, 전환, 애니메이션, 팝업 및 기타 상호 작용 디자인 특성이 포함됩니다. 예를 들어 우리의 예제 경매 앱에서는 사용자가 항목을 선택하고 입찰할 수 있습니다. 확인 화면은 사용자에게 입찰이 진행 중이고 경매가 종료되는 시점을 알려줍니다. 눈에 띄는 CTA는 사용자를 경매 홈페이지로 다시 안내합니다. UXPin을 사용하면 이전 화면에서 캡처한 사용자 이름 및 입찰가를 포함하여 변수를 사용하여 이 화면을 보다 개인화할 수 있습니다 . 경매 앱은 빈 상태가 아니지만 UXPin이 정확한 프로토타이핑 및 테스트를 위해 디자이너에게 제공하는 강력한 기능을 보여줍니다. 실행 가능한 피드백 더 나은 프로토타입은 유용성 참가자 및 이해 관계자로부터 의미 있고 실행 가능한 피드백을 제공합니다. 디자이너는 디자인 과정에서 가치 있는 비즈니스 기회를 파악하면서 더 많은 문제를 해결할 수 있습니다.