Audit použitelnosti webu FérZnámka.cz

Stát plánuje zavést elektronické dálniční známky, proto vyhlásil zakázku na informační systém a e-shop. Cenovka? 401 milionů korun. To se nelíbilo vývojářské komunitě, která za víkend naprogramovala podobný systém. Výsledkem byl web FerZnamka.cz. Udělali jsme audit použitelnosti.

Celkový dojem z webu a důvěryhodnost

Na začátku jsem použila tzv. pěti sekundový test. Ten umožňuje zjistit první první dojem návštěvníka webu. Testuje se tím způsobem, že si vstupní stranu zobrazíte po dobu pěti sekund a během toho si položíte základní otázky. Ptala jsem se například: Co je účelem stránky? Jaké produkty se zde prodávají? Kdo je cílová skupina? Jaký je prvotní dojem z designu? Komu tento e-shop patří? Pokud dokážete srozumitelně odpovědět, web je správně nastavený.

Web na mě působí na první pohled velmi dobře a přehledně. Je jasné o čem je řeč, k čemu slouží, co si zde mohu pořídit. Lidé na webu nečtou, jen skenují text očima. Když je textu moc, ztratí se v něm a neví kam kliknout první. To ale naštěstí není příklad webu FerZnamka.cz. Texty jsou krátké, srozumitelné a rozdělené do jasných úseků. Uživatel může velmi rychle pochopit, kde začít.

Z pohledu důvěryhodnosti vypadá web důvěryhodně. Jsou zde odkazy na médi a zmínka o nadaci Kolečko. Důvěryhodnost výrazně zvyšuje použití jiné značky. Je však otázkou, kolik lidí zná právě zmíněnou nadaci. Větší vliv na důvěryhodnost by například měla zmínka o spolupráci s Člověkem v tísni. Navíc se jedná o kauzu, která proběhla většinou hlavních médií. Tudíž hodně lidí ví, o co se jedná. Pro zvýšení důvěryhodnosti by bylo dobré přidat ještě přímo odkaz na stránky nadačního fondu.

Značka

Značka je pro web velmi důležitá. Musí být všude jednotná, abychom věděli, s kým máme tu čest. Když si otevřu web, na první pohled je všude vidět “Fér” známka. Logo uvádí “Ferznamka”, texty na hlavní straně říkají “Fér přístup, fér známka”.

Proč tedy URL přesměruje návštěvníka na “Fairznamka.cz”znamka.cz? Dle mého je to velmi matoucí a nekoresponduje to se značkou. Kazí to důvěryhodnost. Uživatel by například mohl mít pocit, že je na podvodném webu. Provozovatel webu navíc vlastní i doménu ferznamka.cz, takže jímohou použít rovnou.

Náměty na zlepšení uživatelského zážitku

V reálném světě většinou člověk ví, kde se zrovna nachází. Všude jsou názvy ulic, v obchodech popsané regály. Ale na webu se můžeme kdykoliv dostat z vyhledávačů na jakoukoliv stránku. Občas také na něco klikneme a už si nepamatujeme, jak jsme se tam vlastně ocitli.

Takže ať se dostaneme na jakoukoliv stránku, mělo by nám být jasné, kde se zrovna nacházíme. K tomu nám může pomoci drobečková navigace nebo u menších webů zvýraznění aktivní záložky v navigaci.

Zde na webu toto úplně chybí. Postrádám i názvy stránek, které by nám mohly trochu dopomoci. Také titulek stránky může někdy podpořit navigaci, protože se uživatel podívá na záložku v prohlížeči. Na stránce “Kontrola platnosti” je v titulku pouze -Ferznamka.cz.

Pro ukázku našeho návrhu přidáváme příklad z webu Alza.cz:

Drobečkovou navigaci vidíte u ikonky domečku pod lištou navigaci. Nadpis je “Chytré telefony”. Zvýraznění v navigaci plní hlavní záložka “Alza.cz”, která odděluje jednotlivé sortimenty Alzy.

