웹 사이트 및 모바일 앱을 위해 빈 상태 페이지를 디자인하는 방법
빈 상태 페이지는 사용자 경험에 중요한 역할을하는 덜 알려진 디자인 요소입니다. 가장 간단한 형태로 빈 상태는 다음과 같습니다. 사용자가 콘텐츠가없는 페이지를 처음 방문 할 때 표시되는 페이지 레이아웃.
여기에는 모바일 애플리케이션, 소셜 네트워크 또는 빈 블로그 카테고리까지 포함될 수 있습니다. 목적은 빈 페이지를 전달하는 것입니다. 모양 비어 있지 않은 페이지. 방문객은 임박한 내용의 수단으로서 내용의 부족을 인식한다..
빈 상태 페이지의 작동 방식과 왜 중요 페이지인지에 대해 설명하고자합니다. 인터페이스 설계자는 이러한 점을 고려하여 적절할 때마다이를 빈 상태에 적용하려고합니다. 하지만 빈 상태 함수가 어떻게 작동하는지, 인터페이스가 어떻게 값을 제공하는지 살펴 보자..
빈 상태의 가치
위대한 빈 상태 디자인의 장점은 단순함에 있습니다. 빈 페이지 설명 페이지에 있어야 할 내용 일단 몇 가지 콘텐츠가 있습니다. 빈받은 편지함처럼 수동적 일 수도 있고 빈 트위터 피드처럼 사용자를 적극적으로 기다릴 수도 있습니다.
빈 페이지는 지루하고 지루하며 혼란 스럽습니다. 빈 상태 안내를 제공하다 사용자가 자신이보고있는 것을 이해할 수 있도록 도와줍니다. 빈 페이지이지만 추가 컨텍스트가 도움이됩니다..
빈 상태는 또한 감각을 준다. “선도” 기존 데이터가없는 새 계정으로.
Redditor Bambo_Ocha가 수행 한이 테스트는 빈 상태 디자인에 대해 20 개의 다른 앱을 확인했습니다. 다양한 디자인 스타일이 CTA 버튼, 샘플 데이터 및 간단한 자습서 연습을 통해 발생했습니다..
사용자 기반에서 번창하는 앱은 빈 상태를 디자인해야합니다. 사용자 활동 장려. 이 활동은 콘텐츠 게시, 친구 추가, 사진 업로드 또는 앱이 제작 된 모든 작업이 될 수 있습니다. Tookapic의 아래 화면은 훌륭한 예입니다..
그러나 빈 상태 페이지는 조치가 필요하지 않더라도 여전히 가치가 있습니다. 이러한 디자인은 주로 정보를 제공하기 위해 만들어졌습니다..
정적 정보는 마찬가지로 가치가 있으며 빈 상태를 갖는 것이 본질적으로 나쁘지 않습니다. 예를 들어이 페이지 디자인은 추적 앱 대시 보드에서 현재 측정 항목을 표시하지 않습니다. 사용자는 일부 측정 항목을 추가하려고 할 수 있지만 대시를 비워 두는 것은 나쁘지 않습니다..
비슷한 정적 인 디자인은 빈 블로그 아카이브 또는 빈 메시지 폴더에 유용 할 수 있습니다. 표시 할 메시지가 없어도 괜찮습니다. 그러나 문맥이없는 페이지는 완전히 비어 있어서는 안됩니다..
핵심 페이지 요소
빈 상태 페이지의 가장 중요한 요소는 다음과 같습니다. 문맥. 이것은 그래픽, 텍스트 또는 둘 다의 형태로 올 수 있습니다. 사용자에게 페이지가 비어있는 이유와 거기에있을 수있는 데이터의 종류 (이메일, 트윗, 친구 프로필 등)를 알려주고 싶습니다..
텍스트는 웹의 기본 통신 매체이지만 그래픽 및 아이콘의 가치를 간과 할 수는 없습니다..
DigitalOcean에는 자신의 요점을 명확하게 보여주는 빈 상태 그래픽이 포함 된 화려한 대시 보드가 있습니다. 그들의 회사는 독창적 인 브랜딩 및 깨끗한 타이포그래피를 사용하므로 빈 상태 페이지가 너무도 놀랍지 않습니다..
빈 상태 설계의 또 다른 중요한 측면은 클릭 유도 문안 버튼. 하이퍼 링크도 잘 작동하지만 이것은 일반적으로 버튼처럼 디자인됩니다..
목표는 사용자가 조치를 취하고 빈 상태를 정리할 수 있도록 돕는 것입니다. 여기에 데이터를 추가하거나 사이트에서 조치를 취해야하는 경우 CTA는 사용자를 빈 상태를 정리하는 데 필요한 다음 단계로 안내합니다.
Dropbox는 두 개의 CTA 버튼이있는 훌륭한 디자인을 가지고 있습니다. 보관 용 계정 사용자에게는 폴더가 없을 때마다 새 폴더를 만들거나 샘플 폴더를 페이지에 추가 할 수 있습니다.
사용자 활동 장려
클릭 유도 문안 버튼은 활성화 된 요소이지만 페이지 사본에 설명되어 있습니다. 사용자가하고있는 일. 왜 아무 이유없이 버튼을 클릭하는 사람은 아무도 없습니다..
활동을 장려하는 가장 좋은 방법은 빈 상태 페이지에 좋은 사본을 작성하는 것입니다. 전체 응용 프로그램에 대한 사용자 작업을 장려하는 콘텐츠 흐름을 통해 사용자를 안내합니다..
ModSpot의이 빈 상태는 우수한 디자인과 독창적 인 콘텐츠에 대한 훌륭한 예입니다.
아이콘은 사용자가 사이트에 추가해야하는 것을 보여주기 위해 사용됩니다. 화살표는 사용자가 일부 텍스트를 권장하는 동작과 함께 클릭해야하는 버튼을 가리 킵니다. 이것은 당신이 기대할 수있는 모든 요소를 갖춘 화려한 빈 상태 디자인입니다..
마찬가지로 Gumroad 빈 상태는 다른 잠재적 인 동작을 대상으로하는 두 가지 옵션을 제공합니다. 사용자는 판매를 시작하기 위해 디지털 제품 또는 실제 제품을 추가 할 수 있습니다..
이 페이지의 다른 링크는 도움 가이드 및 연락처 정보로 연결됩니다. 모든 것이 엄청나게 간소화되고 잘 묶여 있습니다..
웹 vs. 모바일 앱
모든 매체에 대한 빈 상태 페이지는 비슷한 디자인 경향을 따라야합니다. 하지만 스마트 폰에 비해 데스크톱 사용자 환경에는 약간의 차이가 있습니다.
큰 화면의 웹 사이트 더 많은 방을 가지고있다. 추가 버튼. 웹 페이지는 더 큰 탐색 요소 이 사이트를 통해 다른 사람들을 사이트로 끌어들일 수 있습니다..
이것은 Nusii가 제안서 페이지에서하는 것과 비슷한 스타일로 해결할 수 있습니다. 제안이없는 경우 사용자는 “제안 추가” 상단 네비게이션 바에있는 버튼.
모바일 앱의 경우 비슷한 문제가있을 수 있지만 화면이 훨씬 작습니다. 이것은 그것을 만든다. 액션에 사용자를 바로 끌어 들이기가 훨씬 쉽다..
모바일 앱을 더 적은 옵션으로 더 간단하게 유지하는 것이 가장 좋습니다. 눈을 사탕으로 사용하여 행동을 유도하고 매우 구체적인 사용자 흐름을 가리 킵니다..
빈 상태 설계 예제
아마도 빈 상태 디자인을 배우는 가장 좋은 방법은 몇 가지 예를 연구하는 것입니다. 화려한 웹 갤러리 인 emptystat.es는 다양한 웹 사이트의 빈 상태 페이지를 모바일 응용 프로그램으로 구분합니다..
빈 상태 디자인을 가장 잘 보여주는 몇 가지 예를주의 깊게 살펴 보았습니다. 다른 제안 사항이 있으면 언제든지 저희에게 알려주십시오..
DigitalOcean 플로팅 IP
웹 플로우 베타
Invision
비트 버켓
고정 된 그룹 없음
Facebook 메시지
LayerVault
운동 과제
버퍼 비우기
Word 응용 프로그램 문서
Evernote 채팅
안드로이드 용 Beamly
가청 오디오 북
포켓 응용 프로그램
BBC 내 뉴스
GitHub 위키 페이지
플립 보드
Chrome 북마크 관리자
Mac Infinit 앱
빈 Facebook 피드
