Zákaznicky orientované webové portály

Univerzita Karlova v Praze

Filozofická fakulta

Diplomová práce

Zákaznicky orientované webové portály

Rok 2011

Bc. Petr Souček

UNIVERZITA KARLOVA V PRAZE FILOSOFICKÁ FAKULTA Informační studia a knihovnictví Katedra Informačních studií a knihovnictví

Diplomová práce

na téma

Zákaznicky orientované webové portály

Autor práce: Bc. Petr Souček Vedoucí práce: ing. Martin Souček Místo a datum obhajoby: Praha 2011

PODĚKOVÁNÍ: Děkuji vedoucímu práce Ing. Martinovi Součkovi za trpělivé vedení, Ing. Zdeňkovi Hejlovi za cenné rady a konzultace k praktické části, a rodičŧm za neutuchající podporu.

Prohlašuji, že jsem diplomovou práci vypracoval samostatně, že jsem řádně citoval všechny použité prameny a literaturu a že práce nebyla využita v rámci jiného vysokoškolského studia či k získání jiného nebo stejného titulu.

V Praze dne 2. 5. 2011

Bc. Petr Souček

ABSTRAKT

Ve své práci se zabývám zákaznicky orientovanými webovými portály. Práce osvětluje základní principy tvorby zákaznicky orientovaných stránek. Věnuje se také obecným doporučením k návrhu webu, jeho navigace a obsahu. V závěru vyuţiji teoreticky získaných poznatkŧ při analýze firemní webové prezentace včetně e-shopu.

KLÍČOVÁ SLOVA: Webdesign, Internetová komerce, zákaznicky orientované webové stránky, e- shop

ABSTRACT My dissertation is focused on customer-oriented websites. It explains the basic principles of creating customer-targeted websites. It also deals with common suggestions to web design, web navigations and contents. I conclude my dissertation with application of the theoretically acquired knowledge on the analysis of business web presentation, including the e-shop.

