Prezentace firmy pomocí webové stránky Ing. Martin Klepek, Ph.D. E-marketing •Typologie webových stránek a trendy •Redakční systémy a šablony •Design webové stránky •User experience •Webcopy •Leady •Google analytics • Obsah •Ústřední nástroj marketingové komunikace na internetu. •Je na ni navázáno mnoho dalších nástrojů e-marketingu. –SEO – bez webu není co optimalizovat –PPC – bez webu není kam zákazníky směřovat –Sociální média – můžeme zde fungovat bez webu? •Pro e-commerce také místo, kde dochází k transakci. •Web je novodobá výkladní skříň značky. •Ceny webové stránky se díky různým technologiím výrazně liší. • Webová stránka Přehled šablon: https://www.templatemonster.com/ •Rolovací a proklikávací • •Statické a dynamické • •FLASH is dead! • • • Typologie webových stránek http://spravawebovek.cz/tutorialy/druhy-webovych-stranek •Mobile first a responsibilita •Minimalismus •Pastelové a jemné barvy •Video a animace (http://www.walmark.eu/en/) •Interaktivné prvky (https://www.moravio.com/) •Vývoj technologií způsobuje střet vzheldu a funkčnosti •Podpora 3D zobrazování •Změna navigačních paradigmatů menu (http://www.buildinamsterdam.com/) •Rolovací stránky – vyprávění příběhu •Gamifikace (http://swissarmyman.com/) • • • • • Trendy webu 2017 •Redakční systém je internetová aplikace, která jednoduchým způsobem umožňuje vytvářet a upravovat webové stránky. •Technologický název je CMS systém (content management system) nebo také publikační systém. •Přístup do redakčního systému je nutný pro copywritery i marketéry. •Vlastní redakční systém nebo všeobecně rozšířený systém –wordpress, joomla, prestashop, woocommerce • Redakční systémy Přehled šablon: https://www.templatemonster.com/ •Tvorba, modifikace a publikace dokumentů (článků) zpravidla prostřednictvím webového rozhraní (WYSIWYG) editoru nebo jednoduchého systému formátování textu (není nutná znalost HTML), •řízení přístupu k dokumentům, zpravidla se správou uživatelů a přístupových práv, často s funkcemi workflow či groupware, •správa diskusí či komentářů, ať už k publikovaným dokumentům nebo obecných, •správa souborů, správa obrázků či galerií, kalendářní funkce. Redakční systémy - využití Přehled šablon: https://www.templatemonster.com/ •Dilema vývoje: • –Web postavený od nuly? – –Řešení postavené na šabloně? • Redakční systémy a šablony •Mezioborová disciplína –Psychologie –Vizuální komunikace –Interakční design –Branding –Copywriting –Gamifikace •Cílem je vytvoření funkční webové stránky nebo webové aplikace Design webové stránky •Funkční znamená, že splňuje tato kritéria: •Na web přicházejí relevantní návštěvníci •Web jim pomáhá tak, že provedou konverzi, která je v souladu se záměrem tvůrce webu •Návštěvníci se na web vrací a provádějí stejnou nebo další akci •Web zaujme natolik, že o něm sami od sebe mluví s dalšími členy cílové skupiny • – • • Design webové stránky •UX neznamená to, že je vytvořen krásný grafický design. •UX je navrhování stránky pro přívětivý uživatelský prožitek. •Techniky UX je možné využívat i mimo webdesign. • •Cílem UX obecně je vytvořit u zákazníka kýžený uživatelský prožitek z navrhovaného produktu. • User experience https://blog.aw-dev.cz/co-je-ux/ 1.Uživatelský výzkum 2.Informační architektura 3.Interakční design 4.Vizuální design 5. 5. User experience - proces Výsledek obrázku pro user png https://blog.aw-dev.cz/co-je-ux/ •Uživatelský výzkum •rozhovory s uživateli, •datová analytika (sledování toků, chování uživatelů), •focus group (skupinová diskuse), •dotazníková šetření, •testování použitelnosti s reálnými uživateli •a další výzkumné metody. 1. User experience – Uživatelský výzkum https://blog.aw-dev.cz/co-je-ux/ •Infromační architektura •Definuje strukturu informací na webech a v aplikacích. •Výstup má obvykle podobu myšlenkové mapy nebo diagramu. •Cíle je zobrazit jednotlivé propojení stránek, strukturu navigace a případně průchod uživatele k stanovenému cíli. •Využitelnou metodou je zde cardsorting. •Tvorba wireframe – drátěných modelů. User experience – Infromační architektura https://blog.aw-dev.cz/co-je-ux/ •Interakční design •Určuje rozmístění prvků a jejich chování v rámci interakce s uživatelem. •Jde o jádro práce UX designera. •Výstup této fáze má obvykle podobu funkčního prototypu a technické specifikace. •Slouží jako zadání pro celou realiziční fázi – pro grafika, kodéra, programátora. User experience – Interakční design https://blog.aw-dev.cz/co-je-ux/ •Vizuální design •Vizuální design je “strategickým uvedením obrázků, barev, typografie a dalších elementů v život”. •Fakt, že UX designer musí mít přesah také do visuálního designu, neznamená, že musí být i grafickým kreativcem (opačně se to nevylučuje), ale rozhodně musí rozumět barvám, mluvit do identifikovatelnosti grafických prvků, čitelnosti, typografie a podobně. User experience – Vizuálí design https://blog.aw-dev.cz/co-je-ux/ •Tři úrovně textů, které v onlinu potřebujete –WEB –Pozadí webu (METADATA) –Texty mimo WEB •Web: popisky produktů, text „o nás“, popis příběhu značky, kontakty. •Metadata: titulek webové stránky (title), popisek pro vyhledávače (meta descriptions), popisy obrázků, videí, produktů. •Mimo web: PR články, emailing, obsah na sociální sítě, placené reklamy. •ZÁSADNÍ VĚC PRO UŽIVATELE WEBU I SEO! • Webcopy •Už žádné mazlení a komforntí zóny •Proces: Výzkum – Infromační architektura - Interakční design •Reálný pitch •Promyšlené výstupy •Stanovené cíle webu a metriky •20 minut na přípravu •2 minut pitch •Iterace –10 minut zlepšení –2 minuty pitch • Úkol 1 – vytvořte návrh webu •Pan Luděk od vás potřebuje webovou stránku. •Máte tým kodérů kteří ale mluví takto: „10010010101010001010111“. •Na vás je prodat na webu pana Luďka a jeho produkty: Čerstvé mléko, maso, zelenina a ovoce. •Distribuce pouze vyzvednutí. •Vyšší kvalita i cena. •Neexistuje brand ani komunikace v onlinu. Úkol 1 – vytvořte návrh webu Výsledek obrázku pro farmář Cick and collect. •Chování = Motivace + Schopnost + Spouštěč • • • Foggův behaviorální model u použitelnosti webu https://www.symbilitysolutions.com/symbility-intersect/wp-content/uploads/sites/4/2014/01/blog-hook ed-fogg_model.jpg •Zvyšování šance na určité chování uživtele webu: •Zvyšování schopností –Trénink – lidé se ovšem nechtějí učit –Jednoduchost – zjednodušení zvyšuje relativní schopnosti •Zvyšování motivace –CTA navázány na výhodu, která z nich plyne. –Nemá smysl křičet na užiatele odebírej newsletter je to tak jednoduché, když nemá motivaci. –Odebírej newsletter a dostaneš slevu na další nákup jej motivuje. • • Foggův behaviorální model u použitelnosti webu •Leady identifikují firemní návštěvníky webu. •Systém, který pomáhá obchodníkům a marketérům v práci. •Jediné co potřebujeme pro vyzkoušení, je nasazení JavaScript kódu. •Ten pak funguje podobně jaké jiné podobné kódy, třeba právě Google Analytics. •Systém využívá pro identifikaci kombinaci cookie a fingerprintingu a dalších parametrů. • • • • Leady Ako to vyzerá? Výsledek obrázku pro google analytics png •Platforma, která sbírá data o webové stránce a poskytuje je uživateli pro lepší marketingová rozhodování. •Vytvořením účtu Google Analytic a vložením html kódu do webové stránky začnete sbírat data o uživatelích webu. •Při každé návštěvě pak kód uchovává anonymizované informace o interakci uživatele na webu. • • • • • Google analytics •Jaké další informace o uživatelích GA hlídá? –Jazyk, který je nastavený v prohlížeči –Typ prohlížeče –Zařízení –Operační systém –Zdroj návštěvy •Platforma získává infromace o návštěvníkovi v relcích •Relace se vypíná po 30 minutách neaktivity •Data se natvrdo zapisují do databáze • • • • • Google analytics •Urchin Tracking Module •Textové řetězce, které se připojují k URL adrese –Tyto parametry nesou určitou informaci, kterou pak GA zpracuje –Díky UTM parametrům tak od sebe můžeme odlišit jednotlivé zdroje návštěvnosti mnohem precizněji – •https://ga-dev-tools.appspot.com/campaign-url-builder/ •Pozor na to, co píšete :-D • • • • • Google analytics – SÍLA UTM PARAMETRŮ http://www.lukask.cz/utm-parametry/ •Kde je můžeme využít? –PPC reklama –Reklama na Facebooku –Newslettery –Vlastní profily na sociálních sítích –Odkazy / bannery na cizích webech •Kde je to zbytečné? Adwords, Sklik, MailChimp – nabízeny automaticky • • • Google analytics • • • • • Google analytics - Rozložení • • • • • Google analytics - Rozložení Levý panel •Obsahuje navigaci k různým typům dat •Nová položka „v reálném čase“ •Publikum –Kolik návštěvníků k nám chodí + info o nich •Akvizice –Odkud přišli •Chování –Jak se na webo chovají •Konverze • • • • • • • • • Google analytics - Rozložení Časový úsek •Jednoduchý kalendář, kde nastavujete, za jaké období chcete data vidět. •Důležité pro posuzování efektivity marketingových kampaní. • • • • • • Google analytics – Demo účet https://goo.gl/SKv14N •Každý sám za sebe –Stanovte si období –Vytvořte segmenty •Mobilní návštěvy •Návštěvy s konverzemi –Identifikujte rozdíly v chování –Identifikujte rozdíly ve zdroji návštěvnosti –Podívejte se na celkové toky chování – Úkol 2 – zpracujte report v GA • • • • •Děkuji za pozornost • •