Analýza použitelnosti onlinelekarna.com
Vypracoval Ing. Kvasnička Jan
ANALÝZA POUŽITELNOSTI
Obsah Úvod ............................................................................................................................................... 3 Barevnost a čitelnost webu ............................................................................................................. 4 Navigace ......................................................................................................................................... 5 Horní menu ...................................................................................................................... 5 Levá navigace ................................................................................................................... 7 Drobečková navigace ....................................................................................................... 9 Řazení .............................................................................................................................. 9 Upřesnit hledání ............................................................................................................. 10 Homepage (Úvodní stránka).......................................................................................................... 11 Header (vrchní část webu).............................................................................................. 11 Horní slider .................................................................................................................... 11 Box: Zdraví a krása za férové ceny .................................................................................. 13 8 boxů na hlavní stránce ................................................................................................. 13 Dolní slider ..................................................................................................................... 13 Footer (spodní část webu) .............................................................................................. 13 Stránka: Výpis produktů ................................................................................................................ 14 Stránka: Detail zboží ...................................................................................................................... 16 Stránka: Nákupní košík .................................................................................................................. 18 Stránka: Vyhledat .......................................................................................................................... 19 Stránka: O nás ............................................................................................................................... 22 Prohlížeče a mobilní zařízení ......................................................................................................... 23 Mobilní zařízení .............................................................................................................. 23 Internet Explorer ............................................................................................................ 24 Závěr ............................................................................................................................................. 25
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
2 / 25
ANALÝZA POUŽITELNOSTI
Úvod Analýza použitelnosti se zaměřuje především na zpříjemnění pobytu návštěvníků na Vašem webu. Díky tomuto může být docílen vyšší počet objednávek, lepší povědomí o daném webu nebo například kvalitnější hodnocení webu. Web by měl být přehledný, srozumitelný a především jednoduše ovladatelný. Upozornění: Všechny zjištěné hodnoty a ukazatele uvedené v této analýze jsou aktuální ke dni: 12. 9. 2012
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
3 / 25
ANALÝZA POUŽITELNOSTI
Barevnost a čitelnost webu Při testování byl několikrát zmíněný fakt, že při delším pobytu na webu z něj bolí oči. Barevnost webu je příliš agresivní (především bledě modrá to způsobuje). Písmo je tak špatně čitelné, především barevnost odkazů je opravdu hodně špatně zvolena. Důležitý je fakt, že Vaše cílová skupina jsou lidé 18-60 let, i starší, jelikož léky potřebují, proto by tomuto faktu měl být samotný web přizpůsoben. V následující ukázce (obr. 1) můžete vidět rozdíl zobrazení odkazů. Vrchní část je součastný stav barevnosti odkazů na webu a spodní část je návrh, jak by to mohlo vypadat. Už na první pohled je vidět, že spodní odkazy jdou daleko lépe přečíst.
Obr. 1 – Ukázka barevnosti odkazů Návrh řešení: Říkal jste, že máte kvalitního grafika. Doporučuji udělat barevnost webu tak, aby z něj nebolely oči. Návštěvník se na webu musí cítit příjemně. Alespoň použít trochu tmavší koncept barev, nebo né tak agresivní modrou.
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
4 / 25
ANALÝZA POUŽITELNOSTI
Navigace Horní menu Při testování padlo hodně stížností na fakt, že menu je rozhozeno na dva řádky (obr. 2). Působí to velice nevzhledně a navíc to rozbíjí celý design webu. Také když se nacházím myší na první položce menu, tak nejde vidět poslední položka menu, která je tím překryta.
Obr. 2 – Menu je rozděleno na 2 řádky Návrh řešení: Zkrátit názvy položek menu nebo zmenšit jejich odsazení. Mohlo by to vypadat jako na ukázce (obr. 3).
Obr. 3 – Ukázka, jak by menu mohlo vypadat Horní část menu je špatně vycentrovaná, měla by být vycentrována napravo. Velkou chybou je fialové písmo, které je při koncentraci barev velice špatně čitelné a po delším čase stráveném na tomto webu z něj bolí oči. Návštěvník tak hodně namáhá oči a kolikrát raději odejde, než aby se takto trápil. Návrh řešení: Vycentrolval bych horní část menu napravo, jak můžete vidět v ukázce (obr. 3) a zvolil bych jinou barvu písma (v ukázce je použita tmavě zelená). Horní položky menu nemají hover efekt (efekt změny barvy písma, pozadí, nebo úprava stínování písma). Tento hover efekt pomáhá pouhým okem rozeznat, zda již jsem myší nad daným prvkem, nebo nikoli. Návrh řešení: Doporučuji dodělat hover efekt, minimálně jinou barevnost písma nebo změnu barvy pozadí. Nejlepší by byla konzultace s Vaším grafikem.
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
5 / 25
ANALÝZA POUŽITELNOSTI Položky menu nemají title, ale toto je spíše z oboru SEO. Title je text, který se zobrazí po najetí myši (obr. 4). Tuto skutečnost doporučuji dále probrat s panem Linhartem.
Obr. 4 – Ukázka title Zobrazení podmenu je velice pěkně zpracováno. Je zde přehledný hover efekt, odsazení, i počet zboží pro danou část. Toto je opravdu zpracováno kvalitně. Nyní se dostaneme k obecnému problému většiny eshopů, a tím je řazení prvků v menu. Podmenu máte velice pěkně seřazeno dle abecedy. Stejné řazení, podle abecedy, by tam mělo mít i hlavní menu (menu pro zboží – to spodní z těch dvou). Nyní je to řazení dle jakého kritéria? Prodejnost? Uživatel by se měl v menu jasně a přehledně orientovat, proto doporučuji seřadit menu dle abecedy. Návrh řešení: Seřadit položky menu (menu pro zboží – to spodní z těch dvou) dle abecedy. Horní část tohoto menu si projdeme podrobněji:
Domů – Většina běžných návštěvníků internetu se již naučila klikat na logo na webu, kde je umístěn odkaz na úvodní stránku. Tento fakt máte určitě dobře zpracován. Dále se využívána drobečková navigace, kde je odkaz domů také. Proto mi přijde tato položka horního menu zbytečná. Seznam přání – Nejsem přihlášen, nemám žádné přání a je mi zobrazena stránka, kde se musím přihlásit, ale nikde není uvedeno proč. Dejte uživateli informaci o tom, aby mohl využívat seznam přání, že se musí přihlásit, nebo jakou akci musí provést, aby mu byl tento seznam zobrazen. Postačující by byla hláška: „Musíte se přihlásit/zaregistrovat, abyste tuto možnost mohli využívat“, nebo něco v tomto smyslu. Více o Seznamu přání níže (toto je pouze obecné hodnocení). Účet – Jaký je rozdíl mezi „Účet“ a „Přihlásit“ pokud nejsem aktuálně přihlášen? Jedná se o duplicitu, a pokud je pod těmito položky schovaná jiná stránka, tak by se jedna z těchto položek měla zobrazit až po přihlášení. Nákupní košík – Podobný příklad jako výše, jaký je rozdíl mezi „Nákupní košík“ a „Objednat“? Je to duplicita funkcí a zbytečné matení návštěvníka (tento fakt padl několikrát během testování). Podle mě jsou obě položky v menu zbytečné, jelikož běžní uživatelé internetu jsou zvyklí kliknout na nákupní košík nahoře a měl by se jim obsah jejich nákupního košíku zobrazit. Zjednodušte návštěvníkovi možnost ovládání, ideálně tak, jak jsou zvyklí.
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
6 / 25
ANALÝZA POUŽITELNOSTI Návrh řešení: Odstranit z tohoto menu položky: „Domů“, „Účet“ zobrazit pouze po přihlášení, „Nákupní košík“, „Objednat“. Zjednodušíte tím návštěvníkům pohyb po webu.
Levá navigace Horní menu má perfektně zvládnuté zobrazení podmenu. V tomto menu to bohužel není zpracováno moc dobře. Chybí zde hover efekt pro nejvyšší položky (položky „Indikace“ atd.). Viditelnost aktuálně rozevřené části zde není dostačující, pouze ztučnění písma. Zde by to mělo být na první pohled viditelné, kde jsem v hierarchii navigace (obr. 5).
Obr. 5 – Levá navigace SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
7 / 25
ANALÝZA POUŽITELNOSTI Další problém je ten, že menu není řazeno dle abecedy, ale podle nějakého jiného klíče (již bylo řešeno). Jak je vidět na ukázce (obr. 5), není zde úplně jednoznačně určitelné, kde se právě nacházím, jelikož položka „Pro maminky a děti“ je mnohem výraznější, než položka „Děti imunita“, kde opravdu jsme. Co se týče barevnosti, tak by dle logiky měly být barevně udělané nadřazené prvky menu a podmenu méně barevné. Možná by stálo za zamyšlení, aby hlavní prvky menu měly barvu pozadí, což by určitě výrazně pomohlo. Hodně by tomuto menu pomohlo kaskádové odsazení podčástí (obr. 6).
Obr. 6 – Ukázka kaskádového odsazení menu Návrh řešení: Zavést do menu kaskádové řazení pro lepší orientaci a pohrát si lépe s barevností, aby opravdu šlo na první pohled poznat, který prvek je nadřazený a který podřazený. Je nutné doplnit hover efekty pro položky menu. Položky menu nemají vyplněn title (již bylo řešeno). Celé toto levé menu je až příliš namáčknuto nahoru. Návrh řešení: Zvolil bych odsazení shora, které by přidalo více vzdušnosti. Část, která je zobrazena pod měnu (obr. 7), by měla mít nadpis a odsazení shora, aby si ji lidé nepletli přímo s menu (při testování jsme narazili na poznámky typu: „Čekala jsem, že se tyto položky rozevřou stejně jako to menu nahoře“). Opět zde není title (již bylo řešeno).
Obr. 7 – Neoznačená část po menu Návrh řešení: Doporučuji přidat nadpis, nejlépe „Další řazení produktů“ nebo „Vyhledávaní dle kritérií“, a přidat odsazení shora.
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
8 / 25
ANALÝZA POUŽITELNOSTI Tyto podstránky z této navigace 4 prvků jsou bez poznámek, tam to takto může zůstat.
Drobečková navigace Drobečková navigace je velice pěkně zpracována. Bohužel se ztrácím v jejím ovládání. Jsem na stránce: http://onlinelekarna.com/pro-maminky-a-deti/deti-imunita a drobečková navigace vypadá následovně (Obr. 8).
Obr. 8 – Drobečková navigace, ukázka 1 Nyní kliknu na první výrobek „Vibovit Probio 30 pastilek“ a to mě odkáže na stránku, kde je drobečková navigace následující (obr. 9).
Obr. 9 - Drobečková navigace, ukázka 2 Po kliknutí mě to přesměrovalo v hierarchii webu úplně jinam a zpět se díky drobečkové navigaci nedostanu. Tento fakt vysoce mátl testující, kteří se měli pomocí drobečkové navigace na webu orientovat. Je nutné udělat web tak, aby drobečková navigace plnila svůj účel. Návrh řešení: Prozkoumat a upravit drobečkovou navigaci tak, aby byla jednoznačná a lidé se díky ni opravdu mohli orientovat.
Řazení Část „Zobrazit“ by měla bát lépe popsána. Mělo by zde být „Zobrazit položek na stránku“, nebo něco v tom smyslu, aby návštěvník přesně věděl, co toto číslo indukuje. Když se podívám na možnosti řazení (obr. 10), tak mě zaujme možnost řadit dle „Hodnocení“, které ale na výpisu zboží (obr. 11) ale není viditelné. Toto řazení tedy postrádá smysl, jelikož na seřazení na první pohled nevidím, které zboží je jak hodnoceno. Návrh řešení: Přidat na výpis zboží údaj o hodnocení, nebo tuto možnost řazení vynechat. Další velice zajímavou volbou řazení je dle „Modelu“. Při první návštěvě webu opravdu nevím, jaké je toto řazení nebo co si pod tím mám představit. Jaký je vůbec rozdíl řazení mezi „Podle názvu“ a „Podle modelu“? Opět je zde další fakt, kdy nutíte návštěvníka až příliš přemýšlet nad věcmi, nad kterými by se neměl ani pozastavit. Návrh řešení: Odstranit z třízení možnosti, které nejsou jednoznačně identifikovatelné, jako řazení „dle modelu“.
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
9 / 25
ANALÝZA POUŽITELNOSTI
Obr. 10 – Možnosti řazení
Obr. 11 – Výpis zboží
Upřesnit hledání Zde nemám připomínky, je to velice pěkně zpracováno a při testování to bylo hojně používáno. Jen zde chybí title (již bylo řešeno).
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
10 / 25
ANALÝZA POUŽITELNOSTI
Homepage (Úvodní stránka) Header (vrchní část webu) K zamyšlení: První připomínka je k logu, které podle testujících spíše evokuje stavebnictví, než lékárnu. Nákupní košík by měl být vždy napravo. Barevnost této části by také mohla být odlišná (již bylo řešeno). Zde je ale velká chyba: Pokud kliknu na počet položek, tak se mi zobrazí výpis zboží zde, ale mělo by mě to přesměrovat na podstránku „Nákupní košík“. Tento mini výpis je spíše matoucím prvkem pro návštěvníky, než nějakým zpestřením webu. Navíc pokud při kliku na tuto položku nyní trochu pohnu myší, tak mi zmizí. Jedna paní zde klikala na 3x, než vůbec pochopila, že se něco má zobrazit, že nesmí myší hýbat a že jí to nepřesměruje. Pokud odstraníte z hlavního menu z horní řady položku „Nákupní košík“ a přidáte zde přímo odkaz na nákupní košík, vše je zjednoduší a bude to tak, jak jsou uživatelé zvyklí. Vyhledávání by mělo být ve středu headeru a mělo by být viditelně odděleno od části „Nákupní košík“, ten musí být vždy samostatný a jednoznačně určitelný. Ikona nákupního košíku nemá title (již bylo řešeno). Návrh řešení: Dát nákupní košík na pravou stranu, viditelně jej oddělit od vyhledávání, odstranit okno po kliknutí a místo něj dát přímo přesměrování na detail nákupního košíku. Doplnit title do ikony košíku. Umístění ikony pro Facebook je velice nelogické a málokdo by jí zde určitě hledal. Návrh řešení: Doporučuji tuto ikonu přesunout do obsahu headeru (nejlépe konzultovat nové umístění s grafikem). Header neobsahuje další důležité informace, jako je přímý kontakt (telefon nebo email). Doporučuji tuto informaci doplnit do headeru, i když máte telefon pěkně grafický zpracován dole, tak by tato informace měla být viditelná ihned při najetí jakékoliv podstránky. Další informace, které dokážou nalákat návštěvníky, jsou cena za doručení, zda je zde nějaká sleva při nákupu v určité výši atd. Návrh řešení: Doporučuji doplnit informaci o telefonu a emailu přímo do headeru, aby ji mohli lidé kdykoliv najít.
Horní slider Při testování si testující stěžovali, že slider běhá moc rychle a oni si nemohou danou informaci o produktu v klidu přečíst. Navíc u těchto sliprů se přidává funkce, kdy jsem myší na jednom
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
11 / 25
ANALÝZA POUŽITELNOSTI z produktů, tak se slider pozastaví, jakmile s touto myší uhnu pryč, tak se slider opět rozjede. Tuto funkci doporučuji dodělat. Název produktu nemá hover efekt, a zde by mělo být efektem i podtržení. Nyní fakt, který je špatně po celém webu. Máte vedle sebe cenu, informace a ikonu košíku (Obr. 12). Akce, která by měla být ideálně provedena, je přidání zboží do košíku, tudíž by měla být nejvíce výrazná, tedy ta, která přímo vybízí ke kliknutí (známý pojem call to action – vyvolává akci).
Obr. 12 – Výpis produktu v horním slideru Vy to máte přesně naopak. Tedy přidání do košíku má být ta nejvýraznější ikona a cena by neměla být vůbec znázorněna rámem, nebo jinou barvou. Návrh řešení: U ceny odstranit pozadá a nechat jen černé písmo, „i“ stylizovat do modré barvy jako je nyní košík a košík dát modré pozadí a bílé znázornění. Další chybou je nedostatečný popis zboží v tomto slideru. Co když to lidé neznají, tak by na první pohled rádi věděli, na co je daný přípravek určen, když už jej doporučujete. Jak je vidět v ukázce (obr. 12), tak informace, které tam jsou zobrazeny, mi opravdu moc nenapoví. Toto chce upravit po celém webu, aby zde byly opravdu relevantní informace a návštěvník na první pohled věděl, k čemu toto zboží je. Návrh řešení: Projet všechny detaily zboží a upravit tyto viditelné popisy tak, aby bylo na první pohled jasné, co je to za produkt. Klidně i za cenu toho, že popis bude trochu delší. Když se prokliknu na detail zboží, tak zde nikde není informace o tom, že právě toto zboží doporučujete. Toto by zde mělo být také viditelné, když už je doporučováno. Jedna paní na to při testování narážela, že teda neví, zda je toto zboží doporučeno, nebo nikoli, tudíž neuvažovala nad tím, zda jej má koupit nebo nikoli, ale nad tímto. Návrh řešení: Dodělat na detailu zboží ikonu nebo informaci o tom, že toto zboží je doporučeno. Šipky slideru by měli mít hover efekt, aby na první pohled bylo vidět, zda už na této šipce jsem a zda už můžu provádět akci. Ano, po najetí na šipku se místo klasického označení myši zobrazí ruka, ale měl by zde být i hover efekt.
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
12 / 25
ANALÝZA POUŽITELNOSTI Návrh řešení: Dodělat hover efekt, který by vypadal totožně, jen by měl buď tmavší, nebo světlejší odstín.
Box: Zdraví a krása za férové ceny Tento box je velice pěkně graficky zpracován, ale po najetí myší má ukazatel, jako by obsahovat odkaz. Ale žádný odkaz zde není, proto by se toto značení mělo odstranit. Návrh řešení: Odstranit toto značení, nebo přidat odkaz, který by zde měl být.
8 boxů na hlavní stránce Tato část může spadat také do části navigace, což v podstatě je, ale já jsem ji zde nezařadil záměrně. Využívají vůbec lidé tuto část, nebo je zde proto, že to dobře vypadá graficky? Přece jen stejná část je již v menu, má stejné rozdělení. Pouvažoval bych, jak tento prostor lépe využít. Připadá mi vhodné rozdělení do 3 sloupců, kde by první obsahoval informace: „Proč si koupit zboží právě u Vás a čím jste lepší než konkurence“, druhý box by mohl obsahovat informace o poštovném (Dobírka, PPL, předem na účet, platební karta, osobní odběr, uloženka nebo něco v tomto smyslu) a třetí box třeba výpis posledních recenzí nebo něco v tomto smyslu. Akce, soutěže, marketingové lákadla, to vše by zde mohlo být. Doporučuji vše probrat s někým na marketing, aby se tento prostor lépe využil. Ani jeden z testujících nepřešel na podstránky webu přes tuto část.
Dolní slider Totožný popis jako u horního slideru (již řešeno).
Footer (spodní část webu) Zde je to na hodně dlouhé zamyšlení. Proč některé prvky z tohoto Footeru nejsou uvedeny v horní části horního menu? Například informace jako: „O nás“, „Poštovné a doprava“, „Kontakt“, „Dárkové poukazy“, to bych určitě zvážil, zda by tyto informace neměly být také právě tam. Přece jen právě „Kontakt“ a „O nás“ značí tu hodnotu, že za webem někdo stojí a není to nějaký falešný obchod. „Poštovné a doprava“, to určitě zajímá každého, kolik mě to bude stát a zda něco právě na tomto eshopu ušetřím, nebo nikoli. Je nutné se zamyslet, které z těchto částí dát také do horní části horního menu. Jinak je footer opravdu krásně graficky zpracován.
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
13 / 25
ANALÝZA POUŽITELNOSTI
Stránka: Výpis produktů O chybě barevnosti částky, košíku a informace jsem se již zmiňoval (bylo již řešeno). Zde je obrovská chyba: u výpisu produktů není jejich popis (obr. 13). Návštěvník tedy neví, k čemu je daný produkt určen. Takový výpis hodně ovlivní jednoduchost hledání potřebného léku, pokud přesně nevím název. Například na ukázce produkt Arnika: pokud jsem jej nikdy neměl, tak těžko odhadnu, k čemu tento produkt je. Další chyba: není zde ihned možnost zadat počet kusů. Tato možnost by zde měla být ještě předtím, než kliknu na samotnou ikonu košíku. Další věc, která by zde měla být, je dostupnost zboží. Potencionální zákazník chce vědět, zda je zboží na skladě nebo ne a kdy tedy dojde. Kolikrát lidé na léky spěchají.
Obr. 13 – Výpis produktů Návrh řešení: Stačí se zde přesně podívat na konkurenci (obr. 14), kde uvidíte, že všechny tyto informace mají vypsány. U Vás je ještě další problém: kliknu na ikonu košíku, a zobrazí se mi našedlá obrazovka. Proč? Protože informace o koupi je někde nahoře, nikoli na aktivní obrazovce. Tuto možnost doporučuji úplně odstranit a udělat to tak, jak to mají všechny eshopy. Tedy možnost zadat počet kusů a zmáčknout na „Koupit“ nebo ikonu košíku. Je to nejjednodušší řešení a také jsou na něj běžní uživatelé zvyklí. Návrh řešení: Odstranit špatný způsob přidávání zboží do košíku a udělat to klasicky (viz popis výše).
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
14 / 25
ANALÝZA POUŽITELNOSTI
Obr. 14 – Detaily produktů u konkurence lekarna.cz
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
15 / 25
ANALÝZA POUŽITELNOSTI
Stránka: Detail zboží Zde je to pěkně zpracováno, vše přehledné, tam, kde má být. Pouze pokud vyberu počet zboží, dám do košíku, tak se mi objeví to okno (obr. 15). Toto by se určitě objevit nemělo a jen by mělo být zboží připočítáno do košíku. Návrh řešení: Odstranit zde toto okno a nechat pouze načtení položek do košíku.
Obr. 15 – Okno po kliknutí na „Dát do košíku“ Pokud jsem na detailu zboží, tak se levé menu zavře (obr. 16). Toto by určitě nemělo nastat. Menu by mělo být stále otevřené, aby šlo přehledně vidět, kde se nacházíme.
Obr. 16 – Zavřené levé menu SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
16 / 25
ANALÝZA POUŽITELNOSTI Návrh řešení: Nechat menu vždy otevřené, aby se návštěvník mohl kdykoliv přes toto menu přesunout dále. Navíc musíte myslet na to, že návštěvník může na detail produktu přijít přímo přes vyhledávání, a proto by tato struktura měla být na první pohled viditelná. K zamyšlení: Co jsem procházel zboží, tak zde nejsou žádné recenze. Tento fakt může vypadat tak, že web je málo navštěvovaný. Navíc tyto recenze mohou posloužit jak pro obor SEO? Tak pro nalákání návštěvníků, aby produkt zakoupili. Tento fakt doporučuji probrat s panem Linhartem. Texty v části „Popis“ jsou velice nepřehledné (obr. 17). Nejde poznat, co je nadpis, co je jen text atd. Struktura by měla vypadat určitě úplně jinak, aby se zde návštěvníci mohli mnohem lépe orientovat. Návrh řešení: Upravit nadpisy, dát jim tučnost, jiné barvy, podtržení, cokoliv, jen aby se uživatel v tomto textu dokázal lépe zorientovat.
Obr. 17 – Špatné strukturování textů a nejdou poznat nadpisy
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
17 / 25
ANALÝZA POUŽITELNOSTI
Stránka: Nákupní košík Nákupní košík je poměrně dobře zpracován. Je zde ale jedna velká chyba: tlačítko aktualizovat je úplně dole. Pokud chci změnit počet kusů, tak musím zdlouhavě scrollovat až dolů, což málokdo udělá. V dnešní době se to dělá automatickým přepočtem, kdy pokud změním počet kusů, tak se automaticky změní také cena. Tento proces můžete vidět například na serveru alza.cz (obr. 18).
Obr. 18 – V tomto eshopu se změna ceny provádí automaticky Možnost odebírání jde lépe zpracovat. Jak vidíte výše na ukázce (obr. 18), po kliknutí na křížek se zboží automaticky odebere. Je to uživatelsky nejlepší řešení, co může být, žádné zdlouhavé scrollování nebo klikání navíc. Návrh řešení: Snažit se minimalizovat počet kliků pro uživatele výše uvedeným řešením. „Nákupní košík“ také obsahuje kontroly, validace a varování, což je dobře. Pokud je nákupní košík prázdný, tak je špatně zobrazen (obr. 19).
Obr. 19 – Špatné zobrazení nákupního košíku
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
18 / 25
ANALÝZA POUŽITELNOSTI
Stránka: Vyhledat Tato stránka je velice pěkně udělaná, jen výsledky vyhledávání jsou poměrně zvláštní, kdy při zadání „krém na ruce“ mi jako první vyjede Visine (obr. 20). Jinak je zde stejný problém pro výpis produktů, jaký již byl řešen (obsah výpisu atd.).
Obr. 20 – Zajímavé výsledky při vyhledávání
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
19 / 25
ANALÝZA POUŽITELNOSTI
Stránky po přihlášení Po přihlášení není správně zobrazeno, kdo je přihlášen a udělá to chybu (obr. 21).
Obr. 21 – Chyba po přihlášení Návrh řešení: odsadit zleva a ukázat jméno přihlášeného v té části, kde má být.
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
20 / 25
ANALÝZA POUŽITELNOSTI
Stránka: Seznam přání Zde se přiznám, že se nám nepodařilo najít, jak to funguje. Je zde po přihlášení pouze tlačítko pokračovat, které vede na informace o účtu, což je určitě špatně. Když jsem na detailu produktu, tak nikde nevidím možnost přidat na Seznam přání nebo něco takového.
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
21 / 25
ANALÝZA POUŽITELNOSTI
Stránka: O nás Zde doporučuji přidat alespoň adresu, mapu, cokoliv, co by mohlo působit důvěryhodněji. Také menší mezery mezi jednotlivými texty by byly určitě lepší (obr. 22).
Obr. 22 – Ukázka pěknějšího výpisu Návrh řešení: Upravit odsazení jednotlivých textů a přidat mapu s odkazem.
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
22 / 25
ANALÝZA POUŽITELNOSTI
Prohlížeče a mobilní zařízení Mobilní zařízení (testováno na Ipad, Iphone a Samsung Galaxy Ace) a ostatní prohlížeče se zobrazují v pořádku.
Mobilní zařízení Zde je pouze problém s ikonou facebooku, které se přesune sama do zobrazovací části (obr. 23). Pokud ale bude dle výše uvedeného hodnocení přesunuta do headeru, tak vše bude v pořádku.
Obr. 23 – Zobrazení na mobilu
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
23 / 25
ANALÝZA POUŽITELNOSTI
Internet Explorer V tomto prohlížeči jsou některé prvky rozbité – verze IE7 (obr. 24):
Obr. 24 – Rozbité prvky v prohlížeči IE7
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
24 / 25
ANALÝZA POUŽITELNOSTI
Závěr Stránky na tom nejsou úplně nejhůře, ale mají velké nedostatky především v navigacích, v nákupním procesu, barevném zobrazení a také ve výpisu zboží. Zde je souhrn nejdůležitějších částí, které je nutno opravit: 1) 2) 3) 4)
Opravit navigace, upravit jejich pořadí a horní navigaci doplnit Zapracovat na grafických prvcích, které byly v analýze popsány Zapracovat na zobrazení výpisu zboží, kde jsou velké nedostatky Optimalizovat nákupní proces bez zbytečného zobrazení dalšího okna
SEO Linhart s.r.o. | www.seolinhart.cz |
[email protected] | Vypracoval Ing. Kvasnička Jan
25 / 25