U navigace ještě zůstanme. Když kliknu na tlačítko “Kontakty” v horní navigaci, otevře se v prohlížeči nový panel. Z hlediska použitelnosti by neměla otevírat nová okna v prohlížeči bez upozornění uživatele. Obvykle se k tomu používá třeba ikona značící, že určitý typ odkazu se otevře v novém okně.

Na hlavní straně je také matoucí, když tlačítko nevypadá na první pohled jako tlačítko. V tomto případě se to týká volby “Více o projektu”. Naštěstí na zbývající části webu už toto pravidlo použitelnosti tvůrci dodržují.

Chválím snahu vytvořit video “Jak to funguje”. Po zhlédnutí uživatel lépe pochopí, o čem to celé je. Nicméně jak tvůrci do stránek zasahují, video se stává lehce neaktuální a možná i trochu matoucí. Týká se to hlavně části o procesu nákupního košíku. Když jsem u těch videí, proč na stránce “o projektu” je ve spodní části to samé video zobrazeno na stránce 2x?

Produkty v sekci “Produkty” jsou řazeny tak, že to nedává smysl. Řazení je nesrozumitelné i tehdy, když se na to podíváme z pohledu ceny a délky platnosti. Naštěstí jsou na tomto webu pouze tři produkty, ale kdyby jich bylo více, uživatel by se v tom mohl ztratit. Takto to nutí chvíli přemýšlet nad tím, proč je to řazeno zrovna takto.

V sekci “O projektu” uvádějí partnery a média. To je dobrým krokem pro důvěryhodnost webu. Nicméně i zde by se dalo pár drobností vytknout. Někdo je uváděn jako partner a zároveň jde o médium. Co to znamená? Snižuje to objektivitu výstupů v médiích. A v neposlední řadě, některá loga jsou nečitelná.

Proces objednání - nákupní košík

Nejdůležitější ale na celém webu je vlastně samotný proces objednání: ať projdu jakoukoliv cestou, nakonec skončím vždy v nákupním košíku. Tento proces by měl fungovat bezchybně, ale není tomu úplně tak, což může zákazníky odradit od koupě. Za normálních okolností mohou vyhledat konkurenci a nakoupí jinde.

V tomto konkrétním případě to bude pro uživatele e-shopu složitější, protože nejspíš konkurence nebude existovat. Vzhledem k tomu, že se jedná o státní zakázku. Nikdo další pravděpodobně nebude prodávat dálniční známky. Pokud je tedy bude potřebovat, musí tímto procesem projít a zřejmě nebude existovat jiná možnost.

Celé by to mělo fungovat tak, aby to hodně usnadnilo práci a uživatel byl veden. Není dobré lidem vyvolávat v hlavě spoustu otázek. Příchozí návštěvníci jsou navyklí na určitě zvyklosti a očekávají na každém webu, že to bude fungovat stejně.

Například když vložíte zboží do košíku, měl by se u ikonky košíku vpravo nahoře objevit počet položek v košíku. Většinou se to řeší třeba zobrazením čísla nebo nějakého zvýraznění, že už něco v košíku. Velmi chválím navigaci mezi jednotlivými kroky objednávky.

A teď k samotnému procesu objednání. V prvním kroku: Výběr - se u výpisu zemí používá “Czech republic” namísto Česká republika nebo Česko. Pokud se jedná o lokální trh a český produkt, měly by být názvy primárně v tom daném jazyce. Platí i pro ostatní země.

Chybí mi zde vysvětlení pojmu RZ. Někdo třeba zná pouze SPZ. Když už používám zkratky, měly by být dovysvětleny.

Při vkládání RZ to nerozpozná nesmyslné zadání, takže mě to neupozorní když se například uklepnu a mám tam chybu. I SPZ na přání musí splňovat určité parametry. Když se RZ neshoduje s tou první zadanou, nepíše to žádnou chybovou hlášku. Pouze nelze kliknout na tlačítko Pokračovat. Uživatel může být zmatený, proč ho to nechce pustit dál.