KEYWORDS: Webdesign, Internet commerce, customer`s oriented web pages, e- shop

OBSAH: ÚVOD ................................................................................................................... 9 I. TEORETICKÁ ČÁST ..................................................................................... 10 1. MARKETING V INTERNETOVÉM VĚKU ................................................ 10 1.1 SÍLY FORMUJÍCÍ INTERNETOVÝ VĚK ............................................................. 10 1.2 MARKETINGOVÁ STRATEGIE V NOVÉM DIGITÁLNÍM VĚKU .......................... 12 1.3 BYZNYS MODELY NA INTERNETU................................................................. 15 1.4 ROZDĚLENÍ WEBOVÝCH PREZENTACÍ PODLE ŢÁNRŦ .................................... 17 2. ZÁKAZNICKY ORIENTOVANÝ WEB ...................................................... 19 2.1 EVOLUCE NÁVRHU WEBU ............................................................................ 19 2.2 ZÁKAZNICKY ORIENTOVANÝ NÁVRH STRÁNEK............................................ 19 2.3 PRINCIPY ZÁKAZNICKY ORIENTOVANÉHO NÁVRHU WEBU ........................... 21 2.3.1 POZNÁNÍ ZÁKAZNÍKA .............................................................................. 21 2.3.2 POCHOPENÍ ZÁKAZNÍKA .......................................................................... 22 2.3.3 POZNÁNÍ ZÁKAZNÍKOVY TECHNOLOGIE .................................................... 22 2.3.4 POROZUMĚNÍ SOCIÁLNÍMU KONTEXTU ZÁKAZNÍKA ................................... 23 2.4 TECHNIKY PRO POZNÁNÍ ZÁKAZNÍKA .......................................................... 23 2.5 PROCESY VÝVOJE ZÁKAZNICKY ORIENTOVANÝCH STRÁNEK ....................... 25 3. NÁVRH WEBU .............................................................................................. 27 3.1 NÁVRH WEBU S OHLEDEM NA INTERATIVNÍ DESIGN.................................... 27 3.2 NÁVRH INFORMAČNÍ ARCHITEKTURY .......................................................... 29 3.3 PRVKY WEBU ............................................................................................... 32 3.4 GRAFICKÝ DESIGN WEBU ............................................................................. 33 3.5. KVALITNÍ OBSAH WEBU .............................................................................. 36 3.6 COPYWRITING ANEB PSANÍ PRO WEB ........................................................... 39 3.7 NAVIGACE NA WEBU ................................................................................... 40 3.8 DOMOVSKÁ STRÁNKA .................................................................................. 42 3.9 PŘÍSTUPNOST............................................................................................... 44

4. NOVÉ TRENDY VE WEBDESIGNU........................................................... 47 4.1 GRAFICKÝ DESIGN ....................................................................................... 47 4.2 PÍSMO A TEXT .............................................................................................. 47 4.3 OBECNÉ NOVINKY ....................................................................................... 48 II. PRAKTICKÁ ČÁST ...................................................................................... 50 5. ANALÝZA WEBOVÉ FIREMNÍ PREZENTACE A E-SHOPU ................. 50 5.1 GRAFICKÝ DESIGN ....................................................................................... 51 5.1.1 CELKOVÝ GRAFICKÝ DESIGN WEBU .......................................................... 51 5.1.2 PÍSMO A TEXT ......................................................................................... 52 5.2 DOMOVSKÁ STRÁNKA WEBU ....................................................................... 54 5.3 NAVIGACE NA WEBU ................................................................................... 55 5.4 NABÍDKA SORTIMENTU................................................................................ 57 5.4.1 DETAIL PRODUKTU ................................................................................. 58 5.5 NÁVRH NA ZMĚNY ....................................................................................... 59 5.6. SOUČASNÁ PODOBA STRÁNEK HELUZ.CZ .................................................... 59 5.6.1 DETAIL PRODUKTU ................................................................................. 60 5.6.2 NAVIGACE .............................................................................................. 61 5.6.3 DETAIL PRODUKTU ................................................................................. 62 5.7. ZÁVĚREČNÉ ZHODNOCENÍ ÚPRAV ............................................................... 63 ZÁVĚR................................................................................................................ 64 SEZNAM POUŢITÉ LITERATURY A ZDROJŦ ............................................ 65

SEZNAM ZKRATEK B2B – BUSINESS TO BUSINESS B2C – BUSINESS TO CUSTOMER C2C – CUSTOMER TO CUSTOMER C2B – CUSTOMER TO BUSINESS CSS – CASCADING STYLE SHEETS

ÚVOD Cílem mé diplomové práce je popsat teoretická východiska, postupy a procesy při tvorbě zákaznicky orientovaných webových stránek. Pro potřeby své práce jsem se zaměřil především na oblast tvorby komerčních webových stránek, konkrétně firemních webových prezentací a e-shopu. V této oblasti je dnes velká konkurence, a pro úspěch jiţ nestačí pouze být online, mít vytvořenou svou firemní stránku, nebo e-shop. To co rozhoduje při takové konkurenci je orientace na zákazníka neboli zákaznicky orientovaný návrh webu. V první části mé diplomové práce nastíním oblast podnikání na internetu, rŧzné obchodní modely a moţnosti pro firmy jak se na internetu prezentovat. V druhé části se zaměřím na samotný pojem zákaznicky orientovaného návrhu webu, jeho principy a procesy. Dále nastíním několik obecných zásad pro návrh dŧleţitých součásti webu, jako je navigace, grafický design a obsah webu. V praktické části provedu analýzu vybrané webové firemní prezentace s e-shopem. Na příkladě starého a nového vzhledu webu firmy Heluz v.o.s. předvedu v praxi teoretické poznatky uvedené v předcházejících kapitolách mé diplomové práce. Zaměřím se především na grafický vzhled, navigaci, domovskou stránku a celkovou strukturu webu, a uvedu nejváţnější nedostatky a prohřešky, a na ukázkách z nového vzhledu okomentuji jejich nápravu.

9

I. TEORETICKÁ ČÁST 1. MARKETING V INTERNETOVÉM VĚKU Nedávné technologické změny, včetně širokého vyuţití internetu, daly vzniknout prostředí, které někteří nazývají Nová ekonomika. Ačkoliv se v posledních letech se o povaze a existenci této nové ekonomiky zaníceně debatovalo, jen málokdo by popíral dramatický dopad, který má na prodávající i kupující internet a další vlivné komunikační technologie. Mnoho standardních marketingových strategií a postupŧ minulosti byly dobře přizpŧsobeny takzvané staré ekonomice. Tyto strategie a postupy stále budou dŧleţité i v ekonomice nové, zároveň však musí marketéři připravit nové strategie a postupy, které budou pro dnešní prostředí vhodnější.

Nová ekonomika S pojmem Nová ekonomika se setkáváme stále častěji, věnuje se jí stále větší pozornost ve světě i u nás. Nová ekonomika přináší změnu povahy podnikání. Informační technologie otevírají nové moţnosti podnikání, které dříve byly nepředstavitelné. Týká se to především moţností spjatých s vyuţitím nových informačních technologií. Je to velká příleţitost a hrozba pro všechny podniky, které pokud chtějí přeţít ve světě Nové ekonomiky, musí se rychle transformovat a přizpŧsobit. Jak říká známý guru marketingu Philip Kotler: Existují podniky dvojího druhu: ty, které se přizpŧsobí a ty které se změní.[1]

1.1 Síly formující internetový věk Digitalizace a konektivita Mnoho přístrojŧ a systémŧ minulosti pracovalo s analogovými ovládacími prvky, tedy s analogovými informacemi. Analogové informace se plynule mění v reakci na fyzické stimuly. Dnes však čím dál víc přístrojŧ pracuje s informacemi digitálními, s toky jedniček a nul, tedy bitŧ. Aby mohli bity proudit mezi rŧznými místy a přístroji, je nutná konektivita, telekomunikační síť.[1] 10

Dnešní podnikání probíhá z velké části právě prostřednictvím sítí, které spojují lidi i firmy. Intranet je síť, která umoţňuje zaměstnancŧm společnosti připojit se k firemní síti a komunikovat s ostatními. Extranet umoţňuje firmě spojení s dodavateli, distributory a dalšími externími partnery. A internet, obrovská veřejná síť počítačových sítí, umoţňuje uţivatelŧm všeho druhu z celého světa vzájemnou komunikaci a přístup k neuvěřitelně rozsáhlým zdrojŧm dat. Internet tvoří jednu velikou informační dálnici, po níţ lze neuvěřitelnou rychlostí přenášet bity z jednoho místa na druhé.

Internetová exploze Se vznikem sítě World Wide Web a internetových prohlíţečŧ v devadesátých letech 20. století se internet změnil z pouhého komunikačního nástroje ve skutečně revoluční technologii. Během poslední dekády 20. století vzrostl počet internetových uţivatelŧ po celém světě na téměř 400 miliónŧ.[1] Celosvětový explozivní rŧst vyuţívání internetu je srdcem takzvané Nové ekonomiky. Téměř v kaţdé nové inovaci Nové ekonomiky, která se v posledním desetiletí objevila, hrál internet hlavní – nebo alespoň nejvýznamnější vedlejší – roli. Umoţňuje zákazníkŧm i firmám přístup k obrovským kvantŧm informací, k jejichţ sdílení stačí pár klepnutí myší.

Nové formy prostředníků Nové technologie vedly tisíce podnikatelŧ k zakládání internetových společností, takzvaných dot.com v naději ţe narazí na zlato. Vznik nových prostředníkŧ a nových distribučních cest donutil starší firmy přehodnotit zpŧsoby, jakými obsluhují své trhy.

Customizace a customerizace Stará ekonomika se točila kolem výrobních společností, které se orientovaly hlavně na standardizaci své výroby, produktŧ a obchodních procesŧ. Investovaly obrovské sumy do budování značek, aby propagovaly výhody svých standardizovaných trţních nabídek. Naproti tomu Nová ekonomika se točí kolem informačních podnikŧ. Informace mají tu výhodu, ţe je lze snadno diferencovat, customizovat, personalizovat, individualizovat a posílat sítěmi neuvěřitelnou rychlostí[1] 11

1.2 Marketingová strategie v novém digitálním věku Pro mnoho firem bude podnikání v novém digitálním věku vyţadovat nový model marketingové strategie a praxe. Někteří stratégové prorokují, ţe přijde den, kdy bude všechen nákup a prodej prováděn pomocí přímého elektronického spojení mezi firmami a jejich zákazníky.[1] Faktem je, ţe dnešní ekonomika vyţaduje kombinaci myšlení a jednání Staré a Nové ekonomiky. Obchodní společnosti si musí udrţet většinu dovedností, které se v minulosti osvědčily, a doplnit je o nové kompetence a praktiky.

E- business Představuje elektronické podnikání. Elektronické podnikání vyuţívá zejména webové technologie a rŧzné automatizované informační systémy. Rozmach e-businessu v posledních letech

souvisí

hlavně

s rozvojem

internetu,

softwarových

technologií,

hardware

a telekomunikací. E-business zahrnuje obchodní procesy zahrnující celý řetězec od elektronického nakupování, managementu zásobování, zpracovávání objednávek, zákaznickým servisem, vztahy se zákazníky (CRM), vyuţívání ERP systémŧ, elektronické výměny dokumentŧ aţ po kooperaci obchodních partnerŧ.[20]

E-commerce E-commerce je specifičtější pojem. Zatímco e-business zahrnuje veškerou elektronickou výměnu informací v rámci firmy, nebo mezi firmou a zákazníky, e-commerce zahrnuje prodejní a nákupní procesy s vyuţitím elektronické komunikace, zejména internetu. E-markets jsou virtuální místa, kde prodejci nabízejí své výrobky a sluţby a zákazníci hledají informace, zjišťují své potřeby a činí objednávky s vyuţitím elektronických plateb.[23] E-commerce zahrnuje e-marketing a e-puchasing, téţ e-procurement (elektronické nákupy) E-marketing je prodejní stránkou e-commerce. Skládá se z komunikace, podpory prodeje a vlastního prodeje zboţí a sluţeb prostřednictvím internetu.

12

Výhody e-commerce Nakupování po internetu přináší mnoho výhod jak kupujícím, tak prodávajícím. Výhody pro kupující jsou zřejmé. Je to pohodlné, nemusí se obtěţovat fyzicky navštívit místo prodeje, ale mŧţou v klidu domova procházet nabídky zboţí v elektronických katalozích či na webových stránkách firem. Nemusí se zajímat o otevírací hodiny a dohadovat se s prodavačem. Kromě toho internet nabízí často větší výběr a lepší přístup k produktŧm. Zákazníci také mají díky internetu přístup k větší míře informací o produktu, a mŧţou okamţitě porovnávat výhody dané nabídky oproti ostatním prodejcŧm. Pro prodávající je internet také výhodný. Zaprvé, internet je vynikající nástroj pro budování vztahu se zákazníky. Společnosti mohou se zákazníky komunikovat online, aby zjistily více o jejích specifických potřebách a poţadavcích. Velkou výhodou je sníţení nákladŧ a větší efektivita. Odpadají náklady s provozováním kamenných obchodŧ a náklady na personál. Úspory v marketingu jsou také zřejmé, firmy jsou v přímém kontaktu se zákazníkem, dostávají tak okamţitou odezvu. Elektronická komunikace je nesporně levnější neţ papírová, zasíláni elektronických katalogŧ stojí daleko méně neţ jejich vytištění a zaslání pomocí pošty. [1] Domény e-commerce E-commerce či elektronická komerce je zpŧsob vyuţití internetu k realizaci obchodních transakcí (s vlastními organizačními jednotkami, s dodavateli, se zákazníky). Prostřednictvím internetu lze prodávat jak fyzické zboţí, tak digitální sluţby a informace. U fyzických produktŧ jde především o spotřební zboţí prodávané prostřednictvím e-shopŧ. U sluţeb a informací dochází k prodeji zpráv, publikací, učebních materiálŧ, multimediální zábava atd.[1]

B2C (prodej koncovým uţivatelům) Je základním modelem zabývajícím se prodejem produktu firmou konečnému zákazníkovi. Je to ta nejklasičtější a pro veřejnost nejvíce zajímavá oblast e – commerce. Mezi prŧkopníky tohoto modelu na internetu patří AMAZON.COM. Jedná se zejména o aplikace typu internetový obchod. 13

Oblasti B2C mŧţeme rozdělit do tří oblastí: 

prodej informací – tzv. „bit business“. Zde je moţné produkt kompletně distribuovat elektronickou cestou. Do této skupiny patří prodej a pronájem softwaru nebo např. publikování informací (elektronické noviny, burzovní zprávy, hudební servery apod.).



prodej zboţí – produkt je objednán a případně i zaplacen elektronicky, jedná se však o hmotné zboţí.



poskytování reklamního prostoru – podmínkou je vlastnictví dostatečně navštěvovaného serveru.[1]

B2B Jak vyplývá jiţ z názvu, elektronický obchod Business-to-Business označuje komerční a marketingové aktivity, transakce mezi firmou a firmou či podnikatelem, kteří zboţí - sluţby kupují převáţně za účelem jejich dalšího prodeje nebo zpracování.[1] U obchodování B2B se zpravidla jedná o dlouhodobější obchodní vztah, který je mnohdy smluvně podchycen. Nejedná se tedy o klasické nakupování, ale o uzavírání kontraktŧ mezi podniky. Nástroje B2B se liší od nástrojŧ B2C. Nejčastěji to jsou: 

speciální online obchody a katalogy



elektronické aukce



Portály zaměřené na barterové transakce

Business-to-Business – elektronická trţiště Kromě systémŧ elektronické výměny dat jsou v současné době druhým podstatným elementem B2B elektronických obchodŧ elektronická trţiště. Termínem elektronické trţiště (e-markets, e-marketplace) se rozumí obchodní platforma zaloţená na Internetu (zpravidla vyuţívající jazyka XML), která shromaţďuje nabídky a poptávky zboţí z více stran s cílem uzavírat transakce. Jestliţe podstatou kaţdého trţiště je kumulace kupujících a prodávajících na jednom místě za účelem výměny informací vedoucích k uzavření obchodu, pak v případě elektronických trţišť jde o místa virtuální. Kromě klasické nabídky a poptávky umoţňuje 14

většina takovýchto trţišť také pořádání aukcí. Ty mohou být nejrŧznějších typŧ, například holandská, dynamická, anglická, yankee atd.[11]

Consumer-to-Consumer Elektronickým a marketingové

obchodem

aktivity či

Consumer-to-Consumer

transakce

mezi

jednotlivými

se

rozumí

komerční

spotřebiteli. Tato

oblast

elektronického obchodování vznikla stejně jako oblast B2C aţ v souvislosti s moţnostmi, které přinesl rozvoj internetu. Ve své většině pak představuje internetová trţiště, na nichţ se střetávají nabídky a poptávky konečných spotřebitelŧ. V takových případech jde zpravidla o zboţí tzv. z druhé ruky. Takové C2C servery umoţňují lidem přístup k mnohem rozsáhlejšímu publiku neţ místní bleší trh nebo novinové inzeráty. [1] Nejznámějším a nejpopulárnějším takovým trţištěm je bezesporu e-bay, jehoţ online komunita představuje téměř 50 milionŧ registrovaných uţivatelŧ z celého světa. V dalších případech zahrnuje C2C výměnu informací prostřednictvím internetových fór a diskusních skupin, které jsou určeny pro konkrétní skupiny se společnými zájmy.

Consumer to business Zkratka C2B pochází z anglického termínu Customer to Business. Je to model zaměřený na elektronický obchodní styk iniciovaný zákazníkem. Spotřebitel, tedy koncový zákazník sám oslovuje obchodníka – společnost a zajišťuje si tak nejlepší obchodní podmínky na trhu.

1.3 Byznys modely na internetu Business model neboli obchodní model se dá definovat jako zpŧsob nebo metoda, kterou podnik realizuje primární cíl svého podnikání, tj. dosahování zisku. Obchodní model by měl splňovat těchto šest základních funkcí: 

definovat tvorbu hodnoty pro koncové zákazníky



identifikovat cílový trţní segment 15



definovat strukturu hodnotového řetězce uvnitř firmy, nutného k tvorbě a distribuci hodnoty



odhadnout náklady a potencionální výnosy produkce v závislosti na vybrané struktuře hodnotového řetězce



popsat pozici firmy v hodnotovém řetězci propojující dodavatele a odběratele, identifikovat potencionální spojence a konkurenty



formulovat konkurenční strategii, kterou bude získána konkurenční výhoda proti rivalŧm [17]

Co se týče business modelŧ, z pohledu podnikatele či investora se dá uvaţovat o dvou základních proudech: 

Budování firmy, která je dlouhodobě udrţitelná a ţivotaschopná



Tvorba firmy čistě pro budoucí prodej tzn. taková, která je i ztrátová, ale generuje jinou vnitřní hodnotu, například v podobě aktivních uţivatelŧ.

Konkrétní business modely firem podnikajících na internetu se dají dle prof. Rappy z Institute of Advanced Analytics Na north Carolina state university rozdělit na následující: 

Brokerage (zprostředkovatelský model) – zprostředkovatel zde pŧsobí jako technická brána pro zajištění transakcí, případně jako tvŧrce trhu. Podle jednotlivých zúčastněných stran rozlišujeme B2B, B2C, C2C.



Broker si za zprostředkování obchodu účtuje definovanou provizi (např. u nás aukro.cz, hotel.cz).



Advertising (reklamní model) – v tomto modelu je projekt zaloţen na reklamních příjmech. Provozovatel serveru poskytuje zdarma návštěvníkŧm, resp. uţivatelŧm svŧj webový obsah, popř. sluţby jako je email, instant messaging, blogy apod. a financování svého provozu zajišťuje z reklamních příjmŧ – bannery, kontextová reklama atd. typickým příkladem jsou rŧzné informační portály (centrum.cz, about.com) a poskytovatelé sluţeb (ICQ, blog.cz).

16



Infomediary (model zprostředkování informací) – model zaloţený na sběru dat o zákaznících, jejich chování, přičemţ tyto informace pak vyuţije sám, nebo poskytne třetím stranám pro účely marketingové analýzy ( netmonitor.cz, Ciao.de).



Merchant (obchodník) – internetový obchod, kde business model je postaven na klasickém prodeji zboţí nebo sluţeb ( Sw.cz, Mall).



Direct manufacturer (přímý výrobce) – předpokládá, ţe výrobce nebo poskytovatel sluţeb je schopen přímo dosáhnout na koncového zákazníka prostřednictvím webového distribučního kanálu (Dell.com).



Affiliate (partnerský model) – je zaloţený na provizích poskytnutých partnerským stránkám za přílákání návštěvnosti na svŧj web. v praxi je to řešeno formou výměny bannerŧ, pay – per- click systémŧ, provizí z prodeje atd.



Community (komunitní model) – tento model aktuálně vypadá jako velice slibný. Jiţ dnes vidíme jak projekty typu wikipedia, facebook a myspace jsou masově vyuţívané a výrazně ovlivňují podobu internetu. Uţivatelé projektu sami aktivně přispívají k utváření obsahu webu. Zisk zde mŧţe přinášet prodej doplňkových výrobkŧ, dobrovolné příspěvky, popř. kontextová reklama nebo poplatky za prémiové funkce. Typickým příkladem je open content systém – wikipedia, která jiţ úspěšně vybrala milióny dolarŧ ve sbírce na svém webu.



Subscription (předplatitelský model) – uţivatel odvádí periodické platby (denní, měsíční, roční) za vyuţití sluţby. Je běţné, ţe základní funkcionalita bývá poskytována zdarma, přičemţ za rozšířenou se platí. Typickým příkladem jsou isp (internet service provideři) nebo u nás například estránky.cz, kde uţivatel platí roční poplatky za moţnost vytvořit si svŧj firemní web.



Utility (model uţitku) – je typickým příkladem pay as you go přístupu. Na rozdíl od předplatitelského modelu se zde platí za skutečné uţívání. Typicky jsou to sluţby telefonních operátorŧ.[16]

1.4 Rozdělení webových prezentací podle ţánrů Tato typologie webových prezentací si neklade za cíl být vyčerpávající, chci pouze uvést několik nejrozšířenějších typŧ webŧ, s kterými se uţivatel mŧţe nejčastěji setkat. 17

Zpravodajské weby Zpravodajské weby navštěvují uţivatelé proto, aby se prostřednictvím zpráv a událostí dozvěděli něco nového ze světa. Tyto weby musí přinášet zprávy, které jejich čtenáři chtějí, s dostatečným podrobným a zajímavým zpravodajstvím a musí zpřístupnit historický vývoj online, aby zákazníci byli s to vyhledat starší příspěvky.

Obchodní weby s vlastním e-shopem U obchodních webŧ jsou rozhodujícími parametry designu efektivní navigace a vyhledávání a s nimi taky počet krokŧ nutných k dokončení objednávky. Během období internetové horečky utratilo mnoho obchodních webŧ spousty peněz svých investorŧ za sloţité prezentace v Macromedia Flashi nebo videoprezentace, přičemţ záhy zkrachovaly, některé dokonce i dříve, neţ se vŧbec rozběhly. Nejúspěšnější komerční weby jsou a byly technicky jednoduché. Amazon, E – bay, Yahoo![1]

Weby veřejné správy Weby veřejné správy by měly slouţit primárnímu účelu, a to usnadnit občanŧm komunikaci s úřady. Proto je dŧleţité, aby se vyhnuly nešvarŧm „offline“ veřejné správy. A to především bezejmennosti, anonymitě a nemoţnosti zpětné vazby.

Firemní prezentace Firemní prezentace angaţují, prodávají a podporují zákazníky a partnery. Rovněţ propagují média, informují investory a přijímají zaměstnance. Tyto cílové skupiny mají rozdílné potřeby, proto musí firemní prezentace splňovat potřeby mnoha cílových skupin. Pro potřeby mojí práce se zaměřím na dva typy zde uvedených ţánrŧ webových prezentací. A to na obchodní weby s vlastním e-shopem a firemní prezentace. Těmto dvěma ţánrŧm se budu věnovat i dále ve své praktické části.

18

2. ZÁKAZNICKY ORIENTOVANÝ WEB 2.1 Evoluce návrhu webu Tvorba webových stránek prošla za uplynulá desetiletí velkým vývojem. Na počátku se na tvorbě webu podíleli jednotlivci i větší skupiny, kteří vytvářeli návrhy webových stránek bez většího rozmyslu, podle sebe, a neměli pak zpětnou vazbu od zákazníkŧ. Druhá generace tvorby webových stránek byla ovlivněna obrovským celosvětovým rozmachem internetu a elektronických sluţeb a elektronického obchodování. V té době bylo hlavní krédo být při tom a účastnit se online obchodování. Tvŧrci začali pomalu pouţívat interativní rozhraní, aby se odlišili od konkurence a zvýšili svou šanci na úspěch. V dnešní době se pozornost tvŧrcŧ zaměřila na tvorbu výkonných webových stránek, které poskytují svým zákazníkŧm opravdovou hodnotu a přinášejí jim pozitivní zkušenosti. Tuto současnou generaci tvorby webových stránek nazýváme zákaznicky orientovaná tvorba webových stránek.[9]

2.2 Zákaznicky orientovaný návrh stránek Kdyţ podnikatel sepisuje svŧj byznys plán, zaměřuje se především na výzkum toho, co by chtěli zákazníci, co jim na trhu chybí a co očekávají. Neorientuje se podle toho, co by chtěl on sám, ví, ţe klíčem k úspěchu je poznat správně touhy a potřeby zákazníkŧ. Stejně tak by se mělo postupovat při návrhu webových stránek, hlavní by měla být snaha o to být zákaznicky orientovaný. [14]

Zákazník Termín zákazník se raději neţ uţivatel pouţívá ze tří dŧvodŧ. Označení zákazník evokuje pocit, ţe se webové stránky podílejí na něčem, co představuje pouze jednoduchost ovládání a celkovou spokojenost. A za druhé, označení zákazník zde představuje kaţdého, kdo je na webových stránkách závislý. Mezi jinými to mohou být administrátoři, partneři, vedoucí pracovníci a producenti. A v neposlední řadě je termín zákazník mnohem obšírnější neţ uţivatel a vztahuje se na všechny typy osob a plejádu jejich potřeb.[9]

19

Zákaznicky orientovaný web Zákaznicky orientovanou tvorbu webových stránek mŧţeme definovat jako tvorbu stránek, u kterých zákazníci po delší dobu vysoce hodnotí obsah, jednoduchost pouţití, výkon, dŧvěryhodnost a celkový dojem. Výzva stát se zákaznicky orientovanou společností stojí před kaţdou společností, ať uţ se jedná o velkou mezinárodní korporaci, vládní agenturu, vnitřní podnikové sluţby, neziskovou organizaci, komunitu i malou společnost. Hlavním kritériem zákaznicky orientovaného webu je zajištění spokojenosti a pozitivní zkušenosti všech svých zákazníkŧ, ať uţ se jedná o ty, co hledají informace, chtějí být součástí komunity, chtějí nakupovat nebo se bavit.[9] Jinou definici nabízí ve svém článku Robert Haas. Zákaznicky orientovaný design představuje

multidisciplinární

přístup

k návrhu

uţivatelských

rozhraní,

informační

architektury, grafického řešení a funkcionality s cílem dosáhnout sjednocení těchto prvkŧ vedoucího ke kvalitnějšímu uţivatelskému proţitku. Zaměřuje se na vše, s čím uţivatel přichází do přímého styku, co vnímá, učí se a pouţívá. Zahrnuje formu, chování a obsah webových aplikací a prezentací. Klíčovými zkoumanými faktory jsou pouţitelnost, pochopitelnost, uţitečnost a estetický dojem.[11]

Zde je jeden příklad, který vystihuje zákaznicky orientovaný design. Před pár lety společnost IBM zjistila, že její webové stránky nefungují příliš pružně. Rychlá analýza prokázala, že nejpoužívanějším prvkem bylo vyhledávání. Celá doména byla tak zmatená, že zákazníci nemohli určit, jak potřebné informace nalézt. IBM také zjistila, že druhým nejpoužívanějším prvkem byla nápověda. Protože vyhledávání nebylo účinné, lidé se hojně obraceli právě na nápovědu. Se silným důrazem na potřeby zákazníka IBM od základu přestavěla své stránky a zajistila logickou provázanost při vyhledávání. Týden po zavedení nových stránek užíváni vyhledávače a nápovědy dramaticky kleslo a online obchod navýšil o 400 procent.[9]

20

Výhody zákaznicky orientovaného webu Přehledné, jednoduše ovladatelné a zákaznicky orientované stránky zajišťují lepší kritiku a hodnocení, redukují počet chyb ze strany zákazníka, krátí čas potřebný k nalezení informací a zvyšují celkovou spokojenost. Navíc zákazník, který je spokojen s obsahem stránek a kvalitou poskytovaných sluţeb, je s větší pravděpodobností doporučí svým přátelŧm, rodině a známým.[9] Dobrým příkladem je Google, který se stal dominantním vyhledávacím portálem, aniţ by vloţil příliš prostředkŧ do reklamy.

2.3 Principy zákaznicky orientovaného návrhu webu Propast leţící mezi návrhářem a koncovým uţivatelem je základním problémem, který neodmyslitelně patří k tvorbě webu, a nezáleţí na tom, jestli se jedná o zábavu, elektronický obchod nebo informační web, řešením tohoto problému je zákaznicky orientovaný design. Jeho základy tvoří dva principy: 1.

poznejte svého zákazníka

2.

umoţněte zákazníkovi, aby se podílel na celkovém návrhu stránek[9]

2.3.1 Poznání zákazníka Poznání zákazníka je jeden z nejdŧleţitějších krokŧ v jakémkoliv návrhu designu. A jak uţ vyplývá ze samotného názvu, u návrhu zákaznicky orientovaného webu to platí obzvlášť. Jednou z nejdŧleţitějších věcí, kterou si musí tým návrhářŧ uvědomit, je zásada, ţe vy nejste váš zákazník. Zákazník nemá stejné zkušenosti jak vy, nepřemýšlí stejným zpŧsobem, nemluví jak vy, a hlavně neprovádí věci stejně, jak to dělají návrháři. Z toho vyplývá, ţe návrháři se nemohou při tvorbě webových stránek spoléhat a vycházet jen ze svých zkušeností a intuice.

21

Principy pro pochopení zákazníka Abyste vašim zákazníkŧm porozuměli, zvaţte všechny ovlivňující prvky daného designu: 1.

váš zákazník,

2.

jeho záměr,

3.

jeho technologie

4.

a sociální kontext.

Kaţdý z těchto prvkŧ má určité moţnosti a omezení, které váš projekt ovlivňují. Abyste vytvořili úspěšné webové stránky, musíte porozumět těmto faktorŧm a vyrovnat je, aby ţádný nedominoval, a přitom byl ve finále zohledněn.

2.3.2 Pochopení zákazníka Zákazníky mŧţeme chápat dvojím zpŧsobem: 1.

Chápání zákazníka jako individuality

2.

chápání zákazníka na základě podobnosti

U chápání zákazníka jako individuality se zaměřujeme na získání profilu o jeho znalostech, dovednostech a dalších charakteristikách, které mohou ovlivnit celkovou strukturu design a obsah webových stránek. Při chápání zákazníka na základě podobností uvaţujeme o porozumění lidem obecně na základě obecně platných psychologických pouček a znalostí v oblasti lidské psychiky.

2.3.3 Poznání zákazníkovy technologie Sama technologie je široký pojem a buď se celkově ignoruje, nebo se na ni klade příliš velký dŧraz. Hraje-li technologie při návrhu klíčovou roli, stane se z ní technologie sama pro sebe. Na takových stránkách se potřeby zákazníka jistě neuplatní. Například kdyţ návrháři pominou fakt, ţe spousta zákazníkŧ nedisponuje poslední verzí prohlíţeče a zásuvných modulŧ, mŧţe se stát, ţe klient na své obrazovce nic neuvidí.[9] 22

Návrháři by si měli uvědomit, čeho se dá současnou technologií dosáhnout, a jaké jsou její výhody a nevýhody. Zkrátka, záleţitosti technologie by neměly být rozhodujícím činitelem návrhu, tím by měli být lidé a jejich záměr.

2.3.4 Porozumění sociálnímu kontextu zákazníka Chcete-li si udělat představu, jak lidé, záměry a technologie zapadají do širšího sociálního kontextu a uspořádání, musíte si uvědomit, jak dané sociální faktory rozvíjejí moţnosti designu, a spojit věci do širších souvislostí. Vzrŧstající dŧleţitost online komunit jen dodává nutnost podívat se i na sociální strukturu a uspořádání. Před příchodem webu byl koncept online komunikace odkázán pouze na nástěnky s telefonními čísly, vývěsky a e-maily. Internet tato stanoviště posunul a rozšířil a napomohl tak myšlence, ţe skupiny sdruţované společným zájmem snáze naleznou své místo v kyberprostoru. Zaměření pozornosti na sociální faktory a uspořádání vám tedy mŧţe pomoci uvědomit si, jak webové stránky napomáhají vytváření určité komunity a upevňují dlouhodobé vztahy se zákazníky.[9]

2.4 Techniky pro poznání zákazníka V předchozí kapitole jsem uvedl prvky, které je třeba poznat a to zákazníky, jejich záměry, technologie a sociální kontext. Nyní si uvedeme techniky, které tomuto poznání napomohou. Techniky, mezi něţ patří i analýza zákazníka a jeho záměrŧ, sledování, interview, prŧzkum, volba cílové skupiny a ohodnocení webových stránek, vám napomohou určit cílového zákazníka a jeho potřeby. Mezi techniky, které se dají pouţít patří zejména: 

Pozorování a rozmlouvání se zákazníky



Vyuţití etnografického přístupu



Neformální rozhovor



Prŧzkum

23

Pozorování a rozmlouvání se zákazníky Techniky pozorování a rozmlouvání se zákazníky mohou být rychlé a neformální, zahrnují rozhovory u kávy, nebo návštěvy u zákazníka doma či v práci, kde vám zákazník ukáţe, co vlastně dělá.

Etnografický přístup Při pozorování mŧţeme vyuţít i etnografického přístupu. Etnografie je formální technika pouţívaná v sociologii a antropologii k pozorování lidí a jejich vzájemné interakce. Etnografové tedy studují lidi v jejich přirozeném prostředí. Výhodou tohoto přístupu je, ţe zde mŧţete vidět, co lidé ve skutečnosti dělají, nejen co říkají, ţe dělají. Mŧţete jim také v prŧběhu jejich činnosti klást otázky a ověřit si tak své předpoklady.[9]

Neformální rozhovor Další moţností je vedení neformálního rozhovoru se zákazníkem. Existuje několik zásadních zásad, kterých byste se měli drţet. 1. Pečlivě formulujte otázky 2. Nesměrujete lidi k určitým odpovědím 3. Pokládejte přednostně otázky, jeţ nevedou pouze k odpovědím ano a ne

Průzkum Prŧzkum mŧţete provést několika zpŧsoby. Například oslovením vybraného jednotlivce při vstupu do obchodního centra s tím, zda by vám chtěl pomoci při tvorbě nových webových stránek. Dalšími pouţívanými technikami jsou písemné prŧzkumy zasílané cílovým zákazníkŧm a dotazy po telefonu. Internet ale nabízí také moţnost provedení prŧzkumu online. Buďto vyuţijete sluţeb nějaké firmy nebo si nástroj prŧzkumu vytvoříte sami v rámci návrhářského týmu.[9].

24

2.5 Procesy vývoje zákaznicky orientovaných stránek V obecné rovině mŧţe být vývoj webových stránek rozdělen do sedmi krokŧ, které uvádí Duyne, Landay a Hong ve své knize Návrh a tvorba webŧ [9].  Určení  Průzkum  Odladění  Produkce  Realizace  Spuštění

 Údrţba

Určení Smysl této fáze spočívá v určení a objasnění rozsahu celého projektu, v definování obchodních cílŧ klienta a porozumění potřebám zákazníkŧ. Často tato fáze začíná prŧzkumem zjišťujícím, zda jsou webové stránky vŧbec vhodným prostředkem k dosaţení cílŧ klienta. Techniky, které se uplatňují v této fázi, jsou například rozhovory či korespondence s klientem zaměřené na odhalení a objasnění jeho očekávání. Na konci této fáze by mělo být jasné, kdo je cílový zákazník a jaké jsou jeho potřeby, jaké jsou obchodní cíle společnosti a jaké jsou základní navrţené prvky společnosti.

Průzkum V prŧběhu této fáze je obvykle vytvořeno několik rŧzných předběţných návrhŧ, které sice nereflektují barvy, obrazové přílohy a jiné, ale dávají však jako celek jasný obraz o navrhované struktuře webu a navigace. Na konci této fáze se pak vybere jeden nebo dva návrhy, s kterými se dál pracuje.

25

Odladění Tato fáze vývoje je zaměřena na vyladění předběţného modelu, který se vybral v předchozí části a jeho dalšímu rozvoji. Měly by se implantovat prvky navigace a rozvrţení jednotlivých funkčních částí. Výsledkem by měl být návrh schopný prezentace klientovi.

Produkce Cílem fáze produkce je vytvořit detailní sadu výstupŧ reprezentující konečnou podobu designu.

Realizace V této fázi se provádí testy pouţitelnosti a ověření grafiky, kvality kódování a HTML standardŧ. Webové stránky v této fázi návrhu by se měli opravdu dŧkladně protestovat a zajistit tím tak jejich kvalitu a profesionalitu. Na konci této fáze by měly být kompletní webové stránky.

Spuštění Fáze spuštění se zabývá uvedením webových stránek do ţivota. Dochází uţ zde jen k malým úpravám a dolaďování detailŧ. Někdy se spuštění rozdělí do více fází, kdy probíhá ještě závěrečné testování tzv. betaverze uţivateli.

Údrţba Cílem fáze údrţby je zajistit všechny aktivity nutné k plynulému chodu stránek. Fáze údrţby je nejdelší fází celého vývoje stránek, a proto je i nejnákladnější. Zahrnuje například změnu kódu a opravu chyb, zálohování všech webových stránek a vyhodnocování dat o spokojenosti uţivatelŧ.

26

3. NÁVRH WEBU 3.1 Návrh webu s ohledem na interativní design Klíčovým principem designu zaměřeného na zákazníka je jeho pochopení. V této kapitole se zaměřím na další tři související pravidla, a to: 

Udrţovat zákazníka v procesu návrhu



Vytváření prototypŧ



Hodnocení svého designu

Studie provedené společností Standish Group International prokázaly, ţe mnohé z projektŧ informační technologie vděčí za svŧj neúspěch právě nedostatku informací o koncovém zákazníku. Tento problém se snaţí eliminovat interativní design, a to nastavením dosaţitelných cílŧ a opakovaným testováním prototypŧ u zákazníka. Vše se opakuje tak dlouho, dokud výsledný návrh nesplňuje nebo nepřevyšuje stanovený cíl.[9] Interativní design se zaměřuje na jiţ existující návrh, který přepracovává do té doby, neţ odpovídá poţadavkŧm zákazníka.

Výhody interativního designu Interativní design s sebou nese tři hlavní výhody: 

Vytvoření stránek splňujících potřeby zákazníka



Pouţití všech prvkŧ tak aby je zákazník mohl snadno ovládat



Usnadnění hledání a nápravy problémŧ v době kdy je snadné a nenákladné je odstranit.

Proces interativního návrhu Proces interativního návrhu má 3 fáze: design, prototyp a vyhodnocení návrhu. Při návrhu designu dojde k vytváření obchodních cílŧ a potřeb zákazníka a k vytvoření celkového konceptu designu. U prototypu zase návrháři vytvoří předběţný model jako 27

základní scénář a panel akcí a v celé šíři vysvětlí jak vytknutých cílŧ dosáhnout. Výsledky poté budou vyuţity v příštím návrhu a celý postup se bude opakovat tak dlouho, dokud nebude dosaţeno poţadovaného cíle.[9]

Nastavení měřitelných cílů designu Některé z moţných cílŧ designu zahrnují toto: 

Rychlejší dokončení cíle



Úspěšné ukončení úkolu



Snadné zvládnutí pouţívání



Větší spokojenost



Zvýšení výnosu

Klíčem k dosaţení takových cílŧ je testování a měření.[9]

Principy designu Cíle designu představují výsledek, kterého chceme dosáhnout, a principy bereme jako prostředek jak ho dosáhnout. Zde je několik základních principŧ designu, které jsou zaloţeny na osmi zlatých pravidlech Bena Schneidermanna a deseti heuristikách Jakoba Nielsena. 1. Vše by mělo být v souladu 2. Nabídněte informativní zpětnou vazbu 3. Spoléhejte na paměť 4. Pomozte zákazníkŧm při nápravě a prevenci chyb 5. Podporujte zákazníkŧv dohled a svobodu 6. Usnadněte častým zákazníkŧm pouţívání akcelerátorŧ 7. Usilujte o estetický a minimalistický design[9].

28

Prototypy Prototypy jsou klíčovým principem, rychle vytvářejícím předběţné modely webových stránek, jeţ zajišťují zpětnou vazbu. Tyto prototypy sniţují rizika, napomáhají menším a méně komplexním systémŧm a vyzdvihují opravdové potřeby zákazníkŧ.[9].

Zhodnocení webových stránek Zhodnocení webových stránek je třetí, a často opomíjená fáze interativního designu. Bez ní se však nedovíme, zda bylo dosaţeno vytyčených cílŧ. Existují tři základní moţnosti zhodnocení webových stránek. 

Kritika expertŧ



Neoficiální zhodnocení



Oficiální studie pouţitelnosti

3.2 Návrh informační architektury Architektura webu Weby jsou vytvářeny s pomocí základních stavebních témat. Tato základní architektura definuje navigační rozhraní pro web a vytváří pro uţivatele myšlenkové modely o tom, jak jsou informace organizovány. Dobře vytvořená informační architektura přináší tyto výhody: 

Uţivatelé se na webu neztrácejí, dobře se orientují



Web se snadno a intuitivně pouţívá



Web pŧsobí profesionálně a dŧvěryhodně



Dobrá informační architektura pozitivně ovlivňuje pozici ve výsledcích vyhledávačŧ

Při návrhu webové architektury se pouţívají se tyto tři základní modely – posloupnost, hierarchie a pavučina. 29

Posloupnost Nejjednodušší zpŧsob, jak organizovat informace, je řadit je za sebou. Řazení podle posloupnosti mŧţe být chronologické, tematické či jednoduše abecední. Přímá posloupnost je nejvhodnější pro instruktáţní weby, například kdyţ se očekává, ţe čtenář projde celou danou sadu materiálŧ.[5]

Hierarchie Informační hierarchie se nejvíce hodí pro organizování komplexních souborŧ informací. Protoţe jsou weby obvykle uspořádány kolem jedné úvodní stránky, hierarchické schéma je zejména vhodné pro organizaci celého webu. Výhodou je ţe hierarchické uspořádání vás nutí přistupovat k uspořádání obsahu analytickým zpŧsobem, protoţe pouţití hierarchie je moţné jen u pouze dobře zpracovaného materiálu.[5]

Pavučina Organizační struktura podobná pavučině klade málo omezení na pouţívání informace. V této struktuře je cílem napodobit asociativní myšlení a volný pohyb myšlenek, a umoţnit tak uţivateli sledovat svoje zájmy unikátním, heuristickým aţ osobitým zpŧsobem.[5]

Informační architektura Informační architektura se zabývá tříděním informací do kategorií a podkategorií. Dále jejich pojmenováním a strukturou vně kategorií. S informační kategorií se setkal kaţdý z nás, kdo se pokoušel napsat delší práci, článek či knihu a musel přemýšlet jak svoje dílo rozčlenit na jednotlivé kapitoly, odstavce a podobně. Přínosy dobře zpracované informační architektury jsou zřejmé: 

Snadná orientace zákazníkŧ a rychlé nalezení poţadované informace



Snazší správa informací



Vytváření dobrého dojmu na zákazníky

30

Organizace informací na webu Vţdy kdyţ zpřístupňujeme nějaké informace, měli bychom si rozmyslet, jak tyto informace logicky uspořádat do jednotlivých stránek, a jak mají tyto stránky být velké. Kognitivní psychologové jiţ několik desítek let vědí, ţe většina lidí mŧţe v krátkodobé paměti uchovávat pouze čtyři aţ sedm diskrétních druhŧ informací. Zpŧsob, jakým lidé hledají a pouţívají referenční informace, svědčí o tom, ţe menší a konkrétnější jednotky informací jsou účelnější a snadno uchopitelné, neţ velké nediferencované bloky. [5] Lidé jsou také zvyklí na určité uspořádání informací z běţného ţivota, takţe je dobré kopírovat některé běţné a dŧvěrně známé schémata organizace. Například hierarchická struktura, která se běţně pouţívá ve většině kníţek. Kniha se skládá z kapitol a kapitoly se skládají z jednotlivých sekcí.

Existuje pět základních krokŧ v organizování informací. 1. Rozdělte obsah na logické části 2. Vytvořte hierarchii těchto částí podle dŧleţitosti 3. Pouţijte tuto hierarchii k vyznačení vztahŧ mezi jednotlivými částmi 4. Vytvořte web, který co nejpřesněji odpovídá této informační struktuře 5. Analyzujte funkční a estetickou úspěšnost celého systému.[5]

Většina informací na webech je uloţena v krátkých dokumentech s odkazy, přičemţ se nepředpokládá, ţe by tyto dokumenty byly čteny v nějaké posloupnosti. Má to několik dŧvodŧ: 

Většina uţivatelŧ nečte delší texty na obrazovce počítače, ale vytiskne si je či si je uloţí na disk



Rozdělování informací na kousky mŧţe pomoci organizovat a také prezentovat informace v jednotné formě



Výstiţné kousky informací se lépe hodí pro obrazovku počítače, která poskytuje pouze omezený pohled na dlouhé dokumenty 31

3.3 Prvky webu Jednotlivé weby se sice navzájem liší svým stylem, obsahem, uspořádáním a účelem, ale všechny weby, které jsou primárně vytvořeny jako zdroj informací, mají společné charakteristiky a části, které by měly všechny mít.

Domovská stránka Všechny weby jsou organizovány kolem domovské stránky, která funguje jako logický vstupní bod do celého systému webových stránek. V hierarchickém uspořádání je domovská stránka na vrcholu ţebříčku a všechny ostatní webové stránky by měly obsahovat přímý odkaz vedoucí zpět na tuto stránku. URL adresa domovské stránky je obvykle ta webová adresa, která odkazuje uţivatele na daný web. [5]

Seznamy zdrojů a relevantních webů Vyhledávače Vyhledávače jsou pro velké weby nutností a jsou vhodné i pro menší weby, které obsahují dlouhé dokumenty. Weby, které jsou často aktualizovány, vyţadují dobré a propracované vyhledávání, protoţe vaše menu a webové rejstříky pravděpodobně nebudou schopny drţet krok s kaţdou změnou, kterou uděláte v obsahu webu. Vyhledávání ale nemŧţe nahradit pečlivě uspořádanou strukturu menu a podřízených menu. Tyto dva systémy, procházení menu a vyhledávání podle klíčových slov se musí vzájemně doplňovat – jeden samotný systém není dostačující. Menu a tabulky s obsahem jsou skvělé pro získávání širšího přehledu, zatímco vyhledávání podle klíčových slov dává čtenáři konkrétní odkazy na výsledky.[5]

Kontaktní informace a zpětná vazba od čtenářů Vţdy nabídněte na nepřehlédnutelném místě vašeho webu alespoň jeden odkaz na emailovou adresu. Pouţitím webových formulářŧ mŧţete také poţádat vaše čtenáře o informace a zpětnou vazbu a poté pouţít databázi k ukládání a analýze údajŧ, které jste takto získali. 32

3.4 Grafický design webu Grafický vzhled webu je první, co uţivatel vidí při vstupu na stránky. Stránky by tedy měly být vytvořeny tak, aby jejich příjemný design a přehledná struktura co nejvíce zjednodušily pohyb po webových stránkách a přiměly potenciálního zákazníka k setrvání na webu. Mezi základní prvky grafického návrhu patří: 

Přehledná vizuální hierarchie



Výběr barev



Rozvrţení stránky



Dekorativní prvky

Dobře udělaný grafický návrh by měl hlavně uţivateli jasně rozlišit co je dŧleţité a co ne a usnadnit nalezení poţadované informace.

Vizuální hierarchie Primární úlohou grafického návrhu je vytvořit silnou a konzistentní vizuální hierarchii, ve které je kladen dŧraz na dŧleţité elementy, přičemţ obsah je organizován logickým a předvídatelným zpŧsobem. Grafický návrh je řízení vizuální informace s pomocí nástrojŧ jako je rozvrţení stránky, typografie a obrázky, které vedou oko čtenáře skrze celou stránku.[5] Stránky s jasnou vizuální hierarchií mají tyto tři vlastnosti: 

Čím je něco dŧleţitější, tím je to nápadnější



Objekty, které spolu souvisejí, jsou propojeny také vizuálně



Objekty jsou vizuálně zanořené, aby bylo zřejmé, co je částí čeho

Dobře promyšlená hierarchie nám ušetří práci tím, ţe nám obsah stránky předzpracuje, zorganizuje a určí priority, takţe ji takřka okamţitě pochopíme. Pokud ale stránka nemá jasnou vizuální hierarchii, kdyţ to například vypadá, ţe je vše stejně dŧleţité, jsme donuceni 33

k mnohem pomalejšímu pročítání stránky, abychom objevili jednotlivá slova a fráze a teprve potom se pokusili zformulovat náš vlastní názor na to, co je dŧleţité a jakým zpŧsobem jsou objekty zorganizovány.[5]

Rozdělení stránek Rozdělení stránek na jasně definované oblasti je dŧleţité, protoţe se uţivatelé mohou rychle rozhodnout, na které oblasti se mají zaměřit, a které mohou ignorovat. Rŧzné studie zaměřené na sledování pohybu očí na webové stránce napovídají, ţe uţivatelé se velice rychle rozhodují, ve které části stránky pravděpodobně najdou pro ně dŧleţité informace a na zbylé části stránky se pak většinou nikdy nepodívají – skoro jakoby vŧbec neexistovaly.[5]

Výběr barev Výběr barev bývá někdy podceňován, ale je to velmi dŧleţitá součást grafického návrhu. Existují rŧzné studie, jak pŧsobí barvy na uţivatele a jaké vyvolávají emoce, tím se tady podrobně zabývat nebudu, nás bude zajímat jen pouţití barev z hlediska estetického a funkčního. Pouţité barvy by neměly být moc kontrastní, aby z toho uţivatele brzy nerozbolely oči, takţe například není příliš vhodné pouţít bílý text na černém pozadí. Sice je to dobré pro čitelnost, ale rozbolí z toho oči po delším čtení. Ideální je většinou šedý text, nebo obligátní černý, popřípadě tmavě modrý. Co se týče výběru barvy pozadí, k tomu se musí přistupovat také opatrně. Lepší je pouţít jen jednu souvislou barvu. Nejlepší je pouţít bílou barvu, nebo světlý odstín jiné barvy.

Rozvrţení stránky Rozvrţení stránky neboli layout je jakési schéma, které nám říká, kde bude který prvek - jako například vyhledávání, hlavní navigace a ostatní typické součásti stránky.

34

Existují 3 základní druhy layoutŧ stránky: 1.

Rámový (frame)

2.

Tabulkový (table)

3.

CSS

Rámový layout Tento layout stránky je jeden z nejstarších zpŧsobŧ. Pouţívá se tak ţe se umisťují dvě a více stránek vedle sebe. Máme tedy vedle sebe vertikálně dvě stránky, menu a obsah. Menu zabírá 20 procent stránky, obsah zbytek.

Design vytvořený pomocí tabulek Pro vytváření samotných layoutŧ stránek a pro takové umísťování prvkŧ s určitou přesností se po dlouhou dobu pouţívaly klasické HTML tabulky, které byly v podstatě jediným moţným zpŧsobem, jak podstatně ovlivnit celkový vzhled webu. Dnes jsou ovšem tyto tabulkové layouty nahrazovány kaskádovými styly.[5]

Design vytvořený pomocí CSS Hlavní výhoda tvorby designu pomocí kaskádových stylŧ je plná vizuální kontrola nad designem, která je potřebná pro vytváření vizuálně atraktivních a přitom přehledných webových stránek. Umisťování pomocí kaskádových stylŧ dovoluje designérŧm nastavovat okraje, výplň nebo orámování jednotlivých prvkŧ, vzájemně rozmísťovat text a obrázky, skrývat nebo odkrývat některé prvky nebo skládat prvky takovým zpŧsobem, ţe se vzájemně překrývají.[5]

Rozlišení stránek Zatímco ještě v roce 2004 a 2005 bylo uváděno a doporučováno uzpŧsobovat vzhled stránek pro rozlišení spíše 800*600 a nadstavbově 1024*768, v současnosti je uţ standardem rozlišení vyšší neţ 1024*768 (v roce 2010 je to 76 % uţivatelŧ). Zatímco v roce 2009 to bylo pouze 56 % pro rozlišení vyšší neţ 1024*768. Takţe v současnosti je úplným minimálním standardem rozlišení 1024*768 a výše. 35

3.5 Kvalitní obsah webu Kvalitní obsah Kvalitní obsah tvoří jádro webových stránek, měl by to být dŧvod, proč stránky uţivatelé navštěvují. Kvalitní obsah tvoří většinou text, ale mŧţou to být i obrázky, videa, prezentace či webové aplikace. Nás bude zajímat pouze textový obsah. Existuje několik zásad, které by měl kvalitní textový obsah splňovat: 

Stručnost – uţivatelé na webu obecně neradi čtou dlouhé texty, kdyţ uţ musí, raději si je vytisknou, proto je lepší pro zaujmutí uţivatele psát raději kratší texty a udrţet je tak na vašich stránkách online.



Srozumitelnost – platí tady zásada stejná jak u webdesignu obecně, nikdy nepředpokládat ţe kaţdý uţivatel má stejné znalosti, stejné uvaţování a jednání jak já. Proto je lepší psát raději jednoduše, všechny cizí pojmy vysvětlit.



Informační hodnota – uţivatelé se primárně chtějí z textŧ na webu dozvědět něco nového, proto by texty měly obsahovat nějaké nové zajímavé informace, nebo alespoň obecně známé informace poskládané netradičním zpŧsobem či zařazené do překvapivého kontextu.

Obecné zásady pro samotný text Co se týče samotného textu, měl by splňovat dvě zásadní podmínky. Měl by být přehledný a dobře čitelný. K tomu dopomŧţe drţení se těchto zásad: 

Písmo by nemělo být příliš malé. V dnešní době je jiţ standartem u prohlíţečŧ moţnost zvětšení písma zkratkou ctrl + kolečko myši.



Barva písma a pozadí by měla být dostatečně kontrastní, to jsem jiţ zmiňoval v kapitole o grafice



Řádky textu by neměly být příliš dlouhé

36

Forma textového obsahu Lidé čtou na webu jinak. Jedním z dŧvodŧ je špatná čitelnost textu na obrazovce. Dalším dŧvodem je neposednost webu, čtenáři poskakují od stránky k stránce, potřebují se dostat rychle k informacím, o které mají zájem, a pak zase mizí někam dál.[6] Proto by měl být textový obsah webu výstiţně stručně a přehledně strukturovaný. Abyste zachytili pozornost čtenáře, musíte pouţít nadpisy, seznamy a typografické zdŧraznění – tyto prvky jsou na stránkách vidět i při zběţném pohledu.

K tomu napomáhá: 

Písemný styl převrácené pyramidy



Výstiţné titulky



Členění do odstavcŧ



Nadpisy a podnadpisy



Zvýraznění textu

Písemný styl převrácené pyramidy Lidé se na webu pohybují rychle a hledají informace nebo klíčová slova. Pokud není písemný styl webu rychlý a snadno srozumitelný, obvykle si jeho obsah nikdo nepřečte. Vaši zákazníci chtějí, aby se webové stránky rychle stahovaly, snadno pouţívaly a rychle se četly. Abyste zákazníkŧm usnadnili orientaci a neodradily je zbytečným textem, pouţívejte ţurnalistický styl zvaný převrácená pyramida. Na začátku kaţdého dokumentu umístěte jeho stručný obsah – v tradiční novinařině se tomu říká obrácená pyramida. Dŧleţité informace se snaţte umístit do prvních pár odstavcŧ, kde se k nim uţivatelé rychle dostanou. Noviny a časopisy v tomto stylu excelují, protoţe ví, ţe čtenáři mají tendenci přelétávat a zběţně si prohlíţet text, dokud nenajdou konkrétní věc, která je zaujme, a dokonce nemusí číst dále neţ titulek nebo první odstavec.[9]

37

Výstiţné titulky Jak sem jiţ zmínil v úvodu této kapitoly, uţivatelé na webu skákají ze stránky na stránku, proto je esenciálně nezbytné zaujmout jejich pozornost. Dŧleţité je proto vymyslet stručný, ale výstiţný titulek, který sdělí čtenáři, co má v následujícím textu očekávat. Titulek je typicky část věty čítající zhruba deset nebo méně slov, aby mohl být napsán velkým písmem na malém prostoru. Dobrý titulek splňuje následující podmínky: 

Potvrzuje informaci, která následuje v úvodníku



Obsahuje klíčová slova, hlavně podstatné jméno a sloveso. Nejlepší titulky uvádějí akci, jako Zde mŧţete koupit a prodat cokoliv



Neprozrazuje celý příběh, aby byl čtenář donucen pokračovat ve čtení



Pokud se jedná o zprávu, sděluje nejdŧleţitější aspekt relevantní zprávy



Je zábavný, aniţ by uráţel nebo uváděl do rozpaku své čtenáře[9]

Nadpisy a podnadpisy Nadpisy, podnadpisy a podobné orientační body jsou základní části textu na www, stejně jako v tradičním papírovém tisku. Jednotný přístup k nadpisŧm a podnadpisŧm pomŧţe vašim čtenářŧm v orientaci. Lidé jsou zvyklí na určitá pravidla týkajících se nadpisŧ a podnadpisŧ z tištěných médií, proto je vhodné dodrţovat je i na webu a usnadnit tak čtenářŧm orientaci.

Členění do odstavců Odstavce by měly rozšiřovat myšlenku uvedenou v nadpise, tedy obsahovat to co nadpis slibuje. Co se týče formy, tak text členěný do odstavcŧ se lépe čte, je vhodné oddělovat odstavce mezerou asi 1 řádek od ostatního textu. Ideální je oddělovat odstavce po pěti řádcích, jelikoţ bylo zjištěno, ţe souvislý text nad 5 řádkŧ se jiţ špatně čte.

38

Zvýraznění textu Pro zvýrazňování textu na webových stránkách platí pár zásadních pravidel: 

Provádí se kurzivou, lépe však tučným písmem



Není vhodné kombinovat více zpŧsobŧ zvýrazňování



A absolutně nikdy nepouţívat podtrhávání pro zvýraznění

3.6 Copywriting aneb psaní pro web Copywriting je umění psaní reklamních textŧ. Význam copywritingu na internetu je zvlášť dŧleţitý, neboť jak jiţ bylo několikrát zmíněno, máte jen chvíli na upoutání čtenářovy pozornosti, neţ zmizí na jinou stránku. Jak říká Steve Krug: „Na internetu je konkurence vzdálená pouze jedno kliknutí.“[2]

Specifika čtení na webu Internetoví čtenáři přistupují k textŧm na internetu jinak neţ k tištěným. Dŧleţitá je pro ně hlavně rychlost nalezení poţadované informace. Tomu podřizují i samotné čtení, text nečtou od začátku do konce, ale spíše skenují a hledají klíčová slova, které je zajímají. Souvisí to jak se záplavou informací, kdy „dnešní doba přináší záplavu informací, ve kterých si kaţdý vybírá jen ty, jeţ ho dokáţou skutečně obohatit.[21] Dalším specifikem internetového čtenářství je nedostatek trpělivosti, kterému nahrává v dnešní době jiţ standardní vysoká rychlost připojení, a tlačítko zpět. Takţe pokud to vypadá, ţe hledaná informace není na těchto stránkách k nalezení, stačí jen kliknout na tlačítko zpět a zkusit hledat na jiných stránkách, není to ţádný velký problém.

Texty pro web Z tohoto chování uţivatelŧ při čtení textŧ na webu mŧţeme vyvodit pár základních vlastností, které by měl mít internetový text: 

Text musí být pro čtenáře přínosný, musí sdělit něco nového a objevného 39



Text musí být výstiţný a stručný



Text musí obsahovat co nejvýstiţnější titulky

Přínosy copywritingu Ačkoliv je úspěšnost webových stránek daná řadou rŧzných faktoru, od grafického provedení, pouţitelnosti a přístupnosti, tak nejvýznamnějším faktorem je dobře napsaný a spravovaný obsah. Mezi hlavní přínosy se dá povaţovat: 

Dobrý text prodává, jak je zmiňováno na nespočtu stránek zabývajících se copywritingem



Odlišení od konkurence a tedy konkurenční výhoda



Zapamatovatelnost

3.7. Navigace na webu Navigace Jedním z problémŧ návrhu webu je skutečnost, ţe zákazníci se na web dostávají mnoha rŧznými zpŧsoby. Nemusí vŧbec vstoupit na vaši domovskou stránku a jejich cíle a poţadavky se často v mnohém odlišují. Jedním z klíčových vlastností k naplnění očekávání zákazníka je podpora těchto odlišností ze strany webu.[9] Proto byste na svých stránkách měli nabízet rŧzné moţnosti navigace, abyste vyhověli potřebám svých zákazníkŧ.

Různé způsoby navigace Zákazníci se na webu navigují proto, aby našli informace a uskutečnili cíle. Mohou mnoha zpŧsoby vyhledávat informace, aktivity, nebo výrobky. Např. jeden zákazník mŧţe mít na mysli něco konkrétního a pouţít vyhledávací nástroj k tomu, aby to našel. Druhý zákazník naproti tomu mŧţe upřednostnit prohledávání pomocí odkazŧ a třetí zákazník se zase chce jen porozhlédnout a počkat co mu padne do oka.

40

Protoţe se zákazníci chtějí pohybovat na webu rŧznými zpŧsoby podle jejich volby, web jim musí nabídnout více zpŧsobŧ navigace.[9]

Konzistentní umístění navigačních prvků Základním prvkem jednoduché navigace je konzistentní umístění navigačních prvkŧ. Zákazníci očekávají na základě svých předchozích zkušeností, ţe se tyto prvky budou nacházet na určitých místech. Jakmile zákazníci otevřou stránku, musí najít odkazy, které jim umoţní uskutečnit jejich cíle a záměry. Proto prvky, které je přivedou k jejich cílŧm, umístěte poblíţ místa, kde začnou číst.

Existují tyto druhy navigací 

Základní navigace



Hlavní navigace



Lokální navigace



Rozbalovací menu



Drobečková navigace



Rozcestníky



Kontextová navigace



Fasetová navigace

Základní navigace Základní navigace většinou odpovídá základní struktuře webu a často je zobrazena jako kombinace hlavního a lokálního menu.

41

Hlavní navigace Hlavní navigaci se také říká menu, a obsahuje ji téměř kaţdý, vícestránkový web. Vyskytuje se na kaţdé stránce, a obvykle obsahuje odkazy na hlavní sekce webu, nebo podsekce.

Lokální navigace Lokální navigace se pouţívá pro orientaci uţivatele, aby věděl na jaké stránce sekce či podsekce se nachází. Obvykle bývá umístěna na levé nebo prav´straně jakou součást hlavního menu.

Drobečková navigace Drobečková navigace má za úkol vyznačovat aktuální polohu stránky v hlavní navigační struktuře a zároveň umoţnit rychlý přesun na stránky umístěné výše ve struktuře. Obvykle se vyskytuje nad hlavním nadpisem stránky.

3.8 Domovská stránka Vstupní domovská stránka Domovské stránky jsou portály, skrze které přijde většina návštěvníkŧ. Domovská stránka je obvykle tím prvním, co zákazníci vašeho webu spatří. Tato stránka je rozhodující, protoţe nejen ţe je zhlédnuta 10 aţ 100 krát častěji neţ ostatní stránky, ale rovněţ musí na zákazníka nějak zapŧsobit, aby jej přiměla pokračovat dál. Samozřejmě díky vyhledávačŧm mŧţe být vstupní stránka jakákoliv, to však nemění nic na tom, ţe by se měl klást velký dŧraz na dobře zvládnutou domovskou stránku. Domovská stránka zároveň představuje místo, které má za úkol říci návštěvníkovi co web umí, a zároveň místo, kam se mŧţe návštěvník vrátit, kdyţ se ztratí. Proto by měl ze všech stránek webu vést odkaz na hlavní, domovskou stránku.[9] Domovská stránka tedy musí přitáhnout návštěvníky a současně se vypořádat s mnoha problémy, jako se značkou, obsahem a moţností rychlého načtení.

42

Účely domovské stránky Domovská stránka bude s největší pravděpodobností nejnavštěvovanější stránkou vašeho webu, proto by se na ní měly nacházet všechny dŧleţité informace, které by uţivatel mohl potřebovat. Ovšem prostor na stránce je omezený a musí slouţit následujícím cílŧm: 

vytvoření dobrého vzhledu a dojmu,



vytvoření značky webu a identity,



nabídnutí cenného obsahu,



vytvoření snadno pouţitelné navigace, vytvoření jednotného a logického rozvrţení stránky



poskytnutí vysokého výkonu.

Vytvoření dobrého prvního dojmu Návštěvníci mohou být odrazeni uţ samotným stylem nebo vzhledem a dojmem domovské stránky, která říká: tenhle web není nic pro mě. Křiklavé barvy, velké animace, moderní hudba na pozadí zapŧsobí na teenagery a mladé lidi, ale pro prezentaci například bankovních sluţeb či realitní kanceláře je naprosto nevhodná Proto vytvářejte web s ohledem na cílovou skupinu vašich zákazníkŧ a dostane se vám pozitivní odezvy na vámi vytvořený vzhled.

Vytvoření identity a značky webu Zákazníci potřebují vědět, ţe váš web umí dodrţet slib. A pokud je váš web hodnotný, budou si jej chtít zapamatovat do budoucna, aby jej mohli sami pouţít, nebo říci o něm přátelŧm. Tohle znamená vytvoření pozitivní identity a cenné značky.[9]

Nalákáni obsahem Kaţdý zákazník si udělá úsudek během několika mála vteřin po vstupu na web. Proto musíte během této krátké doby upoutat a udrţet zákazníkovu pozornost.

43

Šablony stránek Vaše domovská stránka tvoří nepsanou předlohu rozvrţení a designu celého vašeho webu, na základě které zákazníci předpokládají, ţe klíčové prvky této stránky najdou na stejném místě i u ostatních stránek.

3.9. Přístupnost Přístupnost je oblast tvorby webu, která úzce souvisí s pouţitelností. Zatímco pouţitelnost se týká hlavně obecných pravidel v návrhu webu, přístupnost se zabývá spíše technickým řešením. Přístupný web mŧţeme definovat jako web, který mohou stejným zpŧsobem vnímat návštěvníci bez ohledu na jejich trvalá nebo dočasná zdravotní omezení, technické vybavení, znalosti a dovednosti.[6] U přístupného webu jde hlavně o to dostat obsah webu k všem uţivatelŧm bez rozdílu, neupřednostňovat ani neomezovat nikoho. Přístupný web ovšem neznamená, ţe pro kaţdého návštěvníka vypadá web stejně. Jde hlavně o to, ţe veškeré informace dostupné pro návštěvníky bez jakéhokoliv typu omezení jsou dostupné i pro kaţdého jiného návštěvníka webu.[6]

Důleţitost přístupnosti Ne všichni uţivatelé internetu mají stejné: 

Zdravotní disposice



Zkušenosti s internetem



Jazykové vybavení a schopnost porozumět psanému textu



Technické vybavení



Softwarové vybavení

A těchto uţivatelŧ internetu s některým z výše zmíněných omezení je opravdu hodně. 44

Podle statistik z Velké Británie 8, 6 miliónŧ lidí trpí některou formou zdravotního postiţení, coţ odpovídá zhruba 14 % britské populace, 12 miliónŧ lidí je starších 60 let, coţ odpovídá 20 % britské populace a 9 % britské populace trpí některým typem barvosleposti.[8]

Hendikepovaní návštěvníci Mezi hendikepované návštěvníky patří: 

Zrakově postiţení



Sluchově postiţení



Pohybově postiţení



Uţivatelé se zobrazovacími problémy



Vyhledávací roboti

Přínosy přístupného webu Vzhledem k tomu, ţe vytvoření přístupného webu by nemělo být o mnoho draţší neţ vytvoření webu nepřístupného, a přinese uţitek nejen jeho majiteli ale i zákazníkŧm, neexistuje dŧvod proč mít web nepřístupný.[6] Hlavní přínosy přístupného webu se dají rozdělit do 3 kategorií: 

Zvýšení návštěvnosti a zisku



Zvýšení efektivity webu



Zvýšení kladné a zamezení záporné publicity

Zvýšení návštěvnosti a zisku Skutečnost, ţe web mohou pouţívat i lidé s nejrŧznějšími omezeními, jistě přispěje k rŧstu návštěvnosti webu. Takţe zase je to i v zájmu provozovatele webu a rozhodně to není samoúčelné. Správně sémanticky strukturovaný obsah oddělený od formy, díky vyuţití CSS, dovolí vyhledávacím robotŧm lépe zaindexovat obsah webu a zároveň vynese web na lepší pozici ve výsledcích vyhledávání. Vzhledem k tomu, ţe více neţ polovina českých uţivatelŧ 45

internetu navštíví web na základě výsledkŧ vrácených fulltextovými vyhledávači, bude výsledek opět nárŧst návštěvnosti webu.[6]

Zvýšení efektivity webu Oddělení obsahu a formy prezentace vede k dalším výhodám, především ve smyslu snadnější úpravy a správy webu. Změna celkového vzhledu webu či umístění navigace mŧţe být provedena pouze na základě několika málo změn v hlavním stylovém přepisu. Jasnější a přehlednější navigace umoţní vykonávat návštěvníkovi pouze nezbytně nutné mnoţství krokŧ k nalezení poţadované informace, coţ spolu s menší velikostí stránek, které musí webový server odesílat, zajistí vyšší výkon a přístupnost serveru a niţší potřebu rozšiřovat jeho kapacity. Tyto skutečnosti se následně projeví i v niţších nákladech vynakládaných na správu a provoz webu.[6]

Zvýšení kladné a zamezení záporné publicity Nepřístupný web rozhodně nevyvolá u návštěvníkŧ, kteří se díky nepřístupnosti nemohli dostat k poţadovaným informacím, tzv. kladné slovo z úst, naopak přístupný web mŧţe naopak šíření kladného slova podpořit. Majitel přístupného webu se nemusí obávat, ţe by jeho web byl v rozporu s existujícími či budoucími zákony, které se týkají diskriminace či přístupnosti na webu.[6]

Základní pravidla přístupnosti Mezi základní pravidla přístupnosti, která by se měly dodrţovat, patří především: 

Web je pouţitelný i bez obrázkŧ



Web je pouţitelný i bez stylŧ



Web je funkční i s vypnutým Flashem a JavaScriptem

46

4. NOVÉ TRENDY VE WEBDESIGNU Webdesign roku 2010 a 2011 se uţ nezaměřuje jenom na vizuální krásu prezentace a ohromení uţivatele uţitím flashových animací a jiných grafických vylepšeních. Moderní webdesign směřuje hlavně k jednoduchosti a funkčnosti. Uţivatelé si ţádají hlavně vysokou rychlost načítání a odezvy, intuitivnost ovládání, líbivý ale hlavně funkční a ne přeplácaný grafický design a čím dál častěji hraje roli i přizpŧsobivost stránky rŧzným zobrazovacím zařízením a přístrojŧm. Ve zkratce uvedu shrnutí nejdŧleţitějších trendŧ webdesignu za minulý a tento rok a co se dá očekávat i do budoucnosti

4.1 Grafický design Co

se

týče

trendŧ

v grafickém

návrhu

stránky,

převaţuje

jednoduchost

a minimalismus. Hlavním trendem jak ho vidím já, jsou jednoduchá barevná schémata. Kombinace dvou maximálně tří barev, které spolu vzájemně ladí, a nemusí to být jen černá a bílá, neboť tato kombinace je velmi neoriginální. Například ţlutá a zelená, nebo červená a ţlutá, dokáţí udělat velmi originální a zapamatovatelné kombinace. Dalším trendem v grafickém designu je a bude uţívání velkých obrázků na pozadí. Dříve bylo uţití velkých obrázkŧ v grafickém návrhu nemyslitelné, ale nyní díky lepší optimalizaci, rychlému připojení a nahrávání dokáţou designéři s pouţitím velkoformátových obrázkŧ divy. Mŧţeme také očekávat stále větší počet stránek, které budou vyuţívat 3D zobrazení. Většímu rozšíření těchto stránek zatím brání podpora všech prohlíţečŧ, coţ v blízké budoucnosti jiţ nebude platit.

4.2 Písmo a text Uţívání většího písma Typografie předchozí éry webdesignu se vyznačovala uţíváním tzv. web – safe fonts. Tedy fontŧ, které se bezpečně zobrazí na všech prohlíţečích. S nárŧstem rŧzných nástrojŧ 47

a nových verzí prohlíţečŧ se typografie stává mocným nástrojem web designera, který je omezen uţ jen zadavatelem a svou představivostí. Roste tak poptávka po větších a více odváţnějších fontech, kterou je moţno uspokojit díky nástrojŧm jako jsou WhatTheFont, CSS Typeset a Typetester. Dalším trendem, který čím dál tím více mŧţeme sledovat je kopírování typografie z tištěných médií. Je to logické, neboť tištěná média mají za sebou desítky let vývoje, které dovedly jejich layout stránky a typografii k dokonalosti.

Větší nadpisy Další věcí převzatou z tištěných médií je uţívání velkých nadpisŧ. Velké nadpisy jsou dŧleţité pro přilákání a udrţení pozornosti čtenáře a uţívají se ve stále větší míře.

Pouţíváni fontu Serif Starší, tradiční Webdesign se vyznačoval pouţíváním fontŧ Arial nebo Verdana, v podstatě se ţádné jiné fonty moc nepouţívaly, kvŧli čitelnosti na obrazovce. Se vzrŧstajícím rozlišením, které dokáţí zobrazit monitory, a díky antialiasingu toto jiţ neplatí. To umoţňuje designérŧm definovat si své vlastní fonty.

4.3 Obecné novinky Quick response Rok 2011 by měl být rok velkého rozšíření systému Quick response. Zatím jsme se s ním mohli setkat spíše jen v článcích v časopisech a v příspěvcích na konferencích, kde to bylo představeno jako ţhavá novinka, která se brzy stane běţnou součástí našeho ţivota. Tato obdoba čárových kódŧ, zkráceně QR znamená Quick Response (rychlá odezva). Jednoduše tyto kódy vyfotíte mobilním telefonem, který je vybaveným fotoaparátem a patřičným softwarem, a tímto se dostanete na stránku producenta daného čárového kódu. Tato technologie mŧţe být vyuţita mnoha rŧznými zpŧsoby a dokazuje tak, ţe webdesign roku 2010 a 2011 je ve znamení mobility.

48

Širší vyuţití thumbnails Díky Google se setkal i prŧměrný uţivatel s tzv. thumbnail. Díky tomuto uţ nemusíme více klikat na ikonku, která vypadá zajímavě, abychom se dověděli, zda opravdu je zajímavá. Stačí najet kurzorem na odkaz či ikonku a dozvíte se, co obsahuje. Toto vylepšení ušetří uţivateli spoustu času, kdy nemusí klikat a čekat aţ se odkaz plně zobrazí, aby zjistil, ţe to byla ztráta času. Takto to ví po jednoduchém umístění kurzoru.

Propojení se sociálními sítěmi Dalším trendem je stále větší propojování obchodních stránek se sociálními sítěmi. Firmy si čím dál více zakládají přímo stránky například na Facebooku, kde se k nim uţivatelé mŧţou dostat daleko jednodušeji a přirozeněji. Uţivatelé Facebooku tak ani nemusí opouštět dŧvěrně známé prostředí a design a přitom mohou nakupovat či dozvídat se informace ze světa. V tomhle vidím logické pokračování obrovské popularity Facebooku, to je moţnost jak mŧţe dále rŧst a čím dál více ovlivňovat naše ţivoty. Nese to určité výhody, například jednoduchost vytvoření vlastního profilu na Facebooku a tudíţ ušetření času a peněz za tvorbu vlastní stránky, i kdyţ takových subjektŧ, kteří budou mít pouze profilové stránky na Facebooku a ne své vlastní stránky bude minimum, ale do budoucna by jich mohlo přibývat. Otázka je zda to neomezí nové designérské nápady, kdyţ vytvářené stránky budou všechny v jednoduchém designu té které sociální sítě.

Stránky pro mobilní telefony S masovým rozšířením mobilních zařízení s velkými displeji, rŧstem výkonnosti těchto zařízení a rychlým připojením roste dŧleţitost správně nadesignovaných stránek pro tyto zařízení. Uplynulý a následující rok je ve znamení boomu počtu webových stránek uzpŧsobených pro tyto zařízení. Udělat designově dobrou a zároveň plně funkční stránku pro tyto zařízení neznamená jen ze stávající stránky odebrat náročnější části a upravit rozlišení stránky. Pro design těchto stránek jsou dŧleţité hlavně tři věci: Rychlost přenosu dat a načítání, ovládání upraveno pro dotekové ovládání a moţnost zoomování textu včetně dobré čitelnosti.

49

II. PRAKTICKÁ ČÁST 5. ANALÝZA WEBOVÉ FIREMNÍ PREZENTACE A E-SHOPU Obsahem mé praktické části je analýza firemní webové prezentace a přidruţeného eshopu firmy Heluz v.o.s., www. heluz.cz. Ve spolupráci s Ing. Zdeňkem Hejlem, který mi ukázal a názorně vysvětlil postupy takovéto analýzy a poskytl mi materiály z přípravné fáze, díky čemuţ jsem mohl provést vlastní analýzu. V dnešní době jiţ splývají pojmy zákaznicky orientovaný web a pouţitelný web. Zákaznicky orientovaný web, a zákaznické testování jsou jen pojmy, stejně jako testování pouţitelnosti, uţivatelské testování obchodní výkonnost webu – je jedno jak se tomu říká, cílem je takový web, který je přívětivý k návštěvníkŧm webu a který usnadňuje plnění obchodních cílŧ webu. Proto se ve své praktické části zaměřím převáţně na části webu, které jsou vidět na první pohled, jako je hlavní domovská stránka, grafický design, a které jsou nezbytné k dobrému pouţívání webu, jako je navigace a informace o produktech. Obsahem mé praktické části bude analýza pŧvodně zamýšleného návrhu webu firmy Heluz.cz a připomínky z hlediska pouţitelnosti a zlepšení designu. Analýza je členěna do tematických oblastí, jejichţ obecné charakteristiky jsem podal ve své teoretické části. Jedná se především o celkový design, grafiku a písmo, navigaci a domovskou stránku. U kaţdé části bude přiloţen: 

Screenshot problémové oblasti s přidanými popiskami.



Doplňující informace



Obecné návrhy řešení

Firma Heluz v.o.s. se zabývá výrobou a prodejem komplexních cihlových výrobkŧ. V současné době je druhým největším výrobcem a dodavatelem cihlového materiálu na českém trhu. Nyní se podíváme blíţ na jejich webovou prezentaci.

50

5.1 Grafický design

Obrázek č. 1 - zdroj www.heluz.cz

5.1.1 Celkový grafický design webu První oblast, kterou budu rozebírat je celkový design tohoto webu. Celkový design a jak pŧsobí na návštěvníky je velmi dŧleţitá součást kaţdé firemní prezentace. Měl by zaujmout hned na první pohled, pŧsobit moderně a příjemně. Jak mŧţeme vidět na screenshotu z pŧvodního návrhu, celkový design webu rozhodně neodpovídá aktuálním trendŧm tvorby webŧ. Uţ na první pohled pŧsobí neelegantním a zastaralým dojmem. Zákazníkŧm tento web rozhodně nebude připadat zajímavý a atraktivní, vypadá totiţ stále jako vzniku před pěti a více lety. Design pŧsobí velmi hranatým a levným dojmem. Ačkoliv barevnost není zvolena úplně nejhŧře, měla by být zvolena kontrastnější. Nynější barevná kombinace pŧsobí mdlým, vybledlým dojmem. Vzhledem k tomu, jak jsem jiţ několikrát zmiňoval v teoretické části mé práce, ţe rozhodující je první dojem, který ovlivní celkový přístup zákazníka k webu, určitě bych doporučil zmodernizovat design webu. Doporučoval bych tedy zmodernizovat celkový grafický design, pouţít více oblých tvarŧ a přívětivější barvy. 51

5.1.2 Písmo a text


Na tomto screenshotu vidíme ukázky zhoršené čitelnosti textu, konkrétně tři, a to přímo jiţ na domovské stránce:

Jedná se o: 

problémy s kontrastem mezi pozadím a barvou textu (prvky 1 a 2)



nedostatečné mezery mezi nadpisy a následným textem (prvek 1)



nevhodnou šířku řádku (prvek 3)

52

Jak vidíme na následujících obrázcích kontrast písma a pozadí je nevyhovující.

Obrázek č. 3 - zdroj www.sovavsiti.cz

Obrázek č. 4 - zdroj www.sovavsiti.cz

U této části je mým doporučením pro zajištění přijatelné čitelnosti textŧ kontrolovat kontrastnost pouţívaných barev na popředí a pozadí a také klást velký dŧraz na typografii písma. 53

5.2 Domovská stránka webu Zásadním nedostatkem domovské stránky je podle mne absence jakékoliv výraznější upoutávky na nabízený sortiment a sluţby. Kdyţ návštěvník přijde na tuto stránku a hledá například přehled sortimentu, tak jedinou jeho moţností jak se k němu dostat je pomocí nevýrazného odkazu v horním menu. Doporučil bych tady vytvořit nové wireframy (návrhy prvkŧ a jejich rozvrţení) a na jejich základě domovskou stránku přetvořit tak, aby lépe odpovídala potřebám zákazníkŧ.


54

5.3 Navigace na webu


Jak mŧţeme vidět na tomto screenshotu, návrh webu obsahuje pět základních navigačních prvkŧ (viz. číslování na obrázku). 1. horní menu 2. boční menu 3. drobečková navigace 4. kontextová navigace

55

Ad 1. Horní menu Toto horní menu (prvek 1) obsahuje kromě jedné poloţky pouze samé obecné informace o firmě. Tou jedinou relevantní poloţkou je sortiment. Navíc vzhledem k tomu, ţe toto menu je navíc poměrně nevýrazné oproti ostatním částem stránky, stává se poloţka sortiment jednou z nejméně výrazných prvkŧ na stránce. A přitom u webové prezentace firmy prodávající nějaké výrobky, by měla být poloţka sortiment klíčovým prvkem celého webu.

Ad 2. Boční menu U bočních menu lze identifikovat několik zásadních problémŧ. 

spodní menu, (prvek 3), pŧsobí jako nadřazené pro horní boční menu (prvek 2)



nevhodné pojmenování poloţek spodního menu (není na první pohled jasné, jaký bude obsah jednotlivých stránek menu).

Řešením těchto nepřehledností je provedení nového návrhu navigačních webu, potaţmo celé struktury webu.

Ad 3. Drobečková navigace Drobečková navigace (prvek 4) není vhodně generována a také není konzistentní na celém webu. Správně tvořená drobečková navigace by měla začínat odkazem na domovskou stránku, pokračovat odkazy na nadřazené kategorie a končit by měla uvedením názvu aktuální stránky bez odkazu.

Ad 4. Kontextová navigace Kontextová navigace (prvek 5), která je uváděna na konci kaţdé stránky, a která obsahuje odkazy na následující a předchozí stránku, v podstatě nemá ţádné opodstatnění, proto tam vŧbec nemusí být a vŧbec bych ji nezaváděl.

56

5.4 Nabídka sortimentu


Menu, které se zobrazuje na stránkách s nabídkou sortimentu, není vhodně strukturované. Ačkoliv poloţky označené na obrázku šipkou tvoří produktové kategorie na největší úrovni, jsou graficky prezentovány téměř stejně jako podkategorie. Ačkoliv to nemusí být na první pohled patrné, skládá se menu ve skutečnosti ze tří hierarchických úrovní, coţ je opravdu mnoho, více neţ je pro takovéto menu vhodné. Řešením by podle mého bylo znovu zváţit celkovou strukturu navigace a návrh menu, a optimalizovat hierarchickou strukturu sortimentu.

57

5.4.1 Detail produktu


U tohoto návrhu detailu produktu lze identifikovat dva hlavní problémy: 

nepřehledný výpis technických parametrŧ



neexistence jednoduchého zpŧsobu jak objednat daný produkt

Znovu bych tady doporučil provést nový návrh rozloţení prvkŧ na stránce s detaily produktu, který bude uvedené problémy řešit.

58

5.5 Návrh na změny Na základě výše uvedených informací lze doporučit provést následující změny: 

zmodernizovat stávající design webu



klást větší dŧraz na výběr barev a typografii



provést optimalizaci struktury webu



znovu navrhnout rozloţení a strukturu menu



znovu a lépe navrhnout produktovou kategorii a detaily produktu

5.6. Současná podoba stránek Heluz.cz Webové stránky firmy Heluz v.o.s. prošly přestavbou, na základě analýz profesionálŧ. Takţe tím máme moţnost prozkoumat, zda mnou vytýkané chyby byly spraveny a web tak nově splňuje zákaznické orientování v poněkud větší míře neţ v pŧvodní verzi. Moje analýza se zaměřovala především na design, proto se v této části mé práce podíváme, jak se změnil k lepšímu vzhled stránek a zákaznická pouţitelnost vybraných částí stránek.

59



Celkový design stránky nyní pŧsobí mnohem lepším dojmem, vyuţívá daleko příjemnějších barev a celkového kontrastu mezi nimi. Na první pohled tak vyvolává pozitivní, nenucený dojem. Jednoduchý, ale aktuální vzhled je určitě přínosem. Kontrast barev pozadí a písma je v pořádku, ţádná zhoršená čitelnost textŧ se tu nevyskytuje. V této oblasti je vše v pořádku. Tvŧrci se drţeli zásad pro vytvoření uţivatelsky příjemného návrhu barev, pozadí a grafiky obecně. Tady nemám, co bych vytknul.

60

5.6.2 Navigace


V pŧvodním návrhu byl problém s navigací. Byla nepřehledná a ne moc dobře pouţitelná. V této verzi stránek je navigace rozvrţena s větší rozvahou a dŧrazem na pouţitelnost. Obsahuje 3 základní navigační prvky: 

Boční menu s kategoriemi



Horní menu s kategoriemi



Drobečkovou navigaci

Boční menu je nyní přehledné, odráţí nově navrţenou hierarchickou strukturu webu, která je nyní v pořádku. Zákazník má vizuální přehled v které části se právě nachází díky tomu, ţe kategorie kterou zkoumá je barevně odlišena od ostatních.

61

Horní menu je zásadně přepracované, jak sem vytýkal v mé analýze, největší chyba horního menu byla v poloţce sortiment, která se ztrácela mezi méně dŧleţitými poloţkami menu. V této nové verzi je poloţka výrobky hned na druhém místě, zcela nepřehlédnutelná, takţe je to také opraveno a v pořádku. Drobečková navigace je nyní také opravena. V minulém návrhu webových stránek byla zcela špatně generována a tím ztrácela svŧj smysl. Nyní je generovaná správně, a pomáhá tak zákazníkovi s orientací na webu, kde přesně se zrovna nachází.



V současném návrhu je zobrazen také detail produktu. Tomu jsem vytýkal nepřehledný výpis technických parametrŧ a neexistenci jednoduchého zpŧsobu objednání daného produktu. Obě mé výtky byly opraveny. Byl proveden nový návrh rozloţení prvkŧ na stránce s detailem produktu. Výpis technických parametrŧ je nyní přehlednější, lépe strukturovaný a zcela jasný. Také lze ihned provést objednání vybraného sortimentu. 62

5.7 Závěrečné zhodnocení úprav Ve své analýze předchozí verze webových stránek firmy Heluz v.o.s. jsem vytýkal tyto následující věci. 

Nemoderní design



Málo kladen dŧraz na výběr barev a typografii



Špatné rozvrţení prvkŧ na domovské stránce



Nevyhovující návrh navigace



Špatně generovaná drobečková navigace



Nevyhovující detaily produktu

V této verzi webových stránek byly všechny mé výtky uvedeny do pořádku. Domovská stránka pŧsobí atraktivně a přehledně, navigace je zcela jasná a přehledná, písmo čitelné a produktová kategorie splňuje běţné standarty dnešních e-shopŧ. Jsem rád, ţe díky odborné pomoci a konzultaci jsem mohl zhodnotit jak staré webové stránky firmy, které se zrovna předělávali, tak i nové a tím mám ilustrován i praktický dopad analýz a testování ve své práci. Podle mého názoru nynější verze webových stránek Heluz.cz se nyní dá povaţovat za zákaznicky orientovanou stránku, neboť své webové stránky vylepšili na základě testování pouţitelnosti.

63

ZÁVĚR Prosadit se v dnešní době na internetu není jiţ tak snadné jak bývalo na začátku tohoto století, kdy stačilo prostě mít internetovou firemní prezentaci a vzhledem k nevelké konkurenci bylo o zákazníky postaráno. Postupem času, kdyţ konkurence rostla, hrála roli konkurenční výhody především technologie a vzhled stránek, jako forma odlišení od konkurence. Nyní však, kdy má svou webovou prezentaci snad uţ téměř kaţdý malý ţivnostník, a o podnikatelích, středně velkých a velkých podnicích nemluvě, kdy určitá technologická a vzhledová úroveň je jiţ standardem, hraje čím dál větší roli dŧraz na zákaznicky orientovaný web, nebo taky uţivatelsky příjemný web. V poslední době ale podle mne dochází ke ztrátě významu pojmu zákaznicky orientovaný návrh webu, mluví se spíše jiţ jen o pouţitelném webu či obchodně výkonném webu. V konečném dŧsledku nezáleţí, jak se nazývají tyto procesy, ale dŧleţité je výsledek, který tyto procesy pomáhají naplňovat. A to je takový web, který je nejenom přívětivý k návštěvníkŧm webu, ale který usnadňuje plnění obchodních cílŧ webu. V souvislosti s měřením obchodní výkonnosti webu se většinou mluví o optimalizaci pouţitelnosti, testování pouţitelnosti nebo uţivatelském testování pouţitelnosti. Tímto směrem vede v dnešní době cesta k úspěchu webové prezentace a následuje ji čím dál více tvŧrcŧ webŧ, neboť bez zákaznického orientování (či jakkoliv to budeme nazývat) jsou odsouzeni k nezdaru a ztrátě zákazníkŧ.

64

SEZNAM POUŢITÉ LITERATURY A ZDROJŮ Monografie: [1] KOTLER, Philip, et al. Moderní marketing: 4. evropské vydání. 4. Praha: Grada, 2007. 1041 s. ISBN 978-80-247-1545-2. [2] KRUG, Steve. Webdesign : Nenuťte uživatele přemýšlet. 2. vyd. Brno: Computer Press, 2006. Návrh Billboardu, s. 37. ISBN 80-251-1291-8. [3] KŘÍŢEK, Zdeněk; CRHA, Ivan. Jak psát reklamní text. 3. akt. a rozš. vyd. Praha: Grada, 2008. 220 s. ISBN 978-80-247-2452-2. [4] LEHTINEN, Jarmo. Aktivní CRM: řízení vztahu se zákazníky. 1. vyd. Praha: Grada, 2007. 158 s. ISBN 978-80-247-1814-9. [5] LYNCH, Patrick; HORTONOVÁ, Sarah. Základní průvodce webdesignem. 1. vyd. Brno: Zoner Press, 2004. Návrh webu, s. 38. ISBN 80-86815-05-6. [6] PLOŤENÝ, Luboš. Budování úspěšného firemního webu. 1. vydání. Praha: BEN, 2005. Přístupnost, s. 49. ISBN 80-7300-173-X. [7] PŘIKRYLOVÁ, Jana; JAHODOVÁ, Hana. Moderní marketingová komunikace. 1. vyd. Praha: Grada, 2010. 303 s. ISBN 978-80-247-3622-8. [8] ŠPINAR, David. Tvoříme přístupné webové stránky. 1. vyd. Brno: Zoner Press, 2004. Přístupný web, charakteristiky a výhody, s. 15. ISBN 80-86815-11-0. [9] VAN DUYNE, Douglas; LANDAY, James; HONG, Jason. Návrh a tvorba webů: Vytváříme zákaznicky orientovaný web. Vyd. 1. Brno: CP Books, 2005. 672 s. ISBN 80-2510508-3. www stránky elektronické monografie [10] FROULÍK, Radek. Interval.cz [online]. 2005-05-04 [cit. 2011-05-01]. Nová ekonomika a globální informační společnost. Dostupné z WWW: . [11]GLASNER, Kurt; PASSENBERG, Ingo. E- trhy ještě nevyzrály. Computerworld [online].

200-12-01,

3,

12,

[cit.

2011-05-05].

.

65

Dostupný

z

WWW:

[12] HAAS, Robert. Symbio [online]. 2006-03-06 [cit. 2011-05-01]. Co není informační architektura.

Dostupné

z

WWW:

architektura.html>. [13]JOHNS, Brandon. Webdesingtutspplus [online]. 2010-12-30 [cit. 2011-05-01]. The State of Webdesing Trends. Dostupné z WWW: . [14]LIGHTFOOT, Suneva. Ezinearticles [online]. 2008 [cit. 2011-05-04]. Promote your business

with

customer

oriented

website

design.

Dostupné

z

WWW:

. [15]Nadřevo.cz [online]. 2009 [cit. 2011-05-01]. Nová ekonomika. Dostupné z WWW:

. [16]RAPPA, Michael. Business Models on the Web [online]. 2008. Dostupné z WWW: . [17]RAŠKA, Onřej. VŠE [online]. 2009-01-14 [cit. 2011-05-01]. Obchodní modely software as

service.

Dostupné

z

WWW:

14_obchodni_modely_saas.pdf>. [18]RATHJE,

Erika.

orientedconsideration

Www.erikarathje.ca in

[online].

webdesign.

2005

[cit.

Dostupné

2011-05-04]. z

UserWWW:

. [19]ROSS, Anders. Instantshift [online]. 2001-03-23 [cit. 2011-05-04]. The latest trends in webdesign. Dostupné z WWW: . [20]SEDLÁČKOVÁ, Barbora. Inflow [online]. 03-03-2010 [cit. 2011-05-01]. Psaní pro web. Dostupné z WWW: . [21]Shopcentrik [online]. 2008 [cit. 2011-05-01]. E- business. Dostupné z WWW: . [22]ŠTRUPL, Václav. H1.cz [online]. 2007-08-22 [cit. 2011-05-01]. Firemní web. Dostupné z WWW: .

66

[23]THOMAS, Jacqueline. The webdesign ledger [online]. 2011-01-04 [cit. 2011-05-01]. Web design trends in 2011. Dostupné z WWW: . [24]Web a media [online]. 2009-06-05 [cit. 2011-05-01]. Všeobecné pojmy. Dostupné z WWW:

pojmy/clanek-47-e-commerce/>.

67

Zákaznicky orientované webové portály

Recommend Documents