Ako navrhovať prázdne štátne stránky pre webové stránky a mobilné aplikácie

Prázdne stavové stránky sú menej známe konštrukčné prvky s významnou úlohou v používateľskej skúsenosti. Vo svojej najjednoduchšej forme sú prázdne stavy rozloženia stránok zobrazené, keď používateľ prvýkrát navštívi stránku, na ktorej nie je k dispozícii žiadny obsah.

Môže to zahŕňať mobilné aplikácie, sociálne siete alebo dokonca prázdne kategórie blogov. Účelom je dodať prázdnu stránku vyzerá ako stránka, ktorá nie je prázdna. Návštevníci by mali uznať nedostatok obsahu ako prostriedku blížiaceho sa obsahu.

Chcel by som sa oboznámiť s tým, ako fungujú stránky s prázdnymi stavmi a prečo sú také dôležité. Návrhári rozhrania by mali zvážiť tieto body a pokúsiť sa ich použiť, ak je to vhodné, na prázdne stavy. Ale ak chceme začať, skúmame, ako funguje prázdny stav a ako poskytuje rozhranie hodnotu.

Hodnota prázdnych štátov

Krása veľkého prázdneho dizajnu štátu je v jednoduchosti. Prázdne stránky vysvetľujú čo by malo byť na stránke akonáhle je nejaký obsah. Môže to byť pasívne ako prázdna schránka, alebo môže byť aktívne čakať na používateľa ako prázdny informačný kanál Twitter.

Prázdne stránky sú nudné, nudné a dokonca aj mätúce. Prázdne stavy poskytnúť usmernenie pomôcť používateľom pochopiť, čo hľadajú. Hoci je to prázdna stránka, pomáha extra kontext.

Prázdne štáty tiež dávajú pocit “sviežosť” s novými účtami, ktoré nemajú žiadne existujúce údaje.

Tento test vykonaný Redditor Bambo_Ocha skontroloval 20 rôznych aplikácií pre prázdne návrhy. Rôzne štýly dizajnu sa vyskytli s tlačidlami CTA, vzorovými údajmi a dokonca aj krátkymi návodmi na návod.

Aplikácie, ktoré prosperujú na užívateľskej základni, by mali navrhnúť prázdne stavy podporovať aktivitu používateľov. Táto aktivita môže byť publikovanie obsahu, pridávanie priateľov, nahrávanie fotografií alebo čokoľvek, prečo bola aplikácia vytvorená. Obrazovka nižšie od spoločnosti Tookapic je skvelým príkladom.

Stránky s prázdnym stavom však stále majú hodnotu, aj keď nie je potrebná žiadna činnosť. Tieto návrhy sú primárne určené na poskytovanie informácií.

Statické informácie sú rovnako cenné a nie je zbytočné mať prázdny stav. Napríklad tento návrh stránky neobsahuje žiadne aktuálne metriky z hlavného panela sledovania aplikácie. Používateľ môže chcieť pridať nejaké metriky, ale nie je zle nechať pomlčku prázdnu.

Podobné statické návrhy môžu fungovať skvele pre prázdne archívy blogov alebo prázdne priečinky správ. Je dokonale prijateľné, aby nemali žiadne správy na zobrazenie. Ale stránka by nemala byť úplne prázdna bez kontextu.

Prvky životnej stránky

Najdôležitejší prvok na prázdnej stavovej stránke je kontext. Môže ísť o grafiku, text alebo oboje. Chcete informovať používateľov, prečo je stránka prázdna a aké údaje môžu byť tam (e-maily, tweety, profily priateľov, atď.).

A zatiaľ čo text je primárnym komunikačným médiom na webe, nemôžete prehliadať hodnotu grafiky a ikon.

DigitalOcean má brilantnú prístrojovú dosku s prázdnou stavovou grafikou, ktorá jasne ilustruje ich bod. Ich spoločnosť používa kreatívnu branding a čistú typografiu, takže nie je prekvapením, že ich prázdne stránky sú tak ilustračné.

