1. TUTORIÁL Design a správa webové stránky Doc. Ing. Martin Klepek, Ph.D. Ing. Tereza Ikášová Design a správa webové stránky Marketingový výzkum . 1. Úvod k designu 2. Principy webového designu 3. Heuristiky 4. Web jako součást marketingu 5. Modely chování zákazníků Struktura přednášky Podmínky splnění předmětu • Seminární práce (40b) • Ústní zkouška (60b) • Znalostní část (12 témat/okruhů) • Projektová část (diskuse k seminární práci) • Zápočet min. 60b Design v marketingu Seminární práce • Vyberete stávající web pro redesign nebo vymyslíte web nový • Nesmí to být e-shop a musíte zapojit uživatele • Výzkum • Analýza konkurenčních webů • Analýza zákazníka • Analýza stávajícího webu (pro první typ zadání redesignu) • Příprava • Informační architektura (mapa webu) • Wireframe • Kreativita • Grafický návrh domovské stránky (Malování, Canva, Macovna) • Obsah jedné stránky (copywriting) Design v marketingu Seminární práce • Nebudeme web programovat ani nastavovat • Odevzdání do odevzdávárny v IS SU • Formát necháváme na vás (.pdf, .doc, .ppt) klidně nahrávejte i více souborů • Obsahově popíšete tři kroky (tři kapitoly): • Výzkum – co jste se dozvěděli • Příprava – co navrhujete a proč • Kreativita – ukážete to • Termín odevzdání je 15.12.2023 0:00 Design v marketingu 12 témat k diskusi u zkoušky 1. Co je to design? Typologie a přístupy 2. Principy webového designu a heuristiky 3. Role webové stránky v marketingu 4. Modely chování uživatele na webu 5. Možnosti tvorby webové stránky 6. Proces tvorby webové stránky 7. Využití výzkumu při designu webu 8. Redakční systémy 9. Obsah na webu 10. Propagace webové stránky 11. Optimalizace webu pro vyhledávače 12. Základy webové analytiky v Google Analytics Design v marketingu Co je to design? Pokud byste se zeptali deseti odborníků na to co je design, dostali byste jedenáct různých definic. Design v marketingu Co je to design? • Co lze ale spatřit napříč všemi autorskými texty je shoda na tom, že design je proces. • Proces, který má jasně stanovený začátek, prostředek a konec. Pro práci v oblasti designu jsou tak nutné také základy projektového řízení. • V rámci procesu je běžné pracovat v týmu, proto jsou pro bezproblémový chod projektu designu důležité také týmové kompetence. • Zřídka je proces zajištěn jednotlivcem. Design v marketingu DEFINICE DESIGNU • Design je lidská činnost, během které tvoříme plán pro tvorbu věcí, které mají za cíl přinášet hodnotu pro potenciální uživatele, tak aby jim pomáhaly v dosahování jejich vlastních cílů. (Dorst and Overveld, 2009) Design v marketingu Design a umění, rozdíly… Design v marketingu Design Umění Motivuje Inspiruje Je pochopen Je interpretováno Je otázkou schopností Je otázkou talentu Každý jej chápe stejně Každý ho chápe po svém Zdroj: Webový portál Web Designer Depot [online] [vid. 14. března 2019]. Dostupné z: https://www.webdesignerdepot.com/2009/09/the-difference-between-art-and-design/ Design služeb • Design služeb je disciplína zabývající se tvorbou lepších řešení v oblasti služeb. • I zde platí tradiční marketingové posloupnost: diagnóza situace, náměty a návrhy, vývoj a testování řešení. • Výstupem procesu designu služby je pak zlepšení, které se projeví ve zvýšení úrovně poskytované služby. • Hlavním cílem je zlepšení zákaznické zkušenosti (customer experience - CX), která je v odvětví služeb klíčová. Design v marketingu Design služeb • Složité na práci designera v oblasti služeb je, že je každá služba jiná a neexistuje jasně daný proces pro zlepšování. • Vždy ale narazíme na průzkum u klíčových zájmových skupin (zákazníci, zaměstnanci, manažeři, majitelé, zástupci místní samosprávy, partneři), často je také zapojíme do tvorby námětů a návrhů. • Vytvoříme prototyp služby a testujeme jej na zákaznících ideálně ve skutečných situacích. Tým může například připravit fiktivní pobočku, ve které bude testovat nové procesy pro zlepšení služby. Design v marketingu Produktový design • Definice produktového designu se různí ale například designové studio Cotu uvádí „že produktový design je kreativní proces, na jehož začátku identifikujeme nějakou potřebu trhu nebo zajímavou příležitost. Pro daný problém pak hledáme nejlepší řešení tak, aby vyhovovalo technickým požadavkům a zároveň bylo atraktivní. Při návrhu se zohledňuje mimo jiné poměr cena/kvalita, potřebné materiály, ergonomie a mnoho dalšího.“ Zdroj: https://www.cotu.cz/blog/29/produktovy-design Design v marketingu Grafický design • Kromě designu obalu, o kterém jsme již mluvili, můžeme využít grafický design i v dalších oblastech vizuální komunikace. • V reklamě, při tvorbě vizuální identity značky (logo, barvy, tvary, písmo), • v prezentacích, • výročních zprávách, • na fakturách, • v publikacích • a samozřejmě také při tvorbě webu. Design v marketingu Grafický design • …Sjednocené vystupování uvnitř i vně firmy pomáhá srozumitelně komunikovat se všemi lidmi, kteří s ní přicházejí do styku. Na trhu, kde existuje celá řada obdobných produktů, se stává jejich prezentace konkurenční výhodou, znakem profesionality, progrese, péče o vlastní dílo. Je-li prezentace kvalitní, roste i prestiž firmy či instituce…“ Zdroj: https://unie-grafickeho-designu.cz/proc-je-graficky-design-uzitecny/#.XMvym-j7RPY Design v marketingu Marketingový výzkum . Webový design WEBOVÝ DESIGN OBECNĚ • Webdesign je mezioborová disciplína, která využívá poznatky vizuální komunikace, interakčního designu, psychologie, marketingu, copywritingu, gamifikace a dalších oborů. • Cílem webdesignu je vytvořit funkční webové stránky nebo webové aplikace. Principy webového designu WEBOVÝ DESIGN OBECNĚ • Funkční znamená, že splňují především následující kritéria : • Na web přicházejí relevantní návštěvníci. • Web je ovlivňuje/pomáhá jim tak, že provedou konverzní akci (akce), která je v souladu se záměrem tvůrce webu. • Návštěvníci se na web rádi vrací a provádějí stejnou nebo další akci. • Web návštěvníky zaujme natolik, že o něm mluví sami od sebe s dalšími členy cílové skupiny webu. Principy webového designu WEBOVÝ DESIGN OBECNĚ • Cílem webu je přinášet majiteli a/nebo návštěvníkům stránek užitek. • Tomu by měla být podřízena snaha webdesignera – aby se vyplatily náklady spojené s tvorbou webu a aby web dobře sloužil svému účelu, tj. například v případě komerčních stránek vytvořil ekonomický zisk. Principy webového designu KONFLIKTY V OBLASTI WEB DESIGNU • Základní konflikty v rámci web designu obvykle zahrnují (Powell, 2004): • potřeby uživatele oproti potřebám designéra (firmy), • rovnováha formy a funkčnosti, • zhodnocení kvality provedení, • soulad mezi konvenčními prvky a inovacemi. Webová stránka v marketingu POTŘEBY UŽIVATELE OPROTI POTŘEBÁM DESIGNÉRA • Častou chybou webových stránek firem je bohužel pořád to, že jsou vytvářeny spíše pro potřeby firmy, namísto skutečných uživatelů. • Firma si vybuduje svoje stránky na základě vlastních předpokladů, s čím si uživatel mnohdy nemusí dát rady. • Proto je nezbytně nutné nahlížet na webové stránky z pohledu uživatele a vykonávat uživatelské testování. (Powell, 2004) Webová stránka v marketingu ROVNOVÁHA FORMY A FUNKČNOSTI Forma a funkce tvoří základ web designu. • Funkce by byla bez formy nudná, neboli i když stránky fungují, uživatel není nadšený. Naopak, i když by byla forma velmi působivá, no na druhé straně funkčnost omezená, uživatel by byl zklamaný. (Powell, 2004) • Forma a funkčnost by tedy mely být v jasně definovaném a souvislém vztahu. Webová stránka v marketingu Interakční design • Interakční design je jedním z nových oborů z kategorie výpočetní techniky a je výrazem ze světa tvorby webových stránek a aplikací. • Často je chybně zaměňován s pojmem informační architektura. Je to obor zabývající se návrhem interakcí. Principy webového designu Interakční design • Tradiční design se zabývá monologem, jako je tomu například u tištěných médií. • U interakčního designu jde o dialog, který uživatel povede například s počítačem, mobilním telefonem, bankomatem apod. • Interakční design je označován za jednu z oblastí User Experience Designu (UX) zabývající se návrhem aplikací uspokojujících potřeby uživatelů a současně naplňujících funkční a obchodní požadavky.Principy webového designu Marketingový výzkum . Heuristiky NIELSENOVY HEURISTIKY • Jednou z heuristických analýz je Nielsenova heuristická analýza, která se skládá z deseti základních pravidel, které je nutno zkontrolovat, aby byla zajištěna odpovídající použitelnost a intuitivní ovládání aplikace. Tyto pravidla je dobré mít na paměti již při vytváření návrhu UI. • NNGroup: • https://www.nngroup.com/articles/ten-usability-heuristics/ Principy webového designu NIELSENOVY HEURISTIKY • 1) Visibility of system status • Stav systému musí být vždy viditelný. • Uživatel musí vždy vidět, v jakém stavu se aplikace nachází, jestli čeká na nějaký vstup, nebo provádí určitou operaci, například pomocí ikonky přesýpacích hodin, nebo rotujícího kolečka. Principy webového designu Principy webového designu NIELSENOVY HEURISTIKY • 2) Match between system and the real world • Systém „mluví uživatelským jazykem“ a je co nejvíce přizpůsoben tak, aby práce s ním připomínala práci v reálném světě. • Toto pravidlo se vztahuje převážně k vizualizaci informací. Například ikona koše opravdu vypadá jako koš a přetažení souborů na tuto ikonu způsobí přesunutí souborů do koše, stejně tak jako v reálném světě vyhazujeme papírové soubory.Principy webového designu Principy webového designu NIELSENOVY HEURISTIKY • 3) User control and freedom • Systém musí poskytovat uživateli možnost vrátit ze z určitého stavu zpět, nebo zrušit zvolenou akci. • Nejčastěji se to řeší pomocí tlačítek, nebo odkazů s nápisem Zpět, Undo, Storno. Principy webového designu Principy webového designu NIELSENOVY HEURISTIKY • 4) Consistency and standards • Systém by měl být konzistentní jak vzhledově, tak i co se týče ovládání. • Popisky stejných akcí by měli mít stejný název, nemělo by se střídat např. uložit/upravit. Stejně tak by se měl používat výchozí vzhled, dle použitého systému a standardní ovládací prvky. Např. nepoužívat vzhled prvků z platformy Mac pro program, který poběží na platformě Windows.Principy webového designu Principy webového designu NIELSENOVY HEURISTIKY • 5) Error prevention • Systém by měl předcházet chybovým stavům, např. pomocí potvrzovacích dialogů a varování. • Je vhodné upozornit uživatele, pokud zapomene vyplnit povinné položky formuláře, stejně tak jako zeptat se, že si opravdu přeje smazat vybraný adresář i přesto, že není prázdný. Principy webového designu Principy webového designu NIELSENOVY HEURISTIKY • 6) Recognition rather than recall • Uživatel by měl být při používání systému co nejméně kognitivně zatížen. • To zajistíme tím, že bude systém nabízet pouze volby, které lze vybrat a ostatní skryje, nebo vizuálně zneplatní. • Dále je vhodné použití drobečkové navigace, stránkování, nebo zvýraznění pozice ve stromové struktuře, aby uživatel ihned viděl jeho aktuální pozici v systému. Principy webového designu Principy webového designu NIELSENOVY HEURISTIKY • 7) Flexibility and efficiency of use • Systém musí být efektivní a jednoduchý pro použítí. • Zároveň však musí poskytovat i dostatečný počet voleb, které využijí hlavně pokročilí uživatelé. • V rámci možností je také vhodné poskytovat uživatelům klávesové zkratky anebo funkce automatického doplňování vstupních polí. Principy webového designu Principy webového designu NIELSENOVY HEURISTIKY • 8) Aesthetic and minimalist design • Systém by měl zobrazovat co nejméně informací a voleb, tak aby práce v něm byla co nejrychlejší, přehledná, a uživatel musel co nejméně přemýšlet. • Položky a volby, které nejsou často využívány, není vhodné umísťovat přímo na běžně používané obrazovky. Principy webového designu Principy webového designu NIELSENOVY HEURISTIKY • 9) Help users recognize, diagnose, and recover from errors • Systém by měl uživateli poskytovat srozumitelné chybové zprávy tak, aby měl uživatel možnost chyby obratem opravit a věděl, co po něm systém vyžaduje. • Zprávy by měly být v běžném jazyce a musí zároveň informovat o možném řešení problému. Principy webového designu Principy webového designu NIELSENOVY HEURISTIKY • 10) Help and documentation • Systém musí poskytovat nápovědu přesně tam, kde jí uživatel očekává a v situacích, kdy je nejvíce potřeba. • Například vyplňování formulářů, zakládaní nových projektů apod. • Nápověda by měla být buď kontextová (přímo u daného prvku), nebo globální s možností vyhledávání. Principy webového designu Principy webového designu Marketingový výzkum . Web jako součást marketingu WEBOVÁ PREZENTACE A MARKETING • Dobrý web musí fungovat, tedy plnit účel pro byznys firmy a také odpovídat potřebám návštěvníků webu. • Přínos webové prezentace je nejčastěji prezentován finančním ziskem, protože díky webovým stránkám může firma peníze vydělat nebo ušetřit. (Řezáč, 2016) Webová stránka v marketingu 3. WEBOVÁ PREZENTACE A JEJÍ ÚČEL • Z pohledu účelu můžeme weby rozdělit do tří hlavních skupin: • Webová prezentace, která má za cíl ovlivnit nebo změnit chování jisté skupiny uživatelů. • E-shop, prostřednictvím kterého firma prodává produkty online. • Webová aplikace, která řeší konkrétní problém svých uživatelů. To znamená, že není kanálem pro prodej určitých produktů, ale sama je produktem. (Řezáč, 2016) Webová stránka v marketingu BRANDING • Branding je proces, v rámci kterého firma dává smysl své značce, vypráví její příběh zapamatovatelným a konzistentním způsobem. (Řezáč, 2016) Webová stránka v marketingu • Zásluhou virtuální povahy internetu i malé firmy mohou disponovat online prezentací, která vypadá zcela působivě jako prezentace od velkých značek. • Firmám využívajícím internet k zvýšení popularity u cílových segmentů, tedy posílení značky, je k dispozici řada různých internetových nástrojů (microsity, online PR články, videa, sociální sítě). BRANDING Webová stránka v marketingu Marketingový výzkum . Modely chování uživatele FOGGŮV BEHAVIORÁLNÍ MODEL • Foggův behaviorální model (FBM) zdůrazňuje dva základní prvky: • Motivaci (Core Motivators), • Způsobilost (Simplicity Factors). • Určuje v jaké kombinaci těchto dvou prvků budou fungovat pobídky (nebo jinými slovy výzvy k akci) Modely chování zákazníka na webu FOGGŮV BEHAVIORÁLNÍ MODEL Modely chování zákazníka na webu FOGGŮV BEHAVIORÁLNÍ MODEL • FBM tedy ukazuje, že ve stejném okamžiku musí dojít ke konverzi tří elementů: Motivace, Způsobilost a Pobídka. • Pokud nedojde k určitému chování, chybí alespoň jeden z těchto tří prvků. Modely chování zákazníka na webu FOGGŮV BEHAVIORÁLNÍ MODEL • Při zohlednění těchto tří prvků mohou web designéři zjistit, co brání uživatelům v tom, aby podnikli požadované akce. • Pokud firma chce, aby uživatelé (zákazníci) napsali recenzi, může pomocí tohoto modelu zjistit, který z těchto tří psychologických spouštěčů není v jejich web designu. Modely chování zákazníka na webu DAVISŮV MODELAKCEPTACE TECHNOLOGIE Vyvíjel se s ohledem na dva hlavní cíle: • Lepší chápání procesů akceptace technologií uživateli a poskytnutí nových teoretických poznatků o úspěšném návrhu a implementaci informačních systémů. • TAM měl poskytnout teoretický základ pro praktickou metodologii „testování přijetí uživatelem“, která by umožnila návrhářům systémů a implementátorům vyhodnotit nově navrhované systémy před jejich implementací. (Ginzberg, 1981; Davis, 1985) Modely chování zákazníka na webu DAVISŮV MODELAKCEPTACE TECHNOLOGIE Modely chování zákazníka na webu Příklad použití Davisova TAM modelu Modely chování zákazníka na webu Děkuji za pozornost.