2. TUTORIÁL Design a správa webové stránky Ing. Martin Klepek, Ph.D. Ing. Tereza Pražáková Design a správa webové stránky Možnosti tvorby webové stránky •Doména •Hosting •Přístupy k tvorbě webové stránky •Redakční systémy •Wordpress DOMÉNA •Doménu lze chápat ve smyslu adresy. • •Tak jako vaše trvalé bydliště je na nějaké adrese, tak i webová stránka je na nějaké adrese, což je doména. •Doména - Určuje jednoznačnou pozici vašich webových stránek v internetovém prostředí a za žádných okolností byste její výběr neměli podceňovat. Možnosti tvorby webové stránky csvukrs DOMÉNA Požadavky na doménu: •Krátká – vyhněte se víceslovným výrazům •Výstižná – charakterizuje co nejpřesněji obor vaší činnosti •Dobře zapamatovatelná – zákazník si vás může podruhé lépe najít •Snadná písemná verze – snažte se o soulad písenmé i slovná podoby •Bez hanlivých výrazů – vyvarujte se dvojsmyslným výrazům • Možnosti tvorby webové stránky csvukrs WEBHOSTING •Webhosting (hosting) - pronájem místa na internetu pro vaše webové stránky. Je to něco jako pozemek pro váš dům – stránky. •Na webhostingu je umístěn web. Například redakční systém, ve kterém si stránky vytváříte a spravujete. •Dále jsou na hostingu nahrané všechny obrázky a fotky, které chcete na svých stránkách ukázat, a také sem směřuje vaše doména. Možnosti tvorby webové stránky csvukrs WEBHOSTING •Za hosting platí provozovatel webových stránek provozovateli webhostingu pravidelné splátky. (Nejčastěji na roční bázi). •Uživatel, nájemce webového prostoru, má neomezený přístup ke svým webovým stránkám. Ty může libovolně upravovat, přidávat nebo mazat. •Celková velikost stránek je přitom ohraničena velikostí vyhrazeného diskového prostoru na daném hostingu. Ta se dnes pohybuje v řádu gigabajtů. Možnosti tvorby webové stránky https://hosting.cz/nevite-si-rady/co-je-to-hosting-35/ PŘÍSTUPY K TVORBĚ WEBOVÉ STRÁNKY •Možnosti zpracování webové stránky jsou různorodé a zahrnují činnosti od situace, kdy se nevyhneme programování až po „naklikání“ webové prezentace úplným laikem bez znalosti programovacích jazyků. Rozhodovací kritéria pro výběr: •cíl webu •role webu v podnikové strategii •rozpočet projektu •časové možnosti (jak moc to spěchá) Možnosti tvorby webové stránky Přístupy k tvorbě webové stránky •Na míru •Šablona s redakčním systémem •Drag and drop systémy Možnosti tvorby webové stránky Výsledek obrázku pro stavba domu Výsledek obrázku pro stavba domu Výsledek obrázku pro stavba domu svépomocà PŘÍSTUPY K TVORBĚ WEBOVÉ STRÁNKY Obecně můžeme mluvit o třech základních situacích. 1.Web na míru - staví profesionální studio s programátory a webdesignery. 2.Redakční systém – předpřipravená šablona, kde je možné upravovat na webu barvy písmo, položky menu, texty, vkládat obrázky ale už méně můžeme měnit celkové rozvržení stránky. Základní nastavení zvládne i amatér ale častěji se při tvorbě obracíme na konzultanty a webdevelopery. Díky menší náročnosti to bude menší tým lidí. 3.Cloudové služby - které využívají drag and drop systémy – umisťování prvků a celkovou editaci tak zvládne skutečně každý. Možnosti tvorby webové stránky WEB POSTAVENÝ NA MÍRU Vhodný pro projekty: •Při kterých je web strategickým nástrojem podnikatelské činnosti. •Když požadujeme velmi specifické funkce. Např. web firmy Mixit.cz, kde si uživatel seskládá sám vlastní müsli. Tento interakční design šablonové řešení ani drag&drop editory nesvedou. •Web na míru vyžaduje zapojení vývojářů ovládajících programovací jazyky, jako jsou například HTML, PHP, Javacsript a mnohé další. • Možnosti tvorby webové stránky REDAKČNÍ SYSTÉM = CMS = CONTENT MANAGEMENT SYSTEM •Redakční systém se používá pro správu a publikování obsahu webu. •Nejčastěji pro správu: příspěvků, diskusí, komentářů, pro publikování obrázků nebo jiných multimediálních souborů. •CMS jsou vytvořeny tak, aby je i laik mohl jednoduše a efektivně ovládat. •CMS umožňují určovat práva jednotlivým uživatelům. Možnosti tvorby webové stránky Výsledek obrázku pro redakÄ�nà systém csvukrs REDAKČNÍ SYSTÉM - Výhody •Jednoduché ovládání –WYSIWYG editor (What You See Is What You Get), díky kterého vidíte prováděné změny v reálném čase. •Mobile friendly - Redakční systémy obsahují šablony pro responzivní webové stránky (stránky optimalizované pro telefon) •Pokročilá personalizace – Stránky lze rozšířit o „plug-iny“, které dodávají systému další funkcionality a jsou zdarma ke stažení přímo v redakčním systému. •Multi-users - Každému uživateli lze přidělit specifická práva pro úpravy •Komunita – fóra, návody, WordCamp •SEO – CMS disponují mechanismy pro optimalizaci stránek pro internetové vyhledávače Možnosti tvorby webové stránky https://www.ovh.cz/webhosting/website/porovnani-cms/ POUŽITÍ REDAKČNÍHO SYSTÉMU A ŠABLONY •Mezi oblíbené redakční systémy patří Wordpress, Joomla nebo Drupal. •Všechny tyto systémy jsou zdarma, nicméně existují samozřejmě i placená řešení. Možnosti tvorby webové stránky Výsledek obrázku pro wordpress logo Výsledek obrázku pro joomla logo Výsledek obrázku pro drupallogo https://www.ovh.cz/webhosting/website/porovnani-cms/ WORDPRESS •http://wordpress.org (Pozor! Neplést s wordpress.com.) •WordPress je software patřící mezi redakční systémy. •Má 2 části: administraci webového obsahu (backend, obslužnou aplikaci) a samotný výsledný webový obsah (frontend, webové stránky – to, co vidí návštěvník). •Instaluje se na webový hosting nebo server a k jeho obsluze potřebujete webový prohlížeč (tedy počítač, což je dnes také laptop, tablet nebo i chytrý mobil). • Možnosti tvorby webové stránky https://coumiwp.cz/co-je-wordpress/ WORDPRESS •WordPress dokáže fungovat jako e-shop, magazín s redakční radou, firemní prezentace nebo mobilní aplikace. •Umí se napojit na jiný software a číst z něj data nebo je tam posílat. •Web na WordPressu si můžete vyrobit sami, nebo si najmout dodavatele (firmu nebo konzultanta). •Vzhled výsledných stránek určují šablony vzhledu, které lze získat zdarma, koupit si je, nebo si je nechat naprogramovat na míru. Možnosti tvorby webové stránky https://coumiwp.cz/co-je-wordpress/ Proces tvorby webové stránky •Proces tvorby webu •Objevování •Výzkum •Tvorba •Evaluace PROCES TVORBY WEBU Proces tvorby webové stránky OBJEVOVÁNÍ EVALUACE VÝZKUM TVORBA Dle Jana Řezáče (Web ostrý jako břitva) PROCES TVORBY WEBU – OBJEVOVÁNÍ Proces tvorby webové stránky Objevování klienta, jeho podnikání, strategických cílů atd. •Otázky na podnikání, mise, vize, hodnoty •Pochopení business modelu •Pochopení zákazníků •Pochopení, jakou roli hraje web v businessu dané firmy •Potřebuje klient pro naplnění svých cílů webovou stránku? •Stanovení cílů webu (Více poptávek? Vyšší návštěvnost?) •Rozpočet projektu https://www.interval.cz/clanky/jak-se-vlastne-tvori-web-a-proc-stoji-vic-nez-cekame/ PROCES TVORBY WEBU – VÝZKUM Proces tvorby webové stránky •Po první schůzce zpracuje agentura úvodní analýzu. Nejčastěji jde o analýzu konkurence, tržního prostředí a klíčových slov (SEO analýza). •Po analýze má agentura představu, o jak velký projekt pravděpodobně půjde, a zasílá klientovi nabídku s cenou za své služby. Ten ji může přijmout/odmítnout. Proč je analytická část důležitá? •Aby agentura pochopila klienta a trh, na kterém působí, včetně jeho zákonitostí, co je na něm běžné, důležité, nebo co má naopak ignorovat. •Dále jaké je postavení klienta na trhu, co jeho zákazníci hledají a chtějí a jak jim to nakonec co nejlépe podat. PROCES TVORBY WEBU – VÝZKUM (ANALÝZA KONKURENCE) •Analýza současného webu •Analýza webů konkurence •Analýza klíčových slov •STP (segmentace, targeting, positioning) •Hloubkové/strukturované rozhovory •Uživatelské testování •Eye tracking Proces tvorby webové stránky csvukrs PROCES TVORBY WEBU – VÝZKUM (ANALÝZA KONKURENCE) •Přihlaste se k odběru jejich newsletteru. •Sledujte jejich stránky na sociálních sítích. •Pozorujte změny na jejich e-shopu. •Všímejte si cenové politiky, zavádění novinek na trh a prezentace slev či akcí. •Prozkoumejte jejich bonusový program, pokud nějaký nabízí. Projděte si důkladně e-shopy a vypozorujte jejich funkce. •Zjistěte, kde všude inzerují jak na internetu, tak případně i v offline světě. •Dohledejte názory jejich zákazníků, např. na srovnávačích zboží a v diskuzích. •Navštivte jejich kamenné prodejny a sledujte práci zaměstnanců. •Najděte na jejich e-shopech konkurenční výhody, kterými se prezentují. Proces tvorby webové stránky csvukrs PROCES TVORBY WEBU – VÝZKUM (ANALÝZA KLÍČOVÝCH SLOV) •Soupis toho, co lidé nejčastěji hledají na internetu. •Naslouchání cílové skupině v tom, jaké konkrétní slova a slovní spojení vyhledávají v souvislosti s oblastí, které se má webová stránka týkat. •Na základě ní pak vznikají např. požadavky na vstupní stránky, návrh kategorií na e-shopu nebo filtrů pro zboží. • •Pokud text na webu zahrnuje oblíbená klíčová slova, podpoří to jeho návštěvnost a pozici ve vyhledávání. • • Proces tvorby webové stránky csvukrs PROCES TVORBY WEBU – TVORBA (INFORMAČNÍ ARCHITEKTURA) Proces tvorby webové stránky •Dříve, než se designéři pustí do tvorby, je potřeba promyslet, jak bude celý web strukturován z hlediska podstránek. •K tomu si můžete sestavit například myšlenkovou mapu, která vám vizualizuje, jaké podstránky má web mít a jaké informace musí obsahovat. •Nikdy bychom stránky neměli vytvářet „do počtu“. Vždy by pro jejich existenci měl být důvod. PROCES TVORBY WEBU – TVORBA (INFORMAČNÍ ARCHITEKTURA) Proces tvorby webové stránky Informační architektura webu https://mladypodnikatel.cz/informacni-architektura-webu-t26202 PROCES TVORBY WEBU – TVORBA (Wireframe) •Jakmile víme, jaké podstránky má web mít, potřebujeme si je rozvrhnout, jak budou vypadat. Bezcílná tvorba podstránky a ”zkoušení” skládání elementů bez dobrého plánu, je ztráta času a zejména peněz. Proto se tvoří tzv. wireframy. •Wireframy jsou podkladem pro zpracování grafického návrhu webové stránky. •Wireframe definuje rozmístění funkčních prvků. Nejedná se v žádném případě o grafický návrh, neobsahuje obrázky a je tvořen pouze pomocí čar a textu (odtud drátěný model). Proces tvorby webové stránky csvukrs PROCES TVORBY WEBU – TVORBA (UX) Proces tvorby webové stránky •UX deisgnér (UX = user experience neboli „uživatelský prožitek) v rámci plánovaného webu řeší to, aby zážitek jeho návštěvníků z prohlížení webu byl co nejlepší. • •Jedná se o odbourání bariér, které lidem v prohlížení překáží (např. příliš agresivní pop-up okna) a šperkuje web tak, aby jeho prohlížení pro lidi bylo co nejpříjemnější a nejzáživnější (apeluje na zrychlení webu, snaží se vyzdvihnout nejdůležitější informace na webu atd.) • •UX designer zpracuje svůj návrh v jedné ze tří podob: textové zadání, wireframe nebo v podobě prototypu (funkční model webu, kde se před nakreslením vše vyzkouší vč. toho, jak jednotlivé prvky fungují). PROCES TVORBY WEBU – TVORBA (Wireframe) •Nedoporučuje se použití barev, model by měl být co nejjednoduší. •Wireframe připravuje informační architekt ve spolupráci s UX designérem. Do nákresů jsou přeneseny požadavky klienta. •Rozložení podstránek by mělo odpovídat domu, co lidé na webu hledají. Nejdůležitější informace jim předat ”na zlatém podnose”. •Důležité je nenutit uživatele přemýšlet. Tím přicházíme o možné konverze – lidé nemají čas a chuť zjišťovat, co a jak designéři webu mysleli. Proces tvorby webové stránky csvukrs PROCES TVORBY WEBU – TVORBA (Wireframe) Proces tvorby webové stránky Výsledek obrázku pro wireframe https://medium.com/@robertsmith_co/validating-your-product-design-ideas-with-low-fidelity-wireframe s-fba03b84af23 PROCES TVORBY WEBU – TVORBA (Grafika) Proces tvorby webové stránky •Když je vymyšlená celková vize vzhledu webu a jeho funkcí, předá se zadání grafikovi, který ho zpracuje do výsledné podoby. •Tato fáze je poměrně drahou záležitostí - U profesionálních webů totiž design nevychází pouze z jednoho návrhu, ale každá podstránka se kreslí atypicky svému obsahu, což vyžaduje mnohem více času. •Grafik při tvorbě vychází z wireframů. PROCES TVORBY WEBU – TVORBA (Kódování/Design) Proces tvorby webové stránky •Po grafikovi se práce předává člověku, který z grafického návrhu tvoří funkční web. V případě, že se web tvoří na míru, předá se zadání kodérovi, v případě redakčního systému, kde se řešení nasadí prostřednictvím šablony, předá se web designérovi který grafický návrh přivede k životu. •Při kódování dochází k přepsání grafického návrhu do jazyka, kterému weby rozumí. Výsledkem je webová stránka. • •Vše se musí nakódovat zvlášť pro desktop a mobilní zařízení, které navíc mají různé operační systémy. PROCES TVORBY WEBU – TVORBA (CMS) Proces tvorby webové stránky •CMS (systém pro správu obsahu, redakční systém) - administrační systém, do kterého se web nasadí. •CMS může obsahovat pouhou správu textů a fotografií, ale také přes něj můžete zpracovávat objednávky, přidávat příspěvky na blog, vést firemní databáze, spravovat poptávky, rezervační systém, distribuční sítě atp. •Dodatečné funkcionality se přidávají pomocí plug-inů. PROCES TVORBY WEBU – EVALUACE Proces tvorby webové stránky •Vytvořením webu dobrá práce nekončí. •Sledování návštěvnosti •Sledování požadovaných konverzí •Sledování plnění požadovaného cílu webu •Ověření, že nový web je skutečně navržen dobře: •Přináší požadované konverze •Uživatelské testování •Eye trackingový experiment •A/B testování •Dotazníky/průzkumy (nejméně efektivní) • PROCES TVORBY WEBU - EVALUACE (Uživatelské testování) Proces tvorby webové stránky •Skuteční uživatelé testují web za účelem identifikace možných problémů a zlepšení uživatelského zážitku. •Uživateli zadáte úkol (aniž byste mu vysvětlovali, jak jej na webu vyřešit) a pozorujete jeho kroky. •Uživatel musí spadat do vybrané cílové skupiny webu. •Na základě výsledků můžete určit slabá místa webu, nalézt nefunkčnosti či nejasnosti v designu. • Využití výzkumu při tvorbě a správě webové stránky •Testování použitelnosti •Mouse tracking •Eye tracking •A/B testování •Případová studie HOTJAR • VÝZKUM Využití výzkumu při designu a správě webové stránky https://medium.com/house-of-%C5%99ez%C3%A1%C4%8D/ned%C4%9Blejte-u%C5%BEivatelsk%C3%BD-v%C3%BDzkum-d 0724c3fde7c VÝZKUM – TESTOVÁNÍ POUŽITELNOSTI •Použitelnost je definována 5 komponenty: •Naučitelnost: Jak snadné je pro uživatele splnit základní úkoly při prvním se-tkání s rozhraním? •Účinnost: Jakmile se uživatelé naučili rozhraní, jak rychle mohou provádět úkoly? •Zapamatovatelnost: Když se uživatelé vrátí k návrhu po období, kdy ho nepo-užívají, jak snadno mohou provádět úkoly? •Chyby: Kolik chyb udělají uživatelé, jak závažné jsou tyto chyby a jak snadno mohou tyto chyby napravit? •Spokojenost: Jak příjemné je používat design? Využití výzkumu při designu a správě webové stránky VÝZKUM – TESTOVÁNÍ POUŽITELNOSTI •Je možné testovat stávající web, konkurenční web, wireframy nebo prototyp. •Testování se skládá z několika hlavních částí, jejichž rozsah se může různit, opomenutí některé z nich však může mít na jeho přínos negativní dopad Využití výzkumu při designu a správě webové stránky Výsledek obrázku pro usability test VÝZKUM – TESTOVÁNÍ POUŽITELNOSTI (postup) 1.Analýza cílových skupin webu a jejich potřeb – Kdo jsou zákazníci? Co jim má web nabídnout? 2.Vytvoření scénáře testování – seznam úkolů, které jsou jednotlivým testerům uloženy. Jedná se o většinou typické akce cílových skupin webu. 3.Výběr testerů – vzorek účastníků testování by měl odpovídat cílové skupině webu. Rovněž je třeba získat zhruba rovnoměrný podíl pokročilých a nezkušených uživatelů internetu – každá skupina totiž narazí na zcela jiný typ problémů. 4.Samotný průběh testování – pod dohledem zkušeného odborníka na použitelnost plní testeři úkoly dle scénáře testování. Využití výzkumu při designu a správě webové stránky VÝZKUM – TESTOVÁNÍ POUŽITELNOSTI (postup) 5.Analýza výsledků testování – je potřeba setřídit poznatky získané během testování, zanalyzovat je, a především vymyslet nejvhodnější řešení vedoucí ke zvýšení použitelnosti webu. 6.Prezentace výsledků – seznámení s průběhem testování, komentář k výsledkům a detailní výklad aplikace doporučených opatření. 7. Využití výzkumu při designu a správě webové stránky VÝZKUM – MOUSE TRACKING •Pokud chce marketér přesně sledovat, jak se zákaznici pohybují na webu, může použít metody pozorování pohybu myši, kterým se odborně říká mouse tracking nebo cursor tracking. •Instalovaný software sleduje pohyb myši uživatele na webové stránce a poskytuje informace o nejčastějších návštěvách. •Pro marketéra či designéra webové stránky tak tato technika přináší cenné informace o celkovém designu webového rozhraní. •Výstupem takového výzkumu jsou nejčastěji tepelné mapy, které ukazují na nejfrekventovanější místa výskytu kurzoru. Využití výzkumu při designu a správě webové stránky VÝZKUM – MOUSE TRACKING •Výstup v podobě clickmapy – tepelné mapy. •Červená teplá místa zobrazují kde se pohyboval kurzor uživatele. Využití výzkumu při designu a správě webové stránky Výsledek obrázku pro clickmaps VÝZKUM – EYE TRACKING •Eye tracking je technologie, která sleduje pohyby a fixace oka, čímž zaznamenává, kam se osoba dívá. •Umožňuje analyzovat, na které části obrazovky nebo materiálu uživatel nejvíce zaměřuje svůj pohled. •Usadíte respondenta za počítač, zapnete eye tracking, provedete kalibraci a zadáte respondentovi úkol na daném webu. •Výsledkem jsou fixační mapy či heat mapy, které znázorňují, kam se respondent díval a jak dlouho. •Nezbytná fyzická účast při testování – nelze realizovat na dálku. • • Využití výzkumu při designu a správě webové stránky VÝZKUM – EYE TRACKING •Výstup v podobě clickmapy – tepelné mapy. •Červená teplá místa zobrazují kde se uživatel díval. Využití výzkumu při designu a správě webové stránky SouvisejÃcà obrázek VÝZKUM – EYE TRACKING Využití výzkumu při designu a správě webové stránky Výsledek obrázku pro heatmaps eyetracking VÝZKUM – EYE TRACKING Využití výzkumu při designu a správě webové stránky SouvisejÃcà obrázek •Testování ukazuje lepší čitelnost textů pokud je dítě otočeno a není mu vidět tvář. Ta poutá v marketingové komunikaci pozornost. VÝZKUM – EYE TRACKING Využití výzkumu při designu a správě webové stránky Výsledek obrázku pro path eyetracking •Path analysis neboli analýza cesty pohybu očí umožňuje oproti tepelným mapám zobrazit, jak oči uživatele putovaly po webové stránce. VÝZKUM – A/B TESTOVÁNÍ •A/B testování představuje metody, které umožňují na reálných uživatelích testovat dvě či více variant určité webové stránky. •Výzkumník pak pozoruje rozdíly v konverzních poměrech a je schopný vyhodnotit, která testovaná stránky je pro uživatele přívětivější, snadnější na ovládání, atraktivnější a tím také lépe plní svůj účel. •Oproti metodám dotazování je experiment formou techniky A/B testování věrohodnější, jelikož se uživatel chová zcela přirozeně a v podstatě ani neví, že je součástí výzkumu. Využití výzkumu při designu a správě webové stránky VÝZKUM – A/B TESTOVÁNÍ Využití výzkumu při designu a správě webové stránky Výsledek obrázku pro ab testing https://splitmetrics.com/resources/what-is-ab-testing-and-why-it-matters-for-mobile-developers/ VÝZKUM (PŘÍPADOVÁ STUDIE HOT JAR) •Hotjar patří do sekce nástrojů pro na analýzu a získávání zpětné vazby z webové stránky, eshopu či webové aplikace. •Poskytuje přehled o chování návštěvníků, které se opírá data zpracovaná ve formě tepelných map, nahrávání návštěvníků a jejich chování na webu. Využití výzkumu při designu a správě webové stránky 1. Využití tepelných map (clickmapy a scrollmapy) •Pro potřeby případové studie jsme vybrali internetový obchod s kováním pro posuvné dveře Laporte.cz Využití výzkumu při designu a správě webové stránky VÝZKUM (PŘÍPADOVÁ STUDIE HOT JAR) Nejdříve se podíváme jak využít clickmapy. Na obrázku vidíme screenshot ze vzorku 1000 návštěv všech kategorií, což je pro potřeby naší analýzy dostačující vzorek. Jak vidíme, nejvíce uživatelé klikají na první produkty, kategorie a poté na průvodce výběrem kování a kontakty na hlavní navigaci. Využití výzkumu při designu a správě webové stránky https://lh5.googleusercontent.com/tY_rI-0rusjEPQ1DQSYdbzApaaehCPw_lg35d2ged42VYEKS7arxKcQx807qijf8L X0mtQTX6uYPaDSebRBuA9vFksa5bkDSD7921_mbp1Pf4cQhDcjyG3sCi6neCGAJ4ulo8-5L VÝZKUM (PŘÍPADOVÁ STUDIE HOT JAR) •Co návštěvníci ale minimálně využívají jsou filtry. •Zde vzniká otázka proč? •Jsou snad špatně vyřešené designově? •Nebo jsou v takto specifickém oboru nevyužitelné? •Nebo na e-shopu není velké množství produktů, aby by byly filtry přínosné? Využití výzkumu při designu a správě webové stránky VÝZKUM (PŘÍPADOVÁ STUDIE HOT JAR) •Hotjar nám v tomto případě sloužil jako dobrý nástroj na zjištění problému a stanovení předpokladů. •Co už nám ale neprozradí je proč tomu tak je. •Tuto cenou informaci je potřeba dále otestovat, abychom na otázky získali odpovědi. •V našem případě nepoužívaných filtrů je vhodné využít uživatelské testování či a/b testování. Využití výzkumu při designu a správě webové stránky VÝZKUM (PŘÍPADOVÁ STUDIE HOT JAR) •Scrollmapa je další velice užitečná funkce, která nám ukazuje, jak daleko uživatelé “doscrollují”. •Na obrázku jde vidět, že se jedná o stránku s produktem, kde je předpoklad, že uživatel má zájem si o produktu zjistit něco více. Využití výzkumu při designu a správě webové stránky https://lh5.googleusercontent.com/Y-t8IzLbtWr5yky2DfK9iOu3zQmHmk-Q3_qKB8A1vT1fR9cHuFMr2qeM8Mm17VQqC vH3rGzup5Nnx2S9LraKYXb8XizyAaWi-K8YJSyl6GN2-Ne47kdS0fdbuBr2zh1qjBbo2Jho VÝZKUM (PŘÍPADOVÁ STUDIE HOT JAR) •Jako první věc v popisu produktu se momentálně nachází video. •Ještě do nedávna bylo video úplně dole a dostalo se k němu pouze 20 % uživatelů a přitom mělo pořád slušnou proklikovost. •Jakmile jsme ale video přemístili nahoru, narostl zájem o video přes 400 %. Využití výzkumu při designu a správě webové stránky VÝZKUM (PŘÍPADOVÁ STUDIE HOT JAR) 2. Využití funnelu a nahrávání uživatelů •Hotjar nabízí možnost sledování uživatelů pomocí nahrávání obrazovky. Sledování všech záznamů je časově neefektivní a pro nás nemá úplně vypovídající hodnotu, pokud nesledujeme konkrétní věci, jako například využívání určitého prvku na webu. (Filtrace, navigace, formuláře…). Využití výzkumu při designu a správě webové stránky VÝZKUM (PŘÍPADOVÁ STUDIE HOT JAR) •Dobře optimalizovaný objednávkový proces je jednou z nejdůležitějších věcí na internetovém obchodu. •V Hotjaru si můžeme nastavit trychtýř (funnel), který nám ukáže kolik lidí došlo až na “thank you” stránku, viz obrázek. •Takže vidíme, kolik návštěvníků se dostalo z košíku přes pokladnu až k odeslání objednávky a děkovné stránce. Využití výzkumu při designu a správě webové stránky VÝZKUM (PŘÍPADOVÁ STUDIE HOT JAR) Využití výzkumu při designu a správě webové stránky https://lh5.googleusercontent.com/vBsQzfiRFB-EJNYMKNirrpiCx57swCx_78mwKpEXjJ10zE2Llw-TSMvnDKHzdFuR6 lbOYm3dk5D6BzcllQ2oAQUWlevgBqIoJJFm2Xa2n8_chyOdoZxtTpKnx6C5aTebiu6Usdp5 VÝZKUM (PŘÍPADOVÁ STUDIE HOT JAR) •Jak vidíme na obrázku tak konverzní poměr z pokladny na “thank you” page je relativně dobrý (tyto data si můžeme ještě překontrolovat také v Google Analytics). •Ovšem jak vidíme tak je 67 procentní dropout (úbytek) při kroku z košíku do pokladny, což už může značit jistý problém. Využití výzkumu při designu a správě webové stránky VÝZKUM (PŘÍPADOVÁ STUDIE HOT JAR) Práce v redakčním systému •Redakční systém Wordpress •Instalace •Pracovní prostředí •Práce v redakčním systému • PRÁCE V CMS – ZÁKLADNÍ INFORMACE •WordPress je CMS platforma. •Slouží pro tvorbu a správu webů. •Vznikl v roce 2003. •Je nejrozšířenější CMS na světě. •Vhodný pro blogy, firemní web, e-shopy. •Frontend se nazývá část webu, kterou vidí návštěvníci. •Backend je část webu, kde se odehrává správa webu a vidí ji administrátoři. •Uživatelé Wordpressu mají různé role, které určují jejich oprávnění (to, co mohou a nemohou v systému dělat). •Příspěvky Wordpress využívá pro aktuální obsah. •Stránky Wordpress využívá pro stálý obsah. • • • Práce s redakčním systémem 1.Stáhnete si Wordpress na www.wordpress.org 2.Stažené soubory umístíte do složky na hostingu. 3.Najedete na svou webovou stránku. 4.Spustí se instalace. Práce s redakčním systémem PRÁCE V CMS – INSTALACE Práce s redakčním systémem PRÁCE V CMS – INSTALACE Práce s redakčním systémem PRÁCE V CMS – INSTALACE •Dashboard (nástěnka) - poskytuje přehled o stavu webu. Jeho vzhled a zobrazované informace si lze nastavit. •Boční menu pro navigaci. •Rychlý přístup k funkcím. •Jednoduchá administrace. •Přizpůsobení – různorodá nastavení, zejména co se týče vzhledu webu • • Práce s redakčním systémem PRÁCE V CMS – PRACOVNÍ PROSTŘEDÍ WORDPRESSU http://www.ivt.mzf.cz/seminar/7-redakcni-systemy/ •Jsou určeny pro blogové články a krátkodobý obsah. •Příspěvky se vytváří v editoru příspěvků. Jeho vzhled a obsah se může lišit dle zvolené šablony. •Přidání obrázků a videí. •Články lze organizovat do různých kategorií (rubrik). •Taktéž lze využívat štítky, které návštěvníkům usnadní vyhledávání napříč blogem. •Články lze plánovat (směrem do budoucna) a publikovat. Také mohou být ve stavu konceptu, kdy jsou viditelné pouze pro administrátora a lidi, kterým je to v systému povoleno. • Práce s redakčním systémem PRÁCE V CMS – PŘÍSPĚVKY http://www.ivt.mzf.cz/seminar/7-redakcni-systemy/ Práce s redakčním systémem Tvorba příspěvku PRÁCE V CMS – PŘÍSPĚVKY https://www.wplama.cz/wordpress-gutenberg/ •Jsou určeny pro stálý a nezměněný obsah. Typickou stránkou může být třeba homepage – domovská stránka. •Další příklady: 'O nás', 'Kontakt‘. •Nezobrazují se v blogovém archivu. •Jsou součástí hlavní navigace webu. • • Práce s redakčním systémem PRÁCE V CMS – STRÁNKY http://www.ivt.mzf.cz/seminar/7-redakcni-systemy/ •Vytváření a úprava navigačního menu jsou klíčové pro zlepšení uživatelské zkušenosti a umožňují návštěvníkům snadno najít obsah, který hledají. •WordPress umožňuje přidávat do menu položky jako jsou stránky, kategorie, příspěvky a vlastní odkazy. •Menu lze také strukturovat do více úrovní, což je ideální pro velké weby s bohatou strukturou. •Při tvorbě menu je důležité zvážit responzivní design, aby bylo menu funkční i na mobilních zařízeních. Často se na mobilech a tabletech řeší tak, že se menu sbalí pod ikonku „hamburgeru“. • • Práce s redakčním systémem PRÁCE V CMS – MENU A NAVIGACE http://www.ivt.mzf.cz/seminar/7-redakcni-systemy/ Práce s redakčním systémem PRÁCE V CMS – MENU A NAVIGACE http://www.ivt.mzf.cz/seminar/7-redakcni-systemy/ •Mediální knihovna ve WordPressu je centrální místo, kde jsou uloženy všechny obrázky, videa a další soubory, které můžete použít v příspěvcích a na stránkách. •Obrázky a soubory do knihovny lze snadno nahrát a poté je možné je vkládat do obsahu pomocí editoru. •WordPress také nabízí základní nástroje pro úpravu obrázků, jako je ořezávání, otáčení a změna velikosti. • • Práce s redakčním systémem PRÁCE V CMS – MÉDIA http://www.ivt.mzf.cz/seminar/7-redakcni-systemy/ •Pluginy slouží pro rozšíření funkcionalit standardního WordPressu (např. zlepšení SEO, zvýšení bezpečnosti webu, …) •Instalace nových pluginů je snadná díky vestavěnému správci pluginů, který umožňuje vyhledávat, instalovat a aktualizovat pluginy přímo z administračního rozhraní Wordpressu. •Při výběru pluginů je důležité se zaměřit na jejich kvalitu, hodnocení, kompatibilitu a frekvenci aktualizací. •Důležité je také pravidelně prověřovat pluginy a odstranit ty, které již nejsou potřebné, aby se zajistilo, že web zůstává rychlý a bezpečný. Práce s redakčním systémem PRÁCE V CMS – PLUGINY http://www.ivt.mzf.cz/seminar/7-redakcni-systemy/ Práce s redakčním systémem PRÁCE V CMS – PLUGINY https://www.wplama.cz/wordpress-gutenberg/ •Výběr vhodného tématu je klíčový pro design a uživatelskou přívětivost vašeho webu, WordPress nabízí tisíce volně dostupných i placených témat (šablon). •Po instalaci šablony můžete přizpůsobit její vzhled a funkce podle vašich potřeb. •Pro pokročilé úpravy nebo pro uchování změn při aktualizacích je vhodné vytvořit „child theme“, které umožňuje upravit kód šablony bez rizika ztráty změn. Práce s redakčním systémem PRÁCE V CMS – VZHLED A ŠABLONY (TÉMATA) http://www.ivt.mzf.cz/seminar/7-redakcni-systemy/ •Volba šablony • Práce s redakčním systémem PRÁCE V CMS – VZHLED A ŠABLONY (TÉMATA) http://www.ivt.mzf.cz/seminar/7-redakcni-systemy/ •Komentáře jsou důležitou součástí mnoha WordPress webů, protože umožňují interakci s návštěvníky a podporují komunitu okolo vašeho obsahu. •WordPress poskytuje rozsáhlé možnosti správy komentářů, včetně nastavení, která umožňují moderovat komentáře a bojovat proti spamu. •Je také důležité nastavit pravidla pro diskuzi, abyste měli kontrolu nad tím, co uživatelé na vašem webu zveřejňují. •Spam je častý problémem Wordpress webů. Pokud víte, že se nechcete zabývat moderací komentářů – doporučuji sekci pro komentáře na webu vůbec nepoužívat. Práce s redakčním systémem PRÁCE V CMS – KOMENTÁŘE http://www.ivt.mzf.cz/seminar/7-redakcni-systemy/ •Pravidelné zálohování vašeho WordPress webu je nezbytné pro ochranu vašeho obsahu a nastavení před potenciálními problémy jako jsou chyby serveru, uživatelské chyby nebo útoky hackerů. •Existuje mnoho způsobů, jak zálohovat WordPress, včetně ručních metod či pluginů, které proces automatizují. •Udržování WordPressu, témat a pluginů v aktuálním stavu je kriticky důležité pro zabezpečení a funkčnost vašeho webu. Práce s redakčním systémem PRÁCE V CMS – ZÁLOHOVÁNÍ http://www.ivt.mzf.cz/seminar/7-redakcni-systemy/ •Administrátor – neomezený přístup ke všem nastavením WordPressu. •Šéfredaktor – může nejen publikovat a spravovat své vlastní příspěvky, ale třeba i zasahovat do příspěvků ostatních uživatelů. •Redaktor – může publikovat a spravovat své vlastní příspěvky, stejně tak jako nahrávat soubory. •Spolupracovník – může vytvářet a spravovat své příspěvky, ale nemůže je sám veřejně publikovat. Nemá povoleno nahrávat mediální soubory. •Návštěvník – prakticky se jedná pouze jen o zaregistrovaného uživatele bez speciálních pravomocí v administraci WordPressu. Může pouze vkládat komentáře. Nemůže se podílet na tvorbě a správě obsahu webu. • Práce s redakčním systémem PRÁCE V CMS – NASTAVENÍ ROLÍ http://www.ivt.mzf.cz/seminar/7-redakcni-systemy/ Obsah webu •Příspěvky a stránky •Blog •Galerie •Video •GDPR a cookies •Produktová kategorie •Produktová stránka • Obsah na webu Příspěvky (blog) Stránky (podstránky webu) S časovou známkou - řazené dle času zveřejnění, informace se mohou časem stát neaktuální, struktura vhodná pro blog Bez časové známky - bez zobrazené informace o publikování, obsah s trvalou hodnotou, vhodné například pro stránku kontakt, o nás nebo služby. Dynamické - obsah může být zobrazen na více místech a souvislostech (archiv kategorie, štítku, řazení podle času). Statické - obsah je zobrazen jen na dané URL. Tříditelné - mohou být vkládány do rubrik a štítků. Hierarchické - mohou být řazeny do hierarchické struktury (může ovlivnit složení URL). Různé formáty - dle obsahu lze vybírat z předpřipravených formátů, které ovlivňují zobrazení příspěvku. Jedná se například o video, audio, obrázek, galerie atd. Šablony - může být zobrazeno za pomocí předdefinovaných šablon stránky. Tyto šablony jsou součástí WordPress šablony. OBSAH WEBU – PŘÍSPĚVKY A STRÁNKY Obsah na webu •Blog firmě dodává lidskou tvář, která jí mnohdy schází. •Blog ke čtenářům promlouvá jazykem jim blízkým, a často jim přináší informace, které by se jinak z oficiálních zdrojů nedozvěděli. •Díky blogu může firma čtenáře vtáhnout do dění firmy přes pohled pod pokličku. •Skvělý nástroj pro budování SEO (optimalizace pro vyhledávače) •Nejzásadnější věc, která odlišuje webové stránky s blogy od webových stránek bez nich, je aktuálnost textu. • OBSAH WEBU – BLOG Obsah na webu Existuje několik zásad, které se firmám vyplatí dodržovat: 1.Výběr jednoho autora – aby blog působil nenuceně a autenticky. 2.Nepřetržité aktualizování obsahu – mrtvé blogy nikdo nečte 3.Podněcování k diskuzi - Firma by měla čtenářům umožnit reagovat na její příspěvky, vybízet je k reakcím a okořenit diskusi. Kredibilita blogu vychází z velikosti komunity, které členové se opakovaně vrací a diskutují. OBSAH WEBU – BLOG Obsah na webu OBSAH WEBU – GALERIE Obsah na webu OBSAH WEBU – VIDEA Obsah na webu OBSAH WEBU – COOKIES A GDPR Obsah na webu OBSAH WEBU – PRODUKTOVÁ KATEGORIE (E-SHOP) https://www.laporte.cz/kolejnice-na-dvere Obsah na webu OBSAH WEBU – PRODUKTOVÁ STRÁNKA (E-SHOP) https://www.laporte.cz/p/horni-vodici-kolejnice-terno-scorrevoli-s-otvory-hlinik-elox Obsah na webu OBSAH WEBU – UŽIVATELSKÉ ROZHRANÍ https://www.laporte.cz/p/horni-vodici-kolejnice-terno-scorrevoli-s-otvory-hlinik-elox Děkujeme za pozornost. Obsah na webu