Az „üres állapotok” (Empty States) kreatív UX és UI tervezése

Mik azok az üres állapotok (empty states)?

A tervezők és a fejlesztők hajlamosak a „teli” állapotokra koncentrálni: hogy néz ki az oldal, amikor tele van termékkel, találattal, tartalommal. Az üres állapotok viszont gyakran kimaradnak a tervezésből, és így egy rideg, semmitmondó „nincs adat” felirat marad – ami pont a legrosszabb pillanatban hagyja magára a látogatót.

Pedig az üres állapotok meglepően gyakoriak. Minden új felhasználó üres állapottal kezd; minden sikertelen keresés üres találati oldalt eredményez; minden kosár üres, amíg nem tesznek bele valamit. Ezek nem ritka kivételek, hanem a felhasználói út rendszeres, visszatérő pillanatai, amelyek megérdemlik a tudatos tervezést.

A jó hír, hogy az üres állapot valójában lehetőség. Egy üres képernyő tiszta lap, ahol irányíthatod a látogatót, megmutathatod a következő lépést, vagy akár a márkád személyiségét is megvillanthatod. A zsákutcából így továbblépési pont lesz – ez a különbség a gondatlan és a gondos tervezés között.

Miért fontosak ezek a pillanatok?

Az üres állapotok azért kritikusak, mert a látogató ilyenkor a leginkább sebezhető: nem találta, amit keresett, vagy nem tudja, mi a következő lépés. Ha ekkor egy rideg, segítség nélküli képernyőt kap, jó eséllyel feladja és távozik. Ha viszont útbaigazítást és lehetőséget kap, továbblép – és ügyfél lehet belőle.

Az első használat élménye különösen meghatározó. Amikor valaki először találkozik egy felülettel, és az üres, zavarba ejtő, könnyen elveszítheti az érdeklődését. Egy jól megtervezett, bevezető jellegű üres állapot ezzel szemben kézen fogja az új felhasználót, és megmutatja, hogyan kezdjen neki – ez dönthet a megmaradásról.

Az üres állapotok a márkád igényességéről is árulkodnak. Egy gondosan megtervezett „nincs találat” oldal vagy üres kosár azt üzeni, hogy a részletekre is figyeltek, és törődnek a látogatóval minden helyzetben. A figyelmen kívül hagyott, rideg üres képernyő ezzel szemben gondatlanságot sugall – pont a kritikus pillanatban.

A nincs találat oldal

A „nincs találat” az egyik leggyakoribb és legfontosabb üres állapot, különösen egy webáruház belső keresőjében. Aki keresett és nem talált, vásárolni akart – ha üres oldalt kap, ez a vásárlásra kész látogató elveszik. Ezért a nincs találat oldal sosem lehet zsákutca.

A jó nincs találat oldal több módon is továbbsegít: javaslatot ad a keresés finomítására, felajánl közeli vagy hasonló termékeket, megmutatja a népszerű kategóriákat, vagy elgépelés esetén egy „erre gondoltál?” javítást kínál. A cél, hogy a látogató mindig találjon egy következő lépést, amerre továbbléphet.

Érdemes a hangnemre is figyelni: a rideg „0 találat” helyett egy barátságos, segítő megfogalmazás („Nem találtunk pontos egyezést, de ezek érdekelhetnek”) sokkal kellemesebb. A nincs találat oldal így a csalódás pillanatából egy új lehetőséggé válik – ami megmenti a látogatót és a potenciális vásárlást.

Az üres kosár

Az üres kosár egy másik gyakori üres állapot, amelyet sokszor elhanyagolnak. Pedig a látogató, aki a kosarat nézi, vásárlási szándékkal érkezett – csak még nincs benne semmi, vagy épp kiürítette. Egy rideg „a kosarad üres” felirat itt elveszett lehetőség; egy jól megtervezett üres kosár viszont visszatereli a vásárláshoz.

A jó üres kosár megmutatja a következő lépést: egy gomb a vásárlás folytatásához, a népszerű vagy ajánlott termékek, esetleg a korábban megnézett darabok. Ha a látogató korábban tett bele valamit, de kivette, hasznos lehet emlékeztetni rá. A cél, hogy a látogató ne ragadjon le az üres kosárnál, hanem visszataláljon a termékekhez.

Ez apró részletnek tűnik, de összeadódik: minden olyan látogató, akit az üres kosár visszatérít a vásárláshoz, közvetlen bevétel. A jól megtervezett üres állapotok így nemcsak kellemesebbé teszik az élményt, hanem mérhetően javítják a konverziót is – pont a kritikus pontokon.

