Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Katedra informačních technologií
Student:
Jiří Frank
Vedoucí bakalářské práce:
prof. Ing. Zdeněk Molnár, CSc.
Oponent bakalářské práce:
Ing. Vladimír Brdek, Ph.D.
T ÉMA BAKALÁŘSKÉ PRÁCE
Audit webových stránek e-shopů
ROK: 2011
Prohlášení
Prohlašuji, že jsem bakalářskou práci zpracoval samostatně a že jsem uvedl všechny použité prameny a literaturu, ze kterých jsem čerpal.
V Praze dne 9.5.2011 Podpis
2
Poděkování Tímto bych rád poděkoval vedoucímu práce prof. Ing. Zdeňku Molnárovi, CSc. za neustálou ochotu, maximální vstřícnost, cenné rady, ale také za velkou trpělivost. Dále pak Lubomíru Jungwirthovi za poskytnutý web k praktické části auditu.
3
Abstrakt Tato práce popisuje základní metodiky auditu webových stránek a obecné zásady, které by měl dodržovat každý web. Metodiky jsou zaměřeny na hodnocení technických náležitostí a grafické podoby, dále pak na analýzu SEO aspektů, návštěvnosti a výkonnosti. Navržená sada hodnotících prostředků je poté prakticky aplikována při auditu konkrétního internetového obchodu a jeho hlavních konkurentů. Z analytické části jsou vyvozeny závěry a doporučení, které jsou uvedené v závěrečné kapitole. Tyto návrhy by měly pomoci zlepšit současný stav obchodu. Hlavní přínos práce spočívá v definování ucelené základní sady metodik, které lze efektivně používat v praxi.
Abstract This paper describes the basic methodology of the auditing of websites and general principles that should be followed by each site. Methodologies focus on the evaluation of technical requirements and graphic design, as well as analysis of the aspects of SEO, traffic and performance. This proposed set of evaluation techniques is then practically applied in the audit of one particular online store and its main competitors. Conclusions and recommendations are drawn from the analysis and these are discussed in the final chapter. These recommendations should help improve the current state of trade. The main contribution of this work is in defining a comprehensive set of essential methodologies that can be effectively applied in practice.
4
Obsah 1. Úvod.............................................................................................................................. 7 1.1. Cíle práce ............................................................................................................... 7 1.2. Struktura práce ....................................................................................................... 8 2. Metodiky hodnocení webových stránek .................................................................... 9 2.1. Cílová skupina........................................................................................................ 9 2.2. Technické zásady dobrého webu ........................................................................... 9 2.3. Grafické ztvárnění webu ...................................................................................... 19 2.4. Zhodnocení SEO a SEM ...................................................................................... 21 2.5. Analýza návštěvnosti ........................................................................................... 29 2.6. Metodiky zvyšování výkonnosti webu................................................................. 31 2.7. Analýza výkonnosti e-shopu ................................................................................ 34 3. Analýza webových stránek vybraných internetových obchodů ........................... 37 3.1. Současný stav obchodu ........................................................................................ 37 3.2. Stanovení hlavní konkurence ............................................................................... 37 3.3. Cílová skupina...................................................................................................... 38 3.4. Výběr metodik testování ...................................................................................... 38 3.5. Analýza technických náležitostí........................................................................... 38 3.6. Zhodnocení SEO a SEM ...................................................................................... 46 3.7. Analýza návštěvnosti ........................................................................................... 49 3.8. Analýza výkonnosti e-shopu ................................................................................ 53 3.9. Srovnávací tabulka ............................................................................................... 54 4. Návrhy a doporučení pro zlepšení aktuálního stavu obchodu .............................. 55 4.1. Zobrazování v jednotlivých prohlížečích ............................................................. 55 4.2. Přístupnost a použitelnost .................................................................................... 55 5
4.3. Velikost webu ...................................................................................................... 55 4.4. Použitý značkovací jazyk a styly ......................................................................... 55 4.5. Grafické ztvárnění webu ...................................................................................... 56 4.6. SEO a SEM .......................................................................................................... 56 4.7. Nákupní proces..................................................................................................... 57 4.8. Závěrečné slovo k návrhům ................................................................................. 57 5. Závěr........................................................................................................................... 58 6. Terminologický slovník ............................................................................................ 60 7. Zdroje ......................................................................................................................... 62 8. Přílohy ........................................................................................................................ 64 8.1. Příloha 1 – Graf trhu prohlížečů ve světě............................................................. 64 8.2. Příloha 2 – Graf trhu prohlížečů v ČR ................................................................. 65 8.3. Příloha 3 – Hodnocení webu uživateli ................................................................. 66 8.4. Příloha 4 – Srovnávací tabulka ............................................................................ 67
6
1. Úvod S webovými stránkami se setkává velká většina z nás denně při práci a zábavě, prakticky kdykoliv a kdekoliv, pokud sháníme nějakou informaci a máme k dispozici internet. Internet prodělal za poslední roky obrovský rozvoj z hlediska širokého rozšíření a přístupové rychlosti. S tím samozřejmě souvisí měnící se požadavky na webové stránky, již nám nestačí strukturovaný text, díky vysokým rychlostem si můžeme dovolit tvořit stránky plné grafiky, interaktivních prvků a dalších vizualizací, náročných na přenesená data. V České Republice má internetové připojení více než 50% domácností a přes 90%společností s větším počtem než deset zaměstnanců [1], což dává internetu jako takovému obrovský potenciál. V podstatě se zde vytvořil další kanál, na kterém lidé sdílejí informace, komunikují, nakupují a dělají mnoho dalších věcí, které toto médium umožňuje. Za těchto okolností zároveň roste dramaticky počet nových webových stránek. Tyto technologie jsou tak běžné, že většina techničtěji zaměřených středoškoláků dokáže udělat nějaký web. Díky tomu se také poměrně často setkáváme s nekvalitními weby, které jsou pro běžného uživatele nepřehledné, pomalé a neoptimalizované. Dalším častým problémem webů je malá návštěvnost nebo nezájem ze strany návštěvníků i přes to, že daný web nabízí např. kvalitní informace a dané téma je pro uživatele zajímavé.
1.1. Cíle práce Prvním cílem práce je definování základních metodik pro audit internetových stránek, pomocí kterých bude možné zhodnotit stránku ze všech zásadních úhlů pohledu. Těchto metodik může být celá řada. Tato práce je zaměřena primárně na technickou stránku, grafickou podobu, SEO analýzu a analýzu návštěvnosti, protože tyto aspekty považuji za klíčové pro výslednou úspěšnost webu. Druhým cílem bude teoretické poznatky převést do praxe a aplikovat je na internetový obchod s osvětlením "Svetlaaosvetleni.cz". Zároveň je nutné podrobit této analýze i jeho hlavní konkurenty z důvodu identifikace potenciálních konkurenčních výhod a nevýhod. Výstupem by měl být obraz skutečnosti, který zmapuje současný stav definovaných internetových obchodů. 7
Třetím a závěrečným cílem, vyplývajícím z předchozích dvou, bude případný návrh zlepšení, která by měla přispět ke zvýšení efektivity obchodu, návštěvnosti či funkčnosti tak, aby bylo dosahováno co nejlepších prodejů.
1.2. Struktura práce Kapitola první zahrnuje úvod, cíle a strukturu práce. Hlavní část práce je věnována tématu a to s rozdělením do třech hlavních kapitol. Ve druhé kapitole se zabývám teoretickou částí nazvanou metodiky hodnocení webových stránek, která řeší první cíl. Další kapitola je věnována druhému cíli a to praktické části analýzy webů. Podstatou třetí kapitoly a zároveň třetím cílem je návrh zlepšení současného stavu webu. Po těchto třech kapitolách následuje stručné shrnutí celé práce nazvané jako závěr. Aby byl v obraze i méně znalý čtenář, uvádím jednoduchý terminologický slovník. Úplně na závěr jsou k dispozici použité zdroje, obrázky a tabulky, které jsou díky svému rozsahu umístěny v sekci přílohy.
8
2. Metodiky hodnocení webových stránek Před samotným auditem konkrétní stránky je třeba stanovit pravidla, kterých by se měla každá dobře napsaná stránka držet. Je nezbytné testovat jak technické aspekty dané realizace, tak obsahovou, vizuální i statistickou stránku webu. V několika následujících kapitolách je definována metodologie, která dokáže bezpečně analyzovat jakoukoliv webovou stránku z hlediska všech klíčových aspektů.
2.1. Cílová skupina Při tvorbě stránky by si měl každý autor položit základní otázku. Pro koho bude web určen? Pokud jsme schopni cílovou skupinu relativně dobře definovat, víme, kdo bude web navštěvovat. Tak můžeme navrhnout web, obsah, vzhled i marketing takovým způsobem, aby byl pro danou skupinu optimální. Pokud víme, že na stránce budeme nabízet kočárky, naši návštěvníci resp. návštěvnice budou pravděpodobně ženy. Pokud víme, že na stránce budeme nabízet „chytré“ telefony, největší procento uživatelů bude mladšího věku. Veškeré takto zjištěné informace by měl zásadně odrážet design, marketing či případné optimalizace.
2.2. Technické zásady dobrého webu Kvalitu každé stránky definuje zejména technická realizace a obsah. Tou důležitější je na počátku technická realizace i přesto, že není na první pohled vidět. Její význam spočívá v jedné zásadní věci. Pokud máme skvělý obsah, kvalitní články a výborné autory, nemusí to vůbec nic znamenat, neboť při špatném zobrazování či chybné optimalizaci nebude uživateli vycházet vstříc. Stránka by měla být technicky realizovaná takovým způsobem, aby podpořila svým precizním kódováním kvalitní obsah.
2.2.1. Obecné zásady Při tvorbě webu je důležité dodržovat pravidla. Některá z nich jsou velice zásadní a nelze je opomíjet. Naopak je třeba se jimi zabývat ve všech etapách webu. 2.2.1.1. Znaková sada Poměrně důležitou záležitostí je použitá znaková sada. Pokud bude špatná, nelze zaručit dobré zobrazování všech znaků pro všechny uživatele, v různých jazycích a ve 9
všech kvalitních prohlížečích. Pro český jazyk jsou nejrozšířenější znakové sady Unicode (konkrétně implementace UTF-8), Windows-1250 a ISO 8859-2. Sada Unicode je na rozdíl od zbylých dvou určena pro použití všemi jazyky najednou, tj. v případě máme-li web lokalizován do více jazyků, pak je více než výhodné toto kódování použít. Mezi další výhody patří shodné zobrazování znaků ve všech moderních operačních systémech. Problém nastává v případě, kdy znaková sada není definována. Pak se automaticky použije výchozí sada prohlížeče a web bude s největší pravděpodobností absolutně nečitelný. 2.2.1.2. Zobrazování v jednotlivých prohlížečích Internetové prohlížeče jsou zprostředkovateli mezi webovými stránkami a jejich uživateli. To ony zobrazují obsah, vykreslují obrázky, graficky ztvárňují značky v kódu a mnoho dalších záležitostí, které uživatel považuje za samozřejmé. Na světě je hned několik ústředních prohlížečů a poměrně dost dalších, méně významných. Z této různorodosti vyplývá velká pravděpodobnost, že některé prohlížeče budou zobrazovat stránky jinak než ostatní. Tento problém dělá stále už řadu let vrásky nejednomu kodérovi. V posledních letech se snaží výrobci důsledněji dbát standardů definovaných konsorciem W3C a obsah vypadá téměř shodně nebo velice podobně ve většině případů a ve většině prohlížečů. Převládajícím problémem bývá prohlížeč Internet Explorer 6 od firmy Microsoft. Ten byl dodáván spolu s operačním systémem Windows XP a poměrně velký počet uživatelů ho používalo nebo stále používá. Situace se v posledních letech pomalu zlepšuje. Lidé přechází od zastaralých prohlížečů typu IE6 k modernějším jako je např. Opera, Firefox nebo Chrome. Otázkou je, zda se vyplatí optimalizovat stránky i pro IE6. Odpověď je jednoduchá. Tento prohlížeč používá celosvětově cca 11% uživatelů. U stránky s 10 000 přístupy denně je to 1100 lidí a to rozhodně není zanedbatelné množství. Proto lze považovat stránku, které se nezobrazuje korektně v nejrozšířenějších prohlížečích, za velký problém. V příloze 1 je aktuální rozdělení prohlížečů mezi uživatele na celém světě, v příloze 2 v České republice.
10
2.2.1.3. Použitelnost Použitelnost je spíše doporučením než technickou zásadou, ale s technikou zpracování přímo souvisí. Pokud je web použitelný, nečiní uživatelům problém najít informaci, pro kterou přišli. Informaci by měli najít v rozumném čase a bez velkého přemýšlení. Bez složitého uvažování by též měli být schopni identifikovat jednotlivé odkazy, kam směřují, kde se nachází menu a další ovládací prvky či informace. 2.2.1.4. Přístupnost Pokud tvrdíme o stránce, že je přístupná, znamená to, že je uzpůsobena i pro návštěvníky s určitou formou postižení. Může se jednat např. o barvoslepost, nevidomost či hluchotu. Tato přístupnost se může dále týkat návštěvníků pracujících ve zhoršených podmínkách (ovládání webu bez myši, na mobilním zařízení a dalších). Pokud budeme dbát přístupnosti, vycházíme těmto lidem vstříc maximální možnou mírou. Abychom měli stránky přístupné i pro tyto skupiny návštěvníků, je nutné důsledně dodržovat pravidla přístupnosti 1 . Obsahem těchto pravidel jsou zejména požadavky na alternativní texty k netextovým prvkům na stránce, dobrá orientace i bez použití obrázků a barev a dostatečné strukturování webu značkami. Dodržování těchto norem je z mého hlediska etické, funkční a nijak výrazně neztěžuje samotný vývoj. Výsledkem může být web, se kterým si bez problémů poradí i hlasové moduly pro nevidomé. Bude se v něm snadno orientovat i člověk, který je barvoslepý. Projdeme ho jednoduše bez myši nebo si ho zobrazíme funkčně na telefonu. 2.2.1.5. Layout Volba druhu layoutu je zásadní pro výslednou podobu stránek. Tato problematika je natolik rozsáhlá, že zde není prostor pro přesný popis techniky tvorby jednotlivých layoutů. Jako základ pro orientaci postačí názvy (odkazují na TAGy nebo na techniku, kterou využívají). Názory, jak dělit layouty webu jsou poměrně rozmanité, nicméně toto základní členění splňují všechny layouty [2]. a) Tabulkový b) Rámcový c) CSS layout
1
Pravidla přístupnost dostupné například na této webové stránce http://www.pravidla-pristupnosti.cz/
11
Tabulkový layout je poměrně starý přístup k návrhu webu. Jeho výhodou je, že se dá relativně jednoduše a rychle stylovat (dříve byl nejběžnější dvou nebo třísloupcový layout). Na složité grafické návrhy se tento layout moc nehodí, špatně se s ním pracuje. Mezi další nevýhody patří v některých prohlížečích vykreslování tabulky až poté, co je zcela načtena. Rámcový layout je vcelku zastaralou technikou, které se používá velice výjimečně. Problémový je zejména tisk, indexování roboty, zobrazování na mobilních zařízeních a v neposlední řadě se i stěží graficky upravuje. CSS layout je v současné době nejmodernější, nejaktuálnější a nejčastější přístup k layoutu. Kombinuje rychlost, úspornost a logickou strukturovanost kódu [3]. Při změně vzhledu není nezbytně nutný zásah do HTML kódu. Pro tvorbu webu je doporučován zpravidla tento layout, málokdy je výhodnější použít některý z předešlých. 2.2.1.6. Mapa webu Tato sekce by měla být součástí každého webu a to hned z dvou důvodů. Uživatel se může podívat na strukturní členění stránek a získat tak lepší přehled o tom, kde co najde. Druhý důvod je významově orientovaný na funkci vyhledávačů, vyhledávačům pak při procházení (crawlingu) daného webu stačí přijít do této sekce a získat tak seznam celého webu k bezproblémovému indexování. Mapa webu by měla být nejen funkční (pro vyhledávače) ale i přehledná (pro uživatele). 2.2.1.7. Robots.txt, Sitemap.xml Textový soubor robots.txt slouží k ovlivnění indexování webu robotem (vyhledávačem). Můžeme zde nadefinovat, kam se má robot prioritně dívat, a naopak kam se vůbec dívat nemá. „Tento soubor by měl vždy existovat, i když bude prázdný. Jinak dojde při každém pokusu o stažení tohoto souboru k vyvolání chybové stránky, což zbytečně překáží v chybovém logu. Pokud by pokus o stažení souboru skončil chybou serveru (stavový kód 500), může dojít k vyřazení všech stránek z indexu vyhledávače.“ [4] Oproti tomu sitemap.xml je výčtem stránek webu v jazyce XML o přesné struktuře2. Tento soubor není nutné vytvářet, ale taktéž pomáhá při indexaci.
2
Přesnou strukturu tohoto souboru včetně popisu jednotlivých značek můžeme nalézt na http://sitemaps.org/protocol.php
12
2.2.1.8. Favicon Jedná se o ikonku, kterou můžeme pozorovat například u záložky otevřené stránky, v oblíbených položkách webového prohlížeče nebo v rámci zástupce na ploše. Bývá ve velikostech 16x16 pixelů ve formátu ICO, ale lze ji definovat i v jiných formátech jako je v PNG nebo JPG. Pokud bude ikona umístěna v rootu webu a bude se nazývat favicon.ico, není třeba na ni speciálně odkazovat. Používání ikonek je účelné, dobře vypadá, napomáhá uživatelům v orientaci a tvoří poznávací znamení webu. 2.2.1.9. Velikost webu Poměrně důležitým faktorem je samotná velikost stránek. A to nejen z pohledu uživatele, který nerad vyčkává při načítání stránky, ale i z pohledu vyhledávače. Jako maximální velikost webu se udává 100 kB, optimálně pak 40 kB. Vyhledávače preferují stránky úsporné na velikost. V případě, že je stránka příliš veliká, robot může z důvodu příliš dlouhého načítání odejít. Pokud chceme velikost stránek zmenšit, pak je vhodná komprimace obrázků, skriptů a případně i rozdělení stránek na menší celky.
2.2.2. Použitý značkovací jazyk a styly Tato problematika je velice rozsáhlá. Na použití XHTML 1.0 nebo HTML 4.01 je poměrně dost názorů. Ve výsledku není, až tak důležité v jakém jazyce je web nakódován, ale zda je v něm nakódován správně. O HTML 5 není účelné prozatím hovořit, je implementován pouze u několika nejnovějších prohlížečů. Ve svých závěrech budu v této kapitole vycházet z použití značkovacího jazyk XHTML1.0, který používá celosvětově více než 60% webů3.
Obrázek 1 - Podíl jednotlivých značkovacích jazyků na webových stránkách. Zdroj: Powermapper.com 3
Zdroj: http://try.powermapper.com/demo/statsversions.aspx
13
2.2.2.1. Druhy XHTML Při použití XHTML máme na výběr ze tří DTD a) Strict b) Transitional c) Frameset XHTML Strict 4 omezuje použití některých značek kvůli oddělení formy od obsahu, forma se přesouvá do kaskádových stylů (CSS). XHTML Transitional5je uzpůsoben pro přechod mezi HTML a XHTML, jedná se o přechodovou vrstvu. Není tak přísná, co se týče zákazu používání značek definujících formu. XHTML Frameset6dovoluje použití rámů pro rozdělení okna na dvě a více části. Nejvýhodnější a formálně nejsprávnější bývá až na výjimky používaní DTD XHTML Strict. Každá změna formální podoby stránek bude jednodušeji a rychleji proveditelná díky použití CSS. 2.2.2.2. Validita Pokud řekneme o stránce, že je validní, znamená to, že splňuje syntaktická pravidla daná svým DTD. DTD je soubor pravidel, oproti kterým lze stránku validovat7. Těchto pravidel je celá řada a je dobré se jich držet. Vyhneme se tak pochybné interpretaci stránky prohlížečem nebo vyhledávačem. 2.2.2.3. Správné strukturování značek Správné umisťování značek do dokumentu je jedním ze základních kamenů problematiky zvané SEO. Zásluhou dobře posouzeného obsahu prohlížečem je používání a správné začlenění značky. Samozřejmě s adekvátním počtem výskytů. Příklad dobře navržené struktury by mohl vypadat takto:
4
DTD XHTML 1.0 Strict dostupný zde:http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML-1.0Strict 5 DTD XHTML 1.0 Transitional dostupný zde: http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML1.0-Transitional 6 DTD XHTML 1.0 Frameset dostupný zde: http://www.w3.org/TR/xhtml1/dtds.html#a_dtd_XHTML1.0-Frameset 7 Otestovat stránku lze např. na stránkách konsorcia W3C http://validator.w3.org/
14
Nadpis webu
Nadpis kapitoly
Obsah kapitoly
Další odstavec kapitoly
Podnadpis kapitoly
- Výčet bodů závěru kapitoly
- Výčet bodů závěru kapitoly
- Výčet bodů závěru kapitoly
Název další kapitoly na stránce
Obsah další kapitoly
2.2.2.4. Výstupy na jednotlivých zařízeních Abychom zajistili specifický výstup pro zařízení typu počítač, tiskárna nebo mobilní zařízení, lze využít vlastnost kaskádových stylů. Ty nám umožňují rozlišit, pro které zařízení je daný styl určen. Existuje 10 typů 8 různých zobrazovacích scénářů. V praxi jsou k vidění ve většině případů jen tyto: a) Screen – určený pro výstup na obrazovce počítače b) Projection – určený pro prezentace nebo výstup na projektoru c) Print – určený pro tisk (měl by být úsporný jak barevně, tak obsahově,ale přehledný)
2.2.3. Použité technologie a jejich vliv na funkčnost Každá webová stránka používá určité technologie, které zásadně ovlivňují její funkčnost, použitelnost a bezpečnost. 2.2.3.1. Pěkné adresy Velké množství dnešních webů používá tuto technologii. Důvodů je několik. Vcelku jednoduše se tato funkcionalita vytváří a je efektní a funkční. Uživatel nechce zkoumat nepřehledný tvar adresy, ale na první pohled jasně vidět, kde se nachází.
http://www.spatnyweb.cz/index.php?kategorie=prvni&subkategorie=druha (špatně) http://www.dobryweb.cz/clanky/kategorie/prvni/druha (dobře) 8
Kompletní přehled pro CSS verze 2 lze nalézt zde: http://www.w3.org/TR/CSS2/media.html
15
2.2.3.2. Používání sessions a cookies V této problematice mnoho programátorů chybuje. Tím může sobě i uživateli způsobit poměrně velké nepříjemnosti. Zásadní rozdíl mezi cookies a sessions je ten, že cookies se ukládají v prohlížeči (pokud to prohlížeč umožní, tuto funkcionalitu lze ve většině prohlížečů vypnout a zapnout) a sessions se ukládají na serveru. Cookies si tedy může kdokoliv přečíst, sessions nikoli. Špatné použití může způsobit jak bezpečností, tak funkční problém. Uvedu dva příklady špatného použití se správným řešením. a) Informace, zda je uživatel přihlášen (v horším případě i s heslem a dalšími osobními údaji) se uloží do cookies – v tomto případě se používají jedině sessions, v případě cookies může jakákoliv cizí osoba se základními znalostmi této problematiky získat citlivé údaje nebo se dostat na zabezpečenou stránku bez oprávnění b) Informace, zda uživatel vyplnil anketu se ukládá do cookies – řešení pomocí cookies je možné, ale nikoliv dostačující. Pokud uživatel vypne cookies, může hlasovat v anketě bez problémů i víckrát. Je vhodné tuto situaci ošetřit ukládáním IP adresy do databáze. Tuto situaci u nepřihlášených uživatelů nelze řešit se 100% úspěšností.
2.2.4. Interaktivní prvky Poslední roky prodělávají velký rozvoj technologie, které umožňují stránku různými způsoby vizualizovat. Ať už se jedná o grafické efekty nebo o funkce, které umožňují modifikovat obsah stránky s novými daty bez znovunačtení stránky. Jedná se zejména o Flash (jeho málo rozšířenou obdobu Silverlight) nebo Javascript s asynchronní výměnou dat se serverem tzv. AJAXEM. Další obrovský rozvoj proběhl na poli sociálních služeb (zejména Facebook, Twitter nebo Youtube). Přirozeně na to zareagovali tvůrci stránek se snahou integrovat ve větší či menší míře tyto služby i na své stránky. 2.2.4.1. Flash Flash je, jednoduše řečeno, prostředí pro snadnou tvorbu animací, aplikací, prezentací či webových stránek. [5] Je důležité uvědomit si, že tato technologie si vybírá svou daň ve formě vyšší zátěže na počítač. Přesto, že jsou poslední dobou snahy tento problém řešit delegováním některých výpočtů na grafickou kartu, ne všechny aplikace jsou tímto způsobem optimalizovány. Řešit Flashem celou stránku bývá účelné 16
jen u některých webů (menšího rozsahu). Např. osobní stránky umělce nebo filmu. Mimo webové stránky se často používá Flash na drobné aplikace, hry, bannery a další, kde exceluje na celé čáře. Problémem je stále indexace stránek, napsaných kompletně ve Flashi, vyhledávači. Vyhledávače se snaží procházet obsah, ale nemůžou na něj nijak odkázat. Pokud řešíme cokoliv na stránce ve Flashi, je nutné tvořit alternativní obsah pro uživatele, kteří ho nemají nebo nemohou mít nainstalován. 2.2.4.2. Javascript Jedná se o skriptovací jazyk, který ve svém jméně obsahuje slovo Java, s tou však nemá nic společného. Tento jazyk je poměrně dlouho známý, nicméně jeho význam vzrůstá až v posledních letech. Tuto technologii trápí v prohlížečích pomalost při složitých operacích. Naštěstí se výrobci prohlížečů snaží své Javascriptové enginy optimalizovat. Javascript je výborná technologie, které nám může být zejména v kombinaci s AJAXEM prospěšná. Pomůže při tvorbě „vychytávek“, například různých druhů našeptávačů, nebo automaticky rotujících obrázků. Pokud se rozhodneme využít služeb tohoto jazyka, je nutné jako u Flashe, počítat se situací, kdy uživatel nedisponuje podporou pro tuto technologii. Pokud má uživatel vypnutý Javascript, je nutné ošetřit tento problém takovým způsobem, aby to v ideálním případě uživatel nijak nezaznamenal. 2.2.4.3. Integrace sociálních sítí Sociální síť Facebook nám umožňuje integrovat některé funkcionality do našich webových stránek, které mohou být dobrou funkční nebo marketingovou pomůckou. Přihlašování na naše stránky pomocí FB účtu se jeví jako zajímavá volba. Nicméně jen jako doplňkový způsob, protože ne každý uživatel disponuje FB účtem. Dále máme možnost integrovat tlačítka I like it. Uživatel klikne a na Zdi svého profilu se zobrazí, jestli se mu daná stránka líbila a to vidí i jeho přátelé. Další možností je Fanbox jako box, který vložíme na naše stránky. Uživatelé vidí, komu se daná stránka také líbí, kolika lidem se líbí a jaké jsou poslední novinky na zdi fanouškovské stránky. Pluginů je celá řada. Jejich umisťování na stránky je nutné dobře zvážit, abychom nedávali plnou funkcionalitu webu jen lidem s Facebook účtem.
17
Twitter nám umožňuje sdílet odkaz na jakoukoli zajímavou stránku jedním stisknutím tlačítka. Případně můžeme vytvořit profil stránky, psát novinky a integrovat si třeba na partnerské weby box, kde se tyto novinky budou vypisovat. Youtube je síť, kde probíhá sdílení videí. Dá se toho poměrně šikovně využít. Například tímto způsobem, na server vložíme video propagující náš produkt, zároveň ho vložíme na své stránky. Přehrávání delšího videa je pro náš server poměrně náročně (při velkém počtu uživatelů), u takto vloženého videa přes Youtube tento problém delegujeme na servery Googlu (majitele Youtube). Lidé se tedy k našemu videu mohou dostat nejen přes naše stránky ale i přes stránky Youtube, který má obrovskou návštěvnost9. V případě, že je video zajímavé, uživatelé Youtube ho mohou sdílet na Facebooku, Twitteru a dalších sociálních sítích. Tomuto efektu se říká virální marketing a je to tzv. marketing zdarma.
2.2.5. Zabezpečení Jakýkoliv web, kde se zpracovává vstup od uživatele v případě POST nebo GET metod, je nutné adekvátním způsobem zabezpečit. V tomto případě zahrnujeme pouze výše zmíněnou bezpečnostní problematiku a problém zabezpečování adresářů. Použití firewallů není tak docela podstatou webového auditu. Důležité je správné nastavení serveru specialistou. Další častou chybou bývají špatně ukládaná hesla, která poskytují útočníkovi poměrně zajímavý cíl. V následujících odstavcích se budu stručně zabývat těmi nejběžnějšími chybami, které jsou na stránkách běžně k vidění. Cross-sitescripting (XSS) Princip tohoto útoku spočívá v podstrčení kódu do webu, který je následně interpretován jako HTML nebo Javascript. Podstrčením Javascriptového kódu může útočník získat citlivá data o dané osobě. Řešení spočívá v důsledné kontrole jakýchkoliv vstupů od uživatele, které jdou následně na výstup. Cross-siteRequestForgery (CSR) Další poměrně známá metoda útoku je založena na nechtěném volání jedné stránky ze stránky cizí. Vše demonstruji na příkladu. Když jsme přihlášeni např. 9
Pravděpodobně kolem 2,5 milionu návštěvníků měsíčně viz http://www.ct24.cz/media/80823-pocetuzivatelu-ceskeho-youtube-se-za-rok-zdvojnasobil/
18
v našem redakčním systému (útočník ho zná, ví, jakým způsobem se volají například funkce pro smazání uživatele) a máme oprávnění na smazání určité osoby, stačí útočníkovi, aby nás donutil (například v e-mailu) zobrazit obrázek, který bude mít jako zdroj uvedenou adresu na smazání uživatele. Obrana spočívá buď v kontrole hlavičky referer (nespolehlivé, prohlížeče ji nemusí přenášet) nebo v přiložení tokenu (nějakého náhodného řetězce), který se bude odesílat spolu s formulářem pro odstranění uživatele a zároveň se uloží do sessions. Při samotném odstranění uživatele pak zkontrolujeme, zda token odpovídá. Tím zajistíme, že požadavky budou pocházet výlučně z našich stránek. SQL Injection Jak již název napovídá, jedná se o podstrčení části sql kódu např. pomocí políčka jméno, nebo heslo u přihlašování do aplikace. Pokud se v databázi používá tento příkaz: SELECT * FROM users WHERE username = ‘$a‘[6] Můžeme pomocí proměnných do $a i do $b podstrčit kód například takto SELECT * FROM users WHERE username = ‘1‘ OR ‘1’ =’ 1’ [6] Obrana je jednoduchá a spočívá v důsledném escapování všech řetězců, které směřují od uživatele do databáze. Možných bezpečnostních problémů a druhů útoků je samozřejmě celá řada, nicméně výše uvedené jsou nejběžnější a velice často opomíjené.
2.3. Grafické ztvárnění webu Při grafickém návrhu bychom měli dbát několika pravidel, která mohou usnadnit život nejednomu uživateli. Kvalitní design webu by měl být přehledný, barevně přístupný (pro uživatele, kteří mají problémy se zrakem), dostatečně kontrastní a měly by být používány převážně bezpatková písma. Samotnou grafiku je poměrně obtížné hodnotit vzhledem k tomu, že se jedná o subjektivní názor. Je tedy vhodné oslovit více lidí a zjistit, jak se daná grafika líbí právě jim.
19
2.3.1. Barvy Barvy bychom měli volit střídmě. Text umístěný na pozadí by měl být vždy kontrastní 10 a písmo čitelné za každé situace při nejrůznějších kalibracích monitoru. Web by měl být laděn do sady barev. Barevná paleta by měla být uzpůsobena tak, aby uživatelé, kteří jsou barvoslepí nebo slabozrací nebyli příliš limitováni, tj. důležité je nespoléhat se na barvy vůbec (nepoužívat zvýrazňování barvou namísto tučných formátování atd.). [7]
2.3.2. Intuitivnost Každý uživatel by měl nekompromisně a za každé situace vědět, kde se na stránkách nachází (v jaké sekci), kde je navigační menu, okamžitě poznat odkaz, ideálně poslední modifikaci stránky. Tato problematika souvisí i se správným označováním odkazů. Např. odkaz s názvem Index je pro většinu uživatelů nestravitelný, naproti tomu odkaz Hlavní strana je krystalicky jasný.
2.3.3. Optimalizace obrázků Všeobecně u webových stránek by mělo být zásadní slovo střídmost. Výjimky mohou tvořit weby kreativců či umělců. Cílem grafiky je uživatele zaujmout a neodradit. Optimalizace obrázků a volbu vhodných formátů nelze opomíjet. Všeobecně se lze řídit tímto rozdělením: JPG „Formát JPG (též JPEG) je vhodný pro ukládání fotografií a obrázků s velkou barevnou hloubkou. JPG neumožňuje dělat průhledné nebo animované obrázky. Ukládá se do souborů s příponou .jpg nebo jpeg. JPG používá ztrátovou kompresi, to znamená, že část informace vypouští. Metoda provedení tak, aby to lidské oko pokud možno nepoznalo. Míru této komprese lze nastavit v grafickém programu.“ [8] GIF „GIF také používá kompresi, ale neztrátovou, takže jsou tyto soubory relativně větší než JPG, ale zato jsou přesné (zachovávají barvy a kontury). Existuje zde ale
10
Pěkný nastroj na otestování čitelnosti pomocí barvy písma a barvy pozadí je k nalezení např. zde: http://www.sovavsiti.cz/kontrast/
20
určité omezení, poskytuje maximálně 256 barev. Jedna z barev se může označit jako průhledná (tu prohlížeč potom nezobrazí), gify též podporují animace.“ [8] PNG Jedná se o poměrně nový formát obrázků na internetu. Podporuje částečnou průhlednost, dají se s ním řešit složitější grafické efekty. PNG je zamýšlen jako náhrada komerčního formátu GIF. Je bezztrátový podobně jako GIF a hodí se mimo jiné i pro fotografie určené k dalšímu zpracování.
2.3.4. Rozlišení Každá webová grafika by měla respektovat určité rozlišení (v ideálním případě všechny rozlišení, mimo extrémů, ale to bývá dost obtížně proveditelné). Standardně se weby optimalizují pro rozlišení 1024x768 a vyšší. Zmíněné a vyšší rozložení používá přes 90% uživatelů. Oprávněnost této skutečnosti dokládá i Obrázek 2.
20% 18% 16% 14% 12% 10% 8% 6% 4% 2% 0%
Obrázek 2 – Zastoupení jednotlivých rozlišení v ČR. Zdroj: Toplist.cz, Únor 2011
2.4. Zhodnocení SEO a SEM Velký význam má SEO a SEM především pro vyhledávače. Jak v případě indexování obsahu, tak v případě řazení výsledků vyhledávání. Vlastní řadící algoritmy 21
vyhledávačů jsou tajné, nikdo přesně neví, jak vzorec pro výpočet pozice vypadá. Z toho vyplývá, že se můžeme pouze snažit vyjít vyhledávači vstříc některými obecnými zásadami tzv. SEO nebo většinou komerčním SEM. V následujících podkapitolách se budu zabývat otázkami optimalizace webových stránek pro vyhledávače a jejich možnou podporou pomocí placených marketingových služeb.
2.4.1. Vyhledávače Stránky zabývající se vyhledáváním jsou obecně jedny z nejnavštěvovanějších stránek na světě. Stovky milionů uživatelů denně hledá pomocí klíčových slov odkazy na stránky, které je zajímají. Vyhledávače jsou tedy poměrně mocné. Ony jsou ty nástroje, které velkou částí rozhodují o úspěchu nebo neúspěchu našich stránek. Mezi nejpopulárnější vyhledávače v ČR patří Seznam (cca 40% všech vyhledávání) a Google (CZ i SK cca 43 % všech vyhledávání).
Obrázek 3 - Graf vývoje podílu jednotlivých vyhledávačů v ČR za období od 01.01.2011 - 08.03.2011. Zdroj:
http://vyhledavace.chose.cz/
Zatímco v České republice dominuje český vyhledávač Seznam a sekundujeme mu Google, ve světovém měřítku má Google cca 70%, Yahoo cca 14% a Bing cca 10% podíl na vyhledávání. 11 2.4.1.1. Princip vyhledávačů Vyhledávače jsou v podstatě sady aplikací, které obstarávají sběr dat, indexování a poskytování více či méně relevantních výsledků (odkazy). Každá firma tají své
11
Data z července 2010, zdroj: http://www.hitwise.com/us/press-center/press-releases/google-searchesjun-10/
22
mechanismy a to zejména algoritmy hodnotící jednotlivé stránky. Ale i přes to mají všechny moderní vyhledávače základ podobný, viz. Obrázek 4 umístěný níže. Celý proces u jednotlivých vyhledávacích enginů je poměrně složitý a pro auditora není nutné tento proces ovládat. Důležité je mít dobrý přehled o indexování a řazení.
Stahování
Indexované stránky
Distribuce hotové databáze
Dotaz na www.interval.cz
Obrázek 4 – Zjednodušené schéma principu vyhledávačů
23
2.4.1.2. Indexování obsahu Procesem indexování je myšlen sběr dat o jednotlivých stránkách a ukládání do databáze. Robot, který prochází weby (crawler), potřebuje nějaké vodítko, aby věděl, že vznikla nová stránka. Toho se dá docílit tak, že se na některou již indexovanou stránku vloží odkaz na tuto novou stránku a robot ji při dalším průchodu zaindexuje automaticky. Další možností je vyhledávač nasměrovat a doporučit mu, aby se na danou stránku podíval. Tuto funkcionalitu má většina vyhledávačů. U Googlu můžeme dokonce vyhledávači dát k dispozici odkaz na soubor sitemap.xml zmíněný výše, tím mu usnadníme práci a on snadněji naše stránky zaindexuje v kompletní podobě. Pro správné proindexování stránek je vhodné, aby na každou ze stránek vedl odkaz. V opačném případě by robot nemusel existenci dané stránky vůbec odhalit. Roboti pravidelně přeindexovávají stránky v různých intervalech, které nelze určit. U souboru sitemap.xml lze definovat interval, nicméně jedná se jen o doporučení a robot se jím nemusí vůbec řídit. 2.4.1.3. Řazení výsledků vyhledávání Každý vyhledávač tuto problematiku řeší více či méně podobným způsobem jako ostatní. Při indexování dochází k určení ohodnocení stránky ze strany vyhledávače. Tento proces se řídí různými faktory, o kterých se zmíním v dalších kapitolách. „Obecně se dá říci, že čím více se hledaná slova na stránce vyskytují a čím mají významnější pozici (titulky, nadpisy), tím je stránka řazena výše. Sleduje se i text odkazů mířících na stránku, zda obsahuje hledané slovo.“ [9] Dalším faktorem jsou takzvané ranky, které reprezentují věrohodnost nebo důležitost zdroje. Ta se odvíjí od množství zpětných odkazů. Význam odkazů se taktéž měří rankem. Google používá svůj Google Page Rank (hodnoty 0 – 10, čím větší číslo, tím věrohodnější zdroj), Seznam používá Seznam Rank tzv. S-rank (hodnoty 0 – 100, čím větší číslo, tím lepší). Rank své stránky se dá kontrolovat na různých webech12.
12
Například na http://ranky.cz/
24
2.4.2. SEO Optimalizace pro vyhledávače je dnes velice moderní marketingový pojem. Nabízí ho téměř každá firma zabývající se webovými stránkami, ale ne každá už přesně ví, co má pro její dosažení udělat. Nejde jen vylepšit stránku tak, aby ji vyhledávač kompletně a správně zaindexoval podle našich představ, ale slouží i ke zlepšení pozice ve vyhledávačích. V několika následujícíh podkapitolách se pokusím shrnout základní principy SEO13. 2.4.2.1. Důležité prvky na stránce Při tvorbě stránky je důležité vědět, které prvky jsou důležité pro vyhledávače a které nikoli. S postupem času vyhledávače měnily svoje hodnocení těchto prvků zejména z důvodu podvodných praktik. Faktory, které zmiňuji, se nazývají on-page (jsou na stránkách) a off-page (figurují mimo stránky). Tabulka 1 shrnuje základní prvky stránek včetně důležitosti. Co vyhledávače sledují
Jak je to v HTML
Důležitost (váha)
titulek
text titulku
obrovská
klíčová slova
<meta name=keywords
značná,
content="slovo, slovo">
někdy žádná (Google)
<meta name=description
různá
popis (description)
content="Stručný popis"> nadpis 1. úrovně
Nadpis
značná
ostatní nadpisy
Nadpis
sporná
začátek stránky
Několik prvních slov ...
větší než malá
adresa URL
jméno souboru včetně cesty
různá
text odkazů mířících na tu
href="adresa">text u některých vyhledávačů
stránku z jiného serveru
odkazu
obrovská (Google, Jyxo)
alty u obrázků
![zástupný text]()
malá
text stránky
text
malá
používání
značek
pro <strong>
malá
formátování textu katalogový popisek
13
co
zadáte
do
případného různá
(pouze
na
V. Janouch definoval tento vztah SEM = SEO + PPC + placené vyhledávání v jiných zdrojích
25
Validní kód
spřízněného katalogu
Seznamu)
Well-formed
prakticky
žádná,
ale
správnost je důležitá pro roboty Tabulka 1 – Přehled prvků na webu a jejich sledovanost vyhledávači (Zdroj: modifikovaná tabulka z [9])
Z uvedené tabulky vidíme, že ne všechny prvky mají pro vyhledávače stejný význam. 2.4.2.2. Klíčová slova Obecně platí, že na stránkách by se měla vyskytovat klíčová slova, pro která provádíme optimalizaci v dostatečné frekvenci (ne však za každou cenu, přílišné opakování klíčových slov působí podivně). Pro volbu správných klíčových slov je nutné provést analýzu produktu, trhu a vyhledávačů. Při analýze produktu je nutné stanovit klíčová slova, která ho jasně a výstižně definují. Dále je dobré zjistit, na jaká slova jsou optimalizovány konkurenční stránky a kdo na ně odkazuje. Poměrně dobrým nástrojem je Yahoo! Site Explorer 14 . Pro samotnou analýzu klíčových slov je výborný nástroj Google Keywords Analyzer15, který dokáže z webu nebo klíčových slov určit to nejvhodnější na základě statistik ze svého vyhledávače. Vše je vyvedeno v pěkném a přehledném rozhraní, Google nám provede analýzu klíčových slov a dá nám k dispozici i nejrůznější statistiky. Při volbě klíčových slov platí několik zásad, které je vhodné dodržovat: 1) Optimalizovat na slovní spojení dvou až pěti slov 2) Neoptimalizovat na příliš obecné spojení (velká míra opuštění) 3) Neoptimalizovat na příliš konkrétní spojení (nikdo by takové slovo nemusel např. vůbec hledat) 4) U B2B používat žargon 5) Využívat varianty slov, synonyma, antonyma
14
http://siteexplorer.search.yahoo.com/
15
https://adwords.google.com/select/KeywordToolExternal
26
2.4.2.3. Zpětné odkazy a copywriting Zpětné odkazy jsou jedny z nejmocnějších technik pro zvyšování pozic ve vyhledávači. U zpětných odkazů je sledován nejenom jejich počet, ale i kvalita, tj. odkud který odkaz je a jak je daná stránka ohodnocena. Nejvyšší význam má zpětný odkaz ze stránek, které jsou určitým způsobem obsahově příbuzné s webem, na který odkazují. Ideálním případem je, když na naše stránky někdo odkazuje sám od sebe. To se nám však rozhodně nepoštěstí, pokud jsme s webem na počátku. Určitě se nevyplatí umisťovat odkaz na stránku na tzv. link farmy. Vyhledávače zdokonalují techniky rozpoznávaní těchto webů a mohou nás penalizovat. Poslední dobou se stává populární copywriting. Jedná se o činnost, kdy specialista na texty na internetu píše takové texty, které mají čtenáře přesvědčit k určité činnosti (kliknout na odkaz, nakoupit). Texty jsou nejdůležitějšími prvky na stránkách, ať už se jedná o text na vlastních stránkách nebo text reklamního proužku, vždy by měl být dostatečně kvalitní a to jak z pohledu spisovatele, tak marketéra, vyhledávače a návštěvníka.
2.4.3. Reklama na internetu SEM je zkratka Search Engine Marketing, do které se podle některých řadí také SEO a jakákoliv reklama na internetu. Marketingových prostředků pro zviditelnění stránek existuje celá řada: a) Plošná reklama a. Reklamní proužky tzv. bannery b. Vyskakovací okna pop-up c. Tlačítka b) Zápisy do katalogů c) Přednostní výpisy d) Kontextová reklama e) Behaviorální reklama f) PPC systémy g) Emailing h) Affiliate
27
Plošná reklama se zobrazuje všem ve stejné formě. Objevuje se ve formě grafických, textových nebo animovaných proužků na stránkách. Další možností jsou vyskakovací okna. Tato metoda naštěstí mizí, prohlížeče ji dokážou blokovat. Příčina je jednoduchá, tato forma reklamy nejvýrazněji obtěžuje návštěvníka. Dalším způsobem zobrazování jsou různá tlačítka nebo odkazy. Zápisy do katalogů se myslí zápisy do oborových, firemních a dalších katalogů. Uživatelé sem chodí, aby našli např. zedníka v Benešově. Přednostními výpisy se rozumí např. přednostní (většinou placený) výpis odkazu na nějakou stránka, která se bezprostředně týká např. zedníka v Benešově. Kontextová reklama je jakákoli z předchozích akorát s tím rozdílem, že se zobrazuje v kontextu buď s obsahem stránky, vyhledávaným slovem nebo jen v určité kategorii. Může se jednat o tučné nebo podtržené slovo v textu, které je odkazem na určitou stránku. Forem této reklamy je poměrně dost. Kontextová reklama je i PPC reklama, která je v posledních letech velice populární. Behaviorální reklama je jakási inteligentní reklama, která analyzuje dříve navštívené webové stránky a na základě našich preferencí se nám snaží zobrazit tu, která by nás mohla nejvíce zajímat. PPC reklama je na internetu poměrně nová. Její výhody jsou nesporné, poměrně nízká cena a velmi přesné cílení. Její princip spočívá v zobrazování (v kontextu) např. s hledaným slovem, kategorií článků, webem a další. PPC reklama je známá především z vyhledávačů, kde mimo relevantních výsledků zobrazuje také placené odkazy, které jsou jako placené označeny, bývá jich jen několik. Nespornou výhodou této reklamy je, že za reklamu neplatíme do té doby, dokud nedojde ke kliknutí na odkaz. Mezi nejznámější PPC systémy patří celosvětově Google Ad Words, Yahoo! Search Marketing a Microsoft ad Center. U nás se těší popularitě systém Sklik, ETARGET a adFOX. Emailing je činnost, kdy se informuje uživatel o nové službě, produktu nebo o stránce prostřednictvím emailu. Emailové adresy lze získat od uživatelů např. registrací, nebo přihlášením k odběru zpravodaje. Důležité by mělo být respektování platných zákonů dané země. 28
Affiliate je partnerský program, kdy my jako provozovatel e-shopu nabízíme provize za každého návštěvníka, který přišel z partnerských stránek a provedl objednávku (provedl konverzi).
2.5. Analýza návštěvnosti Informace o návštěvnících jsou důležitou součástí auditu jakéhokoliv webu. Pokud víme, jací návštěvníci přicházejí, odkud a co je nejvíce zajímá, můžeme jim web přizpůsobovat, přesněji identifikovat nejdůležitější místa, odkud přicházejí. Obecně se při analýze návštěvnosti používají dva typy nástrojů. A to nástroje webové (Google Analytics) a serverové, kde se čerpá z logovacích souborů za použití speciálního software (například jednoduchý Log Analyzer).
2.5.1. Analýza návštěvníků Při analýze samotných návštěvníků vycházíme z dat, která pro nás jsou zaznamenána nějakým programem. Obsah těchto dát bývá poměrně skromný. Nevyčteme z něj kolik let je návštěvníkům a podobné údaje, ale můžeme z něj vyčíst jiné, taktéž podstatné informace. Jako stěžejní se jeví přístupy uživatelů. Konkrétně odkud přišli, jak dlouhý čas strávili na které stránce, na co nejvíce klikali. U internetových obchodů je zajímá i statistika samotného nákupního procesu, kdy lze přesně vysledovat, ve které fázi nejvíce ztrácíme zákazníky.
2.5.2. Analýza zdrojů Hlavička referer protokolu HTTP nám umožňuje sledovat odkud k nám uživatelé přišli. Tato informace nám umožní zjistit, zda byla marketingová kampaň na daném webu efektivní, zda nám přivedla dostatek zákazníků. Další výhodou je, že je možné stanovit na který zdroj návštěvníků se zaměřit a pro něj web optimalizovat. Např. prostřednictvím reklamní kampaně nebo jiné formy spolupráce s daným webem.
2.5.3. Heat mapa webu V případě, že chceme zjistit, která část webu zákazníky nejvíce zajímá, která je hodně vytěžovaná, můžeme si statistiky vizualizovat prostřednictvím tzv. heat map. Na heat mapě je přehledně vidět, na které odkazy je nejvíce klikáno a to znamená, že se pohybují v nejširším okruhu zájmu návštěvníků). Mapa nám umožní vysledovat slabá místa webu, nebo slepé uličky navigace. Příklad heat mapy je na obrázku 5.
29
Obrázek 5 – Heatmapa v praxi. Zdroj: Myx.cz
2.5.4. Míra konverze U analýzy webové návštěvnosti se poměrně často sleduje míra konverze. Ta udává, kolik procent zákazníků provedlo námi chtěnou akci. U internetového obchodu to může být, kolik procent zákazníků si skutečně objednalo nějaký produkt. Míra konverze se dá poměrně dobře vysledovat při patřičném nastavení některého z analytických nástrojů. Pokud je míra konverze malá 16 , evidentně nabízíme špatné služby nebo je špatně prezentujeme, popřípadě k nám chodí uživatelé ze špatných zdrojů, kteří jsou na našem webu spíše náhodně než za konkrétním účelem.
2.5.5. Míra opuštění (Bouncerate) Míra opuštění definuje, kolik návštěvníků odejde z webu již po navštívení vstupní stránky. Vysoká míra je typická v případě, že inzerujeme na serveru irelevantní nebo klamavé informace. Taktéž může být vysoká míra opuštění spojena s nepřesvědčivým vzhledem stránek, který uživatele odradí hned na první pohled.
16
Podle zdroje [17] má většina drobných internetových obchodů v ČR konverzní poměr kolem 1%, Amazon nebo Expedia kolem 10%
30
Nástin míry opuštění u některých segmentů webů definuje Tabulka 2[10]. Segment Automobilový průmysl
Minimum 19%
Maximum 54%
Průměr 37%
B2C prodej
26%
46%
36%
B2C servis
16%
60%
38%
E-shopy
20%
86%
53%
Firemní weby
60%
87%
74%
Zdravotnictví
10%
75%
43%
Farmacie
18%
73%
46%
Informační weby
35%
63%
49%
Zábavní weby
28%
67%
48%
Zpravodajství
34%
78%
56%
Celkem průměr
27%
69%
48%
Tabulka 2 – Míra opuštění některých segmentů webu
Z tabulky je vidět, že v segmentu internetových obchodů je situace mnohdy žalostná. Pokud máme web, kde je míra opuštění např. 80%, je to jasný signál, že je zde obrovský prostor pro vylepšování. Uživatelé evidentně nechtějí mít se stránkou nic společného a je třeba věnovat větší úsilí formě, obsahu i případné reklamě.
2.5.6. Nástroje pro diagnostiku Při analýze je dobré používat špičkový software, který nám umožní bohaté nastavení a zároveň přehledné a jasné zobrazení požadovaných informací. Jako špička se u metody sběru dat pomocí Javascriptu považuje Google Analytics, který má výborné možnosti nastavení, export většiny dat a pěkné grafické zobrazení a navíc je k dispozici zdarma. Špičkový nástroj pro analýzu logovacích souborů na straně serveru je Deep Log Analyzer od firmy Deep Software. Při svých analýzách budu primárně používat Google Analytics.
2.6. Metodiky zvyšování výkonnosti webu Existuje celá škála metodik a postupů, pomocí kterých můžeme zvýšit míru konverze či obecně udělat web pro uživatele příjemnější. Obecně se dá říct, že se definují scénáře a pak se zkoumá, jak na ně uživatelé zareagovali. Z těchto výsledků lze pak určit, který scénář se jeví jako nejefektivnější. 31
2.6.1. Uživatelské testování Touto metodikou lze testovat nejen web, ale i třeba software. Proto je v praxi poměrně často k vidění. Princip je takový, že se vybere skupina lidí, může se jednat i o specifický výběr podle definované cílové skupiny. Pak se připraví testovací scénáře, kde se podrobně definuje, co budou lidé testovat, většinou se jedná o seznam postupů. Testeři zaznamenávají do protokolů, zda dosáhli požadovaného výsledku intuitivně, zda se jim zdálo všechno přehledné a jasné a jaké spatřili chyby. U této metodiky lze poměrně dobře odhalit skryté chyby, zobrazovací nepřesnosti apod.
2.6.2. Segmentace Segmentace je spíše technika pro zobrazování relevantnějších dat než samotná metodika. Pokud sledujeme data pomocí měřícího software jako je Google Analytics, často se stane, že data jsou zkreslena nežádoucím vlivem. Tímto vlivem může být příliv návštěvníků ze zahraničí, což způsobí výkyvy jak v návštěvnosti, tak ve vzorcích chování uživatelů, kteří nás zajímají. Tento problém řeší segmentace, která dokáže účinně oddělit uživatele, kteří jsou v okruhu našeho zájmu od uživatelů, o jejichž data nemáme zájem. Dobrým příkladem může být internetový obchod, který se specializuje na Středočeský kraj a Prahu. Nechá se předpokládat, že nás zajímají pro naše analýzy primárně data od uživatelů právě z tohoto kraje a ne z kraje Olomouckého. Nástroje pro měření přístupů většinou obsahují kvalitní nástroje pro účinnou segmentaci. Můžeme tedy filtrovat data podle našich preferencí a docílit tím přesnějších nebo lépe řečeno relevantnějších výsledků. Při aplikaci filtrů nemusíme vždy chtít filtrovat pouze podle oblastí, ze kterých uživatelé přichází, ale může nás zajímat chování nových/vracejících se zákazníků, dále můžeme filtrovat podle IP adres či jiných kritérií. Google Analytics nám dovoluje definovat i své vlastní segmenty, kde lze přesně vydefinovat danou skupinu a metriky.
32
2.6.3. A/B testování Při tomto druhu testování se porovnává, která z variant generuje vyšší míru konverze. Varianta může být například box s obrázkem vlevo, druhá varianta box s obrázkem vpravo. Těchto variant může být mnoho, ale je vhodné jich udělat jen několik, výsledky pak mají vyšší vypovídací hodnotu. Míra konverze se testuje tak, že mechanismus tohoto testování kontroluje, zda například uživatel klikl na odkaz, registroval se nebo se přihlásil k odběru newsletteru. Obecně se tato technika hodí na otestování reakcí uživatelů na nový vzhled dílčí nebo celkový, či na změnu rozložení webu. Pro testování je dobrým nástrojem Google Website Optimizer.
Obrázek 6 – Obrázek z testu na Google WebsiteOptimizer. Zdroj: Seooptimise.com
2.6.4. Testování s více proměnnými Tato technika je vhodná zejména pro weby s větší návštěvností17 a to z důvodu velkého počtu variant. Pokud chceme dosáhnout relevantních výsledků, musí být vzorek uživatelů dostatečně obsáhlý. Oproti předchozí technice je zde hlavním rozdílem kombinování. U A/B testování se testuje reakce uživatelů na jednu variantu z několika definovaných, u testování s více proměnnými se testují různé kombinace variací. Definují se jednotlivé díly kombinace, kdy jeden díl má několik variací. Pokud máme 3 díly a u každého dílu 3 variace, znamená to, že se bude testovat reakce uživatelů na 27
17
Google WebsiteOptimizer doporučuje alespoň 1000 přístupů za týden
33
různých kombinací. Testuje se opět míra konverze. Princip je stejný jako u A/B testování. Pro tuto metodiku testování se jeví vhodný, taktéž jako u předchozí metodiky, nástroj Google Website Optimizer.
2.7. Analýza výkonnosti e-shopu Oproti běžným webovým stránkám je nutné internetové obchody analyzovat z více hledisek. A to zejména analýzou prodejů, zákazníků a analýzou nákupního procesu. Míra konverze se sleduje často i u běžných stránek, nepovažuji ji tedy za výjimku u internetového obchodu. Jako u předchozích metodik zde máme u některých k dispozici nástroje, které jsou schopny takovou analýzu provádět a to zejména často citovaný Google Analytics.
2.7.1. Analýza zákazníků a prodejů Abychom byli schopni získávat informace o zákaznících, je nutné, aby byla objednávka podmíněna vyplněním kontaktních informací. Takové uživatele lze mnohem lépe segmentovat a generalizovat pro daný segment typické vzorce chování. Z údajů o zákaznících a údajů o prodejích lze snadno vyčíst např., který výrobek je nejpopulárnější mezi mladšími uživateli. To je hodnotná informace z pohledu marketingu. Takové výrobky je pak výhodnější inzerovat na serverech pro mladší skupiny uživatelů než na webech, které sdružují maminky. Na základě těchto údaje se pak dají generovat například statické ceny dopravy, tak aby se to v průměru vyplatilo. Informací, které lze vyčíst, je opravdu velké množství.
2.7.2. Analýza nákupního procesu Nákupní proces bývá dvojího typu a to jednokrokový nebo vícekrokový. Jednokrokový řeší způsob platby a dodání, dodací a fakturační adresu, případně poznámku na jedné stránce, někdy dokonce i na stránce s košíkem. Vícekrokový je zpravidla rozdělen do několika bloků: 1) Nákupní košík 2) Objednávka – osobní údaje 3) Objednávka – platební podmínky a doručovací údaje 4) Objednávka – právní podmínky 5) Objednávka – kontrola 6) Úspěšně provedená objednávka 34
Do těchto procesů je často zahrnuto přihlášení nebo registrace, které uživateli může dovolit zpříjemnit nákup tím, že ho nenutí pokaždé vyplňovat ty samé údaje opakovaně. Tato výhoda je vykoupena nutností se zaregistrovat, která může některé uživatele odradit v závislosti na tom, zda je registrace, resp. přihlášení povinné či ne. Z pohledu uživatele je také důležité uživatelské rozhraní, tj. zda je u každého políčka zřejmé, k čemu slouží. Dobře označené povinné položky, dobré informační sdělení při případně špatně vyplněných políčkách, nebo také indikátor, v jaké fázi objednávky se návštěvník nachází a zda se může vrátit např. o jeden krok zpět v případě, že udělal chybu. Google Analytics nám umožňuje definovat tzv. cestu k cíli. Zde je možné vysledovat, která část byla zákazníkům nejvíce nepříjemná. Jedná se o tu část, která má vysokou míru opuštění. U internetových obchodů se setkáváme často s problémem u dodacích či platebních podmínek (uživatele často odradí, pokud je doručení výrobku drahé) nebo u právních podmínek. Pomocí analýzy tohoto procesu lze odhalit slabá místa, která jsou pak odrazující. Zde platí dvojnásobně rčení, že nákupní proces je jen tak
silný,
jako
je
jeho
nejslabší
článek.
Obrázek 7 ukazuje, jak může vypadat samotná analýza, konkrétně její grafická vizualizace v Google Analytics.
35
Obrázek 7 – Schéma nákupního procesu. Zdroj: pouzitelnost-webu.cz
36
3. Analýza webových stránek vybraných internetových obchodů Pro praktické ověření metodik jsem vybral internetový obchod Světla a osvětlení18. Provedu komplexní audit zaměřující se zejména na technické náležitosti a optimalizaci pro vyhledávače. Při auditu je důležité se nesoustředit pouze na daný subjekt, ale provést i analýzu konkurence. Perfektní znalost konkurence může být klíčová pro vytipování oblastí rozvoje daného webu. V oblasti internetových obchodů jsou důležité i drobnosti. Ty pak mohou ve finále rozhodovat o úspěchu či neúspěchu obchodu.
3.1. Současný stav obchodu Internetový obchod se zaměřuje na prodej svítidel, žárovek a doplňkově několika druhů hodin. V sortimentu je celkově 233 produktů, které provozovatel nedrží na skladě, ale objednává až při objednávce s dodacím termínem do 15 dnů. Stránky jsou v provozu od října 2010 a k 30.3.2011 je v evidenci 13 objednávek. Tabulka 3 obsahuje základní statistické informace z nástroje Google Analytics. Sledovaný údaj Návštěvy
Hodnota 7 496
Zobrazení stránek
26 746
Stránky/návštěva
3,57
Míra opuštění
53,80 %
Prům. doba na webu
00:01:49
Podíl nových návštěv
86,05 %
Tabulka 3 – Základní statistické informace webu Světla a osvětlení
3.2. Stanovení hlavní konkurence Při identifikaci hlavních konkurentů jsem využíval vyhledávače Google a Seznam, po postupném zadání klíčových slov, na které je „optimalizován“ web, se podařilo identifikovat nejúspěšnější konkurenty dle pozice výsledku. Dále jsem použil aplikaci pro webovou analytiku Web Site Auditor a SEO Administrator. Jako nejvýznamnější jsem určil následující tři: 18
Dostupný na adrese http://www.svetlaaosvetleni.cz
37
•
http://www.svitidla-levne.cz/ (Svitidla-levne.cz)
•
http://www.svitidla.com/ (Svitidla.com)
•
http://www.svitidla-svetla-osvetleni.cz (Svitidla-svetla-osvetleni.cz)
3.3. Cílová skupina Cílovou skupinou jsou lidé starší 25 let pocházející z České republiky. Primárně pak lidé vylepšující si své osvětlení a sekundárně lidé, kteří zařizují nový být. U osob do 25 let nepředpokládám zvýšený zájem, protože většina těchto osob žije zatím s rodiči.
3.4. Výběr metodik testování Testovat budu internetové obchody metodikami, které jsem definoval v kapitole 2. Při analýze nebudu používat všechny definované metodiky ale pouze ty, které považuji za nejdůležitější z hlediska kvality zobrazení a úspěšnosti webu jako celku.
3.5. Analýza technických náležitostí V této kapitole se budu věnovat analýze všech technických norem, které by měly být samozřejmou součástí každého kvalitního webu. Analýze podrobím nejen předmět auditu, ale i jeho konkurenci. Pak budou vidět jasně rozdíly v kvalitě zpracování. Tato informace může být důležitým vodítkem pro následnou optimalizaci. Lze se z ní dozvědět, v čem je konkurence lepší nebo naopak horší, co je považováno za samozřejmost apod. V neposlední řadě je tato analýza důležitá kvůli samotným uživatelům, špatně napsaný web může být velkou brzdou úspěšnosti. Testovací prostředí Pro relevantnost informací uvádím běhové prostředí pro všechny testy a analýzy, které jsem prováděl. Operační systém byl použit Windows 7 SP1, internetové připojení ADSL 8Mbit/512Kbit a výchozí rozlišení obrazovky bylo nastaveno na1920x1080.
3.5.1. Obecné zásady Zde budu prověřovat zásadní aspekty webu, které je z velké části nutné respektovat a řídit se jimi. Dodržováním lze poměrně účinně omezit nežádoucí odliv návštěvníků právě díky špatným základům.
38
3.5.1.1. Znaková sada Všechny čtyři weby mají shodně definovanou správnou znakovou sadu UTF-8, stránky jsou i v UTF-8 uloženy a tak netrpí problémy se zobrazováním textu. 3.5.1.2. Zobrazování v jednotlivých prohlížečích Pro kontrolu zobrazování jsem použil jednotlivé prohlížeče, mimo Internet Exploreru jsem zvolil vždy nejnovější verzi. Kontrola tedy proběhla v prohlížečích Chrome 10, Safari 5, Firefox 4, Opera 11 a Internet Explorer ve verzích 6 - 9. Svetlaaosvetleni.cz V prohlížeči Chrome10 a Safari 5 dochází ke špatnému zobrazování obsahového bloku, který přetéká pod levý panel. V ostatních prohlížečích je vše v mezích normy (nepřesné pozicování, drobné rozdíly ve velikostech prvků nepovažuji za problém) až na Internet Explorer 6. Na webu jsou použity obrázky ve formátu PNG, který sice umí průhlednost, ale Internet Explorer 6 ji nedokáže interpretovat, takže obrázky jsou s bílým pozadím. V tomto prohlížeči také dochází v sekci Přihlášení uživatele k přetékání registračního boxu pod přihlašovací. V ostatních prohlížečích jsou ve stejné horizontální rovině. Svitidla-levne.cz Nezaznamenal jsem výraznější problém ani v jednom z prohlížečů. Svitidla.com Ve všech prohlížečích, mimo Internet Exploreru 6, jsem nezaznamenal výraznější problémy. V Internet Exploreru 6 přetéká prostřední obsahový box pod levý a pravý panel. Svitidla-svetla-osvetleni.cz Podobně jako předchozí obchod si zde většina prohlížečů se stránkami poradí bez problémů. Problémem je Internet Explorer 6, který zobrazuje špatně v jednotlivých kategoriích zobrazení typu seznam. Taktéž je v tomto prohlížeči špatně zobrazeno menu, a to jen s jednou položkou oproti správným šesti.
39
3.5.1.3. Použitelnost Testování použitelnosti by mělo být prováděno před samotným spuštěním stránek, u obchodu Svetlaaosvetleni.cz byl tento krok evidentně vynechán. Svetlaaosvetleni.cz Při procházení webu návštěvníka naplňuje pocit špatného řazení výrobků, zejména v levé části menu, kde jsou výrobky řazeny do jakýchsi nelogických kategorií. U nákupního procesu též není vždy jasné, co se po návštěvníkovi chce, na co má kliknout. Samotný proces přidávání zboží do košíku je však bezproblémový. Zarážející jsou některé nepřeložené pasáže u fáze objednávky. Například metody platby jsou uvedeny anglicky. Problémové je též horní menu, kde jsou špatně generovány odkazy v případě, že se nenacházíme na hlavní stránce. Tlačítko Přidat k oblíbeným taktéž nefunguje. Toto jsou věci, které mohou v uživateli iniciovat pocit nejistoty, zda je vše funkční nebo zda dělá vše správně a s největší pravděpodobností stránku brzy opustí. Konkurence Neměl jsem potíže dosáhnout bezproblémově jakékoliv části webu a to absolutně bez přemýšlení. 3.5.1.4. Přístupnost Všechny čtyři weby jsem podrobil testování, zda budou funkční i bez použití barev, obrázků, Javascriptu a stylů. V rámci testování jsem také zkoumal, zda obrázky a odkazy obsahují alternativní texty, zda jsou na seznamy použity skutečně seznamy, zda web není v tabulce. Dále pak alternativní obsah pro grafické nadpisy řešené pozadím. Správně napsaný web by měl splňovat tyto zásady a přispívat tak k bezproblémovým návštěvám hendikepovaných uživatelů. Nejlépe vyšel web Svitidla-levne.cz, který byl použitelný bez větších problémů i bez výše uvedených technologií. Svetlaaosvetleni.cz splňoval podmínky téměř ve všech bodech, ale měl nedostatky v rámci Javascript. Některé pasáže byly bez této technologie nepřístupné. Konkrétně podrobnosti u produktů, nebo nefunkční tlačítko tisk (toto tlačítko by se s vypnutým Javascriptem nemělo správně v tomto případě vůbec zobrazovat). Svitidla.com byl téměř bez problémů, jen místy chyběly popisky obrázků. Na Svitidla-svetla-osvetleni.cz byly občas použity obrázky, které neměly alternativní 40
obsah. Např. upozornění, že výrobek je novinka. Několikrát nebyl použit alternativní obsah pro tlačítko přidat do košíku.
3.5.1.5. Layout Všechny čtyři weby používají beztabulkový CSS layout. Je to ta nejlepší možná volba. Liší se pouze počtem sloupce, což je nehodnotitelný prvek webu, záleží na subjektivním názoru návštěvníka. 3.5.1.6. Mapa webu Svitidla-svetla-osvetleni.cz
a
Svetlaaosvetleni.cz
mají
poměrně
dobře
zpracovanou mapu webu, pravděpodobně automaticky generovanou. Na webu Svitidla.com je mapa sice taktéž přítomna, ale v tak katastrofické podobě, že má efekt pravděpodobně jen pro vyhledávače. Svitidla-levne.cz naopak nemají vůbec žádnou mapu webu. 3.5.1.7. Robots.txt, Sitemap.xml Svetlaaosvetleni.cz Na tomto webu je perfektně definován soubor sitemap.xml s kompletním výčtem všech stránek. Robots.txt zde také existuje. Svitidla-levne.cz Existuje zde pouze robots.txt, kde je zakázán přístup do neobsahových sekcí. Sitemap.xml zde neexistuje. Svitidla.com Soubor robots.txt existuje a sitemap.xml také, ale s poměrně nepatřičným obsahem ve formě pouhého odkazu na stránku Mapa webu. V tomto souboru by měly být vypsány kompletně všechny stránky a ne jen mapa webu. Pravděpodobně se jedná o zjednodušení práce tím, že sitemap.xml pouze odkáže robota při indexování na Mapu webu a vyhledávač web zaindexuje z Mapy webu, a ne ze souboru sitemap.xml.
41
Svitidla-svetla-osvetleni.cz Oba soubory se vyskytují. Robots.txt zamezuje vyhledávačům přístup složek typu admin, user a další. Sitemap.xml je definován dobře. 3.5.1.8. Favicon Ikonku webu mají nadefinovány všechny weby mimo Svitidla-levne.cz. 3.5.1.9. Velikost webu Při testování velikosti stránek jsem použil u každého z obchodů vždy tři. A to vstupní stránku, přehled výrobků v některé kategorii a detail výrobku. Tyto tři jsem zvolil z prostých důvodů, jsou to nejčastější stránky, na které přijde návštěvník. Název obchodu
Vstupní stránka
Kategorie výrobků
Detail výrobku
Svetlaaosvetleni.cz
452.8 KB
228.7 KB
273.6 KB
Svitidla-levne.cz
187.7 KB
230.8 KB
41 KB
Svitidla.com
293.1 KB
216.7 KB
86.3 KB
Svitidla-svetla-osvetleni.cz
264.7 KB
338.1 KB
143.7 KB
Tabulka 4 – Přehled velikostí nejběžnějších typů stránek jednotlivých obchodů
Z tabulky 4 je poměrně dobře vidět, že obchod Svitidla-levne.cz a Svitidla.com se alespoň částečně snaží své stránky optimalizovat. Lépe pracují s typy a velikostmi obrázků, resp. s mírami komprimace. Zbylé dva weby se příliš optimalizací velikosti nezabývají a jejich stránky se načítají v průměru nejdéle. Žádný z webů není ideální, co se týče velikosti, což je pochopitelné, protože u internetového obchodu s obrázky a bohatou grafikou toho jde poměrně těžko docílit. Ale to nic nemění na faktu, že velikost vstupní stránky téměř půl megabajtu u Svetlaaosvetleni.cz je příliš.
3.5.2. Použitý značkovací jazyk a styly Analýza zdrojového kódu je jedním z nejdůležitějších bodů celé analýzy. Pro správné zobrazování a indexování je třeba, aby stránky byly v tomto směru dobře navržené a optimalizované. 42
3.5.2.1. Značkovací jazyk U těchto čtyř webů se můžeme setkat se zastoupením rozličných jazyků a to XHTML ve verzích 1.0 i 1.1 a HTML 4.0. Za předpokladu, že by byl každý z kandidátů nakódován v souladu s daným předpisem. Je téměř jedno, jaký jazyk použije, na výslednou podobu to nebude mít vliv. Všechny moderní prohlížeče interpretují specifikace daného jazyka dobře. 3.5.2.2. Validita Kámen úrazů bývá u hodně webů validita a ani auditovaný web a konkurence nejsou výjimkou. Validní byl pouze web Svitidla.com, ostatní měly více či méně chyb v kódu a to ve všech různých formách. Neukončené značky, tagy navíc nebo chybějící popisky. Web
DTD
Počet chyb
XHTML 1.1
12
XHTML 1.0 Transitional
24
HTML 4.0 Transitional
0
XHTML 1.0 Strict
20
Svetlaaosvetleni.cz Svitidla-levne.cz Svitidla.com Svitidla-svetla-osvetleni.cz
Tabulka 5 – Výsledky validace jednotlivých stránek
Tabulka 5 přehledně zachycuje výstup z validátoru konsorcia W3C. Zde je neúčelné hovořit o tom, jestli je web s méně chybami lepší či horší. Web je buď validní či nikoliv, nic mezi tím neexistuje. Počet chyb pak může definovat nástin obtížnosti řešení tohoto problému. Jako jediný web vyšel bez chyb Svitidla.com, který je paradoxně špatně interpretován prohlížečem Internet Explorer 6. To však není z důvodu špatně napsaného kódu, ale špatně nebo nepřesně napsaných kaskádových stylů. 3.5.2.3. Správné strukturování značek Při testu správné struktury značek, a to zejména nadpisů, se weby rozdělily na dvě poloviny. První polovina (Svitidla.com, Svitidla-svetla-osvetleni.cz) má poměrně dobře řešené nadpisy. Nadpis H1 je zastoupen jen jednou značkou, ostatní úrovně nadpisů jsou správně zanořeny. Jsou používány značky pro definici odstavců. To je velice solidní základ pro následné SEO optimalizace. Naopak web Svitidla-svetla-osvetleni.cz používá špatně některé nadpisy. Nadpis kategorie by měl mít vyšší úroveň nadpisu než nadpis produktů. 43
Druhá půlka webů (Svetlaaosvetleni.cz, Svitidla-levne.cz) je na tom o poznání hůře. U Svetlaaosvetleni.cz je sice definován jediný nadpis H1, ale nadpisy druhé a třetí úrovně úplně chybí. Dále jsou pak použity nadpisy čtvrté a páté úrovně. Zde by stačilo jednoduše změnit nadpis čtvrté úrovně za druhou a nadpis páté úrovně za třetí. Na webu Svitidla-levne.cz nejsou nadpisy ve správném pořadí. První úrovni předchází druhá, nadpisy nejsou hiearchicky členěny. Např. nadpis stránky Kategorie má stejnou úroveň nadpisu jako výpis produktů. Ty by měly být v tomto případě na úrovni třetí. 3.5.2.4. Výstupy na jednotlivých zařízeních U e-shopů má smysl testovat web pouze na korektní výstupy na tiskárnu (test výstupu na monitor byl proveden v kapitole 3.5.1.2). Tiskový styl mají definovány weby Svitidla-svetla-osvetleni.cz a Svitidlalevne.cz. Zbylé dva weby tiskový styl nemají a výstupy na tiskárnu jsou proto příliš rozsáhlé. Obsahují zbytečnou grafiku. Rozdělení výstupu na stránky nedává místy žádný smysl. 3.5.2.5. Pěkné adresy Všechny čtyři weby používají tzv. pěkné adresy. Jsou poměrně stejně řešené, jen Svitidla.com přidávají na konec adresy neznámý parametr ID.
3.5.3. Interaktivní prvky Ani jeden z webů nelze označit za přehlcený interaktivními prvky. Na všech stránkách nalezneme Javascript, který je u Svetlaaosvetleni.cz, Svitidla-levne.cz a Svitidla-svetla-osvetleni.cz zapsán místy tzv. inline způsobem namísto odkazu na externí soubor. Použití Javascriptu hodnotím jako střídmé, jiné interaktivní prvky na webech nenalezneme a to ani integraci některé ze sociálních sítí (např. populární Facebook nebo Twitter), ani Flashové prvky.
3.5.4. Grafické ztvárnění webu Hodnocení grafické podoby je poměrně obtížné, protože je to otázka ryze subjektivního názoru jedince. Proto jsem každý z webů nechal ohodnotit deset lidí z cílové skupiny, kteří známkovali stránky podle dojmu z grafické podoby, intuitivnosti a čitelnosti textů jako ve škole (1 – výborné, 5 - nedostatečné). K dispozici měli nejrůznější počítače, resp. obrazovky, které by měli dostatečně jasně odhalit případnou nečitelnost textu a špatné zobrazování při různých rozlišeních. 44
Výsledky testu jsou k dispozici v Příloze 3. Hodnoty vyplněné uživateli jsou víceméně kvantifikovatelné, tudíž můžeme s určitou jistotou tvrdit, že nejpříjemnější pro uživatele je web Svitidla-svetla-osvetleni.cz, který je dobře čitelný, dobře vypadá a je funkční. Následován je stránkami Svitidla-levne.cz a Svetlaaosvetleni.cz, které hodnotili uživatelé velice podobně. Jako poslední je Svitidla.com, který příliš nezaujal ani grafickou podobou a ani přehledností nebo čitelností. Zjednodušený výstup uvádí Tabulka 6, která obsahuje průměr hodnot jednotlivých kritérií. Z hodnot je patrné, která kritéria jsou pro uživatele na daných stránkách nejméně akceptovatelná. Dojem z grafické podoby 1,9
Web Svetlaaosvetleni.cz
Intuitivnost
Čitelnost textů
2
2,4
Svitidla-levne.cz
2,4
2,2
1,7
Svitidla.com
3,2
2,6
2,5
Svitidla-svetla-osvetleni.cz
1,8
1,4
1,8
Tabulka 6 – Stručný výstup z uživatelského testu grafické podoby
Pokud porovnám výsledek z reálného testu na vzorku respondentů a syntetický test od Marka Prokopa10, dostaneme poměrně zajímavé výsledky, ze kterých je jasné, že syntetický test je náročnější, nebo že respondenti testovali za ideálních podmínek bez jakýchkoliv omezení. Barvy jsem zvolil v syntetickém testu subjektivně a to ty, které se vyskytují na většině textu. Tabulka 7 vyjadřuje vstupy a výstupy z testu. Z výsledků je patrné, že barvy jsou voleny s ohledem na dobrou přístupnost jen u webu Svitidlasvetla-osvetleni.cz. U ostatních webů by mohlo díky různým okolnostem dojít k nečitelnosti a tím pádem k nepoužitelnosti. Web Svetlaaosvetleni.cz Svitidla-levne.cz Svitidla.com Svitidla-svetlaosvetleni.cz
Barva pozadí ffffff
Barva písma 979696
Rozdíl jasu 104
Rozdíl barvy 314
Dostatečný kontrast Ne
ffffff
4d626f
161
479
Ne
fcebd2
687690
120
331
Ne
ffffff
444444
187
561
Ano
Tabulka 7 – výsledky syntetického měření čitelnosti textů
45
3.6. Zhodnocení SEO a SEM Pro analýzu návštěvnosti je nutné nejprve zhodnotit weby po stránkách SEO a SEM, protože právě zde může být příčina neúspěchu u webových vyhledávačů, resp. špatných pozic na určená klíčová slova. Testovat budu jen ve vyhledávačích Google a Seznam z důvodu jejich dominance na českém trhu, viz kapitola 2.4.1.
3.6.1. Vyhledávače Web Svetlaaosvetleni.cz má definována v metatagu klíčová slova, na která „optimalizuje“. Abych definoval výchozí situaci, ze které budu vycházet, porovnám pořadí ve vyhledávačích jednotlivých webů na tyto slova: •
Světla
•
Osvětlení
•
Lampy
•
Svítidla
•
Lustry
•
Zdravé světlo
Test proběhne, jak již bylo řečeno, ve vyhledávačích Seznam CZ a Google CZ. Jako hloubku prohledávání jsem nastavil 500 výsledků. Výsledky, které jsou v pořadí dále, hodnotím jako málo významné. Svetlaaosvetleni.cz Svetlaaosvetleni.cz světla
Google (CZ) 79
Seznam (CZ) 198
osvětlení
170
-
lampy
251
-
svítidla
-
-
lustry
200
-
zdravé světlo
33
14
Tabulka 8 – Výsledky z vyhledávačů pro obchod Svetlaaosvetleni.cz
46
Svitidla-levne.cz Svitidla-levne.cz světla osvětlení lampy svítidla lustry zdravé světlo
Google (CZ) 1 428 1 0
Seznam (CZ) 26 19 11 81 10
Tabulka 9 – Výsledky z vyhledávačů pro obchod Svitidla-levne.cz
Svitidla.com Svitidla.com
Google (CZ)
Seznam (CZ)
světla
28
60
osvětlení
7
8
lampy
22
29
svítidla
1
3
lustry
5
5
zdravé světlo
-
-
Tabulka 10 – Výsledky z vyhledávačů pro obchod Svitidla.com
Svitidla-svetla-osvetleni.cz Svitidla-svetla-osvetleni.cz světla osvětlení lampy svítidla lustry zdravé světlo
Google (CZ) 2 1 3 47 -
Seznam (CZ) 7 1 1 10 -
Tabulka 11 – Výsledky z vyhledávačů pro obchod Svitidla-svetla-osvetleni.cz
Z tabulek je vidět, že konkurence se zaměřuje na podobná klíčová slova jako Svetlaaosvetleni.cz. Rozdílem však je, na jakých pozicích se umisťují. Konkurence si vede poměrně dobře. U některých slov až výborně. Auditovaný web nedosahuje dobrých výsledky na žádné spojení mimo zdravé světlo, kde se umisťuje ve vyhledávači Seznam.cz na poměrně solidním 14 místě.
47
Pro analýzu míry optimalizace pro vyhledávače pro daná klíčová slova jsem použil software WebSite Auditor, který porovnal frekvence výskytu klíčových slov ve všech důležitých částech webu a ohodnotil je (Obrázek 8). Z výsledků (Obrázek 9) lze vysledovat, které prvky by si zasloužily větší pozornost při tvorbě textů vzhledem ke klíčovým slovům.
Obrázek 8 – Míra optimalizace webu pro jednotlivá klíčová slova. Zdroj: WebSite Auditor
Obrázek 9 – Ohodnocené výskyty klíčových slov v jednotlivých částech webu. Zdroj: WebSite Auditor
3.6.1.1. Hodnocení webů vyhledávači Hodnocení webů vyhledávači je jedním z faktorů, který velkou mírou ovlivňuje pořadí stránek ve vyhledávači. Pro stránky se zaměřením na české návštěvníky jsou důležité především S-Rank (Seznam) a PageRank(Google). Zajímavé jsou pak statistiky ve spojení s počtem zpětných odkazů. Údaj o počtu zpětných odkazů je získán z nástroje Yahoo! Site Explorer s nastaveným filtrováním interních odkazů.
48
Web
S-Rank
PageRank
Počet zpětných odkazů
Svetlaaosvetleni.cz
40/100
0/10
253
Svitidla-levne.cz
60/100
2/10
2085
Svitidla.com
70/100
3/10
26318
Svitidla-svetla-osvetleni.cz
70/100
4/10
7148
Tabulka 12 – Ohodnocení jednotlivých webů vyhledávači a počty zpětných odkazů
Tabulka 12 uvádí výsledky měření jednotlivých obchodů. Je vidět, že s počtem odkazů nemusí úměrně stoupat též ohodnocení stránky vyhledávači. Velmi důležitá je tzv. kvalita zpětných odkazů, kterou má například Svitidla.com velmi nízkou, protože web Svitidla-svetla-osvetleni.cz dosahují stejných nebo vyšších ranků s menším počtem odkazů. Z toho výstupu vyplývá, že web Svetlaaosvetleni.cz je na tom se zpětnými odkazy žalostně a je nejhorší ze všech uvedených.
3.7. Analýza návštěvnosti V této
kapitole
budu
provádět
analýzu
pouze
auditovaného
webu
Svetlaaosvetleni.cz kvůli tomu, že k ostatním obchodům, mimo Svitidla-levne.cz, nejsou k dispozici dostatečná statistická data. U webu Svitidla-levne.cz se mi podařilo dohledat jeho průměrnou denní návštěvnost, která činí 346 návštěvníků. U statických výstupů jsem nastavil segmentaci ve formě filtru českých uživatelů. Před dvěma měsíci (únor 2011) začal web generovat přístupy ze Severní Ameriky, které by značně zkreslily data. V tomto období došlo ke generování odkazů na stránku s nepravdivými klíčovými slovy pravděpodobně nějakým robotem. Musel jsem proto nastavit další parametr segmentace ve formě vyřazení návštěv přes odkazující stránku google.cz/imgres. Použitím segmentace se podařilo částečně omezit tento extrém.
3.7.1. Analýza návštěvníků
Obrázek 10 – Přístupy na web v období 28.9.2010 až 6.4.201. Zdroj: Google Analytics
49
Obrázek 10 zobrazuje návštěvnost za celou dobu provozu obchodu.Z grafu je patrné, že mimo výkyv, který jsem objasnil výše, má křivka stále stejný průběh. Můžeme tedy tvrdit, že obchod nebyl v tomto období téměř nijak účinně vylepšen.
Obrázek 11 – Nový vs. vracející se zákazníci.Zdroj: Google Analytics
Obrázek 11 graficky znázorňuje poměr mezi novými (78,21%) a vracejícími (21,79%) se zákazníky. Z grafu je vidět, že z celkového množství návštěvníků se jich vrací zpět méně, než je běžné.Hodnota se nachází pod vysledovaným průměrem 19 . Tento fakt může být způsoben více faktory, jako je například špatné zpracování obchodu, nesolidní jednání, nefunkčnost nebo malý sortiment (oproti konkurenci).
3.7.2. Analýza zdrojů a míry opuštění Ze statistik vyplývá, že nejvíce návštěv přivedly vyhledávače a to zejména Google a Seznam. Zajímavé jsou i míry opuštění, kdy u Seznamu je o 2 % vyšší než u Googlu, to lze přikládat lepšímu vyhledávacímu algoritmu. Co se týče odkazujících stránek, nejvíce návštěvníků přivedly weby zboží.cz (vyhledávač výrobků v e-shopech), lott.cz a sobeproradost.cz (spřátelené weby). U spřátelených webů lze pozorovat vyšší průměrnou dobu na webu a nižší míru opuštění. Toto je zřejmě způsobeno jiným charakterem uživatelů než na Zboží.cz. Průměrná doba strávená na webu je vyšší než u odkazujících vyhledávačů. Obecně se nachází web s celkovou mírou opuštění 47,22% zhruba v průměru. Tyto skutečnosti zachycují Obrázek 12 a Obrázek 13.
19
Podle osobního průzkumu jsou běžné hodnoty 30 a více procent.
50
Obrázek 12 – Odkazující stránky s dalšími statistickými údaji. Zdroj: Google Analytics
Obrázek 13 – Podíl vyhledávačů na návštěvnosti a další statistiky. Zdroj: Google Analytics
51
3.7.3. Míra konverze Míra konverze za celou dobu obchodování je podle modulu Elektronický obchod v Google Analytics 0,5%, což je o polovinu méně, než jsou průměrné hodnoty v České Republice.
Obrázek 14 – Míra konverze v jednotlivých měsících. Zdroj: Google Analytics
Obrázek 14 zachycuje vývoj míry konverze od doby spuštění obchodu do dnešního dne (7.4.2011). Křivka ani v jednom z měsíců nevystoupá na průměrnou hodnotu 1%, což indikuje, že obchod má při návštěvnosti cca 30 uživatelů za den a 900 za měsíc, necelých 5 objednávek měsíčně. Poměrně zajímavé jsou hodnoty na obrázku 15, kde je naznačeno, který zdroj provozu generuje nejvyšší konverzní poměr. Jako měna je uveden dolar, protože Google umožňuje nastavit jen několik měn, mezi nimiž koruna bohužel chybí.
Obrázek 15 – Zdroje provozu se statistickými daty z modulu Elektronický obchod. Zdroj: Google Analytics
Na obrázku 16 je tabulka s přehledem, které klíčové slovo generuje nejvyšší konverzní poměr.
52
Obrázek 16– Klíčová slova se statistickými daty z modulu Elektronický obchod. Zdroj: Google Analytics
3.8. Analýza výkonnosti e-shopu Obchod má k dnešnímu dni (9.4.2011) registrovaných 14 zákazníků, tyto zákazníci jsou muži i ženy zhruba ve stejném poměru. Ze statistik obchodu lze vyčíst, že uživatele velmi zajímají kategorie zboží související se zdravým světlem a výrobky, které figurují v kategoriích Art Decor a Wine. Vzhledem ke skromné množině dat, nelze analyzovat samotné prodeje takovým způsobem, aby výstup měl dobrou vypovídací hodnotu. Nákupní proces Tato oblast je u obchodů řešena podobně. U všech, s vyjímkou Svetlaaosvetleni.cz, lze nakoupit zboží i bez registrace. Registrace je řešena volitelnou formou. Samotný komfort pro uživatele je ve všech čtyřech obchodech srovnatelný, povinné položky jsou viditelně označeny, uživatel se případně v žádném z kroků neztrácí. Některé z webů řeší objednávku jednokrokovým a některé vícekrokovým způsobem, tuto odlišnost nepovažuji za významnou za předpokladu, že je postup srozumitelný i laikovi, což tak je ve všech případech. Jako konkurenční nevýhodu obchodu Svetlaaosvetleni.cz lze tedy označit vynucování registrace uživatelů. Dalším negativním jevem, jak již bylo řečeno, je nekompletní lokalizace, která působí značně neprofesionálně a může návštěvníka zmást. Nákupní košík mají obchody řešen přehledně, s indikátorem aktuálního stavu i v případě, že se nenacházíme v košíku.
53
3.9. Srovnávací tabulka Pro přehlednější ilustraci všech výsledků uvádím tabulku (Příloha 4), která shrnuje většinu testovaných či měřených oblastí. Hodnoceno je ve stupnici 1-10, kdy 10 je nejlepší možný výsledek (bez chyb nebo také optimální stav) a 1 je nejhorší (nedostatečné řešení dané oblasti). Na závěr uvádím průměr hodnocení jednotlivých obchodů pro celkové vyhodnocení.
54
4. Návrhy a doporučení pro zlepšení aktuálního stavu obchodu Jedním z cílů této práce je návrh doporučení pro zlepšení současné situace obchodu a to zejména v oblastech, ve kterých je web daleko za konkurencí. Pomocí analýzy jsem identifikoval vážné nedostatky, které je třeba bezpodmínečně řešit.
4.1. Zobrazování v jednotlivých prohlížečích Klíčovou oblastí je korektní zobrazování webu ve všech prohlížečích, každý web by se měl zobrazovat korektně. Prohlížeče Safari 5 a Chrome 10 nedokázaly stránky korektně zobrazit. Náprava se v tomto případě zdá jednoduchá, pouze zmenšit velikost obsahového bloku v kaskádových stylech. Právě tento problém může způsobovat krátkou dobu strávenou na webu (Chrome 10 a Safari 5 mají dobu cca 2x kratší než ostatní prohlížeče), nebo velkou míru opuštění, protože návštěvník na první pohled vidí, že se stránkami není něco v pořádku a pak s velkou pravděpodobností odchází.
4.2. Přístupnost a použitelnost Z hlediska přístupnosti a použitelnosti by bylo vhodné vytvořit přehlednější členění výrobků, lépe uspořádat menu v levém panelu. Dále pak stránky lépe optimalizovat pro použití bez Javascriptu.
4.3. Velikost webu Velikost webu není optimální, průměrná velikost webu je i dvakrát tak velká v porovnání s konkurencí. Bylo by vhodné snížit velikost obrázků a grafického layoutu. Snížení velikosti se dá dosáhnout i optimalizací Javascriptu, případně použití speciálních knihoven, které jsou určené pro použití v ostrém provozu.
4.4. Použitý značkovací jazyk a styly Validita webu je zde také kamenem úrazu, kód obsahuje chyby, které mohou způsobovat problémy se zobrazováním nebo indexováním, proto by se rozhodně vyplatilo tyto nedostatky opravit. Dalším problémem je špatně strukturovaný kód, který neodpovídá struktuře definované v kapitole 2.2.2.3a působí na vyhledávače rozhodně negativním dojmem (index roboti nenacházejí to, co očekávají a podle toho také web ohodnotí). Další oblastí pro možné vylepšení by byl výstup na tiskárnu, weby se obecně 55
tisknou poměrně často a výstup na tiskárnu zde rozhodně není optimální. Vyřešil by to další přidaný styl, speciálně navržený pro tiskárnu.
4.5. Grafické ztvárnění webu Grafická stránka byla uživateli hodnocena jako poměrně dobrá (web uživatelé ohodnotili jako druhý nejlepší z testovaných). Problém je ale s implementací. Grafické prvky nevypadají na všech částech webu tak, jak by měly vypadat. (špatné pozicování rozbalovacího tlačítka, nevhodné odsazení kategorií od nadpisu boxu v levém panelu, zvláštní odsazení názvů článku v boxu Články v levém panelu a řada dalších nepřesností). Pozornost si zaslouží čitelnost textu, kterou hodnotili uživatelé jako nejhorší ze všech testovaných a podobný výsledek jsme obdrželi i ze syntetického textu.
4.6. SEO a SEM Situace na poli vyhledávačů je pro současná klíčová slova značně neuspokojivá, tuto situaci mohou do značné míry způsobovat výše uvedené problémy plus dlouhodobá pasivita autora v oblasti optimalizací pro vyhledávače. Prvním problémem jsou špatně definovaná klíčová slova, která jsou poměrně hodně konkurenční a velice obecná, tudíž je velice obtížné u nich dosahovat dobrých výsledků. Lepším řešením by byla volba slov méně obecných (např. závěsná svítidla, kožené hodiny, měděné hodiny), nebo takových, u kterých není velká konkurence (vnitřní osvětlení, světla, lampa, zdravé světlo, hodiny).Tato slova je pak vhodné v textu (v rozumné míře) opakovat a to v nadpisech, v těle stránky, v tučných textech, u popisu obrázků a odkazů. Velkou mírou mohou přispět i zpětné odkazy, kterých není oproti konkurenci příliš. Odkazy by měly být kvalitní, to znamená z dobrého zdroje (ideálně podobného zaměření) s dobrým popiskem a ideálně z webu, který je dobře ohodnocen od vyhledávačů.
Zde
není
dobré
využívat
různých
linkfarem,
kde
je
velká
pravděpodobnost, že web dostane spíše penalizaci než bonus. Po splnění všech výše uvedených náležitostí by mohlo mít zajímavý efekt umístění reklamy do vyhledávačů nebo do webů, kam chodí cílová skupina uživatelů. Tuto možnost konkurenti využívají. Otázkou zůstává, jak moc je taková propagace efektivní z hlediska samotné konverze, ale rozhodně stojí za vyzkoušení. 56
4.7. Nákupní proces Jako zajímavé rozšíření se jeví přidání možnosti, aby zákazníci mohli objednávat i bez registrace. Vzhledem k tomu, že osvětlení nekupují zákazníci každý den, není důvod je nutit do registrace. Naopak tato skutečnost může mnohé z nich odradit. Samozřejmostí by mělo být dokončení překladů, které jsou u volby metody placení v angličtině nebo v košíku u poznámky o ceně. Zároveň bych vylepšil grafickou podobu všech jednotlivých kroků. Řešení je nyní dostatečné, ale dovedl bych si představit větší uživatelský zážitek z pohledu grafického rozhraní. Při vyplňování registrace by políčko s názvem město mohl být řešeno našeptávačem. Políčko heslo bych u registrace doporučil zobrazovat dvakrát, pro kontrolu. Doplnění validací těchto políček v reálném čase, například přes Javascript, by tento proces uživatelům zpříjemnilo. Doplnit by se dala funkcionalita hlídání ceny zboží, zvaná též jako hlídací pes. Uživatel v případě zájmu obdrží mail, že došlo ke změně ceny položky. Při vyvolání detailu výrobku se objevuje u položky cena také neznámý atribut id, který nemá žádný význam, a proto by bylo vhodné jej vyřadit.
4.8. Závěrečné slovo k návrhům Návrhy uvedené výše by měly přispět ke zlepšení konverzních poměrů a vyšší návštěvnosti. Nelze přesněji určit o kolik a za jak dlouho dojde ke zlepšení. Optimalizace webu a jeho samotné provozování je nekončící proces zlepšování služeb, podoby, pozic ve vyhledávačích, zpětných odkazů, obsahu a dalších věcí, které přímo souvisí se samotnou úspěšností obchodu.
57
5. Závěr Prvním cílem práce bylo definovat některé základní metodiky pro audit webových stránek. Po pečlivém nastudování dané problematiky se mi podařilo vytvořit sadu základních metodik, pomocí kterých lze otestovat web, zda splňuje požadavky, které jsou na dnešní webové stránky kladeny. Taktéž jsem se zabýval analýzou návštěvnosti webu, výkonnosti internetového obchodu a nástrojů pro zvyšování výkonnosti. Došel jsem k závěru, že každá z těchto metodik je nezbytně nutná, pro kvalitní analýzu a zhodnocení současného stavu. Definované metodiky jsem aplikoval do praxe praktickým provedením auditu webové stránky Svetlaaosvetleni.cz. Analyzoval jsem současně i hlavní konkurenci, abych identifikoval případné konkurenční nevýhody. Stránku jsem poměrně detailně prozkoumal a testoval. Všechna pozorování a zejména pak výstupy z těchto testů jsem zaznamenal. Analýzu výkonnosti internetového obchodu jsem vyhodnotil jako nerealizovatelnou z důvodu malé statistické množiny a proto jsem se o ni zmínil jen krátce. Všechny ostatní testy se mi s úspěchem podařilo realizovat. Z těchto analýz se dají vyčíst následující fakta. Web se nekorektně zobrazuje ve vyhledávačích, je špatně čitelný a nekvalitně nakódovaný, díky tomu může docházet k neodpovídajícímu ohodnocení ze strany vyhledávačů. Je zde malá míra optimalizace na klíčová slova, všeobecně málo textu, zásadní chyby ve funkčnosti a v neposlední řadě i malá návštěvnost a nízká míra konverze. Z praktické části vyšel web Svetlaaosvetleni.cz oprávněně na posledním místě. Podle výstupů z praktických testů jsem sestavil řadu doporučení pro zlepšení současného stavu, dovolím si říci tragického, stavu internetového obchodu. Tato doporučení by měla přinést očekávané výsledky poměrně rychle a to primárně z důvodu okamžitého přínosu pro uživatele. Jedná se o návrhy spočívající v lepším nakódování a doladění stylů, strukturování a využívání nadpisů alespoň prvních třech úrovní a ve správné hierarchii, přidání možnosti nakupovat i bez registrace, zlepšení kontrastu písma, doladění funkčnosti a překladů. V práci jsem definoval metodiky pro ohodnocení webových stránek, zejména internetových obchodů, které by mohly být v budoucnu použity jako základní obecná
58
sada pravidel správného a úspěšného webu. Taktéž by tato práce mohla být rozšířena o další metodiky nebo o prohloubení stávajících.
59
6. Terminologický slovník Termín
Zkratka Význam[zdroj]
Hypertext MarkupLanguage
HTML
tj.
jazyk
skládající
se
z
příznaků
formátujících a odkazujících na stránky a používaný k zpřístupnění informací na WWW
prostřednictvím
prohlížeče.[it-
slovnik.cz] Extensible
Hypertext XHTML „rozšiřitelný
hypertextový
značkovací
jazyk“ je jazyk pro vytváření WWW stránek.
MarkupLanguage
XHTML je přísnější varianta jazyka HTML. Oproti HTML nabízí jednotný styl a s ním i vyšší rychlost zpracování v prohlížečích. [Maxon.cz] SearchEngineOptimalization
SEO
speciální metodikou
optimalizace
zabývající
vytváření
a
se
upravování
internetových stránek takovým způsobem, aby jejich forma a obsah byly ideální pro zpracování v internetových vyhledávačích. Cílem SEO optimalizace je získat ve výsledku hledání ve vyhledávačích pro daný web co nejvyšší pozici, která odpovídá obsahu, a tím přivést více návštěvníků. [Maxon.cz] SearchEngine Marketing
SEM
SEM
je marketingový
nástroj,
forma
internetové reklamy, zaměřený na propagaci a zvyšování viditelnosti a známosti webu, tedy navyšování návštěvnosti. SEM může mít mnoho podob, vždy jde ale o placenou formu propagace. Většinou se platí PPC modelem,
tedy platba
zpravidla
textový
za
odkaz
kliknutí nebo
na
banner 60
umístěný v síti serverů, které takové způsoby propagace nabízejí. [Maxon.cz] Flash
Flash
je
grafický
Používá
se
vektorový
především
pro
program. tvorbu
interaktivních animací, prezentací a her. Svou oblibu získal díky malé velikosti výsledných souborů, protože se uchovávají ve vektorovém formátu. Ve většině případů tak nahradil dříve používané bannery ve formátu GIF. [Maxon.cz] Cascading Style Sheets
CSS
CSS (Cascading Style Sheets) je jazyk pro formální popis vzhledu (stylu) stránky. Pomocí sady jazykových konstrukcí a pravidel můžeme určit, jak se má který element na stránce zobrazit. Umožňuje definovat pozici, obtékání textu, barvy textu a pozadí, různé textové transformace (převod písmen), grafické efekty (alfa průhlednost) a mnoho dalších efektů a funkcí. Tento jazyk se neustálé vyvíjí a připravují se další verze. [Maxon.cz]
Layout
Označení způsobu rozložení určitých prvků na ploše, které se pravidelně opakují, i když se mění obsah. Layout se může vyskytovat v tištěných médiích, jako jsou noviny nebo časopisy. V oblasti internetového podnikání se však tento pojem vztahuje k uspořádání prvků
na
internetových
stránkách.
[Shoptet.cz]
61
7. Zdroje 1. Český statistický úřad. Český statistický úřad. [Online] 2010. http://www.czso.cz/csu/redakce.nsf/i/internet_a_web_xls/$File/internet_2010_3.xls. 2. Bříza, Petr. Tvorba layoutu webu - teoretický úvod. Interval.cz. [Online] 3. Březen 2004. [Citace: 3. Březen 2010.] http://interval.cz/clanky/tvorba-layoutu-webuteoreticky-uvod/. 3. Janovský, Dušan. Skutečné výhody CSS layoutu. Jak psát web. [Online] 20. Leden 2004. [Citace: 3. Březen 2011.] http://www.jakpsatweb.cz/clanky/skutecne-vyhody-csslayoutu.html. 4. Vrána, Jakub.1001 tipů a triků pro PHP. Brno : Computer Press, a.s., 2010. 978-80251-2940-1. 5. Havrlant, Lukáš. Co je to Flash? O Flashi. [Online] [Citace: 6. Březen 2011.] http://www.havrlant.net/flash/cojeto.php. 6. SQL Injenction. Wikipedia.cz. [Online] 12. 12 2010. [Citace: 7. Březen 2011.] http://cs.wikipedia.org/wiki/SQL_injection. 7. Hendikepovaní uživatelé internetu. Přístupnost. [Online] [Citace: 7. Březen 2011.] http://pristupnost.nawebu.cz/texty/hendikepovani-uzivatele.php. 8. Janovský, Dušan. Příprava obrázků. Jak psát web. [Online] [Citace: 7. Březen 2011.] http://www.jakpsatweb.cz/obrazky-priprava.html. 9. —. Vyhledávače, jak přibližně fungují. Jak psát web. [Online] 2005. [Citace: 9. Březen 2011.] http://www.jakpsatweb.cz/vyhledavace.html. 10. Klára Boháčková, Rober Němec. Průměrná míra opuštění/poměr návratů/bounce rate v ČR. Lupa.cz. [Online] Internet Info, s.r.o. , 21. Listopad 2009. [Citace: 16. Březen 2011.] http://www.lupa.cz/clanky/prumerna-mira-opusteni-bounce-rate-v-cr/. 11. Dawson, Alexander. A Guide on Layout Types in Web Design. Six Revisions. Červenec 2010. [Citace: 3. Březen 2011.] [Online] 22. http://sixrevisions.com/web_design/a-guide-on-layout-types-in-web-design/. 12. Janovský, Dušan. Tabulkový layout nezrychlíte. Jak psát web. [Online] 9. Červen 2004. [Citace: 3. Březen 2011.] http://www.jakpsatweb.cz/clanky/tabulkovy-layoutnezrychlite.html. 13. Bříza, Petr. Znakové sady v praxi - základní teorie. Interval.cz. [Online] ZONER software a.s., 3. Prosinec 2003. [Citace: 3. Březen 2011.] http://interval.cz/clanky/znakove-sady-v-praxi-zakladni-teorie/.
62
14. Janovský, Dušan. Jak psát web. [Online] 17. Únor 2011. [Citace: 3. Březen 2011.] http://www.jakpsatweb.cz. 15. Tichý, Jan. Cross-site scripting. PHPGuru.cz. [Online] 22. 2 2008. [Citace: 7. Březen 2011.] http://www.phpguru.cz/clanky/cross-site-scripting. 16. Mimořádná série přednášek ve spolupráci s firmou Seznam.cz. VŠE. [Online] Listopad 2008. [Citace: 9. Březen 2011.] http://kizi5.vse.cz/wpcontent/uploads/2008/11/prednaska-ft-2008-v2007.pdf. 17. Hilbert, Pavel. Analýza chování návštěvníků webových stránek. Atweb Consulting. [Online] Srpen 2005. [Citace: 16. Březen 2011.] http://www.atweb.cz/cz/analyzachovani-navstevniku-webovych-stranek.php. 18. Snížek, Martin. Čím zvýšit váš konverzní poměr. snizekweb.cz. [Online] 15. Březen 2007. [Citace: 16. Březen 2011.] http://www.snizekweb.cz/weblog/konverznipomer/. 19. Janovský, Dušan. Použitelnost stránek. Jak psát web. [Online] [Citace: 16. Březen 2011.] http://www.jakpsatweb.cz/pouzitelnost.html. 20. Prokop, Marek. A/B testování pro úspěšnější web. H1.cz. [Online] H1.cz, 23. Listopad 2004. [Citace: 17. Březen 2011.] http://www.h1.cz/fol/2004/ab-testovani. 21. Kovařík, Tomáš. Metody testování e-shopů. Symbio.cz. [Online] Symbio, 14. Srpen 2006. [Citace: 18. Březen 2011.] http://www.symbio.cz/clanky/metody-testovanie-shopu.html. 22. Janouch, Viktor.Internetový marketing. Brno : Computer Press, a.s., 2010. 978-80251-2795-7. 23. Jakob Nielsen, Marie Tahir.Použitelnost domovských stránek. Brno : ZONER Software a.s., 2005. 80-86815-18-8. 24. Kubíček, Michal.Velký průvodce SEO. Brno : Computer Press, a.s., 2010. 978-80251-2195-5.
63
8. Přílohy 8.1. Příloha 1 – Graf trhu prohlížečů ve světě
Trh prohlížečů ve světě Ostatní
Chrome 9.0 Chrome 6.0
Chrome 7.0
Safari 4.0
Chrome 4.0
Safari 5.0
Firefox 3.0
Chrome 8.0
Chrome 5.0
Firefox 3.5
IE 6.0
IE 7.0
Firefox 3.6
IE 8.0
4% 1% 1% 2% 2% 2% 2% 2% 3% 3% 6% 8% 14% 23% 29%
Zdroj:http://gs.statcounter.com/
64
8.2. Příloha 2 – Graf trhu prohlížečů v ČR
Trh prohlížeců v ČR Ostatní
Safari 5.0
Chrome 9.0
Chrome 6.0 Opera 11.0
Chrome 7.0
Chrome 4.0
Opera 10.5
IE 6.0
Firefox 3.0
Chrome 8.0
Chrome 5.0
Opera 10.6
Firefox 3.5
IE 7.0
IE 8.0
Firefox 3.6
5%
1
2% 1% 1% 1% 2% 2% 2% 3% 3% 3% 3% 4% 7% 7% 22% 33%
Zdroj:http://gs.statcounter.com/
65
8.3. Příloha 3 – Hodnocení webu uživateli
66
8.4. Příloha 4 – Srovnávací tabulka Svetlaaosvetlen
Svitidla-
Svitidla.co
Sviditla-svetla-
i.cz
levne.cz
m
osvetleni.cz
10
10
10
10
4
10
8
8
Použitelnost
8
10
10
10
Přístupnost
9
10
9
8
Layout
10
10
10
10
Mapa webu
10
1
5
10
10
5
8
10
Favicon
10
1
10
10
Velikost webu
5
8
7
6
Validita
7
7
10
7
8
7
10
9
5
10
5
10
10
10
9
10
6
6
5
7
2
5
7
8
3
6
7
8
Reklamní aktivity
2
10
8
2
Výsledný průměr
7
7,4
8,1
8,4
Oblast Znaková sada Zobrazování
v
prohlížečích
Robots.txt, Sitemap.xml
Správné strukturování značek Výstupy
na
jednotlivých zařízeních Pěkné adresy Grafická
podoba
webu Pozice
ve
vyhledávačích
na
daná klíčová slova Hodnocení
webu
vyhledávači
67
