Amikor az egyes elemeket egy weboldalon nézed, melyek pozitívan befolyásolják a felhasználói élményt, az a logó márkaépítő eszköz és megérdemel egy külön elemzést. Ebben a cikkben meg szeretnék osztani veled néhány tippet az ügynökségi gyakorlatunkból arról, hogyan biztosíthatod a magas felhasználói élményt a weboldalad látogatói számára a weboldal-logóval való bánásmódban.
A weboldal-logó helyettesíti a kezdőlap menüpontot
A logó gyakran a navigációs sávban van elhelyezve, és MINDIG hivatkoznia kell a kezdőlapra. A felhasználók ma már arra számítanak, hogy a logóra kattintva a kezdőlapra fognak kerülni. A logó ezzel helyettesíti a "Kezdőlap" menüpontot, amely néha még ma is látható egyes weboldalakon annak érdekében, hogy visszavigyen a kezdőlapra. Egy külön kezdőlap hivatkozás a navigációban felesleges, és így értékes helyet takarítunk meg.
A németországi Waren (Müritz) városa, ahol a vállalkozásunk székhelye van, arra döntött, hogy az otthon ikonjával segítséget nyújt a felhasználónak a kezdőlapra történő visszatéréshez. Két ok miatt valószínűleg itt alkalmazták ezt: Egyrészt a logó mellett még egy további logó is elhelyezésre került, ami csökkentheti a logóra való kattintás kedvet. Másrészt talán azt feltételezik, hogy az oldal látogatói kevésbé jártasak az internet használatában. Őszintén szólva ez az otthon ikon csak részben növeli a felhasználói élményt, mivel az oldalon számos feltűnő hiba van az információs struktúra, a felhasználói felület és a hozzáférhetőség terén (különösen a linkek és szövegek olvashatósága szempontjából). Így a Waren (Müritz) város weboldala egy negatív példa marad.
Reszponzív logó: Logó alkalmazkodása az eszköz felbontásához
Amíg az asztali nézetekben sok hely áll rendelkezésre, és ezért a vállalat neve vagy szlogen is szerepelhet a logóban, a mobil nézetben a logót kevesebb hely miatt és figyelemelterelés miatt csökkentett formában kell elhelyezni.
A logók esetében, ahogyan a weboldalak esetében is, évek óta elterjedt a méretre, a közegre és az környezetre való alkalmazkodást megvalósító trend. Erről az "Uraszívo logó"-ról beszélünk, mely azt jelenti, hogy a logó figyelembe veszi a környezet állapotát, és tökéletesen mutatja magát kisebb médiumokon is, aminek során néhány aspektusban különbözhet a normál formától. A merev logókkal ellentétben, melyek az összes eszközön és képernyőméreten ugyanúgy néznek ki, az uraszívó logók a különféle elvárásokhoz alkalmazkodnak, ezzel egy koherens és optimalizált felhasználói élményt nyújtanak a különböző eszközökön át. Ennek során a logó csak formájában redukálódik, de üzenete nem veszít erejéből.
Egy pozitív példa a svájci Victorinox vállalat. Az első látogató a nagy ikont látja. Az egyetlen hátrány: a logó PNG-fájl formátumban van beépítve, nem SVG-ként.
A görgetés során csak a képelem jelenik meg. A háttérben egy hegy látható, ami aláhúzza a svájci származást. Az első megtekintési területen tehát elsődleges a márkaépítés. A felhasználó megérthesse. Itt vagy a Victorinox-nál helyesen. Ha a felhasználó görget lefelé, a tartalmak válnak fontossá. A logó kicsinyül a megjelenésben, és nagyobb helyet enged a fő tartalmaknak. A navigáció fent marad rögzítve, ami a felhasználhatósági szempontból szintén ésszerű.
Egy másik megközelítés a Guinness weboldal által elfoglalt: A logó a vállalat nevével van elhelyezve. A görgetés során a logó kissé kisebb lesz, de a navigáció továbbra is látható marad. Amint a látogató elkezdi a lapozást, a logó és a navigáció újra nagyobbak lesznek, mivel elképzelhető, hogy a felhasználó más oldalakat kíván meglátogatni.
A Commerzbank nem oldotta meg optimálisan a weboldalát. A logó a vállalat nevével van elhelyezve, és SVG-ként van beágyazva, ami jól meg van oldva. Azonban erősen verseng a mellette lévő navigációs pontokkal. A görgetés során a navigáció teljesen eltűnik, és a felhasználónak vissza kell görgetnie a teljes navigáció megtekintéséhez. Jobb lett volna megoldani, ha a látogató azonnal a görgetés megkezdésekor látná a navigációt, mint ahogy azt például a zeit.de oldal teszi.
A Commerzbank szempontjából nagyon jól megoldott a konverzió optimalizáció szempontjából a két személy pillantás irányítása a nagy képen. Ők a gomb irányába néznek, ami automatikusan az látogató figyelmét a gombra tereli. Az ilyen pillantásirányok a call-to-action felé nagyon hatékonyak. Szépen kivitelezve, Commerzbank!
Érdekes lesz, ha megnézzük a példákat mobil változatban.
A mobil változatban a Victorinox logója még kisebb lesz, és ezért középre kerül, hogy jobban strukturálja a felhasználó számára az interakciós lehetőségeket. A Guiness a szöveget a logó jobb oldalán helyezte el az alatta történő helyett. Így az arpa több helyet kap, és a legfelső navigációs sáv nem lesz túl nagy. A Commerzbank egyszerűen csak kikapcsolja a szöveget a smartphone felbontásnál.
Az érzékeny logók szerepe a felhasználói élményben fontos, mivel segítenek fenntartani a vizuális összhangot és a márkaazonosságot, függetlenül attól, hogy a felhasználók hogyan férnek hozzá az oldalhoz.
Ha egy logó nem reagál kellőképpen az változó felbontásokra, az túlságosan lekötheti a felhasználó figyelmét. Az alábbi Hypovereinsbank példában a túlságosan jelen lévő logó erőteljesen versenyez a jobban elhelyezett cselekvés-hívás gombbal - különösen a smartphone nézetben. A középszürke navigációs pontokat könnyen átsiklunk a számítógépes nézetben. Ezt az oldalt általánosan is további UX-hibák jellemzik.
A tervezőknek több logóadaptációt kell biztosítaniuk annak érdekében, hogy az érzékeny logók működjenek. A logónak jól kell működnie különböző háttéreken és különböző méretekben is. A logó tehát, minél kisebb a felbontás, annál kevésbé részletes. Azonban nem szabad elvesztenie a márka lényegét. Ez a nagy művészet az Érzékeny logók használatában. Tehát ha már megrendelt egy márkaújítást, gondoljon már most erre az igényre a következő logó használatához.
A honlap logója fájlformátuma
Az érzékeny logók használata ésszerű, mivel a megfelelő méret töltődik be a felbontástól függően. Kisebb felbontásoknál, például egy okostelefonon, csak a kisebb grafika töltődik be. Ez időt takarít meg a betöltés során. Azonban a legnagyobb hatást az elérhető töltési időre akkor éred el, ha:
- a logót a megfelelő felbontásban integrálod (magassági és szélességi adatokkal együtt). Az esetek legnagyobb részében a logók túl nagy felbontással vannak integrálva, majd az áttekintéshez le vannak méretezve.
- az SVG vektorformátumban integrálod a logót, nem PNG vagy JPG formátumban.
A honlap-logót faviconként használni
Használd a logód csökkentett formáját is faviconként. Ekkor kerüld az olyan szövegeket vagy egyéb kis elemeket, amelyek nem láthatók a favicon kis felbontásában.
Míg a fentebb említett Guiness-honlap jól használja a logót érzékenyként az oldalnak, faviconként nem a legoptimálisabb. A kis fehér Guiness-szöveg nem látható, és a favicon keretein belül alacsony a kontraszt. Az összkép jobb lenne a szöveg nélkül, csak a logó harfa részére redukálva. Ezt jobban megoldották a cikkben említett többi példa, mint a Guiness.
Ha ügynökséget keresel, amelyik hangsúlyt fektet az érzékeny logókra, keresd fel a 4eck Media oldalát. Mi az User Experience szakértői vagyunk.
Ha fontos számodra a szakmai pozícionálás, akkor az alábbi Ikon-csomagok és Vállalati Design sablonok lehetnek érdekesek számodra:
Magas felhasználói élmény a webhely-logó segítségével reagáló viselkedés révén.
