Domača » UI / UX » Kako oblikovati prazne strani za spletne strani in mobilne aplikacije

    Kako oblikovati prazne strani za spletne strani in mobilne aplikacije

    Prazne strani s stanjem so manj znani elementi oblikovanja, ki imajo pomembno vlogo v uporabniški izkušnji. V najpreprostejši obliki so prazne države postavitve strani, ki jih vidite, ko uporabnik prvič obišče stran, kjer ni na voljo nobene vsebine.

    To lahko vključuje mobilne aplikacije, družabna omrežja ali celo prazne kategorije spletnih dnevnikov. Namen je dati prazno stran izgleda kot neprazna stran. Obiskovalci morajo prepoznati pomanjkanje vsebine kot sredstvo za bližajočo se vsebino.

    Želel bi omeniti, kako delujejo prazne državne strani in zakaj so tako pomembne. Oblikovalci vmesnikov bi morali razmisliti o teh točkah in jih po potrebi uporabiti v praznih državah. Ampak, da začnemo, preučimo, kako deluje prazna država in kako zagotavlja vmesnik vrednost.

    Vrednost praznih držav

    Lepota velikega praznega stanja je v preprostosti. Prazne strani pojasnjujejo kaj bi moralo biti na strani ko je nekaj vsebine. Lahko je pasivna kot prazna mapa »Prejeto« ali pa aktivno čaka na uporabnika, kot je prazen Twitter.

    Prazne strani so dolgočasne, dolgočasne in celo zmedene. Prazna stanja zagotoviti smernice da bi uporabnikom pomagali razumeti, kaj gledajo. Čeprav je to prazna stran, pomaga dodatni kontekst.

    Tudi prazna stanja dajejo občutek “svežino” z novimi računi, ki nimajo obstoječih podatkov.

    Ta test, ki ga je opravil Redditor Bambo_Ocha, je preveril 20 različnih aplikacij za prazne modele držav. Različni slogi oblikovanja so se pojavili z gumbi CTA, vzorčnimi podatki in celo kratkimi uvodnimi vodenji.

    Aplikacije, ki uspevajo v uporabniški bazi, morajo to prazno oblikovati spodbujanje dejavnosti uporabnikov. Ta dejavnost je lahko objavljanje vsebine, dodajanje prijateljev, prenos fotografij ali ne glede na to, za katero aplikacijo je bila ustvarjena. Zaslon spodaj od Tookapic je odličen primer.

    Toda strani s praznimi stanjem imajo še vedno vrednost, tudi če ni potrebno ukrepati. Ti modeli so namenjeni predvsem zagotavljanju informacij.

    Statične informacije so prav tako dragocene in niso same po sebi slabo za prazno stanje. Na primer ta oblika strani ne prikazuje trenutnih meritev na nadzorni plošči aplikacije za sledenje. Uporabnik bo morda želel dodati nekaj meritev, vendar ni slabo, če pustite puščico prazno.

    Podobni statični modeli lahko odlično delujejo za prazne arhive spletnih dnevnikov ali prazne mape sporočil. Popolnoma sprejemljivo je, da ni prikazanih nobenih sporočil. Toda stran ne sme biti popolnoma prazna brez konteksta.

    Elementi pomembnih strani

    Najpomembnejši element na prazni strani stanja je kontekstu. To je lahko v obliki grafike, besedila ali obojega. Uporabnike želite obvestiti, zakaj je stran prazna in kakšne vrste podatkov lahko obstajajo (e-poštna sporočila, tweets, profili prijateljev itd.).

    Medtem ko je besedilo primarni komunikacijski medij na spletu, ne morete spregledati vrednosti grafike in ikon.

    DigitalOcean ima briljantno armaturno ploščo s prazno grafiko, ki jasno prikazuje njihovo točko. Njihovo podjetje uporablja ustvarjalno blagovno znamko in čisto tipografijo, zato ni presenetljivo, da so njihove prazne strani tako ilustrativne.

    Še en pomemben vidik oblikovanja prazne države je gumb za klic na dejanje. To je običajno zasnovan kot gumb, čeprav hiperpovezave delujejo dobro.

    Cilj je pomagati uporabnikom, da ukrepajo in razjasnijo njihovo prazno stanje. Ali to zahteva dodajanje podatkov ali ukrepanje na spletnem mestu, CTA vodijo uporabnike na naslednji korak, ki je potreben za odpravo praznega stanja.

    Dropbox ima odlično zasnovo z dvema gumboma CTA. Kadar uporabnik Dropboxa nima map, lahko ustvarijo novo mapo ali pa dodajo vzorčno mapo na stran.

    Spodbujanje dejavnosti uporabnikov

    Gumbi za klicanje so aktivni elementi, vendar ne pozabite, da je kopija strani razložena kaj počne uporabnik. Nihče ne klikne gumbov, ne da bi vedel zakaj.

    Najboljši način za spodbujanje dejavnosti je pisanje odlične kopije na prazni strani. Uporabnike usmerjate skozi pretok vsebin, ki spodbuja delovanje uporabnikov nad celotno aplikacijo.

    Ta ModSpotova prazna država je briljanten primer kakovostnega oblikovanja in spodbudne vsebine.

    Ikone se uporabljajo za prikaz, kaj naj uporabnik doda na spletno mesto. Puščica kaže na gumb, ki ga morajo uporabniki klikniti skupaj z besedilom, ki spodbuja vedenje. To je briljanten model praznega stanja z vsemi elementi, ki jih pričakujete.

    Podobno prazna država Gumroad ponuja dve možnosti, ki ciljata na različna potencialna dejanja. Uporabniki lahko dodajo digitalni izdelek ali fizični izdelek za začetek prodaje.

    Druge povezave na strani vodijo do vodnikov za pomoč in kontaktnih podatkov. Vse je neverjetno racionalno in lepo povezano.

    Aplikacije za splet v primerjavi z mobilnimi aplikacijami

    Prazne strani s stanjem za vse medije morajo slediti podobnim trendom oblikovanja. Vendar pa obstajajo nekatere manjše razlike z uporabniško izkušnjo na namizju v primerjavi s pametnim telefonom.

    Spletne strani na večjih zaslonih imajo več prostora za dodatne gumbe. Lahko imajo tudi spletne strani večji navigacijski elementi ki lahko ljudi pritegnejo drugam na spletno mesto.

    To je mogoče rešiti v podobnem slogu kot Nusii na njihovi strani s predlogi. Če ni predlogov, je uporabnik voden do “dodajte predloge” v zgornji navigacijski vrstici.

    Mobilne aplikacije imajo lahko podobne težave, vendar so zasloni veliko manjši. Tako je veliko lažje pritegniti uporabnike v akcijo.

    Menim, da je najbolje, da mobilne aplikacije ohranite enostavnejše z manj možnostmi. Uporabite vizualno sliko kot očesni bonbon za spodbujanje akcij in usmeritev proti zelo specifičnemu pretoku uporabnika.

    Primeri oblikovanja praznega stanja

    Morda je najboljši način za spoznavanje modela prazne države študija nekaj primerov. Briljantna spletna galerija emptystat.es kurira prazne državne strani z različnih spletnih strani na mobilne aplikacije.

    Ročno sem izbral nekaj primerov, ki zaslužijo vašo pozornost in ki najbolje ponazarjajo načrtovanje prazne države. Če imate kakšne druge predloge, nam to sporočite.

    Plavajoči IP-ji DigitalOcean

    Spletni pretok beta

    Invision

    Bitbucket

    Ni pripetih skupin

    Sporočila Facebook

    LayerVault

    Izzivi vadbe

    Buffer Empty

    Wordovi dokumenti

    Evernote klepeti

    Beamly Za Android

    Zvočne avdio knjige

    Pocket App

    BBC Moje novice

    GitHub Wiki strani

    Flipboard

    Chrome Upravitelj zaznamkov

    Mac Infinit App

    Prazna vsebina za Facebook