Pokud se zaměříte na jednotlivé prvky webové stránky, které přispívají k pozitivní uživatelské zkušenosti, logo má značkový charakter a zaslouží si zvláštní pozornost. V tomto článku bych vám rád dal několik tipů z naší agenturní praxe, jak zajistit vysokou uživatelskou zkušenost s logem vaší webové stránky pro uživatele.

Logo webové stránky nahrazuje položku v menu na úvodní stránce

Logo je často umístěno v navigační liště a MĚLO BY vždy odkazovat na úvodní stránku. Uživatelé dnes očekávají, že kliknutím na logo se vrátí zpět na úvodní stránku. Logo tak nahrazuje také odkaz v menu "Domů", který je někdy stále viditelný na webových stránkách k odkazování na úvodní stránku. Odkaz "Domů" jako samostatná položka v navigaci je zbytečný. A tím se také šetří cenné místo.

Město Waren (Müritz) v severním Německu, kde je naše firma sídlem, se rozhodlo poskytnout uživateli pomoc s ikonou domu jako možností interakce pro návrat na úvodní stránku. Byly zde pravděpodobně použity dvě ikony - vedle loga byla umístěna ještě další ikona, což by mohlo snížit chuť kliknout na logo. Je možné, že se také předpokládá, že uživatelé této webové stránky jsou méně zběhlí v internetu. Upřímně řečeno, toto ikona domu zvyšuje uživatelskou zkušenost jen omezeně, protože na této webové stránce existuje mnoho výrazných nedostatků z hlediska informační architektury, uživatelského rozhraní a také dostupnosti (zejména kontrasty pro čtení odkazů a textů). Webová stránka města Waren (Müritz) tak zůstává negativním příkladem.

Responsivní logo: Přizpůsobení loga podle rozlišení zařízení

V desktopových zobrazeních je k dispozici mnoho místa, a proto by mělo být možné zahrnout název společnosti nebo slogan do loga, zatímco v mobilním zobrazení by logo mělo být umístěno v redukované podobě z důvodu místa a pozornosti.

U log se, stejně jako u webových stránek, již několik let prosazuje trend přizpůsobení velikosti, média a prostředí. Mluvíme zde o Responsivním logu, což znamená, že logo bere v úvahu podmínky prostředí a dokonale se prezentuje i na menších médiích, a to i v případě, že jej je nutné v některých ohledech jinak zobrazit. Na rozdíl od pevných log, která vypadají na všech zařízeních a obrazovkách stejně, responsivní loga se přizpůsobují konkrétním požadavkům a tak nabízí konzistentní a optimalizovanou uživatelskou zkušenost přes různá zařízení. Logo se přitom zmenšuje pouze ve své podobě, nikoli v jeho zprávě.

Skvělým příkladem je švýcarská společnost Victorinox. Uživatel si jako první pohledu uvidí velkou ikonu. Jediným mínusem je, že logo je začleněno jako soubor PNG místo SVG.

Při rolování je zobrazen pouze obrázkový prvek. V pozadí je vidět hora, která zdůrazňuje švýcarský původ. V prvotním pohledu je tedy důležité budování značky. Uživatel by měl pochopit. Jsi na správném místě u společnosti Victorinox. Pokud uživatel posune obsah dolů, stávají se důležité obsahy. Logo se zmenšuje v zobrazení a dává hlavním obsahům více místa. Navigace zůstává připnutá nahoře, což je z hlediska použitelnosti také velmi rozumné.

Jiným přístupem je webová stránka společnosti Guinness: Logo je umístěno s názvem společnosti. Při rolování se logo mírně zmenšuje, přičemž navigace zůstává viditelná. Jakmile uživatel začne posouvat stránku nahoru, logo a navigace se zase zvětší, protože se předpokládá, že uživatel chce navštívit další stránky.

Společnost Commerzbank to nepříliš vhodně řeší prostřednictvím své webové stránky. Logo je viditelné s názvem společnosti a je umístěno jako SVG, což je dobré řešení. Nicméně silně konkuruje vedlejším navigačním bodům. Při rolování se navigace úplně ztratí a uživatel musí znovu posunout nahoru, aby viděl navigaci. Bylo by lepší, kdyby se navigace objevila ihned na začátku posouvání nahoru, jak to mezi jinými řešila například stránka zeit.de.

Z hlediska optimalizace konverze je velmi dobře provedené velké obrázek s pohledem na oba lidi. Dívají se na tlačítko, čímž automaticky směrují pohled návštěvníka na tlačítko. Takové směrování pohledu k tlačítku volání k akci je velmi účinné. Dobrá práce, Commerzbank!

Je zajímavé, když se podíváme na příklady v mobilní variantě.

V mobilní variantě je logo od Victorinoxu zobrazeno ještě menší a středově, aby byly interakční možnosti pro uživatele lépe strukturované. Guiness umístil text napravo od loga místo pod ním. Tak má harfa více místa a horní navigační lišta není příliš velká. Commerzbank jednoduše vypne text ve smartphone verzi.

Role responzivních log na uživatelskou zkušenost je důležitá, protože pomáhají udržovat vizuální konzistenci a identitu značky, bez ohledu na to, jak uživatelé přistupují na web.

Pokud logo nereaguje na změny rozlišení, může přitáhnout příliš pozornosti uživatele. V následujícím příkladu banky Hypovereinsbank se velmi výrazné logo příliš soupeří s call-to-action umístěným napravo, zejména v pohledu na smartphone. Navigační body střední šedi jsou ve desktopovém zobrazení snadno přehlédnuty. Celkově má i tato stránka několik dalších chyb v uživatelské zkušenosti.

Designéři musí, aby zajistili responzivní loga, poskytnout několik adaptací loga. Logo musí také dobře fungovat na různých pozadích a také v různých velikostech. Logo se tedy při menším rozlišení snižuje v detailu. Přitom však nesmí ztratit základ značky. To je umění použití responzivních log. Pokud tedy zadáš aktualizaci značky, již při použití budoucího loga mysli na tuto požadavku.

Formát souboru webového loga

Použití responzivních log má smysl, protože se v závislosti na rozlišení načte správná velikost. Při menším rozlišení, například u smartphonu, se načítá i menší grafika. To šetří čas na načítání. Největší efekt na váš čas načítání však dosáhnete, pokud:

1. zapojujete logo v správném rozlišení (také s údaji o výšce a šířce). Často jsou loga zapojena v příliš vysokém rozlišení a pak jsou zmenšena pro zobrazení.
2. zapojujete logo ve vektorovém formátu SVG místo PNG nebo JPG.

Webové logo jako favicon

Využijte také redukovanou podobu svého loga k tomu, abyste ho použili jako favicon. Přitom se vyhněte textům nebo jiným malým prvkům, které nejsou viditelné v malém rozlišení faviconu.

Zatímco webová stránka Guinessu z předchozího příkladu logu pro web využívá dobře, jako favicon není optimální. Malý bílý text Guinessu není rozpoznatelný a v rámci faviconu snižuje celkový dojem. Kontrast je nízký. Dojem by byl bez textu a pouze redukován na harfu loga zřetelnější. To vyřešily ostatní příklady z tohoto článku lépe než Guiness.

Pokud hledáte agenturu, která klade důraz na responzivní loga, obraťte se na nás. My z 4eck Media jsme profesionálové na uživatelskou zkušenost.

Pokud vám profesionální pozice značky připadá důležitá, mohou být pro vás zajímavé i následující balíčky ikon a šablony firemního designu: