Kérdezd meg egy vállalkozót, mit keres egy jó weboldalban, és letisztult dizájnt, gyors betöltést és könnyű navigációt fogsz hallani. Ritkán említik, hogy a látogatók tényleg megtalálják-e, amire szükségük van, és el tudják-e végezni, amiért jöttek. Az UX dizájn az a terület, amely erre a kérdésre válaszol, és ez az a minőség, amitől az összes többi számít.
Az UX dizájn, vagyis a felhasználói élmény dizájn (user experience) a weboldalak tervezése aszerint, hogyan használják őket az emberek. Mi az UX dizájn egy vállalati weboldalnál? Az a döntéssor, amely meghatározza, hogy a látogató megtalálja-e, amit keres, el tudja-e végezni a kívánt műveletet, és világos képpel távozik-e arról, mit kínál a vállalkozás.
Egy weboldal lehet vizuálisan kidolgozott, és mégis rossz UX-szel rendelkezni. Az a látogató, aki a kezdőlapra érkezve tíz másodpercen belül nem tudja megállapítani, mivel foglalkozik a vállalkozás, aki eltéved az árak oldal keresésében, vagy aki otthagy egy kapcsolatfelvételi űrlapot, mert a hibaüzenetek nem magyarázzák meg, mi ment félre, rossz felhasználói élményt kap. Az oldal vizuális minősége irreleváns ebből a szempontból.
Mi a különbség az UX dizájn és az UI dizájn között?
Az UX dizájn és az UI dizájn rokon, de különálló. Az UI dizájn, vagyis a felhasználói felület dizájnja a vizuális réteget fedi le. A színek, a tipográfia, a gombok, az ikonok és az oldal általános megjelenése mind UI-döntések. Az UX dizájn a viselkedési réteget fedi le. Hogyan szerveződik az információ, hogyan folyik a navigáció, mi történik, amikor a felhasználó hibázik, és hogy az oldal legfontosabb művelete azonnal nyilvánvaló-e, mind UX-döntések.
A gyakorlatban a kettő átfedi egymást. A vizuális hierarchiában rossz színű gomb UI-probléma, amely UX-problémát okoz. A logikusan elrendezett, de hibaútmutatás nélküli űrlap UX-probléma, amelyet egy UI-dizájner is észrevehet. Kis csapatokban és weboldalépítőkben gyakran egy ember intézi mindkettőt. A megkülönböztetés azért számít, mert más gondolkodást igényelnek: az UI azt kérdezi, "jól néz ki ez?", az UX pedig azt, "működik ez annak, aki használja?"
A mi a webdizájn cikk bemutatja a tágabb szakterületet, amelyen belül az UX és az UI dizájn is elhelyezkedik, beleértve azt, hogyan alakítják együtt a látogatói élményt a vizuális és a szerkezeti döntések.
Melyek az UX dizájn alapelvei?
Az UX dizájnt olyan alapelvek vezérlik, amelyek minden weboldaltípusra érvényesek, iparágtól és mérettől függetlenül.
Használhatóság
A használható weboldal lehetővé teszi, hogy a látogatók zavar nélkül, hatékonyan végezzék el a feladataikat. A navigációs címkék azokat a szavakat használják, amelyeket a látogatók várnak. A kulcsfontosságú oldalak két-három kattintáson belül elérhetők. Az interaktív elemek, például a gombok és az űrlapok kiszámítható módon viselkednek. A használhatóság nem azt jelenti, hogy az oldalt addig egyszerűsítjük, amíg üres nem lesz. Azt jelenti, hogy megszüntetjük a súrlódást a látogató által kívánt eredményhez vezető úton.
Átláthatóság
Az átláthatóság azt jelenti, hogy minden oldal azonnal közli a célját. A látogatónak másodperceken belül meg kell értenie, miről szól az oldal, mit tehet ott, és mi a következő lépés. Azok az oldalak, amelyek a legfontosabb információt sűrű bekezdések alá temetik, vagy félreérthető címsorokat és homályos cselekvésre ösztönző elemeket használnak, az átláthatóságon elbuknak, bármilyen jól vannak vizuálisan megtervezve. A mi a vizuális hierarchia cikk elmagyarázza, hogyan alakítja az elemek elrendezése és súlya az oldalon azt, mit ért meg a látogató először.
Egységesség
Az egységes dizájn azt jelenti, hogy a látogatóknak csak egyszer kell megtanulniuk, hogyan működik az oldal. Ha az elsődleges cselekvésre ösztönző gomb a kezdőlapon kék, mindenhol kéknek kell lennie. Ha a navigáció asztali gépen az oldal tetején jelenik meg, minden oldalon ugyanonnan kell elérhetőnek lennie. Az egységesség hiánya megtöri a mentális modellt, amelyet a látogatók az oldalon haladva építenek, és pontosan azokban a pillanatokban okoz zavart, amikor a világos előrehaladási út a legfontosabb.
Visszajelzés
A felhasználóknak tudniuk kell, hogy a műveleteiket érzékelte a rendszer. Az a gomb, amely kattintáskor nem változik, az az űrlap, amely visszaigazolás nélkül elküldődik, vagy az a keresősáv, amely úgy ad találatokat, hogy nem jelzi, mire keresett, mind bizonytalanságot kelt. A visszajelzés lehet olyan egyszerű, mint egy gomb színváltása rámutatáskor, egy forgó jelzés az űrlap elküldése közben, vagy egy visszaigazoló üzenet a sikeres művelet után. Enélkül a látogatók nem tudják, várjanak-e, próbálkozzanak-e újra, vagy feltételezzék, hogy valami elromlott.
Hibákból való felépülés
A felhasználók hibáznak. A jó UX számol ezzel, és könnyűvé teszi a helyreállítást. Az az űrlapellenőrzés, amely megnevezi a problémás mezőt, és elmagyarázza, milyen a helyes formátum, jobb, mint egy általános "valami hiba történt" üzenet. Az a keresés, amely nem ad találatot, de alternatívákat javasol, jobb, mint a zsákutca. Minél könnyebb a hibából felépülni, annál kisebb az esélye, hogy a látogató teljesen feladja a feladatot.
Hogyan hat az UX dizájn az üzleti eredményekre?
Az UX dizájn közvetlenül kapcsolódik azokhoz az eredményekhez, amelyek a vállalkozásoknak fontosak. Az a látogató, aki gyorsan megtalálja az árak oldalt, nagyobb eséllyel jut vásárlási döntésig. A minimális lépéses, érthető hibaüzenetes fizetési folyamat több látogatót konvertál, mint amelyik találgatást igényel. Az a kapcsolatfelvételi űrlap, amelyet könnyű kitölteni, több beküldést kap, mint a zavaros vagy időigényes.
Az UX és a konverziós arány kapcsolata jól dokumentált. Az oldal átláthatóságának, az űrlapok dizájnjának és a navigáció menetének kis javításai mérhetően növelik azoknak a látogatóknak az arányát, akik megteszik a kívánt lépést. A fordítottja ugyanígy igaz. Az az oldal, ahol az elsődleges cselekvésre ösztönző elemet nehéz megtalálni, ahol az értékajánlatig három bekezdést kell olvasni, vagy ahol a mobil elrendezés használhatatlan állapotba omlik össze, minden lépésnél konverziót veszít.
Az UX azt is befolyásolja, hogyan látják a látogatók az oldal mögötti vállalkozást. A jól működő weboldal profinak és megbízhatónak hat. A hibás folyamatokkal, zavaros navigációval és homályos üzenetekkel teli weboldal hanyagságot jelez, függetlenül attól, hogyan működik a vállalkozás többi része. A hogyan tervezz olyan kezdőlapot, ami működik cikk bemutatja azokat a konkrét UX-döntéseket, amelyek a legfontosabbak azon az oldalon, amelyet a látogatók először látnak.
Melyek a leggyakoribb UX-problémák a vállalati weboldalakon?
Az átlátható hierarchia hiánya az oldalon a leggyakoribb UX-hiba a vállalati weboldalakon. Ha több elem egyformán versenyez a figyelemért, a látogatóknak nincs kiindulópontjuk. Olvasás nélkül átfutják az oldalt, nem találják meg a cselekvésre ösztönző elemet, és elmennek. A vizuális hierarchia és az olyan elrendezési döntések, amelyek egyértelmű olvasási sorrendet teremtenek, közvetlenül megoldják ezt a problémát.
A találgatást igénylő navigáció arra kényszeríti a látogatókat, hogy felfedezzenek, ahelyett hogy célirányosan haladnának. A belsőleg jelentéssel bíró, de az új látogatónak semmit nem mondó menücímkék, a legfontosabb oldalakat elrejtő legördülő menük, és az olyan navigációs szerkezetek, amelyek nem felelnek meg annak, ahogyan a látogatók a vállalkozásról gondolkodnak, mind súrlódást okoznak. A mi a weboldal navigáció cikk bemutatja, hogyan építs olyan menüket, amelyek vezetnek, nem zavarnak.
Az útmutatás nélküli űrlapok szintén gyakori probléma. A nem egyértelműen jelölt kötelező mezők, a magyarázat nélkül elutasított érvényes formátumú bevitelek, és az elutasított beküldés után minden adatot törlő űrlapok mind olyan akadályok, amelyek jelentősen csökkentik a kitöltési arányt.
A mobil UX, amely nem felel meg az asztali szándéknak, olyan hiányosság, amely minden munkamenetnél látogatásokba kerül a vállalkozásoknak. Az asztali, többoszlopos oldal, amely mobilon egy oszlopba csukódik, rossz sorrendű elemekkel, más élményt nyújt, mint amit szántak neki. A hogyan tedd mobilbaráttá a weboldalad cikk bemutatja az elrendezési és interakciós döntéseket, amelyek meghatározzák, hogy a mobilos élmény ugyanolyan jól működik-e, mint az asztali.
Hogyan kapcsolódik az UX dizájn a SEO-hoz?
A keresők a felhasználói viselkedést mérik, hogy felmérjék, ad-e értéket az oldal. A rossz UX-szel rendelkező oldal általában magas lepattanási arányt és rövid oldalon töltött időt produkál, és mindkettő idővel azt jelzi a keresőknek, hogy a látogatók nem találják meg, amiért jöttek. Az erős UX-szel rendelkező oldal általában tovább tartja a látogatókat, és több interakciót hoz, ami a helyezéseket támogató viselkedési jeleket adja.
Az oldal akadálymentessége, amely szorosan kapcsolódik az UX-hez, azt is befolyásolja, mennyire megbízhatóan tudják a keresők bejárni és indexelni az oldalt. A billentyűzettel navigálható, szemantikus HTML-lel épített oldalt könnyebb pontosan indexelni, mint a szerkezeti problémákkal terheltet. A mi a SEO cikk bemutatja, hogyan táplálják a felhasználói élmény jelei a keresési teljesítményt, és mely viselkedési tényezők számítanak a legtöbbet.
Hogyan kezeli a WEMASY az UX dizájnt
A WEMASY weboldalépítőjének sablonjai az UX-elveket kiindulópontként használva készülnek. A címsorhierarchia, a cselekvésre ösztönző elemek elhelyezése, a navigációs szerkezet, az űrlapok dizájnja és a mobil elrendezések olyan alapértelmezésekre vannak állítva, amelyek azt tükrözik, hogyan használják valójában a látogatók a vállalati weboldalakat. A vizuális szerkesztővel minden elemet módosíthatsz, és valós időben láthatod az eredményt asztali gépen és mobilon, közzététel előtt. Az elrendezés változtatásához nem kell az oldalt a nulláról újraépíteni.
Nézd meg, mi tartozik bele a WEMASY weboldalépítőbe, vagy tekintsd át a csomagokat az árak oldalon.
Gyakran ismételt kérdések
Kell UX-dizájner egy jó weboldal megépítéséhez?
Nem feltétlenül. A jól megtervezett sablonokkal rendelkező weboldalépítő a leggyakoribb UX-döntéseket sablonszinten kezeli, így nem a nulláról indulsz az információs architektúrával, a címsorhierarchiával vagy a mobil elrendezéssel. Az UX-dizájner ott ad a legtöbb értéket, ahol azt kell megérteni, hogyan viselkedik egy adott közönség, és tesztelni, hogy bizonyos folyamatok a tervek szerint működnek-e. A legtöbb kisvállalkozás weboldalánál az UX-elvek jól megépített sablonon keresztüli alkalmazása, még szakember nélkül is, lényegesen jobb eredményt ad, mint az UX teljes figyelmen kívül hagyása. A WEMASY weboldalépítőjével ezt közvetlenül a saját weboldaladon beállíthatod.
Mi az a használhatósági teszt?
A használhatósági teszt során valódi felhasználókat figyelnek meg, miközben egy weboldalon próbálnak elvégezni feladatokat. A cél az, hogy kiderüljön, hol zavarodnak meg a látogatók, hol haboznak, és hol nem tudják befejezni, amiért jöttek. Lehet olyan egyszerű, mint megkérni egy kollégát, hogy keresse meg az árak oldalt, és figyelni, hová kattint, vagy olyan strukturált, mint egy rögzített munkamenet képernyőmegosztással és moderátorral. Már két-három emberrel végzett informális tesztelés is felfedi a legjelentősebb használhatósági hiányosságokat, ha még sosem látták az oldalt.
Mi a különbség az UX dizájn és a webdizájn között?
A webdizájn a tágabb szakterület, amely azt is lefedi, hogyan néz ki a weboldal, és azt is, hogyan működik. Az UX dizájn a webdizájn részhalmaza, amely kifejezetten az oldalt használó személy élményére összpontosít. A webdizájner dönt a színről, a tipográfiáról, az elrendezésről és a vizuális hierarchiáról, valamint a navigációról, az információs architektúráról és az interakciós dizájnról. Amikor ezekre az interakcióra fókuszáló döntésekre különös figyelmet fordítanak, és valódi felhasználói viselkedéssel tesztelik őket, ezt a gyakorlatot nevezik UX dizájnnak.
Honnan tudod, hogy a weboldaladnak UX-problémái vannak?
A legegyértelműbb jelek a felhasználói viselkedési adatokból érkeznek. A kulcsoldalakon magas lepattanási arány, alacsony űrlapkitöltési arány, rövid oldalon töltött idő olyan tartalomnál, amelynek olvasása tovább tart, és magas lemorzsolódási arány a fizetési folyamatban mind UX-problémára utal. Ha megfigyelsz egy első látogatót, ahogy útmutatás nélkül navigál az oldalon, kiderül, hol történik a zavar. A vásárlók közvetlen visszajelzése, akik említik, hogy nehezen találtak meg valamit, vagy feladtak egy feladatot, ugyanolyan diagnosztikus. Az induláshoz nincs szükséged analitikai platformra. Gyakran elég megfigyelni egyetlen embert, ahogy az oldalt próbálja használni, hogy kiderüljenek a legjelentősebb problémák.
Mi a kapcsolat az UX dizájn és a konverziós arány között?
A konverziós arány azt méri, a látogatók hány százaléka végez el egy kívánt műveletet, például kitölt egy űrlapot, vásárol vagy hívást foglal. Az UX dizájn közvetlenül befolyásolja ezt a számot, mert meghatározza, mennyire könnyű vagy nehéz az adott műveletet elvégezni. A fizetési folyamat felesleges lépéseinek eltávolítása, az elsődleges cselekvésre ösztönző elem vizuális kiemelése, az űrlapmezők egyszerűsítése és a hibaüzenetek javítása mind növeli az esélyét, hogy a konvertálni szándékozó látogató valóban konvertáljon. A kapcsolat közvetlen: a jobb UX csökkenti a súrlódást, a kisebb súrlódás pedig magasabb konverziós arányt hoz.