Ďalším dôležitým aspektom návrhu prázdneho stavu je tlačidlo výzvy na akciu. To je zvyčajne navrhnuté ako tlačidlo, aj keď hypertextové odkazy fungujú dobre.

Cieľom je pomôcť používateľom prijať opatrenia a vyčistiť ich prázdny stav. Či to vyžaduje pridanie údajov alebo prijímanie opatrení na stránkach, CTA nasmerujú používateľov na ďalší krok potrebný na vymazanie prázdneho stavu.

Dropbox má skvelý dizajn s dvoma tlačidlami CTA. Kedykoľvek používateľ Dropbox nemá žiadne priečinky, môže vytvoriť nový priečinok alebo pridať vzorovú zložku na stránku.

Podporovanie aktivity používateľa

Tlačidlá na výzvu na akciu sú aktívne prvky, ale pamätajte na to, že kópia stránky vysvetľuje čo používateľ robí. Nikto jednoducho neklikne na tlačidlá bez toho, aby vedel prečo.

Najlepším spôsobom, ako podporiť aktivitu, je písať skvelú kópiu na prázdnej stránke. Usmerňujte používateľov prostredníctvom toku obsahu, ktorý podporuje aktivitu používateľov v celej aplikácii.

Tento prázdny stav modulom ModSpot je skvelým príkladom kvalitného dizajnu a povzbudzujúceho obsahu.

Ikony sa používajú na preukázanie toho, čo by používateľ mal pridávať na stránku. Šípka ukazuje na tlačidlo, ktoré by mali používatelia kliknúť spolu s textom podporujúcim správanie. Je to brilantný prázdny dizajn štátu so všetkými prvkami, ktoré by ste očakávali.

Podobne prázdny štát Gumroad ponúka dve možnosti zamerané na rôzne potenciálne akcie. Používatelia môžu pridať digitálny produkt alebo fyzický produkt na začatie predaja.

Ďalšie odkazy na stránke vedú k pomoci návodom a kontaktnými údajmi. Všetko je neuveriteľne zjednodušené a dobre spojené.

Web vs. mobilné aplikácie

Prázdne stavové stránky pre všetky médiá by sa mali riadiť podobnými trendmi v projekte. Existujú však niektoré malé rozdiely so skúsenosťami používateľov na pracovnej ploche v porovnaní s inteligentným telefónom.

Webové stránky na väčších obrazovkách mať viac priestoru pre ďalšie tlačidlá. Webové stránky môžu tiež mať väčšie navigačné prvky ktoré môžu ľudí nasmerovať na miesto.

To je možné vyriešiť v podobnom štýle ako Nusii na svojej stránke návrhov. V prípade, že neexistujú žiadne návrhy, používateľ sa bude riadiť “pridať návrhy” v hornom navigačnom paneli.

Mobilné aplikácie môžu mať podobné problémy, ale obrazovky sú oveľa menšie. To robí to oveľa jednoduchšie čerpať používateľov priamo do akcie.

Považujem za najlepšie, aby sa mobilné aplikácie zjednodušili s menším počtom možností. Používajte vizuály ako očné cukríky, aby ste podporili akciu a poukazovali na veľmi špecifický tok používateľov.

Prázdne príklady štátneho dizajnu

Snáď najlepší spôsob, ako sa dozvedieť o prázdnom návrhu štátu, je preskúmať niektoré príklady. Skvelá webová galéria emptystat.es vyčistí prázdne stavové stránky z rôznych webových stránok do mobilných aplikácií.

Vybral som si niekoľko príkladov, ktoré si zaslúžia vašu pozornosť, aby najlepšie ilustrovali stav prázdneho štátu. Ak máte ďalšie návrhy, neváhajte a dajte nám vedieť.

Floating IP DigitalOcean