Jak navrhnout prázdné stránky pro webové stránky a mobilní aplikace

Stránky s prázdným stavem jsou méně známé konstrukční prvky, které mají významnou roli v uživatelském prostředí. V jeho nejjednodušší formě jsou prázdné stavy Rozvržení stránky viděné, když uživatel poprvé navštíví stránku, na které není k dispozici žádný obsah.

To může zahrnovat mobilní aplikace, sociální sítě nebo dokonce prázdné kategorie blogů. Účelem je doručit prázdnou stránku vypadá jako neprázdnou stránku. Návštěvníci by měli rozpoznat nedostatek obsahu jako prostředek hrozícího obsahu.

Chtěl bych se zabývat tím, jak fungují prázdné státní stránky a proč jsou tak důležité. Návrháři rozhraní by měli tyto body zvážit a pokusit se je aplikovat na prázdné stavy, kdykoli je to vhodné. Ale abychom mohli začít, podívejme se, jak funguje prázdný stav a jak poskytuje rozhraní rozhraní.

Hodnota prázdných států

Krása velkého designu prázdného státu je v jednoduchosti. Vysvětlete prázdné stránky co by mělo být na stránce jakmile je nějaký obsah. Může být pasivní jako prázdná složka Doručená pošta, nebo může aktivně čekat na uživatele jako prázdný zdroj Twitter.

Prázdné stránky jsou nudné, nudné a dokonce matoucí. Prázdné stavy poskytovat pokyny pomáhají uživatelům pochopit, na co se dívají. I když je to prázdná stránka, další kontext pomáhá.

Prázdné stavy také dávají smysl “svěžest” s novými účty, které nemají žádná existující data.

Tento test provedl Redditor Bambo_Ocha zkontroloval 20 různých aplikací pro návrhy prázdného stavu. Různé styly designu se vyskytly s tlačítky CTA, ukázkovými daty a dokonce i stručnými návody.

Aplikace, které se daří na userbase, by měly navrhovat prázdné podpořit činnost uživatelů. Touto činností by mohlo být publikování obsahu, přidávání přátel, nahrávání fotografií nebo jakákoli aplikace, pro kterou byla vytvořena. Obrazovka z Tookapic je skvělým příkladem.

Prázdné stavové stránky však mají hodnotu i v případě, že není nutná žádná akce. Tyto návrhy jsou primárně určeny k poskytování informací.

Statická informace je stejně cenná a není přirozeně špatné mít prázdný stav. Tento návrh stránky například nezobrazuje žádné aktuální metriky z řídicího panelu aplikace pro sledování. Uživatel může chtít přidat nějaké metriky, ale není špatné ponechat pomlčku prázdnou.

Podobné statické návrhy mohou fungovat skvěle pro prázdné archivy blogů nebo prázdné složky zpráv. Je naprosto přijatelné, aby se žádné zprávy nezobrazovaly. Stránka by však neměla být zcela prázdná bez kontextu.

Základní prvky stránky

Nejdůležitějším prvkem na stránce prázdného stavu je kontext. To může přijít ve formě grafiky, textu nebo obojího. Chcete informovat uživatele, proč je stránka prázdná a jaký druh dat může být (e-maily, tweety, profily přátel atd.).

A zatímco text je primárním komunikačním médiem na webu, nemůžete přehlédnout hodnotu grafiky a ikon.

DigitalOcean má brilantní řídicí panel s grafikou prázdného stavu, která jasně ukazuje jejich bod. Jejich společnost používá kreativní branding a čistou typografii, takže není žádným překvapením, že jejich prázdné stránky jsou tak ilustrativní.

Dalším zásadním aspektem návrhu prázdného stavu je tlačítko volání na akci. To je obvykle navrženo jako tlačítko, i když hypertextové odkazy fungují také dobře.

Cílem je pomoci uživatelům podniknout kroky a vyčistit jejich prázdný stav. Zda to vyžaduje přidání dat nebo přijetí akce na místě, CTAs průvodce uživatele do dalšího kroku nutného k vymazání prázdného stavu.

Dropbox má skvělý design se dvěma tlačítky CTA. Kdykoli uživatel Dropbox nemá žádné složky, může buď vytvořit novou složku nebo přidat ukázkovou složku na stránku.

Podpora aktivity uživatele

Tlačítka volání na akci jsou aktivní prvky, ale nezapomeňte, že kopie stránky vysvětluje co dělá uživatel. Nikdo jen klikne na tlačítka, aniž by věděl proč.

Nejlepším způsobem, jak podpořit aktivitu, je napsat skvělou kopii na stránce s prázdným stavem. Průvodce uživateli prostřednictvím toku obsahu, který podporuje činnost uživatelů v celé aplikaci.

Tento prázdný stav ModSpot je skvělým příkladem kvalitního designu a povzbuzujícího obsahu.

Ikony slouží k demonstraci, co má uživatel přidat na web. Šipka ukazuje na tlačítko, které by uživatelé měli kliknout spolu s některým textovým povzbudivým chováním. To je skvělý design s prázdným stavem se všemi prvky, které byste očekávali.

Podobně prázdný stav Gumroad nabízí dvě možnosti zaměřené na různé potenciální akce. Uživatelé mohou přidat digitální produkt nebo fyzický produkt, aby mohli začít prodávat.

Další odkazy na stránce vedou k nápovědě a kontaktním údajům. Všechno je neuvěřitelně zjednodušené a pěkně se spojuje.

Web vs. mobilní aplikace

Stránky s prázdným stavem pro všechna média by měly sledovat podobné trendy designu. V porovnání se smartphonem však existují některé drobné rozdíly s uživatelským komfortem na pracovní ploše.

Webové stránky na větších obrazovkách mají více prostoru pro další tlačítka. Webové stránky mohou také mít větších navigačních prvků které mohou kreslit lidi jinde na místě.

To může být vyřešeno v podobném stylu jako Nusii na stránce jejich návrhů. Tam, kde nejsou žádné návrhy, je uživatel veden “přidávat návrhy” v horním navigačním panelu.

Mobilní aplikace mohou mít podobné problémy, ale obrazovky jsou mnohem menší. To z toho dělá mnohem snazší nakreslit uživatele přímo do akce.

Nejlepší je udržet mobilní aplikace jednodušší s menším počtem možností. Použijte vizuální efekty jako pastvu pro oči, abyste podpořili akci a poukazovali na velmi specifický tok uživatelů.

Příklady prázdného stavového návrhu

Snad nejlepším způsobem, jak se dozvědět o designu prázdného stavu, je prostudovat některé příklady. Brilantní webová galerie emptystat.es curates prázdné stavové stránky z různých webových stránek na mobilní aplikace.

Vybral jsem několik příkladů, které si zaslouží vaši pozornost a které nejlépe dokreslují stav prázdného stavu. Máte-li jakékoli další návrhy, neváhejte a dejte nám vědět.

Plovoucí IP adresy DigitalOcean