Proč pěkný web nestačí, když uživatel neví, co má udělat dál

Moderní web může vypadat profesionálně, používat kvalitní fotografie, animace a prémiovou typografii.

To však ještě neznamená, že bude fungovat.

Pokud uživatel nerozumí tomu, co firma nabízí, kam má kliknout a jaký krok má udělat dál, i vizuálně kvalitní stránka může přinášet málo poptávek.

Dobrý web proto není jen o designu.

Musí uživatele vést.

Každá sekce, každé tlačítko a každá stránka by měly mít jasný účel. Návštěvník musí rychle pochopit, kde se nachází, co může získat a co má udělat dál.

Právě to je základem kvalitního uživatelského zážitku.

Pěkný design a funkční web nejsou totéž

Vizuální design ovlivňuje první dojem.

Pomáhá firmě působit profesionálně, důvěryhodně a moderně. Může odlišit značku od konkurence a podpořit vnímání kvality.

Design však sám o sobě nevyřeší uživatelskou cestu.

Web může vypadat skvěle, ale stále může mít:

• nejasnou hlavní nabídku,
• komplikované menu,
• příliš mnoho tlačítek,
• slabé výzvy k akci,
• nečitelné texty,
• chybějící informace,
• nejasný další krok,
• složitý kontaktní formulář.

Pokud se návštěvník musí zamýšlet nad tím, kam kliknout, web od něj vyžaduje zbytečné úsilí.

Čím více úsilí musí uživatel vynaložit, tím větší je pravděpodobnost, že stránku opustí.

Uživatel nepřichází obdivovat web

Většina návštěvníků nepřichází na firemní web proto, aby hodnotila barvy, animace nebo kreativitu designéra.

Přichází s konkrétním cílem.

Může chtít:

• zjistit, co firma nabízí,
• prohlédnout si reference,
• porovnat možnosti,
• najít cenu,
• ověřit důvěryhodnost firmy,
• získat cenovou nabídku,
• objednat konzultaci,
• kontaktovat obchodníka.

Úkolem webu je pomoci mu tohoto cíle dosáhnout co nejjednodušeji.

Vizuální stránka by měla tento proces podporovat, ne ho komplikovat.

Nejlepší design často nepůsobí složitě. Uživatel přirozeně ví, kam se má podívat a co má udělat.

Rozhoduje prvních pár sekund

Po otevření webu si návštěvník velmi rychle vytvoří základní obraz.

Potřebuje pochopit:

• kdo jste,
• co děláte,
• pro koho to děláte,
• proč by ho to mělo zajímat,
• co může udělat dál.

Pokud hero sekce obsahuje jen obecný slogan, uživatel nemusí pochopit skutečnou nabídku.

Text jako:

„Tvoříme digitální zážitky budoucnosti“

může znít moderně, ale nevysvětluje, zda firma vytváří weby, aplikace, reklamy nebo software.

Jasnější formulace může být:

„Tvoříme weby, aplikace a konfigurátory, které firmám přinášejí více poptávek.“

Uživatel okamžitě ví, co firma dělá a jaký přínos může očekávat.

Kreativita má smysl až tehdy, když nepoškozuje srozumitelnost.

Každá stránka potřebuje hlavní cíl

Jednou z častých chyb je, že se stránka snaží dosáhnout příliš mnoha věcí najednou.

Obsahuje tlačítka na kontakt, portfolio, ceník, newsletter, sociální sítě, stažení dokumentu a další podstránky.

Uživatel pak neví, který krok je nejdůležitější.

Každá stránka by měla mít jeden hlavní cíl.

Například:

• domovská stránka má představit firmu a přivést návštěvníka ke kontaktu,
• stránka služby má vysvětlit řešení a získat poptávku,
• reference má ukázat výsledek a posílit důvěru,
• blogový článek má uživatele vzdělávat a nasměrovat na relevantní službu,
• konfigurátor má uživatele dovést k dokončení návrhu.

Vedlejší akce mohou existovat, ale nesmí konkurovat hlavnímu cíli.

Výzva k akci musí být konkrétní

Text tlačítka výrazně ovlivňuje, zda uživatel pochopí jeho význam.

Nejasná tlačítka jako:

• Více
• Pokračovat
• Zjistit více
• Klikněte sem
• Odeslat

neřeknou uživateli, co se po kliknutí stane.