Pokud se dostanu přes první tři kroky procesu, tak narazím na 4. krok: Typ platby. Zde zmizí navigace s jednotlivými kroky objednávky, která je nahoře. To je velmi matoucí a pro takové chování není důvod.

Následuje 5. krok: Osobní údaje. Tento krok je lehce frustrující. Teprve po několika vyplnění mi došlo, že položka email je povinný údaj, zatímco telefon nikoliv (když telefon nevyplním, tak mě to pustí dál). Chtělo by to pole E-mail označit hvězdičkou a přidat popis “Pole označena hvězdičkou jsou povinná”. To samé platí i pro část “Nakupuji na firmu”, kde se hvězdičky také používají.

Když v této části něco vyplním špatně (zde např. rozpozná, že není správně napsaný email), nebo něco zapomenu vyplnit a kliknu na Pokračovat, bez varování se celý formulář smaže a musím začít zase znovu od začátku. A to bez jakékoliv chybové hlášky. Dostat se přes tento krok (s tím, že chci nakoupit na firmu) je velmi těžký úkol.

Klik na Pokračovat:

Jak jsem zmínila, rozpozná to špatně napsaný email - například, že chybí @. Nicméně chybovou hlášku to opět nechá zobrazenou jen chvíli a pak mi zmizí.

Také by to opět mohlo poznat nesmysly v adrese, i pro mou kontrolu, že jsem vše vyplnila správně.

Když se mi podaří dostat se dále na krok 6: Shrnutí a kliknu omylem na zpět, opět se celý formulář smaže. Je dobrým zvykem tyto údaje zobrazit a umožnit používat tlačítka “Zpět” a “Vpřed” v prohlížeči.

Formulář - žádost o osvobození od placení

Na webu je schovaný ještě jeden formulář a to žádost o osvobození od placení. Musím říct, že mi na první pohled není úplně jasné, k čemu slouží. Většina odkazů a stránek je srozumitelná, ale u tohoto chybí jakékoliv vysvětlení. Ve formuláři jsou opět na podobné chyby jako v procesu nákupního košíku. Oproti formulářům na celém webu se tento chová správně v tom, že když nevyplníte vše potřebné, tak na to upozorní. Chybové hlášky se sice zobrazí jen chvíli u konkrétního řádku, ale po chvíli mi zmizí. Pokud si uživatel hlášky nevšimne, může být znovu zbytečně zmaten.

Kdyby byl systém trochu lépe propracovaný, rozpoznal by také vyplnění nesmyslných údajů a tedy i toho, když něco omylem vyplním špatně. Také se ztrácím v tom, co vlastně mám, nebo nemám vyplnit - chtělo by to dopsat, že “pole označená hvězdičkou jsou povinná”.

Formulář - kontrola platnosti vaší Fér známky

A na webu je také ještě jeden formulář a to v sekci “Kontrola platnosti”. Formulář má název “Zkotrolujte si platnost své Fér známky”. Záměrně jsem slovo zkontrolujte neopravila - protože na webu je překlep. Formulář opět obsahuje chyby, které jsme odhalili v dřívějších částech tohoto článku.

Mobilní verze

V dnešní době už využívá většina lidí k prohlížení webových stránek hlavně mobilní telefony a tablety. Je proto důležité nějak zajistit, aby se web na mobilu zobrazil správně. Programátoři mobilní verzi zvládli velmi dobře. Je dobře zpracovaná a čitelná. Text je velký tak akorát, nikde se nepřekrývá. Na odkazy lze kliknout, vedou na mobilní verzi. Chtělo by to ale přeci jen doladit pár drobností. Také tady se nachází zásadní problém, kdy uživatel nemusí poznat, kde se na webu nachází. Stačilo by to vyřešit vložením názvů stránek, které by korespondovaly s názvy v menu: například Produkty, O projektu apod. V procesu objednání a ve formulářích jsou pak stejné chyby jako verze pro PC.

Ještě jednou bych ráda ocenila snahu a odvahu, kdy se pustili do vytvoření tohoto webu. Věřím, že po opravení těchto pár chyb bude e-shop dokonalý.