2. TUTORIÁL Design a správa webové stránky Ing. Martin Klepek, Ph.D. Ing. Tereza Ikášová 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 webové prezentace nebo blogu. •Nejčastěji pro správu: příspěvků, diskusí, komentářů, pro publikování obrázků nebo jiných multimediálních souborů. •CMS umožňují určovat práva jednotlivým uživatelům. •Redakční systémy jsou vytvořeny tak, aby je i laik mohl jednoduše a efektivně ovládat. 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). •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 •Analýza konkurence •Analýza klíčových slov •Informační architektura •Wireframe, prototyp •Nasazení na redakční systém a výsledný web PROCES TVORBY WEBU Proces tvorby webové stránky https://www.mediagrafik.cz/wp-content/uploads/2016/08/universalni-procesni-mapa.jpg csvukrs PROCES TVORBY WEBU – 1. schůzka Proces tvorby webové stránky •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 – Úvodní analýza 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. 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 – Vyžádání podkladů Proces tvorby webové stránky •Pokud klient cenovou nabídku přijme, spolupráce pokračuje. •Agentura se znovu sejde s klientem, představí mu všechna zjištěná data a společně se dohodnou, jakým směrem se budou ubírat. Poté následuje výzva k dodání podkladů. •Agentura bude potřebovat fotografie a texty, které na web umístí. Pokud žádné fotografie nemá klient k dispozici, většina agentur se o nafocení vašich produktů postará, zároveň by se měla postarat o adekvátnost veškerých textů. Buď je agentura sama sepíše (tuto práci mají na starost copywriteři), nebo přepracuje texty, které zašle klient. PROCES TVORBY WEBU – Rozvržení webu UX/UI a marketingová funkčnost Proces tvorby webové stránky •Kromě analýzy musí dojít k celkovému promyšlení toho, co a jak bude na webu fungovat z hlediska marketingu, což vyžaduje specialistu z oboru. •Dále se musí vymyslet, jak bude celý web postaven. To má na starost UX/UI designer (UX = user experience neboli „uživatelský prožitek“; UI = user interface neboli uživatelské rozhraní), jehož prací je udělat web tak, aby se něm jeho návštěvníci dokázali pohybovat snadno a intuitivně a zároveň tak, jak my chceme a potřebujeme. •UX designer zpracuje svůj návrh v jedné ze tří podob: textové zadání ve Wordu, wireframe (můžete si představit jako skici webu), 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 – 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 – Kódování Proces tvorby webové stránky •Po grafikovi se práce předává kodé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 – 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 nakódovaný 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ů. •Je důležité zvážit, jestli web CMS opravdu potřebuje. Pokud se změny realizují maximálně 2x ročně, oplatí se namísto redakčního systému investovat například do většího množství podstránek, které vám agentura navrhne na míru. • PROCES TVORBY WEBU – Testování Proces tvorby webové stránky •Klient má určitou dobu na to, aby si web sám v klidu “proklikal” a ověřil si, že vše funguje tak, jak má. •Tato fáze zahrnuje konzultaci každého kroku s klientem, čekání na jeho reakci a následnou opravu dle jeho požadavků a připomínek. PROCES TVORBY WEBU – Uživatelské testování Proces tvorby webové stránky •Zátěžové testy •Ověřování, zda se návštěvníci webu chovají dle předpokládaného scénáře DALŠÍ PROCESNÍ ÚKONY – 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í. •Analyzujte doplňkové služby, které poskytují k prodeji. •Projděte si důkladně e-shopy a vypozorujte jejich funkce. •Objednejte si u nich zboží a sledujte proces zpracování objednávky. •Zjistěte, kde všude inzerují jak na internetu, tak případně i v offl ine 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 DALŠÍ PROCESNÍ ÚKONY – 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 INFORMAČNÍ ARCHITEKTURA •Struktura informací na webové stránce •Lze vizualizovat například za pomoci myšlenkové mapy. •Card sorting – metoda, která slouží k organizování většího množství pojmů (položek). •Cílem této metody je pochopit, jakým způsobem uživatelé přemýšlejí o informacích - tedy odhalit mentální modely daného problému. Vhodná je proto pro navrhování struktury webových stránek nebo její redesign. Proces tvorby webové stránky csvukrs INFORMAČNÍ ARCHITEKTURA Proces tvorby webové stránky Informační architektura webu https://mladypodnikatel.cz/informacni-architektura-webu-t26202 WIREFRAME •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). •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. Proces tvorby webové stránky csvukrs 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 KROKY K VYTVOŘENÍ WEBU SVÉPOMOCÍ 1.Rezervujete si svou doménu 2.Vyberete si webhostingový balíček s výkonem odpovídajícím předpokládané datové zátěži Vašich stránek. 3.Zvolíte redakční systém (CMS) a nainstalujte. 4.Provedete konfiguraci svého webu. Aktivujete nebo vytvoříte potřebnou šablonu. V případě potřeby přidáte plug-iny (rozšíření) pro navýšení výkonu či dodání funkcionalit, které CMS neobsahuje ve svém základu. 5.Přidáte stránky a publikujte články pomocí nainstalovaného redakčního systému. • Proces tvorby webové stránky https://www.ovh.cz/webhosting/website/ Využití výzkumu při tvorbě a správě webové stránky •Dotazníky •Testování použitelnosti •Mouse tracking •Eye tracking •A/B testování •Případová studie HOTJAR • Typy výzkumu webové stránky 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 (ONLINE) DOTAZNÍKY •Efektivní (nízké náklady, rychlé vyhotovení) •Pohodlnější pro respondenta, mohou je vyplnit tehdy, když mají čas •Lze odpovídat za pomoci škál s posuvníkem. •Odpadá přepisování a kódování odpovědí jako je to u papírové formy dotazníku (menší pravděpodobnost chybovosti). •Velký potenciál mají otevřené otázky, které je možné efektivněji vyhodnocovat pomocí obsahové analýzy textu bez pracného přepisování. Využití výzkumu při designu a správě webové stránky 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 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 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ým skupinám webu. Rovněž je třeba získat zhruba rovnoměrný podíl pokročilých a nezkušených uživatelů internetu – každá skupina totiž narazí na zcela jiný typ problémů. 4.Samotný průběh testování – pod dohledem zkušeného odborníka na použitelnost plní testeři úkoly dle scénáře testování. 5. 5. 5. Využití výzkumu při designu a správě webové stránky 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 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 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 EYE TRACKING •Další z kategorie trackingových studií je sledování pohybu oční zornice. V oblasti internetu se využívá pro identifikaci atraktivních míst na webové stránce. •Nad rámec mouse trackingu a webové analytiky ukazuje, kam se uživatel skutečně dívá. •Je ale nutná jeho fyzická účast na měření. Využití výzkumu při designu a správě webové stránky 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 EYE TRACKING - příklady Využití výzkumu při designu a správě webové stránky Výsledek obrázku pro heatmaps eyetracking EYE TRACKING - příklady 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. EYE TRACKING – path analysis 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. 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 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/ PŘÍPADOVÁ STUDIE - HOTJAR •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 PŘÍPADOVÁ STUDIE - HOTJAR 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 PŘÍPADOVÁ STUDIE - HOTJAR 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 PŘÍPADOVÁ STUDIE - HOTJAR •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 PŘÍPADOVÁ STUDIE - HOTJAR •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 PŘÍPADOVÁ STUDIE - HOTJAR •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 PŘÍPADOVÁ STUDIE - HOTJAR •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 PŘÍPADOVÁ STUDIE - HOTJAR 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 PŘÍPADOVÁ STUDIE - HOTJAR •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 PŘÍPADOVÁ STUDIE - HOTJAR Využití výzkumu při designu a správě webové stránky https://lh5.googleusercontent.com/vBsQzfiRFB-EJNYMKNirrpiCx57swCx_78mwKpEXjJ10zE2Llw-TSMvnDKHzdFuR6 lbOYm3dk5D6BzcllQ2oAQUWlevgBqIoJJFm2Xa2n8_chyOdoZxtTpKnx6C5aTebiu6Usdp5 PŘÍPADOVÁ STUDIE - HOTJAR •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 Práce v redakčním systému •Redakční systém •Instalace •První kroky • • Funkce redakčního systému •Tvorba, modifikace a publikace dokumentů (článků) probíhá zpravidla prostřednictvím webového rozhraní, často s využitím jednoduchého online WYSIWYG editoru nebo jednoduchého systému formátování textu (není nutná znalost HTML), •Správa diskusí či komentářů, ať už k publikovaným dokumentům nebo obecných, •Správa souborů, obrázků či galerií, kalendářní funkce. •Statistika přístupů. Práce s redakčním systémem INSTALACE REDAKČNÍHO SYSTÉMU 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 INSTALACE REDAKČNÍHO SYSTÉMU Práce s redakčním systémem INSTALACE REDAKČNÍHO SYSTÉMU Práce s redakčním systémem Jak postupovat při práci v redakčním systému? •Volba šablony • Práce s redakčním systémem http://www.ivt.mzf.cz/seminar/7-redakcni-systemy/ Jak postupovat při práci v redakčním systému? •Tvorba nového příspěvku nebo stránky za pomocí blokového editoru •Následující snímky popisují základní práci ve vestavěném editoru Wordpressu. Ale pozor! Některé šablony zahrnují i svůj vlastní editor. Práce s redakčním systémem Tvorba příspěvku https://www.wplama.cz/wordpress-gutenberg/ Jak postupovat při práci v redakčním systému? •Přidání bloku Práce s redakčním systémem https://www.wplama.cz/wordpress-gutenberg/ Jak postupovat při práci v redakčním systému? •Několik variant pro přidání bloku. Práce s redakčním systémem https://www.wplama.cz/wordpress-gutenberg/ Jak postupovat při práci v redakčním systému? •Jak přidat blok. Práce s redakčním systémem https://www.wplama.cz/wordpress-gutenberg/ Jak postupovat při práci v redakčním systému? •Rozmanité možnosti vložení obsahu • Práce s redakčním systémem http://www.ivt.mzf.cz/seminar/7-redakcni-systemy/ Jak postupovat při práci v redakčním systému? •Nový editor textu. Práce s redakčním systémem https://www.wplama.cz/wordpress-gutenberg/ Jak postupovat při práci v redakčním systému? •Dodatečná nastavení k aktivním blokům Práce s redakčním systémem https://www.wplama.cz/wordpress-gutenberg/ Jak postupovat při práci v redakčním systému? •Přesouvání pozice bloků Práce s redakčním systémem https://www.wplama.cz/wordpress-gutenberg/ Jak postupovat při práci v redakčním systému? •Ukládání opakovaně využitelných bloků v Guttenberg. Práce s redakčním systémem https://www.wplama.cz/wordpress-gutenberg/ Jak postupovat při práci v redakčním systému? •Publikování obsahu a správa nastavení v blokovém editoru Práce s redakčním systémem https://www.wplama.cz/wordpress-gutenberg/ Role v redakčním systému •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 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 • PŘÍSPĚVKY A STRÁNKY 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. BLOG 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. • BLOG JAKO NÁSTROJ AKTIVNÍ KOMUNIKACE 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í. (FOTO)GALERIE Obsah na webu VIDEO Obsah na webu OCHRANA OSOBNÍCH ÚDAJŮ A COOKIES Obsah na webu PRODUKTOVÁ KATEGORIE (E-shop) Obsah na webu https://www.laporte.cz/kolejnice-na-dvere PRODUKTOVÁ STRÁNKA (E-shop) Obsah na webu https://www.laporte.cz/p/horni-vodici-kolejnice-terno-scorrevoli-s-otvory-hlinik-elox UŽIVATELSKÉ ROZHRANÍ Obsah na webu https://www.laporte.cz/p/horni-vodici-kolejnice-terno-scorrevoli-s-otvory-hlinik-elox Děkujeme za pozornost. Obsah na webu