Lepší jsou konkrétní výzvy:

• Prohlédnout reference
• Vytvořit cenovou nabídku
• Navrhnout vlastní pergolu
• Objednat konzultaci
• Zobrazit dostupné byty
• Napsat nám o projektu

Dobré tlačítko odpovídá na otázku:

„Co získám, když na něj kliknu?“

Uživatel by neměl být výsledkem kliknutí překvapen.

Tlačítko musí být i vizuálně viditelné

Nestačí použít správný text.

Hlavní výzva k akci musí být vizuálně rozpoznatelná.

Měla by mít:

• dostatečný kontrast,
• jasný tvar,
• přiměřenou velikost,
• dostatek prostoru kolem sebe,
• viditelný stav při najetí myší,
• viditelný stav při ovládání klávesnicí.

Pokud všechna tlačítka vypadají stejně, uživatel neví, které je hlavní.

Pokud tlačítko vypadá jako obyčejný text, část návštěvníků si nemusí uvědomit, že je klikatelné.

Primární a sekundární akce by měly být vizuálně odlišené.

Primární tlačítko může používat výraznější prvek značky. Sekundární může být jednodušší nebo jen textové.

Uživatel musí vždy vědět, kde se nachází

U rozsáhlejších webů je důležitá orientace.

Návštěvník může přijít přímo na podstránku z reklamy, vyhledávače nebo sociální sítě. Nemusí začínat na domovské stránce.

Každá podstránka proto musí fungovat i samostatně.

Uživatel by měl vědět:

• co je tématem stránky,
• ke které službě patří,
• kde najde další informace,
• jak se může vrátit,
• co může udělat po dočtení.

Pomáhá jasný nadpis, logické menu, označený aktivní stav a u hlubších struktur i drobečková navigace.

Nemělo by být potřeba vracet se na domovskou stránku jen proto, aby návštěvník pochopil kontext.

Navigace musí používat jazyk zákazníka

Firmy často používají interní názvy, kterým rozumějí jejich zaměstnanci, ale ne zákazníci.

Menu může obsahovat kreativní nebo technická pojmenování, která působí originálně, ale nejsou srozumitelná.

Uživatel by neměl hádat, co se skrývá pod názvem sekce.

Názvy jako:

• Služby
• Reference
• Konfigurátory
• O nás
• Blog
• Kontakt

jsou jednoduché, ale srozumitelné.

Originalita se může projevit v designu, textech a prezentaci značky.

Základní navigace by měla zůstat předvídatelná.

Mnoho možností může snižovat počet rozhodnutí

Může se zdát, že čím více možností uživateli nabídneme, tím lépe.

V praxi však velké množství rovnocenných možností často způsobí nejistotu.

Pokud návštěvník vidí deset služeb, šest tlačítek a tři různé formuláře, může rozhodnutí odložit.

Web by měl informace postupně dávkovat.

Nejprve vysvětlí hlavní nabídku.

Potom ukáže relevantní služby.

Následně poskytne důkazy, příklady a odpovědi na otázky.

Teprve potom uživatele vyzve ke konkrétní akci.

Dobrý web neukáže všechno najednou. Zobrazí správnou informaci ve správnou chvíli.

Obsah musí odpovídat na skutečné otázky

Uživatel nemůže udělat další krok, pokud mu chybějí důležité informace.

Před kontaktováním firmy může potřebovat vědět:

• co přesně dostane,
• jak proces funguje,
• pro koho je služba vhodná,
• kolik přibližně stojí,
• jak dlouho realizace trvá,
• co musí dodat,
• jakých výsledků firma dosáhla,
• co se stane po odeslání formuláře.

Pokud web tyto otázky ignoruje, uživatel může odejít ke konkurenci, která je vysvětlí jasněji.

Stručnost je důležitá, ale nesmí znamenat chybějící obsah.

Úkolem UX není odstranit všechny texty. Úkolem je uspořádat je tak, aby se daly snadno pochopit a skenovat.

Reference musí pomáhat při rozhodování

Sekce referencí často obsahuje jen pěkné obrázky a názvy projektů.

To je vizuálně atraktivní, ale uživateli to nemusí stačit.

Kvalitní reference by měla vysvětlit:

• jaký problém klient řešil,
• co Lucero vytvořilo,
• proč byl zvolen konkrétní přístup,
• jaké funkce řešení obsahuje,
• jaký byl výsledek,
• pro jaký typ firmy je podobné řešení vhodné.