Az első használat élménye (onboarding)

Amikor egy felhasználó először lép be egy fiókba, egy felületre, az minden esetben üres állapottal kezdődik: üres profil, üres lista, nulla aktivitás. Ez a pillanat dönti el, hogy a felhasználó megérti-e, mit kezdjen a felülettel, vagy értetlenül távozik. A jól megtervezett első üres állapot itt bevezetőként, kalauzként működik.

A jó onboarding üres állapot elmagyarázza, mi a felület célja, és megmutatja az első, konkrét lépést: „Add hozzá az első terméked”, „Töltsd ki a profilod”, „Indítsd el az első projekted”. Egy világos, biztató felhívás és néha egy rövid magyarázat sokkal jobb, mint egy üres képernyő, amely magára hagyja a kezdőt.

Ez különösen fontos, ha a weboldalad valamilyen fiókot, eszközt vagy interaktív felületet kínál. Az első benyomás itt dől el, és egy gondosan megtervezett kezdő üres állapot drámaian javíthatja, hogy a felhasználók valóban elkezdjék használni a felületet ahelyett, hogy az első zavarnál feladnák.

A jó üres állapot elemei

A jól megtervezett üres állapot néhány közös elemre épül. Egy világos, barátságos üzenet, amely elmagyarázza, miért üres a felület. Egy konkrét, cselekvésre ösztönző gomb, amely megmutatja a következő lépést. Gyakran egy egyszerű illusztráció vagy ikon, amely oldja a ridegséget és megvillantja a márka személyiségét.

A hangnem kulcsfontosságú: az üres állapot a márka személyiségének megmutatására is alkalom. Egy kis humor, egy barátságos megfogalmazás emberivé teszi a pillanatot, és pozitív érzést kelt egy egyébként semleges helyzetben. Persze a hangnemet a márkához kell igazítani – egy komoly szektorban visszafogottabban.

A lényeg, hogy az üres állapot soha ne legyen zsákutca, hanem mindig kínáljon utat előre. Akár keresés, akár kosár, akár új fiók – mindig legyen egy egyértelmű, vonzó következő lépés. Ez a néhány gondosan megtervezett részlet jelentősen javítja a felhasználói élményt és a konverziót, mégis sokan elhanyagolják.

Az illusztráció vagy ikon nemcsak díszít, hanem oldja a ridegséget és gyorsabban érthetővé teszi a helyzetet. Egy üres kosárhoz illő egyszerű kép, egy nincs találathoz tartozó barátságos ábra emberivé teszi a pillanatot. Vigyázni kell azonban, hogy ezek könnyűek és gyorsan betöltődők legyenek, hogy ne lassítsák az oldalt – a cél a kellemes élmény, nem a felesleges teher.

A 404 és a hibaoldalak

A hibaoldalak – mindenekelőtt a 404-es „nem található” oldal – az üres állapotok közeli rokonai, és ugyanaz az elv vonatkozik rájuk: ne legyenek zsákutcák. Egy üres, rideg „404 Error” felirat elveszett látogató; egy jól megtervezett hibaoldal viszont visszatereli a látogatót a működő tartalomhoz.

A jó 404-es oldal elmagyarázza, mi történt, barátságos hangnemben, és felkínálja a továbblépést: linket a főoldalra, a népszerű oldalakra, egy keresőmezőt. Egy kis humor vagy egyedi illusztráció itt is oldja a frusztrációt, és pozitív benyomást hagy egy negatív helyzetben. Mi minden weboldalkészítés projektnél gondosan megtervezett 404-es oldalt és üres állapotokat építünk.

Mit jelent ez egy magyar kkv-nak?

Egy kkv-nak az üres állapotok gondos tervezése olcsó, mégis hatásos módja annak, hogy kevesebb látogatót veszítsen el a kritikus pontokon. A nincs találat oldal, az üres kosár és a 404-es oldal apró részleteknek tűnnek, de összeadódva komoly hatásuk van a konverzióra és a felhasználói élményre.

Ha olyan weboldalt szeretnél, amely minden helyzetben – még az üres állapotokban is – gondoskodik a látogatóról és továbblépésre ösztönöz, kérj ingyenes ajánlatot. A weboldalkészítés során az üres állapotokat és a hibaoldalakat is tudatosan, a konverziót szem előtt tartva tervezzük meg.