Hogyan készítsünk üres államlapokat a webhelyek és mobilalkalmazások számára

Az üres állapotlapok kevésbé ismert tervezési elemek, amelyek jelentős szerepet játszanak a felhasználói élményben. A legegyszerűbb formában üres állapotok vannak az oldal elrendezései, amikor a felhasználó először meglátogat egy olyan oldalt, ahol nincs tartalom.

Ez magában foglalhatja a mobilalkalmazásokat, a szociális hálózatokat vagy akár az üres blogkategóriákat is. A cél az, hogy egy üres oldalt juttassunk el úgy néz ki, mint a egy nem üres oldal. A látogatóknak felismerni a tartalom hiányát a közelgő tartalom eszközeként.

Szeretném lefedni, hogy az üres állami oldalak hogyan működnek és miért olyan fontosak. Az interfész-tervezőknek figyelembe kell venniük ezeket a pontokat, és próbálkozniuk kell az üres állapotokhoz, ha szükséges. Azonban, hogy elkezdjük, vizsgáljuk meg, hogyan működik egy üres állapot, és hogyan biztosít értéket az interfész számára.

Az üres államok értéke

A nagy üres állapottervezés szépsége az egyszerűség. Üres oldalak magyarázzák mi legyen az oldalon ha van valami tartalom. Lehet, hogy passzív, mint egy üres postafiók, vagy lehet, hogy aktívan várja a felhasználót, mint egy üres Twitter feed.

Az üres oldalak unalmasak, unalmasak és zavarosak. Üres állapotok irányítást biztosít hogy segítsen a felhasználóknak megérteni, mit néznek. Annak ellenére, hogy ez egy üres oldal, az extra környezet segít.

Az üres államok is érzik “frissesség” új fiókokkal, amelyek nem rendelkeznek meglévő adatokkal.

A Redditor Bambo_Ocha által végzett teszt 20 különböző alkalmazást ellenőrzött az üres állapottervezéshez. A CTA gombokkal, mintadarabokkal, sőt rövid bemutatós bemutatókkal különböző tervezési stílusok történtek.

Azok a alkalmazások, amelyek egy felhasználói bázison haladnak, üresen kell megtervezniük a felhasználói tevékenység ösztönzése. Ez a tevékenység lehet tartalom közzététele, barátok hozzáadása, fényképek feltöltése, vagy bármi is az alkalmazás. A Tookapic alatti képernyő nagyszerű példa.

De az üres állapotlapok még akkor is értéket kapnak, ha nincs szükség cselekvésre. Ezek a formatervezési minták elsősorban tájékoztatásra szolgálnak.

A statikus információ ugyanolyan értékes, és nem feltétlenül rossz az üres állapot. Például ez az oldalterv nem tartalmaz aktuális metrikákat a követési alkalmazás irányítópultjáról. A felhasználó esetleg hozzá szeretne adni néhány mutatót, de nem rossz, ha üresen hagyja a kötőjelet.

Hasonló statikus formatervezési minták jól működhetnek az üres blog archívumok vagy üres üzenetek mappák esetében. Teljesen elfogadható, hogy nem jelenjenek meg üzenetek. Az oldalnak azonban nem szabad teljesen üresnek lennie.

Vital Page Elements

Az üres állapotlap legfontosabb eleme az kontextus. Ez grafikus, szöveges vagy mindkettő formájú lehet. Szeretné tájékoztatni a felhasználókat arról, hogy miért üres az oldal, és milyen adatai lehetnek ott (e-mailek, tweetek, ismerős profilok stb.).

És bár a szöveg az interneten az elsődleges kommunikációs közeg, nem hagyhatja figyelmen kívül a grafikák és az ikonok értékét.

A DigitalOcean-nak van egy ragyogó műszerfalja, amely üres grafikával rendelkezik, és amely világosan szemlélteti a pontjukat. Cégük kreatív márkajelzést és tiszta tipográfiát használ, így nem meglepő, hogy az üres állapotlapok annyira szemléltetőek.

Az üres állapottervezés másik fontos eleme a cselekvési gomb. Ez általában úgy van kialakítva, mint egy gomb, bár a hiperhivatkozások is jól működnek.

A cél az, hogy segítsen a felhasználóknak cselekedni és üres állapotukat törölni. Függetlenül attól, hogy ehhez adatot kell-e hozzáadni, vagy lépéseket kell tennie a webhelyen, a CTA-k segítenek a felhasználóknak az üres állapot törléséhez szükséges következő lépésben.

A Dropboxnak nagyszerű designja van két CTA gombbal. Ha egy Dropbox felhasználónak nincs mappája, akkor új mappát hozhatnak létre, vagy egy minta mappát adhatnak hozzá az oldalhoz.

A felhasználói tevékenység ösztönzése

Az akciógombok az aktív elemek, de ne feledje, hogy az oldalmásolás magyarázza amit a felhasználó csinál. Senki nem rákattint a gombokra anélkül, hogy tudná, miért.

A tevékenység ösztönzésének legjobb módja, hogy nagy példányt írjon az üres állapotlapra. Vezesse át a felhasználókat egy olyan tartalomáramláson keresztül, amely ösztönzi a felhasználói tevékenységet az egész alkalmazásban.

Ez az üres állapot a ModSpot egy kiváló példa a minőségi tervezésre és a bátorítható tartalomra.

Az ikonokat arra használják, hogy bemutassák, amit a felhasználónak hozzá kell adnia a webhelyhez. A nyíl a gombok felhasználóira kattintva néhány szöveges bátorító magatartással párosul. Ez egy ragyogó üres állapottervezés, melynek minden elemét elvárja.

Hasonlóképpen a Gumroad üres állapotban két lehetőség van, amelyek különböző potenciális akciókra irányulnak. A felhasználók hozzáadhatnak egy digitális terméket vagy egy fizikai terméket, hogy elkezdhessék az eladást.

Az oldal egyéb linkjei segítenek a segéd útmutatókban és elérhetőségekben. Minden hihetetlenül egyszerűsített és jól összekapcsolódik.

Web vs mobil alkalmazások

Az összes médiának üres állapotlapjainak hasonló tervezési trendeket kell követniük. Van azonban néhány kisebb különbség az asztali felhasználói élményhez képest egy okostelefonhoz képest.

Weboldalak nagyobb képernyőkön több szoba van extra gombokhoz. A weblapok is rendelkezhetnek nagyobb navigációs elemek amelyek az embereket máshová vonhatják az oldalra.

Ez hasonló módon oldható meg, mint a Nusii a javaslataik oldalán. Ahol nincsenek javaslatok, a felhasználó a vezérlőre vezet “javaslatok hozzáadása” gomb a felső navigációs sávban.

A mobilalkalmazásoknak hasonló problémák lehetnek, de a képernyők sokkal kisebbek. Ez teszi sokkal könnyebb felhívni a felhasználókat a cselekvésbe.

A legjobb, ha a mobilalkalmazásokat egyszerűbbé teheti, kevesebb lehetőséggel. Használja a látványt szemcukorka formájában, hogy ösztönözze a cselekvést és mutasson egy nagyon specifikus felhasználói folyamat felé.

Üres állami tervezési példák

Talán a legjobb módja az üres állapottervezésnek, hogy néhány példát tanulmányozzunk. Az emptystat.es ragyogó webes galéria a különböző webhelyekről az üres állapotlapokat mobilalkalmazásokra rendezi.

Kézzel választottam néhány példát, amelyek megérdemlik a figyelmedet, hogy a legjobban illusztrálják az üres állapotot. Ha bármilyen más javaslata van, nyugodtan tudassa velünk.

DigitalOcean úszó IP-k