Návštěvník si tak může propojit referenci se svou vlastní situací.

Reference nemají jen dokazovat, že firma umí vytvářet pěkné výstupy.

Mají ukázat, že rozumí obchodním problémům klienta.

Formulář nesmí být poslední překážkou

Uživatel může projít celým webem, rozhodnout se kontaktovat firmu a pak odejít kvůli komplikovanému formuláři.

Častým problémem je příliš mnoho povinných polí.

Firma může chtít získat všechny možné informace, ale uživatel ještě nemusí mít přesnou představu.

Při prvním kontaktu často stačí:

• jméno,
• e-mail nebo telefon,
• stručný popis projektu.

Další informace se mohou zjišťovat později nebo prostřednictvím jednoduchého krokového formuláře.

Formulář by měl zároveň vysvětlit:

• co se stane po odeslání,
• kdy může uživatel očekávat odpověď,
• kdo ho kontaktuje,
• zda jde o nezávaznou poptávku.

Nejistota nekončí kliknutím na tlačítko.

Uživatel potřebuje znát i další průběh.

Mobilní verze potřebuje vlastní uživatelskou cestu

Web navržený pro desktop nemusí automaticky fungovat na mobilu.

Na menší obrazovce se mění:

• množství viditelného obsahu,
• způsob ovládání,
• velikost tlačítek,
• pořadí sekcí,
• délka textů,
• chování menu,
• pozornost uživatele.

Mobilní návštěvník může přijít z reklamy a rozhodovat se rychleji.

Důležitá akce proto nesmí být ukrytá na konci dlouhé stránky nebo v komplikovaném menu.

Tlačítka musí být dostatečně velká a mezi jednotlivými prvky musí být dostatek prostoru.

Uživatel by neměl omylem kliknout na nesprávnou možnost.

Mobilní verze není zmenšený desktop. Je to samostatně promyšlený způsob používání webu.

Rychlost je součástí uživatelského zážitku

I nejlépe navržená cesta selže, pokud se web načítá příliš dlouho.

Velká videa, neoptimalizované obrázky, 3D prvky a nadměrné animace mohou stránku zpomalit.

Uživatel pak čeká místo toho, aby pokračoval.

Vizuální efekty by proto měly mít jasný účel.

Animace může:

• usměrnit pozornost,
• vysvětlit změnu,
• ukázat postup,
• zlepšit plynulost rozhraní.

Neměla by existovat jen proto, aby web působil dražším dojmem.

Pokud efekt zpomaluje obsah, zakrývá tlačítko nebo zhoršuje čitelnost, poškozuje výsledek.

Přístupnost zlepšuje web pro všechny

Přístupnost není důležitá jen pro malou skupinu uživatelů.

Mnoho pravidel přístupnosti zároveň zlepšuje obecnou použitelnost.

Patří sem:

• dostatečný kontrast textu,
• čitelná velikost písma,
• jasné názvy tlačítek,
• viditelné stavy zaměření,
• ovládání klávesnicí,
• alternativní texty obrázků,
• srozumitelná chybová hlášení,
• dostatečně velké dotykové prvky.

Světle šedý text na černém pozadí může vypadat elegantně, ale pokud je kontrast příliš nízký, uživatelé ho budou číst s obtížemi.

Stejně tak nestačí odlišit stav jen barvou.

Pokud formulář označí chybu jen červeným rámečkem, část uživatelů nemusí pochopit, co se stalo. Potřebuje i jasnou textovou informaci.

Uživatelská cesta musí pokračovat mezi stránkami

Každá stránka by měla přirozeně vést k další.

Uživatel si například otevře referenci webu pro developerský projekt.

Po jejím prohlédnutí může chtít:

• vidět další realitní projekty,
• přečíst si o tvorbě realitních webů,
• podívat se na interaktivní výběr bytů,
• zjistit více o 3D vizualizacích,
• kontaktovat Lucero.

Tyto možnosti by měly být přímo dostupné.

Pokud stránka skončí bez dalšího kroku, uživatel musí sám přemýšlet, kam pokračovat.

Každý konec sekce je příležitostí nasměrovat ho dál.

Jak vypadá jasná cesta na firemním webu

Jednoduchá uživatelská cesta může vypadat takto:

1. Návštěvník pochopí hlavní nabídku.
2. Vybere si relevantní službu.
3. Zjistí, jak služba funguje.
4. Prohlédne si konkrétní reference.
5. Přečte si odpovědi na časté otázky.
6. Uvidí jasnou výzvu ke kontaktu.
7. Odešle jednoduchou poptávku.
8. Dostane potvrzení a informaci o dalším postupu.

Každý krok odpovídá na jednu otázku a připravuje uživatele na další rozhodnutí.

Web nemusí tlačit návštěvníka ke kontaktu okamžitě.

Měl by mu však vždy ukazovat, kam může pokračovat.

Jak odhalit nejasná místa na webu

Firma může svůj web považovat za srozumitelný, protože jeho obsah dobře zná.

Nový uživatel však nemá stejný kontext.

Užitečné je sledovat web očima člověka, který firmu nikdy předtím neviděl.

U každé stránky je dobré se ptát:

• Je okamžitě jasné, co tato stránka nabízí?
• Ví uživatel, pro koho je služba určena?
• Má dostatek informací k rozhodnutí?
• Je hlavní akce viditelná?
• Rozumí tomu, co se stane po kliknutí?
• Ví, kam pokračovat, pokud ještě nechce firmu kontaktovat?
• Funguje stejná cesta i na mobilu?

Pomoci mohou i analytická data.

Firma může sledovat:

• kde uživatelé odcházejí,
• na která tlačítka klikají,
• jak daleko scrollují,
• které stránky navštěvují před odesláním poptávky,
• u kterého pole opouštějí formulář.

Design by se neměl optimalizovat jen podle pocitu.

Skutečné chování uživatelů může ukázat problémy, které nejsou na první pohled vidět.

Nejčastější UX chyby na firemních webech

K častým problémům patří:

• nejasný hlavní nadpis,
• příliš abstraktní text,
• velké množství rovnocenných tlačítek,
• skryté kontaktní možnosti,
• nepřehledné menu,
• dlouhé texty bez členění,
• slabý kontrast,
• malá tlačítka na mobilu,
• automatické animace, které ruší čtení,
• reference bez vysvětlení výsledku,
• formulář s příliš velkým počtem polí,
• chybějící potvrzení po odeslání,
• stránka bez jasného pokračování.

Každá z těchto chyb může působit jako malá.

Dohromady však vytvářejí pocit nejistoty a snižují pravděpodobnost, že uživatel dokončí požadovanou akci.

Pěkný web má podporovat obchodní cíl

Design a obchodní výkon nemusí být v konfliktu.

Prémiový web může být zároveň jasný, jednoduchý a funkční.

Vizuální kvalita může:

• zvýraznit nejdůležitější obsah,
• vybudovat důvěru,
• vysvětlit komplexní službu,
• vytvořit zapamatovatelný zážitek,
• usměrnit pohyb uživatele,
• posílit výzvu k akci.

Rozdíl je v tom, zda byl design vytvořen jen pro efekt, nebo jako součást promyšlené uživatelské cesty.

Web není hotový tehdy, když dobře vypadá.

Je hotový tehdy, když uživatel ví, co má udělat, dokáže to bez problémů udělat a firma získává výsledek, pro který byl web vytvořen.

Závěr

Pěkný web může zaujmout, ale samotný vizuální dojem nestačí.

Pokud uživatel nerozumí nabídce, neumí najít informace nebo nevidí jasný další krok, stránka nebude naplno plnit svůj účel.

Kvalitní web spojuje design, obsah, navigaci, rychlost a uživatelskou cestu do jednoho systému.

Každá sekce by měla návštěvníkovi pomoci odpovědět na otázku a připravit ho na další rozhodnutí.

Nejlepší web není ten, na kterém uživatel obdivuje množství efektů.

Je to web, na kterém přirozeně a bez nejistoty udělá to, co potřebuje.

Nevíte, kde se uživatelé na vašem webu ztrácejí?

V Lucero navrhujeme weby podle skutečných uživatelských cest, ne jen podle toho, co dobře vypadá.

Analyzujeme, co návštěvník potřebuje vidět, kam má kliknout a jaké informace potřebuje před odesláním poptávky.

Výsledkem je digitální zážitek, který podporuje značku a zároveň vede uživatele ke konkrétní akci.

Napište nám a podíváme se na uživatelskou cestu vašeho webu.