Název projektu Rozvoj vzdělávání na Slezské univerzitě v Opavě
Registrační číslo projektu CZ.02.2.69/0.0./0.0/16_015/0002400
Design a správa webové stránky
Distanční studijní text
Martin Klepek, Veronika Braciníková
Karviná 2019
Obor: Marketing
Klíčová slova: design, webový design, interakční design, webová stránka, chování zákazníka,
redakční systém, marketingový výzkum, uživatelský výzkum,
obsah na webu, SEO, online marketing, klíčová slova, vyhledávače, webová
analytika
Anotace: Cílem tohoto studijního materiálu je seznámit studenty se základními pojmy
v oblasti designu a správy webové stránky s důrazem na nové technologické
možnosti, které se objevují s rozvojem publikačních platforem
a analytických nástrojů. Důraz je kladen na důležité oblasti, jako jsou
design, interakční design, redakční systémy, optimalizace webové
stránky pro vyhledávače nebo integrovaná marketingová komunikace a
další. Studijní opora je určena pro studenty bakalářského studijního programu
Marketing. Je ovšem vhodná také pro studenty z širší oblasti podnikové
ekonomiky a managementu.
© Slezská univerzita v Opavě
Obchodně podnikatelská fakulta v Karviné
Autoři: Ing. Martin Klepek, Ph.D.
Ing. Veronika Braciníková
Recenzenti: doc. RNDr. Ing. Roman Šperka, Ph.D.
Mgr. Dáša Mendelová, PhD.
ISBN 978-80-7510-375-8
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
3
Obsah
ÚVODEM............................................................................................................................6
RYCHLÝ NÁHLED STUDIJNÍ OPORY...........................................................................8
1 DESIGN V MARKETINGU.....................................................................................10
1.1 Co si představit pod pojmem design? .................................................................10
1.2 Kreativita.............................................................................................................12
1.2.1 Mýty o kreativitě..........................................................................................12
1.2.2 Základní stavební kameny kreativity...........................................................14
1.3 Design a marketing..............................................................................................15
1.3.1 Design služeb...............................................................................................15
1.3.2 Produktový design .......................................................................................16
1.3.3 Grafický design............................................................................................16
2 PRINCIPY WEBOVÉHO DESIGNU.......................................................................19
2.1 Webový design....................................................................................................19
2.2 Interakční design .................................................................................................21
2.3 Nielsenovy heuristiky..........................................................................................22
3 WEBOVÁ STRÁNKA V MARKETINGU ..............................................................31
3.1 Význam webové stránky pro marketingovou a obchodní strategii.....................31
3.1.1 Webová prezentace a její výkonnost............................................................33
3.1.2 Konflikty v oblasti webdesignu ...................................................................35
3.2 Webová stránka jako nástroj budování značky...................................................37
4 MODELY CHOVÁNÍ ZÁKAZNÍKA NA WEBU...................................................46
4.1 Využití základních psychologických modelů při tvorbě webové stránky...........46
4.1.1 Foggův behaviorální model .........................................................................47
4.1.2 Davisův model akceptace technologie.........................................................50
5 MOŽNOSTI TVORBY WEBOVÉ STRÁNKY .......................................................56
5.1 Doména, webhosting a redakční systém .............................................................56
5.2 Přístupy k tvorbě webu........................................................................................58
5.2.1 Web na míru.................................................................................................58
5.2.2 Použití redakčního systému a šablony.........................................................58
5.2.3 Cloudové editory (Website builder).............................................................62
5.3 Přídavné moduly – pluginy .................................................................................65
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
4
6 PROCES TVORBY WEBOVÉ STRÁNKY.............................................................70
6.1 Proces zpracování webu na míru.........................................................................71
6.2 Proces zpracování webu pomocí redakčního systému ........................................75
6.3 Web vytvořený v cloudovém editoru..................................................................76
7 VYUŽITÍ VÝZKUM PŘI DESIGNU A SPRÁVĚ WEBOVÉ STRÁNKY.............85
7.1 Dotazování ..........................................................................................................86
7.2 Testování použitelnosti (Usability testing) .........................................................87
7.3 Sledování pohybu myši (Mousetracking) ...........................................................88
7.4 Sledování pohybu očí (Eyetracking)...................................................................88
7.5 A/B testování.......................................................................................................89
8 PRÁCE V REDAKČNÍM SYSTÉMU......................................................................96
8.1 Co je to redakční systém?....................................................................................96
8.2 Jak probíhá správa webu v redakčním systému ..................................................97
9 OBSAH NA WEBU ................................................................................................113
9.1 Podstata popisků u elektronického obchodu .....................................................113
9.1.1 Popisky kategorií .......................................................................................114
9.1.2 Popisky produktů .......................................................................................115
9.2 Blog a aktuality jako nástroj aktivní komunikace firmy...................................117
9.3 Značka a její význam pro firemní identitu ........................................................118
9.3.1 Implementace prvků identity značky do webové prezentace firmy...........119
10 PROPAGACE WEBOVÉ STRÁNKY....................................................................128
10.1 Web jako součást integrované marketingové komunikace firmy..................128
10.1.1 Kreativní strategie pro obsah marketingové komunikace..........................130
10.2 Nástroje propagace webové stránky..............................................................131
10.2.1 PPC Kampaně............................................................................................131
10.2.2 Remarketing neboli retargeting..................................................................132
10.3 Konverze a atribuce.......................................................................................133
11 OPTIMALIZACE WEBOVÉ STRÁNKY PRO VYHLEDÁVAČE......................141
11.1 Jak fungují vyhledávače ................................................................................141
11.2 Klíčová slova .................................................................................................144
11.3 Optimalizace webu pro vyhledávače (SEO)..................................................146
11.4 Faktory ovlivňující výsledky vyhledávání ....................................................147
12 ZÁKLADY WEBOVÉ ANALYTIKY....................................................................152
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
5
12.1 Propojení webové stránky s Google Analytics..............................................152
12.2 UTM parametry.............................................................................................153
12.3 Leady .............................................................................................................155
12.4 Analýza rychlosti webu .................................................................................156
LITERATURA ................................................................................................................163
SHRNUTÍ STUDIJNÍ OPORY.......................................................................................166
PŘEHLED DOSTUPNÝCH IKON.................................................................................167
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
6
ÚVODEM
Studijní opora Design a správa webové stránky reaguje na současný dynamický vývoj
v oblasti webové prezentace. V rámci stejnojmenného prakticky orientovaného předmětu
máme za cíl ukázat jednoduché postupy, aplikace a software, které umožní lidem bez hlubokých
technických znalostí připravit a provozovat jednoduchou webovou stránku. Na druhou
stranu ale chceme, aby byli čtenáři po přečtení opory schopni racionálně určit, kdy si
poradí sami a kdy svěřit takový projekt do rukou odborníků.
Tím se dostáváme k druhému cíli, který sledujeme. Chceme posunout úroveň znalostí o
tvorbě webu i u ne techniků z toho důvodu, že často jsou to oni, kteří musí umět vybrat
dodavatele webové stránky, následně s ním komunikovat, posoudit, jestli má kvalitu a je
schopný vybudovat špičkový web. Znalosti nabyté v tomto kurzu by měly pomoci studentům,
pro které není informační technologie koníček číslo jedna poznat základní souvislosti
a stát se lepším partnerem, vzdělanějším a cílevědomějším zákazníkem web designových
studia a agentur.
Studijní opora zachycuje obraz doby a předpokládáme, že bude velmi rychle zastarávat,
proto doporučujeme studentům sledovat odkazy a zdroje uvedené v této studijní opoře, aby
mohli své praktické dovednosti neustále aktualizovat.
Na studijní opoře pracovalo kromě obou autorů také několik externistů z praxe, kteří se
s vámi podělí o své zkušenosti a cenné rady prostřednictvím případových studií. Jedná se
o podnikatele, pro které je web silným nástrojem pro budování značky, pracovníky reklamních
agentur, kteří pomáhají svým klientům s rozvojem online marketingu nebo také
webdesignéři, kteří nabídnou technický pohled. Tímto bychom jim chtěli jmenovitě poděkovat
za čas, který popisu svých případů věnovali:
Jan Korpas – Moravio
Marek Schwarz – Levit (absolvent OPF)
Tomáš Hrabec – konzultant na volné noze
Martin Brablec – Obsahová agentura
Kamil Kotraba – Bonami (absolvent OPF)
Radim Vašíček – Ad Visio
Jan Krupica – Fistro digital (absolvent OPF)
Dalibor Šimek a Tomáš Hercig – La Porte (absolventi OPF)
Studijní opora obsahuje povinné i doplňující distanční a interaktivní prvky. Na začátku
studijní opory je rychlý náhled studijní opory, který umožní studentovi se poměrně rychle
seznámit s obsahovou stránkou předmětu. Jednotlivé kapitoly využívají povinné distanční
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
7
prvky, jako je rychlý náhled do kapitoly, cíle kapitoly a klíčová slova. Rychlý náhled do
kapitoly koresponduje s jednotlivými částmi náhledu studijní opory. Cíle kapitoly zahrnují
všechny podstatné poznatky a vědomosti, které student studiem kapitoly získá. Klíčová
slova doplňují úvodní část kapitoly o přehled základních pojmů, které by student měl zvládnout.
Každá kapitola je rozdělena na subkapitoly a oddíly. Text je strukturovaný tak, aby
byl přehledný. V rámci subkapitol a jejich oddílů jsou dle uvážení autorů barevně zvýrazněné
podnadpisy. Pro názornost a pochopení studijního textu autoři zařadili další interaktivní
prvky, obrázky s grafy a schématy a tabulky. Z interaktivních prvků jsou to především
případové studie, definice, průvodce studiem, doplňky pro zájemce a k zapamatování. Případové
studie a prvky pro zájemce slouží k pochopení teoretických poznatků z praktického
hlediska. Na konci každé kapitoly je shrnutí kapitoly, které upozorňuje na podstatné souvislosti
kapitoly a jejich opakování. Před shrnutím jsou otázky. Otázky jsou propojené s
odpověďmi v textu. Otázky si projděte a ověřte si, zda studované látce rozumíte.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
8
RYCHLÝ NÁHLED STUDIJNÍ OPORY
První kapitola pojednává o designu z pohledu marketingu. Věnuje se pojmu jako takovému
a vysvětluje jeho souvislosti. Jeho pochopení je důležité pro práci na projektech webového
designu v kontextu marketingových aktivit firmy. Ukážeme si také některé mýty o
kreativitě, jejichž vyvrácení nám pomůže přistupovat k tvůrčí činnosti mnohem sebevědo-
měji.
V druhé kapitole si řekneme více o webdesignu jako takovém. Podstatě tohoto termínu
a jeho různé interpretaci. Je to mezioborová disciplína, která využívá poznatky vizuální
komunikace, interakčního designu, psychologie (především ovlivňování a rozhodování
lidí), marketingu, brandingu, copywritingu, gamifikace a dalších oborů.
Ve třetí kapitole se čtenář dozví, jak důležitá je webová prezentace firmy pro její marketingovou
a obchodní strategii, jelikož musí obě oddělení, marketingové i obchodní, spolupracovat
pro neustále zlepšování fungování firmy. Jsou zde popsány základní principy a
faktory, které rozhodují o úspěšnosti webové prezentace. Kapitola je také věnována popisu
procesu určování pozice firmy na trhu.
V rámci čtvrté kapitoly se pozornost zaměřuje na vysvětlení podstaty vybraných modelů
popisujících chování zákazníků. Modely jsou orientovány na pochopení chování jedinců z
hlediska konkrétních faktorů, přičemž naleznou své využití v mnoha oblastech. Pro potřeby
této publikace jsou zasazeni do prostředí webových stránek.
V páté kapitole si popíšeme cestu od nápadu k doméně, hostingu a redakčnímu systému.
Vysvětlíme, k čemu slouží webhosting a proč potřebujeme pro náš web pronajímat prostor
na internetu. Budeme také hovořit o redakčních systémech neboli content management systémech
(CMS). Uvedeme si některé příklady stávajících řešení na trhu a vysvětlíme si jejich
výhody a nevýhody.
V šesté kapitole čtenáře seznámíme s procesem tvorby webové stránky. Začneme představením
výzkumných metod a postupně přejdeme k návrhové části. Tyto informace budou
užitečné jak pro práci na vlastním webu, tak při spolupráci s dodavatelem složitějších řešení.
V rámci kapitoly představíme také případovou studii, která v procesu designu pojednává
o tvorbě drátěného modelu webu což je mezistupeň vývoje návrhu.
V sedmé kapitole se podíváme na možnost využití výzkumu při tvorbě a správě webové
stránky. Nejčastěji používáme výzkumné metody proto, abychom získali potřebná fakta
pro rozhodování. Máme předpoklad, který chceme testovat a využijeme proto formalizovaný
postup výzkumu, během kterého definujeme problém, sbíráme data, vyhodnocujeme
je a děláme rozhodnutí.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
9
Osmá kapitola odkrývá možnosti správy webu pomocí redakčního systému. Tyto systémy
ulehčují běžnému uživateli administraci bez nutnosti znalostí HTML kódu. Je to software
zajišťující správu dokumentů, nejčastěji webového obsahu. V dnešní době se jako
CMS zpravidla chápou webové aplikace, někdy s případným doplňkovým programovým
vybavením u klienta.
Devátá kapitola pojednává o webu z hlediska obsahu, kterým je vyplněn. Na začátku
kapitoly je identifikována důležitost uvedení popisků k produktovým kategoriím nebo k
produktům samotným. Dále je v kapitole rozebrána důležitost a zásady blogu, který představuje
jeden ze základních nástrojů aktivní komunikace firmy.
V desáté kapitole je vylíčen proces vytváření pozice webu v rámci integrované marketingové
komunikace firmy a jsou charakterizovány kreativní strategie spolu s apely vyskytujícími
se v reklamních sděleních. Dále se v této kapitole podíváme na možnosti propagace
webu jako speciální kategorii správy webové stránky.
V jedenácté kapitole si ukážeme, jak fungují internetové vyhledávače. To, jak lidé dnes
navštěvují webové stránky, se po nástupu vyhledávačů změnilo. Často cesta zákazníka vede
právě přes vyhledávač a dohledatelnost webové stránky je tak velkou konkurenční výhodou.
Dohledatelnost se ale za poslední roky stále posouvá a webdesignéři a marketéři pracují
na optimalizaci webových stránek pro vyhledávače. Ukážeme si faktory, které pozice
ve výsledcích vyhledávání ovlivňují.
Poslední kapitola odhaluje souvislosti webové analytiky, což je disciplína, která je založena
na poznávání dat a formování informací z těchto dat. Jedná se především o zdroje
návštěvnosti, chování uživatelů na stránce a další aktivity, které následně marketéři využívají
pro své kampaně a webdesigneři pro iterativní zlepšování webové prezentace.
Design v marketingu
10
1 DESIGN V MARKETINGU
RYCHLÝ NÁHLED KAPITOLY
První kapitola pojednává o designu z pohledu marketingu. Věnuje se pojmu jako takovému
a vysvětluje jeho souvislosti. Jeho pochopení je důležité pro práci na projektech
webdesignu v kontextu marketingových aktivit firmy. Dále vysvětlíme, co je kreativita, jak
ji správně chápat a jaké jsou její složky neboli komponenty. Ukážeme si některé běžné
mýty o kreativitě a pokusíme se je vyvrátit. Po prostudování byste měli mít větší sebevědomí
tvořit, a to nejen v projektech webové stránky ale v životě obecně. Nakonec si ukážeme,
jak se dá využít designového myšlení v oblasti produktů a také grafického designu.
CÍLE KAPITOLY
• Představit pojem design.
• Popsat postupy činnosti designéra.
• Vysvětlit a demystifikovat koncept kreativity.
• Představit využití designu ve službách.
• Specifikovat produktový design.
• Specifikovat grafický design.
KLÍČOVÁ SLOVA KAPITOLY
Design, kreativita, design služby, produktový design, grafický design.
1.1 Co si představit pod pojmem design?
V literatuře nacházíme řadu definic konceptu s názvem „design“. Pokud byste se zeptali
deseti odborníků na to co je design, dostali byste jedenáct různých definic. Jedná se o
velmi abstraktní záležitost a lidé z různých oblastí přináší do diskuse své vlastní postoje a
pohledy. Co lze ale spatřit napříč všemi autorskými texty je shoda na tom, že design je
proces. Proces, který má jasně stanovený začátek, prostředek a konec. Pro práci v oblasti
designu jsou tak nutné také základy projektového řízení. V rámci procesu je běžné pracovat
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
11
v týmu, proto jsou pro bezproblémový chod projektu designu důležité také týmové kompetence.
Zřídka je proces zajištěn jednotlivcem.
To nás přivádí k jedné z největších chyb při laickém definování designu. Často si toto
slovo spojujeme s uměním a designéra s talentem a uměleckým cítěním. Naše představa o
procesu tvorby designéra pak sklouzává k výstředním podivínům v rolácích, zavřených ve
studiích a ateliérech daleko od civilizace. Dlouhodobě ale všichni lidé, kteří používají různé
designové metody prokazují, že design není výsadou talentovaných jednotlivců, ale je naučitelný.
Zároveň nejlepších výsledků dosahují týmy, nikoliv jednotlivci. Navíc se ukazuje,
že týmy pestré svou skladbou, kde jsou lidé z různých oborů a odvětví přináší do problematiky
nečekaná řešení díky tomu, že jsou zvyklí přistupovat k problémům z rozdílných
hledisek (HCR – design zaměřený na člověka).
Další mýtus je samota designéra, který se nechá inspirovat a následně stráví se svým
dílem dlouhé týdny a měsíce v ústraní. Tato představa je ale mylná. Design je vytvářen pro
lidi, tedy špičkový design je postaven na základech výzkumu kvalitativní i kvantitativní
povahy. Navrhování smysluplných a inovativních řešení, která budou klientům k prospěchu,
začíná právě u porozumění jejich potřebám, nadějím a přáním do budoucna (HCR –
design zaměřený na člověka). Jak se v průběhu studia dozvíte, jedná se o proces, kdy je
zákazník zapojen v několika fázích. O dlouhodobém odloučení designéra od koncového
uživatele jeho produktu se zde nedočtete. Naopak v řadě případů je nutné design s uživatelem
intenzivně iterovat tedy opakovat setkání s ním a získávat zpětnou vazbu pro další
zásahy do díla a úpravy. Pokud bychom přece jen měli jednu definici vybrat, poslouží tato.
DEFINICE
Design je lidská činnost, během které tvoříme plán pro tvorbu věcí, které mají za cíl
přinášet hodnotu pro potenciální uživatele, tak aby jim pomáhaly v dosahování jejich vlastních
cílů. (Dorst and Overveld, 2009)
Design a umění jsou tedy odlišné pojmy přesto, že se mnohdy doplňují. Základní rozdíly
ilustruje tabulka 1 níže.
Tabulka 1: Rozdíl mezi výborným designem a výborným uměním
Design Umění
Motivuje Inspiruje
Je pochopen Je interpretováno
Je otázkou schopností Je otázkou talentu
Každý jej chápe stejně Každý ho chápe po svém
Zdroj: Webový portál Web Designer Depot [online] [vid. 14. března 2019]. Dostupné z:
https://www.webdesignerdepot.com/2009/09/the-difference-between-art-and-design/
Design v marketingu
12
1.2 Kreativita
Kreativita je jednou z nejdůležitějších vlastností lidského mozku, přesto však neexistuje
jediná, obecně přijímaná definice kreativity. Obecně ale můžeme říci, že se jedná o schopnost
produkovat originální a neobvyklé nápady, nebo dělat něco nového nebo originálního.
Jelikož pomocí výpočetní techniky stále více rutinních procesů a činností firmy automatizují,
je to právě schopnost tvůrčí činnosti, která se stává významnou konkurenční výhodou
na trhu práce nebo ve vlastním podnikání.
1.2.1 MÝTY O KREATIVITĚ
V publikaci Nástroje inovátora (The Innovator’s toolkit) hovoří Richard Luecke o řadě
vědeckých studií, které boří některé mýty o kreativitě. Je dobré si je ve studijním textu
týkajícím se designu připomenout, jelikož se řada lidí ve své kreativitě podceňuje, což vede
k tomu, že se kreativní ani nesnaží být, čímž paradoxně snižují svou šanci se kreativitě
naučit. Pojďme si ale nyní projít některé z těchto mýtů a postupně je vyvrátit. Určitě už jste
o některém z nich slyšeli. Luecke (2009, s. 165) k mýtům říká:
1) Mýtus číslo 1: Čím chytřejší jste, tím jste kreativnější
Realita: Inteligence souvisí (koreluje) s kreativitou pouze do jisté míry.
Jakmile dosáhnete určité úrovně inteligence, která je nutná pro zvládnutí vaší práce,
souvislost s kreativitou se vytratí. Výzkumy ukazují, že se jedná o IQ okolo 120.1
Za touto
hranicí již mezi inteligencí a kreativitou nevidíme souvislost. Navíc zatím stále neexistuje
ucelený test kreativity, který by nám pomohl determinovat kreativní sílu jednotlivce. Test
IQ tedy od určité hranice nemůže sloužit k tomu, abychom například do týmu vybrali kreativnějšího
člověka.
2) Mýtus číslo 2: Mladí lidé jsou kreativnější než ti starší
Realita: Věk není jasný determinant kreativního potenciálu.
Výzkumy ukazují, že stát se expertem v jakékoliv oblasti trvá 7 až 10 let. Jde o takovou
úroveň expertízy, která umožňuje vidět souvislosti, které nováčci přehlédnou. Proto je
možné v businessu nalézt kreativitu u lidí v jakémkoliv věku. Stejně tak ale může expertíza
kreativitu potlačovat tím, že vzniká určitá provozní slepota2
, kdy zkušení pracovníci nevidí
1
V České republice je podle serveru iq-research.info v populaci průměr 98 bodů. To znamená, že by se vysokoškolsky
vzdělaný člověk měl dostat na hranici 120 bodů velmi snadno. Pokud dokončíte studium, inteligence
by neměla být limitem vaší kreativity.
2
Provozní slepota je stav kdy kvůli rutinní činnosti a soustředění se na jednu aktivitu dlouhou doby eliminuje
možnost vidět věci v širším kontextu.
Definice
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
13
nebo nepřemýšlí mimo svou komfortní zónu. Doporučení pro sestavování týmů je pak kombinace
expertů a nováčků. Veteráni mají zkušenosti a nováčkovská mysl není svázána konvenčním
myšlením.
3) Mýtus číslo 3: Kreativita je pro okázalé riskující lidi.
Realita: Ochota přijmout dobře propočítané riziko souvisí s kreativitou.
Koneckonců inovátor vstupuje do neznámého území a využívá podnikové zdroje pro
řešení situací, které by mohly být využity na méně riskantní projekty. Dá se říct, že také
vkládá svou „hlavu na špalek“ a ohrožuje svou kariéru, pokud tyto zdroje přijdou vniveč.
Být kreativní ale určitě neznamená bezhlavě riskovat. Neznamená to ani být odlišný od
ostatních či být extravagantní. Kreativita není výsadou okázale riskujících.
4) Mýtus číslo 4: Kreativita je výsadou jednotlivců
Realita: Ano, mnoho kreativních řešení problémů jsou produktem jedné mysli, jednoho
člověka pracujícím v ústraní.
Newton například vyvinul své nejznámější teorie optiky, gravitace a počtů během dvou
let, kdy žil v ústraní na rodinné farmě kvůli propuklé morové epidemii, která způsobila
dočasné uzavření Cambridžské univerzity. Určitě tyto dva krátké roky strávené na venkově
patřily k jeho nejproduktivnějším. Přesto je ale obrovské procento nejdůležitějších vynálezů
a převratných technických objevů produktem spolupráce skupiny, ve které se jedinci
vhodně doplňují. Za všechny je to například projekt Apollo, který dostal člověka na povrch
měsíce. Thomas Edison, nejplodnější vynálezce a inovátor své doby, nepracoval sám. Byl
v centru skupiny techniků, mechaniků a asistentů, kterým se říkalo „tým nespavců“3
podle
jejich zvyku pracovat do brzkých ranních hodin. Chytří manažeři, kteří vědí, jak silná je
skupinová kreativita, spojují lidi do týmů tak, aby se vzájemně doplňovali.
5) Mýtus číslo 5: Kreativita se nedá řídit
Realita: Zajisté, nikdy nemůžeme vědět dopředu, kdo z lidí okolo nás přijde s kreativní
myšlenkou, kreativita se však dá ovlivnit.
V tomto ohledu skutečně nelze kreativitu řídit, vynutit, zapnout. Manažeři ale mohou
vytvářet podmínky pro to, aby k těmto momentům docházelo častěji (odměny, zdroje, procesy).
Kreativitě tedy lze pomoci a manažer má v rukou množství nástrojů, kterými tohoto
cíle může dosáhnout. Co ji může ovlivnit, si ukážeme dále.
3
V originále Insomnia Brigade.
Design v marketingu
14
1.2.2 ZÁKLADNÍ STAVEBNÍ KAMENY KREATIVITY
Abychom věděli, jak rozvíjet kreativitu na individuální i týmové úrovni je dobré podívat
se na její předpoklady (obrázek 1).
Obrázek 1: Komponenty kreativity
Zdroj: Webový portál Harvard Business School [online] [vid. 8. března 2019]. Dostupné z:
https://www.hbs.edu/faculty/Publication%20Files/12-096.pdf
Mistrovství je soubor znalostí, které jsou oborově relevantní k řešenému problému.
Jedná se o technické, procedurální a intelektuální dovednosti. Při tvorbě webové stránky
tak zcela určitě nemůžeme přeskočit základní znalosti fungování webu. Dále jsou pro kreativitu
důležité samotné dovednosti kreativního myšlení. Zde je ukazatelem kvality myšlení
to jak flexibilně a s jakou představivostí přistupují lidé k řešení problémů. Motivace
je popsána jako vnitřní nadšení řešit problém a vede k mnohem kreativnějším řešením než
stimulace.
Kromě osobní úrovně těchto komponent je kreativitu nutné podporovat také kontextem,
ve kterém jedinec nebo tým pracuje. Studie ukazují, že prostředí, kterým se týmy obklopují,
hraje významnou roli v tom, jakých kreativních výkonů nakonec dosáhnout. Protože kreativita
je jedním z největších a nejdůležitějších osobních a organizačních zdrojů, měla by
být živena, podporována a u všech povzbuzována.
Návod
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
15
1.3 Design a marketing
Design v marketingu je více než loga, obrázky, rozvržení webových stránek a originální
písma (fonty), zahrnující estetiku značky. Je to střed všeho dění, které spojuje firmu se
značkou, a nakonec se zákazníkem. Logo vám dodá grafik, obrázky fotograf, s rozvržením
webových stránek vám poradí webový designér a s fonty typograf. Značku vám dodá designové
studio nebo marketingová agentura. Stejně jako když stavíte dům budete potřebovat
stavební firmu i projektovou kancelář s architekty. Každý má v projektu svou roli. Nechtějte,
aby si je vyměnili.
Design v marketingu ovlivňuje také nehmotné aspekty značky, a to jak je celá organizace
nastavena. „Tyto dva kreativní obory jsou stavebním kamenem pro příběh úspěšné
značky. Díky jejich promyšlené spolupráci vznikají produkty s opravdovou hodnotou a
spotřební kultura se stává kvalitnější.“4
Jak jsme si řekli je design širší pojem, který dále můžeme rozvíjet ve specifických oblastech.
Relevantní pro marketing jsou mimo webového designu, o kterém bude zbytek
studijní opory, také tyto tři: design služby, produktový design a grafický design.
1.3.1 DESIGN SLUŽEB
Design služeb je disciplína zabývající se tvorbou lepších řešení v oblasti služeb. I zde
platí tradiční marketingové posloupnost: diagnóza situace, náměty a návrhy, vývoj a testování
řešení. Výstupem procesu designu služby je pak zlepšení, které se projeví ve zvýšení
úrovně poskytované služby. Hlavním cílem je zlepšení zákaznické zkušenosti (customer
experience - CX) která je v odvětví služeb klíčová.
Složité na práci designera v oblasti služeb je, že je každá služba jiná a neexistuje jasně
daný proces pro zlepšování. Vždy ale narazíme na průzkum u klíčových zájmových skupin
(zákazníci, zaměstnanci, manažeři, majitelé, zástupci místní samosprávy, partneři), často je
také zapojíme do tvorby námětů a návrhů. Vytvoříme prototyp služby a testujeme jej na
zákaznících ideálně ve skutečných situacích. Tým může například připravit fiktivní pobočku,
ve které bude testovat nové procesy pro zlepšení služby.
Jedná se o poměrně nové odvětví, které nahlíží na funkcionalitu i formu služeb z pohledu
jejich uživatele. „Aplikuje nástroje a metodologii designu na nehmotné produkty, tj. služby,
za účelem tvorby řešení, která jsou užitečná, použitelná a atraktivní z pohledu zákazníka a
efektivní a konkurenceschopná z pohledu poskytovatele.“5
Spojuje v sobě několik různých
disciplín, jako je marketing a chování zákazníka, management a řízení procesů, podniková
strategie, rozvoj lidských zdrojů nebo IT a technologie.
4
Webový portál Czech Design [online] [vid. 10. března 2019]. Dostupné z: http://www.czechdesign.cz/ka-
lendar-akci/design-a-marketing
5
Webový portál Czech Design [online] [vid. 10. března 2019]. Dostupné z: http://www.czechdesign.cz/ka-
lendar-akci/design-a-marketing
Definice
Definice
Design v marketingu
16
1.3.2 PRODUKTOVÝ DESIGN
Definice produktového designu se různí ale například designové studio Cotu uvádí „že
produktový design je kreativní proces, na jehož začátku identifikujeme nějakou potřebu
trhu nebo zajímavou příležitost. Pro daný problém pak hledáme nejlepší řešení tak, aby
vyhovovalo technickým požadavkům a zároveň bylo atraktivní. Při návrhu se zohledňuje
mimo jiné poměr cena/kvalita, potřebné materiály, ergonomie a mnoho dalšího.“6
Součástí produktu je také velmi často jeho obal, obzvlášť na spotřebitelských trzích.
Obal můžeme vnímat ve dvou rovinách. Jako součást produktu, kdy jeho zpracování rozhoduje
o tom, jak bude produkt jako celek použitelný, jak bude snadné jej přepravovat
případně nést, jak pohodlné a jednoduché bude rozbalení a tak dále. Druhou rovinou je jeho
grafický design (viz níže), který ovlivní jeho viditelnost na prodejně. Zákazníci se právě na
prodejně velmi často impulzivně rozhodnou o koupi produktu, proto je obal důležitým prvkem
produktového designu.
Obrázek 2: Grafický design obalu jako součást designu produktu
Zdroj: Webový portál Thimm [online] [vid. 10. března 2019]. Dostupné z: https://www.thimm.cz/vyrobky-
sluzby/sluzby/graficky-design-obalu/
1.3.3 GRAFICKÝ DESIGN
Kromě designu obalu, o kterém jsme již mluvili, můžeme využít grafický design i v dalších
oblastech vizuální komunikace. V reklamě, při tvorbě vizuální identity značky (logo,
barvy, tvary, písmo), v prezentacích, výročních zprávách, na fakturách, v publikacích a samozřejmě
také při tvorbě webu.
Podle Unie grafického designu je grafický design důležitý, a to hned z několika hledisek:
„Úhledná sazba prostá chyb usnadňuje čtení a šetří čtenáři zrak, ergonomicky navržená
webová prezentace umožní návštěvníku rychle najít požadované informace. Přehledný internetový
obchod vychází vstříc potřebám zákazníků, přinese svému majiteli o mnoho více
realizovaných nákupů a výrazný finanční efekt. Sjednocené vystupování uvnitř i vně firmy
6
Webový portál Cotu [online] [vid. 10. března 2019]. Dostupné z: https://www.cotu.cz/blog/29/produk-
tovy-design
Definice
Příklad
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
17
pomáhá srozumitelně komunikovat se všemi lidmi, kteří s ní přicházejí do styku. Na trhu,
kde existuje celá řada obdobných produktů, se stává jejich prezentace konkurenční výhodou,
znakem profesionality, progrese, péče o vlastní dílo. Je-li prezentace kvalitní, roste i
prestiž firmy či instituce, zvyšuje se také povědomí o značce a s ní souvisejících službách.“7
Výtvarné návrhy grafického designu jsou vytvářeny na objednávku za určitým účelem
a jsou určeny k průmyslovému zpracování. Grafičtí designéři vytvářejí a kombinují symboly,
obrazy a text a vytvářejí vizuální reprezentace nápadů a zpráv. Používají typografické,
vizuální umění a techniky rozvržení stránky pro vytváření vizuálních kompozic.8
TESTOVÉ OTÁZKY
Otestujte si získané znalosti z kapitoly č. 1. Pouze jedna odpověď je správná.
Správné odpovědi naleznete na konci kapitoly.
1. Design je:
a) Výsadou talentovaných jedinců.
b) Naučitelný.
c) Exkluzivně pro designéry.
2. Které komponenty kreativity známe?
a) Mistrovství, motivace a inteligence.
b) Motivace, stimulace, reakce.
c) Mistrovství, motivace a dovednosti kreativního myšlení.
3. Které tvrzení je nepravdivé?
a) Kreativitu lze v průběhu života zlepšovat.
b) Kreativita není výsadou okázale riskujících.
c) Mladí jsou kreativnější než staří.
4. Prvky vizuální komunikace nám pomůže vytvořit:
a) Design služby.
b) Produktový design.
c) Grafický design.
5. Vnitřní nadšení řešit problémy nazýváme:
a) Kreativita.
b) Motivace.
c) Invence.
7
Webový portál Unie grafického designu [online] [vid. 10. března 2019]. Dostupné z: https://unie-grafic-
keho-designu.cz/proc-je-graficky-design-uzitecny/#.XMvym-j7RPY
8
Webový portál Wikipedia [online] [vid. 10. ledna 2019]. Dostupné z: https://cs.wikipedia.org/wiki/Gra-
fick%C3%BD_design
Design v marketingu
18
SHRNUTÍ KAPITOLY
Po prostudování kapitoly č. 1 byste měli umět:
• Chápat principy designu.
• Chápat kreativitu jako dovednost ke zlepšování.
• Definovat komponenty kreativity.
• Nebát se tvořit a zvyšovat tak své kompetence.
• Rozlišit využití designu ve službách, produktovém designu a grafickém designu.
ODPOVĚDI NA TESTOVÉ OTÁZKY
1b, 2c, 3c, 4c, 5b
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
19
2 PRINCIPY WEBOVÉHO DESIGNU
RYCHLÝ NÁHLED KAPITOLY
V této kapitole si řekneme více o webdesignu jako takovém. Podstatě tohoto termínu a
jeho různé interpretaci. Je to mezioborová disciplína, která využívá poznatky vizuální komunikace,
interakčního designu, psychologie (především ovlivňování a rozhodování lidí),
marketingu, brandingu, copywritingu, gamifikace a dalších oborů. Dále se zaměříme na
interakční design, jeho vymezení jako oboru zabývajícího se návrhem interakcí uživatele a
systému. Řekneme si, že podstatou interakčního designu je dialog naproti monologu, který
známe z designu tradičního. Na závěr kapitoly si projdeme deset heuristik, které umožní
testovat aplikaci nebo webovou stránku bez nutné účasti uživatele.
CÍLE KAPITOLY
• Vysvětlit pojem webdesign.
• Přiblížit cíle webové stránky v souvislosti s webdesignem.
• Porozumět interakčnímu designu.
• Ovládat základní prvky interakčního designu.
• Znát chápat a používat Nielsenovy heuristiky.
KLÍČOVÁ SLOVA KAPITOLY
Webdesign, cíle webové stránky, redesign, interakční design, heuristika, Nielsenovy
heuristiky.
2.1 Webový design
Webdesign je mezioborová disciplína, která využívá poznatky vizuální komunikace, interakčního
designu, psychologie (především ovlivňování a rozhodování lidí), marketingu,
brandingu, copywritingu, gamifikace a dalších oborů. Cílem webdesignu je vytvořit
Definice
Principy Webového designu
20
funkční webové stránky nebo webové aplikace. Funkční znamená, že splňují především
následující kritéria:9
• Na web přicházejí relevantní návštěvníci.
• Web je ovlivňuje/pomáhá jim tak, že provedou konverzní akci (akce), která je v souladu
se záměrem tvůrce webu.
• Návštěvníci se na web vrací a provádějí stejnou nebo další akce.
• Web návštěvníky zaujme natolik, že o něm mluví sami od sebe s dalšími členy cílové
skupiny webu.
Nejjednodušší je vysvětlit webdesign jako průnik vizuální komunikace, obsahové
strategie a interakčního designu, které doplňují vhodné marketingové aktivity. Webdesigner
tedy vytváří vizuální systém pro obsah, který vhodným způsobem strukturuje a vzájemně
provazuje tak, aby bylo dosaženo maximálního účinku vzhledem k cílům webu a
jeho konverzním akcím. Tvorba webových stránek klade vyšší důraz na kvalitní obsah, u
webových aplikací je nejdůležitější složkou interakční design.10
CÍLE WEBOVÉHO DESIGNU
Jak jsme si již vysvětlili, je cílem výborného designu, aby motivoval uživatele k akci.
To znamená, že vytvořit krásnou webovou stránku nutně nemusí znamenat, že jsme skutečně
ve správném slova smyslu provedli „design“. Pokud je stránka esteticky výjimečná
ale nemotivuje návštěvníka k akci, nebo nemění jeho postoje k dané značce či produktu,
pak nebude dlouhodobě přinášet firmě hodnotu. Když si uvedené shrneme tak je tedy cílem
webu přinášet majiteli a návštěvníkům stránek hodnotu. Tomu by měla být podřízena snaha
webdesignera a investice do tvorby webu by se měla při dodržení těchto podmínek vrátit.
Připomeňme notoricky známou zkratku pro stanovování cílů SMART, kterou lze aplikovat
také při stanovení cílů webu:
• Specifický
• Měřitelný
• Akceptovatelný
• Reálný
• Termínovaný
Při dodržení tohoto postupu bychom měli vždy dojít k cílům, které budou stanoveny
správně, a jejich dosažení nejenže bude možné, ale také povede k požadovaným obchodním
výsledkům.
9
Webový portál Wikipedia [online] [vid. 10. ledna 2019]. Dostupné z: https://cs.wikipe-
dia.org/wiki/Webdesign
10
Webový portál Wikipedia [online] [vid. 10. ledna 2019]. Dostupné z: https://cs.wikipe-
dia.org/wiki/Webdesign
Návod
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
21
K ZAPAMATOVÁNÍ
„Jak to funguje, je důležitější, než jak to vypadá.“ (Osborn, 2017, s. 5)
V čase se samozřejmě v závislosti na obchodní strategii mohou cíle webu měnit, proto
přichází na řadu redesign, což je proces zásadní změny struktury obsahu, informační architektury
nebo interakčního designu. K redesignu se firma uchýlí také, pokud webová
stránka dlouhodobě neplní cíle a drobné úpravy nevedou ke změnám. Zároveň je prokazatelné,
že ostatní prvky marketingového mixu jsou v pořádku a příčina je tedy skutečně nekvalitní
design webu. Pokud tedy stránka neplní cíle, nebo se tyto její cíle změnily, máme
zelenou k tomu začít uvažovat nad redesignem (viz obrázek 3).
Obrázek 3: Možné kombinace důvodů k redesignu
Zdroj: vlastní zpracování
Aby web fungoval, jak jsme si nyní popsali, je dobré se pustit do rozuzlení dalšího důležitého
pojmu, který se váže na samotné vlastnosti prostředí internetu a tím je interakční
design.
2.2 Interakční design
Interakční design je jedním z nových oborů z kategorie výpočetní techniky a je výrazem
ze světa tvorby webových stránek a aplikací. Často je chybně zaměňován s pojmem informační
architektura. Je to obor zabývající se návrhem interakcí. Tradiční design se zabývá
monologem, jako je tomu například u tištěných médií. U interakčního designu jde o dialog,
který uživatel povede například s počítačem, mobilním telefonem, bankomatem apod.11
11
Webový portál Wikisofia [online] [vid. 10. ledna 2019]. Dostupné z: https://wikisofia.cz/wiki/Prin-
cipy_interak%C4%8Dn%C3%ADho_designu#cite_note-3
Definice
Principy Webového designu
22
Základní prvky interakčního designu jsou:12
• Pohyb: interakce je typ komunikace a komunikace je typem pohybu.
o Když mluvíme, rozhýbáváme naše mluvící ústrojí, když píšeme, používáme
ruce.
o Pohyb je spouštěčem akce – například když klikneme na myš, čímž akce
pokračuje dál – klikáme na konkrétní věc na obrazovce (například na odkaz
na webu) a získáváme zpětnou vazbu od zařízení (otevírá se stránka).
• Prostor: Pohyb ale i všechny interakce se dějí v prostoru (i ve virtuálním prostoru
na internetu) a prostor těmto pohybům dodává kontext.
• Čas: Všechny interakce se dějí v čase.
o Tento čas může být krátkého charakteru (kliknutí na myš) nebo dlouhého
(archivované desítky let staré bulletiny).
o Interakční designér musí mít dobrou představu o čase a umět s ním dobře
zacházet (některé procesy trvají pár okamžiků, jiné jsou dlouhodobějšího
charakteru a vyžadují čas na zprocesování).
• Vzhled: Vzhled objektu nám napovídá o tom, jak se to chová a jak bychom s objektem
měli interagovat.
o Tlačítko nám například napovídá, že bychom ho měli stisknout.13
• Textura: Textura může být součástí vzhledu objektu, dotykový kontakt s objektem
nám ale dodává více informací.
o Kromě toho, jak může být objekt používán, nám navíc dává nápovědu o
tom, kde může být používán.
o Vzhled stejně jako textura mohou vyvolávat konkrétní emoce spojené s
objektem.
• Zvuk: Tvoří sice malou část interakčního designu, i tak je ale důležitý například u
zařízení jako jsou budíky, meteostanice, chytré domácnosti nebo alarmy.
2.3 Nielsenovy heuristiky
Způsobem, jak testovat aplikaci nebo webovou stránku bez využití uživatelů je heuristická
analýza, která vychází z poznatků, které byly získány dlouhodobým pozorováním.14
Jedná se o soubor zkušeností, jak jsou uživatelé zvyklí se systémem pracovat a co od něho
očekávají.
Jednou z těchto analýz je Nielsenova heuristická analýza, která se skládá z deseti základních
pravidel, které je nutno zkontrolovat, aby byla zajištěna odpovídající použitelnost
12
Webový portál Wikisofia [online] [vid. 10. ledna 2019]. Dostupné z: https://wikisofia.cz/wiki/Prin-
cipy_interak%C4%8Dn%C3%ADho_designu#cite_note-3
13
Určitě jste na nějakém webu sami našli prvek, který vypadal jako talčítko ale nešel zmáčknout. Obráceně
pak zase někdy vidíme prvky, které umožňují kliknutí ale vizuálně to nenapovídají a přišli jsme na tuto
možnost spíše náhodou.
14
Webový portál Vojta Svoboda [online] [vid. 18. ledna 2019]. Dostupné z: http://blog.vojtasvo-
boda.cz/nielsens-heuristic-evaluation
Návod
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
23
a intuitivní ovládání aplikace.15
Tyto pravidla je dobré mít na paměti již při vytváření návrhu
webové stránky. Pojďme si je nyní postupně představit:16,17
1. Viditelnost stavu systému
Stav systému musí být vždy viditelný. Uživatel musí vždy vidět, v jakém stavu se aplikace
nachází, jestli čeká na nějaký vstup, nebo provádí určitou operaci, například pomocí
ikonky přesýpacích hodin, nebo rotujícího kolečka.
2. Propojení systému a reálného světa
Systém by měl mluvit jazykem uživatele, slovy, frázemi a koncepty, které jsou uživateli
známy, spíše než systémově orientovanými. Dodržujte konvence v reálném světě, informace
se objevují v přirozeném a logickém pořadí.
3. Uživatelská kontrola a svoboda
Uživatelé často omylem zvolí funkce a budou potřebovat jasně označený „nouzový východ“,
aby opustili nežádoucí stav, aniž by museli procházet složitým procesem nápravy.
Nabídněte operace zpět a opakovat.
4. Standardizace a konzistence
Systém by měl být konzistentní jak vzhledově, tak i co se týče ovládání. Popisky stejných
akcí by měli mít stejný název, nemělo by se střídat např. uložit/upravit. Stejně tak by
se měl používat konzistentně výchozí vzhled, dle použitého systému a standardní ovládací
prvky.
5. Prevence chyb
Systém by měl předcházet chybovým stavům, např. pomocí potvrzovacích dialogů a
varování. Je vhodné upozornit uživatele, pokud zapomene vyplnit povinné položky formuláře,
stejně tak jako zeptat se, že si opravdu přeje smazat vybraný adresář i přesto, že není
prázdný.
6. Rozpoznání namísto vzpomínání
Uživatel by měl být při používání systému co nejméně kognitivně zatížen. To zajistíme
tím, že bude systém nabízet pouze volby, které lze vybrat a ostatní skryje, nebo vizuálně
15
Webový portál Vojta Svoboda [online] [vid. 18. ledna 2019]. Dostupné z: http://blog.vojtasvo-
boda.cz/nielsens-heuristic-evaluation
16
Webový portál Vojta Svoboda [online] [vid. 18. ledna 2019]. Dostupné z: http://blog.vojtasvo-
boda.cz/nielsens-heuristic-evaluation
17
Webový portál Nielsen Norman Group [online] [vid. 18. ledna 2019]. Dostupné z:
https://www.nngroup.com/articles/ten-usability-heuristics/
Principy Webového designu
24
zneplatní. Dále je vhodné použití drobečkové navigace, stránkování, nebo zvýraznění pozice
ve stromové struktuře, aby uživatel ihned viděl jeho aktuální pozici v systému.
7. Flexibilní a efektivní použití
Systém musí být efektivní a jednoduchý pro použití. Zároveň však musí poskytovat i
dostatečný počet voleb, které využijí hlavně pokročilí uživatelé. V rámci možností je také
vhodné poskytovat uživatelům klávesové zkratky anebo funkce automatického doplňování
vstupních polí.
8. Estetický a minimalistický
Systém by měl zobrazovat co nejméně informací a voleb, tak aby práce v něm byla co
nejrychlejší, přehledná, a uživatel musel co nejméně přemýšlet. Položky a volby, které nejsou
často využívány, není vhodné umísťovat přímo na běžně používané obrazovky.
9. Pomoc uživatelů pochopit, poznat a vzpamatovat se z chyb
Systém by měl uživateli poskytovat srozumitelné chybové zprávy tak, aby měl uživatel
možnost chyby obratem opravit a věděl, co po něm systém vyžaduje. Zprávy by měly být
v běžném jazyce a musí zároveň informovat o možném řešení problému.
10. Nápověda a návody
Systém musí poskytovat nápovědu přesně tam, kde jí uživatel očekává a v situacích, kdy
je nejvíce potřeba. Například vyplňování formulářů, zakládaní nových projektů apod. Nápověda
by měla být buď kontextová (přímo u daného prvku), nebo globální s možností
vyhledávání.
PRŮVODCE STUDIEM
Milí studenti, nyní se dostáváme k první případové studii. Týká se redesignu webové
stránky úspěšné české firmy FINIDR z Českého Těšína. Na tomto projektu pracovala firma
Moravio a je na celém procesu krásně viditelná snaha hledat především účel webu a jeho
hodnotu pro uživatele. Všimněte si definice rolí uživatelů webu, pro které má stránka přinášet
zmíněnou hodnotu. Některé výzkumné techniky jako hloubkové rozhovory teprve
budeme probírat, neváhejte se tak k případové studii vrátit s již nabytými znalostmi.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
25
PŘÍPADOVÁ STUDIE
REDESIGN WEBOVÉ PREZENTACE PRO TISKÁRNU FINIDR
Popis projektu
FINIDR je společnost sídlící v Českém Těšíně a patří mezi největší výrobce knih ve
střední Evropě. Ročně vyrobí více než 24 milionů knih, které vyváží do 45 zemí světa a její
roční obrat přesahuje 900 milionů korun. Vzhledem k neustálému růstu společnosti, vznikla
potřeba redesignovat stávající web, který nesplňoval nároky na formu prezentace společnosti
FINIDR a jeho správu.
Stanovení cílů projektu
Před zahájením práce na samotném návrhu nové webové prezentace bylo potřeba stanovit
cíle projektu a očekávání klienta. Po prvotních jednáních s klientem a zevrubné analýze
společnosti a stávající webové prezentace jsme definovali, že s webem na straně FINIDRu
pracují následující role:
• obchodní zástupci,
• pracovníci zákaznického servisu,
• HR specialisté,
• marketingoví specialisté,
• pracovníci IT oddělení.
Dle toho jsme provedli hloubkové pohovory v sídle klienta, kde jsme si postupně zavolali
zástupce jednotlivých oddělení, abychom zjistili jejich potřeby, problémy s aktuálním
webem a jak se chovají návštěvníci webu z pohledu jejich oddělení. Ze získaných informací
jsme sestavili cílové skupiny, kterým je web určen a které jej budou navštěvovat za účelem
nalezení potřebných informací.
Cílové skupiny
Potenciální zákazníci / stávající zákazníci
• Publisheři (nakladatelství) - nakladatelství mají své lidi, kteří vyhledávají a sjednávají
tisk jimi publikovaných knih s tiskárnami. Dělají obchod tzv. napřímo. V ČR
nejvíce zastoupený typ zákazníků.
• Print manažeři (PM) - print manažeři zastupují nakladatelství neboli publishery.
PM pracují pro více nakladatelství a jednají s více tiskárnami. Snaží se najít pro dané
nakladatelství nejlepší nabídku na trhu. Zároveň nakladatelství může mít i více PM.
Principy Webového designu
26
Potenciální zaměstnanci
Lidé, kteří splňují veškeré požadavky na práci ve společnosti FINIDR. Jsou obsazovány
pozice do výroby nebo THP pozice.
Stávající zaměstnanci
Zaměstnanci FINIDRu, kteří potřebují informace o pořádaných akcích, přečíst si aktuality
nebo firemní časopis.
Veřejnost
Všichni lidé, které by mohlo zajímat, co tiskárna FINIDR dělá a jak pomáhá zlepšovat
život v jejich okolí či jaké pořádá akce (např. den otevřených dveří).
Během hloubkových pohovorů jsme dále zjistili, že klient dokáže vyrábět velice specifické
a specializované vazby knih, které jsou mezi publishery velmi žádané. Tyto tzv. speciality
měly mít na webu také důležité místo.
Cíle
Při stanovení cílů jsme vycházeli z důsledné analýzy poznámek získaných při hloubkových
pohovorech, požadavků klienta a definovaných cílových skupin. Vzhledem k tomu,
že se obchodně FINIDR zaměřuje především na zahraniční trh, kde má většinu svých zákazníků,
nebylo možné provést hloubkovou analýzu také z jejich pohledu. Proto jsme vycházeli
z informací získaných od pracovníků z obchodního oddělení a oddělení zákaznického
servisu, kteří jsou se zákazníky denně v kontaktu a mohou tak kvalifikovaně popsat
jejich potřeby.
Pro nový web FINIDRu jsme definovali tyto tři hlavní cíle:
• získávání obchodních příležitostí,
• nábor nových zaměstnanců,
• prezentace společnosti.
Tyto cíle mají různé souvislosti s cílovými skupinami pro různé oblasti zájmu společnosti
FINIDR. Oblasti zájmu byly definovány podle jazykových mutací webu, jelikož tyto
reflektují, jakou formu prezentace bude web v dané mutaci mít. Jazykové mutace jsou čeština
(CZ), polština (PL), angličtina (EN), němčina (DE) a francouzština (FR).
CZ + PL
• Získávání obchodních příležitostí (5 %)
• Nábor nových zaměstnanců (70 %)
• Prezentace společnosti (25 %)
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
27
EN + FR + DE
• Získávání obchodních příležitostí (80 %)
• Prezentace společnosti (20 %)
Následně jsme detailněji specifikovali význam jednotlivých cílů pro dané oblasti.
Cíl získávání obchodních příležitostí
CZ
V České republice není pro FINIDR prioritou získávání nových obchodních příležitostí,
jelikož má velmi silnou pozici na tomto trhu a pokrývá téměř celou cílovou skupinu. Prezentace
je v tomto případě zaměřena spíše na stávající zákazníky.
PL + EN + FR + DE
V ostatních zemích je webová prezentace zaměřena z největší části na získávání nových
zákazníků.
Cílové skupiny
• Potenciální zákazníci
• Stávající zákazníci
Nábor nových zaměstnanců
CZ + PL
Pro tyto jazykové mutace se jedná o hlavní cíl webu. Potenciální zaměstnanci by měli
získat přehled o aktuálně nabízených pozicích, benefitech, které společnost nabízí a o kvalitě
pracovního prostředí. Prezentace by měla pokrýt odpovědi na následující otázky:
Co nejvíce působí na potenciální zaměstnance při pohovorech?
• Společnost s rodinným přístupem (archetyp pečovatel)
• Benefity nabízené společností
• Čisté prostředí, moderní vybavení (moderní technologie a stroje)
Z čeho mají nejvíce strach?
• Pracovní doba
• Monotónnost práce
• Dojezdová vzdálenost
Principy Webového designu
28
Cílové skupiny
• Potenciální zaměstnanci
Prezentace společnosti na webu
CZ + PL + EN + FR + DE
FINIDR si zakládá na svém férovém postoji k zaměstnancům, klientům, ale také okolí,
kde sídlí. Pomáhá nejrůznějším organizacím a dbá na ekologické pojetí výroby. Tyto
aspekty musí být z webu patrné.
Cílové skupiny
• Potenciální zákazníci
• Stávající zákazníci
• Potenciální zaměstnanci
• Zaměstnanci
• Veřejnost
Obrázek 4: Webové stránky Finidr
Zdroj: Webový portál Finidr [online] [vid. 12. března 2019]. Dostupné z: https://www.finidr.cz/
Závěr
Na základech této důkladné přípravy a stanovení cílů projektu jsme mohli později stavět
také v následujících fázích realizace, zejména pak při návrhu informační architektury,
tvorbě wireframe webu a tvorbě obsahu. Stanovení cílů a cílových skupin je velice důležité,
jelikož tímto v projektu vzniká orientační bod, ke kterému je možné se vždy vrátit, pokud
se návrh začne ubírat jiným směrem, než bylo původně zamýšleno.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
29
Každá webová prezentace je jako živý organismus a v čase se neustále mění a vyvíjí.
Takto je rovněž třeba chápat, při realizaci projektu, stanovené cíle. Také ty se mohou v čase
vyvíjet a měnit, proto je nezbytné se občas podívat, zda jsou stále aktuální a zda ještě odpovídají
aktuálním cílům společnosti.
Jan Korpas - Moravio
TESTOVÉ OTÁZKY
Otestujte si získané znalosti z kapitoly č. 2. Pouze jedna odpověď je správná.
Správné odpovědi naleznete na konci kapitoly.
1. Funkční webové stránky jsou takové, které:
a) Ovlivňují uživatele k tomu, aby provedl konkrétní akci.
b) Jsou esteticky propracované a vizuálně zajímavé.
c) Umí zobrazit obsah na mobilním telefonu.
2. Webdesign je především kombinace:
a) Vizuální komunikace, obsahové strategie a interakčního designu.
b) Marketingu, plánování a kontroly.
c) Programování, kódování a matematiky.
3. Jakou metodu můžeme využít při stanovení cíle webové stránky?
a) HCD
b) HTML
c) SMART
4. Z jakých důvodů bychom se neměli pouštět do redesignu stránky?
a) Web dlouhodobě neplní své cíle.
b) Změnila se obchodní strategie a tím i cíle webu.
c) Konkurence provedla redesign.
5. Jak nazýváme soubor zkušeností, jak jsou uživatelé zvyklí se systémem nebo webovou
stránkou pracovat?
a) Kauzistiky.
b) Heuristiky.
c) Interakční design.
Principy Webového designu
30
SHRNUTÍ KAPITOLY
Po prostudování kapitoly č. 2 byste měli umět:
• Vysvětlit pojem webdesign.
• Říct co je klíčové pro správný design webu.
• Stanovit cíle webu a rozhodovat o případném redesignu.
• Vysvětlit principy interakčního designu.
• Ovládat základní prvky interakčního designu.
• Používat Nielsenovy heuristiky při posuzování kvality designu webu.
ODPOVĚDI NA TESTOVÉ OTÁZKY
1a, 2a, 3c, 4c, 5b
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
31
3 WEBOVÁ STRÁNKA V MARKETINGU
RYCHLÝ NÁHLED KAPITOLY
V následující kapitole se čtenář dozví, jak důležitá je webová prezentace firmy pro její
marketingovou a obchodní strategii, jelikož musí obě oddělení, marketingové i obchodní,
spolupracovat pro neustále zlepšování fungování firmy. Jsou zde popsány základní principy
a faktory, které rozhodují o úspěšnosti webové prezentace. Kapitola je také věnována
popisu procesu určování pozice firmy na trhu. Závěrečná podkapitola se zaměřuje na vysvětlení
procesu budování značky, tedy brandingu spolu s objasněním role webových stránek
a jejich důležitosti v rámci dosažení úspěšnosti tohoto procesu. Také jsou v této podkapitole
vymezeny trendy, které se na trhu prosazují v oblasti budování značky firmy na
webu.
CÍLE KAPITOLY
• Rozlišit zájmy marketingového a obchodního oddělení.
• Určit přínosy fungujících (výkonných) webových stránek.
• Identifikovat základní konflikty v oblasti webdesignu.
• Definovat základní principy brandingu na webových stránkách.
KLÍČOVÁ SLOVA KAPITOLY
Webová prezentace, webdesign, branding, konverzní akce, uživatel, e-shop, webové
rozhrání.
3.1 Význam webové stránky pro marketingovou a obchodní
strategii
Pro úspěch celé firmy je spolupráce mezi marketingovým a obchodním oddělením zcela
klíčová. Je samozřejmé, že tato oddělení musí spolupracovat, přesto se to ne vždy obejde
bez problémů. Je tomu tak proto, že marketing se zaměřuje zejména na značku, její hodnotu
a image, na druhé straně obchod zajímá především objem prodeje. Následkem odlišného
zaměření je, že často dochází k rozporům. Ze strany marketingu může dojít k nedotažené
realizaci, co se může projevit ve špatném umístění POP/POS materiálů na prodejnách nebo
Webová stránka v marketingu
32
když neladí nadlinková komunikace s BTL aktivitami. Strana obchodu tak může být demotivována,
když marketingová komunikace opomíjí realitu prodeje.18
Zmíněné neshody by měly být určitě překonány, protože ohrožují, nebo alespoň zpomalují
fungování firmy. Cíle jednotlivých oddělení by se měli co nejvíce sladit, k čemuž slouží
oboustranné vzdělávání. To znamená, že obchodní oddělení by mělo být začleněno do vývoje
marketingové komunikace takým způsobem, kterým by byla umocňována její funkčnost
a účinnost v reálném prostředí. Zástupci marketingového oddělení by zase měli trávit
více času na prodejnách, kde můžou lépe pochopit realitu prodeje (děje se tomu tak např.
ve společnosti Coca Cola). Na základě získaných poznatků je pak rozhodně jednodušší nastavit
vhodné marketingové aktivity, které budou v souladu s prodejní realitou.19
VÝCHOZÍ OKRUHY MARKETINGOVÉ STRATEGIE
Ve své podstatě marketingová strategie řeší tři základní okruhy problémů, neboli rozhodnutí
a to volba cílového trhu, vymezení pozice produktu na trhu a vytýčení marketingového
mixu. (Srpová et al., 2011)
Východiskovým bodem v rámci výběru cílového trhu je segmentace trhu. Při segmentování
firma zvažuje velikost a kupní sílu segmentu, na základě kterých se určuje hodnota
segmentu. (Srpová et al., 2011)
Po segmentaci a následném výběru segmentů se firma rozhoduje, v jaké pozici chce před
vybranými segmenty vystupovat. Určením tržní pozice produktu se rozumí postavení určitého
produktu mezi konkurenčními produkty nacházejícími se na trhu. Cílem firmy by mělo
být dosažení specifického postavení v myslích zákazníků a s tím spojené odlišení se od
konkurence. V rámci určování pozice na trhu firma v zásadě postupuje následovně:
• Identifikace možných konkurenčních výhod produktu, na základě které je možné
pozici budovat.
• Výběr optimální (nejlepší) konkurenční výhody, přičemž by se mělo jednat o výhodu,
která je podstatná pro spotřebitele, zároveň je v harmonii s marketingovým
posláním firmy a samozřejmě jejími možnostmi.
• Nakonec je nevyhnutné zvolit vhodný způsob propagace a komunikace této výhody.
(Srpová et al., 2011)
V posledním kroku se firma rozhoduje o marketingovém mixu. V rámci tohoto rozhodování
se bere v potaz selektovaný tržný segment a vybraná tržní pozice. Marketingový
mix je tvořen nástroji, které se navzájem kombinují. Mezi nejznámější patří marketingový
mix, který se skládá ze čtyř elementů 4P (z pohledu firmy) – produkt (product), cena (price),
18
Webový portál Mediaguru [online] [vid. 17. srpna 2018]. Dostupné z https://www.media-
guru.cz/clanky/2012/05/jak-ma-spolupracovat-marketing-a-obchod/
19
Webový portál Mediaguru [online] [vid. 17. srpna 2018]. Dostupné z https://www.media-
guru.cz/clanky/2012/05/jak-ma-spolupracovat-marketing-a-obchod/
Návod
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
33
distribuce (place) a propagace (promotion). Firmy, které poskytují služby, využívají marketingový
mix skládající se ze sedmi prvků (7P). To znamená, že klasický 4P je rozšířen o
další tři P – materiální prostředí (physical evidence), lidé (people) a procesy (process). S
rozvojem vztahového marketingu a řízením vztahů se zákazníky Lauterborn v roce 1990
přichází s tzv. zákaznickým marketingovým mixem 4C (z pohledu zákazníka) – hodnota
pro zákazníka (customer value), náklady pro zákazníka (cost), dostupnost (convenience) a
komunikace (communication). (Srpová et al., 2011)
3.1.1 WEBOVÁ PREZENTACE A JEJÍ VÝKONNOST
Na základě toho, jakou roli hraje web v strategii firmy, může mít návratnost investice
různé formy. Web musí samozřejmě firmě vydělat peníze, které pokryjí náklady spojené s
pořízením webu a následně vytvářet zisk. To znamená, že dobrý web musí fungovat, tedy
plnit účel pro byznys firmy a rovněž samozřejmě odpovídat potřebám návštěvníků webu.
To znamená, že webová prezentace má pro firmu jasný přínos. Tento přínos je nejčastěji
prezentován finančním ziskem, protože díky webovým stránkám může firma peníze vydělat
nebo ušetřit. (Řezáč, 2016)
Z pohledu výkonu možno weby rozdělit do tří hlavních skupin (Řezáč, 2016):
• Webová prezentace, která má za cíl ovlivnit nebo změnit chování jisté skupiny uživatelů
prezentací určitého produktu a často je i prodejním kanálem.
• E-shop, prostřednictvím kterého firma prodává produkty online. Cílem tedy není
jenom prezentace produktů, ale hlavně jejich přímý prodej.
• Webová aplikace, která řeší konkrétní problém svých uživatelů díky sebe sama. To
znamená, že není tedy kanálem pro prodej určitých produktů, ale sama je produktem.
Cílem designera aplikací je vybudovat nový návyk, protože aplikace musí zapadnout
do života člověka, který ji používá.
Úspěšná webová prezentace je tedy primárně založená na jejím obsahu, protože hlavně
kvůli němu uživatelé webové stránky navštěvují a na základě něho se rozhodují, jestli uskuteční
konverzní akci. (Řezáč, 2016)
Webová prezentace by měla být vnímána jako místo, které přehledně vypovídá o tom,
čím se firma zabývá, co nabízí, jaké jsou její přednosti a jak firmu kontaktovat. To se dá
považovat za minimum informací, které je možné vměstnat i na krátkou stránku. Web může
také obsahovat i reference spokojených zákazníků, portfolio ukázek práce, či blog s následnou
diskusí pod články. Rovněž je webová stránka firmy místem, kde může nabízet dokumenty
ke stažení, praktickou webovou aplikaci nebo školení, a to samozřejmě včetně přihlášky.
To všechno se už jistě na jednu stránku nevejde. Či už tedy půjde o webovou prezentaci
na jedné stránce, nebo se bude jednat o větší web, jde o vizitku firmy. (Vlach,
2017)
Návod
Webová stránka v marketingu
34
Firma může mít vlastní webovou prezentaci zcela pod kontrolou a z vyhledávačů a odjinud
přes ni konvertovat návštěvníky na poptávající a následně zákazníky. Není proto divu,
že jsou webové stránky hlavním nástrojem osobního marketingu. Dle výzkumu na něm
staví dvě třetiny dotázaných profesionálů, což je o mnoho více než například na LinkedInu,
či Facebooku. Zkrátka s vlastní webovou stránkou firmy získávají mnohem větší kontrolu
nad informacemi, které o nich uživatelé, potažmo potenciální zákazníci mohou nalézt a
také nad tím, v jakém kontextu se jim zobrazí. Firmy mohou rovněž na svůj web kohokoliv
odkázat, například na vizitce, z patičky e-mailu, ze svých sociálních profilů nebo také
z webu konference, které se firma aktivně účastní. (Vlach, 2017)
PRO ZÁJEMCE
JAK MŮŽE WEB STRÁNKA VYDĚLAT DÍKY AIDA?20
Nejprve musí získat návštěvníkovu pozornost.
Pěkná fotka, banner, barvy, velký nápis. To musí být viditelné ihned po otevření webu.
Pokud se jedná o web stavební firmy, je vhodné zobrazovat fotku nádherného domu se
zahradou s popiskem: „S naším stavebním materiálem si můžete postavit i takový dům.“
Firma by měla ihned ukázat své nejlepší přednosti, výhody, zboží, služby. Neměla by nic
skrývat nebo nechávat na později, později už totiž nemusí být.
Následně musí u návštěvníka vzbudit zájem o produkty.
Nyní má firma prostor blíže popsat to, čím návštěvníka zaujala. V případě stavební firmy
to bude popis výhod stavebního materiálu a důvodů, proč bude právě díky ní jeho dům
perfektně postavený a vydrží století.
Poté musí u návštěvníka vyvolat touhu produkty vlastnit.
Třeba zaútočit například na pozitivní závist a jedinečnost. Stavební firma může napsat,
že tento rok dodala materiál na 27 domů, ve kterých bývají spokojení zákazníci, kteří si
chválí kvalitu domů a bydlení. Nejlepší hned vedle textu umístit reálné fotky dokončených
staveb s vysmátou rodinkou, která ho obývá.
Nakonec je nutné podsunout návštěvníkovi možnost akce.
Další klik už musí znamenat nákup, kontakt, zájem. V případě stavební firmy by mělo
být pod bannerem a popisem výrobků tlačítko „Zaslat ceník, nabídku“.
20
Webový portál Ricon [online] [vid. 13. března 2019]. Dostupné z: https://www.ricon.sk/aj-vasa-web-
stranka-moze-zarobit-ako/
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
35
Přínosy fungujících (výkonných) webových stránek se odvíjí především od třech faktorů
(Řezáč, 2016):
• Konverzní akce – uživatelé na webu provádějí konverzní akce. Jedná se například
o sdílení stránky na sociálních sítích, odeslání objednávky, registraci do newsletteru.
Konverzní akce je proto často i jednoduše měřitelná.
• Informace – uživatelé na webových stránkách naleznou informace, které hledali,
následně je zkonzumují a odchází. Je možné, že právě na základě těchto informací
začne návštěvník v budoucnu přemýšlet o koupě daného produktu firmy, ale jedná
se samozřejmě o dlouhodobější proces. Konzumace samotná se přirozeně měří mnohem
hůře než konverzní akce, ale hodně webů je založených právě na tom, že musí
správným způsobem informace předat. Díky webovým stránkám se následně snižuje
i zátěž call centra, buduje se databáze potenciálních klientů, roste návštěvnost a důsledkem
toho i přímé konverze.
• Pocit – web vyvolává v návštěvnících určitý pocit, emoci, kterou si následně spojí
se značkou provozovatele webových stránek. Na základě tohoto pocitu si návštěvník
webové stránky zapamatuje snadněji, bude o nich pravděpodobněji mluvit s ostatními,
nebo se může vrátit kvůli dalším údajům a informacím, respektive konverzní
akci.
Uživatelů připravených nakoupit je poměrně málo, řádově jednotky procent. Daleko
více lidí o webu ani neví, či už tuší, ale rozhodně není připraveno nakoupit. Tudíž není
vhodné o webové prezentaci přemýšlet jen jako o prostředku prodeje, ale také jako o
designovém nástroji, který firmě pomáhá budovat vztah její značky s uživateli a rovněž
získávat uživatele, kteří zatím se značkou firmy nepřišli vůbec do kontaktu. (Řezáč,
2016)
Web však samozřejmě není měřen estetickou kvalitou, ale faktickým výkonem, a to na
základě předem stanovených metrik. Z daného vyplývá, že úspěchu nemožno dosáhnout,
pokud se firma bude soustředit jen na grafické ztvárnění webu, co ale nepopírá fakt, že je
velmi důležité. (Řezáč, 2016)
3.1.2 KONFLIKTY V OBLASTI WEBDESIGNU
Některé procesy se v rámci diskuzí o webdesignu pravidelně opakují. Ať už jde o rozpor
mezi marketingovým oddělením a IT oddělením firmy související s vlastnictvím webového
serveru, nebo jde o grafického designéra, který se pokouší přesvědčit firmu o vhodnosti
navrhovaného vzhledu či multimediální technologie. Tyto spory mnohdy vedou k bouřlivým
diskuzím mezi designéry samotnými, nebo mezi designéry a jejich klienty (firmami),
vevnitř i mimo týmy vytvářející web firmy. Samozřejmě na většinu otázek, které během
těchto konfliktů vyvstávají, neexistuje jednoduchá ani jednoznačná odpověď, nicméně je
však poměrně snadné je popsat. (Powell, 2004)
Webová stránka v marketingu
36
Základní konflikty v rámci webdesignu obvykle zahrnují (Powell, 2004):
• potřeby uživatele oproti potřebám designéra (firmy),
• rovnováha formy a funkčnosti,
• zhodnocení kvality provedení,
• soulad mezi konvenčními prvky a inovacemi.
Tato témata nejsou v abstraktním významu pro webové médium nijak jedinečná. Umělci
určitě usilovali o soulad vlastních potřeb, nároků svých patronů a rovněž představ veřejnosti
o podobě díla. Marketingoví pracovníci musí při tvorbě reklamy do časopisu nebo na
billboardy zvažovat potřeby vizuální podoby s úspěšnou, a hlavně srozumitelnou komunikací.
I přes obecnou přirozenost daných témat se jejich jednotlivé detaily napříč médii liší.
Proto je vcelku užitečné si každé z nich představit. (Powell, 2004)
POTŘEBY UŽIVATELE OPROTI POTŘEBÁM DESIGNÉRA (FIRMY)
Častou chybou webových stránek firem je bohužel pořád to, že jsou vytvářeny spíše pro
potřeby firmy, namísto skutečných uživatelů. Firma si vybuduje svoje stránky na základě
vlastních předpokladů, s čím si uživatel mnohdy nemusí dát rady. Proto je nezbytně nutné
nahlížet na webové stránky z pohledu uživatele a vykonávat uživatelské testování.
Uživatelé jsou jednotlivci s jistými společnými charakteristikami a schopnostmi. I když
mohou mít uživatelé podobné rysy, jsou zároveň osobitými jedinci. To, co se zdá být pro
jednoho uživatele snadné, může být pro druhého složité. Z daného vyplývá, že na webových
stránkách by se měly kromě společných vlastností uživatelů odrazit i významné odlišnosti.
(Powell, 2004)
ROVNOVÁHA FORMY A FUNKČNOSTI
Dalším problémem u webových stránek firem je, že často není vyvážená funkce a forma.
Forma a funkce tvoří základny pyramidy webdesignu. Funkce by byla bez formy nudná
neboli i když stránky fungují, uživatel není nadšený. Naopak, i když by byla forma velmi
působivá, no na druhé straně funkčnost omezená, uživatel by byl zklamaný. Forma a
funkčnost by tedy mely být v jasně definovaném a souvislém vztahu. To znamená, že
forma webových stránek by měla být v přímém vztahu s účelem. Jestliže mají stránky sloužit
k reklamním účelům, je zřejmé, že budou obsahovat více vizuálních a multimediálních
prvků. Pokud jsou však webové stránky zaměřené spíše na provádění konkrétních operací
(stránky banky pro přímé bankovnictví), budou mít pravděpodobně skromnější podobu.
Určení vhodné a přiměřené formy webových stránek si vyžaduje přesné definování funkce
daných webových stránek. (Powell, 2004)
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
37
ZHODNOCENÍ KVALITY PROVEDENÍ
Webové stránky by měli být považované za bezchybné jenom v případě, že jsou užitečné,
příjemné, použitelné a přesné. Význam jednotlivých slov je samozřejmě kromě přesnosti
poněkud subjektivní. Správně navržený web by měl mít bezvadné provedení. To znamená,
že web nesmí v nijakém případě selhat. (Powell, 2004)
SOULAD MEZI KONVENČNÍMI PRVKY A INOVACEMI
Někteří odborníci se domnívají, že kategorizací designu webových stránek zvyšují
konformitu, eliminují inovace a že striktní dodržování šablon designu, či běžných postupů,
například v podobě umísťování hlaviček firem do levého horního rohu webových stránek
omezuje možnosti návrhu stránky.
Avšak, například v případě knih je to podobné. I když je možné navrhovat knihy trojúhelníkového
tvaru, je tímto nebo obdobným způsobem vyrobeno jen velmi malé množství
knih. Protože náklady na výrobu, či nešikovný tvar nebo nedůvěra čtenářů v takovýto tvar
by právě z knihy trojúhelníkového tvaru mohly udělat riskantní záležitost. Knihy jsou
čtvercové, obdélníkové, mají klasický obal, titulní stranu, obsah. Dají se považovat tyhle
zásady za překážky pro designéra knih? Někteří by samozřejmě tvrdili, že ano, no i v daných
mezích knihy je možné uplatnit určitou dávku tvořivosti. Obdobné je to i v případě
webdesignu. Design rozhraní neboli grafické uživatelské rozhraní GUI (Graphical User Interface)
softwarových programů ovlivnilo to, co se považuje za standard pro uživatelská
rozhraní sítě WWW, no objevily se i další nápady. Designéři webových stránek musí respektovat
zásady možnosti navigace, či umístění navigačních panelů, barvy apod. Tyto pojmy
neomezují design, jenom udržují webové stránky v mezích jistých forem, aby uživatelé
nebyli mateni. (Powell, 2004)
3.2 Webová stránka jako nástroj budování značky
Značka nepředstavuje jen logo, či vizuální styl firmy, je její duší, základem budoucí
práce, protože pak má firma na čem stavět. Představuje slib firmy, že se chová určitým
způsobem. Nestačí však, aby firma zákazníkům jenom sdělovala (slibovala), že prodává ty
nejekologičtější pračky, či je komunikativní, nebo se chová hezky ke zvířatům. Je samozřejmě
nezbytné, aby tak i konala. Mít silnou značku znamená, že si firma ujasnila svůj
smysl (poslání) a cestu (vizi), prostřednictvím které se pohybuje směrem, který si vymezila.
Jasně a vhodnými způsoby o tom informuje okolitý svět všude, kde je značku vidět. Jednou
z hlavních výhod silné značky je, že si jí lidé pamatují, rozeznají ji od jiných značek,
před kterými ji v určitém momentu upřednostní. Všechny činnosti a procesy vedoucí k dosažení
těchto cílů tvoří podstatu brandingu. (Řezáč, 2016)
Příklad
Definice
Webová stránka v marketingu
38
DEFINICE
Branding je proces, v rámci kterého firma dává smysl své značce, vypráví její příběh
zapamatovatelným a konzistentním způsobem. (Řezáč, 2016)
Proces sloužící k budování povědomí a rozšiřování loajality zákazníků. Branding je o
využití každé příležitosti k vyjádření, proč by si spotřebitelé měli vybrat jednu značku
nad jinou. Touha vést, předstihnout konkurenci a dát zaměstnancům nejlepší nástroje k
získávání zákazníků jsou důvody, proč firmy branding využívají. (Wheeler, 2013)
Vzhledem k tomu, že se online prostředí mění poměrně rychle, taktéž nové příležitosti
v rámci budování značky, a z toho vyplývající povědomí o ní, se stejně rychle objevují a
zase odcházejí. Tyto nástroje však často nejsou velmi rozdílné od nástrojů využívajících se
mimo virtuální svět. Hlavní rozdíl v tomto ohledu je mediace komunikace.21
Zásluhou virtuální povahy internetu i menší nebo malé firmy mohou disponovat online
prezentací, která vypadá zcela působivě jako prezentace od velkých značek, zajisté bez
značných výdajů, či už na rozvoj nebo propagaci značky. Firmám využívajícím internet k
zvýšení popularity u cílových segmentů, tedy posílení značky, je k dispozici řada různých
internetových nástrojů. Firmy mohou využít bannerové kampaně, sociální sítě, microsity,
online PR články, videa.22
V současnosti jsou nejpopulárnějším typem sociální média nebo také sítě. Prostřednictvím
sociálních sítí totiž dochází k téměř přímé interakci značky s uživatelem webu (potenciálním
zákazníkem). Uživatel může prostřednictvím sociálních sítí se značkou komunikovat.
Může značku komentovat a ta mu prostřednictvím online marketéra odpovídá. Sociální
sítě pomáhají udržovat kontakt se zákazníkem a také nové zákazníky získávat.
Webové stránky však samozřejmě taky mají své místo v rámci budování značky, protože
představují výchozí bod komunikace online, jsou sídlem e-shopu, či nástrojem
pro objednávání. Webové stránky však mohou sloužit i k dalším činnostem, třeba k
osvětě, zábavě, či vzdělání. Na základě strategického plánování je možné přes různé techniky
budovat image značky.23
Vzhledem k tomu, že webové stránky tvoří jeden z mnoha míst interakce
(touchpointů), kde se zákazník může se značkou setkat, musí ji i odrážet (mezi další
21
Webový portál Mediaguru [online] [vid. 17. srpna 2018]. Dostupné z https://www.media-
guru.cz/clanky/2017/04/online-nastroje-pro-budovani-znacky/
22
Webový portál Mediaguru [online] [vid. 17. září 2018]. Dostupné z https://www.media-
guru.cz/clanky/2012/08/online-taktiky-na-budovani-znacky/
23
Webový portál Mediaguru [online] [vid. 17. srpna 2018]. Dostupné z https://www.media-
guru.cz/clanky/2017/04/online-nastroje-pro-budovani-znacky/
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
39
touchpointy patří vizitky, stránky na sociálních sítích, email, či obchodní zástupci). Je nezbytné,
aby si firma uvědomila pozici webu oproti ostatním touchpintům a vytvořila
pro něj takové podmínky, aby přilákal návštěvníky. Vhodné tedy je, aby si firma stanovila
kanály, prostřednictvím kterých bude návštěvníky na web přivádět (v online i offline prostředí).
Končí doba vytváření webu jen pro jeho existenci, protože marketing je stále více
tlačen k dokládání jasných výsledků. (Řezáč, 2016)
Nevyhnutné je web stylizovat na základě toho, jak se firma chce zákazníkům prezentovat.
Musí být splněná základní podmínka a tou je odlišení se od ostatních. Při procesu
budování značky je třeba, aby si firma odpověděla na často opomíjené, a přitom tak zásadní
otázky, jako: „Kdo jsme? Koho oslovujeme? Co symbolizuje naši značku?“. Je nezbytné,
aby značka (a také její komunikace) korespondovala s produktem a nebyla zbytečně přeplácaná,
protože v jednoduchosti se skrývá síla a zákazník to určitě ocení.24
V rámci budování značky firmy na webu je nevyhnutné sledovat trendy na trhu, kterými
jsou například:
• Minimalismus – zjednodušení webových stránek. Stránky, které jsou přeplněny detaily,
dlouhými odstavci a řetězícími se obrázky střídá jednoduchý design. Zaplnit
veškeré místo je spíše na škodu. Díky volným plochám může web dýchat, zdůraznit
text a usnadnit orientaci.
• Výrazné logo a claim – zvětšování loga a sloganu na úkor jiného obsahu. Firemní
symboly dokonce mohou zaplnit celou šíři monitoru. Avšak, důležité je, aby se podstatní
informace o produktu nebo firmě objevily ihned poté, kdy návštěvník webových
stránek začne tzv. skrolovat.
• Zužování webu – s nástupem tabletů a mobilních telefonů se významnou funkcí
webových stránek stala také jejich responzivita, která znamená, že zobrazení webových
stránek je optimalizováno pro nejrůznější zařízení.
• Typografie – uživatelé jsou přesyceni fotkami. Boom zažívá písmomalířství.25
PRO ZÁJEMCE
TRENDY WEBDESIGNU V ROCE 2019
Vedle hodnotného obsahu tvoří základ úspěchu webových stránek také následování současných
trendů v oblasti webdesignu. Webové stránky, které nyní vypadají moderně a uhlazeně,
klidně mohou za pár měsíců působit jako těžkopádné a zastaralé. Proto je při návrhu
webu nevyhnutné rozlišovat, jestli se jedná o trend nebo jen dočasný výstřelek.
24
Webový portál Feo [online] [vid. 17. srpna 2018]. Dostupné z https://www.feo.cz/tvorba-webu-od-bran-
dingu-az-po-testovani
25
Webový portál Mediaguru [online] [vid. 12. září 2018]. Dostupné z https://www.media-
guru.cz/clanky/2011/10/devet-vyznamnych-trendu-v-designu-firemniho-webu/
Návod
Příklad
Webová stránka v marketingu
40
Flat design
Podtrhuje trend minimalismu. Hlavním cílem tohoto trendu zvýšit výkon webových
stránek na mobilních zařízeních. To znamená, zbavení se přebytečného nepořádku ze stránek
a zároveň zvýšit jejich rychlost. Využití negativního prostoru je jedním ze zásadních
prvků flat designu. Designéři měli kdysi potřebu skoro každou volnou plochu stránky zaplnit
obsahem, co se však nakonec jevilo jako kontraproduktivní. Z daného vyplývá, že
pokud je prostor prázdnější, je to lepší. Nemyslí se tím, že by na stránkách měly chybět
významné informace nebo jiný podstatný obsah. Je však důležité udržovat přehlednost stránek
a zbytečně je nepřeplňovat neorganizovaným a nepotřebným obsahem.
Chatboti
Chatboti již dnes nepředstavují žádnou novinku. Používají se více než 20 let, během
kterých se postupně vyvíjeli. Firmy pravděpodobně začnou využívat pokročilé, obsahu
konkrétních stránek přizpůsobené chatboty, co umožní, aby zákazníci dostali rychlé odpovědi
na své dotazy.
Video v hlavičce
Správnou kombinací kontrastů a barev firma kromě interaktivního prvku získává snadno
odkomunikovaná sdělení. Podobný směr zastává i YouTube, protože prostřednictvím embedování
videí napomáhá s autorskými právy videí šetřit místo vlastních serverů. Nevýhodou
tohoto trendu je, že může zpomalovat načítání stránky nebo zvyšování spotřeby dát pří
přehrávání na mobilu.
Širší uplatnění CSS3 animací
CSS3 animace jsou úžasným pomocníkem k přilákání návštěvníkovi pozornosti. SVG26
grafika určila nové standardy animací na webových stránkách. Tyto animace totižto neztrácí
kvalita ani při úpravě rozměrů a velikosti, co samozřejmě návštěvníci ocení. Nejčastěji
se v rámci webů používají, aby zatraktivnily a zlepšily uživatelskou zkušenost. Řadí se
sem například motion grafika, video pozadí, mikrointerakce, různé efekty skrolování.
Hamburger menu
Hamburger menu již dnes není úplnou novinkou, přičemž jeho obliba stále roste. Jedná
se o menu, které je jednoduché, je vyobrazené třemi vodorovnými čarami a má podobné
vlastnosti jako jiná běžně používaná tlačítka. Přičemž jednotlivé stránky mohou používat
různorodá hamburgerová menu s účelem vhodně doplňovat úplný design webové stránky.
Nejčastěji se pro snadnou orientaci nachází v horních rozích stránek. Stále je však hodně
26
SVG (Scalable Vector Graphics) jakožto škálovatelná vektorová grafika představuje textový formát,
který je založený na XML. Vymezuje cesty a body, kterých velikost lze měnit bez toho, aby došlo ke snížení
kvality. Je ideální pro webové obrázky jako loga, značky, bannery, obrysové kresby či ilustrace. (Pelánek,
2012; Brown, Butters a Panda, 2014)
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
41
návštěvníků, kteří úplně nevědí, co toto tlačítko představuje. Jako jednoduché řešení se jeví
doplnit k ikonce této nabídky slovo „Menu“.27
PRŮVODCE STUDIEM
Dostáváme se k další případové studii, která se tentokrát týká webové stránky značky
Levit. Příběh Marka a Karla, kteří během studia založili firmu, která se zabývá designem a
výrobou luxusních psacích potřeb v čele s vlajkovou lodí Levit Pen může být inspirací také
pro vás. Prostudujte si případovou studii, na které lze vidět, jak naplnit účel webu, kterým
se stalo budování značky.
PŘÍPADOVÁ STUDIE
WEBOVÁ STRÁNKA JAKO NÁSTROJ BUDOVÁNÍ ZNAČKY LEVIT
Při tvorbě brandu LEVIT byly webové stránky jednou z nejdůležitějších částí. Museli
jsme zvolit správný název webu a také vybrat vhodné studio, které by dokázalo navrhnout
a vytvořit web, který by odpovídal našim potřebám a reprezentoval naši značku. Při spuštění
prodeje, kdy Levit ještě nebyl ke koupi u retailerů, byly webové stránky jediné místo,
kde si potenciální zákazník mohl produkt prohlédnout a zakoupit. I nyní, kdy ještě Levit
nemá své vlastní kamenné prodejny, jsou webové stránky nejdůležitějším místem, pro prezentaci
našich produktů.
Pokud se člověk dozví o Levitu například z článku na internetu nebo ze sponzorovaného
příspěvku a pero ho zaujme, tak jako první navštíví právě webové stránky, kde bude zjišťovat
více informací o produktu. Proto musí celý vizuál webu odpovídat vizuálu brandu, to
znamená použití stejných barev, znaků, tvarů apod.
Na obrázku 5 je screen webové stránky značky LEVIT. Celý design je proveden v minimalistickém
a moderním stylu, který odpovídá i samotnému produktu. Po celé levé a
spodní straně obrázku si můžeme všimnout velkého „L“, které doprovází celý vizuál
značky i samotné logo. Toto L můžeme vidět také na instagramovém profilu značky nebo
i na tiskovinách, které jsou součástí balení (návod, varování apod.). Další významný prvek
je kontrast tmavé a světlé barvy. V první polovině webových stránek je podklad tmavý,
27
Webový portál Focus Agency [online] [vid. 10. ledna 2019]. Dostupné z https://www.focus-age.cz/m-
journal/internet/jake-budou-trendy-web-designu-v-roce-2019__s281x14165.html
Webová stránka v marketingu
42
celý tento segment má za úkol odprezentovat produkt a jeho vlastnosti návštěvníkovi, naopak
druhá polovina má podklad bílý a v této části je už čistě jenom eshop a galerie ob-
rázků.
Obrázek 5: Webové stránky Levitpen
Zdroj: Webový portál Levitpen [online] [vid. 10. února 2019]. Dostupné z https://www.levitpen.com/en/
Tyto detaily mají velký vliv na propojení celého brandu a vizuálu a na jeho celistvost.
Návštěvník si pak dokáže snadněji spojit produkt se značkou, pokud někde uvidí například
příspěvek nebo fotku společnosti obsahující L. Volba správného vizuálu webu je velmi
důležitá, protože nastaví návštěvníkův „mood“. V případě Levitu je vizuál jednoduchý, minimalistický,
moderní, je zde použito málo textu a více se prezentuje skrze animace, video
a vizualizace. Smyslem tohoto vizuálu je, aby měl návštěvník pocitu luxusu.
Dobře nastavený web a jeho design může také velmi pomoct značce s propagací a prodejem.
Například webové stránky levitpen.com byly díky svému designu nominovány na
několik ocenění pro nejlepší vzhled webu (Awwwards.com nebo CSSDesignAwards.com)
a DesignRush.com jej uvedl v článku „The Best Minimal Website Design & User Interface
Examples — Plus, Why They’re Effective“ vedle webů jako Pinterest, Instagram nebo
Lettuce & Co.
Překlad:
Věřte nevěřte, toto je webová stránka pro pero – luxusní pero přesněji řečeno. Jedná se
o multifunkční nástroj s mnoha možnostmi. Černá barva webu dodává nádech vážnosti,
zatímco animace, které doprovázejí návštěvníka dodávají stránce moderní až futuristický
styl. Pero se během projíždění stránky rozkládá, čímž je vysvětlen celý systém produktu.
Použití bílé barvy je provedeno velmi pečlivě a úhledně. Tento design pero prezentuje
jako nějaké sci-fi zařízení. Všechno se skládá a rozkládá před zraky návštěvníka a celý
koncept je tak snadno pochopitelný i pro úplného technického laika.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
43
To nám dokazuje, že prodej nemusí probíhat jenom skrze agresivní marketingový přístup.
Obyčejný produkt s mimořádným designem a webovými prvky se tak stává produktem
neobyčejným.
„Throughout this whole analysis, we’ve observed services free and paid, communitybased
and solo-centered. Now, it’s time to see how minimalism can be utilized to advertise
a product.
Believe it or not, this is a website for a pen -- a luxurious one to be precise. It’s a multifunctional
tool, with plenty of options. With the black color of the website, the designers
gave it a serious touch, while the animations that follow the user around make it feel quite
modern, even futuristic. As you scroll down the website, the pen gets dissected and the
whole system within it is easily explained.
The use of white space is done neatly and tidily. This design advertises this pen as some
sort of sci-fi piece of equipment. Everything gets dissected in front of your eyes, and even
the non-tech savvy people understand the whole concept instantly.
This shows us that aggressive marketing approaches are definitely not the only way to
go in order to sell. An ordinary item, with extraordinary design and website elements, becomes
extraordinary itself.“
Obrázek 6: Screen instagramového profilu značky LEVIT
Zdroj: Webový portál Instagram [online] [vid. 10. února 2019]. Dostupné z https://www.instagram.com/le-
vitpen/
Webová stránka v marketingu
44
Obrázek 7: Ukázka použití grafického prvku L pro výběr možnosti platby
Zdroj: Webový portál Levitpen [online] [vid. 10. února 2019]. Dostupné z https://www.levitpen.com/en/
Marek Schwarz - Levit
TESTOVÉ OTÁZKY
Otestujte si získané znalosti z kapitoly č. 3. Pouze jedna odpověď je správná.
Správné odpovědi naleznete na konci kapitoly.
1. Newsletter, email, vizitky jsou označované jako:
a) Písemnosti.
b) Touchpointy.
c) Claimy.
2. Co nemožno označit za konverzní akci?
a) Sdílení stránky na sociálních sítích.
b) Odeslání objednávky.
c) Zužování webu.
3. Co nemožno považovat za výchozí okruh marketingové strategie?
a) Vytýčení marketingového mixu.
b) Volba cílového trhu.
c) Umístění POP/POS materiálů.
4. Proces budování značky označujeme jako:
a) Branding.
b) Networking.
c) Phishing.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
45
5. Responzivita znamená:
a) Zjednodušení webových stránek.
b) Optimalizování webového rozhraní.
c) Odlišení se od konkurence.
SHRNUTÍ KAPITOLY
Po prostudování kapitoly č. 3 byste měli umět:
• Zvládnout orientaci v marketingových a obchodních zájmech firmy.
• Definovat výchozí okruhy marketingové strategie.
• Vysvětlit podstatu a přínosy úspěšné webové prezentace.
• Vymezit často se objevující konflikty v oblasti webdesignu.
• Objasnit důležitost webové stránky v procese brandingu.
ODPOVĚDI NA TESTOVÉ OTÁZKY
1b, 2c, 3c, 4a, 5b
Modely chování zákazníka na webu
46
4 MODELY CHOVÁNÍ ZÁKAZNÍKA NA WEBU
RYCHLÝ NÁHLED KAPITOLY
V rámci čtvrté kapitoly se pozornost zaměřuje na vysvětlení podstaty vybraných modelů
popisujících chování zákazníků. Modely jsou orientovány na pochopení chování jedinců
z hlediska konkrétních faktorů, přičemž naleznou své využití v mnoha oblastech. Pro potřeby
této publikace jsou zasazeni do prostředí webových stránek. V první části je prezentován
Foggův behaviorální model, který popisuje tři základní elementy, ke kterým musí
dojít, aby se uživatel choval způsobem, který se od něj očekává. Davisův model akceptace
technologie je rozebrán ve druhé části kapitoly. Pojednává o použití navrženého modelu v
testování přijetí webových stránek uživatelem.
CÍLE KAPITOLY
• Vysvětlit podstatu vybraných modelů a jejich využití při tvorbě nebo inovaci webové
stránky.
• Interpretovat využití Foggova behaviorálního modelu v souvislosti s vysvětlením
konkrétního chování uživatelů na webu.
• Objasnit podstatu Davisova modelu akceptace technologie při zjišťování vnímání
webu uživateli.
KLÍČOVÁ SLOVA KAPITOLY
Behaviorální model, psychologický model, motivace, způsobilost, akceptace, technologie,
užitečnost, snadnost používání.
4.1 Využití základních psychologických modelů při tvorbě webové
stránky
Na začátku této podkapitoly jsou nejdříve definovány psychologické modely obecně.
Následně je vylíčená podstata vybraných modelů determinujících chování návštěvníku na
webu. Jedná se o již zmíněné modely, a to Foggův behaviorální model a Davisův model
akceptace technologie.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
47
DEFINICE
Psychologické modely nahlížejí na spotřební chování jako na důsledek psychických
faktorů, sledují psychické procesy, například vliv motivů, podnětů, procesu vnímaní těchto
podnětů a jejich projevy v chování spotřebitele. Vycházejí ze dvou přístupů, které z odlišných
pohledů poznávají jednání spotřebitele. Jedná se o behaviorální a psychoanalytické
přístupy.
Behaviorální přístupy pozorují chování spotřebitele a jeho reakce, jelikož vnitřní duševno
jedince považují za nepoznatelné. Sledují odezvu na některé podněty, například reakce
na reklamní sdělení, způsob prezentace zboží, doporučení ostatních nebo podněty
z okolí (módní trendy). V tomto přístupu je poznání spotřebitele měřitelné a vychází z určitého
předpokladu, že jeho chování je naučeno a to ve vazbě na jiné podněty.
Na druhé straně psychoanalytický přístup zasahuje hlubší motivační struktury a vztahy
vědomí a podvědomí. Je založen na učení Freuda a předpokládá, že mnoho motivů si jedinec
neuvědomuje, jelikož zůstávají skryty. Jiné psychoanalytické přístupy se orientují na
procesy učení a také na vnímání a utváření postojů důsledkem vlivu typologie osobnosti.
(Mulačová et al., 2013)
Behaviorální modely zachycují dynamické chování určitého systému při jeho činnosti.
Demonstrují, co se stane nebo by se mělo stát v případě, že systém reaguje na podněty
ze svého okolí. Tyto impulzy jsou rozlišovány ve dvou typech:
• Data – jsou doručována jistá data, která systém zpracovává.
• Události – nastávají určité události aktivující systémové zpracování. (Sommerville,
2013)
4.1.1 FOGGŮV BEHAVIORÁLNÍ MODEL
Foggův behaviorální model (FBM) zdůrazňuje tři základní prvky, z nichž každá má
dílčí součásti. Konkrétně FBM popisuje Motivaci (Core Motivators), Způsobilost (Simplicity
Factors) a Pobídky (Prompts).
FBM tedy ukazuje, že ve stejném okamžiku musí dojít ke konverzi tří elementů: Motivace,
Způsobilost a Pobídka. Pokud nedojde k určitému chování, chybí alespoň jeden
z těchto tří prvků. Přičemž subkomponenty definují větší prvky. Například ve FBM
způsobilost odkazuje na to, jak faktory náročnosti spolupracují v kontextu pobídek (spouš-
těčů).
Definice
Modely chování zákazníka na webu
48
Mnoho dalších odborníků navrhlo způsoby, jak porozumět přesvědčení a změnám chování,
které pocházejí z doby starého Řecka. Co však dělá FBM odlišným od předchozích
modelů, či jednoduše způsobů vysvětlení jednotlivých jevů? Za prvé FBM ukazuje, jak
je chování výsledkem tří specifických prvků, které se shodují v jednom okamžiku.
FBM pak vysvětluje dílčí součásti každého prvku. Kromě toho FBM ukazuje, že motivace
a způsobilost mohou být porovnávány (například pokud je motivace velmi vysoká, způsobilost
může být nízká). Jinými slovy, motivace a způsobilost mají navzájem kompenzační
vztah. Nakonec se FBM nejvíce přímo zabývá praktickými otázkami návrhu pro
změnu chování. FBM je znázorněn na obrázku 8.28
Obrázek 8: Foggův behaviorální model
Zdroj: Webový portál Behaviormodel [online] [vid. 21. srpna 2018]. Dostupné z https://www.behaviormo-
del.org/
Při zohlednění těchto tří prvků mohou webdesignéři zjistit, co brání uživatelům v tom,
aby podnikli požadované akce. Pokud firma chce, aby uživatelé (zákazníci) napsali recenzi,
může pomocí tohoto modelu zjistit, který z těchto tří psychologických spouštěčů není v jejich
webdesignu.
Motivace může být dále rozdělená na vnější a vnitřní. V prvním případě se jedná o vnější
faktory, které mohou někoho motivovat, jako například fyzická odměna – peníze nebo bezplatný
dar. Vnitřní faktory představují emoce jako radost nebo uspokojení.
Existuje samozřejmě možnost, že v mnoha případech to, co firma žádá, aby její uživatelé
udělali, je něco, co si obvykle neužívají. Jak se z toho dostat? Odpověď je jednoduchá,
firma by jim měla poskytnout odměnu nebo pobídku k dokončení procesu.
28
Webový portál Behaviormodel [online] [vid. 21. srpna 2018]. Dostupné z https://www.behaviormo-
del.org/
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
49
PRO ZÁJEMCE
PŘÍKLADY POBÍDEK
Skvělým příkladem je aplikace Pact, která je fitness aplikací a nabízí peněžní odměny
za dosažení cílů v oblasti zdraví. Vzhledem k tomu, že mnoho lidí si neužívá cvičení, tato
motivace jim dodává „drive“ do cvičení. Firmy musí být však opatrné v jedné věci a tou je
přesahující účinek, který nastane, když odměňují někoho za něco, co si užívá (dělá rád). V
tomto případě, když firmy odměnu odeberou, lidi následně vykonávají tuto činnost méně a
méně.
Webová stránka s názvem Freeletics bojuje s tímto problémem v oblasti zdraví tím, že
podporuje vysoce intenzivní cvičení, které vyžadují základní úroveň způsobilosti k dokončení.
Uživatelé, kteří jsou již na základní úrovni, získají z výkonu cvičení určitý požitek,
což omezuje výše uvedené účinky. Nadřazené ocenění se skládá z hvězd, které jsou
získávány na základě výkonu. Uživatelé získávají cenu jen v případě, pokud splní úkol a
udělají ho dobře.29
Samotná motivace nestačí k pobídnutí k určitému chování. Člověk může být zcela motivován
jít rybařit, ale pokud nemá rybářský prut a návnadu, nemůže to tak úplně udělat.
Tady se firma dostává do bodu, kde se věci stávají specifické pro její publikum více než
dříve.
V příkladu s rybařením by jedinec buďto musel mít rybaření rád (vnitřní motivace –
pocit radosti a uspokojení z činnosti) nebo by potřeboval motivaci ve formě odměny. Pro
dokončení Foggova modelu by také potřeboval zásoby (náročnost vyhledávání potřebného
vybavení překonána) a pobídku. Podle modelu se chování objeví pouze tehdy, pokud
jsou motivace a způsobilost dostatečně vysoké a pobídka slouží k zahájení určité akce.
Samozřejmě, prostě mít tyto tři faktory na svém místě nestačí. To, co motivuje jednu
osobu, nemusí motivovat jinou osobu. Právě zde musí firma pochopit, co motivuje její
publikum, pokud si skutečně přeje zahájit určité chování. Důkladný a detailní průzkum
svých posluchačů je zde nevyhnutný. Musí pochopit, co je motivuje z vnitřního nebo vnějšího
hlediska a využívat to, aby vytvořila uživatelský zážitek designem, který odráží jejich
přání.
Mapy zkušeností zákazníků, persony kupujících a cesty uživatelů představují skvělé nástroje,
které firmě pomáhají porozumět jejím kupcům nad rámec primárních záležitostí,
jako je věk, PSČ a pohlaví.
29
Webový portál Webdesigner Depot [online] [vid. 1. září 2018]. Dostupné z https://www.webdesignerde-
pot.com/2016/05/reading-minds-the-psychology-behind-ux-design/
Příklad
Modely chování zákazníka na webu
50
Uživatelé jsou motivováni různými věcmi. Firma musí uživatelům umožnit, aby viděli
a použili její produkt, nebo přinejmenším sledovat procesy, které firma chce, aby uživatel
dokončil. To znamená, že firma musí najít a odstranit bariéry mezi jejím cílem a uživateli
a snažit se porozumět jejich motivaci, aby jim mohla poskytnout způsobilost a pobídku k
vytvoření nového chování.
Stručně řečeno, UX design je o použití lidské psychologie za účelem dostat se do
hlavy uživatele a zjistit, co ho naťukne. Poskytuje firmám náhled, aby mohli motivovat
a spustit chování uživatelů, které vede k naplnění společného cíle.30
4.1.2 DAVISŮV MODEL AKCEPTACE TECHNOLOGIE
Model akceptace technologie, z angličtiny Technology Acceptance Model (TAM), se
vyvíjel s ohledem na dva hlavní cíle. Za prvé, lepší chápání procesů akceptace technologií
uživateli a poskytnutí nových teoretických poznatků o úspěšném návrhu a implementaci
informačních systémů. Za druhé, TAM měl poskytnout teoretický základ pro praktickou
metodologii „testování přijetí uživatelem“, která by umožnila návrhářům systémů a implementátorům
vyhodnotit nově navrhované systémy před jejich implementací. Použití
navrženého modelu v testování přijetí uživatelem zahrnuje demonstraci systémových prototypů
pro potenciální uživatele a měření jejich motivace k použití alternativních systémů.
Takové uživatelské příjímací testy poskytují užitečné informace o relativní pravděpodobnosti
úspěchu navrhovaných systémů na počátku jejich vývoje, kde mají tyto informace
největší hodnotu. (Ginzberg, 1981; Davis, 1985) Navrhovaný model přijetí technologie je
znázorněn na obrázku 9.
Obrázek 9: Výchozí model akceptace technologie
Zdroj: Davis (1985)
30
Webový portál Webdesigner Depot [online] [vid. 1. září 2018]. Dostupné z https://www.webdesignerde-
pot.com/2016/05/reading-minds-the-psychology-behind-ux-design/
Definice
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
51
Šipky představují příčinné vztahy. Alternativní systémy jsou reprezentovány sadou binárních
proměnných. Podle modelu je celkový postoj potenciálního uživatele k použití daného
systému předpokládán jako hlavní determinant toho, zda ho skutečně používá. Postoj
k používání je funkcí dvou hlavních přesvědčení, kterými jsou vnímaná užitečnost a
vnímaná snadnost používání.
DEFINICE
Vnímaná užitečnost je definována jako míra, v níž se jednotlivec domnívá, že používání
určitého systému by zvýšilo jeho pracovní výkon. (Davis, 1985)
Vnímání snadnosti používání je definováno jako míra, v níž se jednotlivec domnívá,
že používání určitého systému by bylo fyzicky a duševně nenáročné. (Davis, 1985)
Vnímaná snadnost používání má kauzální vliv na vnímanou užitečnost (čím jednodušší
na používání, tím užitečnější). Variabilní proměnné (X1, X2, X3) mají přímý vliv na vnímanou
užitečnost a vnímanou snadnost použití. Vzhledem k tomu, že variabilní proměnné
spadají do kategorie externích proměnných (charakteristické vlastnosti produktu; design
webové stránky apod.), nejsou teoretizovány, že mají přímý vliv na postoj nebo chování,
ale ovlivňují tyto proměnné pouze nepřímo prostřednictvím vnímané užitečnosti a vnímané
snadnosti použití. (Davis, 1985)
Používání se týká skutečného přímého užívání daného systému jednotlivcem, například
v souvislosti s jeho prací. Používání je tedy opakované víceúčelové kritérium chování,
které je specifické s ohledem na cíl (specifikovaný systém), akci (skutečné přímé použití)
a kontext (pracovní proces), a nespecifické vzhledem k časovému rámci. Postoje odkazují
na míru hodnotícího vlivu, který jednotlivec spojuje s používáním cílového systému v jeho
práci. Definice a měření postojů tedy odpovídá specifikaci s definicí kritéria chování.
(Davis, 1985)
Davis, Bogozzi a Warshaw (1989) následně vytvořili první modifikaci modelu technologické
akceptace, který je znázorněn na obrázku 10. Tato verze obsahovala také faktor
úmysl používání, který byl těmito autory definován jako přímý prediktor reálného používání.
Tímto již faktor postoje vůči používání neovlivňoval skutečné užívání přímo, ale prostřednictvím
přidaného faktoru úmysl používání. Do této modifikované verze modelu přidali
také přímý vztah vnímané užitečnosti na nový faktor.
Návod
Modely chování zákazníka na webu
52
Obrázek 10: První modifikace TAM
Zdroj: Davis, Bogozzi a Warshaw (1989)
Takováto úprava modelu však nebyla ještě finální verzí TAM. O finální, tedy konečnou
verzi modelu akceptace technologií se postarali až Venkatesh a Davis v roce 1996, kterou
zobrazuje obrázek 11.
Obrázek 11: Konečná verze TAM
Zdroj: Venkatesh a Davis (1996)
Svým výzkumem se zaměřovali na objasnění vztahů mezi vnímanou užitečností, vnímanou
snadnosti používání a úmyslem chování. Přičemž zjistili, že úmysl chování je přímo
ovlivňován vnímanou užitečností a vnímanou snadnosti používání. Na základě tohoto zjištění
dospěli k závěru, že postoje vůči používání nemusí být v modelu obsaženy, a proto
byly z modelu vyňaty.
MODEL AKCEPTACE WEBOVÝCH STRÁNEK
Teorie TAM byla využita také při zjišťování akceptace webového prostředí, přičemž
tato akceptace je tedy definována přesvědčením (subjektivní pravděpodobnost následků v
případě použití webu), postojem (pozitivní a negativní pocity týkající se webu) a úmyslem
Návod
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
53
(ochota používat web). V modelu akceptace webových stránek (obrázek 12) jsou vnímána
užitečnost, snadnost používání webu, preference v rámci webových stránek a ochota znova
používat webové stránky využité k měření přesvědčení, postojů a úmyslů. Vnímaná užitečnost
a snadnost používání webových stránek je definována jako rozsah, v němž se
uživatel domnívá, že používání webových stránek by zvýšilo jeho pracovní výkon bez přílišného
úsilí. Preference webových stránek představují rozsah, v jakém má uživatel zájem
o webové stránky. Úmysl určuje, do jaké míry by uživatel chtěl v budoucnu znovu navštívit
webové stránky. Obecně se předpokládá, že přesvědčení ovlivňuje uživatelské preference
a pak obě determinují úmysl. Z obrázku je zřejmé, že preference webových stránek
jsou ovlivňována vnímanou užitečností a vnímanou snadností používání těchto stránek.
Ochota navštívit webové stránky znovu je pak kromě vnímané užitečnosti a vnímané snadnosti
používání ovlivňována i samotnými preferencemi, které uživatel v oblasti webových
stránek má. (Lin a Lu, 2000)
Obrázek 12: Model akceptace webových stránek
Zdroj: Lin a Lu (2000)
V rámci modelu akceptace webových stránek je zkoumáno vnímání webových stránek
uživatelem z pohledu kvality IS, přičemž se jedná o kvalitu informací, dobu odezvy a
dostupnost systému. Model naznačuje, že vnímaná užitečnost webových stránek návštěvníkem
je významně ovlivněna kvalitou informací poskytovaných webem firmy a časem,
který uživatel stráví při čekání na odpovědi z něho. Dostupnost online systému a jeho doba
odezvy, na druhé straně, umožňují uživateli vnímat, jak snadné je používat web. Firmy,
které se snaží zvyšovat akceptaci svých webových stránek, by proto měli klást důraz na
kvalitu obsahu na těchto stránkách a jejich výkon. Znamená to, že firmy by měly na svých
webových stránkách nejen vytvářet informativní obsah včas, ale také potřebují, aby jejich
web byl rychlý bez vkládání zbytečných údajů, co by právě mohlo ohrozit dobu zobrazení.
Taktéž by firma měla usilovat o neustálé zvyšování dostupnosti svých webových stránek.
(Lin a Lu, 2000)
Modely chování zákazníka na webu
54
K ZAPAMATOVÁNÍ
Optimální doba načtení webové stránky přes mobilní telefony je 3 vteřiny, každá další
vteřina zvyšuje riziko opuštění této stránky uživatelem.31
I když výsledky studií ukázaly, že kvalita informací, doba odezvy a přístupnost systému
ovlivňují přesvědčení uživatele o webu, je důležité si uvědomit, že i jiné faktory mohou
hrát důležitou roli při ovlivňování těchto přesvědčení uživatelů. Příklady takových faktorů
zahrnují subjektivní zásady a vliv vrstevníků, počítačové zkušenosti a inovační charakteristiky.
(Lin a Lu, 2000)
TESTOVÉ OTÁZKY
Otestujte si získané znalosti z kapitoly č. 4. Pouze jedna odpověď je správná.
Správné odpovědi naleznete na konci kapitoly.
1. Jaké přístupy sledují odezvu na podněty jako reakce na způsob prezentace zboží?
a) Racionální přístupy.
b) Behaviorální přístupy.
c) Psychoanalytické.
2. Co nepatří mezi tři základní prvky Foggova modelu:
a) Preference.
b) Pobídky.
c) Motivace.
3. Navzájem kompenzační vztah má:
a) Motivace a způsobilost.
b) Pobídky a motivace.
c) Způsobilost a pobídky.
4. Vnímaná snadnost používání má kauzální vztah s:
a) Vnímanou užitečností.
b) Motivacemi uživatelů.
c) Reálným používáním systému.
5. Úmysl určuje:
a) Rozsah, v jakém má uživatel zájem o webové stránky.
b) Míru, do jaké by uživatel chtěl v budoucnu znovu navštívit webové stránky.
c) Rozsah domněnky uživatele, že používání www stránek by zvýšilo jeho pracovní výkon.
31
Webový portál Mediaguru [online] [vid. 10. září 2018]. Dostupné z https://www.media-
guru.cz/clanky/2018/06/rychlost-webu-je-pro-uspech-na-internetu-stale-dulezitejsi/
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
55
SHRNUTÍ KAPITOLY
Po prostudování kapitoly č. 4 byste měli umět:
• Definovat zaměření a přístupy psychologických modelů.
• Vymezit základ a určit hlavní elementy FBM.
• Identifikovat možnosti využití FBM v rámci webdesignu.
• Vylíčit jádro a základní komponenty TAM.
• Charakterizovat hlavní modifikace TAM.
• Vysvětlit podstatu modelu akceptace webových stránek.
ODPOVĚDI NA TESTOVÉ OTÁZKY
1b, 2a, 3a, 4a, 5b
Možnosti tvorby webové stránky
56
5 MOŽNOSTI TVORBY WEBOVÉ STRÁNKY
RYCHLÝ NÁHLED KAPITOLY
V této kapitole si popíšeme cestu od nápadu k doméně, hostingu a redakčnímu systému.
Doména by měla být krátká, výstižná a zapamatovatelná. Vysvětlíme, k čemu slouží webhosting
a proč potřebujeme pro náš web pronajímat a platit prostor na internetu. Budeme
také hovořit o redakčních systémech neboli content management systémech (CMS). Uvedeme
si některé příklady stávajících řešení na trhu a vysvětlíme si jejich výhody a nevýhody.
Přiblížíme vám možnosti a způsoby tvorby webu – kódování na míru, použití redakčního
systému. Využití šablon, cloudové drag and drop editory. Ve stručnosti pak ještě doplníme
informace o přídavných modulech, které jsou nedílnou součástí designu webové
stránky.
CÍLE KAPITOLY
• Popsat co je doména a jak volit doménové jméno.
• Vysvětlit, jak funguje webhosting a proč jej potřebujeme.
• Popsat redakční systémy a vyhodnotit jejich přínosy.
• Ukázat přístupy k tvorbě webové stránky.
• Seznámit čtenáře s CMS systémy Wordpress, Joomla! a Drupal.
• Seznámit čtenáře s drag and drop editory Wix, Webnode, Squarespace a Weebly.
KLÍČOVÁ SLOVA KAPITOLY
Doména, webhosting, redakční systém, Wordpress, Joomla!, Drupal, Wix, Webnode.
5.1 Doména, webhosting a redakční systém
Doménu lze chápat ve smyslu adresy. Tak jako vaše trvalé bydliště je na nějaké adrese,
tak i webová stránka je na nějaké adrese, což je doména. Určuje jednoznačnou pozici vašich
webových stránek v internetovém prostředí a za žádných okolností byste její výběr neměli
podceňovat.
Definice
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
57
Požadavky na vhodné doménové jméno jsou následující (Mikulášková a Sedlák, 2015,
s. 85):
• Krátká – vyhněte se víceslovným výrazům.
• Výstižná – charakterizuje co nejpřesněji obor vaší činnosti.
• Dobře zapamatovatelná – zákazník si vás může podruhé lépe najít.
• Snadná písemná verze – snažte se o soulad písemné i slovná podoby.
• Bez hanlivých výrazů – vyvarujte se dvojsmyslným výrazům.
Do názvu domény můžete uvést jméno své firmy. Pokud s podnikáním začínáte, budete
muset řešit název firmy a z pravidla nastává situace, kdy obchodní název firmy je volný ale
stejnojmenná doména ne a naopak. Doména je volná, ale legislativně nemůžete jméno použít
kvůli zapsané konkurenci v obchodním rejstříku. Je to tedy velmi často proklikávání
mezi servery justice.cz a nic.cz, které umožní kontrolu dostupnosti jak názvu firmy, tak
jména domény.
Webhosting, někdy se nazývá jen zkráceně hosting, je pronájem místa pro vaše webové
stránky. Je to něco jako pozemek pro váš dům – stránky. Na webhostingu je umístěn například
redakční systém, ve kterém si stránky vytváříte a spravujete. Dále jsou na hostingu
nahrané všechny obrázky a fotky, které chcete na svých stránkách ukázat, a také sem směřuje
vaše doména. To je adresa vašich stránek, pod kterou vás každý na internetu najde. Za
hosting – pronájem webového prostoru platí provozovatel webových stránek provozovateli
webhostingu pravidelné splátky. Uživatel, nájemce webového prostoru, má neomezený přístup
ke svým webovým stránkám. Ty může libovolně upravovat, přidávat nebo mazat. Celková
velikost stránek je přitom ohraničena velikostí vyhrazeného diskového prostoru na
daném hostingu. Ta se dnes pohybuje v řádu gigabajtů.32
Redakční systém se používá pro správu a publikování obsahu webové prezentace nebo
blogu. Často se můžeme též setkat s pojmem CMS (Content management system). Redakční
systémy jsou vytvořeny tak, aby je i laik mohl jednoduše a efektivně ovládat. Používají
se pro správu příspěvků, diskusí, komentářů, pro publikování obrázků nebo jiných
multimediálních souborů, případně lze v rámci redakčního systému určovat práva jednotlivým
uživatelům. V současné době je velmi populární používat redakční systémy pro
tvorbu blogů. Díky tomu lze jednoduše vytvořit originální blog, buď pouze pro osobní
účely nebo pro propagaci e-shopu nebo internetového obchodu.33
32
Webový portál Hosting [online] [vid. 10. března 2019]. Dostupné z: https://hosting.cz/nevite-si-rady/co-
je-to-hosting-35/
33
Webový portál Shoptet [online] [vid. 15. března 2019]. Dostupné z: https://www.shoptet.cz/slovnik-
pojmu/redakcni-system/
Návod
Definice
Definice
Možnosti tvorby webové stránky
58
5.2 Přístupy k tvorbě webu
Možnosti zpracování webové stránky jsou různorodé a zahrnují činnosti od situace, kdy
se nevyhneme programování až po „naklikání“ webové prezentace úplným laikem bez znalosti
programovacích jazyků. Vždy záleží na tom, co je cílem webu, jakou roli hraje v celkové
podnikové strategii nebo marketingové strategii, jaký je rozpočet celého projektu a
především aktuální časové možnosti marketingového týmu, firmy nebo podnikatele.
Obecně můžeme mluvit o třech základních situacích. První z nich je web na míru, který
staví profesionální studio s programátory a webdesignery. Druhá je pomocí redakčního systému
a zvolené předpřipravené šablony, kde je možné upravovat na webu barvy písmo,
položky menu, texty, vkládat obrázky ale už méně můžeme měnit celkové rozvržení
stránky. Základní nastavení zvládne i amatér ale častěji se při tvorbě obracíme na konzultanty
a webdevelopery. Díky menší náročnosti to bude menší tým lidí. Poslední a nejpřístupnější
variantou jsou cloudové služby, které využívají drag and drop34
systémy – umisťování
prvků a celkovou editaci tak zvládne skutečně každý.
5.2.1 WEB NA MÍRU
Web na míru budeme poptávat především pro projekty, kde je web strategickým nástrojem
podnikatelské činnosti. Dále v situacích, kdy požadujeme velmi specifické funkce jako
je například web firmy Mixit.cz kde si uživatel seskládá sám vlastní musli. Tento interakční
design žádné řešení pomocí šablony nesvede a už vůbec ne cloudové drag and drop sys-
témy.
Někdy v případě webu na míru hovoříme o tom, že je web postavený od nuly. To ale
není téměř nikdy pravda a programátoři a webdesigneři většinou kombinují předešlou práci
a přednastavené doplňky.
Vytvoření webových stránek bez použití CMS mnohdy vyžaduje zapojení vývojářů
ovládajících programovací jazyky, jako jsou například HTML, PHP, Javacsript a mnohé
další. Tímto způsobem sice získáte více prostoru a flexibility pro vytvoření stránek takříkajíc
na míru Vašim požadavkům, budete však nuceni vynaložit velké množství energie,
času a finančních zdrojů.35
5.2.2 POUŽITÍ REDAKČNÍHO SYSTÉMU A ŠABLONY
O principech fungování redakčního systému jsme již hovořili, nyní jej dejme do souvislosti
s výhodami, které pro tvorbu webu nabízí.
34
Více o drag and drop systémech zde: http://www.1pcrevue.cz/tip0276.htm
35
Webový portál OVH [online] [vid. 9. března 2019]. Dostupné z: https://www.ovh.cz/webhosting/web-
site/porovnani-cms/
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
59
Výhody redakčních systémů:36
Jednoduché ovládání – Redakční systémy zpravidla disponují vysoce přehledným administrativním
rozhraním (back-office), umožňujícím vytváření webových stránek v editoru
WYSIWYG (What You See Is What You Get). Díky tomu můžete sledovat prováděné
změny takřka v reálném čase.
User friendly / Mobile friendly – Všechny redakční systémy obsahují šablony pro responzivní
webové stránky – tedy stránky, které jsou optimalizované pro zobrazování na
mobilních zařízeních.
Multi-users – Každému přispěvateli lze přidělit specifická práva: úprava textového obsahu
/ modifikace kódu atd...
Pokročilá personalizace – Své stránky můžete rozšířit o velké množství přídavných
funkcí, které jsou zdarma ke stažení přímo v hlavním menu Vašeho redakčního systému.
Několik příkladů: pole pro přihlášení k newsletteru, tlačítka s odkazy na sociální sítě apod...
Komunita – Na komunitních fórech těch nejpopulárnějších redakčních systémů můžete
sdílet své nápady a získávat pomoc od ostatních uživatelů.
SEO – Redakční systémy disponují mechanismy pro optimalizaci Vašich stránek pro
internetové vyhledávače
Mezi oblíbené redakční systémy patří Wordpress, Joomla nebo Drupal. Všechny tyto
systémy jsou zdarma, nicméně existují samozřejmě i placená řešení na míru. Nyní se na
tyto tři základní značky zaměříme podrobněji.
WORDPRESS
WordPress je software patřící mezi redakční systémy. Což znamená, že má dvě části –
administraci webového obsahu (backend, obslužnou aplikaci) a samotný výsledný webový
obsah (frontend, webové stránky). Instaluje se na webový hosting nebo server a k jeho
obsluze potřebujete webový prohlížeč (tedy počítač, což je dnes také laptop, tablet nebo i
chytrý mobil).37
WordPress dokáže fungovat jako e-shop, magazín s redakční radou, firemní prezentace
nebo mobilní aplikace. Umí se napojit na jiný software a číst z něj data nebo je tam posílat.
Web na WordPressu si můžete vyrobit sami, nebo si najmout dodavatele (firmu nebo volno
nožce). Vzhled výsledných stránek určují šablony vzhledu, které lze získat zdarma, koupit
si je, nebo si je nechat naprogramovat na míru.
36
Webový portál OVH [online] [vid. 10. března 2019]. Dostupné z: https://www.ovh.cz/webhosting/web-
site/porovnani-cms/
37
Webový portál Co umí WP [online] [vid. 10. března 2019]. Dostupné z: https://coumiwp.cz/co-je-word-
press/
Definice
Možnosti tvorby webové stránky
60
Pokud budete hledat WordPress jako redakční systém, naleznete jeho dvě verze. WordPress.com
je komerční stránka, kde můžete s určitým omezením hostovat svou stránku
zdarma. Vytvořila ji stejná firma, která stojí i za WordPressem (Automattic). WordPress.org
je místo, kde si můžete zdarma stáhnout svou vlastní kopii redakčního systému
WordPress.38
Obrázek 13: Zájem o Wordpress podle množství vyhledávání na Google celosvětově
Zdroj: Webový portál Google Trends [online] [vid. 17. března 2019]. Dostupné z: https://trends.goo-
gle.com/trends/
Jak je vidět z vývoje vyhledávání slova wordpress na nejpoužívanějším vyhledávači Google
(obrázek 13), je tato platforma stále populární i když postupem času zájem o ni klesá.
Ve srovnání s dalším systémem Joomla! (viz obrázek 14) je na tom ale WordPress stále
dobře a dá se říct, že ustál nástup cloudových editorů.
JOOMLA!
Obrázek 14: Zájem o Joomla! podle množství vyhledávání na Google celosvětově
Zdroj: Webový portál Google Trends [online] [vid. 17. března 2019]. Dostupné z: https://trends.goo-
gle.com/trends/
Joomla! se řadí k nejpopulárnějším Open Source redakčním systémům (angl. zkratka
CMS) vůbec. Je licencována pod GNU General Public License. Milióny webů využívají
38
Webový portál WP lama [online] [vid. 10. března 2019]. Dostupné z: https://www.wplama.cz/jaky-je-
rozdil-mezi-wordpress-org-a-wordpress-com/
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
61
Joomla!. Používají ji jednotlivci, malé, střední podniky i velké organizace po celém světě.
Umožňuje jim snadno vybudovat řadu webových stránek a webových aplikací.39
DRUPAL
Drupal je volně šiřitelný internetový software, který vám dovolí organizovat, spravovat
a publikovat obsah s nekonečnými možnostmi customizace. Počet webů s Drupalem přesáhl
milion webových stránek! Drupal je vyvíjený a udržovaný komunitou čítající okolo
630 tisíc uživatelů a vývojářů po celém světě. Je šiřitelný pod licencí GNU, což znamená,
že je volně šiřitelný a sdílitelný s ostatními. To pro vývojový model znamená, že na něm
lidé po celém světě konstantně pracují, aby byl Drupal vždy schopný pracovat s těmi nejnovějšími
technologiemi, který web nabízí. Principy vývoje Drupalu jsou modulace, standardy,
spolupráce a jednoduchost.40
Obrázek 15: Zájem o Drupal podle množství vyhledávání na Google celosvětově
Zdroj: Webový portál Google Trends [online] [vid. 17. března 2019]. Dostupné z: https://trends.goo-
gle.com/trends/
SROVNÁNÍ NEJPOUŽÍVANĚJŠÍCH REDAKČNÍCH SYSTÉMŮ
Mezi redakčními systémy vévodí WordPress. Má své chyby, ale to každý ze systémů.
Výhodu ale je obrovská komunita lidí, kteří jej používají. Velké množství bezplatných
pluginů (více v kapitole 5.3 Přídavné moduly).
Tabulka 2: Srovnání redakčních systémů
Modul WordPress Joomla! Drupal
Počet stažení za týden 1 000 000 113 000 34 000
Tržní podíl 59,2 % 6,2 % 4,9 %
Počet bezplatných šablon + 2 000 + 900 + 1 800
Počet bezplatných pluginů +27 000 + 7 000 +24 000
Zdroj: Webový portál OVH [online] [vid. 10. března 2019]. Dostupné z: https://www.ovh.cz/webhos-
ting/website/
39
Webový portál Joomla Portál [online] [vid. 20. dubna 2019]. Dostupné z: https://www.joomlaportal.cz/o-
joomla
40
Webový portál Drupal Arts [online] [vid. 17. března 2019]. Dostupné z: https://drupalarts.cz/drupal
Možnosti tvorby webové stránky
62
5.2.3 CLOUDOVÉ EDITORY (WEBSITE BUILDER)
Jsou platformy, kde si uživatel bez znalostí programování může vytvořit web, jehož vizuální
kvalita se bude přibližovat webu postavenému s použitím šablony. Výhodou těchto
platforem je jejich online režim, kdy není nutné stahovat soubory do počítače a vše probíhá
v takzvaném cloudu.
Vhodné použití je pro weby, od kterých se nečeká složitá funkcionalita, interaktivita a
náročné uživatelské rozhraní. Proto je můžeme využít pro základní prezentaci firmy, landing
page, blogy nebo weby událostí. Díky nízké ceně mohou přitahovat pozornost začínajících
podnikatelů, pro které není web místem obchodu, ale je jen součástí prezentace firmy.
Jejich nástup kolem roku 2013 můžeme vidět na obrázcích č. 16, 17, 18 a 19. Změna ve
způsobu publikování je patrná a na ústupu jsou některé jiné přístupy, jako je redakční systém
na míru nebo jiné jednoduché weby.
WIX
Wix je přední platforma na bázi cloudového řešení s miliony uživatelů po celém světě.
Umožňujeme každému si vytvořit krásné a profesionální webové prezentace. V rámci základního
balíčku je to možné zdarma.
Obrázek 16: Zájem o Wix podle množství vyhledávání na Google celosvětově
Zdroj: Webový portál Google Trends [online] [vid. 17. března 2019]. Dostupné z: https://trends.goo-
gle.com/trends/
Jak Wix, tak WordPress nabízí možnost instalace dalších doplňků nebo pluginů pro rozšíření
funkcionality webu, jako je kalendář, komentáře, fórum a posuvníky. Rozdíl mezi
službami je v tom, že u Wixu se nedostanete ke zdrojovému kódu doplňků, zatímco ve
WordPress si můžete zdrojové kódy upravovat dle libosti. Wix nabízí stovky šablon, které
si můžete sami uzpůsobit. Jak už jsme se zmínili, tyto úpravy jsou velice jednoduché.
Funkce „drag-and-drop“ je v tomto případě vaším nejlepším pomocníkem. Má to však svůj
Definice
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
63
háček – když už se pustíte do úprav, nemůžete jen tak přeskočit na jinou šablonu. Pokud to
uděláte, přijdete o všechny úpravy, na kterých jste pracovali, a to je obrovská nevýhoda.41
WEBNODE
Webnode je univerzální, bezplatný program na tvorbu webů původem z České republiky.
Existuje od roku 2008 a během této doby bylo na Webnode vytvořeno více než 18
milionů stránek. Nemůžeme říct, že by měl Webnode nějaké speciální funkce, nebo že by
jeho webové šablony byly dost dobré. Ale tento program je jednoduchý na ovládání a
umožňuje vytvářet vícejazyčné weby. To je nepochybně hlavní výhodou Webnode. Na této
platformě můžete vytvořit web, který bude dostupný ve více než 20 různých jazycích. V
roce 2016 prošel Webnode velkou aktualizací svých služeb, a stal se tak mnohem lépe
ovladatelný než dřív.42
Obrázek 17: Zájem o Webnode podle množství vyhledávání na Google celosvětově
Zdroj: Webový portál Google Trends [online] [vid. 17. března 2019]. Dostupné z: https://trends.goo-
gle.com/trends/
SQUARESPACE
Squarespace je placený editor webů s vynikajícími šablonami. Lze jen stěží tvrdit, že
tento webový editor je z našeho seznamu ten nejlepší, ale pozornost si doopravdy zaslouží.
Třeba jen proto, že má velmi krásné a vysoce kvalitní šablony. Šablony Squarespace jsou
pastvou pro oči a směle můžeme tvrdit, že jsou mezi editory jedněmi z nejlepších. Dokonce
i přesto, že jich je poměrně málo. Takže vizuální část Squarespace je naprosto v pořádku.
Squarespace nemá typické rozhraní vizuálního editoru a zvyknout si na něj může vyžadovat
určitý čas. Ale upravovat šablony je opravdu snadné a možnosti přizpůsobení webové
stránky jsou opravdu široké. Zahrnují možnost provádět změny CSS (je pravda, že menší),
které mohou být velmi užitečné pro zkušené webmastery.43
41
Webový portál Web Builders Guide [online] [vid. 27. dubna 2019]. Dostupné z: https://www.websitepla-
net.com/cs/blog/wix-vs-wordpress/
42
Webový portál Web Builders Guide [online] [vid. 27. dubna 2019]. Dostupné z: http://www.webbuil-
dersguide.com/best-builders-czech/
43
Webový portál Web Builders Guide [online] [vid. 27. dubna 2019]. Dostupné z: http://www.webbuil-
dersguide.com/best-builders-czech/
Definice
Definice
Možnosti tvorby webové stránky
64
Obrázek 18: Zájem o Squarespace podle množství vyhledávání na Google celosvě-
tově
Zdroj: Webový portál Google Trends [online] [vid. 17. března 2019]. Dostupné z: https://trends.goo-
gle.com/trends/
WEEBLY
Weebly je jedním z nejstarších a nejpopulárnějších softwarů pro tvorbu webu, který se
nepřetržitě vyvíjí od roku 2007. Tento bezplatný editor webových stránek je navržen tak,
aby umožňoval navrhování stránek různých typů: osobní stránky, blogy, e-shopy. Weebly
je opravdu pohodlný a snadno použitelný editor s vynikajícími šablonami, které mají vysoký
potenciál pro úpravy a modernizaci. Kromě barevných šablon má Weebly výkonný
drag a drop editor, který výrazně zjednodušuje proces tvorby webu. Jako jeden z nejpopulárnějších
webových editorů na světě disponuje Weebly velkým výběrem aplikací v AppMarketu.
To umožňuje stále a plynule rozvíjet možnosti stránek.44
Obrázek 19: Zájem o Weebly podle množství vyhledávání na Google celosvětově
Zdroj: Webový portál Google Trends [online] [vid. 17. března 2019]. Dostupné z: https://trends.goo-
gle.com/trends/
44
Webový portál Web Builders Guide [online] [vid. 27. dubna 2019]. Dostupné z: http://www.webbuil-
dersguide.com/best-builders-czech/
Definice
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
65
5.3 Přídavné moduly – pluginy
Funkce redakčního systému lze doplňovat prostřednictvím zásuvných modulů (pluginů),
což z něj činí platformu pro vytváření webových aplikací. Obyčejné pasivní stránky jsou
již minulostí, dnešní weby obsahují spoustu interakcí a dynamických prvků. Z toho vyplývá,
že pomocí pluginů lze do WordPressu doplnit skoro jakoukoliv funkci. Velké množství
je zdarma, ale lze je také nakupovat.45
V oblasti e-shopů se redakční systémy rozšiřují pluginy pro správu internetového obchodu.
U WordPressu jsou to například WooCommerce, WP Ecommerce, QuicShop.
PRO ZÁJEMCE
ROZHODOVÁNÍ MEZI WEBEM NA MÍRU A ŠABLONOU U DROBNÉHO PODNIKATELE
Kadeřnice Petra, 22 let – Začíná podnikat
Na začátku každého podnikání je investic řada. Petra by měla tedy zhodnotit, co je pro
ni důležité a co ne. Petra si sestavila svůj měsíční rozpočet a dopočítala se, že měsíčně musí
realizovat obrat 50 tisíc korun (jedná se zatím o malé kadeřnictví, Petra začíná). K tomu,
aby tohoto obratu dosáhla, musí obsloužit 120 klientů v průměrné výši objednávky 416 Kč
Petra jako každý podnikatel ví, že potřebuje webové stránky, aby o ní lidé věděli. 120
klientů na začátek není přeci málo.
Nyní, ať se Petra rozhodne jakkoliv, vynaložené peníze na webové stránky musí rozpočítat
mezi každou objednávku. Tu buď navýší o příslušnou cenu a tím může být méně konkurenčně
schopná nebo si ze svých zisků něco „odtrhne“.
Cíle a potřeby návštěvníků
Než se Petra pustí do další investice v podnikání (tvorba www stránek), měla by se zamyslet
nad tím, jak se chce profilovat a čím chce na trhu zaujmout. Měla by znát své konkurenční
výhody, vědět, co lidé od kadeřnice očekávají, proč k ní chodí, čeho se naopak
bojí, jak často se budou vracet atd. Všechny tyto aspekty by následně měla v přehledné
podobě převést do vznikajících webových stránek.
(V této fázi doporučím každému, aby zvolil služby konzultanta v oblasti strategického
webdesignu a své nápady probral s někým zkušeným. Cena vynaložená za konzultanta se
několikanásobně vrátí i v případě zmařené investice).
45
Webový portál Co umí WP [online] [vid. 11. března 2019]. Dostupné z: https://coumiwp.cz/co-je-word-
press/
Možnosti tvorby webové stránky
66
Právě tyto informace budou klíčové k tomu, aby se z návštěvníka webových stránek stal
zákazník Petry, který u ní reálně nakoupí službu.
Takto promyšlené stránky by měly lákat uživatele k objednávce, přesvědčovat svým
vzhledem a obsahem o tom, že Petra je profesionál, svůj obor zná a je schopna právě danému
návštěvníkovi nabídnout kvalitní služby, které od své kadeřnice očekává.
Splnění cílů a potřeb návštěvníka
Petra ví, co a jak na stránkách potřebuje návštěvníkům sdělit (probrala to s webovým
konzultantem, který jí poradil). Nyní se musí rozhodnout, jak stránky realizovat. Dnes má
řadu možností. Může objednat profesionální firmu, může si pomocí měsíčně placených
systémů „vyklikat“ webové stránky nebo zakoupit šablonu a najít někoho, kdo jí s realizací
pomůže.
Ať se Petra rozhodne, jak chce, musí se držet toho, že webové stránky splní cíle a potřeby
návštěvníků. Pokud by se tak nestalo, ať by byla investice malá nebo velká, byla by
zbytečná. A to si Petra nemůže na začátku, kdy počítá každou „korunu“ dovolit.
Cena služeb a reálná investice
Webové stránky na míru
Petra dostala nabídku od profesionálního studia, že jí realizují krásné a moderní webové
stránky např. za 45 000 Kč. U tohoto typu stránek je více než pravděpodobné, že budou na
100% plnit cíle a potřeby návštěvníků. Jedná se o webové stránky na míru a jsou zhotoveny
tak, jak Petra potřebuje.
Dejme tomu, že webové stránky, od profesionálního studia mají životaschopnost třeba
4 roky. Lehkým počtem zjistíme, že samotná realizace stránek bude vycházet na cca 950
Kč / měsíčně. Pozor, to v případě, že stránky skutečně 4 roky vydrží a Petra bude i za 4
roky úspěšně podnikat. To je faktor, který si málo který podnikatel chce připustit, ale když
se počítají peníze a investice, měli byste znát všechna rizika.
Placené systémy s pevnou šablonou
Další možnost je zvolit některý z placených systémů, kde Petře zprovozní webové
stránky např. za 249 Kč / měsíčně. Proti profesionální investici je cca 4x levnější. To je
slušná úspora. Takový systém není realizace stránek na míru. Jedná se o sadu připravených
šablon, které svou strukturou nemusí plnit potřeby a cíle Petry. Pokud Petra najde z vybraných
šablon tu, která to opravdu splní, má vyhráno. Pokud ne, řekl bych, že je to sice malá
investice, ale svůj správný užitek nepřinese.
Systém pro realizaci stránek bez znalosti programování
Další možností je najít kompromis mezi profesionálním řešením na míru a placeného
systému. Jsou dnes již aplikace, kde je možné připravenou šablonou upravovat a to opravdu
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
67
ve velkém rozsahu. Petra k tomu bude ale někoho potřebovat, aby jí s tím pomohl. To bude
něco stát. Petra oslovila pracovníka na volné noze. Petře nabídl, že za 10 000 Kč jí se vším
pomůže a webové stránky na tomto systému uvede do 100 % provozu. Aplikace však za
své služby účtuje 320 Kč / měsíčně.
Pokud přistoupíme na to, že takovéto webové stránky vydrží např. 3 roky (systémy jsou
často mírně pozadu o proti řešení na míru) – investice Petry by v tuto chvíli byla 597 Kč /
měsíčně.
Vyhodnocení
Nyní musí Petra provést vyhodnocení své poptávky.
Webové stránky na míru jsou nejdražší – přinesou sice 100 % splněných cílů a očekávání.
Cena ale není malá. Placený systém s pevnou šablonou se jeví jako to nejlevnější
řešení, ale připravené šablony Petře nevyhovují, protože by potřeby návštěvníků nesplnily
ani z 30%. Systém s dynamickou šablonu a pracovníkem na volné noze se jeví jako nejlepší
řešení. Systém a upravená šablona splní všechny potřeby, které si Petra s webovým konzultantem
dohodla.
Tím pádem se Petra dostává k tomu, že musí cenu průměrné objednávky navýšit o cca
5 Kč – což by jí nemělo ohrozit v rámci cenové politiky na trhu, ale přinese jí to potřebný
užitek.
Jak přemýšlet nad investicí?
V případě Petry jsme zjistili, že byla poslední možnost optimální. To však nemusí být
vždy správně. Vždy je důležité, jaké potřeby a očekávání mají vaši návštěvníci. Pokud budete
např. prodávat specifický, unikátní produkt, za nemalé peníze a potřebujete uživatele
přesvědčit o jeho kvalitě, měli byste se rozhodnout pro profesionální studio, protože ostatní
řešení vám nepřinesou potřebný efekt.
Vždy nad realizací stránek přemýšlejte jako nad investicí. Musí se vám vrátit a přinést
ještě něco navíc. Pokud se tak nestane, hledejte jiné řešení. Pokud má váš produkt / služba
potenciál, špatně zpracované webové stránky ho mohou poslat do hlubin moře. Pak i přesto,
že vše bylo na začátku levné a vy jste hodně ušetřili, jste ve výsledku výrazně prodělali,
protože jste na službě nebo produktu mohli vydělat mnohonásobně více.
A to je vždy předmět investice.
Zdroj: Webový portál Brilo [online] [vid. 22. března 2019]. Dostupné z: https://www.brilo.cz/sablonu-web-
miru-drahy-levny-se-rozhodnout/
Možnosti tvorby webové stránky
68
TESTOVÉ OTÁZKY
Otestujte si získané znalosti z kapitoly č. 5. Pouze jedna odpověď je správná.
Správné odpovědi naleznete na konci kapitoly.
1. Jak nazýváme pronájem místa pro webové stránky?
a) Doména.
b) Hosting.
c) Prohlížeč.
2. Doména by neměla být:
a) Dlouhá.
b) Výstižná.
c) Zapamatovatelná.
3. Pro projekty, kde je web strategickým nástrojem podnikání volíme zpravidla:
a) Drag and drop cloudové editory.
b) Šablonu s redakčním systémem.
c) Řešení na míru.
4. Nejrozšířenější redakční systém na světě je?
a) Drupal.
b) Weebly.
c) Wordpress.
5. Pro weby, od kterých se nečeká složitá funkcionalita, interaktivita a náročné uživatelské
rozhraní volíme zpravidla:
a) Drag and drop cloudové editory.
b) Řešení na míru s CMS systémem.
c) Šablonu s redakčním systémem.
SHRNUTÍ KAPITOLY
Po prostudování kapitoly č. 5 byste měli umět:
• Popsat co je doména a jak volit doménové jméno.
• Vysvětlit, jak funguje webhosting a proč jej potřebujeme.
• Popsat redakční systémy a vyhodnotit jejich přínosy.
• Znát rozdílné přístupy k tvorbě webové stránky.
• Poznat a rozhodnout o kvalitách CMS systémů.
• Poznat a rozhodnout o kvalitách drag and drop editorů.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
69
ODPOVĚDI NA TESTOVÉ OTÁZKY
1b, 2a, 3c, 4c, 5a
Proces tvorby webové stránky
70
6 PROCES TVORBY WEBOVÉ STRÁNKY
RYCHLÝ NÁHLED KAPITOLY
Jak jsme uváděli v první kapitole, je nejen webdesign ale také design obecně vnímán
jako proces. V této kapitole se podíváme na to, jak celý tento proces může probíhat, jaké
jsou jeho části, kdo se na nich obvykle podílí a jaký vliv mají na celkový výsledek tvorby
webové stránky. Ukážeme si, jak se tvoří informační infrastruktura webu, jak v této fázi
využít například metodu cardsorting nebo drátěný model (wireframe). V rámci kapitoly
představíme také případovou studii, která v procesu designu pojednává o tvorbě drátěného
modelu webu což je mezistupeň vývoje návrhu.
CÍLE KAPITOLY
• Vysvětlit, jak rozpracovat projekt tvorby webové stránky.
• Ukázat možnosti analýzy konkurence.
• Přiblížit principy a postupy analýzy klíčových slov.
• Představit pojem informační architektura neboli informační struktura.
• Ukázat, jak vypadá wireframe.
• Přiblížit postup tvorby webu pomocí redakčního systému.
• Nastínit možnosti drag and drop cloudových editorů.
KLÍČOVÁ SLOVA KAPITOLY
Web na míru, analýza konkurence, analýza klíčových slov, cardsorting, treetesting,
wireframe, redakční systém.
V páté kapitole jsme rozdělili možnosti tvorby webové stránky do tří základních kategorií.
Logicky tak nyní toto dělení dále použijeme. Procesy pro každý přístup jsou výrazně
odlišné. Začneme situací, při které tvoří agentury nebo konzultanti web na míru. Při tomto
procesu je marketér často na druhé straně a poskytuje zhotoviteli součinnost. Pochopením
celého procesu se tak stanete lepšími partnery v projektu firemní webové stránky. Dále
můžete požadovat vysvětlení, proč některé části jako je uživatelský výzkum nebo drátěný
model firma nedodává a ignoruje tak určité standardy v odvětví.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
71
6.1 Proces zpracování webu na míru
Dobré agentury si nemohou dovolit web na míru odfláknout a svěřit jej dvěma lidem.
Na každou fázi tvorby webu by každá agentura měla mít minimálně jednoho profesionála.
Na tvorbu webu je průměrně potřeba minimálně 6 různých profesí:46
• Konzultant (se kterým budete mít minimálně jednu schůzku a budete s ním probírat
veškeré náležitosti, vize a požadavky).
• Marketingový specialista (který pro váš web vymyslí marketingovou strategii, cíle
a úlohu webu ve vašem podnikání).
• UX designer (který web navrhne tak, aby se uživatelé na webu pohybovali přesně
tak, jak my chceme, a přitom se na něm cítili dobře, a dělali požadované akce).
• Grafik (který zajistí, aby se působení klienta promítalo v myšlení uživatelů tak, jak
chceme a webové stránky upoutaly a ukotvily se návštěvníkům v paměti).
• Kodér (ten zajistí správné zobrazování webu – jak uživateli, tak vyhledávačům).
• Programátor (který zajistí, aby stránky správně fungovaly a ulehčovaly vám práci).
Jak může například vypadat celý proces zpracování webové stránky, vidíme na obrázku
20 níže.
Obrázek 20: Proces zpracování webové stránky
Zdroj: Webový portál Mediagrafik [online] [vid. 8. března 2019]. Dostupné z: https://www.mediagra-
fik.cz/2016/08/vstupni-analyza-pro-tvorbu-webovych-stranek/universalni-procesni-mapa/
Procesy se mohou mírně lišit v závislosti na vyspělosti agentury, rozpočtu, který na webový
projekt máme a účelu webové stránky.
46
Webový portál Interval [online] [vid. 11. března 2019]. Dostupné z: https://www.interval.cz/clanky/jak-
se-vlastne-tvori-web-a-proc-stoji-vic-nez-cekame/
Proces tvorby webové stránky
72
Semerádová a Weinlich (2018, s. 78) ve svém výzkumu dotazovali odborníky na webdesign
a zjistili, že typicky se používají tyto postupy: vodopádový model, vývoj pomocí prototypů,
agilní přístup, spirálový model, vývoj orientovaný na vlastnosti, lean přístup. Z jejich
výzkumu pak vytvořili model s procesem vývoje webu orientovaného na vlastnosti
(obrázek 21).
Obrázek 21: Vývoj orientovaný na vlastnosti
Zdroj: Semerádová a Weinlich (2018, s. 80)
ANALÝZA KONKURENCE
Před tím, než se pustíme do samotného vývoje je většinou dobré projít si konkurenční
weby. Člověk tak získá přehled o tom, co je v odvětví, ve kterém podniká standardem a
bude moci posoudit, zda se vydat cestou podobnosti či originality. U této volby je nutné
mít na paměti, že zákazníci nemají přiliš rádi změny a třeba inovace v rozložení prvků na
stránce může být kontraproduktivní. Lidé jsou zvyklí na to, kde je umístěn košík z tisíce
jiných webů, které navštíví, proto je nutné mít tyto záležitosti na paměti.
Návod
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
73
V rámci analýzy konkurenčních firem učiňte (Mikulášková a Sedlák, 2015, s. 42):
• Přihlaste se k odběru jejich newsletteru.
• Sledujte jejich stránky na sociálních sítích.
• Pozorujte změny na jejich e-shopu.
• Všímejte si cenové politiky, zavádění novinek na trh a prezentace slev či akcí.
• Prozkoumejte jejich bonusový program, pokud nějaký nabízí.
• Analyzujte doplňkové služby, které poskytují k prodeji.
• Projděte si důkladně e-shopy a vypozorujte jejich funkce.
• Objednejte si u nich zboží a sledujte proces zpracování objednávky.
• Zjistěte, kde všude inzerují jak na internetu, tak případně i v offline světě.
• Dohledejte názory jejich zákazníků, např. na srovnávačích zboží a v diskuzích.
• Navštivte jejich kamenné prodejny a sledujte práci zaměstnanců.
• Najděte na jejich e-shopech konkurenční výhody, kterými se prezentují.
ANALÝZA KLÍČOVÝCH SLOV
Jedná se o soupis toho, co lidé nejčastěji hledají na internetu. V podstatě je to naslouchání
cílové skupině v tom, jaké konkrétní slova a slovní spojení vyhledávají v souvislosti
s oblastí, které se má webová stránka týkat. Taková slova (klíčová) pak budete mít velmi
rádi na webu, jelikož na základě toho (nejen toho) bude Google a Seznam váš web vyhodnocovat
jako relevantní pro zobrazení ve výsledcích vyhledávání.
Analýzu klíčových slov si nechávají zpracovávat provozovatelé s dostatečným rozpočtem
a také provozovatelé, kteří – i přes její finanční náročnost – si jsou vědomi její přínosnosti.
Na základě ní pak vznikají např. požadavky na vstupní stránky, návrh kategorií na eshopu
nebo filtrů pro zboží. Pokud si analýzu necháte zpracovat u odborníka a budete se jí
řídit vy i váš dodavatel webové stránky, výrazně tak podpoříte první návštěvnost z vyhledávačů
po uvedení webu do ostrého provozu. Menší e-shopy a weby tento krok v drtivé
většině případů vynechávají. Analýza je placená služba a stojí v řádu několika tisíců až
desetitisíců podle rozsahu zadání. Je drahá, ale z jejích závěrů pak těžíte dlouhou dobu
(Mikulášková a Sedlák, 2015, s. 44).
INFORMAČNÍ ARCHITEKTURA (STRUKTURA)
Struktura webové stránky vychází mimo jiné i z toho, co vám řekne analýza klíčových
slov. Je přínosné vyjít i z detailního popisu vašich zákazníků a z definice jejich potřeb. To
znamená, že když se rozhodnete prodávat např. suroviny pro domácí výrobu přírodních
mýdel, web bude potřebovat sekci s návody na výrobu přírodních mýdel. Zákazník, který
si nakupuje přírodní mýdla pro domácí výrobu, mimo jiné rád uvítá, když mu poskytnete i
návody, jak na to. Součást návrhu informační struktury bývá rozkreslení jednotlivých částí
e-shopů do jednoduchých drátěných modelů, tzv. Wireframů (obrázek níže). Ty vám říkají,
z jakých stránek se webová stránka skládá a jak vypadají prvky na jednotlivých stránkách.
Návod
Definice
Definice
Proces tvorby webové stránky
74
V případě krabicových řešení a pronájmů se musíte spokojit s tím, co vám nabídne dodavatel
tohoto řešení, protože jejich informační architektura je z části již předdefinovaná.
(Mikulášková a Sedlák, 2015, s. 4)
Obrázek 22: Ukázka metody cardsortingu
Zdroj: Webový portál Fostermilo [online] [vid. 11. března 2019]. Dostupné z: http://www.foster-
milo.com/articles/card-sorting-with-creative-albuquerque
Techniku, kterou lze v této fázi využít je Card sorting (obrázek 22). Jedná se o uživatelsky
orientovanou výzkumnou metodu, která slouží k organizování většího množství pojmů
(položek). Cílem této metody je pochopit, jakým způsobem uživatelé přemýšlejí o informacích,
tedy jak vnímají vztahy mezi jednotlivými pojmy a jak je organizují – tedy odhalit
mentální modely daného problému. Vhodná je proto pro navrhování struktury webových
stránek, nebo její redesign navrhování nebo hodnocení informační architektury služby.47
V rámci nastavování položek menu jak v panelech, tak záhlaví můžeme použít také placený
nástroj treetesting od Optimal Workshop (obrázek 23). V něm připravíme zamýšlené
rozdělení kategorií v menu, napíšeme uživatelům úkoly a měříme s jakou úspěšností je
plní, jak dané produkty nebo informace ve struktuře webu našli.
47
Webový portál 100 metod [online] [vid. 11. března 2019]. Dostupné z: https://100me-
tod.cz/post/156672833539/22-t%C5%99%C3%ADd%C4%9Bn%C3%AD-karet-card-sorting
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
75
Obrázek 23: Testování uspořádání položek menu aplikací Treetesting
Zdroj: Webový portál Optimal Workshop [online] [vid. 11. března 2019]. Dostupné z: https://www.optima-
lworkshop.com/treejack
WIREFRAME
Wireframy jsou podkladem pro zpracování grafického návrhu webové stránky. Definuje
rozmístění funkčních prvků. Nejedná se v žádném případě o grafický návrh, neobsahuje
obrázky a je tvořen pouze pomocí čar a textu (odtud drátěný model). Nedoporučuje se ani
použití barev, až na výjimky, které je potřeba odlišit. Wireframe připravuje informační architekt,
ten přenese do nákresů požadavky klienta a usnadní tak práci na řešení. Klient vidí,
jak web bude fungovat a proč. Programátoři, grafici a ostatní členové týmu pak vidí, co se
kde nachází a co je s čím spojeno. Zároveň pak nedochází ani ke kolizi s klientem, který
např. může reklamovat, že v řešení chtěl video modul a výsledný web jej nemá. Dobrý
dodavatel přikládá Wireframe ke smlouvě a chrání tak zájmy své i klientovy.48
6.2 Proces zpracování webu pomocí redakčního systému
Popis procesu zpracování webu za pomoci redakčního systému nabízí webová stránka
firmy OVH:49
1. Rezervujte si svou doménu: na výběr máte z více než 800 unikátních koncovek.
• Díky doméně získají uživatelé internetu snadný přístup k webovým stránkám. Výběr
domény je důležitý krok. K dispozici je několik typů doménových koncovek:
• Generické: ty nejpopulárnější doménové koncovky. Ideální pro oslovení mezinárodní
komunity (.com / .org...).
• Národní: Oslovte uživatele v konkrétní geografické oblasti (.cz / .es / .it / .pl / .de...).
• Specifické: uvolněte uzdu své fantazii s doménami šitými na míru Vašemu podnikání
(.shop, / .sarl /.games...).
48
Webový portál Pro Školy [online] [vid. 17. března 2019]. Dostupné z: http://wwwproskoly.cz/co-je-to-
wireframe-webu/
49
Webový portál OVH [online] [vid. 11. března 2019]. Dostupné z: https://www.ovh.cz/webhosting/web-
site/
Návod
Návod
Proces tvorby webové stránky
76
2. Vyberte si webhostingový balíček s výkonem odpovídajícím předpokládané datové
zátěži Vašich stránek.
• Webhosting je prostor umožňující uveřejnění webových stránek na internetu za stanovenou
cenu.
3. Zvolte redakční systém (CMS) a nainstalujte ho jediným kliknutím.
• Redakční systémy nabízejí intuitivní rozhraní pro tvorbu dynamických a responzivních
webových stránek.
4. Proveďte konfiguraci svého webu. V případě potřeby přidejte některé z volitelných
rozšíření pro navýšení výkonu.
5. Přidávejte stránky a publikujte články pomocí nainstalovaného redakčního systému.
Návodů na tvorbu webu pomocí šablon je na internetu mnoho50
a jednoduchou instalaci
zvládne téměř každý. Pokud je projekt webové stránky větší, je dobré minimálně spoléhat
na odborné konzultace případně přenechat celé nastavení na externí agentuře či nezávislému
webovému designérovi.
6.3 Web vytvořený v cloudovém editoru
Cloudové editory neboli také website buildery jsou typické svým rozhraním, které využívá
funkce drag and drop, tedy přeloženo do češtiny táhni a pusť. S těmito systémy se
setkáváme jako běžní uživatelé na denní bázi. Například v poště na Gmailu, v software pro
řízení projektů Trello nebo ve webovém prohlížeči Chrome. Každé z těchto rozhraní nabízí
jiný drag and drop systém (viz obrázek 24).
Obrázek 24: Příklady různých pojetí drag and drop funkcí
Zdroj: Webový portál Medium: UX collective [online] [vid. 17. března 2019]. Dostupné z: https://uxde-
sign.cc/drag-and-drop-for-design-systems-8d40502eb26d
50
Například zde: https://www.youtube.com/watch?v=xP07pAdsOI4
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
77
Pro ukázku se podívejme, jak takové rozhraní vypadá přímo v editoru Wix. Obrázek 25
ukazuje, jak jsou rozloženy ovládací prvky, zároveň vidíme i prostor webu (canvas) na
který vkládáme tyto prvky. Pro vložení stačí na určitý element najet kurzorem myši a přetáhnout
jej na canvas.
Obrázek 25: Ukázka drag and drop prostředí v editoru Wix
Zdroj: Webový portál Medium: UX collective [online] [vid. 17. března 2019]. Dostupné
z:https://www.shivarweb.com/4794/wix-review/
Editace a publikování v těchto vizuálních editorech s drag and drop systémem je velmi
snadná. Na druhou stranu je složité přijít s řešením, které by bylo velmi specifické. Systémy
totiž svého uživatele limitují v tom, co je schopný v porovnání s webovou stránkou napsanou
na míru udělat. Další nevýhodou je, že například Wix je zdarma pouze za určitých
podmínek, kdy se na webu zobrazují reklamy a doména je svěřená společnosti. Její zápis
pak vypadá takto: vašedoména.wix.com. To může působit amatérsky, ale vždy záleží na
tom, kdo bude návštěvník a jaký konkrétní produkt má stránka propagovat nebo prodávat.
PRŮVODCE STUDIEM
Blížíme se k první polovině studijní opory, již máme přehled o tom, co je design, kreativita,
co je webdesign a interakční design. Známe úlohu webové stránky v marketingové
komunikaci a při brandingu. Dále rozumíme modelům chování zákazníků a v předcházející
kapitole jsme si odkryli tři základní možnosti zpracování webové stránky. V této jsme se
pak detailně podívali na proces tvorby webu. S tím souvisí také předložená případová studie,
která se týká toho, jak zpracovávat při tvorbě webové stránky wireframy, tzv. drátěné
modely. Tomáš Hrabec ale nabízí i další tipy a triky, které se vám budou v praxi hodit.
Proces tvorby webové stránky
78
PŘÍPADOVÁ STUDIE
TVORBA WIREFRAMŮ PŘI BUDOVÁNÍ WEBU
V této případové studii budeme řešit využití wireframů a protoypů pro webové projekty.
Řekneme si osvědčený proces návrhů wireframů, jak udělat prototyp a jak jej testovat.
Proč dělat wireframy
Wireframy nebo drátěný model nám slouží k tomu, abychom si vyřešili rozložení jednotlivých
podstránek. Wireframy jsou procesem před kreslením webového designu. Představte
si takový nákresový projekt domu, wireframe je nákres webu. Díky nim
dostaneme celkovou představu o rozvržení obsahu a dokážeme vše snadno měnit a
upravovat.
TIP: Dělejte si hned na začátku rešerše jiných webů. Získáte tak dostatečnou inspiraci
pro návrh svého webu.
Obrázek 26: Ukázky wireframů
Zdroj: vlastní zpracování
Myšlenkové mapy
Wireframy tedy řeší rozložení prvků na jednotlivých podstránkách, ale abychom na nic
nezapomněli, pomáhájí nám myšlenkové mapy. Je to pavouk celého webu a do něj si
vpisujeme jednotlivé sekce, části webu, cíle stránek, obsahové poznámky apod.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
79
Takže pokud navrhujeme například e-shop, budou tam položky jako logo, vyhledávání
s našeptávačem, nákupní košík, horní navigace a tak dále. Do myšlenkové mapy si píši
tyto body už podle pořadí. Vím, že logo bude nahoře, tak tím v myšlenkové mapě
začínám. Samozřejmě na začátku se můžu mýlit a pořadí se může ještě ve wireframu měnit.
Nástrojů pro myšlenkové mapy je spousta, pro mě čím jednodušší, tím lepší. Tady je pár
příkladů:
• https://coggle.it/
• https://mindnode.com/
• https://www.xmind.net/
Obrázek 27: Myšlenková mapa
Zdroj: vlastní zpracování
TIP: U jednoduchých webů nebo lehké úpravě podstránek je mnohdy nejlepší
nástroj tužka a papír.
Cíl stránky
V myšlenkové mapě si zapisuji i cíl jednotlivých stránek, tzv Call to action (CTA). U
detailu produktu v e-shopu to bývá “Přidat do košíku” u obsahového webu to může
být “kontaktovat” nebo třeba “podpořit projekt”. Bavíme se ale o cíli dané stránky, ne
Proces tvorby webové stránky
80
celého webu. Pokud budu mít podstránku “kontakt”, tak zde může být CTA telefonní číslo
zákaznické linky s dobou, kdy se mohu dovolat.
TIP1: Wireframy jsou černobílé, ale CTA je fajn si značit třeba zelenou barvou, aby i
grafik pak viděl na jaké prvky má klást důraz.
TIP2: Nebojte se psát do WF různé poznámky, od toho tady drátěné modely jsou. Poznámky
mohou být k textům, ke grafice nebo funkčím prvkům pro programátora/kodéra.
Obrázek 28: Ukázky wireframů
Zdroj: vlastní zpracování
V čem se v roce 2019 wireframy dělají
Stejně jako u myšlenkových map, tak i programů pro tvorbu wireframů je dnes plný trh.
Viděl jsem i praxi, že někdo dělá wireframy v Adobe Photoshop, ale za mě je tento nástroj
pro tvorbu drátěných modelů moc těžkopádný. Často využívané jsou ale tyto:
• https://www.axure.com/
• https://balsamiq.com/
• https://www.adobe.com/cz/products/xd.html
• https://www.sketch.com/
TIP: Pokud jste nikdy nepracovali s grafickým programem, skvělý je Balsamiq. Je
velmi jednoduchý a splní svůj účel. Je možné použít i cloud verzi, kterou je možné sdílet.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
81
Obrázek 29: Ukázka zpracování konkrétního rozložení webu do wireframu
Zdroj: vlstní zpracování
Předávání wireframů
Důležité je si říci, že pokud předávám wireframy nadřízeným, klientovi nebo kolegovi,
vždy je důležité k wireframu komentář a vysvětlení. Wireframe není grafický
návrh a každý si pod wireframem bez vysvětlení může vyložit a představit něco jiného.
Doporučuji tedy si jednotlivé wireframy projít společně na osobním jednání, či přes skype.
Komentování wireframů
Většinou si každý chce nad wireframem ještě sám sednout, popřemýšlet si a dát zpětnou
vazbu po schůzce. Hezká appka pro hromadné komentování je například Invision
(https://www.invisionapp.com/). Každý z týmu může dát na daný bod za sebe komentář.
Obrázek 30: Náhled aplikace Invision pro hromadné komentování
Zdroj: Webový portál Invisionapp [online] [vid. 5. března 2019]. Dostupné z: https://www.invisio-
napp.com/
Proces tvorby webové stránky
82
Mobile first
Wireframy děláme pro desktop a mobil zvlášť a protože sledujeme stále růst mobilních
zařízení, mnohdy začínáme právě kreslit wireframy pro telefony. Ikdyž se obrazovky na
telefonech pořád zvětšují, pořád jsme omezenější než na klasickém desktopu. Musíme víc
přemýšlet, co dát do “nejdražšího prostoru” (začátek stránky) a jak jednotlivé prvky
rozmístit.
TIP: I v roce 2019 pořád připravuji wireframe pro 320px na šířku. Ještě je dost
uživatelů, kteří vlastní smartphone s tímto rozlišením. (např. Apple 5, 5S)
Wireframe vs. prototyp
Pokud máme všechny wireframy hotové, tak je dokážeme vzájemně prolinkovat a udělat
z nich klikatelný prototyp. Takže máme samotný wireframe, pokud wireframy prolinkuji
odkazy, jedná se už o prototyp. Umí to většina “wireframe programů” i jednoduchý Bal-
samiq.
TIP: Stává se mi, že někteří klienti nemají moc představivost a ve wireframu vůbec
web nevidí. Někdy pomůže právě proklikatelný prototyp. Když si to mohou proklikat, dává
jim to větší smysl.
Uživatelská testování prototypu
Doplňte do wireframu texty, náhledové obrázky, propojte do prototypu a můžete podle
scénáře uživatelsky testovat.
Na rozdíl od uživatelského testování grafiky, zde můžete otestovat orientaci na celém
webu. Je obsah rozmístěn tak, aby ho uživatel pochopil? Chápe filtrování nebo vůbec smysl
dané podstránky? Samozřejmě design dost ovlivní pak konečný výstup, ale mnohdy nám
testování prototypu ukáže největší problémy. Stále tyto změny jsou velmi levné, protože
se nemusela doposud kreslit grafika ani programovat.
TIP: Neptejte se u testování lidí, jak by to udělali. Uživatelé nejsou schopni Vám relevatně
zodpovědět. Vy jste profíci a Vy to musíte vymyslet tak, aby to dávalo smysl a byla
skvělá použitelnost. Uživatelské testování slouží právě k tomu, aby jste si svoje myšlenky
osvědčili.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
83
Závěr
I v roce 2019 se setkávám s klienty a dokonce i digitálními agenturami, které mají názor,
že wireframe je zbytečný. Takového klienta buď přesvědčím nebo v opačném případě projekt
odmítám! Dělat bez wireframu rovnou grafický design je nesmysl a stojí spoustu času
a peněz na následné opravě.
Dělejte také myšlenkové mapy. Není příjemné překopávat všechny wireframy, když
klient příjde po prezentaci s tím, že chce všude dodat kontaktní telefon, box na sběr newsletteru
a ještě vlastně zapomněl, že chce všude propagovat svou prodejnu. Pokud byste měli
schválenou myšlenkovou mapu, tak se to nestane.
Tomáš Hrabec – webový deisgnér a konzultant na volné noze
TESTOVÉ OTÁZKY
Otestujte si získané znalosti z kapitoly č. 6. Pouze jedna odpověď je správná.
Správné odpovědi naleznete na konci kapitoly.
1. První krok z uvedených v procesu tvorby webové stránky by měl být:
a) Mapa stránek.
b) Analýza klíčových slov.
c) Kódování stránek.
2. Který sled událostí v procesu tvorby webu je správný?
a) Grafický návrh – Texty – Wireframe.
b) Wireframe – Grafický návrh – Texty.
c) Texty – Grafický návrh – Wireframe.
3. Jak nazýváme soupis toho, co lidé nejčastěji hledají na internetu?
a) Analýza klíčových slov.
b) Redesign webu.
c) Informační architektura.
4. Metoda, která umožňuje velmi rychle vizualizovat informační architekturu webu
se nazývá?
a) Copywriting.
b) Brainstorming.
c) Cardsorting.
5. Podklad pro zpracování grafického návrhu můžeme vytvořit pomocí:
a) Treetestingu.
b) Drátěného modelu.
c) Analýzy klíčových slov.
Proces tvorby webové stránky
84
SHRNUTÍ KAPITOLY
Po prostudování kapitoly č. 6 byste měli umět:
• Vysvětlit, jak rozpracovat projekt tvorby webové stránky.
• Provést základní analýzu konkurence pro účely projektu tvorby webové stránky.
• Rozumět tomu co je analýza klíčových slov a základní přehledy připravit.
• Chápat pojem informační architektura a znát metody její přípravy.
• Zhotovit wireframe webové stránky.
• Nastavit drag and drop cloudový editor, používat jej pří tvorbě i správě webu.
ODPOVĚDI NA TESTOVÉ OTÁZKY
1b, 2b, 3a, 4c, 5b
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
85
7 VYUŽITÍ VÝZKUM PŘI DESIGNU A SPRÁVĚ WEBOVÉ
STRÁNKY
RYCHLÝ NÁHLED KAPITOLY
V sedmé kapitole se podíváme na možnost využití výzkumu při tvorbě a správě webové
stránky. Nejčastěji používáme výzkumné metody proto, abychom získali potřebná fakta
pro rozhodování. Máme předpoklad, který chceme testovat a využijeme proto formalizovaný
postup výzkumu, během kterého definujeme problém, sbíráme data, vyhodnocujeme
je a děláme rozhodnutí. Metody, jakými data sbírat v této kapitole poodhalíme. Budeme se
bavit o dotazování formu techniky rozhovoru a dotazníku, dále o testování použitelnosti,
které by mělo být součástí každého designu nebo redesignu webu. Dále se podíváme na
použití mousetrackingu a eyetrackingu a poodhalíme také formu testování A/B testem.
CÍLE KAPITOLY
• Přiblížit podstatu hloubkového rozhovoru.
• Vysvětlit výhody a nevýhody dotazníků.
• Představit nástroje testování použitelnosti.
• Vysvětlení účelu a použití technologie mousetracking.
• Vysvětlení účelu a použití technologie eyetracking.
• Představit metody A/B testování webové stránky.
KLÍČOVÁ SLOVA KAPITOLY
Rozhovor, dotazník, testování použitelnosti, eyetracking, mousetracking, A/B testování.
Uživatelský výzkum je série terénních studií, skrze které se učíte porozumět lidem tam
venku. Uživatelský výzkum vám dává do rukou fakta, na základě kterých se můžete lépe
rozhodovat. Lze postavit na široké paletě metod  - ve webovém prostředí jsou běžné rozhovory,
dotazníky, uživatelské testování, kartičkové studie nebo analýza chování uživatelů na
webu. Mnoho firem si snaží vnitřně zdůvodnit, proč ho nemusí dělat. Což je fajn, protože
Využití výzkum při designu a správě webové stránky
86
to znamená, že systematické porozumění lidem tam venku vám přinese konkurenční výhodu,
neb to vaše konkurence nedělá.51
7.1 Dotazování
Nezáleží na tom, jak dobře si myslíte, že znáte své zákazníky. Nejste svým zákazníkem,
takže pokud jde o marketingovou strategii, subjektivní názory a pocity by vás mohly dostat
špatným směrem. Tvůrci webových stránek často dělají chybu, když si myslí, že vědí, co
jejich zákazníci chtějí. Navrhování webových stránek na základě těchto subjektivních předpokladů
na rozdíl od faktů bude vždy méně efektivní, nehospodárné a vyústí ve webové
stránky, které jsou vhodné pro tvůrce webu ale ne pro zákazníky.
ROZHOVORY
Rozhovory se zákazníky pomáhají minimalizovat rozhodnutí, které vychází z pocitů a
odhadů. Pocity a odhady nahrazují fakty. Vedení uživatelských rozhovorů je jediný jistý
způsob, jak plně porozumět cílům a potřebám zákazníků: problémy a frustrace, se kterými
se setkávají, jak postupují při hledání řešení, kritéria, která používají, a postup, kterým se
řídí při rozhodování o nákupu.
Hloubkový rozhovor je metoda, která má původ v antropologii a sociologii. Obvykle
bývá rozhovor polo strukturovaný – máme k dispozici scénář rozhovoru, ale otázky nejsou
všechny známy předem, tazatel může reagovat na informanta. Díky rozhovorům získáme
hluboký vhled do motivů, chování a názorů informanta. Nevýhodou může být velká časová
náročnost.52
Rozhovory je nejlepší dělat velmi brzy v procesu tvorby webové stránky. Pomáhají odpovědět
na otázky Proč a Jak. Není bezpodmínečně nutné výstupy z rozhovorů kvantifikovat.
V mnoha případech to díky malému respondentskému vzorku ani není možné. To ale
není účelem hloubkového rozhovoru. Statistiku tak zatím můžeme nechat odpočívat, využijeme
ji u dalších metod a postupů.
DOTAZNÍKY
Online dotazníky jsou velmi efektivní, co se nákladů a rychlosti týká. Mají rovněž unikátní
možnost dosáhnout na respondenty prakticky na celé planetě. Jsou pohodlnější pro
respondenta, jelikož je může vyplnit tehdy, kdy mí čas a je možné jejich prostřednictvím
zasílat také obrázky, videa či animace. Řada aplikací pro realizaci dotazníkových šetření
nabízí přesné měření časů na konkrétní otázky včetně kontroly IP adres pro opakované
51
Webový portál Medium [online] [vid. 10. září 2018]. Dostupné z: https://medium.com/house-of-
%C5%99ez%C3%A1%C4%8D/ned%C4%9Blejte-u%C5%BEivatelsk%C3%BD-v%C3%BDzkum-
d0724c3fde7c
52
Webový portál 100 Metod [online] [vid. 20. dubna 2019]. Dostupné z: https://100me-
tod.cz/post/47562359133/9-hloubkov%C3%BD-rozhovor
Definice
Návod
Definice
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
87
vyplňování dotazníku. Výzkumník se tak může podívat také na samotný průběh. (Stoklasa,
2016)
Všeobecnou výhodou elektronického zpracování dotazníku je možnost nabídnout respondentům
u škál odpovědět posuvníkem. Odpadá přepisování a kódování odpovědí, jak
je to u papírové formy dotazníku (menší pravděpodobnost chybovosti). Velký potenciál
mají otevřené otázky, které je možné efektivněji vyhodnocovat pomocí obsahové analýzy
textu bez pracného přepisování. (Stoklasa, 2016)
7.2 Testování použitelnosti (Usability testing)
V podkapitole 4.1.2 jsme hovořili o akceptaci technologie potažmo webové stránky či
aplikace. V tomto modelu jsme narazili na vnímanou jednoduchost používání. V moderním
pojetí webdesignu ji můžeme ztotožnit s použitelností, kterou můžeme výzkumnými metodami
testovat.
Použitelnost je atribut kvality, který posuzuje, jak snadno se dají uživatelská rozhraní
používat. Slovo "použitelnost" také označuje metody pro zlepšení snadnosti použití během
procesu návrhu. Použitelnost je definována pěti kvalitními komponenty:53
• Naučitelnost: Jak snadné je pro uživatele splnit základní úkoly při prvním setkání s
rozhraním?
• Účinnost: Jakmile se uživatelé naučili rozhraní, jak rychle mohou provádět úkoly?
• Zapamatovatelnost: Když se uživatelé vrátí k návrhu po období, kdy ho nepoužívají,
jak snadno mohou provádět úkoly?
• Chyby: Kolik chyb udělají uživatelé, jak závažné jsou tyto chyby a jak snadno mohou
tyto chyby napravit?
• Spokojenost: Jak příjemné je používat design?
Je možné testovat stávající web, konkurenční web, wireframy nebo prototyp. Testování
se skládá z několika hlavních částí, jejichž rozsah se může různit, opomenutí některé z nich
však může mít na jeho přínos negativní dopad.54
Průběh testování je následující:55
1) Analýza cílových skupin webu a jejich potřeb – na začátku je nutné znát, kdo
jsou uživatelé webu a co by jim měl web nabídnout. Jedině tak je možné testování
postavit tak, aby byly jeho výsledky relevantní a užitečné.
53
Webový portál Nielsen Norman Group [online] [vid. 14. března 2019]. Dostupné z:
https://www.nngroup.com/articles/usability-101-introduction-to-usability/
54
Webový portál Dobrý web [online] [vid. 17. března 2019]. Dostupné z: http://www.dobryweb.cz/uziva-
telske-testovani
55
Webový portál Dobrý web [online] [vid. 17. března 2019]. Dostupné z: http://www.dobryweb.cz/uziva-
telske-testovani
Návod
Návod
Využití výzkum při designu a správě webové stránky
88
2) Vytvoření scénáře testování – hlavním těžištěm testování jsou úkoly, které jsou
jednotlivým testerům uloženy. Jedná se o většinou typické akce cílových skupin
webu.
3) Výběr testerů – vzorek účastníků testování by měl odpovídat cílovým skupinám
webu. Rovněž je třeba získat zhruba rovnoměrný podíl pokročilých a nezkušených
uživatelů internetu – každá skupina totiž narazí na zcela jiný typ problémů.
4) Samotný průběh testování – pod dohledem zkušeného odborníka na použitelnost
plní testeři úkoly dle scénáře testování.
5) Analýza výsledků testování – je třeba setřídit poznatky získané během testování,
zanalyzovat je, a především vymyslet nejvhodnější řešení vedoucí ke zvýšení
použitelnosti webu.
6) Prezentace výsledků – seznámení s průběhem testování, komentář k výsledkům
a detailní výklad aplikace doporučených opatření.
7.3 Sledování pohybu myši (Mousetracking)
Pokud chce marketér přesně sledovat, jak se zákaznici pohybují na webu, může mimo
statistiky Google Analytics použít také metody pozorování pohybu myši, kterým se odborně
říká mousetracking nebo cursortracking. Instalovaný software sleduje pohyb myši
uživatele na webové stránce a poskytuje informace o nejčastějších návštěvách. Pro marketéra
či designéra webové stránky tak tato technika přináší cenné informace o celkovém
designu webového rozhraní. Výstupem takového výzkumu jsou nejčastěji tepelné mapy,
které ukazují na nejfrekventovanější místa výskytu kurzoru. (Stoklasa, 2016)
7.4 Sledování pohybu očí (Eyetracking)
Další z kategorie trackingových studií je sledování pohybu oční zornice. V oblasti internetu
se využívá pro identifikaci atraktivních míst na webové stránce. Nad rámec mousetrackingu
a webové analytiky ukazuje, kam se uživatel skutečně dívá. Opět nejelegantnější
metodou bývá tepelná mapa, ovšem velmi užitečná je také analýza cesty (path), která naznačuje,
jak se uživatel po webové stránce pohyboval. Eyetrackingové metody jsou zatím
v plenkách a celoplošným standardem se stanou s poklesem cen očních kamer a softwarů,
které tento výzkum zajišťují. Metody mousetrackingu jsou již nyní dostupné a hojně využívané.
(Stoklasa, 2016)
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
89
7.5 A/B testování
A/B testování představuj metody, které umožňují na reálných uživatelích testovat dvě či
více variant určité webové stránky. Výzkumník pak pozoruje rozdíly v konverzních poměrech
a je schopný vyhodnotit, která testovaná stránky je pro uživatele přívětivější, snadnější
na ovládání, atraktivnější a tím také lépe plní svůj účel. Oproti metodám dotazování je experiment
formou techniky A/B testování věrohodnější, jelikož se uživatel chová zcela přirozeně
a v podstatě ani neví, že je součástí výzkumu. (Stoklasa, 2016)
PRŮVODCE STUDIEM
Představili jsme si možné nástroje výzkumu při tvorbě webové stránky. Odkryli jsme
také možnosti sběru dat již za provozu. Nyní se v případové studii můžeme podívat na
konkrétní aplikaci těchto metod u e-shopu Laporte. Dalibor s Tomášem pro vás připravili
popis toho, jak zpracovali analýzu pomocí nástroje Hotjar.
PŘÍPADOVÁ STUDIE
VÝZKUMNÝ NÁSTROJ HOTJAR A JEHO VYUŽITÍ
Hotjar patří do sekce nástrojů pro na analýzu a získávání zpětné vazby z webové stránky,
eshopu či webové aplikace. Poskytuje uživatelům přehled o chování návštěvníků, které se
opírá data zpracovaná ve formě tepelných map, nahrávání návštěvníků a jejich chování na
webu. V ideální případě Hotjar pomáhá naplňovat cíle webu (nákup, vyplnění poptávkového
formuláře, apod.), zlepšovat jeho uživatelskou přívětivost a zefektivňovat výkonnost.
1. Využití tepelných map (clickmapy a scrollmapy)
Pro potřeby případové studie jsme vybrali internetový obchod s kováním pro posuvné
dveře Laporte.cz, který je provozován autory.
Jak už název kapitoly napovídá, bude se jednat tepelnou mapu - clickmapa, zobrazující
prvky a místa, na které uživatelé klikají a scrollmapy, které nám ukáží, jaký obsah uživatelé
neuvidí - kam až doscrollují.
Využití clickmapy
Na obrázku vidíme screenshot ze vzorku 1000 návštěv všech kategorií, což je pro potřeby
naší analýzy dostačující vzorek. Jak vidíme, nejvíce uživatelé klikají na první produkty,
kategorie a poté ná průvodce výběrem kování a kontakty na hlavní navigaci.
Definice
Využití výzkum při designu a správě webové stránky
90
Obrázek 31: Screenshot využití clickmapy
Zdroj: soukromý archiv autorů
Co návštěvníci ale minimálně využívají jsou filtry. Zde vzniká otázka proč? Jsou snad
špatně vyřešené designově? Nebo jsou v takto specifickém oboru nevyužitelné? Nebo na
eshopu není velké množství produktů, aby by byly filtry přínosné?
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
91
Hotjar nám v tomto případě sloužil jako dobrý nástroj na zjištění problému a stanovení
předpokladů. Co už nám ale neprozradí je proč tomu tak je. Tuto cenou informaci je potřeba
dále otestovat, abychom na otázky získali odpovědi. V našem případě nepoužívaných filtrů
je vhodné využít uživatelské testování či a/b testování.
Pomocí a/b testování bychom předesignovali filtry tím, že bychom je odlišili od
produktů změnou pozadí (např. vložit světle šedé pozadí pod filtry). Nechali bychom další
období s touto změnou web fungovat a poté bychom vzali vzorek 1000 návštěvníků a porovnali
výstupy s předchozí analýzou. Tak bychom zjistili pokud se používanost filtru
zvýší. To může být jeden z následných kroků po analýze výstupů z Hotjar.
Využití scrollmapy
Obrázek 32: Screenshot využití scrollmapy
Zdroj: soukromý archiv autorů
Využití výzkum při designu a správě webové stránky
92
Scrollmapa je další velice užitečná funkce, která nám ukazuje, jak daleko uživatelé “doscrollují”.
Na obrázku jde vidět, že se jedná o stránku s produktem, kde je předpoklad, že
uživatel má zájem si o produktu zjistit něco více.
Jako první věc v popisu produktu se momentálně nachází video. Ještě do nedávna bylo
video úplně dole a dostalo se k němu pouze 20 % uživatelů a přitom mělo pořád slušnou
proklikovost. Jakmile jsme ale video přemístili nahoru, narostl zájem o video přes 400 %.
2. Využití funnelu a nahrávání uživatelů
Hotjar nabízí možnost sledování uživatelů pomocí nahrávání obrazovky. Sledováním
všech záznamů je časově neefektivní a pro nás nemá úplně vypovídající hodnotu, pokud
nesledujeme konkrétní věci, jako například využívání určitého prvku na webu. (filtrace,
navigace, formuláře…).
Jednoduchý postup při kontrole nahrávek je zapisování si pozorovaných jevů (proklikávání
prvků, pohyb myší na textu – většinou symbolizuje, co návštěvníci čtou, apod.) a
jejich bodování při opakovaném výskytu. Z toho nám jasně vyplyne, které jevy se opakují
a tím pádem jsou významné. Je zde potřeba nutné dávky empatie, protože místy bývá
složité odhadnout, co návštěvníkovi probíhá hlavou.
Dobře optimalizovaný objednávkový proces je jednou z nejdůležitější věcí na internetovém
obchodu. V Hotjaru si můžeme nastavit trychtýř (funnel), který nám ukáže kolik lidí
došlo až na “thank you” stránku, viz. obrázek. Takže vidíme, kolik návštěvníků se dostalo
z košíku přes pokladnu až k odeslání objednávky a děkovné stránce.
Obrázek 33: Data z nastaveného trychtýře
Zdroj: soukromý archiv autorů
Jak vidíme na obrázku, tak konverzní poměr z pokladny na “thank you” page je relativně
dobrý (tyto data si můžeme ještě překontrolovat také v Google Analytics). Ovšem jak vidíme,
tak je 67 % dropout (úbytek) při kroku z košíku do pokladny, což už může značit
jistý problém.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
93
Dalším krokem tedy bude analyzování většího množství návštěvnických nahrávek, kde
je možné odfiltrovat jen ty, které se nedostali z košíku do poklady. U každé nahrávky se
přetočí čas nahrávky na fázi, kdy návštěvník přejde do košíku. Zde se jedná o časově
náročnou aktivitu, ale také vysoce přínosnou, protože sledujete konkrétní návštěvníky
webu a jejich chování.
Obrázek 34: Náhled analyzování návštěvnických nahrávek
Zdroj: soukromý archiv autorů
Na našem příkladu, kdy se prohlédlo zhruba 40 nahrávek z období 2 týdnů byl jasný cíl,
a to najít proč je tak obrovský odpad na stránce košíků. Jednak je poměrně standardem, že
lidé si do košíků vloží veškerý nákup a poté porovnávají s konkurencí. Tady nejsme z
nahrávek úplně schopni odhadnout, proč využili konkurenci, protože je zde hodně faktorů
(cena, kvalita výrobků, reference, kredibilita a další).
Při sledování jsme zjistili, že se uživatelé zastavují myší nad cenou dopravy. Což se nám
poté několikrát potvrdilo. Produkty na eshopu Laporte.cz jsou rozměrově větší a často je
potřeba řešit nákladnější dopravu (Toptrans), proto byla potřeba cenu dopravy stanovit na
236 Kč. Z obecných statistik vyplývá, že zhruba 44% lidí nedokončí nákup právě kvůli
ceně dopravy.
Finálním výstupem bylo doporučení vyzkoušet měsíc dopravy zdarma. Jestli se rapidně
zvýší procento průchodu z košíku do pokladny tak se může snížit limit nákupu pro dopravu
zdarma nebo častěji zapojovat měsíce dopravy zdarma. Dalším doporučením může být
snížit částku za dopravu a pozorovat efekt na průchod objednávkovým procesem.
Tipy pro práci s nástrojem Hotjar:
• Při nastavování vyřaďte IP adresy sebe a členů týmu pracující na webové stránce.
Předejdete tím zkreslení informací a analyzování svých vlastních návštěv webu.
• Kombinujte výstupy z Hotjar a Google analytics pro dosažení maximální hodnoty.
Využití výzkum při designu a správě webové stránky
94
• Hotjar umožňuje také sběr zpětné vazby přes jednoduché pop-up dotazníky.
Doporučuje se je využít např. na “thank you” stránce při dokončení nákupu na
eshopu, kde můžete sbírat zpětnou vazbu na objednávkový proces.
• Při implementaci si dejte pozor na to, že Hotjar zpomaluje web (rychlost načtení
webu), což je důležitá metrika vzhledem k optimalizaci pro vyhledávače. I když
zpomalení není významné, doporučuje se Hotjar spouštět za určitým cílem pro
specifické období a nemít ho spuštěné neustále.
Dalibor Šimek a Tomáš Hercig - LaPorte
TESTOVÉ OTÁZKY
Otestujte si získané znalosti z kapitoly č. 7. Pouze jedna odpověď je správná.
Správné odpovědi naleznete na konci kapitoly.
1. Co není komponentem použitelnosti?
a) Estetika a branding.
b) Účinnost a Spokojenost.
c) Zapamatovatelnost a naučitelnost.
2. Plán s úkoly, které dáváme testerům webové stránky, nazýváme:
a) To do listy.
b) Domácí úkol.
c) Scénář.
3. Jak nazýváme sledování pohybu kurzoru myši?
a) Mousetracking.
b) Mouseclicking.
c) Mousetraping.
4. Vizualizace, která umožňuje zobrazit výsledky eyetrackingové studie a respektuje
přitom také sled událostí, se nazývá:
a) Contingency – kontingenční tabulka.
b) Heatmap – tepelná mapa.
c) Path analysis – analýza cesty.
5. Nástroj pro analýzu a získávání údajů o chování uživatelů na webové stránce na-
zýváme:
a) Hotjar.
b) Drag and drop editor.
c) Test použitelnosti.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
95
SHRNUTÍ KAPITOLY
Po prostudování kapitoly č. 7 byste měli umět:
• Provádět rozhovory s uživateli.
• Vysvětlit výhody a nevýhody dotazníků.
• Ovládat nástroje testování použitelnosti.
• Popsat k čemu slouží mousetracking a jak jej implementovat.
• Vysvětlit kde je možné používat eyetracking.
• Rozumět tomu co je A/B testování webové stránky a jak jej využít.
ODPOVĚDI NA TESTOVÉ OTÁZKY
1a, 2c, 3a, 4c, 5a
Práce v redakčním systému
96
8 PRÁCE V REDAKČNÍM SYSTÉMU
RYCHLÝ NÁHLED KAPITOLY
Tato kapitola odkrývá možnosti správy webu pomocí redakčního systému. Tyto systémy
ulehčují běžnému uživateli administraci bez nutnosti znalostí HTML kódu. Je to software
zajišťující správu dokumentů, nejčastěji webového obsahu. V dnešní době se jako CMS
zpravidla chápou webové aplikace, někdy s případným doplňkovým programovým vyba-
vením.
CÍLE KAPITOLY
• Popsat fungování redakčních systémů.
• Představení funkcí a výhod redakčního systému.
• Popsat praktickou ukázku práce v redakčním systému Wordpress.
KLÍČOVÁ SLOVA KAPITOLY
Redakční systém, WYSIWYG, CMS, Wordpress, Gutenberg.
8.1 Co je to redakční systém?
Systém pro správu obsahu (CMS z anglického content management system) je software
zajišťující správu dokumentů, nejčastěji webového obsahu. V dnešní době se jako CMS
zpravidla chápou webové aplikace, někdy s případným doplňkovým programovým vybavením
u klienta. Pro CMS se někdy používají i oborově podobné termíny redakční či publikační
systém.56
Ať už stavíte web svépomocí nebo na objednávku od nuly, budete po jeho spuštění
muset aktualizovat obsah případně aktivně měnit některé prvky v důsledku různých příčin.
K tomu právě redakční systém slouží. Ten podle zvoleného způsobu přípravy webu může
být univerzální nebo originální. Některé vývojářská studia mají připraveny své vlastní systémy.
Nevýhodou pak může být, že nebudete moci jednoduše změnit dodavatele, jelikož
56
Webový portál Stránky k výuce informatiky [online] [vid. 21. března 2019]. Dostupné z:
http://www.ivt.mzf.cz/seminar/7-redakcni-systemy/
Definice
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
97
bude web provozován na redakčním systému, ke kterému mají know how jen tvůrci webu.
Hovoříme tedy o vlastním originálním redakčním systému. Mezi ty univerzální patří WordPress,
Joomla nebo Drupal.
Často se setkáváme s označením WYSIWYG, které reprezentuje zkratku „What you se
is what you get“. To znamená, že co uživatel vidí a v rozhraní upravuje a edituje je také
výsledný vzhled a rozložení reálné verze. Tento typ editorů umožňuje i laikům pracovat
v prostředí publikačních platforem.
FUNKCE REDAKČNÍHO SYSTÉMU
• Tvorba, modifikace a publikace dokumentů (článků) zpravidla prostřednictvím webového
rozhraní, často s využitím jednoduchého online WYSIWYG editoru nebo
jednoduchého systému formátování textu (není nutná znalost HTML),
• řízení přístupu k dokumentům, zpravidla se správou uživatelů a přístupových práv,
často s funkcemi workflow či groupware,57
• správa diskusí či komentářů, ať už k publikovaným dokumentům nebo obecných,
• správa souborů,
• správa obrázků či galerií,
• kalendářní funkce,
• statistika přístupů.
Trh s CMS programy je široký, existuje jak řada programů nabízených jako svobodný
software, tak i komerčních řešení. CMS se člení dle řady kritérií, například rozsahu řešení,
použitého vývojového prostředí nebo cílové skupiny. Nejjednodušší CMS jsou naprogramovány
v JavaScriptu (např. TiddlyWiki), řada CMS používá PHP (většinou v kombinaci
s databázovým systémem MySQL, ale i bez jakékoli databáze), oblíbená je i Java a další
jazyky.58
8.2 Jak probíhá správa webu v redakčním systému
Pro praktickou ukázku jsme vybrali nejrozšířenější redakční systém Wordpress, který je
nyní opatřen vizuálním editorem Gutenberg, který funguje jako plug-in tedy přídavný
modlu.
57
Zahrnuje počítačové nástroje napomáhající ke spolupráci na nějakém společném díle. Pomocí nich jednotliví
členové skupiny mohou komunikovat, sdílet různé dokumenty a organizovat svoji spolupráci.
58
Webový portál Stránky k výuce informatiky [online] [vid. 21. března 2019]. Dostupné z:
http://www.ivt.mzf.cz/seminar/7-redakcni-systemy/
Definice
Práce v redakčním systému
98
POSTUP PRACÍ V REDAKČNÍM SYSTÉMU WORDPRESS
JAK PRACOVAT S NOVÝM WORDPRESS EDITOREM GUTENBERG
Blokový editor byl navržen tak, aby byl co nejjednodušší, flexibilní a intuitivní. I když
vypadá výrazně jinak, než jeho předchůdce, stále umožňuje provádět stejné věci. Pojďme
si postupně projít tvorbu obsahu s pomocí nového blokového editoru Gutenberg.
Tvorba nového příspěvku nebo stránky za pomocí blokového editoru
Postup při tvorbě obsahu je stále stejný Vyberete, zda chcete vytvářet stránku nebo příspěvek
a kliknete na Vytvořit příspěvek/stránku v podmenu nebo na tlačítko v horní části
obrazovky.
Obrázek 35: Tvorba příspěvku
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Otevře se nová stránka a spustí se nový blokový editor.
Jak přidat blok v Gutenbergu
První blok na každé stránce je Název.
Po jeho vyplnění si pomocí klávesy tab nebo kurzorem myši zobrazíte možnosti přidání
dalších bloků.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
99
Obrázek 36: Vytvořit nový příspěvek
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Ve výchozím nastavení je dalším blokem Odstavec, který umožní rovnou začít psát obsah
stránky.
Ale pokud chcete vložit jiný blok, stačí kliknout na ikonu + a ze seznamu vybrat nový
blok. Ikonu + najdete na několika místech.
Obrázek 37: Ikona +
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Pokud víte, jaký blok chcete použít, můžete začít psát jeho název a dojde k automatickému
filtrování nabídky.
Práce v redakčním systému
100
Obrázek 38: Blok Galerie
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
V případě, že nechcete využít myš, můžete začít procházet bloky i pomocí zadání “/”.
Obrázek 39: Použití lomítka pro přidání bloku
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Práce s bloky v novém editoru
Každý blok má svůj panel nástrojů, který se zobrazuje v jeho horní části. Nabídka tlačítek
se vždy odvíjí od bloku, který upravujete.
Například na obrázku je panel nástrojů u bloku Odstavec, kde najdete především tlačítka
pro formátování obsahu.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
101
Obrázek 40: Nabídka nástrojů u bloku
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Kromě této nabídky nástrojů má každý blok ještě vlastní nastavení v pravém sloupci
vedle editoru.
Obrázek 41: Další nastavení bloku
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Pořadí bloků můžete měnit jejich chycením a přetažení myši nebo pomocí tlačítek nahoru
a dolu na levé části bloku.
Práce v redakčním systému
102
Obrázek 42: Posunutí bloku
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Ukládání a znovu využití bloku v Gutenberg
Jednou z užitečných funkcí je možnost uložení bloku a jeho znovupoužití. Díky tomu
můžete rychle vytvářet opakující se prvky stránek nebo příspěvků.
U bloku, který si takto chcete uložit, klikněte na jeho menu (ikona tří teček nad sebou)
a zvolte možnost Přidat k opakovatelným blokům.
Obrázek 43: Přidat k opakovatelným blokům
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Budete vyzváni, abyste blok pojmenovali. Nakonec klikněte na tlačítko uložit.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
103
Obrázek 44: Uložení bloku
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Blok se uloží a při přidávání nového bloku si jej můžete vybrat ze seznamu Opakovatelné.
Použít jej můžete kdekoliv na webu.
Obrázek 45: Opakovatelné
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Všechny takto uložené bloky se ukládají do databáze a můžete je spravovat tak, že kliknete
na odkaz Spravovat všechny opakovatelné bloky v sekci Opakovatelné.
Práce v redakčním systému
104
Obrázek 46: Spravovat všechny opakovatelné bloky
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Zde můžete bloky upravovat, mazat nebo třeba pomocí exportu/importu přesouvat na
jiné WordPress instalace.
Publikování obsahu a správa nastavení v blokovém editoru Gutenberg
Každý WordPress příspěvek nebo stránka obsahuje různá meta nastavení. Mezi nimi
najdete například datum publikování, rubriky, štítky, náhledový obrázek, atd.
Všechna tato nastavení najdete v pravém sloupci při úpravě obsahu dané stránky nebo
příspěvku.
Obrázek 47: Nastavení stránky nebo příspěvku
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
105
Přidávání vybraných bloků v novém editoru
Nový editor umí vše, co uměl ten předchozí. Nicméně tvorba obsahu by měla být rychlejší
a elegantnější než dříve.
Vložení obrázku
Je zde připravený blok Obrázek. Stačí vložit blok a nahrát obrázek nebo jej vybrat z
mediální knihovny.
Obrázek 48: Blok obrázek
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Nahrát obrázek můžete také přetažením souboru do okna prohlížeče.
Jakmile je obrázek nahraný, zobrazí se lišta nástrojů pro blok Obrázek a v pravé nabídce
nastavení najdete položky jako alt obrázku, velikost nebo nastavení odkazu.
Obrázek 49: Nastavení obrázku
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Práce v redakčním systému
106
Vložení odkazu
Blokový editor obsahuje několik bloků, do kterých je možné vložit text. Nejčastěji používanějším
bývá blok Odstavec. Všechny bloky, které umožňují vložení textu, mají v panelu
nástrojů ikonu pro vložení odkazu.
Obrázek 50: Vložení odkazu
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Vložení galerie
Blog Galerie funguje podobně jako blok Obrázek. Vložíte jej a vyberete obrázky, které
chcete mít v galerii.
Obrázek 51: Blok Galerie
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
107
Vložení shortcodu
Všechny shortcody fungují stejně jako v klasickém editoru. Pro jejich vložení můžete
použít blok Odstavec nebo Zkrácený zápis.
Obrázek 52: Blok Zkrácený zápis
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Nové bloky v Gutenbergu
Gutenberg editor sliboval vyřešení starých problémů s použitelností. Níže najdete některé
vylepšení práce s obsahem, které nový blokový editor přinesl.
Přidání obrázku k textu
Nový blok Média a text umožňuje vložení obrázku vedle textu.
Obrázek 53: Blok Média a text
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Přidání tlačítka
Přidání tlačítka v klasickém editoru bylo zbytečně složité. Gutenberg vše zjednodušuje
a obsahuje blok Tlačítko.
Práce v redakčním systému
108
Obrázek 54: Blok Tlačítko
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Tvorba tabulek
Gutenberg obsahuje blok Tabulka, přes který jednoduše uděláte základní tabulky bez
nutnosti znalosti HTML nebo CSS. Tabulku můžete zpětně upravovat, takže není problém
přidat další sloupce nebo řádky.
Obrázek 55: Blok Tabulka
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Vytváření obsahu ve více sloupcích
Schopnost vytvářet obsah ve více sloupcích bylo něco, co v klasickém editoru prakticky
vůbec nebylo. Blokový editor obsahuje speciální blok Sloupce, kterým si můžete určovat
počet sloupců na řádce. Maximální počet je šest sloupců.
Obrázek 56: Blok Sloupce
Zdroj: Webový portál Wplama [online] [vid. 15. března 2019]. https://www.wplama.cz/wordpress-gu-
tenberg/
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
109
PRŮVODCE STUDIEM
V této kapitole jsme si prošli základní rozhraní redakčního systému Wordpress a jeho
vizuálního editoru Gutenberg. K publikování obsahu na webu patří také propojení stránky
se sociálními sítěmi prostřednictvím různých nástrojů, které souhrnně označujeme jako
chatboti. Ti automatizují řadu komunikačních a publikačních činností a pomáhají tak zvyšovat
interaktivitu webové stránky. Případovou studii na implementaci chatbotů do webové
stránky popisuje Jan Krupica z digitální agentury Fistro.
PŘÍPADOVÁ STUDIE
CHATBOTI JAKO PLUGIN WEBOVÉ STRÁNKY
Doba pokročila a stále více věcí probíhá automatizovaně. Chatboti by se dali nazvat
fenoménem posledních let, který si získal mnoho fanoušků i odpůrců. Ačkoliv mají své
výhody i nevýhody, jejich přínos pro fungování webových stránek nelze popřít. Na příkladu
níže si ukážeme fungování chatbota na webu jednoho z našich klientů.
Řeč bude konkrétně o aplikaci chatbota na webu firmy Muxu, provozující e-shop s autorskou
módou. Pro získání relevantních dat sledujeme čtyřměsíční období, konkrétně 28.
10. 2018 – 28. 2. 2019, na jehož začátku byl chatbot na webu spuštěn. Chatboti byli vytvořeni
v aplikaci Manychat, která umožňuje komunikaci návštěvníka se stránkou prostřednictvím
Facebook Messengeru.
Cíle nasazených chatbotů
Nasazení chatbota sleduje obvykle cílů více. V našem případě se jedná o generování
nových leadů pro aplikaci Manychat, jejímž prostřednictvím lze následně s těmito kontakty
dále pracovat ve Facebook Messengeru. Druhým cílem je pak dokončená objednávka
návštěvníka webu.
Jak funguje generování leadů
Aplikace Manychat, jejíž chatboty jsme na web nasazovali, propojuje kontakty se stránkou
přes Facebook Messenger. V praxi to znamená, že v momentě, kdy návštěvník webu
naváže interakci s nasazeným chatbotem, stává se automaticky subscriberem stránky na
Messengeru. S takovými kontakty lze následně dále pracovat např. zasíláním broadcastů,
tedy hromadných rozesílek s přednastavenými zprávami, které mají podobnou úlohu, jako
např. e-mailing. Takováto forma komunikace je ale mnohem osobnější a má tedy znatelně
lepší výsledky, než e-mailové newslettery.
Práce v redakčním systému
110
Nasazení chatboti
Na webové stránky www.muxu.cz jsme nasazovali rovnou dva chatboty. V obou případech
se jedná o prvotní navázání komunikace s přednastavenými větami pro komunikaci
s návštěvníkem webu. Při prvním navštívení webu se tedy snažíme o změnu neznámého
návštěvníka v relevantní lead.
Prvním z nasazených chatbotů byl customer chat, který plní dvě úlohy. Kromě generování
nových leadů takovýto chat přispívá k lepší interakci návštěvníka s majitelkou eshopu.
Interakce pak probíhá v Messengeru návštěvníka, není tedy nutné, aby měl stále
otevřenou webovou stránku, a celý rozhovor může vést ze svého chytrého telefonu. Chatbot
zde plní spíše roli uvedení rozhovoru, jelikož jedním z pilířů strategie e-shopu je osobní
přístup. Majitelka se tedy hned na začátku představí a návštěvník tak ví, že mluví s relevantní
osobou.
Ve sledovaném období se prostřednictvím customer chatu do prostřední Manychatu přihlásilo
86 nových kontaktů. Konkrétní číslo konverzí zde nelze vysledovat, osobní interakce
s majitelkou e-shopu ale přináší obrovskou výhodu v podobě zodpovězení veškerých
otázek potenciálního zákazníka a možnost osobního prodeje, kterou mnoho e-shopu po-
strádá.
Obrázek 57: Podoba vyskakovacího okna customer chatu
Zdroj: Webový portál Muxu [online] [vid. 11. března 2019]. Dostupné z: https://www.muxu.cz
Druhým nasazeným botem je pop-up banner se slevou 100 Kč. Návštěvník má opět
možnost nechat si slevový kupón zaslat do svého Messengeru. Situace je pak výhodná pro
obě strany. Návštěvník má kupón vždy po ruce a stránka získá nového subscribera. Zde už
kromě generování nových leadů sledujeme i konverze, tedy dokončené objednávky za využití
slevového kódu. Pop-up banner ve sledovaném období získal 176 nových přihlášení.
V systému pak evidujeme 20 dokončených objednávek s využitým kódem. Konverze využití
slevového kódu je tedy zaokrouhleně 11,4 %.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
111
Obrázek 58: Podoba pop-up banneru se slevou 100 Kč
Zdroj: Webový portál Muxu [online] [vid. 11. března 2019]. Dostupné z: https://www.muxu.cz
Shrnutí
Chatboti obecně mívají za úkol komunikovat prostřednictvím naprogramovaných vět.
V našem případě jsme se na toto téma podívali z trochu jiného pohledu, a sice z pohledu
tvorby nových leadů z neznámých návštěvníků a zvyšování konverzního poměru stránek.
Naši chatboti získali za čtyři měsíce dohromady 262 kontaktů. S těmito kontakty můžeme
nadále pracovat, aplikace Manychatu je tedy aktuálně jednou ze stěžejních částí marketingové
strategie firmy Muxu.
Vysvětlení pojmů
Lead – potenciální zákazník, který projevil zájem o produkt / službu
Subscriber – kontakt, přihlášený do systému Manychat
Jan Krupica – Fistro digital
TESTOVÉ OTÁZKY
Otestujte si získané znalosti z kapitoly č. 8. Pouze jedna odpověď je správná.
Správné odpovědi naleznete na konci kapitoly.
1. U kterého editoru není potřeba tagování a ruční zápis kódu?
a) HTML
b) WYSIWYG
c) CSS
Práce v redakčním systému
112
2. Nástroje napomáhající ke spolupráci na nějakém společném díle souhrnně označujeme
jako:
a) Workflow.
b) Betatesting.
c) Groupware.
3. Která z nabízených možností není redakčním systémem:
a) Manychat.
b) Drupal.
c) Joomla!.
4. Vizuální editor redakčního systému využívá většinou pro uživatelské rozhraní
technologii:
a) Drag and drop.
b) User experience.
c) HTML.
5. Počítačový program, který simuluje lidskou konverzaci nebo chatování, nazý-
váme:
a) Google bot.
b) CMS systém.
c) Chatbot.
SHRNUTÍ KAPITOLY
Po prostudování kapitoly č. 8 byste měli umět:
• Definovat co znamená redakční systém a vizuální editor.
• Základní operace tvorby webové stránky ve vizuálním editoru.
• Administrovat obsah v redakčním systému.
• Rozumět tomu co je chatbot a jak jej lze použít.
ODPOVĚDI NA TESTOVÉ OTÁZKY
1b, 2c, 3a, 4a, 5c
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
113
9 OBSAH NA WEBU
RYCHLÝ NÁHLED KAPITOLY
Devátá kapitola pojednává o webu z hlediska obsahu, kterým je vyplněn. Na začátku
kapitoly je identifikována důležitost uvedení popisků k produktovým kategoriím nebo
k produktům samotným. Dále je v kapitole rozebrána důležitost a zásady blogu, který představuje
jeden ze základních nástrojů aktivní komunikace firmy. Nakonec se kapitola zabývá
implementací prvku identity značky do webové prezentace. Jsou zde uvedeny vybrané zásadní
pojmy této problematiky jako unique selling proposition, který značí jedinečný prodejní
argument nebo archetypy, které kromě jiného napomáhají firmám udržovat konzistentnost
v komunikaci své značky.
CÍLE KAPITOLY
• Zdůraznit důležitost kvalitního obsahu webových stránek.
• Vylíčit nevyhnutelnost uvádění úplných popisků k produktům.
• Vymezit způsob sestavení správného popisku.
• Podtrhnout významnost blogu ve firemní komunikaci.
• Identifikovat základní otázky identity značky ve webové prezentaci.
KLÍČOVÁ SLOVA KAPITOLY
Obsah, blog, identita značky, popisky produktů, popisky kategorií, linkbuilding, webová
prezentace, unique selling proposition, archetypy.
9.1 Podstata popisků u elektronického obchodu
V produktové části elektronického obchodu (dále jen e-shop) se běžně objevují dva
druhy popisků. Jedná se o popisy kategorií (případně podkategorií) a popisky samotných
produktů. Oba mají své opodstatnění a je potřeba se jimi zabývat.59
59
Webový portál Zichackova [online] [vid. 3. září 2018]. Dostupné z http://www.zichackova.cz/copywri-
ting-jak-psat-popisy-kategorii-popisky-produktu-na-e-shop/
Obsah na webu
114
9.1.1 POPISKY KATEGORIÍ
Kategorie představuje stránku, která člení produkty firmy s podobnými vlastnostmi do
různých skupin. Například kotníková obuv, sportovní obuv nebo polobotky u e-shopu
s obuví. Kategorie jsou nejen vhodné pro roztřídění mnohdy velkého množství produktů,
ale zároveň jsou prospěšné pro optimalizaci pro vyhledávače (SEO). Prostřednictvím popisků
kategorii firma informuje zákazníky o tom, co se v dané kategorii nachází. Díky
vhodnému prolinkování může firma navést návštěvníka přímo na stránku konkrétního produktu
(může se jednat o produkt, jehož chce firma prodat nejvíce nebo o ten nepopulárnější).
Využitím vhodných klíčových slov rovněž firma zviditelňuje nabízenou skupinu
produktů robotům internetových vyhledávačů. Vytváří si tak prostor pro zobrazování se na
lepších pozicích, kde je její zákazníci snadněji najdou. Prostřednictvím takovýchto landing
pages (stránka, na kterou zákazník přijde z vyhledávače) firma zároveň buduje prostor dalším
marketingovým aktivitám, např. PPC reklamě, či soutěži a linkbuildingu.60
Obrázek 59: Popisek kategorie
Zdroj: Webový portál Eshop-rychle [online] [vid. 17. srpna 2018]. Dostupné z https://blog.eshop-
rychle.cz/copywriting-e-shop-2-popisky-produktu-kategorii/
60
Webový portál Eshop-rychle [online] [vid. 17. srpna 2018]. Dostupné z https://blog.eshop-rychle.cz/co-
pywriting-e-shop-2-popisky-produktu-kategorii/
Definice
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
115
Popisek kategorie by tedy měl:
• Přehledně a stručně informovat o obsahu kategorie (1-3 odstavce o 2-4 řádcích).
• Nenásilným způsobem uvést důvody, proč by si zákazník měl právě v tomto e-shopu
nakoupit.
• Obsahovat relevantní fráze a klíčová slova, nejlépe hned v nadpisu a 2-3 v těle popisku,
hypertextové odkazy na další kategorie, či stránky e-shopu.
• Mít závěrečné CTA (call-to-action) – poslední věta by měla skutečně namotivovat
k nákupu.61
9.1.2 POPISKY PRODUKTŮ
Kvalitní popisky produktů na e-shopu tvoří přinejmenším polovinu úspěšného obchodu.
Správný popisek by měl ideálně mít jednotný formát, přehledné členění a samozřejmě obsahovat
klíčová slova a v neposlední řadě výzvu k akci. Rovněž by měl být obohacen foto-
grafiemi.62
Prostřednictvím popisků produktů by měla firma získávat pozornost a vzbudit zájem
návštěvníků jejich webových stránek nebo e-shopu a v konečném důsledku motivovat ke
koupi. Popisky by tedy měly být unikátní. Google si myslí totéž, proto upřednostňuje a
otevírá dveře originálu.63
Pro popisek produktů je vhodné připravit si jednotnou šablonu, která neslouží jen k dosažení
jednotné úpravy, ale hlavně slouží návštěvníkovi. Ten tak jednodušeji najde potřebnou
informaci přesně tam, kde ji očekává vzhledem k dřív prohlíženému produktu.
Na začátku je nutné si informace a parametry produktů přehledně rozdělit a rozepsat do
několika stěžejních částí (obrázek 60):
• Nadpis s klíčovými slovy, případně podtitulek se základní informací, která odlišuje
produkt od ostatních (např. hmotnost), doplňkovým pojmenováním nebo sloganem.
• Tělo popisku. V hlavním textu je stručně představen produkt a vyzdvihnuté jeho
přednosti. Dále se návštěvník dozví, pro koho je produkt určen a jakou potřebu pomáhá
řešit. Nejlépe, když firma využije 2-3 hlavní klíčová slova (většinou název
produktu) a pak synonyma a vedlejší klíčová slova. Není potřeba to však přehánět
s délkou, 2-3 krátké odstavce úplně stačí.
• Při použití mezititulků je rovněž dobré vkládat hlavní a vedlejší klíčová slova, formátovat
pomocí boldu a bodových seznamů.
61
Webový portál Eshop-rychle [online] [vid. 17. srpna 2018]. Dostupné z https://blog.eshop-rychle.cz/co-
pywriting-e-shop-2-popisky-produktu-kategorii/
62
Webový portál Railsformers [online] [vid. 6. září 2018]. Dostupné z https://railsformers.com/3-1-rada-
jak-psat-popisky-produktu-na-e-shop
63
Webový portál Byznys Web [online] [vid. 6. září 2018]. Dostupné z https://blog.byz-
nysweb.cz/2016/05/jak-vypada-idealni-popis-produktu/
Návod
Návod
Obsah na webu
116
• Je nezbytné najít a vypíchnout konkrétní výhodu, důvod koupi daného produktu
a zabalit to do emocí.
• Velmi důležité CTA (skladem poslední kus tohoto oblíbeného kabátu). Nejen prostřednictvím
CTA se firma pokouší o up-sell (nabídka lepší a dražší varianty) nebo
cross-sell (nabídka souvisejícího zboží).
• Technický popisek. Na konci se zpravidla uvádí technický popisek, např. údaje o
složení, či certifikaci.64
Obrázek 60: Struktura popisku produktu
Zdroj: Webový portál Eshop-rychle [online] [vid. 17. srpna 2018]. Dostupné z https://blog.eshop-
rychle.cz/copywriting-e-shop-2-popisky-produktu-kategorii/
Je důležité popisky produktů poutavě zpracovat, protože návštěvníci přichází na většinu
e-shopů z vyhledávačů nebo srovnávačů cen právě přes detail produktu a nakoupí
spíše tam, kde najdou dostatečné odpovědi na své otázky a taktéž ujištění, že si vybrali
správně.65
64
Webový portál Eshop-rychle [online] [vid. 17. srpna 2018]. Dostupné z https://blog.eshop-rychle.cz/co-
pywriting-e-shop-2-popisky-produktu-kategorii/
65
Webový portál Eshop-rychle [online] [vid. 17. srpna 2018]. Dostupné z https://blog.eshop-rychle.cz/co-
pywriting-e-shop-2-popisky-produktu-kategorii/
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
117
9.2 Blog a aktuality jako nástroj aktivní komunikace firmy
Při rozhodování o tom, zda si zařídit blog, si firma většinou pokládá otázky typu: K
čemu to bude dobré? Koho může zajímat, s čím se denně potýkáme? Bude to vlastně někdo
číst? A hlavně – pomůže nám to navýšit prodeje? Přestože se to nezdá, může.
Blog firmě dodává lidskou tvář, která jí mnohdy schází. Na rozdíl od ostatních forem
firemní komunikace blog se čtenářům přimlouvá jazykem jim blízkým a často jim přináší
informace, které by se jinak z oficiálních zdrojů nedozvěděli. Díky blogu může firma čtenáře
vtáhnout do dění firmy přes pohled pod pokličku. Prostřednictvím blogu firma nabízí
nové, zajímavé a mnohokrát zatím nezveřejněné informace. To jsou právě důvody, proč se
následně čtenáři vracejí a proč chtějí získávat další informace a diskutovat. To je jeden ze
způsobu, jak vzniká komunita, která má stejné zájmy, potřeby a již jistý, často pozitivní
vztah k firmě.
Existuje několik zásad, které se firmám vyplatí dodržovat:66
• Výběr jednoho autora. Blog musí působit nenuceně, přirozeně a autenticky. Čím
víc lidí obsah schvaluje, tím více se stává neosobnější a formálnější. Autory blogu
by měli být vybraní z řad zaměstnanců, protože jsou schopni psát lidsky a jazykem
čtenářů.
• Nepřetržité aktualizování obsahu. Průměrný návštěvník firemních stránek se v
průběhu 3 vteřin rozhodne, zdali na nich zůstane, nebo je opustí. Jestli chce firma
dosáhnout toho, aby se čtenáři na její stránky vraceli, musí její blog žít, zároveň musí
být stále aktuální a generovat jedinečný obsah. Při vytváření obsahu je dobré se zaměřit
na blízké oblasti působení, informace ze zákulisí, plány do budoucna, nebo
vzdělávání. Minimum je několik příspěvků týdenně.
• Podněcování k diskuzi. Firma by měla čtenářům umožnit reagovat na její příspěvky,
vybízet je k reakcím a okořenit diskusi. Jen tak může firma získat zpětnou
vazbu. Kredibilita blogu vychází z velikosti komunity, které členové se opakovaně
vrací a diskutují. Mnohdy se stává, že čtenáři na blog přichází spíše kvůli možnosti
debatovat o různých tématech než kvůli novým článkům.
Každá firma může s téměř nulovými investicemi do hardwaru nebo softwaru založit
blog, díky kterému se může spojit třeba i s miliony lidí, kteří sledují novinky na internetu.
Čtenáři a potenciální zákazníci mohou prostřednictvím komentářů doplňovat stránky firmy
cennými informacemi. Právě oni, čtenáři firemního blogu, představí tento blog přes další
odkazy globální komunitě a tím zajistí rozšíření obecného povědomí o něm a spojení s tisíci
dalších potenciálních zákazníků. „Google-friendly“ architektura blogů je samozřejmě
výhodou, protože internetové vyhledávače jsou tak schopné jednoduše sledovat veškeré
informace, které jsou v blogu zveřejněny. (Byron a Broback, 2008)
66
Webový portál Mediaguru [online] [vid. 13. září 2018]. Dostupné z https://www.media-
guru.cz/clanky/2007/12/firemni-blogy-jedou-jak-na-ne/
Definice
Návod
Obsah na webu
118
Většina firem, která s blogováním začíná, dokáže přehlédnout přínosy blogu a pochopí
je až v okamžiku, kdy zjistí, jak rychle a snadno se s ním pracuje a že vše probíhá automaticky.
Je potřeba jenom vyplnit webový formulář kvalitním obsahem, klepnout na tlačítko
a proces je u konce. Firma už se dále nemusí o nic starat, blogovací software sám zabezpečí
aktualizaci archivů, vytvoří prostor pro komentáře k danému příspěvku. Navíc když firma
používá i mechanizmy registrace čtenářů, rozešle zprávy, které upozorňují na nový příspěvek.
(Byron a Broback, 2008)
Poněvadž technická správa příspěvků je skutečně jednoduchá, firma se může soustředit
na obsah těchto příspěvků. Nejzásadnější věc, která odlišuje webové stránky s blogy od
webových stránek bez nich, je aktuálnost textu. Na rozdíl od standardních stránek, na
kterých se obsah aktualizuje možno jednou za čtvrtletí, blog se mění a doplňuje relativně
velmi často. Některé se aktualizují denně nebo alespoň jedenkrát či dvakrát za týden. Když
přibývají příspěvky často, návštěvníci se vracejí pravidelně a nepřicházejí jenom tehdy,
když něco konkrétního potřebují na stránkách firmy vyhledat. (Byron a Broback, 2008)
9.3 Značka a její význam pro firemní identitu
Značka nemá pro firemní identitu význam jenom díky využití ve firemním designu, kde
je nejviditelnější, ale prolíná se všemi podsystémy firemní identity. Základní funkce značky
možno charakterizovat následovně (Vysekalová a Mikeš, 2009):
• Identifikace – Značka umožňuje strukturovat nabídku a rozpoznat produkt prostřednictvím
specifických charakteristik.
• Garance – Značka představuje zákazníkem očekávanou kvalitu a dává jistotu v případě
nemožnosti objektivního posouzení kvality produkt.
• Personalizace – Značka komunikuje konkrétní zařazení v sociálním prostředí, na
jedné straně přispívá k integraci nebo naopak k diferenciaci vůči tomuto prostředí.
Vztah mezi spotřebitelem a značkou spočívá v určitém dialogu mezi dvěma identitami.
Značka má určitou osobnost, která pro spotřebitele představuje hodnotu, personifikuje
ji a označuje její charakter. Jednou z charakteristik vytvářejících identitu značky a
vymezujících její podstatu je právě její osobnost. Dalšími jsou fyzické charakteristiky,
které jsou zařazovány k materializovaným projevům značky (typická barva, obal); symboly
určitých vztahů; kulturní hodnoty, které jsou zakotveny v národní kultuře; nebo charakteristiky,
které vytváří obraz o uživateli značky nebo o příjemci informací o značce.
Vazba na firemní identitu a image je zřejmá. (Vysekalová a Mikeš, 2009)
Struktura identity značky je determinována hlavní a rozšířenou identitou. Hlavní identita,
která představuje centrální a nadčasový základ značky, by si měla udržet konstantnost
při současném pohybování se směrem k novým produktům a trhům. Rozšířená identita obsahuje
prvky identity značky, které jsou organizované do smysluplných a soudržných skupin.
(Keller, 2007)
Definice
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
119
9.3.1 IMPLEMENTACE PRVKŮ IDENTITY ZNAČKY DO WEBOVÉ PREZENTACE
FIRMY
Firma by si měla před designováním svých webových stránek zodpovědět následující
otázky (Řezáč, 2016):
• Proč děláme to, co děláme? Jaká je naše mise (poslání)?
• Jak jsme se dostali tam, kde jsme dnes? Z čeho naše firma vznikla? Jakou má
historii?
• Kam se chceme dostat? Jaká je naše vize (další směřování)?
• Jaké jsou naše zásady? Jaké hodnoty vyznáváme?
• Kdo jsou naši zákazníci?
Na první pohled se může zdát, že se jedná o jednoduché otázky, avšak firma často odpovědi
na tyhle otázky nemá, popř. na jejich zodpovězení využívá tzv. marketing-speak
– odpověď/věta sice na jednu stranu vypadá odborně, no v konečném důsledku je nicneříkající.
Marketing-speak je možné jednoduše demonstrovat větou: „Jsme na trhu pro to,
abychom poskytovali kvalitní služby svým zákazníkům“. (Řezáč, 2016)
Je nezbytné, aby si firma kromě předešlých otázek ujasnila i svůj Unique Selling Proposition
(USP), tedy unikátní prodejní argument. Prostřednictvím USP firma odpovídá
zákazníkovi na otázku, proč by si měl zvolit právě ji a její produkty. USP by mělo být
konkrétní, jasné, jednoduché a zároveň musí mít význam pro zákazníky firmy. Je možné,
že firma uspěje i bez USP, avšak je to mnohem těžší a podstatně méně nepravděpodobné,
protože dobré USP firmě pomáhá vydávat energii na webu určeným směrem a v souladu
se strategií firmy. (Řezáč, 2016)
PRO ZÁJEMCE
PŘÍKLADY DOBRÉHO A ŠPATNÉHO USP
Jako příklady dobrého USP se dají uvést: „Harley-Davidson je jediná motorka, díky
které se můžete stát moderním americkým kovbojem.“ „Náš kosmetický salon je otevřen
nonstop.“ „Jsme nejrychlejší opravna obuvi v Ostravě.“ (Řezáč, 2016)
Špatné USP jsou např. věty typu: „Jsme jiná personální agentura.“ (V čem jiná?) „Doručujeme
jasnou přidanou hodnotu svým zákazníkům.“ (A jakou?) „Disponujeme jedinečným
know-how.“ (Jakým konkrétně?) (Řezáč, 2016)
Návod
Definice
Obsah na webu
120
Prostřednictvím USP se odlišuje jedna firma (značka) od druhé. Pokud má firma silnou
značku, tak typicky (Řezáč, 2016):
• Rozlišuje benefity a atributy své značky.
• Má jasno ve svém archetypu.
• Je si vědoma pozice své značky (např. či má značka působit draze nebo levně).
• Uvědomuje si, co značka slibuje a skutečně tím i žije.
• Má jasný vizuální styl, tzn. logo, barvy, písmo, firemní materiály.
• Ví, jaký obsah chce komunikovat, jaký tón používá při komunikaci apod.
DEFINICE
Archetypy představují prastaré příběhy opakující se napříč kulturami. Archetyp značce
umožňuje komunikovat zapamatovatelně a konzistentně. Mnoho známých značek využívá
archetypy (Nike = Hrdina, Harley-Davidson = Rebel, Coca-Cola = Neviňátko, Pepsi =
Klaun, Johnson & Johnson = Pečovatel), protože díky nim mají jasný směr, no zároveň i
dostatečný prostor pro manévrování. (Řezáč, 2016)
Archetypy jsou příběhové postavy, prototypy kulturně významných postav, které jsou
implicitně naučeny a uznané a jejichž historický a osobní význam vyvolává emoční reakce
(Faber a Mayer, 2009). Archetypy tedy mohou firmy využívat, a to jak v konceptu
značky a loga, tak i v komunikaci se svým cílovým publikem. Značky mohou zachytit
podstatný význam kategorie, do které patří, a sdělovat tuto zprávu jemným a rafinovaným
způsobem. Mnohokrát se marketingoví profesionálové cítí zcela ztraceni, když se snaží
zvládnout význam svých značek, protože jim chybí referenční body nebo významné rámce,
které nabízejí systém nebo strukturu. Právě tuto strukturu poskytují firmám archetypy a
zlepšují komunikaci se spotřebiteli v průběhu času. (Mark a Pearson, 2012)
Firemní média se samozřejmě v čase taktéž mění. Dnes si už však většina firem uvědomila,
že si nevystačí jenom s pouhou sebeprezentací, ale musí dbát mnohem více na kvalitu.
Jak již bylo několikrát zmíněno, firemní obsah potažmo komunikace obecně postupně
inklinuje k jednoduchosti. Obsah i forma komunikace firem se výrazně zlepšuje, nakolik
si stále více firem přiznává, že v rámci získávání pozornosti zákazníků panuje stále větší
konkurence. Zjednodušují a zkracují se texty, klade se větší důraz na vizualizaci, vylepšuje
se grafika, která již není tak zanedbaná nebo prvoplánová. Při tvorbě obsahu musí tedy
firma reagovat na vysoce roztříštěnou pozornost a to např. prostřednictvím bulvarizací titulků,
zkracováním rozsahu rubrik nebo přenášením původně online komponentů do offline
tištěné verze (instagramové fotografie).67
67
Webový portál Mediaguru [online] [vid. 14. září 2018]. Dostupné z https://www.media-
guru.cz/clanky/2017/02/firemni-obsah-smeruje-ke-zjednodusovani/
Definice
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
121
PRŮVODCE STUDIEM
Následující případová studie je k tvorbě obsahu z dílny Obsahové agentury pod vedením
Martina Brablece. Podívejte se, jak přistupovat k tvorbě obsahu pomocí identifikace klíčových
vlastností soukromé vysoké školy a potenciálu, který nabízí materiály vytvářené během
kurzů v semestrech. Dále si všimněte, že mnohdy není nutné vymýšlet své řešení ale
stačí se pro nápad poohlédnout ve vyspělých zemích v zahraničí. Martin vás mimo jiné
seznámí také s některými aplikacemi a službami pro lepší správu, sdílení a spolutvorbu
obsahu ve větším týmu.
PŘÍPADOVÁ STUDIE
TVORBA OBSAHU PRO SOUKROMOU VYSOKOU ŠKOLU
V této případové studii si přečtete, jak vymyslet, vytvořit a dlouhodobě plnit obsahovou
sekci webu podle Obsahové agentury. Celou práci si v praxi ukážeme na obsahovém hubu,
který Obsahovka vytvořila pro vysokou školu NEWTON College.
Obsahová agentura dodává obsah středním a velkým firmám v České republice i na
Slovensku. Tvoří obsahové strategie, nastavuje komunikační styl, spravuje sociální sítě,
pořádá workshopy i vlastní konferenci Obsahovka Live. Má tým na vizuální obsah i analytiku.
Specializuje se na dlouhodobou spolupráci a komplexní dodávání obsahu ve
všech kanálech, kterými klient komunikuje.
NEWTON College je vysoká škola aplikovaného businessu. Zaměřuje se na marketing,
management, psychologii, média nebo lidské zdroje. Klade důraz na praktickou
výuku a vyučující z praxe – na NEWTONu přednáší například ekonom Vladimír
Tomšík, kouč a trenér Marian Jelínek nebo webový konzultant Jan Řezáč.
Cílové skupiny NEWTONu jsou středoškoláci, studenti i absolventi NEWTONu, rodiče
i zájemci o MBA, kteří za sebou mají i desítky let praxe. Důležití jsou i náhodní
příchozí z vyhledávání, kteří potřebují informace z oblasti marketingu, HR či ma-
nagementu.
Výchozí situace: co s nabraným materiálem NEWTONu
Semestr co semestr produkují na NEWTON College stovky hodin jedinečného obsahu.
Pořádají akce pro veřejnost, studenti vyráží do zahraničí na vzdělávací stáže, zvou si
na přednášky zajímavé hosty – třeba startupisty i šéfy zavedených firem z řad absolventů.
Obsah na webu
122
Díky tomu měli na NEWTONu v zásobě videa z přednášek, hrubé rozhovory a spoustu
kontaktů.
Takže začali řešit, jak se vším tím obsahem naložit. Bylo potřeba:
• dát řád existujícímu obsahu a smysluplně ho rozdělit,
• vybrat nový zajímavý obsah a zpracovat z něj články,
• vytvořit platformu, kde by šlo obsah snadno publikovat a vyhledávat.
Hledání způsobu, jak myšlence vdechnout život
Na počátku měli v NEWTONu ideu blogu odděleného od celého webu. To mělo 2 hlavní
důvody:
1. Právě dokončili dvouleté práce na novém webu, který se sekcí pro blog nepočítal,
protože měl sloužit jako informační prostor pro studenty, absolventy a uchazeče,
kteří řeší věci týkající se ryze studijních zaměření, přijímacího řízení či praxe.
2. Novým blogem chtěli oslovit kromě studentů, absolventů a uchazečů i náhodné
příchozí z vyhledávání, kteří hledají zajímavé informace.
Proto Obsahovka NEWTONu navrhla obsahový hub.
Co je to obsahový hub a jak ho založit
Obsahový hub je platforma, která soustředí obsah typu videa, článků nebo úryvků ze
sociálních sítí na jedno místo. Je ideální v situaci, kdy kolem značky vzniká hodně různorodého
obsahu. Takže i když nemá ambici být novým médiem, výrazně překračuje rámec
běžného firemního blogu.
Hub typicky neobsahuje provozní ani technické informace. Pojme zajímavosti a
know-how ze studijních oborů, ale mezi obsah se nemíchají informace o přihláškách, dnech
otevřených dveří či sylaby k předmětům. Proto je hub ideální pro kohokoliv se zájmem o
témata, kterými se škola zabývá.
Hub může být:
• součástí webu
• nebo na nové doméně.
Při rozhodování přemýšlejte i o tom, jestli je vaše značka dostatečně zavedená a může
si díky tomu dovolit publikovat obsah mimo svůj web. Hub mimo oficiální web rovněž
usnadňuje sběr kontaktů a pomáhá profilovat se jako autorita v oboru.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
123
Jak vznikl nápad na obsahový hub
Tím nejlepším postupem při práci na nové obsahové sekci je rešerše stávajících řešení.
Při ní se neomezujte jen na české prostředí a všímejte si kromě vaší konkurence ze stejného
oboru i zajímavých obsahových počinů jiný firem.
Obsahovou agenturu inspirovaly huby amerických univerzit. Precizně vedené weby
UChicago News nebo Insight Magazine jsou jen malou ukázkou toho, jak dokáží tamější
školy pracovat s obsahem.
Z detailnějšího průzkumu vyplynula klíčová témata, která by měl školní hub pokrývat:
• Alumni obsah – sdílení příběhů a osudů absolventů, místo pro rozhovory či diskuse.
• Studenti pro studenty – autentický obsah vznikající přímo na škole, který slouží k
pohledu do zákulisí a reálného chodu školy, pokrývající typické FAQ.
• Platforma pro vyučující – místo pro názory, komentáře, analýzy, kurzy, publicis-
tiku.
• Partneři v byznysu – prostor pro ty, kteří se školou spolupracují, externí lektory,
hosty, firmy.
Forma je ideálně co nejpestřejší: rychlý blogpost, podrobnostmi nabušený článek, video,
webinář nebo check-list. A pro vyšší autenticitu se vyplatí zapojit do tvorby obsahu i
další strany – studenty, vyučující, firmy.
Rešerše také pomohou stanovit názvy rubrik a nadefinovat, které typy článků se v nich
mají objevovat.
Co tvořit kromě obsahového hubu
Obsahový hub je méně typickou formou obsahové sekce. Obvyklejší jsou klasické
blogy, profily na You Tube s videy nebo sociální sítě.
Formáty textů používané v obsahových sekcích se ale neliší. Kromě klasických blogových
článků jsou to například:
• případové studie,
• check-listy,
• e-booky,
• white papery
• a dalších asi 100 typů obsahu.
S psaní vám pomůže i trilogie Otty Bohuše Pište jako copywriter, správnou gramatiku
si ověřte v Internetové jazykové příručce a pokud vás bude štvát úředničina a až moc formální
jazyk, inspirujte se ve Slovníku floskulí, která slova jsou už za zenitem. Ale pozor,
nadužívaná slova se rychle mění, takže to neznamená, že co není ve slovníku, to je v po-
řádku.
Obsah na webu
124
Jak dlouhodobě naplňovat obsahovou sekci
V nové obsahové sekci by kromě nadupaných článků neměly chybět třeba:
• kategorie,
• štítky,
• kvalitní vyhledávání
• pole pro sběr e-mailů (samozřejmě s double opt-inem, abyste splnili GDPR)
• nebo kalendář akcí.
Prací UX designéra, kodéra a prvními články to ale zdaleka nekončí. Musíte udržovat
dlouhodobou spolupráci a nastavit si procesy, aby všechno běželo jako po másle.
Vaším úkolem je:
• Revidovat a vylepšovat obsahovou sekci. V obsahovém hubu NEWTONu se například
ukázalo, že tým copywriterů musel u velkého množství článků diskutovat, do
které rubriky je zařadit. Proto jsme změnili název jedné z nich a každou rubriku si
společně nadefinovali.
• Doručovat obsah cílovým skupinám, protože málokdo si váš blog uloží do záložek
a bude každý den dvakrát kontrolovat.
• Sekundárně využívat již hotový a na blogu vydaný obsah například do e-booků či
tištěných magazínů. Ty jsou vhodné jako materiály na veletrhy, pro zákazníky do
schránek nebo k rozdávání při outdoorových kampaních.
Život není jen o psaní
Copywritera v dlouhodobé práci na obsahové sekci si nepředstavujte jako rozevlátého
básníka, který hledá múzu po kavárnách. Je to totiž tvrdá dřina.
Hned zpočátku musíte vyladit sdílené dokumenty a naučit se komunikovat s klienty i
dalšími externími agenturami. S tím vám pomůže několik nástrojů:
• Asana pro sdílení úkolů.
• Slack pro rychlé zprávy.
• Pravidelné interní schůzky copywriterů, schůzky s klientem i schůzky se všemi
ostatními agenturami, které se starají například o sociální sítě či výkonnostní marketing.
Společně proberete zvolená témata nebo výsledky analytiky.
• Vzájemné revize hotových textů – jeden copywriter text napíše a druhý mu na něj
dá zpětnou vazbu.
Revize je neocenitelným pomocníkem každého copywritera. Víc očí víc vidí – tohle
moudro si při revizi budete dnes a denně opakovat.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
125
Aby to dobře fungovalo, hodí se psát do google dokumentů. Výstupy si pak přehledně
utřídíte na disku a revidující kolega bude moct komentovat, škrtat a doplňovat, aniž byste
si museli pořád přeposílat wordový dokument.
Tvorba dlouhodobého obsahu se neobejde ani bez sady sdílených dokumentů. K nim
patří určitě:
• Dokument s nápady na články,
• Dokument s kontakty, které postupně získáváte a můžete využít jako zdroje,
• Složka s fotkami,
• Dokument na zápisy ze schůzek,
• Publikační plán na měsíc, kvartál či rok.
Závěr: jak tedy začít?
Při tvorbě obsahové sekce si nejprve vyslechněte všechny požadavky a přání klienta.
Pak sami zhodnoťte, které návrhy jsou relevantní. Musíte sloučit dvě důležité věci:
• klientovy touhy a potřeby
• touhy a potřeby klientova zákazníka.
Klient vám sice platí, ale web tvoříte pro jeho zákazníky. Proto vysvětlete klientovi,
že i když on trvá na červeném pozadí webu, bude lepší decentní béžové, které vám vyšlo
jako preferované v uživatelském výzkumu.
Důležitou součástí práce je rešerše, pomocí které si uděláte obrázek, co funguje a jaké
jsou možnosti. To vám usnadní vaši vlastní kreativní práci.
Ujasněte si, kdo jsou vaše cílové skupiny a co chcete v obsahové sekci psát. Patří tam
názorové články manažerů? A co reportáže z oborových akcí? Tohle vše si stanovte předem,
ať pak při psaní netápete.
Klienta zapojte do práce při nabírání podkladů, faktických revizích nebo při získávání
fotek. Vše záleží na vaší společné domluvě, konkrétních potřebách a časových možnostech.
Nastavte si funkční procesy, založte sdílené dokumenty. A nebojte se tohle všechno měnit,
když zjistíte, že něco nefunguje.
Martin Brablec – Obsahová agentura
Obsah na webu
126
TESTOVÉ OTÁZKY
Otestujte si získané znalosti z kapitoly č. 9. Pouze jedna odpověď je správná.
Správné odpovědi naleznete na konci kapitoly.
1. Jak se označuje poslední věta, která by měla skutečně namotivovat k nákupu?
a) Call to action.
b) Unique Selling Proposition.
c) Mise.
2. Co dodává firmě lidskou tvář?
a) Katalog.
b) Blog.
c) Značka.
3. Odpověď/věta sice na jednu stranu vypadá odborně, no v konečném důsledku je
nicneříkající se označuje jako:
a) Unique Selling Proposition.
b) Marketing-speak.
c) Claim.
4. Co značce umožňuje komunikovat zapamatovatelně a konzistentně?
a) Reklama.
b) Popisek.
c) Archetyp.
5. Důvod existence firmy se neoznačuje jako:
a) Vize.
b) Mise.
c) Poslání.
SHRNUTÍ KAPITOLY
Po prostudování kapitoly č. 9 byste měli umět:
• Objasnit podstatu popisků u e-shopů.
• Identifikovat základní odlišnosti mezi popiskem kategorie a popiskem produktu.
• Charakterizovat blog a uvést jeho zásady a přínosy pro firmu.
• Popsat funkce značky a základní otázky, na které si musí firma odpovědět při
designování webových stránek.
• Vymezit základ unique selling proposition a archetypů.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
127
ODPOVĚDI NA TESTOVÉ OTÁZKY
1a, 2b, 3b, 4c, 5a
Propagace webové stránky
128
10 PROPAGACE WEBOVÉ STRÁNKY
RYCHLÝ NÁHLED KAPITOLY
Ve většině případů budete potřebovat, aby byl na webové stránce odpovídající provoz,
tedy aby přicházeli návštěvníci a vykonávali tam určité požadované akce, jako je nákup,
zanechání kontaktu, zhlédnutí videa nebo přečtení článku. Vytvoření webu je tedy jen první
část a píli a úsilí je nutné věnovat také jeho propagaci. Představte si to jako kamenný obchod.
To že jej uděláte krásný v interiéru, ale nedáte o něm vědět potenciálním zákazníkům,
vám nepřinese požadované ekonomické výsledky. V úvodní podkapitole je vylíčen proces
vytváření pozice webu v rámci integrované marketingové komunikace firmy a jsou charakterizovány
kreativní strategie spolu s apely vyskytujícími se v reklamních sděleních. Dále
se v této kapitole podíváme na možnosti propagace webu jako speciální kategorii správy
webové stránky.
CÍLE KAPITOLY
• Podtrhnout podstatu linkbuildingu a vymezit pozici webu v rámci tohoto procesu.
• Popsat možnosti kreativních strategií.
• Ukázat možnosti propagace webové stránky
• Vysvětlit principy fungování PPC systémů
• Popsat fungování remarketingu
• Detailněji rozebrat co je konverze a atribuce
KLÍČOVÁ SLOVA KAPITOLY
Integrovaná marketingová komunikace, kreativní strategie, PPC, propagace, remarketing,
konverze, atribuce.
10.1Web jako součást integrované marketingové komunikace
firmy
Aktivity v oblasti marketingové komunikace musí být integrovány tak, aby poskytovaly
důslednou zprávu a dosáhly strategického umístění. Výchozím bodem při plánování mar-
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
129
ketingové komunikace je audit všech potenciálních interakcí, které mohou mít zákazníci
na cílovém trhu s firmou a všemi jejími výrobky a službami. Například někdo, kdo má
zájem o nákup nového notebooku, může mluvit s ostatními, vidět televizní reklamy, číst
články, hledat informace na internetu a podívat se na notebooky v obchodě. Firmy potřebují
posoudit, které zkušenosti a dojmy budou mít největší vliv v každé fázi nákupního procesu.
Toto porozumění jim pomáhá efektivněji rozdělovat finanční prostředky pro komunikaci,
navrhovat a implementovat správné komunikační programy.
Když už si firma zakládá na svých webových stránkách, často dělá tu chybu, že vkládá
veškerou svou webovou energii přímo na svoje webové stránky. 75 % zaměření firmy by
však mělo být na to, co se děje mimo její webové stránky. Toto zaměření by mělo zahrnovat
vytváření komunit mimo webové stránky, aby se mohli uživatelé spojit s firmou, jejími
produkty a dalšími v rámci komunity. Toto „vnější“ zaostření nakonec vrací uživatele zpět
na webové stránky firmy. Model v obrázku 61 představuje web, přičemž každá tečka je
webová stránka. Každá firma by měla usilovat o to, aby její webové stránky byly velkou
tečkou, která je spojena s mnoha dalšími webovými stránkami, tedy být jakýmsi rozbočovačem.
(Halligan a Shah, 2014)
Obrázek 61: Struktura spojení webových stránek firmy
Zdroj: Halligan a Shah, (2014)
Firma by se měla snažit, aby její webové stránky byly spíše jako New York City než
Wellesley, Massachusetts. NYC má několik hlavních dálnic, tři hlavní letiště, obrovskou
autobusovou stanici, dvě hlavní nádraží. Wellesley má jednu dálnici projíždějící přes něj,
žádné letiště, žádnou autobusovou a vlakovou stanici. Dálnice, vlaky, autobusy a letadla
převedeno na webové stránky firmy jsou vyhledávače, odkazy z jiných stránek a tisíce zmínek
o firmě v sociálních médiích. To vše mění webové stránky firmy v magnetický rozbočovač
pro daný průmysl, který přitahuje další návštěvníky potažmo zákazníky. (Halligan a
Shah, 2014)
Firma šíří obsah svých stránek na stránky sociálních médií, jako jsou Twitter, Facebook,
Instagram, kde se může virově rozšířit k novému, zainteresovanému publiku. Pokud to
udělá správně, uživatelé budou při používání těchto aplikací konzumovat webový obsah
firmy, a to nejen na jejím webu. (Halligan a Shah, 2014)
Návod
Příklad
Propagace webové stránky
130
Firmy mají v rámci sociálních médií několik možností pro branding, včetně umístění
placené reklamní inzerce, účasti na sociálních sítích jako osobnost značky, rozvíjení příležitostí
pro zapojení zákazníků do sociálních sítí a publikování obsahu značky (známého
jako obsahový marketing nebo sociální publikování) na sociálních kanálech. (Tuten a Solomon,
2013) Značky mohou využívat marketing sociálních médií jako integrovanou součást
v marketingové komunikační kampani jako pokračující korporátní komunikační kanál
a/nebo jako řadu mikro procesů speciálně navržených pro digitální expozici.
10.1.1 KREATIVNÍ STRATEGIE PRO OBSAH MARKETINGOVÉ KOMUNIKACE
DEFINICE
Kreativní strategie jsou prováděcí faktory a strategie zpráv, které se používají k překlenutí
propasti mezi tím, co chce firma říct, a tím, co spotřebitel potřebuje slyšet. Kreativní
strategie zahrnuje jak obsah, tak spouštění obsahu a zahrnuje pojem navržení komunikace
způsobem, který zvyšuje pravděpodobnost, že může dosáhnout požadovaných účinků v cílovém
publiku. (Laskey, Day a Crask, 1989) Kreativní strategie mohou zvýšit motivaci,
příležitost a schopnost přijímatele zpracovat informace z reklamního sdělení. (MacInnis,
Moorman a Jaworski, 1991) Identifikace kreativních strategií pomáhá odborníkům
při určování možností a porovnávání jejich účinnosti.
Na nejjednodušší úrovni lze kreativní strategie rozlišit především jako emocionální
(transformační) nebo primárně funkční (informační) (Aaker a Norris, 1982). Kromě rozlišování
důrazu na racionální informace a emoce se kreativní strategie mohou zaměřit na
výhody, které jsou jedinečné pro značku (unique selling prosposition), nadřazené značky
(preemptivní, srovnávací) nebo nediferencované ve třídě produktů (obecné). Mohou se soustředit
na přizpůsobení značky spotřebitelským aspiracím (obraz), poznatkům a zkušenostem
(rezonanci, zkušenostem) a pocitům (emoční včetně lásky, sexuální touhy, strachu,
viny a radosti/humoru). Funkční zprávy jsou považovány za racionálně zpracované,
zatímco transformační zprávy apelují na psychologické vlastnosti cílového publika.
(Laskey, Day a Crask, 1989)
Obrazové apely jsou efektivnější, když je propagovaný produkt hodnotný pro cílové zákazníky,
zatímco funkční výzvy jsou efektivnější, když je produkt užitečný. (Johar a Sirgy,
1991) Několik studií zdůraznilo potřebu funkčních zpráv pro spotřebitele s vysokou angažovaností
a transformační zprávy pro spotřebitele s nízkou mírou angažovanosti. (Areni,
2003) Angažovanost je vnímaná relevance dotyčného předmětu na základě vlastních potřeb,
hodnot a zájmů. (Zaichkowsky, 1985)
Návod
Definice
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
131
Tento vztah mezi angažovaností a kreativním přístupem byl nalezen i v online prostředí.
McMillan, Hwang a Lee (2003) porovnávaly webové stránky na základě využívání informačních
a transformačních tvůrčích strategií a dostupnosti funkcí. Zjistili, že strategie založené
na informacích, mohou být nejlepší pro zákazníky s vysokou angažovaností, zatímco
různé velikosti a animace jsou efektivnější u spotřebitelů s nízkou mírou angažovanosti.
To je také v souladu s teorií selektivní pozornosti, která naznačuje, že spotřebitelé
omezují výdaje na kognitivní zdroje, včetně pozornosti, podle svých potřeb.
10.2Nástroje propagace webové stránky
10.2.1 PPC KAMPANĚ
Stoklasa (2016, s. 49) uvádí mezi používanými formát reklamy PPC (Pay per click), je
v současnosti nejpopulárnější reklamní systém, kdy inzerent platí za proklik uživatele.
Tedy PPC. Inzerentovi je účtována cena za reklamu až po kliknutí uživatele na reklamu.
K alternativám patří:
• PPT (Pay per time)
o Platba za čas, po který je reklama na webové stránce umístěna.
• PPV (Pay per view) a CPI (Cost per impression)
o Jedná se o jeden z nejstarších modelů platby za reklamu na internetu.
V podstatě kopíruje logiku tradičních médií a inzerent platí za impresse
tedy množství unikátních zobrazení a zhlédnutí reklamy.
• PPS (Pay per sale)
o Platba inzerenta majiteli webu, kde se reklama zobrazuje, probíhá až určitým
procentem z prodeje, který reklama přivede. Tento formát je velmi
výhodný pro inzerenta. Platí až, když sám prodá. Majiteli webu se vyplatí
ve chvíli, kdy jasně ví, že je inzerentův produkt žádaný a bude generovat
objednávky.
Obrázek 62: Nejčastější umístění PPC reklamy na internetu
Zdroj: Stoklasa (2016)
PPC
reklama
Výsledky
vyhledávání
Obsahová
síť
Definice
Propagace webové stránky
132
Vyhledávání je v České republice dominantou dvou vyhledávačů a těmi jsou Google
(adwords) a Seznam.cz (sklik) stejně tak obě firmy nabízejí inzerci v obsahové síti.68,69
10.2.2 REMARKETING NEBOLI RETARGETING
Pokud navštívíte webovou stránku a následně vidíte reklamy dané značky na jiných místech
na internetu, je téměř jisté, že jste se stali terčem remarketingové kampaně. V podstatě
se jedná o proces připomínání návštěvy zákazníkovi pomocí nástrojů tradiční reklamy s
cílem návratu na původně navštívenou stránku a dokončení určité akce. Schematický postup
je možné vidět na obrázku 63. Popisuje situaci, kdy uživatel přichází na web, kde je v
HTML vlákně vložený remarketingový kód a cookies uživatele se pak vloží do remarketingového
listu. Po odchodu uživatele z webu pak může inzerent zacílit na jeho znovu oslovení
v rámci bannerové reklamy umístěné v podstatě kdekoliv na internetu. (Stoklasa,
2016, s. 58)
Obrázek 63: Remarketingový proces
Zdroj: Stoklasa (2016)
Většinou se s remarketingem setkáváme v obsahové síti Google, ale jak správně upozorňují
Eger et al (2015, s. 77) nemusí se remarketingové kampaně připravovat pouze s pomocí
nástrojů Googlu. Dalšími poskytovateli jsou například Seznam, Facebook či Adform
a jiné organizace. Doplňme ovšem, že v těchto případech poskytovatelé hovoří o retargetingu,
jelikož termín remarketing si Google tak trochu přisvojil a plně jej ztotožňuje s re-
targetingem.70,71
68
Webový portál Sklik. Obsahová síť [online] [vid. 15. července 2016]. Dostupné z http://napo-
veda.sklik.cz/zaciname/kde-se-zobrazuje/obsahova-sit/
69
Webový portál Google. AdWords [online] [vid. 15. července 2016]. Dostupné z https://support.goo-
gle.com/adwords/answer/2404191?hl=cs&ref_topic=3121944
70
Webový portál Rejoiner. Remarketing vs. Retargeting, whats the difference [online] [vid. 14. července
2016]. Dostupné z http://rejoiner.com/resources/remarketing-vs-retargeting-whats-the-difference/
71
Webový portál MOZ. Retargeting: what it is and how to use it [online] [vid. 14. července 2016]. Dostupné
z https://moz.com/blog/retargeting-basics-what-it-is-how-to-use-it
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
133
10.3 Konverze a atribuce
KONVERZE
Konverze, v anglickém znění Conversion Rate, je úspěšné dokončení nějaké akce. U eshopu
pak konverzi reprezentují akce skutečných zákazníků. Skutečným zákazníkem je ten,
který si u vás zakoupil zboží, registroval se k odběru newsletteru nebo provedl registraci.
Obecně do konverze spadá uživatel, který provedl požadovanou akci. (Mikulášová a Sedlák,
2015, s. 292)
S tímto pojmem souvisí konverzní poměr, což je metrika, která vyjadřuje, kolik procent
uživatelů dokončí požadovanou akci (provede konverzi). Konverzní poměr není výsadou
pouze u online aktivit, můžeme si jej klidně vysvětlit na příkladu kamenného obchodu.
Pokud do prodejny přijde 50 zákazníků a 25 z nich nakoupí, můžeme hovořit o konverzi
50 % (polovina zákazníků, kteří vstoupili do obchodu, nakonec nakoupilo). Totéž pak v případě
e-shopu bude znamenat, pokud z 5 000 návštěvníků nakoupí 2 500. Konverzní poměr
v online businessu je ale zřídka takto vysoký. Honza Junek uvádí, že konverzní poměr 10
% nejlepších e-shopů je 6-11 % a medián konverzního poměru v e-commerce je 2,3 %.72
Vzorec pak bude vypadat následovně:
Konverzní poměr = počet zkonvertovaných / počet všech návštěvníků
Konverzní poměr (%) = počet zkonvertovaných / počet všech návštěvníků * 100
Cílem každého provozovatele e-shopu je co nejvyšší konverzní poměr, proto se snaží,
aby se z co největšího počtu návštěvníků stali aktivní kupující. Existuje několik faktorů,
které vám výsledný konverzní poměr ovlivňují. A to jak pozitivně, tak negativně. Mezi
kladné faktory patří vhodně nastavené reklama, uživatelsky srozumitelný web, poutavé a
přesvědčivé texty, zákaznické výhody, aktivní podpora prodeje, poutavá úvodní stránka a
další. Negativní faktorem může být složitá navigace stránek, špatně zacílená reklama, nevhodně
řešená marketingová stránka prodeje, uživatelsky nesrozumitelný web, špatně nastavený
proces nákupu v košíku a další. (Mikulášová a Sedlák, 2015, s. 292)
ATRIBUCE A JEJÍ MODELY
Konverze nikdy není o posledním kliku. Návratnost reklamy neprobíhá jen na základě
analýzy posledního klinutí. Zkušenější marketingoví konzultanti si jsou vědomi multichannels,
tedy toho, že než zákazník zkonvertuje, navštíví e-shop vícekrát. Výslednou hodnotu
konverze (což může být u e-shopu právě hodnota transakce) pak rozpočítají na jednotlivé
zdroje návštěvnosti podle zvoleného atribučního modelu. (Mikulášová a Sedlák, 2015,
s. 295)
72
Webový portál Jan Junek [online] [vid. 28. března 2019]. Dostupné z: https://janjunek.com/coe2019.pdf
Definice
Propagace webové stránky
134
V rámci konverzní trasy tedy může zákazník provádět více vyhledávání a reagovat na
více reklam téhož inzerenta. Pomocí atribučních modelů můžete vidět, jaké zásluhy budou
mít na konverzi jednotlivá kliknutí. Zásluhy můžete přiřadit prvnímu či poslednímu kliknutí
zákazníka, případně kombinaci více kliknutí. Díky atribučním modelům si můžete udělat
lepší představu o výkonu svých reklam. Pomohou vám také optimalizovat konverzní
trasu uživatele.73
Obrázek 64: Zobrazení atribuce reklamy mezi zařízeními
Zdroj: Webový portál Google Blog [online] [vid. 27. ledna 2019]. Dostupné z https://czechrepublic.google-
blog.com/2016/08/nove-prehledy-srovnavaci-udaje-atribuce.html
Na obrázku 64 vidíme jednoduché schéma atribuce mezi zařízeními. Uživatele můžeme
měřit na poslední kliknutí na zařízení nebo spojit více klinutí a mapovat, na jakých zařízeních
reklamu viděl.
PRŮVODCE STUDIEM
Následující případová studie popisuje konkrétní využití výkonnostních kampaní u webové
stránky Bonami.cz. Kromě nástrojů, o kterých jsme si povídali výše, zmiňuje Kamil
Kotraba také affiliate programy, které jsou v podstatě provizním systémem, kdy platba probíhá
zprostředkovateli, který přivádí na webovou stránku nové zákazníky.
73
Webový portál Google Support [online] [vid. 28. března 2019]. Dostupné z:https://support.goo-
gle.com/google-ads/answer/6259715
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
135
PŘÍPADOVÁ STUDIE
KAMPANĚ JAKO ZDROJ NÁVŠTĚVNOSTI WEBU BONAMI
Popis případové studie
Využití mixu placených marketingových kanálů jako zdrojů návštěvnosti a konverzních
akcí na webu Bonami.cz - online prodejce nábytku a bytových doplňků.
Cíle kampaní
Kampaně jsou výkonnostního charakteru a mají jasný cíl, který je stanoven před samotným
začátkem kampaně. Tím jsou konkrétní akce na webu: odeslání objednávky,
případně registrace a přihlášení se k odběru newsletteru. U cílů generující tržby, je také
důležité maximalizovat jejich objem při stanoveném ROAS (návratnost investic do
reklamy).
Obrázek 65: Zobrazení atribuce reklamy mezi zařízeními
Zdroj: Webový portál Bonami [online] [vid. 20. února 2019]. Dostupné z https://www.bo-
nami.cz/?gclid=EAIaIQobChMIk4-bwt7V4gIVleR3Ch1WIALmEAAYASAAEgIYb_D_BwE
Propagace webové stránky
136
Použité zdroje placené návštěvnosti:
• PPC systémy (Google Ads, sKlik, Bing) a jejich obsahové a vyhledávací sítě,
• sociální sítě (Facebook, Twitter, LinkedIn),
• srovnávače a agregátory nabídek (Heureka, Glami, Favi, Biano),
• affiliate marketing (CJ Affiliate),
• specializované reklamní platformy (Criteo, RTBHouse).
Platby za reklamu se liší v závislosti na kanálu či formátu reklamy. Mezi nejpoužívanější
patří:
• PPC – platba za proklik (pay per click),
• PPV – platba za zobrazení reklamy (pay per view).
Druhy kampaní (dle cílení na uživatele):
Akviziční kampaně
Mají za úkol přivést na webové stránky nové uživatele, kteří si konkrétní produkt nebo
službu koupí.
Použité kanály, formáty, jejich cílení a optimalizace:
1) Google Ads
Formáty reklamy: kampaně ve vyhledávací síti, Google nákupech, obsahové síti.
Cílení:
Klíčová slova – ta se dělí do několika skupin:
• obecná (nábytek online, nábytek do obývacího pokoje),
• kategorická (jídelní židle, rohové pohovky),
• produktová (tmavě šedá stojací lampa Zuiver Highland).
In-market publika (zájem o koupi) – uživatelé, kteří aktivně hledají a chtějí koupit
produkty z předem dané kategorie. Včetně tvorby vlastních zájmů o koupi – sám definuji,
na základě klíčových slov segment, o který mají uživatelé zájem.
Podobná publika – cílí na nové uživatele, kteří mají podobné charakteristiky jako
uživatelé webu, například zvolíme remarketingový seznam uživatelů podobným těm, kteří
nakoupili více než dvakrát. Vytvoření podobného publika probíhá následovně. Google Ads
prohledá aktivitu procházení webů, který si uživatel na vybraném remarketingovém seznamu
prohlíží. Zjistí společné zájmy a charakteristiky lidí na remarketingovém seznamu a
na základě těchto informací Google Ads automaticky vyhledá nové potenciální zákazníky,
jejichž zájmy, chování a charakteristiky jsou podobné jako u lidí na seznamu.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
137
Optimalizace: Jednotlivě se optimalizují ceny za kliknutí v systému, a to dle aktuálního
výkonu jednotlivých reklamních kampaní na cílové ROAS.74
2) Facebook reklamy
Použité formáty: dynamické reklamy založené na produktovém feedu (souhrn všech informací
o produktech dostupných v internetovém obchodě obsahující veškerá potřebná data
k jejich importu do reklamního systému), statické kampaně s ručně vybranými fotkami
produktů.
Cílení: především na lookalike publika (stejný princim jako podobná publika u cílení v
Google Ads) založená na základě chování uživatelů na webu, dále pak na konkrétní zájmy
uživatelů a demografické údaje.
Optimalizace: úprava cílových nabídek a rozpočtů reklam podle aktuálního ROAS.
3) Srovnávače a agregátory
Mezi největší patří agregátory oborově zaměřené jen na nábytek - Favi.cz a Biano.cz.
Těmto subjektům je exportována aktuální nabídka obchodu pomocí produktového feedu.
Optimalizace probíhá změnou ceny za kliknutí na detailu produktu či kategorie, dále pak
úpravou zasílaných produktů - omezení nabídky o produkty s delší dobou dodání a ty se
špatným poměrem tržeb a nákladů (typicky produkt generující velkou návštěvnost, ale z
různých důvodů mající malý konverzní poměr).
Retenční kampaně
Více než polovina nákupů trvá od první návštěvy až po objednání více než 5 dnů, během
kterých uživatel interaguje s množstvím dalších kanálů. Nezbytnou součástí jsou tedy remarketingové
a retenční kampaně. Jejich účelem je z návštěvníka, který interagoval s
webovou stránkou (prohlížel produkt, kategorii, přidal zboží do košíku), udělat zákazníka.
Případně ze stávajících zákazníka (už v minulosti nakoupil), vracejícího se k opakovaným
nákupům.
Používané kanály – Facebook, Google Ads, Criteo a RTBHouse. U všech zmíněných
jsou používány dynamické kreativy, kde uživatel vidí produkty, které si prohlížel, a další
jim podobné, v malé míře pak i statické bannery s obecným obsahem.
Cílení: Na základě chování uživatelů na webu
Na skupinu, která pouze prohlížela produkty za určité období a ty, jež produkt přidali
do košíku a nedokončili nákup. U některých kanálů dochází k vyloučení uživatelů za
posledních 24 hodin: jejich vystavení reklamám nemá inkrementální vliv na konverze.
74
Více k metrice ROAS zde: https://www.marketingppc.cz/casto-kladene-dotazy-k-ppc-marketingu/co-je-
to-roas/
Propagace webové stránky
138
Vlastní seznamy návštěvníků – umožňují tvorbu seznamů uživatelů na základě údajů,
které s vámi sdílí (e-mail, Facebook ID). Takovýmto seznamem může být například “opakovaní
zákazníci, kteří přestali nakupovat”.
Optimalizace: hlavním cílem je ROAS, vedlejším pak zvyšující se počet opakovaných
nákupů.
Měření a UTM parametry
Výhodou výkonnostních kampaní je možnost jejich detailního měření a vyhodnocení
přímého vlivu na obchod.
Měřící kódy – každý ze systémů má na webové stránce vložený vlastní měřící kód. Ten
slouží nejen k zaznamenávání konverzí, ale také ke sledování obsahu webu, který uživatel
procházel. Díky tomu lze tvořit mimo jiné publika na základě uživatelského chování.
Vyhodnocování návštěvnosti webu a marketingových aktivit probíhá dle dat v nástroji
Google Analytics, nikoliv z dat jednotlivých systémů. Google Analytics mají svůj vlastní
měřící kód.
K předání informace o návštěvě webu slouží UTM parametry: ty návštěvě přiřazují
zdroj, médium, kampaň a obsah reklamy. K tvorbě těchto parametrů můžou sloužit volně
dostupné nástroje. K jejich nastavení dochází vždy na úrovni jednotlivých reklamních systémů.
Zde se často používá automatické značkování, kdy se do UTM parametrů propisuje
zadaná proměnná (název kampaně, ID kampaně, název reklamní sestavy).
Závěr
Při přípravě strategie pro výkonnostní kampaně je potřeba stanovit si cíle reklamy a
jejich hodnotu. U každého z cílů je nutné stanovit si, jakou částku jsme ochotni za jeho
splnění zaplatit, případně požadovanou návratnost investice do reklamy. Vzhledem k tomu,
že měsíční investice do tohoto druhu reklam se pohybují v desítkách tisíc u menších projektů,
v desítkách milionů u velkých e-shopů, je obzvlášť důležité před samotným
spuštěním ověřit správné nastavení měření cílů.
Kampaně se ve všech kanálech neustále mění a do jejich výsledků vstupují denně
desítky proměnných. Proto vyžadují neustálou optimalizaci a vyhodnocování. Cíle kampaní
se v čase můžou běžně měnit, proto je nutné přizpůsobovat kampaně cílům společnosi.
Kamil Kotraba – Bonami
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
139
TESTOVÉ OTÁZKY
Otestujte si získané znalosti z kapitoly č. 10. Pouze jedna odpověď je správná.
Správné odpovědi naleznete na konci kapitoly.
1. Metrika, která vyjadřuje, kolik procent uživatelů dokončí požadovanou akci, se
nazývá?
a) Konverzní poměr.
b) Remarketing.
c) Net promoter score.
2. Reklamní formát, u kterého platíme za množství zobrazení, nazýváme:
a) PPC
b) PPV
c) PPT
3. V jakém prostředí se nejlépe šíří virální obsah?
a) Obsahové komunity.
b) Affiliate platformy.
c) Sociální sítě.
4. Snaha o získání nových zákazníků se nazývá:
a) Retenční kampaň.
b) Rekviziční kampaň.
c) Akviziční kampaň.
5. Jak se nazývají prováděcí faktory, které se používají k překlenutí propasti mezi
tím, co chce firma říct, a tím, co spotřebitel potřebuje slyšet?
a) Audit.
b) Kreativní strategie.
c) Unique Selling Proposition.
SHRNUTÍ KAPITOLY
Po prostudování kapitoly č. 10 byste měli umět:
• Vymezit pozici webu v integrované marketingového komunikaci firmy.
• Objasnit podstatu kreativních strategií.
• Chápat reklamní systémy PPC.
• Rozumět mechanismu remarketingu a retargetingu.
Propagace webové stránky
140
ODPOVĚDI NA TESTOVÉ OTÁZKY
1a, 2b, 3c, 4c, 5b
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
141
11 OPTIMALIZACE WEBOVÉ STRÁNKY PRO VYHLEDÁ-
VAČE
RYCHLÝ NÁHLED KAPITOLY
V této kapitole si ukážeme, jak fungují internetové vyhledávače. To, jak lidé dnes navštěvují
webové stránky, se po nástupu vyhledávačů změnilo. Často cesta zákazníka vede
právě přes vyhledávač a dohledatelnost webové stránky je tak velkou konkurenční výhodou.
Dohledatelnost se ale za poslední roky stále posouvá a webdesignéři a marketéři pracují
na optimalizaci webových stránek pro vyhledávače. Již nestačí mít v doménovém
jméně a v titulku klíčové slovo. SEO (optimalizace webové stránky pro vyhledavače) se
rozrostlo takovým způsobem, že na trhu existují konzultanti, kteří se věnují jen této oblasti.
U e-shopů je znalost základních taktik a faktorů, které pozici ve vyhledávání vylepšují
téměř otázkou přežití.
CÍLE KAPITOLY
• Popsat jak fungují vyhledávače jako je Google nebo Seznam.
• Představit faktory, které ovlivňují umístění stránky ve výsledku vyhledávání.
• Rozdělit tyto faktory na on-page a off-page.
• Pojmenovat způsoby, kterými lze tyto faktory ovlivnit ve prospěch dohledatelnosti
webové stránky.
KLÍČOVÁ SLOVA KAPITOLY
Vyhledávač, klíčová slova, SEO, on-page faktory, off-page faktory, longtail.
11.1Jak fungují vyhledávače
Vyhledávače hrají významnou roli jako zdroj návštěvnosti webové stránky. Podle studie
společnosti Yotpo (obrázek 66) je to druhý největší zdroj na základě dat z 65 milionů objednávek
zákazníků, v hodnotě 2 miliardy dolarů z 120 000 e-shopů.
Optimalizace webové stránky pro vyhledávače
142
Obrázek 66: Celosvětové zdroje návštěvnosti webových stránek
Zdroj: Webový portál Neil Patel [online] [vid. 17. ledna 2019]. Dostupné z https://neilpatel.com/blog/how-
to-increase-website-traffic-without-seo/
Abychom ale mohli naplno využít síly vyhledávačů, musíme si říct, jakým způsobem
fungují. Pro příklad sice využijeme nejpopulárnější vyhledávač Google, ale na podobném
principu fungují i ostatní jako například český Seznam.
Google při generování výsledků z webových stránek provádí tři základní kroky:75
PROCHÁZENÍ
Jako první krok je potřeba zjistit, jaké stránky jsou na webu k dispozici. Žádný centrální
registr všech webových stránek neexistuje, proto musí Google neustále vyhledávat nové
stránky a přidávat je do svého seznamu známých stránek. Tento proces objevování se nazývá
procházení.
O některých stránkách Google ví, protože už je v minulosti procházel. Jiné stránky Google
objeví následováním odkazu ze známé stránky na novou stránku. Další stránky objeví
pomocí seznamů stránek (tzv. map webů nebo souborů Sitemap), které vlastníci webů odešlou
do Googlu k procházení. Pokud používáte spravovaného webového hostitele, například
sužbu Wix nebo Blogger, může takový hostitel žádat Google o procházení aktualizovaných
nebo nových stránek, které vytvoříte.
75
Webový portál Google [online] [vid. 20. dubna 2019]. Dostupné z: https://support.google.com/web-
masters/answer/70897?hl=cs
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
143
Pokyny ke zlepšení procházení webu:
• V případě změn na jedné stránce můžete do Googlu odeslat jednotlivou adresu URL.
• Zajistěte, aby na stránku odkazovala jiná stránka, o které již Google ví. Upozorňujeme
však, že nebudeme následovat odkazy v reklamách, placené odkazy na jiných
webech, odkazy v komentářích ani jiné odkazy, které nejsou v souladu s pokyny
společnosti Google pro webmastery.
• Pokud Google žádáte o projití jen jedné stránky, měla by to být vaše domovská
stránka. Domovská stránka je pro Google nejdůležitější stránkou vašeho webu.
Chcete-li podpořit procházení celého webu, měla by domovská stránka (a všechny
stránky) obsahovat dobrý navigační systém odkazující na všechny důležité sekce a
stránky webu. Usnadní to orientaci uživatelům i Googlu.
INDEXOVÁNÍ
Po objevení stránky se Google snaží zjistit, o čem stránka je. Tento proces se nazývá
indexování. Google analyzuje obsah stránky, zařazuje do katalogu obrázky a videosoubory
vložené na stránce a dalšími způsoby se snaží stránce porozumět. Tyto informace se zapisují
do indexu Google, obrovské databáze uložené na mnoha a mnoha počítačích.
Pokyny ke zlepšení indexování stránek:
• Vytvářejte krátké a smysluplné názvy stránek.
• Používejte záhlaví stránek, která vyjadřují hlavní téma stránky.
• Sdělujte obsah pomocí textu, nikoliv pomocí obrázků. (Google některým obrázkům
a videím dokáže porozumět, ale ne tak dobře, jako rozumí textu. Videa a obrázky
přinejmenším popište pomocí alternativního textu a dalších vhodných atributů.)
ZOBRAZOVÁNÍ (A HODNOCENÍ)
Když uživatel zadá dotaz, Google se v indexu na základě mnoha faktorů pokusí najít
nejrelevantnější odpověď. Google se pokusí určit nejkvalitnější odpovědi a zohlednit i další
aspekty, které umožní nabídnout nejlepší uživatelský dojem a nejvhodnější odpověď, jako
je například umístění, jazyk a zařízení (počítač nebo telefon) uživatele. Na dotaz „opravny
jízdních kol“ by se zobrazily jiné odpovědi uživateli v Paříži a jiné uživateli v Hongkongu.
Google nepřijímá platby za vyšší hodnocení stránek. Hodnocení se provádí algoritmicky.
Pokyny ke zlepšení zobrazování a hodnocení:
• Zajistěte, aby se stránka načítala rychle a byla optimalizovaná pro mobily.
• Umístěte na stránku užitečný obsah a udržujte jej aktuální.
• Postupujte podle pokynů společnosti Google pro webmastery, které pomáhají zajistit
dobrý uživatelský dojem.
Návod
Návod
Návod
Optimalizace webové stránky pro vyhledávače
144
11.2Klíčová slova
Klíčové slovo (keyword) je slovo, které popisuje obsah na webové stránce. Je to výraz,
pro který chcete, aby byl web ve výsledku vyhledání. Takže když lidé hledají toto klíčové
slovo nebo frázi v Google nebo v jiných vyhledávačích, měli by najít vaši stránku v seznamu
výsledků. Když mluvíme o klíčových slovech, mnohokrát máme na mysli frázi
místo jednoho slova. Například „běžecké boty“ jsou keyword přesto, že je to spojení dvou
slov.
Jak jsme si vysvětlili výše, jsou to slova, která Google hledá na webových stránkách
v procesu procházení a následně s nimi pracuje ve fázi indexování tak, aby informace o
webech na celém světě kategorizoval do svých databází. Zadané dotazy uživatelů opět ve
formě textu, který může být totožný s klíčovým slovem, pak porovnává s těmito informacemi
a vyhodnocuje, jaké webové stránky budou pro uživatele nejrelevantnější.
Na webu bychom tedy na klíčová slova neměli zapomenout. Zároveň také jejich analýza
zajistí to, že budeme vkládat slova, které hledají uživatelé a ne ty které používáme my. Naši
zákazníci totiž mohou pojmenovat produkt úplně jinak, než si myslíme. Prvním krokem,
který nás nic nestojí, je podívat se na související dotazy s hledaným klíčovým slovem dole
pod výsledky vyhledávání. Sám Google nám tak poodkryje malinkou část toho, co lidé
hledají. Dále také můžeme nakouknout na klíčová slova pomocí našeptávače při psaní po-
žadavku.
Obrázek 67: Související dotazy na Google
Zdroj: Webový portál Google [online] [vid. 5. dubna 2019]. Dostupné z: http://www.google.com/
Náš konkrétní příklad ukazuje, že pojmenovat pánev na vajíčka „4 oko“, jak je na některých
e-shopech běžné, nemusí být úplně dobrý nápad. Zákazníci do Googlu totiž píší
spíše „pánev na volská oka“. A podívejte se ještě znovu na obrázek č. 67. Co takhle napsat
na webovou stránku krátký článek o tom, jaké jsou „nejlepší pánve na trhu“, do kterého
umístíme odkazy na produkty, které budeme srovnávat. Lidé o tyto informace mají zájem!
Pro komplexnější a přesnější analýzu klíčových slov už ale bude nutné použít profesionální
nástroj jako je například Collabim. Tyto nástroje umožní klíčová slova monitorovat,
jednoduše zadávat požadavky a vytvářet profesionální reporty, které pomáhají marketérům
i webmasterům upravovat obsah, aby souhlasil s tím, po čem lidé touží a prostřednictvím
vyhledávače se to na internetu snaží najít.
Definice
Návod
Návod
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
145
Obrázek 68: Výsledek analýzy klíčových slov v nástroji Collabim
Zdroj: Webový portál Collabim [online] [vid. 5. dubna 2019]. Dostupné z: https://napoveda.colla-
bim.cz/collabim/klicova-slova
Volba klíčových slov záleží především na celkové SEO strategii. Někdy se vyplatí soustředit
všechno úsilí na jedno hodně vyhledávané klíčové slovo – i přes jeho konkurenčnost.
V jiných případech může být lepší strategií optimalizace webu na větší množství málo hledaných
slov.76
PRO ZÁJEMCE
LONGTAIL
Nastavení webu nebo kampaně na větší množství méně hledaných slov nazýváme strategii
Longtail. Výborně jej popisuje Petra Mikulášková na svém blogu.77
Longtail (obrázek 69), v přeložení „dlouhý chvost“, je pojmenování pro slova a fráze,
které nejsou do vyhledávačů zadávány často, ale přesto jsou považovány za klíčové. Jsou
to konkrétnější výrazy, které sice nepřilákají tolik lidi zadávající obecné výrazy, ale přivádí
na e-shop zákazníky, kteří už jsou více nakloněni nákupnímu rozhodnutí. Hledají konkrétní
produkt, službu či odpověď na otázku.
Spousta lidí vám do vyhledávače napíše obecné slovo, například „skříň“, ale řada z nich
zkrátka si jen prohlíží zboží a rozmýšlí se, jestli si vůbec novou skříň pořídí. Záměr člověka,
který hledá pomocí této fráze, není jednoznačný. Možná hledá typy skříní, možná hledá
návod na sestavení skříně, možná jen shání obrázky, možná hledá něco jiného.
Druhou skupinu tvoří lidé, kteří zadají do vyhledávače například „prosklená vestavěná
skříň dekor olše“, a to je to, čemu se říká konkrétní slovo a tvoří zadní výsek longtailu. Je
řešením, jak přivést na web takové zákazníky, kteří přesně vědí, co chtějí, a u nichž je
šance, že opravdu nakoupí, mnohonásobně vyšší.
76
Webový portál Adaptic [online] [vid. 5. dubna 2019]. Dostupné z: https://www.adaptic.cz/znalosti/slovni-
cek/klicove-slovo/
77
Webový portál Petra Mikulášková [online] [vid. 9. dubna 2019]. Dostupné z: https://www.petramikulas-
kova.cz/2013/07/co-je-to-longtail/
Optimalizace webové stránky pro vyhledávače
146
Budete-li na stránkách používat tato konkrétní klíčová slova, nejen že zacílíte více na
potenciální nakupující, ale také zvyšujete efektivnost vašeho odkazu ve výsledcích hledání.
Toho v případě užívání obecných klíčových slov (zmiňování skříň) dosáhnete velmi těžce.
Jsou vysoce konkurenční, protože je používá každý. Dosáhnout lepších pozic ve výsledcích
hledání v případě obecných klíčových slov je náročné a mnohdy nemožné.
Obrázek 69: Strategie Longtail
Zdroj: Webový portál Petra Mikulášková [online] [vid. 9. dubna 2019]. Dostupné z: https://www.petrami-
kulaskova.cz/2013/07/co-je-to-longtail/
Až si budete dělat analýzu klíčových slov, tak se zaměřujte na konkrétnější výrazy s
nějakým parametrem, značkou, konkrétní funkcí. Zákazník při používání těchto slov není
v rozhodovacím procesu a většinou ví, co chce. Usilujte o to v rámci SEO – buďte snadno
k nalezení právě pro takové, již rozhodnuté nakupující, protože zde je návratnost a šance
na objednávku největší.
11.3Optimalizace webu pro vyhledávače (SEO)
SEO je proces ovlivňování viditelnosti webu nebo stránky v neplacené části výsledků
internetového vyhledávače. Obecně řečeno, čím výše a čím častěji se web objevuje ve výsledcích
vyhledávače, tím více návštěvníků web může z internetového vyhledávače získat.
SEO může cílit na různé typy hledání včetně obrázků, lokálního hledání, videí, akademických
informací, novinek nebo užšího hledání v specifických oborech.78
78
Webový portál Pavel Ungr, seo konzultant [online] [vid. 1. února 2019]. Dostupné z: https://blog.bloxx-
ter.cz/definice-co-je-seo/
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
147
SEO je nástroj online marketingu, a proto nemá jednoznačně definovaný cíl. Jako nástroj
ho můžete použít mnoha různými způsoby. Pár příkladů:79
• Přivádění návštěvnosti
• Snížení míry odchodu ze stránek
• Snížení nákladů na zákaznickou podporu
• Zlepšení viditelnosti značky na internetu
• SERM (Search Engine Reputation Management – Online Reputation Management)
• Zvýšení konverzního poměru
11.4Faktory ovlivňující výsledky vyhledávání
Tabulka 3: Pět nejdůležitějších faktorů SEO
Faktor Typ
Klíčové slovo použito kdekoliv v tagu <title> 79% 75% On-page s keywords
Anchor text z externích odkazů zaměřený na
klíčová slova
73% 77%
Link popularity
Doména vyloučena z Google/Seznam indexu
kvůli spamu
73% 70%
Externí odkazy
Existence rozsáhlého, unikátního obsahu
stránky
65% 74%
On-page bez
keywords
Klíčové slovo použito jako první slovo v tagu
<title>
71% 67%
On-page s keywords
Zdroj: Webový portál SEOfaktory [online] [vid. 5. dubna 2019]. Dostupné z: http://www.seofaktory.cz/
Tyto faktory se dělí na dvě základní skupiny: on-page a off-page. Jak už název napovídá,
off-page faktory souvisí s propojením stránky s dalšími v síti internet. On-page faktory
jsou pak ty, které jsou přímo na dané webové stránce čili v HTML kódu stránky80
a
patří sem:
• Titulek
o Titulek stránky by měl obsahovat informaci o obsahu zvolené stránky.
Titulek by rozhodně neměl být stejný pro celý web, ale unikátní pro každou
stránku webu.
o Zápis titulku v HTML kódu: <title>Titulek stránky</title>
• Meta description
o Popisek stránky by měl obsahovat krátkou informaci o obsahu stránky.
Ani meta description by neměl být pro celý web stejný.
o Zápis titulku v HTML kódu: <meta name="description" content="Popisek
stránky" />
79
Webový portál Pavel Ungr, seo konzultant [online] [vid. 1. února 2019]. Dostupné z: https://blog.bloxx-
ter.cz/definice-co-je-seo/
80
Webový portál Optimal Marketing [online] [vid. 1. února 2019]. Dostupné z: https://www.optimal-mar-
keting.cz/slovnicek/on-page-faktory
Optimalizace webové stránky pro vyhledávače
148
• Nadpisy stránky
o Zápis nadpisu nejvyšší úrovně v HTML kódu: <h1>Nadpis stránky</h1>
o Zápis nadpisu druhé úrovně v HTML kódu: <h2>Podnadpis</h2>
• Zvýrazněný text na stránce
o Zápis zvýrazněného textu v HTML kódu: <strong>zvýrazněný
text</strong>
• Alternativní popis obrázku
o Běžné fulltextové vyhledávače nedovedou rozpoznat co je na obrázku.
Podobně jako nevidomí uživatelé však dokáže pracovat s alternativním
popisem obrázku.
o Zápis alternativního popisu v HTML kódu: <img src="foto.jpg" alt="alternativní
popis obrázku">
• Text stránky
o Klíčová slova by měla být ve vhodném poměru obsažena i v běžném
textu stránky.
• URL adresa stránky
o Vyhledávače, stejně jako uživatelé, dávají přednost jednoduchým a neměnným
URL adresám.
o Vhodná URL adresa:
▪ http://www.firma.cz/nazev-stranky/
o Nevhodná URL adresa:
▪ http://www.firma.cz/cla-
nek.php?&id=78652&lang=cs&user=e006c9aea5026301e7b3ff
09e9aca2cf
PRO ZÁJEMCE
Pokud se chcete sami podívat na to, jak jsou na jednotlivých stránkách zapsány titulky,
meta popisky a další informace pro SEO je možné zobrazit v prohlížeči HTML kód. V Google
chrome stačí kliknout pravým tlačítkem myši a vybrat „prozkoumat“ nebo „zobrazit
zdrojový kód stránky“ nebo použít klávesovou zkratku Ctrl+Shift+I. V Mozzila Firefox
pak také pravým tlačítkem ale zvolíme „prozkoumat prvek“ nebo „zobrazit zdrojový kód
stránky“.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
149
Obrázek 70: HTML kód titulku a metapopisku
Zdroj: Webový portál Alza [online] [vid. 9. dubna 2019]. Dostupné z: www.alza.cz
Na ukázce vidíme, jak se titulek a metapopisek následně zobrazuje ve výsledcích vyhledávání
v Googlu. Metadata tvoří titulek webové stránky (title), popisek pro vyhledávače
(meta descriptions), popisy obrázků (alt), videí, produktů.
On-page faktory můžeme ještě dále dělit na několik podskupin. Jedny skupina souvisí
s užitím klíčových slov (viz kapitola 11.2), další se statistikou Link Popularity. Ta udává
množství a kvalitu odkazů, které vedou na stránky mimo web (označují se taky jako zpětné
odkazy). Vyhledávače tím hodnotí popularitu. Předpokládají, že na kvalitní stránky povede
více externích zpětných odkazů.
Tabulka 4: Další důležité faktory z kategorie klíčových slov
On-page faktory s klíčovými slovy
Klíčové slovo použito kdekoli v tagu nadpisu <h1> 53% 49%
Klíčové slovo použito v názvu domény (např. www.klicoves-
lovo.cz)
50% 45%
Klíčové slovo použito jako první slovo/a v tagu nadpisu <h1> 51% 42%
Klíčové slovo použito v anchor textu interního odkazu na
stránce
46% 45%
Klíčové slovo použito v anchor textu externího odkazu na
stránce
43% 46%
Zdroj: Webový portál SEOfaktory [online] [vid. 5. dubna 2019]. Dostupné z: http://www.seofaktory.cz/
Optimalizace webové stránky pro vyhledávače
150
Tabulka 5: Další důležité faktory z kategorie „Link popularity“ stránky
On-page faktory s klíčovými slovy
Diverzifikace zdrojů odkazů (odkazy z mnoha unikátních do-
mén)
62% 71%
Anchor text81
z interních odkazů zaměřený na klíčová slova 61% 57%
Celková Link popularity založená na algoritmu typu Page-
Rank
59% 58%
Link popularity externích odkazů (množství/kvalita externích
odkazů)
51% 62%
Specifičnost obsahu / zaměření zdrojů externích odkazů (zda
externí odkazy na stránku vedou z obsahově souvisejících
stránek)
35% 57%
Zdroj: Webový portál SEOfaktory [online] [vid. 5. dubna 2019]. Dostupné z: http://www.seofaktory.cz/
Link popularity neboli odkazová popularita vychází z metriky PageRank. To je číslo,
které si Google přiřazuje ke každé stránce (přesněji řečeno ke každému URL). Vyjadřuje
něco jako věrohodnost nebo důležitost stránky. Někdy se píše zvlášť jako "Page Rank" a
zkracuje se do zkratky PR. Pagerank v klasickém pojetí dosahuje hodnot od nuly do jedné.
Google si Page Rank počítá (zjednodušeně řečeno) podle toho, kolik a jak důležitých stránek
na tu počítanou stránku odkazuje.82
TESTOVÉ OTÁZKY
Otestujte si získané znalosti z kapitoly č. 11. Pouze jedna odpověď je správná.
Správné odpovědi naleznete na konci kapitoly.
1. Z kterého zdroje z uvedených přichází na webové stránky celosvětově nejvíce ná-
vštěvníků?
a) Vyhledávání.
b) Sociální sítě.
c) Placené kampaně.
2. Jak se nazývá porces, kdy se bot Google snaží zjistit o čem webová stránka je?
a) Indexování.
b) Prohledávání.
c) Hodnocení.
3. Slova, která popisují obsah na webové stránce, se nazývají:
a) Hlídaná slova.
b) Pomocná slova.
c) Klíčová slova.
81
Anchor text je viditelný text hypertextového odkazu – obvykle podtržená (nebo barevně odlišená) část, na
kterou může uživatel kliknout, aby se dostal na místo specifikované URL adresou.
82
Definice
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
151
4. Který z uvedených faktorů má pro dohledatelnost webu největší váhu?
a) Klíčové slovo použito kdekoliv v tagu <Title>.
b) Klíčové slovo použito v názvu domény.
c) Link popularity externích odkazů.
5. Která z uvedených vlastností SEO není pravdivá?
a) Snížení míry odchodu ze stránek.
b) Zvýšení nákladů na zákaznickou podporu.
c) Zlepšení viditelnosti značky na internetu.
SHRNUTÍ KAPITOLY
Po prostudování kapitoly č. 11 byste měli umět:
• Porozumět tomu, jak fungují vyhledávače.
• Co jsou klíčová slova a jak je k dohledatelnosti webu můžeme použít.
• Jaké jsou základní techniky optimalizace webu pro vyhledávače.
• Vyjmenovat nejdůležitější SEO faktory.
ODPOVĚDI NA TESTOVÉ OTÁZKY
1a, 2a, 3c, 4a, 5b
Základy webové analytiky
152
12 ZÁKLADY WEBOVÉ ANALYTIKY
RYCHLÝ NÁHLED KAPITOLY
Tato kapitola odhaluje souvislosti webové analytiky, což je disciplína, která je založena
na poznávání dat a formování informací z těchto dat. Jedná se především o zdroje návštěvnosti,
chování uživatelů na stránce a další aktivity, které následně marketéři využívají pro
své kampaně a webdesigneři pro iterativní zlepšování webové prezentace.
CÍLE KAPITOLY
• Ukázat, jak funguje Google Analytics.
• Naučit čtenáře základní metody a nástroje pro analýzu webu.
• Propojit data z provozu webu s reklamními kampaněmi.
• Vysvětlit na jakém principu funguje marketingový nástroj leady.
• Odkrýt možnosti analýzy rychlosti webové stránky.
KLÍČOVÁ SLOVA KAPITOLY
Návštěvnost webu, Google Analytics, UTM parametry, Leady, Analýza rychlosti webu.
12.1Propojení webové stránky s Google Analytics
Hlavní náplní webové analytiky je sběr, měření, analýza, reporting a interpretace dat
získaných z webu za účelem jejich dalšího využití. I když data o návštěvnosti nejrůznějších
webových serverů jsou sledována a hodnocena již řadu let, možnosti využití a interpretace
těchto dat byly dlouho omezené. Zlom přišel až v posledním desetiletí spolu s novými metodami
a nástroji, kterými lze tato data zpracovat a jejichž pomocí je lze také sofistikovaně
vyhodnocovat. Rozšířily se i způsoby, jak firmy mohou využít výstupy webové analytiky
pro lepší pochopení svého podnikání a pro optimalizaci svých webových stránek. Když zde
zmiňujeme optimalizaci, nemyslíme tím pouze SEO, na něž je často úspěšnost webu
chybně redukována, ale primárně hlubší pochopení návštěvníka, porozumění jeho chování
na webu a nalezení nejvýznamnějších bariér, bránících dosažení požadovaných výsledků.83
83
Webový portál IT Biz [online] [vid. 20. ledna 2019]. Dostupné z: https://www.itbiz.cz/clanky/webova-
analytika-v-praxi-1-prinosy-webove-analytiky
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
153
Výhody Google Analytics:84
• Google Analytics je poskytován zcela zdarma.
• Implementace je velice snadná a s návodem jí zvládne lehce každý.
• Pro plné používání Google Analytics nemusíte nic instalovat na váš počítač a k datům
se dostanete odkudkoli, kde máte připojení na internet.
• Je plně podporován ve více než 30 jazykových mutací včetně češtiny a slovenštiny.
• Google Analytics se dá rychle naučit, není to žádný složitý systém.
• Nástroj dokáže poskytnout dostačující množství dat, která vám umožní zjistit, co se
na vašem webu odehrává.
• Google Analytics má velice intuitivní navigaci a příjemné grafické zpracování
včetně vykreslování velkého typu přehledných grafů.
12.2UTM parametry
UTM parametry se používají pro správné měření výsledků kampaní v Google Analytics.
Když přijde návštěvník na web, Google Analytics se mu pokusí přiřadit zdroj návštěvy. V
prvním kroku zkontrolují, zda nepřišel z Google Ads reklamy. Pokud ne, ve druhém kroku
v URL hledají měřící parametry, mj. i UTM. Pokud by v URL nebyly žádné měřící parametry,
v dalším kroku se Google Analytics podívají na odkazující zdroj. A právě tady se
snadno smíchají placené a neplacené návštěvy, protože v Google Analytics mohou mít
shodný zdroj / médium identifikátor. Seznam nebo Sklik, bez UTM to Google Analytics
nepoznají a obě návštěvy zařadí do jedné kolonky. Pokud se potom budete snažit rozklíčovat,
které návštěvy přišly z neplaceného vyhledávání a které z placených Sklik reklam,
budete mít problém.85
UTM parametry mají zpravidla tyto vlastnosti:86
• utm_source = název zdroje (název webu, ze kterého odkaz vede)
• utm_medium = název média = druh marketingového kanálu (cpc = placené vyhledávání,
organic = neplacené vyhledávání, referral = odkaz, atp.)
• utm_campaign = kampaň = název kampaně (např. v Skliku) nebo jiné odlišení (např.
datum příspěvku na Facebooku, nebo odeslání newsletteru)
• utm_content = název reklamy = další podúroveň, může být např. název reklamní
sestavy v PPC reklamě
• utm_term = klíčové slovo = další podúroveň, může být např. klíčové slovo v PPC
reklamě
84
Webový portál Jak meřit web [online] [vid. 14. března 2019]. Dostupné z: https://www.jakme-
ritweb.cz/proc-merit-web/proc-pouzit-google-analytics/
85
Webový portál Marketing PPC [online] [vid. 20. ledna 2019]. Dostupné z: https://www.marketing-
ppc.cz/casto-kladene-dotazy-k-ppc-marketingu/co-to-jsou-utm-parametry-a-k-cemu-slouzi/
86
Webový portál Lukáš Krejča [online] [vid. 20. ledna 2019]. Dostupné z: http://www.lukask.cz/utm-para-
metry/
Definice
Základy webové analytiky
154
Takže aby bylo možné odlišit, které návštěvy pochází z Sklik reklam, Facebook reklam,
newsletterů a dalších marketingových aktivit, je potřeba k cílové URL přidat parametry
typu utm_source=facebook.com&utm_medium=ads. Tento konkrétní příklad pro Facebook
reklamu umožní v Google Analytics odlišit placené a neplacené návštěvy, protože
placené návštěvy budou mít zdroj / médium facebook.com / ads a neplacené facebook.com
/ referral. UTM parametry vám pomohou sledovat statistiky většiny kampaní. GA často
netuší, odkud uživatelé na web přišli. Někdy sice umí přiřadit zdroj, ale nerozeznáte placené
a neplacené návštěvy. Proto je potřeba ve všech kampaních mimo Google Ads používat
UTM parametry.87
Neexistuje jednotný postup, jak UTM parametry zapisovat, ale logicky je nutné udržet
dlouhodobě stejný systém. To radí i Lukáš Krejča: Pokud jednou pojmenujete odkaz v
Skliku sklik / ppc a podruhé seznam / cpc, tak těžko můžete sledovat nějaký trend v návštěvnosti.
Doporučuji si hned ze začátku vytvořit tabulku (viz obrázek 71) podobnou této,
kde budete mít zaznamenáno, jak své odkazy označujete. Nasdílejte ji kolegům a dodržujte
ji.88
Obrázek 71: Ukázkové nastavení systému pro zápis UTM parametrů
Webový portál Lukáš Krejča [online] [vid. 20. ledna 2019]. Dostupné z: http://www.lukask.cz/utm-parame-
try/
Pište UTM parametry raději bez diakritiky, vyhnete se chybám. Pozor také na velikost
písmen, malá a velká bývají interpretovány různě.
87
Webový portál Marketing PPC [online] [vid. 20. ledna 2019]. Dostupné z: https://www.marketing-
ppc.cz/casto-kladene-dotazy-k-ppc-marketingu/co-to-jsou-utm-parametry-a-k-cemu-slouzi/
88
Webový portál Lukáš Krejča [online] [vid. 20. ledna 2019]. Dostupné z: http://www.lukask.cz/utm-para-
metry/
Návod
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
155
PRO ZÁJEMCE
Časté chyby, aneb na co si dát pozor:89
Označujete PPC reklamu na Seznamu jako sklik/cpc. Není to nijak závažná chyba a
odkazy si můžete označovat, jak chcete, ale ztrácíte zde logiku utm_source=název webu,
což je takový začátek UTM chaosu. Nemůžete pak také např. porovnat výkonnost Googlu
a Seznamu bez ohledu na médium.
Označujete reklamu na Facebooku jako facebook/cpc. CPC ale znamená (aspoň pro Google
Analytics) placenu návštěvnost z vyhledávání. Pokud do toho budete míchat Facebook,
nemůžete použít všechny automatické segmenty a přehledy.
Pozor na stránky s výsledky vyhledávání. Pokud např. odkazujete na www.lukask.cz/?q=hledani,
tak už nemůžete UTM parametry připojit pomocí?, ale musíte využít
&.
Měníte UTM parametry, jak se vám zlíbí – ještě jednou – v UTM je nutné mít pořádek
a hlídat si překlepy. Pokud budete mít jednou facebook, podruhé facebok, a potřetí Facebook,
máte tři různé zdroje a v analytice pěkný bordel.
12.3Leady
Leady.cz identifikuje firemní návštěvníky webu. Řekne, jaká firma přistoupila na váš
web, co ji zajímalo, a doplní další informace jako obrat, počet zaměstnanců, obor, adresu a
ověřené kontakty. Umožňuje uživatelům identifikovat nové klienty, více vytěžovat ty stávající
a monitorovat své kampaně či online aktivity. Leady.cz je obchodní a marketingový
nástroj vhodný pro jakoukoliv B2B firmu, která má aktivní obchod nebo marketing. Na
rozdíl od ostatních nástrojů neříká jen počet návštěv webu, ale i kdo konkrétně ti návštěvníci
jsou.90
89
Webový portál Lukáš Krejča [online] [vid. 20. ledna 2019]. Dostupné z: http://www.lukask.cz/utm-para-
metry/
90
Webový portál Lupa [online] [vid. 27. ledna 2019]. Dostupné z: https://www.lupa.cz/clanky/leady-cz/
Definice
Základy webové analytiky
156
Co aplikace Leady umí:91
• Zjistit, jestli návštěvník webu přichází z nějaké firmy. Leady.cz umožňují identifikovat
cca polovinu firemních návštěv.
• Identifikovat, o jakou firmu jde, její název, IČ, odvětví, obrat, počet zaměstnanců a
kontaktní osobu.
• Poslat údaje o identifikované návštěvě do Google Analytics a propojit tak data o
firmách s online marketingovými daty a daty o chování prospektů na webu. Díky
tomu můžete zjistit, z jaké kampaně firma přišla, nebo jak se pro vás relevantní tržní
segment firem chová na vašem webu v porovnání s ostatními návštěvami.
• Propojit data o firemní návštěvnosti z Google Analytics s vaším CRM systémem a
dát tak obchodníkům tipy na to, o jaké produkty a služby se konkrétní firma na vašem
webu zajímala a marketérům zase to, zda jejich marketingové kampaně vedou
k uzavírání skutečných obchodů.
• Cílit remarketingové kampaně v Google Adwords pouze na firmy, které jsou pro vás
relevantní (ať už podle obratu, odvětví nebo počtu zaměstnanců).
Nástroj jde za hranici běžné analytiky díky předchozí znalosti o návštěvnících. Propojením
zdroje návštěvy, chování na webu a CRM databáze tak získává firma na B2B trhu
velmi silný nástroj, jak optimalizovat své obchodní činnosti, a to díky návštěvě potenciálního
zákazníka (partnera) na webové stránce.
12.4Analýza rychlosti webu
Kromě chování zákazníků a uživatelů webu je důležité sledovat také, jakou rychlostí se
web načítá a jaké možné problémy se na něm z hlediska svižnosti vyskytují. Víme, že každá
sekunda navíc uživatele odradí a raději z webu odejde. Statistiky jsou v tomto neúprosné.
Jak firmy, tak marketingové agentury, které vytváří online kampaně, by měly u svých webových
stránek a klientů vždy před spuštěním propagace prověřit, zda nebudou vodit zákazníky
na příliš pomalý web a tím dramaticky sníží efektivitu vynaložených prostředků
na kampaně. Pojďme tedy měřit, jak jsme na tom. K tomuto účelu poslouží opět nástroj
společnosti Google a tím je PageSpeed Insights.
91
Webový portál Martin Kružík [online] [vid. 7. března 2019]. Dostupné z: https://www.martinkruzik.cz/le-
ady-cz-identifikace-firem/
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
157
Obrázek 72: Náhled domovské stránky nástroje PageSpeed Insights
Zdroj: Webový portál PageSpeed Insights [online] [vid. 20. února 2019]. Dostupné z: https://developers.go-
ogle.com/speed/pagespeed/insights/
Po zadání vámi vybrané webové stránky a stisknutí tlačítka analyzovat (viz obrázek 72)
dostanete report rychlosti na mobilním zařízení i na desktopu (počítači). Co je u tohoto
nástroje velmi důležité, jsou také podrobné výsledky, které umožní prohlédnout si hlavní
příčiny zpomalení načítání. Někdy to může být taková banalita jako je špatná komprese
fotografií, jindy zase hlubší problém s CSS styly, které jsou u webu použity. V každém
případě jsou tato data cenným vstupem pro zlepšování rychlosti načítání webové stránky.
PŘÍPADOVÁ STUDIE
ANALÝZY NÁVŠTĚVNOSTI, AKVIZICE A CHOVÁNÍ ZÁKAZNÍKŮ NA WEBU
Ať už vlastníte webovou stránku nebo e-shop, tak vás vždy bude zajímat, zda na něj
někdo chodí. Historicky stačilo na web nasadit jednoduché počítadlo typu Toplist, které
vám ukazovalo přibližnou návštěvnost webu a více se neřešilo. Doba však samozřejmě
postoupila a postupně všechny majitele stránek zajímá nejen návštěvnost, ale i odkud návštěvnici
přišli, co na webu dělají, zda konvertují apod. Odpověď na tyto otázky už jednoduché
počítadla nedají, a proto jsou zde sofistikovanějším nástroje pro analýzu návštěv-
nosti.
Nejrozšířenějším a nejpoužívanějším nástroj pro analýzu návštěvnosti webu/e-shopu je
bezesporu Google Analytics. Tento nástroj Google poskytuje zdarma. Jeho rozhrání je
velmi jednoduché a intuitivní. Nabízí nám možnosti analyzovat návštěvnost webu, kdy
díky němu jsme schopni odhalit, odkud návštěvníci na náš web přišli a zároveň ukazuje,
které stránky navštívili, jak dlouho na webu byli atd.
Základy webové analytiky
158
Implementace
Implementace je opět relativně jednoduchá. Pro každý web Google Analytics vygeneruje
javascriptový kód s unikátním ID. Tento měřící kód je poté potřeba implementovat na
všechny stránky webové prezentace. V případě, že vlastníte e-shop rozšiřuje se implementace
o další měřící kód, který se vkládá do objednávky.
Obrázek 73: Ukázka Google Analytics měřícího kódu
Zdroj: soukromý archiv autora
• Analýza návštěvnosti/návštěvníků
Díky Google Analytics jsme schopni zjistit velmi podrobné informace o návštěvnících
– zda se jedná o nové nebo vracející se návštěvníky, jestli přišli z mobilního telefonu nebo
počítače, jaký použili prohlížeč, operační systém, případně z jakého města se na náš web
dívali. Jsme dokonce schopni analyzovat i demografické údaje, které Google má nebo odhaduje
dle chování uživatele.
Obrázek 74: Informace o návštěvnících
Zdroj: soukromý archiv autora
Google Analytics nám dá odpověď na většinu otázek týkajících se návštěvníků. Navíc
máme k dispozici i přehled v reálném čase.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
159
Chování na webu
Do jisté míry jsme schopni zjistit i to, co na webu uživatele dělají. Především pak to,
které stránky na webu si prohlédli, jaká byla vstupní stránka, která stránka byla výstupní,
co na webu hledali (v případě že použili vyhledávání), případně jaká byla průměrná doba
strávená na stránce.
Pro hlubší analýzu chování návštěvníků pak slouží sofistikovanější nástroje, které dokážou
sledovat pohyb návštěvníka na webu a natáčet z toho video záznamy.
• Analýza akvizic
Asi nejdůležitější přehled v Google Analytics je přehled akvizic dle zdroje a média. Dávám
nám to informaci o tom, odkud návštěvníci přišli, a v případě správného nastavení
cílů, i informaci o konverzích a obratech.
Zdroje návštěvnosti
Jednotlivé zdroje návštěvnosti, respektive média, ze kterých mohou návštěvníci přicházet,
můžeme rozdělit do 4 skupin:
• Direct – neboli přímá návštěvnost. Tato návštěvnost vznikne v případě, že návštěvník
zadá webovou stránku přímo do prohlížeče nebo ji navštíví skrze uloženou záložku
v prohlížeči. Do této kategorie spadnou i návštěvy, u kterých Google nerozpozná
zdroj.
• Organic Search – organická (neplacená) návštěvnost. Jedná se o návštěvníky, kteří
přišli skrze fulltextové vyhledávače (typicky Seznam a Google). Pokud správně neoznačíme
URL adresy v reklamě, tak bude do organické návštěvnosti spadat i placená
reklama. Google rozpozná většinu světových vyhledávačů.
• Referral – návštěvnost z odkazujících stránek. Zde se řadí velké spektrum zdrojů a
spadá sem například i Facebook, srovnávače zboží atd. Opět záleží, jak si správně
označkujeme odkazy.
• Kampaně a další zdroje – zde můžeme zahrnout všechny kampaně, které si předem
správně označíme. Spadat sem bude např. placená reklama, e-mail marketing apod.
Značení kampaní – UTM parametry
K tomu, aby Google Analytics dokázal zařadit například placenou návštěvnost pod
správný zdroj návštěvnosti, je potřeba správně označit odkazy v reklamě. Slouží k tomu
tzv. UTM parametry, kterých je celkově 5:
• utm_source
• utm_medium
• utm_campaign
• utm_content
• utm_term
Základy webové analytiky
160
Tyto parametry je pak potřeba doplnit do URL adresy v tomto tvaru:
https://example.com?utm_source=sklik&utm_medium=cpc&utm_campaign=leto.
Příklad využití
Jsme e-shop a na klienty pravidelně posíláme newslettery. Chceme si vyhodnotit, zda je
pro nás tento kanál rentabilní. Abychom mohli přesně odhalit návštěvnost z newsletterů je
potřeba každý odkaz v newsletteru doplnit o UTM parametry. Odkaz pak bude vypadat
například takto: https://test.cz?utm_source=newsletter&utm_medium=e-mail&utm_cam-
paign=01-01-2019
Díky tomu se poté v Google Analytics objeví zdroj „newsletter / e-mail“ (viz. níže).
Následně můžeme přesněji vyhodnotit všechny data týkající se newsletterů – od návštěvnosti,
až po prodeje.
Přehled zdrojů návštěvnosti v Google Analytics poté vypadá takto:
Obrázek 75: Přehled zdrojů návštěvnosti
Zdroj: soukromý archiv autora
První sloupec představuje zdroj / médium, odkud návštěvník přišel. Pro každý zdroj
návštěvnosti poté máte informace o návštěvnosti, míře okamžitého opuštění atd. a v případě
e-shopu i o objednávkách a tržbách. Velmi snadno pak odhalíte, které zdroje se Vám vyplácí
více a které naopak méně.
Cíle
Mimo měření transakcí, je pak možné pro každý web nastavit i vlastní cíle. Ty se nastavují
například na základě toho, zda návštěvník navštívil konkrétní stránku webu, nebo strávil
na webu určitý čas, případně navštívil stanovený počet stránek. Měřit jde vše, záleží jen
na tom, jaké cíle si stanovíme.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
161
Vlastní přehledy
Pokud by nám nestačily předdefinované přehledy, je možné si připravit také vlastní přehledy
a různě kombinovat data, které nám Google Analytics poskytuje. Také je možné si
vybrat předem vytvořené přehledy jiných uživatelů, které jsou veřejně dostupné v galerii.
• Shrnutí
Jak bylo popsáno výše, tak Google Analytics je mocný nástroj, který nám dává k dispozici
velké množství dat. Obecně je Google Analytics dostačující pro většinu uživatelů. Jistá
omezení samozřejmě má, ale běžný uživatel je nikdy nepocítí. Pro náročnější uživatele a
především velké weby je tady pak služba Analytics 360, která nabízí - oproti klasickému
Google Analyitcs – například atribuční model na základě dat, možnost exportu do nástroje
BigQuery a mnoho dalšího.
Tak jako tak je Google Analytics pouze nástroj a důležité je se naučit data správně interpretovat,
abychom s nimi byli schopni dále pracovat a mohli nám dále pomáhat jak
v rozvoji našeho webu, tak v samotném byznyse. Obecně je webová analytika obor, který
je velmi důležitý a díky kterému máme data o chování návštěvníků na webových stránkách.
Radim Vašíček - AdVisio
TESTOVÉ OTÁZKY
Otestujte si získané znalosti z kapitoly č. 12. Pouze jedna odpověď je správná.
Správné odpovědi naleznete na konci kapitoly.
1. Návštěvnost z odkazujících stránek najdeme v Google Analytics pod označením:
a) Direct.
b) Referal.
c) Organic.
2. Návštěvnost z vyhledávačů najdeme v Google Analytics pod označením:
a) Organic.
b) Direct.
c) Referal.
3. K čemu slouží UTM parametr v URL webové stránky?
a) Pro přesnější měření a organizaci kampaní v Google Analytics.
b) K budovaní zpětných odkazů na internetu.
c) K nastavování cílení na uživatele, kteří opustili nákupní košík.
4. Systém na identifikaci firemních návštěvníků webové stránky se jmenuje:
a) Bitly.
b) Mailchimp.
c) Leady.
Základy webové analytiky
162
5. Jaký nástroj měří rychlost webové stránky?
a) Google Analytics.
b) PageSpeed Insights.
c) Lupa.cz.
SHRNUTÍ KAPITOLY
Po prostudování kapitoly č. 12 byste měli umět:
• Porozumět tomu, jak propojujeme webovou stránku s Google Analytics.
• Popsat co je UTM parametr a k čemu slouží při měření návštěvnosti webu.
• Vysvětlit, jak fungují leady a k čemu je používáme.
• Co je zásadním analytickým nástrojem pro měření rychlosti webové stránky.
ODPOVĚDI NA TESTOVÉ OTÁZKY
1b, 2a, 3a, 4c, 5b
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
163
LITERATURA
AAKER, D. and D. NORRIS, 1982. Characteristics of TV commercials perceived as informative.
Journal of Advertising Research, 22(2), 22-34. ISSN 0021-8499.
ARENI, C., 2003. The effects of structural and grammatical variables on persuasion: An
elaboration likelihood model perspective. Psychology & Marketing, 20(4), 349-375. ISSN
1520-6793.
BROWN, T. B., K. BUTTERS a S. PANDA, 2014. HTML5 Okamžitě. Brno: Computer
Press. ISBN 978-80-251-4296-7.
BYRON, D. L. a S. BROBACK, 2008. Blogy: publikuj a prosperuj. Praha: Grada Publishing.
ISBN 978-80-247-2064-7.
DAVIS, F. D., 1985. A Technology Acceptance Model for Empirically Testing New EndUser
Information Systems.
DAVIS, F. D., R. BAGOZZI and P. WARSHAW, 1989. User Acceptance of ComputerTechnology
- a Comparison of 2 Theoretical-Models. Management Science. 35(8), 982-
1003. ISSN 1526-5501.
DORST, C.H. and C.W.A.M. OVERVELD VAN, 2009. Typologies of design practice.
Philosophy of technology and engineering sciences. 9, 455-487. ISBN 978-0-444-51667-
1.
EGER, L., PETRTYL, J., KUNEŠOVÁ, H., MIČÍK, M. a M. PEŠKA, 2015. Marketing na
internetu. Plzeň: ZČU. ISBN 978-80-261-0573-2.
FABER, M. A. and J. D. MAYER, 2009. Resonance to archetypes in media: There's some
accounting for taste. Journal of Research in Personality, 43(3), 307-322. ISSN 0092-6566.
GINZBERG, M. J., 1981. Early Diagnosis of MIS Implementation Failure: Promising Results
and Unanswered Questions. Management Science, 27(4), 459-478. ISSN 1526-5501.
HALLIGAN, B. and D. SHAH, 2014. Inbound Marketing, Revised and Updated: Attract,
Engage, and Delight Customers Online. New Jersey: John Wiley & Sons. ISBN 978-1-
118-89665-5.
JOHAR, J. S. and J. SIRGY, 1991. Value-expressive versus utilitarian advertising appeals:
When and why to use which appeal. Journal of Advertising, 20(3), 23-33. ISSN 0091-3367.
KELLER, K. L., 2007. Strategické řízení značky. Praha: Grada Publishing. ISBN 978-80-
247-1481-3.
LASKEY, H. A., E. DAY and M. CRASK, 1989. Typology of main message strategies for
television commercials. Journal of Advertising, 18(1), 36-41. ISSN 0091-3367.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
164
LIN, J. CH. and H. LU, 2000. Towards an understanding of the behavioural intention to
use a web site. International Journal of Information Management, 20(3), 197-208. ISSN
0268-4012.
LUECKE, R., 2009. The innovator’s toolkit. Boston: Harvard Business Press. ISBN 978-
1422199909.
MACINNIS, D., C. MOORMAN and B. JAWORSKI, 1991. Enhancing and measuring
consumers’ motivation, opportunity and ability to process brand information. Journal of
Marketing, 55(4), 32-53. ISSN 0022-2429.
MARK, M. a C. S. PEARSON, 2012. Hrdina nebo psanec. Brno: Albatros Media. ISBN
978-80-265-0027-8.
MCMILLAN, S. J., J. S. HWANG and G. LEE, 2003. Effects of structural and perceptual
factors on attitudes toward the website. Journal of Advertising Research, 43(4), 400-409.
ISSN 0021-8499.
MIKULÁŠKOVÁ, P. a M. SEDLÁK, 2015. Jak vytvořit úspěšný a výdělečný internetový
obchod. Brno: Computer Press. ISBN 978-80-251-4383-4.
MULAČOVÁ, V. a P. MULAČ, 2013. Obchodní podnikání ve 21. století. Praha: Grada
Publishing. ISBN 978-80-247-4780-4.
OSBORN, T., 2017. Hello webdesign: design fundamentals and shortcuts for non-designers.
Toronto: Hellowebbooks. ISBN 978-0-9863659-4-2.
PELÁNEK, R., 2012. Programátorská cvičebnice. Brno: Computer Press. ISBN 978-80-
251-3751-2.
POWELL, T. A., 2004. Web design Kompletní průvodce. Brno: Computer Press. ISBN 80-
722-6949-6.
ŘEZÁČ, J., 2016. Web ostrý jako břitva. Brno: House of Řezáč. ISBN 978-80-270-0644-
1.
SOMMERVILLE, I., 2013. Softwarové inženýrství. Brno: Computer Press. ISBN 978-80-
251-3826-7.
SRPOVÁ, J., I. SVOBODOVÁ, P. SKOPAL a O. TOMÁŠ, 2011. Podnikatelský plan a
strategie. Praha: Grada Publishing, a.s. ISBN 80-247-7076-8.
STOKLASA, M., 2016. E-marketing: distanční studijní opora. Karviná: OPF SU. Bez
ISBN.
TUTEN, T. L. and M. SOLOMON, 2013. Social media marketing. Upper Saddle River,
NJ: Pearson. ISBN 978-15-264-2387-0.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
165
VENKATESH, V. and F. D. DAVIS, 1991. A critical assessment of potential measurement
biases in the technology acceptance model: three experiments. International Journal of
Human – Computer Studies, 45(1), 19-45. ISSN 1071-5819.
VLACH, R., 2017. Na volné noze. Brno: Jan Melvil Publishing. ISBN 978-80-7555-015-
6.
VYSEKALOVÁ, J. a J. MIKEŠ 2009. Image a firemní identita. Praha: Grada Publishing.
ISBN 978-80-247-2790-5.
WHEELER, A., 2013. Designing Brand Identity. 4th ed. Hoboken: John Wiley & Sons.
ISBN 978-1-118-09920-9.
YARROW, K. and J. O’DONNELL, 2010. Gen Buy: How Tweens, Teens and TwentySomethings
are Revolutionizing Retail. Journal of Consumer Marketing, 27(6), 564-565.
ISSN 0736-3761.
ZAICHKOWSKY, J., 1985. Measuring the involvement construct. Journal of Consumer
Research, 12(3), 341-352. ISSN 0093-5301.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
166
SHRNUTÍ STUDIJNÍ OPORY
Studijní opora Design a správa webové stránky měla za cíl přiblížit studentům praktických
studijních programů na Obchodně podnikatelké faktultě Slezské Univerzity proces tvorby
a správy webové prezentace firmy. Dozvěděli jsme se co je design v obecném pojetí, co
znamená webový design, co si představit pod pojmem interakční design. Dále jsme zasadili
webovou stránku do kontextu celkové marketingové komunikace na internetu a vysvětlili
jsme si modely chování zákazníků v tomto prostředí. Intenzivně jsme se věnovali procesům
tvorby třemi základními způsoby. Těmi jsou tvorba webu na míru, tvorba webu pomocí
šablony a redakčního systému a využití cloudového drag and drop editoru. Po prostudování
byste měli mít nyní také přehled o základních výzkumných metodách, které lze použít pro
pochopení potřeb a chování uživatelů webu. Víte již také jak pracovat v redakčním systému
a jaké základní cíle má obsah na webu. V závěru jsme odhalili možnosti propagace stránky
a její optimalizace a základy webové analytiky pomocí nástroje Google Analytics.
Již v úvodu jsme upozorňovali na nutnost sledovat online zdroje, na které v publikaci odkazujeme.
Svět internetu je dynamický a jeho souvislosti se mění velmi rychle. To, co je
nyní platné, relevantní a funkční nemusí za několik let platit. Proto věnujte pozornost webovým
stránkám, které se webovému designu, internetové propagaci a optimalizaci pro
vyhledávače věnují. Výborným zdrojem aktuálních trendů jsou také blogy agentur nebo
konzultantů a návody dodavatelů aplikací, software a platforem jako je Google, Seznam,
Collabim, Leady, Facebook a další. Stejně tak jsou důležitá nová vydání knih, které se problematikou
zabývají.
Martin Klepek, Veronika Braciníková - Design a správa webové stránky
167
PŘEHLED DOSTUPNÝCH IKON
Čas potřebný ke studiu Cíle kapitoly
Klíčová slova Nezapomeňte na odpočinek
Průvodce studiem Průvodce textem
Rychlý náhled Shrnutí
Tutoriály Definice
K zapamatování Případová studie
Řešená úloha Věta
Kontrolní otázka Korespondenční úkol
Odpovědi Otázky
Samostatný úkol Další zdroje
Pro zájemce Úkol k zamyšlení
Název: Design a správa webové stránky
Autor: Ing. Martin Klepek, Ph.D., Ing. Veronika Braciníková
Vydavatel: Slezská univerzita v Opavě
Obchodně podnikatelská fakulta v Karviné
Určeno: studentům SU OPF Karviná
Počet stran: 168
Recenzenti: doc. RNDr. Ing. Roman Šperka, Ph.D.
Mgr. Dáša Mendelová, PhD.
Tiskárna: Profi-tisk group s.r.o.
Náklad: 50 ks
ISBN 978-80-7510-375-8
Tato publikace neprošla jazykovou úpravou.