Vysoká škola ekonomická v Praze

Transkript

1 Vysoká škola ekonomická v Praze Fakulta informatiky a statistiky Katedra informačních technologií BAKALÁŘSKÁ PRÁCE ÚLOHA GRAFIKY V INTERNETOVÉ REKLAMĚ Vypracoval : Tomáš Nadrchal Vedoucí bakalářské práce : Ing. Zuzana Šedivá Oponent bakalářské práce : Ing. Helena Benáčanová, CSc. ROK: 2010

2 Prohl{šení Prohlašuji, že jsem bakal{řskou pr{ci na téma Úloha grafiky v internetové reklamě zpracoval samostatně a že jsem uvedl všechny použité prameny a literaturu, ze kterých jsem čerpal. V Praze dne podpis studenta

3 PODĚKOVÁNÍ Paní Ing. Zuzaně Šedivé, odbornici v oboru počítačov{ grafika a vedoucí mé bakal{řské pr{ce, za flexibilitu při volbě tématu, trpělivost a poskytnutí cenných rad v průběhu psaní této bakal{řské pr{ce. Svým blízkým za podporu, pochopení a trpělivost během měsíců, kdy tato pr{ce vznikala.

4 Abstrakt Tato bakal{řsk{ pr{ce popisuje z{kladní úlohy grafiky v reklamě a webové prezentaci společnosti. Autor se v ní teoreticky zaměřuje na z{kladní prvky webdesignu, psychologické působení tvarů a barev a na specifika internetové reklamy jako celku. Velk{ pozornost je d{na také webové prezentaci společnosti. N{sledně je poskytnut prostor pro mor{lní a technologické standardy on-line reklamy, kde se klade důraz především na vhodnost výběru grafických form{tů a optimalizaci webových str{nek. V pr{ci je č{st textu věnov{na psychologii chov{ní z{kazníka na internetu a způsobům testov{ní pr{ce uživatele s webovými str{nkami. V praktické č{sti pr{ce autor analyzuje vybrané webové prezentace společností, pro něž n{sledně vytv{ří řadu doporučení ke zlepšení své internetové kampaně.

5 Abstract This bachelor s work describes the basic functions of graphics in advertising and in a company s on-line presentation. The author focuses theoretically on the basic elements of web design, on the psychological impact of shapes and colors on costumer and on the particularity of on-line advertising itself. Great attention is paid to a company s on-line presentation. Subsequently, there is a space provided to the ethical and technological standards of on-line advertising in the bachelor s work, in which is great attention paid to the suitability of graphical formats and optimization of websites. A part of the work is devoted to the psychology of costumer s behavior on the internet and to the testing methods of user s work with a website. In the practical part of the bachelor s work the author is analyzing selected company s on-line presentations, for which he consecutively creates a list of recommendations for improvement of their internet campaigns.

6 Obsah 1. Úvod Cíle pr{ce, smysl cílů Metoda dosažení cíle Předpoklady a omezení pr{ce Struktura pr{ce Působení barev a tvarů na lidskou psychiku a jejich využití ve webové prezentaci Barvy a lidsk{ psychika v historii i současnosti Kombinace barev Psychologické působení tvarů Čtverec Trojúhelník Kruh Křivky a křivoplochy Typologie webové grafiky Identifikační grafika Struktur{lní grafika Navigační grafika Kontextov{ grafika Dekorační grafika Webové layouty Design vs. Přehlednost Příklady webových prezentací Alpine Pro Alza.cz Extra pr{dlo Hrej.cz Photoserver.eu Druhy reklamy a psychologie chov{ní z{kazníka. Oslovení z{kazníka Co je to reklama

7 3.2. Specifika internetové reklamy Vizu{lní komunikace Cílov{ skupina Druhy internetové reklamy Grafick{ a bannerov{ reklama Intextov{ reklama Přednostní výpisy Rich Media Reklamní y Kontextov{ reklama Webov{ prezentace společnosti Současné standardy webové reklamy a webdesignu Obecné standardy on-line reklamy Moderní standardy webových prezentací Grafické form{ty na internetu JPEG, Joint Photographics Experts Group GIF, Graphics Interchange Format PNG, Portable Network Graphic Format Form{t FLASH Další grafické form{ty Ve víru optimalizace Optimalizace rozlišení Webové prohlížeče Internetové vyhled{vače SEO Chov{ní z{kazníka na webu Jak čteme web Jak pracujeme s webem Internetem křížem kr{žem Kde se nach{zím? Analýza grafického zpracov{ní webových prezentací vybraných společností Metodika hodnocení

8 6.2. Seznam kritérií Grafick{ analýza str{nek - 40% Přehlednost a Použitelnost - 30% Technické zpracov{ní - 20% Marketingové využití webu - 10% Nike Analýza, č{st 1 Grafick{ analýza str{nek Analýza, č{st 2 Přehlednost a použitelnost Analýza, č{st 3 Technické zpracov{ní Analýza, č{st 4 Marketingové využití webu Z{věry vyvozené z analýzy a doporučení z nich vyplývající Adidas Analýza, č{st 1 Grafick{ analýza str{nek Analýza, č{st 2 Přehlednost a použitelnost Analýza, č{st 3 Technické zpracov{ní Analýza, č{st 4 Marketingové využití webu Z{věry vyvozené z analýzy a doporučení z nich vyplývající Srovn{ní webových prezentací společností Nike a Adidas Z{věr Terminologický slovník Zdroje Seznam použitých obr{zků Seznam použitých tabulek

9 1. Úvod Spolu s měnícími se technologiemi přich{zí také změna chov{ní a oček{v{ní z{kazníka, který internet čím d{l tím více využív{ k získ{ní informací, n{kupu či ke sdružov{ní se s př{teli přes dnes velmi popul{rní soci{lní sítě typu Facebook. Díky systému Fakulty informatiky a statistiky Vysoké školy ekonomické, který kombinuje informační technologie spolu s ekonomickými aspekty, se mi naskytla jedinečn{ příležitost k vytvoření bakal{řské pr{ce, jejíž z{klad sice spočív{ v informatice, obsahově se však dost{v{ do sfér marketingu, reklamy a psychologie chov{ní z{kazníka na internetu. Při výběru tématu mé bakal{řské pr{ce jsem se snažil zkombinovat své z{jmy a koníčky, aby mne její zpracov{v{ní obohatilo o nové vědomosti v oblastech, v nichž bych chtěl v životě d{le působit. Snažil jsem se propojit vizu{lní kr{sno, jež v pr{ci představuje počítačov{ grafika, s osobní fascinací internetem a moderními marketingovými metodami. Oba tyto faktory jsou velmi proměnlivé a nest{lé, zejména vývoj internetu a informačních technologií by se dal přirovnat ke křivce exponenci{lní funkce. Tento rozvoj s sebou přin{ší spoustu možností, ale z{leží na konkrétních jedincích a společnostech, zda a jak tyto možnosti využijí Cíle práce, smysl cílů Cílem mé bakal{řské pr{ce však není pouze strohé pops{ní aktu{lních možností internetové reklamy a způsobů při on-line propagaci použitých. Velkou č{st pr{ce zaměřuji na psychologii chov{ní uživatele internetu, jehož myšlenkové pochody se mnohdy zdaleka neshodují s představami webových designérů. 9

10 Cílem mé pr{ce je nejprve teoreticky nastínit grafické prvky využité v on-line propagaci, působení barev na psychiku uživatele, aktu{lně využívané způsoby internetové reklamy a zavedené technické standardy, v neposlední řadě také zmiňované psychologické hledisko při pr{ci s internetem. N{slednou praktickou analýzou vybraných dvou reprezentativních internetových prezentací společností poukazuji na chyby a nedostatky, které mohou při tvorbě propagačního webu vzniknout, a vyvozuji z nich doporučení pro vylepšení on-line prezentace společností Metoda dosažení cíle Postupy, jež využív{m k dosažení fin{lního výsledku, kombinují četné poznatky z odborné literatury s osobními zkušenostmi a také s aktu{lními zdroji z internetu. V z{věrečné analýze využív{m k hodnocení webových prezentací vybraných společností vlastní metodu na b{zi multikriteri{lního hodnocení, v níž vych{zím z obecně uzn{vaných postupů. Snažím se z{roveň kl{st velkou v{hu jak na grafické zpracov{ní webu, tak i na praktickou využitelnost a marketingový potenci{l vybrané kampaně Předpoklady a omezení práce Svou bakal{řskou pr{ci jsem zaměřil především na hodnocení grafických prvků v reklamě v internetových prezentacích firem, nikoli jiných reklamních médií na internetu, které zde však pro úplnost také uv{dím. Další omezení představuje fakt, že pr{ce nerozv{dí teorii reklamy, pouze využív{ poznatků pro specifikaci aplikací v oblasti reklamy na internetu Struktura práce Svou pr{ci rozděluji do n{sledujících kapitol: První kapitola se zaměřuje na grafické prvky využité ve webové prezentaci, na psychologické působení barev a tvarů a jejich interpretaci 10

11 v reklamě a na z{sady kombinov{ní barev. Zmiňuji zde i z{kladní rozdělení webového layoutu a uv{dím druhy internetové grafiky. Z{věrem kapitoly předv{dím pětici praktických příkladů webových str{nek s rozdílným zaměřením, u nichž vysvětluji důvody výběru využitých grafických prvků. Druh{ kapitola se zaměřuje na marketing a internetovou reklamu jako takovou. Poukazuji v ní na specifika internetové reklamy, čím se liší oproti ostatním médiím a jak lze těchto specifik využít v praxi. N{sledně předv{dím z{kladní druhy internetové reklamy spolu s praktickými příklady a také zdůrazňuji nutnost důsledně zpracovat internetovou prezentaci společnosti. Ve třetí kapitole se podrobněji věnuji obecným standardům on-line reklamy, předv{dím rozdělení internetu do vývojových etap spolu s podrobnějším popisem. Uv{dím také grafické form{ty, které se na internetu využívají a zdůrazňuji úlohu technologické optimalizace při ladění webových str{nek. Kapitola čtvrt{ nese n{zev Chov{ní z{kazníka na webu. Pojedn{v{ zejména o psychologii chov{ní uživatele v on-line prostředí. Zaměřuji se v ní na způsoby, jakými lidé čtou internetové str{nky, zmiňuji také některé moderní způsoby testov{ní chov{ní uživatele na webových str{nk{ch. P{t{ kapitola m{ za úkol aplikovat předešlé teoretické poznatky v praktickém užití při analýze internetových prezentací vybraných společností. Pro tuto příležitost jsem vybral české pobočky dvojice firem, které své kampaně zakl{dají na image, a proto kladou důraz na kvalitní grafické zpracov{ní společnosti Nike, Inc. a Adidas ČR. Na z{kladě vyhodnocení analýzy poté uv{dím doporučení, co by bylo možné v konkrétní prezentaci vylepšit a jak více využít potenci{l internetu jakožto moderního komunikačního média. 11

12 V z{věrečné p{té kapitole shrnuji poznatky, které jsem během pr{ce získal, a uv{dím přínosy, které pr{ce jejím čten{řům, stejně jako samotnému autorovi, nabízí. 12

13 2. Působení barev a tvarů na lidskou psychiku a jejich využití ve webové prezentaci Pokud se zamyslím nad úlohou grafiky v internetových prezentacích firem a v reklamních kampaních, musím začít od úplného z{kladu, kterým jsou barvy a barevné asociace. V n{sledujících odstavcích si nejprve nastíním kr{tce historii, kde vznikaly různé teorie slučující barvy s lidskou psychikou, n{sledně předvedu z{kladní rozdělení asociací u barev, potažmo tvarů. Posléze uvedu z{kladní druhy webové grafiky a z{kladní schéma využívaných webových layoutů. Zmíním také důležitost faktoru přehlednosti, o němž se d{ hovořit jako o stěžejním faktoru spr{vných webových prezentací. V průběhu kapitoly pouk{žu na důležitost faktoru cílové skupiny, což z{roveň doložím i na příkladech ze současné praxe Barvy a lidská psychika v historii i současnosti Pro běžného člověka se zdravým zrakem představují barvy běžnou souč{st každodenního života. Většina z n{s si ani neuvědomuje, kterak dok{že barva okolí, šatů nebo třeba pouze malého předmětu ovlivnit naší mysl, naše chov{ní. Během historie vznikalo mnoho teorií popisujících vliv barev na naše chov{ní, spojitost barev a lidské povahy, popřípadě poukazujících na různé asociace spojené s jednotlivými barvami. Jeden z nejranějších průkopníků byl Hippokrates (asi před Kristem), který rozdělil lidské povahy do čtyř skupin podle barvy tělních tekutin. Vypracoval teorii čtyř typů temperamentu, za nimiž Typ osobnosti Sangvinik Cholerik Flegmatik Melancholik Tělní tekutina Krev / sanguis Žluč / cholé Hlen / flegma Čern{ žluč / melancholé si představoval míšení čtyř hlavních šť{v v lidském těle. Ačkoli nyní již Tabulka 1: Rozdělení povah podle Hippokrata; zdroj: (Pleskotov{, 1987) 13

14 víme, že spojitost lidské povahy s tělními tekutinami není založeno na fyziologických faktech, charakteristiky těchto povah se udržely až do současnosti. Barevné rozdělení jednotlivých tělních tekutin pro zajímavost uv{dím v tabulce 1. (Pleskotov{, 1987) Největší rozkvět teorií d{vajících do souvislosti barvy a lidskou psychiku přišel ve druhé polovině devaten{ctého a n{sledně ve dvac{tém století. Německý psychiatr Ernst Kretschmer ( ) dělil lidi na dva druhy cyklotýmy a schizotýmy. Cyklotýmové jsou lidé otevření, emotivní a vůči barv{m jsou mnohem vnímavější, zatímco schizotýmové dok{žou své city kontrolovat a na barvy reagují pouze sporadicky. Podobnost s teorií Švýcara Carla Gustava Junga ( ), jenž dělil lidské povahy na extrovertní a introvertní, je zjevn{, Jung ale pokračoval d{le. Impulsivní extroverti podle něj d{vají přednost barv{m teplým, zejména žluté a červené, kdežto uzavření introverti preferují barvy studené jako zelenou či modrou. S pojmy introvert a extrovert pracoval také Švýcar Hermann Rorschach ( ), který vytvořil proslulou psychodiagnostickou metodu, kdy se na čistý papír k{pne kapka inkoustu, přehne, aby vytvořila symetrický obrazec, a uk{že respondentovi. Ten n{sledně popisuje tvar, přičemž extroverti se soustřeďují zejména na barvy, kdežto introverti na tvary symetrické kaňky. Během minulého století také vznikala řada výzkumů snažících se poodhalit roušku působení barev na lidskou psychiku. Po zpracov{ní výsledků byl vytvořen klíč k psychologickému působení barev, který nalezneme v tabulce 2. (Pleskotov{, 1987) 14

15 Barva Žlut{ Oranžov{ Světle zelen{ Tmavě zelen{ Světle modr{ Tmavě modr{ Červen{ Purpur Fialov{ Světle fialov{ Hněd{ Šed{ Bíl{ Čern{ Obecn{ asociace Povzbuzuje, osvobozuje, přin{ší uvolnění, pocit souladu, harmonie, působí vesele a otevřeně Je slavnostní, vyvol{v{ pocit radosti, je spojena s představou slunce, tepla, bohatství, zlata, úrody Působí přirozeně, ale někdy i jedovatě, je spojena s představou chladu, vlhka, tichosti, rostlin Uklidňuje a chr{ní, ale také omezuje, je př{telsk{, d{v{ pocit bezpečí a naděje Působí přívětivě, vyvol{v{ představu oblohy a vzduchu, ticha a touhy Klidn{, v{žn{ až skličující, barva d{lek, hloubky, rozjím{ní a smutku Vzrušující, energick{, prudk{ až n{ruživ{, siln{, mocn{, spojen{ s představami ohně, krve, nebezpečí, l{sky, hluku Působí důstojně, hrdě, vznešeně, povzbudivě, je spojen s představou spravedlnosti a majest{tu Neklidn{, znepokojiv{, melancholick{, tajemn{, osobit{, n{ročn{ Působí začarovaně, rozpolceně, slabošsky, je to barva magie, melancholie, opojení Střízliv{, mlčenliv{, solidní a v{žn{, realistick{, spojena s představou jistoty a poř{dku, domova, tradice, zdrženlivosti Netečn{, smutn{, spojen{ s představou chudoby a pokory Neurčit{, nejist{, spojen{ s představou nevinnosti a čistoty Barva vzdorného protestu, zlého tajemství, nicoty, smrti Tabulka 2: Klíč k působení barev na lidskou psychiku; zdroj: (Pleskotov{, 1987) Protože je tato pr{ce zaměřena na interpretaci barev v reklamě, nejsou tyto asociace dostačující. Pokud bychom chtěli převést některé barevné poznatky do reklamní praxe, mohou jako klíč sloužit n{sledující údaje z tabulky 3 asociací barev ve vztahu k různým objektům: 15

16 Barva Asociace spojen{ s objektem Červen{ Hork{, hlasit{, pln{, siln{, sladk{, pevn{ Oranžov{ Tepl{, syt{, blízk{, podněcující, such{, křehk{ Žlut{ Velmi lehk{, hladk{, kysel{, obtížn{ Zelen{ Chladn{, šťavnat{, vlhk{, svěží, jedovat{, kysel{, mlad{ Modr{ Studen{, mokr{, siln{, leskl{, velk{, hlubok{, vzd{len{, tich{, pln{ Fialov{ Sametov{, narkotick{, sladk{, měkk{, mystick{ Tabulka 3: Asociace barev spojené s objektem; (Vysekalov{, 2007) Jak lze vidět, každ{ barva vyvol{v{ určité pocity, tj. m{ vliv na psychiku člověka. Tento vliv však nelze převést do obecné roviny, každý člověk m{ jedinečné individu{lní vzpomínky, díky kterým jeho mozek vytv{ří individu{lní asociace pro každou barvu. Vedle vzpomínek mohou na psychologické působení barev mít vliv také další aspekty, zejména kulturní a n{boženské, popřípadě pohlaví. Ženy jsou, podle (Paes, 2000) schopny rozezn{vat více barevných odstínů, zatímco muži se omezují pouze na z{kladní barvy. Je pro to jednoduché vysvětlení sítnice lidského oka je složena z tyčinek, receptorů světla, a čípků, receptorů barev. Genetick{ informace pro čípky je uložena v chromozomu X, ženy, majíc dva chromozomy X, tak z{konitě dok{žou rozeznat více odstínů barev. Zatímco muži, kteří byli obdaření pouze jedním chromozomem X, mluví o červené, modré či zelené, z úst žen přich{zí výrazy jako smetanov{, kaštanov{, meruňkov{, apod. Veškeré výše uvedené informace mohou být velmi užitečné, nicméně pokud bychom je chtěli využít při designov{ní internetové reklamy či prezentace firem, musíme zohlednit z{sadní faktor, jejž jsem v minulém odstavci naznačil cílovou skupinu. Z toho vych{zí další n{sledující tabulka 4: 16

17 Barva Pohlaví Viditelnost Poutavost Oblíbenost Asociace Bíl{ Muž / Žena Vysok{ Nízk{ Nízk{ Čistota Žlut{ Muž / Žena Vysok{ Vysok{ Nízk{ Slunce Růžov{ Muž Nízk{ Nízk{ Nízk{ Klid, uvolnění, ženskost Růžov{ Žena Nízk{ Nízk{ Vysok{ Léčivý účinek, ženskost Oranž. Muž / Žena Vysok{ Vysok{ Vysok{ Tepl{ barva, zdraví Červen{ Muž Vysok{ Vysok{ Vysok{ Nebezpečí, vzrušení Červen{ Žena Vysok{ Vysok{ Vysok{ Teplo, intimita Zelen{ Muž / Žena Nízk{ Nízk{ Nízk{ Peníze, z{bava Modr{ Muž Nízk{ Nízk{ Vysok{ Jistota, inteligence, ochrana Modr{ Žena Nízk{ Nízk{ Nízk{ Deprese, business, vůdčí barva Hněd{ Muž / Žena Nízk{ Nízk{ Vysok{ Bohatství, země Šed{ Muž / Žena Nízk{ Nízk{ Vysok{ Ochrana Čern{ Muž / Žena Nízk{ Nízk{ Vysok{ Bohatství, citlivost Tabulka 4: Rozdělení barev s ohledem na reklamní praxi; zdroj: (Gold, 2002) Z uvedených dat jasně vyplýv{, že pro jednotliv{ pohlaví jsou některé barvy různě oblíbené, různě poutavé a zejména také různě viditelné. Tyto rozdíly vidíme nejvíce u typicky mužských a ženských barev růžové a modré. Zajímavě působí také různé asociace s ohledem na pohlaví, Obr{zek 1: Uk{zka p{nského webu s červeným schématem zn{zorňujícím adrenalin a vzrušení; zdroj: zatímco pro muže představuje červen{ adrenalin nebo nebezpečí, většina žen si tuto barvu spojí s teplem či intimitou. Porovn{me-li tyto údaje s n{sledující tabulkou oblíbenosti barev podle pohlaví, kter{ byla vytvořena za pomoci tzv. pyramidového testu 1, dojdeme k podobným výsledkům. Nelze ovšem 1 Pyramidový test respondenti mají za úkol pokrýt pyramidu čtverečky těch barev, které se jim nejvíce líbí, (Pleskotov{, 1987). 17

18 přehlédnout fakt, že ačkoli byla podle tabulky 5 modr{ u žen neoblíben{, v tomto testu naopak s přehledem zvítězila. Svůj vliv na to měl pravděpodobně věk respondentů, neboť podle několika zdrojů se u žen obliba modré s přibývajícími léty zvyšuje. Barva Muži Ženy Modr{ 18,5 % 22 % Červen{ 19,2 % 15,6 % Zelen{ 17,8 % 14, 8% Žlut{ 12,2 % 13,2 % Oranžov{ 11,1 % 8,7 % Fialov{ 6,1 % 8,5 % Hněd{ 6,3 % 7,7 % Čern{ 6,1 % 5,8 % Bíl{ 2 % 2 % Šed{ 0,7 % 1,7 % Tabulka 5: Oblíbenost barev podle pyramidového testu, (Pleskotov{, 1987) 2.2. Kombinace barev Uvedl jsem, jak barvy působí na psychiku člověka s ohledem na pohlaví. Pokud bychom chtěli barvy efektivně využít v kompozici, ať už internetových str{nek či při tvorbě reklamních bannerů, měli bychom se řídit několika pravidly, kter{ uv{dím v n{sledujících odstavcích. Obr{zek 2: Uk{zka d{mského webu s typicky pastelovým barevným schématem; zdroj: ona.idnes.cz Barvy můžeme rozdělit do několika z{kladních skupin, např. prim{rní, sekund{rní a komplement{rní, teplé a studené, kdy teplé vzrušují, zatímco studené působí uklidňujícím dojmem, a pestré a nepestré. Nepestré barvy jsou čern{, bíl{ a neutr{lní šed{, pestré jsou všechny ostatní. Pro kombinace barev platí, že jsou-li použity vedle sebe, stupňují barvy nepestré intenzitu barev pestrých. Všeobecně se pro skl{d{ní barev doporučuje, aby v celkovém obraze 18

19 nedominovaly více než dvě pestré barvy, třetí barvou by měla být někter{ z neutr{lních barev. Při kombinov{ní barev se využív{ barevného šestn{ctiúhelníku (viz obr. č. 3), z nějž vych{zí n{sledující pravidla pro harmonické kombinov{ní barev: (Pleskotov{, 1987), (Vysekalov{, 2007) Pravidlo tón v tónu je založeno na tom, že se kombinují sousední barvy, případně kombinace ob jedno pole Pravidlo jedné čtvrtiny doporučuje kombinovat barvy nalézající se v jakkoliv otevřené čtvrtině šestn{ctiúhelníku Pravidlo jedné poloviny d{v{ širší prostor pro kombinace barev, celou jednu polovinu šestn{ctiúhelníku, při dodržení z{sady, že nikdy nesmí být použita ž{dn{ barva z druhé poloviny kruhu Pravidlo kontrastu doporučuje kombinovat přesně protilehlé barvy, tedy barvy kontrastní. Neměly by být použity rovnoměrně, jedna z nich by měla dominovat, druh{ být doplňkem. (Vysekalov{, 2007) Jakkoli mohou být tato Obr{zek 3: Barevný šestn{ctiúhelník, zdroj: Vysekalov{ (Vysekalov{, 2007) pravidla užitečn{ při komponov{ní webových str{nek či reklamních bannerů, jde pouze o z{kladní vodítko. Designér si musí uvědomit, že stejně nutné jako vytvořit kvalitní barevnou kombinaci je také rozlišit společnost/službu/výrobek od konkurence. Velmi se 19

20 při komponov{ní firemních str{nek doporučuje držet se grafického manu{lu 2 a v něm uvedených barevných kombinací, které společnost využív{ Psychologické působení tvarů Další složkou designu webových str{nek a reklam, kter{ n{s bude z hlediska psychologického působení na člověka zajímat, jsou z{kladní tvary a jejich variace. Společně s barvami dok{že spr{vn{ volba tvarů přimět uživatele, aby alespoň trochu změnil své jedn{ní směrem k tomu, kam se jej pokoušíme nasměrovat. Jakožto z{klad pro další text bude sloužit n{sledující tabulka: Tvar Pohlaví Viditelnost Poutavost Oblíbenost Asociace Muž Nízk{ Nízk{ Vysok{ Pevnost, předvídatelnost, jistota Žena Nízk{ Nízk{ Nízk{ Křehkost, těžkost, drsnost Muž Mystika, vzrušení, moc Žena Vysok{ Vysok{ Nízk{ N{silí, nebezpečí, hrozba Muž Vysok{ Vysok{ Nízk{ Něžnost, slabost, ženskost Žena Vysok{ Vysok{ Vysok{ Jemnost, l{ska, teplo Muž Příjemné z{žitky, pocit Vysok{ Vysok{ Vysok{ bezpečí Žena Tabulka 6: Působení tvarů na lidskou psychiku; zdroj: (Gold, 2002) Obdobně jako v předchozí podkapitole u barev i tato tabulka z č{sti zohledňuje faktor cílové skupiny, kdy jsou uživatelé rozděleni podle pohlaví. Je z ní zřejmé, které tvary jsou pro které pohlaví více viditelné, tj. uživatel si jich během skenov{ní webových str{nek lépe všimne, které jsou pro koho poutavé, tj. přil{kají pozornost, a také lze vyčíst oblíbenost tvarů na str{nk{ch. A zatímco první dva faktory spolu jdou ruku v ruce, oblíbenost u jednotlivých uživatelů 2 Manu{l grafických standardů je v podstatě n{vod, jak nakl{dat s grafickými komunikačními prostředky tak, aby firma komunikovala jednotně a aby byl dodržen jasný firemní styl. Je to tedy soubor z{vazných pravidel sloužících k vytv{ření jednotného vizu{lního stylu. (Horný, 2004) 20

21 může být různ{. V neposlední řadě uv{dí tabulka 6 různé asociace, které vyvol{vají tvary, čehož lze při navrhov{ní webové prezentace také velmi účinně využít. N{sleduje podrobnější rozdělení dle (Gold, 2002): Čtverec Nejen čtverec patří mezi typické oblíbené tvary mužů, můžeme sem zařadit i většinu mírně zkosených rovnoběžníků a lichoběžníků, což je pro analytický způsob mužského myšlení naprosto ide{lní. Jak uv{dí tabulka, ženy se těmto tvarům raději vyhýbají, představují si pod nimi určitou Obr{zek 4: Uk{zka grafiky sportovního serveru s téměř výlučně hranatou grafikou; zdroj: nepoddajnost, tíhu či drsnost. Za zmínku však stojí údaje v prvních dvou sloupcích, viditelnost a poutavost. Hranaté věci zkr{tka neupoutají pozornost, jelikož dvě třetiny věcí v našem okolí jsou hranaté knihy, police, místnosti. Každodennost pravoúhlých tvarů způsobuje, že jsou většině lidí téměř lhostejné, i když se mužům líbí Trojúhelník Druh{ skupina, pracovně nazvan{ trojúhelník, v sobě skrýv{ všechny obrazce, jež obsahují mnoho ostrých úhlů. Jejich symbolika je jasn{ pozor, něco důležitého či nebezpečného. Ačkoli z tabulky vyplýv{, že tyto symboly nejsou oblíbeny ani u jednoho pohlaví, můžeme říct, že muži k nim mají o něco blíže. Představují pro ně l{kavé tajemno, kdežto pro ženy spíše strach a hrozbu. Trojúhelník směřující vrcholem dolů může mít pro muže dokonce erotický podtext, neboť připomín{ lůno ženy. 21

22 Kruh Zatímco hranaté symboly mají svou oblibu u mužů, kruh je typicky oblíbeným znakem žen, což lze vidět i na obr{zku 5. Představuje pro ně l{sku, teplo, porozumění a klid, naopak muži za ním vidí něco příliš zženštělého, co zkr{tka není pro ně. Obr{zek 5: Uk{zka webu pro ženy s dominantním kruhem v logu; zdroj: Někdy se dokonce uv{dí, že tento pocit může dojít až ke strachu, který by se dal označit xenofobním Křivky a křivoplochy Poslední skupinou, dle uvedené tabulky nejpřitažlivější, jsou křivky a křivoplochy. Za faktem, že jsou poutavé pro muže i ženy, stojí skutečnost, že se de facto jedn{ o kombinaci všech tří předchozích typů tvarů, přičemž veškerý negativní efekt se nějakým způsobem vytr{cí. Toto neplatí ve sto procentech případů, ovšem stanovovat nějakou pevně danou mez mezi pozitivním a negativním působením je v tomto případě díky neskutečné rozmanitosti tvarů prakticky nemožné Typologie webové grafiky V předchozích podkapitol{ch jsem pouk{zal na důležitost spr{vného využití barev a tvarů ve webových prezentacích, nyní budu pokračovat v dalším teoretickém pojedn{ní o typech grafických prvků, jež lze na webu nalézt. Jsou odvozeny od účelu, pro který byly vytvořeny, a můžeme je rozdělit do n{sledujících skupin (Bedřichov{, 2008): 22

23 Identifikační grafika Úloha grafiky v internetové reklamě Grafické elementy, jež se nach{zejí na všech str{nk{ch webu, v ide{lním případě ve stejném místě i velikosti. Typickým příkladem je logo, díky němuž lze v mžiku sekundy identifikovat, kde se uživatel v danou chvíli nach{zí. To je velmi důležité, neboť, jak uv{dí Steve Krug (Krug, 2007), pohyb po webových str{nk{ch připomín{ teleportaci, takže zatímco u kamenné pobočky stačí logo společnosti na dveřích, na webu je důležité, aby se logo bezpodmínečně nach{zelo na všech str{nk{ch Strukturální grafika Tato skupina zahrnuje grafiku, kter{ utv{ří strukturu str{nky, tj. celkový vzhled. Jejím účelem je vytvořit jednotný a přesný vzhled str{nek, k čemuž využív{ například dělení webu do jednotlivých sekcí a vytv{řet tak místa pro odkazy na další str{nky Navigační grafika Slouží ke zvýraznění té č{sti webu, kde se nach{zí navigace. Obsahuje grafické prvky, které uživatele odkazují na další str{nky webu. Do této kategorie se řadí také tlačítka sloužící jako odkazy Kontextová grafika Doplňuje text str{nek o informace grafického r{zu, tj. v{že se na obsah str{nek. Slouží k vizu{lní prezentaci obsahu str{nek, což je pro uživatele mnohdy příjemnější než podrobné studov{ní rozs{hlého textu Dekorační grafika Jedn{ se o jedinou grafiku, jež cíleně neobohacuje informace uvedené v ostatních č{stech webu. Jejím účelem je jednak estetické působení, jednak využití psychologických efektů barev a tvarů, které jsem uvedl výše, cílem je přit{hnout požadovanou cílovou skupinu k obsahu str{nek. 23

24 2.5. Webové layouty Úloha grafiky v internetové reklamě Do teoretického z{kladu pro spr{vné navržení webového designu nepochybně patří tzv. layout, tj. rozložení ovl{dacích prvků na webu. Ačkoli je každý web unik{tní, podobnost v z{kladním rozložení mají všechny str{nky. Jak ukazuje obr{zek 6, layout rozděluje web do několika pomyslných sekcí, přičemž každ{ m{ svůj účel. S využitím rozdělení webové grafiky z minulé podkapitoly si je nyní podrobněji popíšeme: Hlavička obsahuje především prvky identifikační grafiky, nach{zí se zde logo webu, motto, případně dekorační grafické prvky spojené s cílovou skupinou str{nek. V hlavičce se v poslední době také hojně prosazuje navigační grafika, kterou zde zastupují tzv. z{ložky. Patička využív{, stejně jako hlavička, prvků identifikační grafiky. Tyto dvě č{sti zůst{vají Obr{zek 6: Z{kladní rozložení webového layoutu, zdroj: Bedřichov{ (Bedřichov{, 2008) téměř na všech č{stech webu neměnné, a zatímco hlavička by měla upoutat, v patičce nalezneme užitečné odkazy a informace o provozovateli webu. Levý/pravý boční sloupec tvoří nejčastěji navigační grafika, pokud web sloupce využív{, ukrýv{ do nich většinou odkazy v souladu s hierarchií str{nek. 24

25 Tělo/hlavní obsah str{nky kombinuje kontextovou grafiku spolu s navigační. Ilustrace u čl{nků dod{vají na poutavosti, patřičné grafické zdůraznění odkazů s podobnou tematikou zde také nesmí chybět. Aby byl výčet úplný, musíme zařadit také struktur{lní grafiku. Jejím úkolem je nen{silně, ale dostatečně viditelně oddělit jednotlivé sekce webových str{nek, které tak získají na přehlednosti a eleganci. D{le bych r{d poznamenal, že míra variability webových layoutů je obrovsk{, některé weby sloupce využívají, některé si vystačí s hlavičkou a patičkou, jiné se pokouší o nové, origin{lní zpracov{ní. Vždy je ale nutné vytvořit takové konstrukční řešení, které uživateli umožní rychle a jednoduše nalézt informace, kvůli kterým na webové str{nky přišel. O tom bude více pojedn{vat n{sledující podkapitola Design vs. Přehlednost Internet je pro designéry úžasné médium. Mohou zde prakticky neomezeně zkoušet nové a nové způsoby zpracov{ní str{nek, testovat vlastní origin{lní způsob navigace a pomocí koment{řů či diskusních fór získat reakce uživatelů prakticky okamžitě. Stejně tak lze doslova za běhu měnit nejen obsah, ale i grafický design webu. Ovšem konkurence na webu je obrovsk{ a přejít na jiné str{nky znamen{ jedno až dvě kliknutí myší, a tak se ne všechny inovativní a origin{lní n{pady ujmou. Ba dokonce mohou mít negativní důsledky na n{vštěvnost str{nek. Nicméně Steve Krug řík{: Lidé nebudou používat v{š web, pokud se v něm nezorientují. (Krug, 2007) A m{ bezesporu pravdu. Obdobně jako při u novin či časopisů i design internetových str{nek se vyvíjí, uživatelé si postupně zažívají spoustu drobností. A tak zatímco před deseti lety musely mít všechny e-shopy odkaz s popiskem n{kupní košík, dnes stačí pouze mal{ piktogramov{ ikonka. 25

26 Spousta inovativních n{padů, byť sebelepších, může zůstat nepochopena a zmizí kamsi do propadliště dějin, pouze proto, že uživatelé neprokoukli jejich geni{lní myšlenku. O tématu přehlednosti a užív{ní webu se více rozepisuji v kapitole Chov{ní z{kazníka na webu. (Krug, 2007) 2.7. Příklady webových prezentací Z{věrem kapitoly předvedu několik praktických příkladů, jak společnosti na internetu nakl{dají s psychologickým působením tvarů, barev a podobně. Internetové str{nky byly vybír{ny čistě n{hodně v širokém spektru uplatnění, vedle standardní firemní prezentace uvedu internetový magazín, komunitní server a dvojici e-shopů Alpine Pro Společnost Alpine Pro je předním českým výrobcem outdoorového a sportovního oblečení, což se projevilo také v designu její webové prezentace. Dynamicky laděn{ grafika, které vévodí mohutn{ animace ve form{tu FLASH (na statickém obr{zku obdélníkový prvek mezi navigací a textem), zcela zřetelně vypovíd{ o svém outdoorovém zaměření. Designérům se takticky podařilo zkombinovat vesměs hranaté prvky, které obsahuje logo společnosti a připout{ zejména p{nské oko, Obr{zek 7: Uk{zka webové prezentace výrobce outdoorového oblečení; zdroj: s dekorativní grafikou v okolí hlavičky, jež naopak připout{ ženy a dívky. Černošedé barevné spektrum by se dalo ch{pat jakožto vzdor proti přírodě a tradiční společnosti, čímž výtečně zaujme svou cílovou skupinu. S citem bylo 26

27 volené i písmo, které je hůře čitelné pouze v patičce serveru, v ostatních č{stech je velmi kontrastní a vhodně doplňuje celkové grafické schéma Alza.cz Druhým respondentem v praktických příkladech je e-shop zaměřující se na prodej výpočetní techniky a elektroniky Alza.cz. Využív{ klasické trojbarevné schéma, z{kladní modrou a bílou Obr{zek 8: Uk{zka webové prezentace internetového obchodu s výpočetní technikou; zdroj: doplňuje zelen{ jakožto netradiční a upout{vající prvek. Vévodící modr{ je zcela neutr{lní, takřka studen{, což ale z{roveň evokuje pocit vysoké technické úrovně. Design str{nky, včetně loga a navigace, je vesměs laděn do hranatých prvků, oblíbeného to tvaru pro muže, což platí i o modré barvě. Server Alza.cz využív{ klasického rozložení layoutu str{nky s levým bočním panelem, který slouží jakožto hierarchický strom Extra prádlo Třetí v abecedním pořadí uk{zkových serverů se nach{zí e- shop extra-pradlo.cz, který se zaměřuje na prodej kvalitního spodního pr{dla. Už jen tato představa evokuje u lidí dojem erotiky, v{šně a vzrušení, čehož si Obr{zek 9: Uk{zka webové prezentace prodejce spodního pr{dla; zdroj: zcela jistě byli vědomi i webdesignéři Extra-pradlo.cz. Barevné schéma, využívající prvky červené a růžové na růžovobílém pozadí s dominantní rudou růží, symbolu l{sky, ve hlavičce serveru dokonale navozuje stejné představy 27

28 jako myšlenka na kvalitní spodní pr{dlo. Růžov{ barva m{ také dopad na cílovou skupinu z{kazníky podobných serverů bývají většinou ženy, pro které představuje růžov{ něhu, jemnost, ženskost a romantiku. Kombinace s bílou, jež zde může symbolizovat lehkost, uvolnění nebo čistotu, pak skvěle doplňuje celkové barevné schéma webu Hrej.cz Obr{zek 10: Uk{zka grafického zpracov{ní internetového magazínu; zdroj: Předposledním serverem, který jsem si vybral pro uk{zku grafických prvků v praxi, je internetový magazín o počítačových hr{ch Hrej.cz. Grafickému designu vévodí kombinace barev černé a bílé, kter{ evokuje dojem vzdorného protestu proti společnosti. Velmi dobře tak vystihuje svou cílovou skupinu, kterou tvoří především teenageři mužského pohlaví, pro které byl nachyst{n ještě jeden grafický prvek absolutní míra pravých úhlů. Vešker{ grafika na serveru je totiž tvořena obdélníky, to platí i pro logo, které při bližším prozkoum{ní navozuje dojem osmibitové grafiky z nejstarší éry počítačových her. Krom toho vévodí domovské str{nce velmi efektní a obrovský módní poutač, na němž se prolín{ čtveřice obr{zků s aktu{lními čl{nky. A jelikož se jedn{ o internetový magazín, jehož z{kladem je čtení čl{nků, vyskytují se všechny texty černě na bílém poli, což je pro lidské oko příjemnější a přirozenější forma kontrastu. 28

29 Photoserver.eu Úloha grafiky v internetové reklamě Na z{věr jsem si ponechal komunitní server Photoserver.eu, který sdružuje amatérské i profesion{lní fotografy. Jeho designu vévodí mohutný oranžový pruh v hlavičce, jenž působí v kombinaci s tmavě šedým pozadím velmi efektně. Oranžov{ jakožto doplňkov{ barva může u fotografů evokovat dojem tzv. zlaté hodiny, tj. času několik okamžiků po východu, respektive před z{padem slunce, kdy sluneční paprsky vytv{řejí nezaměnitelné teplé oranžové světlo (Peterson, 2006). Šedivé pozadí je z{roveň šetrné pro oči a nech{ vyniknout zejména barevným fotografiím, kterých je na serveru většina, horší už je to s kontrastem textů, které ale nejsou prim{rním obsahem webu. Poněkud překvapivou volbou jsou čtvercové n{hledy fotografií, které nešetrně oříznou bočnice a nedovolí tak před otevřením zachytit celou atmosféru fotografie. Obr{zek 11: Uk{zka grafického designu komunitního serveru; zdroj: 29

30 Úloha grafiky v internetové reklamě 3. Druhy reklamy a psychologie chování zákazníka. Oslovení zákazníka. V předchozí kapitole jsem pouk{zal na z{kladní psychologické aspekty vním{ní barev, tvarů, uvedl jsem rozdělení webové grafiky a z{kladní pravidla webových layoutů. K tomu, abych mohl pokročit blíže k z{věrečné analýze, je nutné nejprve rozdělit internetovou reklamu do několika skupin. D{le v této kapitole přiblížím vývoj trendů užití reklamy na internetu Co je to reklama Tématem této bakal{řské pr{ce je úloha grafiky v internetové reklamě. A zatímco o psychologickém působení grafických a vizu{lních prvků se více rozepisuji v předch{zející Komunikační mix Marketingový mix kapitole, v této se zaměřím na reklamu samotnou, potažmo její internetovou Reklama (advertising) PRODUCT Osobní prodej (personal selling) PRICE specifikaci. Jak uv{dí, propodpora prodeje (sales promotion) pagace (promotion) je v současném pojetí užív{na jakožto pojem PROMOTION nadřazený Práce s veřejností (public relations) PLACE PEOPLE Přímý marketing (direct marketing) jednotlivým č{stem komusponzoring nikačního mixu (viz obr{zek 12). D{ se říct, že se jedn{ o marketingové komunikace většinou komerčního charakteru Nová média (new media) Obr{zek 12: Marketingový a komunikační mix, zdroj: Marš{lkov{ (Marš{lkov{, 2009) (commercial communications), jejichž cílem je vlivem před{vaných informací ovlivňovat pozn{vací, motivační a rozhodovací procesy těch, na které chceme zapůsobit a pozměnit jejich tržní chov{ní. (Vysekalov{, 2007) 30

31 Pojem reklama pravděpodobně vznikl z latinského reklamare znovu křičeti, v současné době je definov{na jako každ{ placen{ forma neosobní prezentace a nabídky idejí, zboží nebo služeb prostřednictvím identifikovatelného sponzora. Definice schv{len{ Parlamentem ČR v roce 1995 hovoří o přesvědčovacích procesech, kterými jsou hled{ni uživatelé, zboží, služeb nebo myšlenek prostřednictvím komunikačních médií. Z druhé definice je jasné, že do této kategorie lze bezpochyby zařadit i internet jakožto moderní komunikační médium. V komunikačním mixu se ale internet řadí spolu s digit{lními televizemi a mobilními sítěmi mezi tzv. Nov{ média, za což může zejména fakt, že se jedn{ o velmi dynamicky se rozvíjející souč{st marketingového mixu do jisté míry kombinující všechny výše uvedené prvky propagace. (Vysekalov{, 2007) (Marš{lkov{, 2009) 3.2. Specifika internetové reklamy V posledních letech zaznamen{v{me obrovský rozvoj nových médií a především průniku internetu mezi nejširší společnost, což m{ a v budoucnosti bude mít st{le větší vliv na změny v komunikačním mixu. Výhody internetu jsou nesporné otevír{ prostor nejen pro dialog mezi spotřebitelem a prodejcem, ale z designérského pohledu také smaz{v{ rozdíly mezi textem a statickými obr{zky na jedné straně a videem a zvukem na straně druhé. Jako další nespornou výhodu lze uvést aktu{lnost, modernost či popul{rnost nových služeb, což přin{ší znatelný n{růst z{kazníků (viz graf 13). Tato čísla jen zdůrazňují nutnost využívat pro marketingové komunikace pr{vě internet. (Sedl{ček, 2006) dokonce uv{dí, že internetov{ reklama je nejn{padnějším projevem komerčního využití internetu. Reklama na internetu m{ sv{ specifika oproti klasickým propagačním metod{m, nicméně i uživatelé internetu jsou lidé se všemi vlastnostmi, což n{m umožňuje se zaměřit také na spr{vné psychologické působení on-line reklamy, z{roveň se však musíme pt{t, zda se 31

32 Úloha grafiky v internetové reklamě investice do on-line propagace vyplatí. Jak (Vysekalov{, 2007): V tomto 31,8% 30,0% webovou prezentaci firmy 20,0% od tzv. proužkové reklamy 10,0% (banner). Jak d{le před- 0,0% je nutné 36,1% 36,8% 40,0% rozlišit momentu Nákupy přes internet pro soukromé účely, uv{dí 26,4% % z celku 16,5% 15,5% 12,6% 5,5% 2005 vedu, toto z{kladní dělení není zcela přesné, neboť při 22,7% 23,7% Obr{zek 13 Graf n{kupů přes internet pro soukromé účely za roky , zdroj: ČSÚ současném boomu internetu a informačních technologií nejsou proužkové reklamy zdaleka jediným způsobem, jak cíleně propagovat své služby a výrobky v r{mci sítě Internet. (Vysekalov{, 2007) Co však zůst{v{ totožné, jsou z{kladní pravidla pro spr{vnou vizu{lní komunikaci firem< 3.3. Vizuální komunikace Jak jsem předvedl v první kapitole, existuje mnoho způsobů, jak může webový designér vizu{lně komunikovat se svým uživatelem, čten{řem, z{kazníkem. Cílem vizu{lní komunikace v plném významu je doplnit grafickými či jinými okem viditelnými prvky sdělov{ní informací, čímž u příjemce dos{hneme snazšího zapamatov{ní informace. Jak uv{dí (Horný, 2004), z toho, co vidíme, si lze zapamatovat několikan{sobně více než z toho, co slyšíme, tzn.: 80-85% toho, co vidíme, a jen 15-20% toho, co slyšíme. Vizu{lní komunikace v prostředí sítě Internet je specifick{, avšak neméně důležit{. Stejně jako v běžné komunikaci se snažíme předat myšlenku, ovšem využív{me k tomu layout, barvy, tvary, symboly, figury či fotografie, o čemž už byla řeč v předch{zející kapitole. Jak ale uv{dí (Horný, 2004): Podmínkou funkčních 32

33 a uživatelsky přívětivých vizu{lních komunikačních systémů je nutné dodržení z{kladních principů: Nezbytné minimum informací: Nesmíme uživatele zahrnout větším množstvím informací, než je nutné pro orientaci v dané situaci/webu. Čitelnost a přehlednost: K dodržení tohoto principu je nutné spr{vně zkombinovat několik faktorů: použitý font písma, míra kontrastu mezi znaky a podkladem, vz{jemn{ vzd{lenost symbolů, použití barev jakožto pomocného prvku přehlednosti, atd. N{vaznost informací: Před{vané informace musí být kontinu{lní. Tohoto principu se v r{mci vizu{lní komunikace na webu prakticky ned{ dos{hnout, protože pro valnou většinu přístupů na str{nku není výchozím bodem domovsk{ str{nka, nýbrž internetový vyhled{vač. (Horný, 2004) 3.4. Cílová skupina V minulé kapitole jsem několikr{t zdůrazňoval důležitost určení cílové skupiny při vytv{ření webové prezentace společnosti či internetové reklamy. Je to logické, při běžné komunikaci z očí do očí se podřizujeme tomu, s kým rozhovor vedeme, při povíd{ní s malým chlapcem použijeme zcela jiný slovník a způsob vyjadřov{ní než při rozhovoru se starcem. Stejně tak rozhovor s intelektu{lem se ponese na zcela jiné rovině než dialog s průměrným fotbalistou, apod. Je zde velmi důležit{ i zpětn{ vazba. Zjednodušeně řečeno, pokud příjemce nerozumí tomu, co řík{me, zopakujeme sdělení s výběrem jiných slov. Při vymýšlení internetové kampaně, designov{ní webových str{nek nebo třeba jen určov{ní klíčových slov pro vyhled{vače, je více než nutné zjistit z{kladní charakteristiky cílové skupiny, pro něž je zpr{va určena. Zpětn{ vazba zde téměř chybí, nepočít{me-li příspěvky do diskusních fór, proto je nutné 33

34 využít patřičný výzkum. Segment populace, pro který zpr{vu určujeme, je proto nutné zmapovat z n{sledujících hledisek (Vysekalov{, 2007): Demografické znaky: jaký je podíl mužů a žen v cílové skupině, jaké věkové skupiny zahrnuje, v jakých lokalit{ch a aglomeracích, jaké jsou její příjmy, atd. Psychografické charakteristiky: jaký životní styl ovlivňující spotřební chov{ní cílov{ skupina m{ ve vazbě na osobnostní orientaci jedince. Psychologické osobnostní charakteristiky: jaké mají jednotlivé osoby potřeby, z{jmy, motivaci, postoje, atd. Kulturní zvyklosti: jaké hodnoty jsou pro ně důležité, jaké symboly, ritu{ly u nich převažující a jací jsou jejich hrdinové, lidé, kterých si v{ží a jsou ochotni je n{sledovat. Jazykové charakteristiky: jakým jazykem hovoří, jaké obraty používají a jaký obsah mají idiomy v jejich řeči. K určení spr{vných charakteristik cílové skupiny se využív{ výzkum na z{kladě reprezentativního vzorku populace, jenž m{ přesně stanoven{ pravidla Znaky určující cílovou skupinu Geografické Demografické - národy - státy - oblasti - okresy - města - nákupní oblasti apod. - pohlaví - věk - rodinný stav - povolání - příjem apod. Psychografické Psychologické znaky osobnost člověka Životní styl - osobnostní charakter - postoje - motivy apod. - životní návyky - normy chování - zájmy - zkušenosti apod. Obr{zek 14: : Znaky určující cílovou skupinu, zdroj: Vysekalov{ (Vysekalov{, 2007) 34

35 a metodiky. Na našem území funguje cel{ řada profesion{lních agentur, které jsou schopny tyto výzkumy provést se všemi n{ležitostmi. Pro designéry internetové kampaně je n{sledně důležité, aby se těchto výsledků drželi při navrhov{ní a realizaci s využitím například psychologického působení tvarů a barev, jak jsem uvedl v předch{zející kapitole Druhy internetové reklamy Jak jsem uv{děl v předchozím textu, (Vysekalov{, 2007) rozděluje internetovou reklamu pouze do dvou skupin, webovou prezentaci firmy a bannerovou reklamu. Toto rozdělení je ale dosti nepřesné, v síti Internet totiž existuje cel{ řada způsobů, kterak propagovat společnost, výrobky nebo služby. V n{sledujících několika odstavcích je v kr{tkosti popíšu a n{zorně uvedu na obrazových příkladech. Obr{zek 15: Graf zastoupení druhů reklam v 1.čtvrtletí roku 2009; Zdroj: Grafická a bannerová reklama Nejzn{mější a dle průzkumů (viz obr{zek 15) st{le ještě nejrozšířenějším druhem internetové reklamy je bannerov{, či lidově řečeno proužkov{ reklama. Jedn{ se o grafické poutače, které se zobrazují na internetových Obr{zek 16: Uk{zka sloučení grafické a bannerové reklamy; zdroj: str{nk{ch s cílem připoutat nějakým způsobem pozornost z{kazníka. K tomu využívají zejména barevné zpracov{ní, o němž jsem psal v předch{zející 35

36 kapitole, d{le pak cílené slogany, případně zvukové efekty. Spousta lidí mylně považuje pojmy bannerov{ a grafick{ reklama za synonyma. Zatímco bannerov{ reklama m{ pevně dan{ pravidla, grafick{ umožňuje například zakomponov{ní do layoutu webových str{nek či jiné kreativní použití, které dovede upoutat z{kazníkovu pozornost. Jelikož se jedn{ o graficky nejpoutavější druh internetové reklamy, v n{sledující kapitole se jimi zabýv{m podrobněji. (Adaptic) Intextová reklama V posledních letech st{le více rozšířenější způsob interaktivní propagace. Jedn{ se o reklamu v textu webové str{nky, kter{ se aktivuje po přejetí kurzorem myši nad zvýrazněným klíčovým slovem. N{sledně zobrazen{ propagační bublina může obsahovat až šest druhů zpracov{ní, což lze n{zorně vidět na Obr{zek 17: Nabídka intextové reklamy společnosti Internet Billboard a.s. ; zdroj: obr{zku 17 z nabídky společnosti Internet BillBoard a.s. 3. Tato reklama sice vyžaduje interakci z{kazníka, k upout{ní pozornosti však využív{ klamného triku, kdy uživatel předpokl{d{, že se jedn{ o odkaz na další str{nku Přednostní výpisy Jedn{ se o metody, které využívají internetové vyhled{vače. Přednostní výpis je v podstatě placený odkaz, který se po zad{ní patřičného 3 Obr{zek 18: Uk{zka přednostního výpisu, zdroj: 36

37 klíčového slova do vyhled{vače zobrazí mezi prvními odkazy, tj. na sponzorovaném místě, což vidíme na obr{zku 18. Tento způsob propagace se hodí pro více zaběhnuté produkty, po nichž se uživatelé sami ptají a snaží se najít více informací. Přednostní výpisy využívají často e-shopy, nelze ale opomenout ani jejich vliv v předvolební kampani. (Adaptic) Rich Media 4 Označuje nové technologie užité v oblasti tvorby webových str{nek nebo online reklamy. Do této kategorie řadíme různé flashové animace, streamované video, interaktivní aplikace anebo třeba online hry. Obdobně jako bannery mohou být i rich media vyžita pro tzv. branding, tj. budov{ní a posilov{ní značky. Typickým příkladem rich medií jsou hratelné bannery Obr{zek 19: Příklad rich média, zdroj: nebo animace zasahující mimo standardní pole bannerů, viz obr{zek 19. (Adaptic) Reklamní y Velmi vhodnou formou marketingové kampaně mohou být i reklamní e- maily (Crha, 2007), jejichž výhodou je především adresnost. Adres{t je zn{mý, což umožňuje postavit reklamní sdělení na míru pro každého uživatele. Tato metoda propagace je velmi oblíben{ u inzerentů, u příjemců zpr{v tomu býv{ naopak. Mohou za to především spamy (viz níže), které neust{le doslova zahlcují ové schr{nky uživatelů a odrazují tak pozornost i od klasické, cílené reklamy, obsahující produkty, jež by si z{kazník opravdu r{d koupil. Pro propagaci výrobků či služeb jsou i zde využív{ny v hojné míře grafické prvky,

38 reklamní y by se tak daly přirovnat ke klasickým papírovým let{kům rozesílaným běžnou poštou. Reklamní y dělíme do tří z{kladních skupin: Autorizovaný reklamní je zpr{vou, o jejíž zasíl{ní uživatel někdy v minulosti zaž{dal. Uživatel se do datab{ze povětšinou dostane při registraci na webových str{nk{ch, kde, ať už z{měrně či nikoli, nech{ zaškrtnutou položku Souhlasím se zasíl{ním reklamních ů. Do této kategorie řadíme také tzv. newslettery, tj. firemní zpravodaj s aktu{lními novinkami či akčními nabídkami, viz obr{zek 20. Tato forma reklamy může být velmi účinn{, například server Amazon.com rozesíl{ doporučení ke Obr{zek 20: Uk{zka autorizovaného reklamního e- mailu, zdroj: koupi na z{kladě dříve pořízeného zboží. Sponzorství diskusních skupin: využív{ moderního trendu diskusních fór na internetu. Uživatel si nech{ na zasílat ozn{mení o přijetí odpovědi na svůj příspěvek, čehož využívají marketéři a k ozn{mení vloží reklamní sdělení. Spam: čili nevyž{dan{ reklamní elektronick{ pošta. Slouží buď k neleg{lnímu šíření propagačních ů, anebo k rozesíl{ní podvodných zpr{v. Inzerenti získají ové adresy z určité datab{ze, kam n{sledně za pomoci robota rozesílají reklamní sdělení. Nutno říct, že spam není považov{n za relevantní formu ové reklamy. Za jeho využív{ní hrozí v zemích Evropské Unie pokuta až 10 mil CZK. (Crha, 2007) 38

39 Kontextová reklama Úloha grafiky v internetové reklamě Tento typ reklamy je úzce spjat s obsahem webových str{nek. Zadavatel určí několik klíčových slov, podle nichž se n{sledně reklama zobrazuje na str{nk{ch, které se obsahem blízce přibližují propagovanému produktu či službě. Lze se tak, při dobré volbě klíčových slov, dosti účinně dostat k vybrané cílové skupině. A zatímco předchozí skupiny byly unik{tní, kontextov{ reklama představuje spíše způsob cílení než samostatný druh. Může totiž využívat jak prvky bannerů, tak i prvky rich medií jako videa či interaktivní bannery. Majoritní zastoupení ale st{le mají textov{ sdělení, kterými se výrobci snaží propagovat výrobky, které nejsou natolik zn{mé, aby si je uživatelé Obr{zek 21: Uk{zka kontextové reklamy, zdroj: Digizone.cz hledali pomocí internetových vyhled{vačů. (Podlahov{, 2008) Webová prezentace společnosti Ačkoli by někdo mohl tvrdit, že webové str{nky firmy nepatří mezi z{kladní propagaci společnosti v r{mci internetu, dovoluji si oponovat a tvrdit naprostý opak. V současném moderním světě je prakticky nezbytné, aby společnost měla svou webovou prezentaci, Obsah +++ Naplnění očekávání Intenzita surfování na níž nejen propaguje své výrobky, ale dok{že Provedení Aktuálnost + Celková líbivost ++ Úmysl znovunavštívení + + Zájem o produkt uživatelům poradit, Obr{zek 22: Model akceptace webové str{nky; zdroj: Vysekalov{ (Vysekalov{, 2007) 39

40 pouk{zat na důvody, proč by se měli vydat pr{vě tím či oním směrem při volbě produktu. Webov{ prezentace společnosti musí být poutav{, přil{kat cílovou skupinu, na níž se zaměřuje, a musí na ni působit tak, aby se potenci{lní z{kazníci cítili dobře. Důvody jsou prosté, jak už jsem uv{děl v předešlé kapitole přejít na web konkurenční společnosti neznamen{ ujít několik set metrů pěšky, ale dvakr{t-třikr{t kliknout myší. K tomu, aby z{kazník neodešel během několika vteřin jinam, slouží nejen kvalitní webdesign využívající psychologického působení barev, tvarů, což lze dobře vidět na modelu na obr{zku 22 z (Vysekalov{, 2007), který shrnuje veškeré z{kladní aspekty spr{vného působení webových str{nek na psychiku jedince. Jak uv{dí (Horný, 2004), při koncepci firemních internetových str{nek je nutné se uvědomit, že může plnit více rolí a oslovit více skupin uživatelů, např. vlastní zaměstnance, koncové z{kazníky, obchodní partnery, popřípadě i z{jemce o pracovní poměr. Vedle kvalitního webdesignu, jenž umožní uživateli snadnou orientaci na str{nk{ch, by měly současné webové prezentace firem splňovat n{sledující podmínky: (Horný, 2004), (Scott, 2007) Povinn{ položka Informace o firmě, jejíž umístění je vhodné do patičky webu. Obsahovat by měla zejména: o Konkrétní informace o firmě, jejích aktivit{ch, produktech či služb{ch, jejich popis případně doplněný fotodokumentací o Management firmy včetně fotografií a stručného životopisu o Historie firmy o Finanční údaje Prezentovat informace pro uživatele produktů a služeb, k jejichž popisu je vhodné využít audiovizu{lního materi{lu fotografií, zvuku, videa, atd. Důležité je zachovat věcný přístup a věrně informovat o produktech za pomoci informačního servisu: o Technické parametry výrobkové řady 40

41 o FAQ 5 o Nez{vislé testy o Kompletní uživatelské manu{ly v elektronické podobě o Elektronické katalogy výrobků o Ceník o Reference o Možnost on-line objedn{vky zboží Využívat moderních metod pro vytv{ření webových str{nek, například: o Dodržov{ní standardů WEB o Napojení na soci{lní sítě 7 o Možnosti personalizace str{nek: po registraci výběr skinů, uživatelských seznamů nakoupených výrobků, apod. o Dobr{ viditelnost v internetových vyhled{vačích Moderní komunikace se z{kazníkem: o Autorský blog o Podcast o Diskusní fórum 5 Frequently Asked Questions, nejčastěji pokl{dané ot{zky a odpovědi na ně 6 O standardech WEB 2.0 více v kapitole Současné stadardy webové reklamy a webdesignu 7 Facebook, Twitter, Last.fm, apod. 41

42 4. Současné standardy webové reklamy a webdesignu V předchozích kapitol{ch jsem teoreticky i prakticky uvedl z{klady grafické pr{ce a jejich užití na webu, výhody on-line reklamy oproti jiným sdělovacím prostředkům a z{kladní rozdělení webových reklam obecně. V této kapitole předvedu standardy, jimiž by se tvůrci současných webových str{nek měli řídit, d{le uvedu aktu{lní trendy z oblasti technologického postupu webu a v neposlední řadě stručně shrnu grafické form{ty, které se na internetu nach{zejí společně s jejich výhodami a nevýhodami Obecné standardy on-line reklamy Mohutný rozvoj internetu z{konitě musel vyústit v absolutní reklamní džungli, kdy si tvůrci reklamních poutačů mohli dělat prakticky cokoliv, co je jen napadlo. Tento fakt dosti znevýhodňoval internet jako médium v boji s tiskem či televizí, pokud mělo být dosaženo konkurenceschopnosti na reklamním poli, bylo nutné přijít s razantním a radik{lním krokem. Naštěstí se před třemi lety odhodlalo Sdružení pro internetovou reklamu 8 (d{le pouze SPIR) udělat za tímto chaosem tlustou č{ru a vytvořit vzorník reklamních form{tů, které by na českém území zjednodušily pr{ci nejen reklamním agentur{m, ale také webdesignérům. Z{kladní rozdělení si uk{žeme v n{sledujících několika odstavcích, kompletní dokumentace je uvedena na internetových str{nk{ch SPIR 9. (Sdružení pro internetovou reklamu) 8 SPIR je profesní sdružení subjektů působících v oblasti internetové reklamy. Skl{d{ se ze dvou sekcí, které reprezentují obě strany reklamního trhu sekce internetových médií (poskytovatelé reklamního prostoru) a sekce zadavatelů internetové reklamy (inzerenti a medi{lní agentury). Z{kladním úkolem SPIR je rozvoj internetu a standardizace internetové reklamy v ČR, proto je také zadavatelem a garantem dvou stěžejních projektů - NetMonitor a AdMonitoring. Současně sdružení pracuje na kultivaci internetového reklamního trhu. Celkem SPIR v současnosti sdružuje 62 členů, např. MAFRA, Computer Press, Seznam.cz, Aukro a další

43 Standardům vévodí tabulka pětice doporučených reklamních form{tů (Tabulka 7), které mají podle SPIR nejlepší uplatnění v praxi. Za ní nalezneme souhrn veškerých form{tů reklamních bannerů, které se na internetu vyskytují (dodržují-li doporučené standardy). U nich n{s zaujme zejména soupis pozn{mek, v nichž se nach{zí doplňující informace pro vybrané form{ty. Například zvukový efekt by se dle SPIR měl spouštět pouze na pokyn uživatele, buď po najetí kurzoru myši anebo stisknutí patřičného tlačítka. D{le zde nalezneme omezení animací na maxim{lní počet 25 snímků za vteřinu, což znemožňuje využít podprahové reklamy 10. Ofici{lní n{zev Rozměry v pixelech (ŠxV) Leaderboard 728 x KB Square 250 x KB Skyscraper 120 x KB Medium Rectangle 300 x KB Full Banner 468 x KB Tabulka 7: Doporučené reklamní form{ty Velikost souboru Další početnou skupinou, kterou se SPIR zaobír{, jsou tzv. vyskakovací reklamy. Jsou zde zahrnuty jak pop-up okna, kter{ ale v současné době valn{ většina prohlížečů automaticky blokuje, tak i rozbalovací reklamní bannery, které na určitý čas překryjí významnou č{st webové str{nky. Nejen dle standardů, ale také dle Etického kodexu SPIR, které je k dispozici na internetových str{nk{ch SPIR, musí všechny rozbalovací bannery obsahovat viditelné tlačítko pro uzavření, navíc mohou být přes obsah webu rozbaleny maxim{lně po dobu patn{cti vteřin. V posledních dvou sekcích se SPIR zaměřil na textové a video reklamy. A zatímco standardy textové nejsou nikterak zajímavé, obsahují prakticky pouze omezení co do počtu znaků, ve video reklamě nalezneme hned několik 10 Sign{l, který lidské oko sice zahlédne, vědomě jej nezpracuje. Zpracuje jej pouze podvědomí, což může na některé jedince působit až manipulačně, tj. začnou se chovat podle zpracovaného podprahového sign{lu. 43

44 perliček. Jedn{ se nejčastěji o video spoty, které se spouštějí před videoobsahem webových str{nek. Uživatel během nich musí mít možnost vypnout zvuk, popřípadě reklamu zastavit, umožnění rychlého přet{čení reklamního bloku je však výslovně zak{z{no. Z{roveň není stanovena maxim{lní délka spotu, pouze se doporučuje deset vteřin. Standardizace internetové reklamy dle mého n{zoru přinesla do prostření internetu takzvanou št{bní kulturu, kter{ zde dříve chyběla. Během běžného proch{zení webu lze často narazit na reklamní bloky všeho druhu, přičemž je vidět, že si jejich tvůrci d{vají opravdu z{ležet na dodržov{ní standardů např. tlačítka pro uzavření rozbalujících bannerů jsou využity prakticky u všech kampaní, zvukové efekty jsou opravdu spouštěny až při aktivaci, apod. Nabídka společnosti Internet BillBoard 11, člena SPIR a největší české společnosti zaměřené na on-line reklamu, ukazuje, že se těmito standardy v praxi opravdu řídí (viz obr{zek 23). Na druhou stranu jsem nemile překvapen nulovým omezením tzv. intextové reklamy 12, které s oblibou využívají například weby společnosti MAFRA. Dle mého Obr{zek 23: č{stečn{ nabídka bannerové reklamy společnosti Internet Billboard; zdroj: Reklama označuje slova v textu podtržením, po najetí myši nad slovo se zobrazí reklamní okénko v okolí slova. 44

45 n{zoru je intextov{ reklama podlým způsobem kampaně, neboť zobrazuje reklamní obsah po oklam{ní uživatele tím, že se na první pohled tv{ří jako běžný odkaz. Osobně považuji bannerovou reklamu za vhodnou pouze pro velké společnosti s celorepublikovým působením. Malým firm{m se totiž investice nevyplatí, za což může především tzv. bannerov{ slepota. Lidé zvyklí používat internet si už vůči pohyblivým reklam{m vytvořili imunitu, takže jim neděl{ problém je vědomě ignorovat. Vzhledem k faktu, že inzerent platí za počet zobrazení, nikoli prokliků, se tento způsob propagace st{le více prodražuje. Bannerové reklamy se tedy hodí zejména pro udržovací kampaň, neboť podvědomě na z{kazníka působí i přes vliv bannerové slepoty. K prosazení na webu je však nutné, jak jsem předvedl, využívat jiných marketingových způsobů, které odlišují internet od ostatních souč{stí běžného obchodního styku Moderní standardy webových prezentací V bakal{řské pr{ci neust{le zmiňuji obrovské tempo, jímž se internet v posledních letech vyvíjí. M{ se tento progres ale nějak{ pravidla? Bezpochyby ano, z historického hlediska jsme nyní, jak lze vidět z tabulky 8, na přelomu druhé a třetí etapy, tj. webu 2.0 a 3.0. Pomineme-li data uveden{ v tabulce, v níž jsou uvedeny podrobné informace o jednotlivých etap{ch, můžeme říct, že označení web 2.0 či 3.0 není označení technologií, nýbrž jakýmsi marketingovým tahem 13 označujícím str{nky, které využívají moderních postupů. Z{kladní charakteristiky webu 2.0 jsou tedy: Uživatelsky generovaný obsah: obsah webových str{nek netvoří pouze administr{tor, ale i běžní uživatelé

46 Interaktivita v r{mci použité č{sti str{nky: viz technologie AJAX v tabulce 8. Sdílené služby mezi weby: cílem udržet z{kazníka co nejdéle, na jednom webu je pak možné vyřídit vše podstatné. Kontextově přizpůsobivé aplikace: obdobně jako u kontextové reklamy (viz kapitola 3) lze s pomocí dostupných údajů blíže specifikovat obsah webových st{nek, například předpověď počasí pro danou oblast. Sofistikované vyhled{v{ní: dok{že nalézt na webu požadované informace lépe, než obecné vyhled{vače, např. Google. S nads{zkou by se dalo říct, že web 2.0 tak sice existuje, nicméně ne všichni v praxi využívají všechny jeho standardy. V r{mci pokročilého vývoje se v brzké době dočk{me další etapy možností pro vývoj{ře, potažmo nových webových standardů s n{zvem web 3.0. Jeho největšími přínosy by z hlediska technologického pokroku měly být: Mikroform{ty 14 : umožní do webových str{nek vložit strojově čitelné informace, díky nimž se budou webové vyhled{vače moci lépe orientovat a uživatelům tak umožní lépe pracovat s obsahem webových str{nek. Sémantický web: umožní strojům číst text tak, aby z něj byly schopné pochopit jeho význam a dod{vat tak uživatelům při vyhled{v{ní relevantnější výsledky. OBSAH WEB 1.0 ( ) Obsah je vytv{řen většinou pouze provozovatelem. WEB 2.0 ( ) WEB 3.0 (2010-?) N{vštěvníci se aktivně podílejí na tvorbě obsahu webu; jednoduch{ spr{va obsahu pomocí Uživateli tvořený obsah zůst{v{ a nabýv{ na síle a významu, přich{zejí

47 INTERAKCE AKTUALIZACE KOMUNITA PERSONALIZA -CE VYHLED[V[N Í REKLAMA FORMA PREZENTACE Interakce není dobře technicky provediteln{. Není tolik četn{, z{visí na prioritě webu jako komunikačního kan{lu vlastníka. Neexistuje, n{vštěvník pouze pasivně přijím{ prezentované informace. Ž{dné či omezené možnosti personalizace. Katalog a hled{ní v katalogu. Banner. Webové str{nky vs. aplikace na desktopu. content management systémů. Interakce je běžn{ a vítan{. Aktualizace je velmi čast{, v případě vysoké interaktivity a uživatelsky tvořeného obsahu je téměř nepřetržit{. Jednotlivec je souč{stí rozs{hlých komunit, které se sdružují a spoluvytv{řejí obsah webu. Pokrokem technologie (cookies, technologie AJAX 15 ) je umožněna velmi rozs{hl{ míra personalizace. Lokalizované vyhled{v{ní pomocí klíčových slov nebo fr{ze. Kontextov{ reklama z{visl{ na obsahu a poloze. Webové aplikace s rozhraním na desktopu, přístup pro registrované účty. Tabulka 8: Vývoj internetu, zdroj: (Marš{lkov{, 2009), (Cvrček, 2008) mikroform{ty. Interakce je běžn{ a vítan{. Aktualizace je velmi čast{, v případě vysoké interaktivity a uživatelsky tvořeného obsahu je téměř nepřetržit{. Kolektivní inteligence nabýv{ na významu, zjednodušuje se sdílení informací mezi komunitami. Rozs{hl{ míra personalizace zůst{v{ a nabýv{ na významu. Geografické vyhled{v{ní formou věty s podmětem, předmětem, časem a místem. Personalizovan{ s ohledem na místo, obsah a čas. Web OS, aplikace jako služba, přístup pod jednotnou identifikací. 15 AJAX (Asynchronous JavaScript and XML) je technologie, jež vznikla spojením XML, JavaScript, HTTP a (X)HTML. AJAX str{nce umožňuje kontaktovat server a obdržet od něj libovoln{ data, bez nutnosti nahr{v{ní celé str{nky znovu. To znamen{, že si uživatel v jedné č{sti str{nky nastaví konkrétní prvek na požadovanou hodnotu a str{nka reaguje okamžitě bez nutnosti stahov{ní dat. Na technologii Ajax je postaven mj. server Facebook. Zdroj: z 47

48 Jakkoli mohou dnes tyto údaje jako fikce, mohutný informační boom, který zaznamen{v{me v posledních letech, nasvědčuje tomu, že se nemusí jednat o nesplnitelné sny. Dokonce se nyní hovoří i o webu 4.0, jehož z{kladem by měl být například webový operační systém. Křivka vývoje internetu, včetně výhledu na příštích 20 let, je k nahlédnutí na obr{zku 24. Obr{zek 24: Časov{ řada vývoje technologického vývoje internetu, zdroj: (Spivack, 2007) 4.3. Grafické formáty na internetu Dalšími standardy, které bezpodmínečně musím v této bakal{řské pr{ci zmínit, jsou grafické form{ty využité v síti Internet. V n{sledujícím textu uv{dím jejich z{kladní charakteristiky, popisuji vhodnost užití a jejich výhody a nevýhody. 48

49 JPEG, Joint Photographics Experts Group Charakteristika: Form{t JPEG představuje v současnosti nejrozšířenější způsob pro uchov{ní fotografií, jedn{ se také o nejpoužívanější grafický form{t v r{mci sítě Internet. Jeho výhody jsou nesporné, dok{že zobrazit velmi složité barevné struktury a z{roveň si zachovat poměrně malou velikost. Může za to způsob ztr{tové komprese, který JPEG využív{, faktu, že lidské oko je méně citlivé na změny barvy než na změny jasu. (Bedřichov{, 2008) JPEG se tak hodí zejména pro fotografie (viz obr{zek 25) a podobný obrazově Obr{zek 25: Uk{zka fotografie ve form{tu JPEG, zdroj: vlastní tvorba složitý obsah internetu, nikoli však pro animace nebo webový layout, neboť souvislé barevné plochy získají nepříjemný šum, viz obr{zek 26. Při koncipov{ní webových str{nek, zejména při pr{ci se strukturní a identifikační grafikou, bychom tak měli d{t přednost jednomu z form{tů GIF či PNG (viz níže). Další nevýhodou form{tu JPEG je nemožnost vytvořit průhledné pozadí, popřípadě animace. Koncovka: *.jpg, *.jpeg, *.jpe Počet barev: až 24 bitů barev, až 256 odstínů šedi Typ form{tu: rastrový detaily Vhodné užití: fotografie, obrazy, u nichž není nutné zobrazovat plné vrstvu Nevýhody: Neumožňuje zobrazit animace, nelze vytvořit průhlednou 49

50 GIF, Graphics Interchange Format Charakteristika: Form{t GIF je rastrový grafický form{t, který využív{ bezztr{tovou kompresi LZW84 16, jež mu umožňuje vytv{řet souvislé barevné plochy bez sebemenších kvalitativních změn. Svou popularitu získal zejména kvůli dvěma vlastnostem GIF zvl{d{ vytvořit průhledné pozadí a, co je ještě podstatnější, umí pracovat Obr{zek 26: Srovn{ní form{tu JPEG a GIF, JPEG m{ evidentní problémy s rovnoměrnými barevnými plochami; zdroj: prezentace 4IT357 s animacemi. Na druhou stranu u něj nalezneme hned několik z{porů, tím nejvýznamnějším je mal{ barevn{ hloubka, GIF umí pracovat pouze s 256 odstíny barev. V animacích se tento faktor d{ č{stečně obejít, neboť pro každý snímek lze vytvořit specifickou matici barev, nicméně jde pouze o č{stečné řešení problému. GIF se díky nulovým ztr{t{m hodí výtečně pro strukturní a identifikační grafiku webu, složitější grafické obrazce nicméně zobrazit nedok{že. Přípona: *.gif Počet barev: až 256 barev Typ form{tu: rastrový webu Vhodné užití: Animované obr{zky, strukturní a identifikační grafika Nevýhody: Mal{ barevn{ hloubka 16 LZW84 je bezeztr{tový kompresní algoritmus vyvinutý Abrahamem Lempelem, Jacobem Zivem a Terry Welchem, který byl poprvé publikov{n již v roce Zdroj: 50

51 PNG, Portable Network Graphic Format Charakteristika: Form{t PNG je určený pro bezztr{tovou kompresi rastrové grafiky, byl vyvinut jakožto zdokonalení a n{hrada form{tu GIF. Dalo by se tedy oček{vat, že PNG převezme od GIFu veškeré jeho výhody jako schopnost vykreslovat barevné plochy bez šumu, obr{zky bez vrstvy pozadí či animace Obr{zek 27: Uk{zka pokročilé průhlednosti form{tu PNG, zdroj: digitalne.centrum.cz a přid{ větší barevnou hloubku. Oček{v{ní je to zcela spr{vné, PNG zvl{dne, dle zvolené palety, až 48bitové barvy, pokročil{ průhlednost také není problém (viz obr{zek 27). Bohužel ale není přítomna animace, pro niž sice existují dva n{vrhy 17, většího uplatnění ale zatím nedos{hly. Stejně tak PNG bez problému zvl{dne složité obr{zky, například fotografie, nicméně za cenu mnohon{sobně vyšší velikosti souboru, než je tomu u form{tu JPEG. Přípona: *.png Počet barev: dle palety, až 48 bitů Typ form{tu: rastrový Vhodné užití: Strukturní a identifikační grafika webu animace Nevýhody: Velk{ datov{ n{ročnost u složitějších obr{zků, neumožňuje 17 N{vrh MNG (Multiple-image Network Graphics) byl uvolněn na poč{tku roku 2001, větší uplatnění ovšem nenašel. V roce 2004 byl vznikl form{t APNG (Animated Portable Network Graphics), jeho využití sice nebylo standardizov{no, nicméně současné verze prohlížečů Mozilla a Opera si s ním dok{žou poradit. (Jan{k, 2002) 51

52 Formát FLASH Charakteristika: Form{t FLASH 18, který původně vznikl ve společnosti FutureWave Software 19, je jediným vektorovým form{tem uvedeným v tomto výpisu. Spojuje výhody animovaného obrazu s širokou barevnou paletou a interaktivitou, čímž se z něj st{v{ Úloha grafiky v internetové reklamě jedinečně komplexní n{stroj pro využití ve webové reklamě. Uživatelé ocení zejména Obr{zek 28: Uk{zka animovaného banneru ve form{tu FLASH, zdroj: dynamiku, kter{ u statických obr{zků chybí, a interaktivitu, jež pro změnu chybí animovaným obr{zkům ve form{tu GIF. Naleznou se i z{pory, zejména nutnost mít nainstalovaný příslušný plug-in do webového prohlížeče, problémy může způsobit i vyšší hardwarov{ n{ročnost. Přípona: *.swf, *.fla 20 Počet barev: Typ form{tu: vektorový Vhodné užití: internetov{ reklama, interaktivní animace, Nevýhody: Vyšší hardwarov{ n{ročnost, nutnost mít nainstalovaný příslušný software Společnost FutureWave Software byla později koupena firmou Macromedia, kterou n{sledně v roce 2005 spolkl gigant jménem Adobe, č{stečně čerp{no z 20 Soubory s příponou *.fla lze editovat v příslušném programu, *.swf slouží pouze pro čtení. 52

53 Další grafické formáty Úloha grafiky v internetové reklamě N{sledují grafické form{ty, které sice jsou hojně využív{ny v běžné praxi, nicméně pro užití na internetu nejsou vhodné především z důvodu velkého objemu či form{tu dat: TIFF: Bezztr{tový form{t, který se proti ostatním vymyk{ vysokou barevnou hloubkou (až 48 bitů) a vysokou kvalitou zachovaného obrazu. Problémem je velký objem dat, díky němuž se na internetu nemůže prosadit. Využití nach{zí zejména ve fotografii, dnes je už prakticky úplně nahrazen form{tem RAW. RAW: Tzv. syrový form{t, který v sobě m{ obsažen{ data přímo z fotoapar{tu. Velmi výhodný pro fotografy, neboť umožňuje v PC bezztr{tově upravovat parametry fotografie, např. vyv{žení bílé, expoziční stupně (+/- 1EV 21 ), možnost exportovat nespočet verzí fotografie, atd. BMP: Z{kladní rastrový form{t s až 24bitovou barevnou hloubkou, pro využití na internetu nevhodný kvůli velkému objemu dat Ve víru optimalizace Svět internetu a webových str{nek je protk{n celou řadou technických aspektů, na něž je nutné se při budov{ní webové prezentace zaměřit. V n{sledujících podkapitol{ch uv{dím některé z faktorů, na něž je nutné se při dolaďov{ní str{nek zaměřit. 21 EV, neboli expoziční hodnota (z angl. Exposure Value) je absolutní veličina, poukazující na množství osvětlení, ve kterém je vytvořena fotografie. 53

54 Optimalizace rozlišení Úloha grafiky v internetové reklamě Spolu s aktu{lním boomem v prodeji notebooků také přišel nelehký úkol pro webové designéry přizpůsobit své str{nky pro vešker{ možn{ rozlišení. Může to znít ban{lně, nicméně v současné době jsou na trhu displeje se čtyřmi různými poměry stran (viz obr{zek 30), přičemž pro každý poměr stran vznik{ hned několik různých rozlišení obrazovky 22. Ze statistik (viz Obr{zek 30: Obvyklé poměry stran monitoru, zdroj: Obr{zek 29: Graf statistického vývoje využívaných rozlišení a přelomu roku 2009 a 2010, zdroj: obr{zek 29) uvedených v průzkumech společnosti TOPlist s.r.o. 23 vyplýv{, že se na první příčce s necelými 30 procenty st{le drží 1024x768 v klasickém poměru 4:3, za poslední rok ale ztratilo 5 procentních bodů. Oproti tomu širokoúhlé rozlišení 1280x800 za stejnou dobu zhruba 3 procentní body získalo a vyskočilo 22 Rozlišení obrazovky: je počet pixelů (nebo maxim{lní rozlišení obrazu), které může být zobrazeno na obrazovce, ud{v{ jako počet sloupců ku počtu ř{dků, např. 1280x800px

55 na druhou příčku. Z grafu na obr{zku 29 lze ale také vidět obrovský počet jiných rozlišení, pro které by webdesignéři měli také optimalizovat své str{nky Webové prohlížeče Dalším technickým faktorem, na nějž se musí weboví designéři zaměřit, je také optimalizace pro různé webové prohlížeče. Každý program totiž využív{ svůj vlastní kód pro zpracov{ní internetového obsahu, takže str{nky dobře vypadající ve Firefoxu nemusí fungovat v Opeře totožným způsobem. V současné době je nehojněji rozšířena pětice prohlížečů, přičemž Internet Explorer se zejména díky integrovanosti do operačních systémů Windows st{le drží na prvním místě. Z glob{lních statistických údajů 24, jež jsou k dispozici na obr{zku 31, lze vyčíst téměř 60tiprocentní drtivé vedení Internet Exploreru, jeho největší konkurent, Mozilla Firefox, se v aktu{lním žebříčku (data generov{na ) drží s 25% na druhém místě. V optimalizaci bych se nemělo zapomínat ani na trio Google Chrome, Opera či Safari. Obr{zek 31: Graf zastoupení webových prohlížečů, zdroj: Internetové vyhledávače SEO Zkratka SEO skrýv{ Search Engine Optimalization, což znamen{ optimalizace pro webové vyhled{vače. Ta je pro úspěch webové kampaně velmi důležit{, neboť, jak uv{dí (Krug, 2007), pro mnoho uživatelů jsou vyhled{vače typu Google či Seznam výchozím bodem při surfov{ní na internetu. Jak uv{dím v n{sledující kapitole, uživatelé se většinou spokojí

56 s některým z prvních výpisů z vyhled{vacího enginu, čili SEO by měla způsobit posun na tato místa. Jedn{ se o dlouhodobý proces, jehož výsledky lze oček{vat v ř{dech měsíců, během kterých by se str{nky měly optimalizovat zejména z těchto aspektů: (SEO průvodce) Klíčov{ slova: po průzkumu trhu a zjištění nejvyhled{vanějších spojení v dané oblasti je nutné výsledky využít v textech uvedených na webu. Zajištění kvalitního webhostingu Spr{vné řazení nadpisů H1-H3: Obecně platí, že na každé str{nce by měl být pouze jeden nadpis H1, počet H2 a H3 není omezen. Je však nutné se vyhnout nesystematickému řazení, za nadpisem H3 už nesmí být použitý H2. Obsah webu: Při prohlížení kódu a vypnutí kask{dových stylů CSS by se měl obsah str{nek zobrazit v pořadí od nejdůležitějšího po nejméně důležitý (H1, textový obsah, menu, <) URL adresa: Struktura URL adresy by měla na první pohled prokazovat obsah str{nky 56

57 5. Chování zákazníka na webu Úloha grafiky v internetové reklamě V minulých kapitol{ch jsem uvedl spoustu způsobů, jak vytvořit spr{vnou webovou prezentaci společnosti případně internetovou reklamní kampaň, jaké by se měly dodržovat technologické standardy, které grafické form{ty jsou pro internet vhodné a které nikoliv, ale pokud někdo chce vytvořit opravdu kvalitní webové str{nky, musí se dok{zat vžít do role uživatele. Jako stručný n{vod by mohla sloužit tato kapitola mé bakal{řské pr{ce, neboť jejím n{mětem je pr{vě chov{ní z{kazníka na webu a způsoby jeho rozhodov{ní Jak čteme web Jedním ze z{kladních rozdílů mezi webovým designérem a uživatelem jsou představy nad tím, jak by se měl web užívat. Tyto představy jsou totiž diametr{lně odlišné, zatímco designér douf{, že z{kazník pečlivě probere všechny možnosti a n{sledně vybere nejlepší alternativu, z{kazník na takovéto úvahy nem{ ani chuť, ani čas. Proto je nutné si při navrhov{ní webových str{nek uvědomit, jakým způsobem lidé s webem pracují. Asi nejlépe to popisuje (Krug, 2007), který uv{dí trojici faktů o použív{ní webu: Pravda první: Str{nky uživatelé nečtou, ale prohlíží Tato pravda vych{zí z faktu, že uživatelé str{ví minoritní č{st času na webu čtením jeho obsahu. Místo čtení totiž web prohlíží, skenují a hledají slova, kter{ upoutají jejich pozornost. Výjimku samozřejmě tvoří čl{nky zaměřené na informov{ní v podobě textu popisy produktů, zpr{vy, povídky, atp., nicméně cesta k těmto dokumentům vede přes letmé zmiňované skenov{ní textu, viz obr{zek 32. Pravda druh{: Neprov{díme optim{lní výběry, ale děl{me kompromisy Navazuje na první pravdu v bodě upout{ní pozornosti. Uživatelé webových str{nek nehledají nejlepší alternativu, ale vybírají první 57

58 rozumnou volbu, čemuž se řík{ satisficing 25. Činí tak z několika důvodů satisficing je rychlejší a efektivnější než vybír{ní nejoptim{lnější alternativy. Za zvolení špatné alternativy navíc nepřich{zí prakticky ž{dný trest, špatný odhad zachr{ní stisknutí tlačítka Zpět 26. Pravda třetí: Neb{d{me nad tím, jak věci fungují, prostě to nějak uděl{me Lidé jsou od přírody leniví, takže m{lokdo bude zkoumat n{vody, aby zjistil, jak ta či ona funkce vlastně funguje. Jakmile se naučí jeden způsob, který funguje, je vysoce pravděpodobné, že nebudou ochotni se učit jiný způsob, byť by byl sebeefektivnější. Obr{zek 32: Rozdíl mezi vním{ním designéra a uživatele, zdroj: Krug (Krug, 2007) Z uvedeného textu vyplýv{, že ž{dný průměrný uživatel na webu neexistuje. Každý uživatel m{ své vlastní preference, podle nichž čte, resp. prohlíží webové str{nky. Pro vytvoření kvalitní webové prezentace společnosti je tak velmi důležité, aby se designér pokud možno co nejvíce vžil do uživatele, vytv{řil dostatečně rozeznatelné sekce a spr{vně navrhl hierarchii webu. 25 Termín satisficing vznikl zkřížením slov satisfying uspokojující a sufficing dostačující, vymyslel jej ekonom Herbert Simon v roce Podle (Krug, 2007) je Zpět nejvyužívanější funkcí webových prohlížečů 58

59 5.2. Jak pracujeme s webem Úloha grafiky v internetové reklamě V praxi se d{ využít hned několik technik, kterými lze zjistit, zda předpokl{dané chov{ní uživatelů odpovíd{ skutečnosti. Okamžitě z těchto variant vyloučíme všelijaké dotazníky či přímé pozorov{ní chov{ní uživatele, neboť jeho výsledek může být jakkoli ovlivněn, byť pouze vědomím, že je pozorov{n 27. Místo toho uvedu některé metody, díky nimž lze získat velmi zajímav{ data o chov{ní z{kazníka na konkrétní webové str{nce: Metoda HEATMAP umožňuje vytv{řet přehledné mapy z{jmu uživatelů na webových str{nk{ch. Speci{lně vytvořený software monitoruje, na kter{ místa uživatelé kliknou myší, a vygeneruje tzv. mapu kliknutí, z níž lze jasně vidět, které č{sti webu jsou pro uživatele poutavé a které nikoliv, viz obr{zek 33. Pokročilejší software umožňuje navíc segmentovat z{kazníky, například dle místa, odkud na web přišli, popřípadě rozlišit první a opakovanou n{vštěvu z jednoho počítače. Lze tak Obr{zek 33: Uk{zka využití metody HEATMAP; zdroj: (Plotěný, 2009) například zajímavě pozorovat z{jmy uživatelů, kteří se na str{nky dostali po zad{ní konkrétních klíčových slov do webových vyhled{vačů. Pro webové designéry představují tyto mapy spoustu užitečných informací, zejména lze zjistit, kter{ tlačítka uch{zejí pozornosti n{vštěvníků, což přinutí k zamyšlení a n{sledné úpravě designu. D{le pak lze zjistit chybějící odkazy, když uživatelé klikají na neaktivní prvky, popřípadě k identifikaci klíčových prvků str{nky, které je nutné při rozs{hlejších úprav{ch designu zachovat. (Plotěný, 2009)

60 Eye-tracking umožňuje stejně jako HEATMAP vytvořit mapu z{jmů, nikoli však pouze u odkazů, nýbrž na celých str{nk{ch. Metoda eye-tracking neboli stopov{ní dr{hy zraku byla v USA využív{na k optimalizaci reklamy už od šedes{tých let (Vysekalov{, 2007), a tak není n{hodou, že se v současnosti využív{ i u reklamy na internetu. Jejím z{kladem je systém dvou kamer přichycených na brýlích, první kamera pracuje v infračerveném spektru Obr{zek 34: Uk{zka metody Eye-tracking, čeerven{ č{ra zobrazuje konec obrazovky; zdroj: (Kopta, 2009) a sním{ pravé oko respondenta, druh{ sleduje scénu před respondentem, čili místo, na nějž upře svůj zrak, byť jen na zlomek vteřiny. Specializovaný software n{sledně vytvoří mapu, na níž lze přehledně vidět všechny objekty z{jmu respondenta, viz obr{zek 34. Díky měření čirých faktů přin{ší metoda eye-tracking velmi relevantní informace o tom, jak testovaný subjekt používal web, kter{ místa upoutala jeho pozornost a kter{ nikoli. (Kopta, 2009) 5.3. Internetem křížem krážem Zjištění chov{ní uživatelů na konkrétním webu je velmi užitečné pro jeho další rozvoj, pro bližší pochopení chov{ní z{kazníků je ale nutné také vědět, jak se na web dostali a jak se prokous{vali hierarchickou strukturou. K tomu je nutné využívat dalších technologických principů, jež jsou určeny pr{vě pro detailní monitoring chov{ní uživatelů na webu, např.: 60

61 Navrcholu.cz: nabízí zajímavou službu analýz uživatelských cest 28, které ukazují, jak se n{vštěvníci po webu nejčastěji chovali, v jaké posloupnosti str{nky prohlíželi, kde n{vštěvu Obr{zek 35: Uk{zka analýzy uživatelských cest; zdroj: zah{jili a kde opustili, viz obr{zek 35. Google Analytics: velmi rozs{hl{ služba společnosti Google, kter{ umožňuje například získat informace o tom, z jaké webové str{nky uživatelé přišli a kam směřovali své kroky d{le. Spojením těchto dvou analýz lze vytvořit síťový diagram, viz obr{zek 36, který umožní vytvořit celistvý pohled na vzorce chov{ní uživatelů na daném Obr{zek 36: Síťový diagram kombinující údaje z analýzy uživatelských cest a Google Analytics; zdroj: (Kopta, 2009) webu. Díky nim lze snadno odhalit rozdíly mezi předpokl{daným chov{ním z{kazníka a skutečností, například uživatel se vrací tam a zpět atp. (Kopta, 2009)

62 5.4. Kde se nacházím? Úloha grafiky v internetové reklamě Vzhledem k mnohokr{t zmiňovanému faktu, že pro většinu uživatelů představuje v posledních letech z{kladním výchozím bodem při proch{zení internetu vyhled{vač, ať už Google, Seznam či jiný, je nutné tomuto faktu uzpůsobit i samotný design webu. N{vštěvník se totiž většinou neproklik{v{ hierarchií internetových str{nek od domovské str{nky, naopak je vržen kamsi do víru obsahu, kde se musí s{m zorientovat. Při n{vrhu webu je nutné se tímto řídit a, pokud je to možné, ještě před spuštěním analyzovat design například s využitím tzv. kufrového testu (Krug, 2007). Ten řík{, že pokud jsou str{nky navrženy dobře, neměl by uživatel mít problém okamžitě odpovědět na n{sledující ot{zky: O jaký server se jedn{? (Logo serveru) Na jaké jste str{nce? (N{zev str{nky) Jaké jsou hlavní sekce tohoto webu? (Sekce) Jaké na této úrovni m{te možnosti? (Lok{lní navigace) Kde se nach{zíte v hierarchii serveru? (Ukazatele zde se nach{zíte ) Jakým způsobem můžete vyhled{vat? 62

63 6. Analýza grafického zpracování webových prezentací vybraných společností Praktickou č{st mé bakal{řské pr{ce věnuji analýze grafického zpracov{ní internetových prezentací dvou vybraných společností. Po zralé úvaze jsem se rozhodl pro dvojici nadn{rodních firem, které svou marketingovou strategii zakl{dají na pojmu image, který je zejména pro mladé lidi nedílnou souč{stí každodenního života. Jedn{ se o společnosti Adidas a Nike, čili výrobce zejména sportovního oblečení. Důvodem, proč jsem si vybral pr{vě tyto dvě společnosti, je jejich odvěk{ rivalita na trhu, kter{ se přenesla i do sítě Internet. Jelikož si obě společnosti zakl{dají na kvalitním image a snaze být, lidově řečeno, in, představují i jejich webové prezentace přehlídku všelijakých origin{lních designových n{padů, které se ale mnohdy přenesou přes pomyslnou hranici snesitelnosti a provozuschopnosti. Ve své analýze tedy hodnotím zejména grafické zpracov{ní spolu s použitelností, zmiňuji ale také obsahovou str{nku a technické parametry typu optimalizace pro webové prohlížeče či pro různ{ rozlišení, kterým ve výsledném hodnocení přikl{d{m menší č{st důležitosti. Nesporně důležitým faktorem, nikoli však z grafického hlediska, je i lokalizace webových str{nek, kter{, jak uv{dím d{le, není automatickou souč{stí webových prezentací těchto dvou společností. V neposlední řadě zjišťuji, zda se webové prezentace zaměřují také na moderní trendy marketingových komunikací, jako je napojení na soci{lní sítě typu Facebook, využív{ní blogů, podcastů, ové reklamy a dalších forem on-line propagace společnosti Metodika hodnocení Pro oba weby nejprve uv{dím několik z{kladních informací o jejich webové prezentaci, do jakých je rozdělena sekcí, případně jak{ je jejich cílov{ 63

64 skupina. N{sledně prov{dím analýzu na z{kladě čtyř skupin kritérií grafickou analýzu, přehlednost a použitelnost, technické zpracov{ní, marketingové využití webu pro které jsem určil v{hu v hodnocení a ze kterých budu n{sledně vyvozovat z{věry a doporučení pro designéry webu. Pro hodnocení použiji metodu multikriteri{lního hodnocení. V tabulk{ch hodnocení uv{dím hodnoty 0-10, přičemž 0 značí absolutní absenci daného prvku, 10 perfektní zpracov{ní v dané oblasti. V bodech, kde jsou odpovědi ANO/NE uděluji hodnocení 10 a 0, splňuje-li daný parametr č{stečně, uděluji hodnocení Seznam kritérií N{sleduje seznam kritérií spolu s v{hou, které jsem jednotlivým skupin{m přiřadil, pod seznamem uv{dím podrobnější charakteristiku vybraných kritérií: Grafick{ analýza str{nek - 40% o Barevné schéma Kontrast Zvolené barvy o Typografie Čitelnost písma Využití fontů plně podporujícího českou diakritiku Nekombinov{ní patkového a bezpatkového fontu o Originalita o Animace o Zapamatovatelnost o Konzistence grafického designu Přehlednost a Použitelnost - 30% o Identifikace webu Logo N{zev webu N{zev str{nek Nadpisy textů 64

65 o Konzistence navigace o Rozlišení sekcí o Odkazy - viditelnost o Lokalizace o Kufrový test O jaký server se jedn{? Na jaké jste str{nce? Jaké jsou hlavní sekce tohoto webu? Jaké m{te na této úrovni možnosti? Kde se nach{zíte v hierarchii serveru? Jakým způsobem můžete vyhled{vat? o Chov{ní uživatelského rozhraní Technické zpracov{ní - 20% o Rozlišení 800x x x1080 o Optimalizace pro prohlížeče Internet Explorer Firefox Opera Chrome Safari o Funkčnost s vypnutými grafickými prvky Obr{zky CSS Java + JavaScript o Pokrytí domén Marketingové využití webu - 10% o On-line prezentace zboží o E-shop o Propojenost se soci{lními sítěmi (Facebook, Twitter, <) o On-line komunikace se z{kazníkem - blog, podcast, newsletter 65

66 o Registrace o Personalizace str{nek o Bannerov{ reklama o ov{ reklama Newsletter o Přednostní výpisy o Ostatní Grafická analýza stránek - 40% Vzhledem k zaměření společností, jejichž webové prezentace analyzuji, jsem této č{sti hodnocení přiřadil nejvyšší, tj. 40% v{hu. Barevné schéma Kontrast: Toto kritérium hodnotí, je-li text dostatečně kontrastní vůči pozadí. Pro analýzu využív{m software Colour Contrast Analyzer (dostupný on-line na: Výstup Zvolené barvy: Hodnotí, zda je využité barevné schéma vhodné pro danou cílovou skupinu. Výstup Typografie Čitelnost písma: Hodnotí vhodnost užitého písma v z{vislosti na daném designu a jeho n{slednou čitelnost. Výstup Využití fontů plně podporujícího českou diakritiku: výstupem je hodnocení ANO/NE/Č[STEČNĚ. Nekombinov{ní patkového a bezpatkového fontu: výstupem je hodnocení ANO/NE/Č[STEČNĚ. Originalita: hodnotí, zda se tvůrci pokusili o origin{lní pojetí designu webových str{nek. Výstup Animace: výstupem je hodnocení ANO/NE, ukazuje, zda jsou ve webové prezentaci využív{ny animace. 66

67 Zapamatovatelnost: kombinuje prvky originality spolu s působením na lidskou psychiku, využív{ní n{strojů 29 vir{lní kampaně apod. Výstup Konzistence grafického designu: hodnotí, zda je design str{nek soudržný na všech č{stech webu. Výstup Přehlednost a Použitelnost - 30% Tato skupina kritérií hodnotí, zda webové str{nky splňují některé z{kladní požadavky pro smysluplné použív{ní v běžném životě uživatele. Pro většinu těchto kritérií prov{dím test na domovské str{nce a na některé n{hodně vybrané str{nce na nižším stupni hierarchie webu. Druh{ nejvyšší v{ha kritérií byla vybr{na kvůli faktu snadnému přejití ke konkurenci v r{mci internetu, což sice u příznivců imageových značek typu Adidas či Nike nemusí být na pořadu dne, nicméně pro získ{ní nového z{kazníka může představovat z{sadní bod v rozhodov{ní. Identifikace webu Logo: určuje, zda je logo společnosti na dané str{nce dostatečně viditelné, výstupem ANO/NE/Č[STEČNĚ. N{zev webu: určuje, zda je n{zev webu na dané str{nce dostatečně zřetelný, výstupem ANO/NE/Č[STEČNĚ. N{zev str{nek: určuje, zda je n{zev str{nek na daném místě dostatečně zřetelný, výstupem ANO/NE/Č[STEČNĚ. Nadpisy textů: určuje, zda jsou texty na daném místě přehledně označeny nadpisem, výstupem ANO/NE/Č[STEČNĚ. Konzistence navigace: zjišťuje, zda je navigace jednotn{ v r{mci celého webu. Výstup Vir{lní kampaň = kampaň využívající tzv. vir{lního fenoménu, nakažlivého způsobu šíření reklamy v r{mci internetových soci{lních sítí (Scott, 2007). 67

68 Rozlišení sekcí: určuje, zda je na dané str{nce dostatečně zřetelné rozdělení sekcí. Výstup Odkazy viditelnost: hodnotí, zda jsou všechny aktivní odkazy dostatečně zřetelné a zda se na str{nk{ch nenach{zí prvek, který by mohl na uživatele působit dojmem odkazu. Výstup Lokalizace: Určuje, zda je obsah str{nek lokalizov{n do češtiny. Výstup Kufrový test: Viz kapitola 5, n{hodný respondent odpovíd{ na ot{zky: O jaký server se jedn{? Na jaké jste str{nce? Jaké jsou hlavní sekce tohoto webu? Jaké m{te na této úrovni možnosti? Kde se nach{zíte v hierarchii serveru? Jakým způsobem můžete vyhled{vat? Výstup 0-10 vzejde z průměru získaných odpovědí. Chov{ní uživatelského rozhraní: Ukazuje, zda se uživatelské rozhraní chov{ standardně či zda byly během testov{ní zaznamen{ny problémy Technické zpracování - 20% V této kategorii zjišťuji, nakolik jsou str{nky uzpůsobeny technickým rozmanitostem současných počítačů. Ačkoli je diverzifikace značn{, valn{ většina uživatelů využív{ standardního software a hardware, proto je v{ha pouze 20%. Rozlišení: Zjišťuje, zda se str{nky spr{vně zobrazují v rozlišeních 800x600, 1024x768 a 1920x1080. Výstup ANO/NE/Č[STEČNĚ. Optimalizace pro prohlížeče: Zjišťuje, zda jsou str{nky optimalizov{ny pro prohlížeče Internet Explorer, Mozilla Firefox, Opera, Google Chrome a Safari. Výstup ANO/NE/Č[STEČNĚ. 68

69 Funkčnost s vypnutými grafickými prvky Zjišťuje, zda jsou str{nky plně funkční s vypnutými n{sledujícími funkcemi: zobrazov{ní obr{zků, kask{dové styly CSS, Java a JavaScript. Výstup ANO/NE/Č[STEČNĚ. Pokrytí alternativních domén: určuje, zda m{ společnost zajištěny různé variace domén, zejména s a bez www. Výstup ANO/NE Datov{ n{ročnost: Určuje rychlost načít{ní internetových str{nek na pomalejším připojení. Výstup Marketingové využití webu - 10% Poslední analyzovan{ skupina m{ sice minoritní v{hu 10%, z marketingového hlediska se ale může jednat o velmi důležité prvky, neboť se mnozí uživatelé mohou na web vracet pr{vě kvůli nim. D{le sem zařazuji další způsoby internetové propagace, které dan{ společnost využív{. On-line prezentace zboží: Zjišťuje, zda společnost nabízí přehledné prezentace prod{vaného zboží. Výstup E-shop: Ukazuje, zda může uživatel využít integrovaného e-shopu, výstup ANO/NE/Č[STEČNĚ. Propojenost se soci{lními sítěmi (Facebook, Twitter): Zjišťuje, zda je obsah str{nek napojen na moderní soci{lní sítě. Výstup ANO/NE. On-line komunikace se z{kazníkem: Určuje, zda web umožňuje širší komunikaci se z{kazníkem prostřednictvím moderních možností, jakými jsou např. blog, podcast, newsletter. Výstup ANO/NE/Č[STEČNĚ. Registrace: Zjišťuje, zda je možné se na str{nk{ch registrovat a získat tak nějaké z{kaznické výhody, výstup ANO/NE/Č[STEČNĚ. Personalizace str{nek: Zjišťuje, zda je možné si přizpůsobovat design str{nek, výstup ANO/NE/Č[STEČNĚ. Bannerov{ reklama Zjišťuje, zda společnost využív{ propagaci ve formě bannerové reklamy, výstup ANO/NE. 69

70 ov{ reklama Newsletter Zjišťuje, zda firma využív{ ke své internetové propagaci autorizovaný , výstup ANO/NE. Přednostní výpisy Zjišťuje, zda společnost využív{ ke své propagaci přednostní výpisy ve vybraných vyhled{vačích 30, výstup ANO/NE. Ostatní: Určuje další specifika zvolené webové kampaně, kterými se společnost odlišuje od konkurence. Výstup Vybrané vyhled{vače:

71 6.3. Nike Jednou z nejvýznamnějších společností na poli sportovní výbavy a sportovního oblečení je bezesporu Nike, Inc. (d{le pouze Nike), firma, kter{ m{ sídlo ve Spojených st{tech, vznikla roku Za necelé půlstoletí se tato značka pevně usídlila na světových trzích, logo Swoosh (viz obr{zek 37) zn{ prakticky každý. Marketingov{ strategie Nike se v současnosti nese v duchu tzv. image značky, z čehož pramení i aktu{lní internetov{ kampaň. Ta vych{zí Obr{zek 37: Uk{zka titulní strany kampaně NikeFootball, zdroj: z celosvětového z{kladu, který byl z velké č{sti lokalizov{n do české podoby. Aktu{lní kampaň je rozdělena do n{sledujících skupin dle cílové skupiny: NikeFootball cílov{ skupina: mladí lidé hrající fotbal NikeSportswear cílov{ skupina: mladí, sportovně ladění lidé NikeWomen cílov{ skupina: sportující ženy NikeRunning cílov{ skupina: osoby provozující jogging Nike6.0 cílov{ skupina: lidé provozující adrenalinové sporty (snowboarding, BMX, freeski, atd.) NikeSkateboarding cílov{ skupina: mladí lidé z městského prostředí vyžívající se v městských sportech NikeFriends věrnostní program Nike, cílov{ skupina: ekonomicky smýšlející příznivci značky NikeID speci{lní program Nike umožňující koupi autorského zboží, které si navrhne s{m z{kazník. Cílov{ skupina: kreativní lidé, kteří chtějí být origin{lní a jedineční 71

72 Analýza, část 1 Grafická analýza stránek Kritéria Hodnocení v r{mci celého webu Barevné schéma kontrast 6 Barevné schéma zvolené barvy 10 Typografie čitelnost písma 6 Typografie využití fontů plně podporujících českou diakritiku 5 Typografie nekombinov{ní patkového a bezpatkového fontu 10 Originalita 10 Animace 10 Zapamatovatelnost 10 Konzistence grafického designu 7 Celkem bodů 74 Tabulka 9: Analýza grafického zpracov{ní webu zdroj: autor Koment{ř Barevné schéma: Z hlediska použitých barev byl web navržen poměrně dobře. Využit{ barevn{ a grafick{ schémata velmi dobře ladí s určenou cílovou skupinou, na webu se ale nach{zí spousta grafických prvků, u nichž jsem zaznamenal problémy s kontrastem. Jedn{ se zejména o některé texty s grafickým pozadím, které uvozují vstup do další sekce. Typografie: Designéři se vyvarovali kombinaci patkového a nepatkového písma, v některých č{stech webu ale nevyužívají zcela ide{lních velikostí fontů, což spolu s tmavým pozadím poněkud snižuje čitelnost. Bohužel se také nevyvarovali problému s fonty plně podporujícími českou diakritiku, což je vidět hned na úvodní str{nce, kde se v n{pisu staň se fanouškem zobrazuje špatně písmeno ň. Originalita: Za tuto č{st si weboví designéři str{nek společnosti Nike zaslouží podle mého n{zoru absolutorium. Každ{ č{st webového designu představuje doslova pastvu pro oči, kde se kombinují prvky animací 72

73 s fotografiemi a dalším módním designem. Tvůrcům se podařilo ozvl{štnit jednotlivé marketingové kampaně tak, aby každ{ působila jinak a z{roveň měly prvky spojující je v jeden celek. Zapamatovatelnost: U tohoto hodnocení vych{zím z osobní zkušenosti, kdy jsem poprvé na str{nky společnosti Nike přišel před rokem a půl a od té doby jsem si pamatoval, jak vypad{ jejich design. Konzistence grafického designu: Ačkoli u originality hodnotím kladně propojení grafických prvků na celém webu, přeci jen není design jako celek jednotný. U kampaní NikeSkateboarding, NikeFriends a NikeID není použit stejný systém navigace jako u ostatních, u NikeFriends dokonce absentuje využív{ní velkých tlačítek jakožto odkazů Analýza, část 2 Přehlednost a použitelnost Kritéria Hodnocení na domovské str{nce Hodnocení na n{hodné str{nce z webu Průměrné hodnocení Identifikace webu logo Identifikace webu n{zev webu Identifikace webu - n{zev str{nek Identifikace webu nadpisy textů ,5 Konzistence navigace 7-7 Rozlišení sekcí Odkazy viditelnost Lokalizace 3-3 Kufrový test Chov{ní uživatelského prostředí 4 1 2,5 CELKEM 67 Tabulka 10: Analýza přehlednosti a použitelnosti webu zdroj: autor 73

74 Koment{ř Identifikace webu: Z tohoto hlediska nelze webu prakticky nic vytknout. Firemní logo je všudypřítomné, stejně jako n{pisy s n{zvy str{nek a kampaní. Problémy jsou pouze s někdy nečitelnými nadpisy textů. Konzistence navigace: Pro většinu str{nek byla využita stejn{ navigace v levém sloupci, nicméně některé kampaně (NikeSkateboarding, NikeFriends a NikeID) vybočují ze standardu a přin{ší vlastní řešení, čímž mohou uživatele rozhodit. Lokalizace: Webov{ prezentace společnosti Nike se nevyvarovala řady neduhů pramenících z konverze z anglické verze. Nejen, že jsou některé prvky v navigaci v angličtině, některé kampaně (např. NikeSportswear) nejsou lokalizov{ny do češtiny vůbec. Jakožto absolutní prohřešek proti z{sad{m webových prezentací považuji neupozorňov{ní na přechod na anglicky mluvící str{nky v r{mci jedné kampaně. Kufrový test: Proběhl standardní formou s dvěma n{hodnými respondenty a výsledky byly uspokojivé. Chov{ní uživatelského rozhraní: Zatímco na domovské str{nce, kter{ slouží jakožto výchozí bod pro výběr reklamní kampaně společnosti Nike, se prakticky všechny prvky chovají dle oček{vaných standardů, hlubší proch{zení webu představuje malou noční můru. Prezentace běží z velké č{sti na FLASH animacích, což sice působí velmi efektně, nicméně praktické využití poněkud pokulh{v{. Nepříjemn{ vyskakující pop-up okna iritují uživatele na každém rohu, aktivní prvky animací se mnohdy zaseknou a odmítají d{le spolupracovat, k čemuž je nutný refresh str{nek. 74

75 Analýza, část 3 Technické zpracování Kritéria Hodnocení pro celý web Rozlišení 800x600px 0 Rozlišení x1024px 10 Rozlišení 1920x1080px 10 Optimalizace pro prohlížeče Internet Explorer 10 Optimalizace pro prohlížeče Mozilla Firefox 10 Optimalizace pro prohlížeče Opera 5 Optimalizace pro prohlížeče Google Chrome 10 Optimalizace pro prohlížeče Safari 10 Funkčnost s vypnutými grafickými prvky obr{zky 5 Funkčnost s vypnutými grafickými prvky CSS 5 Funkčnost s vypnutými grafickými prvky Java a JavaScript 5 Pokrytí alternativních domén 0 Datov{ n{ročnost 0 CELKEM 80 Tabulka 11: Analýza technického zpracov{ní webu zdroj: autor Koment{ř Rozlišení: U nižších rozlišení je nutné využívat posuvníků, aby se korektně zobrazil celý obsah. Optimalizace: Jediné problémy jsem zaznamenal u prohlížeče Opera, nicméně jednalo se pouze o špatné zobrazení grafického prvku, nikoli o funkční chybu. Omezen{ funkcionalita: Web se d{ č{stečně používat i s vypnutými doplňky, největší problém pro funkcionalitu webu představuje vypnutí kask{dových stylů CSS, s vypnutými obr{zky si web poradil poměrně dobře obr{zky jsou většinou ukryty v animacích, problémy měl zejména e-shop. Pokrytí alternativních domén: Společnost Nike si překvapivě nepořídila pr{va na doménu kde se zobrazí pouze bíl{ str{nka s n{pisem Hello World. 75

76 Datov{ n{ročnost: Webov{ prezentace společnosti Nike byla vytvořena zejména pro z{kazníky s velmi kvalitním internetovým připojením, stažení jedné str{nky na 8Mbit ADSL připojení je ot{zkou někdy více než deseti vteřin Analýza, část 4 Marketingové využití webu Kritéria Hodnocení v r{mci celého webu On-line prezentace zboží 10 E-shop 10 Propojenost se soci{lními sítěmi 10 On-line komunikace se z{kazníkem 0 Registrace 10 Personalizace str{nek 0 Bannerov{ reklama 10 ov{ reklama newsletter 10 Přednostní výpisy 10 Ostatní 10 CELKEM 80 Tabulka 12: Analýza marketingového využití webu zdroj: autor Koment{ř On-line prezentace zboží: Na webu si lze velmi přehledně prohlédnout aktu{lní katalog se spoustou interaktivních prvků typu zoom. Prezentace je napojen{ na e-shop. E-shop: Webov{ prezentace společnosti Nike vych{zí z celosvětové kampaně, z čehož pramení výše uv{děn{ úskalí s jazykovou bariérou. To platí bohužel i pro služby e-shopu, který je kompletně v angličtině a ceny jsou uv{děny v Eurech. Obr{zek 38: Uk{zka e-shopu integrovaného do webové prezentace společnosti Nike; zdroj: Registrace: Registrovaným uživatelům jsou přips{ny různé výhody typu poštovného zdarma apod. 76

77 On-line reklamní činnost: Plné hodnocení si společnost Nike odn{ší i v metod{ch tradiční on-line propagace, neboť úspěšně využív{ všechny tři testované položky. Ostatní: Společnost Nike velmi kvalitně rozšiřuje své služby o komunitní z{ležitosti typu Nike Running Club, tj. spolku, který sdružuje lidi s oblibou ve vytrvalostním běh{ní. Webov{ prezentace je navíc přímo protk{na autorským obrazovým i video materi{lem, na kterém jsou zobrazeny hvězdy světového sportu využívající vybavení značky Nike Závěry vyvozené z analýzy a doporučení z nich vyplývající Z výše uvedených analytických tabulek vyplývají n{sledující výsledky: Č{st analýzy V{ha Počet bodů/počet možných Procentu{lně Přírůstek Grafick{ analýza str{nek 40% 74/90 82,22 % 32,89 % Přehlednost a použitelnost 30% 67/100 67,00 % 20,10 % Technické zpracov{ní 20% 80/130 61,54 % 14,29 % Marketingové využití webu 10% 80/100 80,00 % 8,00 % CELKEM 100% 75,28 % Tabulka 13: Zhodnocení analýzy webu zdroj: autor Z uvedených dat lze vidět, že webov{ prezentace společnosti Nike doslova exceluje v grafickém zpracov{ní, kde získala spoustu bodů za originalitu, konzistenci grafického zpracov{ní a využív{ní moderních metod, jako jsou třeba animace, což přispív{ k celkovému faktoru zapamatovatelnosti a tím p{dem i pozitivnímu dopadu on-line marketingové kampaně. Tato č{st analýzy si odnesla druhé nejvyšší procentu{lní ohodnocení také díky širokému využití internetových reklamních metod, jakými jsou přednostní výpisy ve vyhled{vačích, newslettery či bannerov{ reklama. 77

78 Naopak kriteria s nízkým hodnocením jsou přehlednost, použitelnost a technické zpracov{ní. Může za to zejména datov{ n{ročnost, díky níž se webové str{nky načítají déle, než je obvyklé. D{le pak nekonzistence webové navigace napříč spektrem internetových kampaní či problémy s lokalizací a tím p{dem i jazykovou bariérou. Díky tomu z analýzy vyplýv{ fakt, který jsem již předpověděl její zaměření především na příznivce značky, nikoli však na nové z{kazníky, které může webov{ prezentace zejména svým problematickým ovl{d{ním odradit od případné koupě a přechodu ke konkurenci. Doporučení pro webovou prezentaci jsou tedy n{sledující: Zlepšení kontrastu u nadpisů grafické prvky na pozadí textů zhoršují či téměř znemožňují čitelnost některých nadpisů, v tomto ohledu je nutné udělat n{pravu. Zakomponov{ní plně českého fontu na všechny str{nky webu zde není co dod{vat, špatné zobrazov{ní fontů s českou diakritikou působí amatérsky. Sjednocení grafického zpracov{ní navigačních prvků pro lepší přehlednost webu je nutné zachovat jednotný r{z navigace na všech str{nk{ch webu. Snížení datové n{ročnosti zrychlení pr{ce s webem může být z{sadním faktorem, díky němuž se uživatel na str{nky společnosti vr{tí, v současné době je optimalizace rychlosti na hranici snesitelnosti. N{kup alternativní domény u takto obrovské organizace působí tato chyba doslova škol{cky. Kompletní lokalizace všech kampaní neust{lé přech{zení mezi českou a světovou prezentací působí přinejmenším zvl{štně, pokud není kompletní lokalizace možn{, je více než nutné upozornit uživatele na přechod na cizojazyčné str{nky ještě před kliknutím na odkaz. 78

79 Omezení vyskakujících oken neust{lé vyskakov{ní pop-up oken znemožňuje lepší orientaci na webu. Využív{ní moderních on-line komunikací dovedu si představit například blog zn{mého sportovce využívající vybavení společnosti Nike. Personalizace str{nek po přihl{šení bych navrhoval možnost ukrytí odkazů na některé, pro z{kazníka neatraktivní, kampaně. Možnost výběru vlastního grafického rozhraní by také nebyla na škodu. 79

80 6.4. Adidas Druhou společností, jejíž českou webovou prezentaci jsem si vybral k analýze, je Adidas ČR (d{le pouze Adidas), odvěký konkurent výše uv{děné společnosti Nike. Tradice německého výrobce sportovního oblečení a sportovní výbavy započala již roku 1924, jejím tradičním logem i pozn{vacím symbolem je trojice rovnoběžných proužků (viz obr{zek 39). Marketingové kampaně společnosti Adidas jsou rozděleny podle cílových skupin, což bohužel ale z lok{lní webové prezentace Obr{zek 39: Uk{zka grafického zpracov{ní kampaně micoach společnosti Adidas ČR, zdroj: není zcela patrné. Str{nky totiž nevych{zejí z glob{lního schématu, nýbrž byly vytvořeny na míru pouze pro českou pobočku firmy Adidas. A tak zatímco světov{ prezentace ukrýv{ mnohé designové inovativní n{pady, ta česk{ představuje poněkud standardní z{ležitost. I tak zde nalezneme několik různých marketingových kampaní s různými cílovými skupinami: micoach, Zaběhni si lépe cílov{ skupina: lidé provozující jogging Predator_X cílov{ skupina: hr{či kopané Chceš 3 kila? cílov{ skupina: věrní z{kazníci 80

81 Analýza, část 1 Grafická analýza stránek Kritéria Hodnocení v r{mci celého webu Barevné schéma kontrast 9 Barevné schéma zvolené barvy 8 Typografie čitelnost písma 9 Typografie využití fontů plně podporujících českou diakritiku 10 Typografie nekombinov{ní patkového a bezpatkového fontu 10 Originalita 2 Animace 0 Zapamatovatelnost 1 Konzistence grafického designu 8 CELKEM BODŮ 57 Tabulka 14: Analýza grafického zpracov{ní webu zdroj: autor Koment{ř Barevné schéma: Design byl navržen v barevném schématu kombinujícím černou, modrou a bílou, což se velmi hodí pro sportovně laděný web. Prezentace micoach se nese v zelenomodrobílém schématu, které uživateli spolu s obrazovým materi{lem dobře navodí dojem běhu v přírodě. Typografie: Oceňuji využití výhradně bezpatkového písma a fontu plně podporujícího českou diakritiku. Originalita, Zapamatovatelnost: Webov{ prezentace společnosti Adidas ČR nikterak nevybočuje z běžných standardů, existuje jen m{lo důvodů, proč se na str{nky vracet. Nejorigin{lněji je zpracovan{ aktu{lní kampaň micoach, jež obsahuje kvalitní design a spoustu užitečných informací, zbytek webové prezentace nikterak nevybočuje z aktu{lních trendů. Konzistence grafického designu: Na str{nk{ch všech interaktivních kampaní lze nalézt podobně laděné prvky navigace a stejný form{t layoutu. 81

82 Analýza, část 2 Přehlednost a použitelnost Kritéria Hodnocení na domovské str{nce Hodnocení na n{hodné str{nce z webu Průměrné hodnocení Identifikace webu logo Identifikace webu n{zev webu Identifikace webu - n{zev str{nek Identifikace webu nadpisy textů Konzistence navigace 8-8 Rozlišení sekcí 0 5 2,5 Odkazy viditelnost Lokalizace Kufrový test - 6,6 6,6 Chov{ní uživatelského rozhraní CELKEM 83,1 Tabulka 15: Analýza přehlednosti a použitelnosti webu zdroj: autor Koment{ř Identifikace webu: Prakticky na všech str{nk{ch lze najít potřebné identifikační údaje. Konzistence navigace: Aktu{lní kampaně mají v navigaci pouze prvky spojené s jejich zaměřením, n{vrat na hlavní str{nku společnosti není možný. Odkazy viditelnost: Zde považuji za největší problém rozcestník zobrazovaný před hlavní str{nkou, na Obr{zek 40: Uk{zka nepřehledného úvodního rozcestníku ve webové prezentaci společnosti Adidas. Aktivní odkazy jsou pouze v horní č{sti obrazovky. Zdroj: němž -jsem jako uživatel mylně předpokl{dal možnost kliknutí na kampaně Adidas Originals a Adidas Performance. Uvnitř webu mohu vytknout snad jen neaktivní logo společnosti v kampani Predators_X. 82