Prezentace doplněná o podrobné komentáře.

• Copysketching je mé pracovní označení postupu, kterým připravuji obsah webové stránky. Kombinuje rychlé kreslení, črtání nápadů, poznámek a skicování layoutu i hrubé osnovy obsahu stránky na papír.

• Metoda copysketchingu se hodí hlavně při návrhu konceptů webů a microsite, ale často mi pomáhá u vytváření obsahu jakékoli stránky nebo reklamy.

• Primárním výstupem je finální text / obsah. Rychlá skica nápadu a layoutu je jen osnovou nebo mustrem pro textařinu. Někdy ze skici vyjde i grafik, ale není to nutné, při návrhu vizuálu má vždy volnou ruku.

• Každý pracuje jinak a osvědčila se mu jiná metoda. Vyzkoušejte copysketching, jestli právě vám sedne.

Analýza zde představuje brief i výstup samostatných

analýz jako klíčová slova, konkurence apod.

Proces vzniku jedné konkrétní webové stránky

• Takhle vypadá zjednodušený proces přípravy jedné konkrétní webové stránky / částečně i celého webu.

• Přerušovaná šipka označuje nejméně vhodný postup, kdy si klient nechá rovnou vytvořit grafiku a pak si objedná „vytvoření textů“.

• Ideální postup začíná dobrou analýzou. Ta zahrnuje samostatné části jako Analýzu klíčových slov, Analýzu konkurence, ale i klasický brief jako definice cílové skupiny, cílů, USP, čím vzbudit důvěru atd.

• Teprve z analýz vychází obsahová strategie konkrétní stránky / celého webu. Definuje, jaký obsah a jaký typ informací na stránce / webu musí být, aby se odlišila od konkurence, za rozumné náklady přivedla návštěvníky a přeměnila je v zákazníky.

• Z obsahové strategie teprve vychází UX tým při tvorbě prototypu webu / wireframe stránky a samozřejmě copywriter při psaní obsahu. Někdy vzniká dříve obsah a forma až podle něj, u některých projektů ale stačí navrhnout wiframe s pracovním obsahem (respektive jen s použitím obsahové strategie) a copywriter dokončí finální obsah do připravené formy. Nebo UX i copy vzniká vzájemnou spoluprací.

• Pak grafik zpracuje vizuál podle návrhu formy+obsahu. • V ideálním případě ale spolupracuje UX tým s

copywriterem i grafikem už od začátku projektu po celou dobu návrhu stránky / webu.

• Nejčastěji dělám na projektech, kde jsem jenom já jako copywriter a webový grafik s kreativní hlavou.

• S grafikem konzultujeme koncept webu nebo konkrétní stránky, vymýšlíme různé varianty, styl vizuálu a úzce spolupracujeme. Často se pak předháníme v kreativitě.

• Protože chybí v procesu UX tým, konzultanti, accounti atd., jsem hlavně já jako copywriter zodpovědný za to, jak bude stránka fungovat / prodávat.

• To mě přinutilo začít pracovat jinak…

… a tak se zrodil Copysketching

• Takhle vypadá můj hlavní obsahový check-list. Je to má alfa a omega. Vychází z něj obsah každé stránky a u něj končím zpětnou kontrolou. Díky němu se mám vždycky od čeho odpíchnout a na nic nezapomenu.

• Každá nabídka / prodejní stránka musí jasně říkat, co nabízím, komu to nabízím, co mu to přinese, proč by si to měl koupit ode mě, kdo mu to vlastně nabízí, kde se to dá koupit, kolik to stojí a co musí udělat, aby to získal, tj. jasná výzva k akci.

• Každý bod check-listu v sobě samozřejmě skrývá hodně možností a typu obsahu, jak jej splnit.

• Check-list používám při přípravě obsahové strategie konkrétní stránky, během skicování i po něm.

• message: nabídka půjčky do 10k bez ručitele až na 75 dní (online / SMS) • jak půjčka funguje, jak získat, prodloužit, splatit • oslovení cílovky (nemáte před výplatou na nečekané výdaje?) • jak a kdy přijdou peníze (na účet, složenkou), další časté otázky • podmínky k získání půjčky • kalkulačka půjčky (výše poplatku) – netextový obsah • konkurenční výhody (bez registru, ručitele, doložení příjmů…) • hlavní příslib a přínosy (půjčka bez čekání do 10 minut, peníze na účet nebo složenkou, stačí online žádost, číslo OP a mobil…) • možnost online video chatu s klientskou podporou • sdílení stránky přes FB, TW, e-mail… • Facebook stránka (téměř 5000 fanoušků) – důvěryhodnost • kontakt na zákaznickou podporu • reference klientů ? • nabízející – o Ferratum, 1,5 mil. půjček, 18 zemí, 200 fin. Specialistů • pracovní doba na klientskou linku • hlavní cíl – přejít na online žádost, další cíle – prodloužení půjčky, splacení

• message: nabídka půjčky do 10k bez ručitele až na 75 dní (online / SMS) • jak půjčka funguje, jak získat, prodloužit, splatit • oslovení cílovky (nemáte před výplatou na nečekané výdaje?) • jak a kdy přijdou peníze (na účet, složenkou), další časté otázky • podmínky k získání půjčky • kalkulačka půjčky (výše poplatku) – netextový obsah • konkurenční výhody (bez registru, ručitele, doložení příjmů…) • hlavní příslib a přínosy (půjčka bez čekání do 10 minut, peníze na účet nebo složenkou, stačí online žádost, číslo OP a mobil…) • možnost online video chatu s klientskou podporou • sdílení stránky přes FB, TW, e-mail… • Facebook stránka (téměř 5000 fanoušků) – důvěryhodnost • kontakt na zákaznickou podporu • reference klientů ? • nabízející – o Ferratum, 1,5 mil. půjček, 18 zemí, 200 fin. Specialistů • pracovní doba na klientskou linku • hlavní cíl – přejít na online žádost, další cíle – prodloužení půjčky, splacení

• Ukažme si copysketching na příkladě. Předpokládejme projekt webu s nabídkou mikropůjčky. Mám hotovou vstupní analýzu včetně analýzy klíčových slov, konkurence, znám cílovku, samotný produkt atd.

• Teď vytvořím obsahovou strategii pro úvodní stránku webu. Obvykle si vše píšu na papír, škrtám, přepisuji, spojuji k sobě související části obsahu a označím zvýrazňovačem prvky s největší prioritou. Není špatné si rovnou zvýraznit hlavní cíle a akce, které uživatel potřebuje, nebo které po něm chceme.

• Často si při této přípravě zapíšu konkrétní čísla nebo fakta, která jsem zjistil při analýze, různé verze titulků nebo výhod, jak mě napadají, nebo třeba i jak oslovit cílovku. Na papíře je pro mě takové skicování rychlejší.

• message: nabídka půjčky do 10k bez ručitele až na 75 dní (online / SMS) • jak půjčka funguje, jak získat, prodloužit, splatit • oslovení cílovky (nemáte před výplatou na nečekané výdaje?) • jak a kdy přijdou peníze (na účet, složenkou), další časté otázky • podmínky k získání půjčky • kalkulačka půjčky (výše poplatku) – netextový obsah • konkurenční výhody (bez registru, ručitele, doložení příjmů…) • hlavní příslib a přínosy (půjčka bez čekání do 10 minut, peníze na účet nebo složenkou, stačí online žádost, číslo OP a mobil…) • možnost online video chatu s klientskou podporou • sdílení stránky přes FB, TW, e-mail… • Facebook stránka (téměř 5000 fanoušků) – důvěryhodnost • kontakt na zákaznickou podporu • reference klientů ? • nabízející – o Ferratum, 1,5 mil. půjček, 18 zemí, 200 fin. Specialistů • pracovní doba na klientskou linku • hlavní cíl – přejít na online žádost, další cíle – prodloužení půjčky, splacení

• Komentář k některým prvkům obsahové strategie: • Kalkulačka půjčky se nabízí jako vhodný netextový obsah. S

interaktivními šoupátky si uživatelé rádi hrají, přitáhnou jejich pozornost a v tomto případě rovnou zodpoví otázku „Kolik to bude stát“.

• Web se měl lišit tím, že jedním tlačítkem se uživatel spojí s klientskou podporou přes video chat. Brali jsme to s grafikem jako výzvu, jak „drobnost“ využít v konceptu webu.

• Reference např. v podobě testimoniálů nebyly k dispozici, takže jsem s nimi na úvodní stránce zatím nepočítal.

• Facebook stránka s 5000 fanoušky poslouží dobře jako podpora důvěryhodnosti místo referencí a částečně i jako konkurenční výhoda.

• Několik dalších částí obsahu zodpovídá potenciální otázky a vyvrací obavy uživatelů / zákazníků, např. kdy přijdou peníze, podmínky získání půjčky, jak prodloužit půjčku apod.

• message: nabídka půjčky do 10k bez ručitele až na 75 dní (online / SMS) • jak půjčka funguje, jak získat, prodloužit, splatit • oslovení cílovky (nemáte před výplatou na nečekané výdaje?) • jak a kdy přijdou peníze (na účet, složenkou), další časté otázky • podmínky k získání půjčky • kalkulačka půjčky (výše poplatku) – netextový obsah • konkurenční výhody (bez registru, ručitele, doložení příjmů…) • hlavní příslib a přínosy (půjčka bez čekání do 10 minut, peníze na účet nebo složenkou, stačí online žádost, číslo OP a mobil…) • možnost online video chatu s klientskou podporou • sdílení stránky přes FB, TW, e-mail… • Facebook stránka (téměř 5000 fanoušků) – důvěryhodnost • kontakt na zákaznickou podporu • reference klientů ? • nabízející – o Ferratum, 1,5 mil. půjček, 18 zemí, 200 fin. Specialistů • pracovní doba na klientskou linku • hlavní cíl – přejít na online žádost, další cíle – prodloužení půjčky, splacení

• Související části obsahu si k sobě spojím (modré čáry vlevo), protože v obsahu stránky by se pravděpodobně mohly a měly objevit blízko sebe. Vytvoří tak třeba jeden celistvý blok nebo 3 bloky vedle sebe.

• Zeleně jsem vyznačil prvky s vysokou prioritou, které se musí objevit na stránce co nejdříve. Vyplývá to částečně i z modelu AIDA – čím upoutat pozornost a vzbudit zájem čtenáře.

• Červeně jsem označil hlavní a vedlejší cíle úvodní stránky, tj. budou z nich různé typy výzev k akci.

• Teď přichází na řadu papír a rychlé skicování rozmístění prvků obsahové strategie do pracovního layoutu obsahu. Řídím se nastavenou prioritou prvků a propojením souvisejícího obsahu.

• Už z konzultací s grafikem bylo jasné, že zkusíme koncept postavit na 3D vizualizaci kanceláře s pracovníky klientské podpory a video chatu.

• V hlavičce tedy bude velký prostor pro grafiku, ale rovnou tam půjde umístit tlačítko pro důležitou CTA.

• Aby uživateli byl hned jasný účel webu, kvůli většímu prostoru hlavičky bude dobré dát někam nahoru i hlavní přínosy produktu.

• Pak už je to klasika – dobrý titulek, rozšiřující podtitulek, perex a pomocí odrážek výhody půjčky.

• Důležité je si do jednotlivých bloků zapisovat konkrétní prvky obsahové strategie i s vypsanými údaji a rovnou si prvky odškrtnout jako už použité.

• Např. v perexu použiju oslovení cílovky a rovnou i hlavní sdělení – to bude samozřejmě i v titulku. Na papíře nepíšu lorem ipsum texty, ale jen konkrétní myšlenky nebo zajímavé údaje a zbytek třeba proškrtnu vlnovkou. Jde jen o rychlé naskicnutí v ruce.

• Kalkulačka je důležitá, takže ji zkusím umístit hned pod titulek a jejím zasazením zúžit sloupec pro perex. A rovnou se nad přehyb stránky dostane prvek s hlavní CTA k získání půjčky i s odpovědí „kolik to bude stát“.

• Na druhé půlce stránky rozvedu nabídku o bližší informace. Obsahová část „jak to funguje“ souvisí s několika dalšími částmi, takže na stránce budou všechny pohromadě v jednom dynamickém bloku.

• K tomu už zbývá doplnit informace o poskytovateli půjčky a rovnou si zapíšu konkrétní čísla.

• Podle modelu AIDA by to ještě chtělo uzavřít stránku výzvou k akci. Z obsahové strategie to bude hlavní akce „získat novou půjčku“ a dvě vedlejší akce.

• Facebook plugin bude lepší v minimalistické formě, aby stránka nebyla přeplácaná. Pak zbývají sociální pluginy pro sdílení stránky. Tyto prvky by se mohly opakovat na každé stránce webu. Podobně tak kontakty a pracovní doba klientské podpory.

CO+KOMU

PROČ ZA KOLIK

CTA

PŘÍNOSY CTA

CO+KOMU

PROČ ZA KOLIK

CTA

PŘÍNOSY CTA

• A teď přijde ta třešnička. Vezmu hlavní check-list a všech 8 bodů zkusím umístit do navržené skici k jednotlivým blokům. Snadno si tak ověřím, jestli jsem nezapomněl na některý z povinných prvků nabídky.

• Kromě toho si ověřím i prioritu obsahu, tj. jestli stránka začíná tím, co vlastně nabízím, komu a proč by si to měl koupit ode mě. A podle konceptu také přítomnost výzvy k akci dostatečně nahoře. Je to pro mě takový doplněk k modelu AIDA.

• Uživateli musí být jasná nabídka, nabízející i cílovka, tj. že / jestli je nabídka určená jemu.

• V první půlce stránky mám 2 hlavní výzvy k akci, což by mohlo fungovat. Přínosy jsou hned na začátku. Kalkulačka interaktivně ukazuje, kolik to bude stát.

PROČ +KDE +KOMU +CO

KDO

CTA CTA CTA CTA+PROČ CTA CTA+KDE

PROČ +KDE +KOMU +CO

KDO

CTA CTA CTA CTA+PROČ CTA CTA+KDE

• Druhá půlka stránky už je obsáhlejší. Blok „jak to funguje“ v sobě shrnuje více částí z obsahové strategie, takže logicky i více bodů check-listu. Rozepisuje, co nabízím, kde se to dá koupit (online/SMS), upřesňuje cílovku pomocí podmínek k získání půjčky. A s dobře napsaným textem i přesvědčí, proč zrovna u mě by měl zákazník „nakoupit“, tj. zažádat o půjčku.

• Kdo půjčku nabízí je zřejmé z bloku hned vedle, takže tím se i uzavírá trojice nabídka, nabízející a cílovka.

• Ostatní prvky jsou výzvy k akci. Jedna hlavní, několik dalších vedlejších. Grafik musí vhodně odlišit a vypíchnout ta správná tlačítka. A protože stránka končí výzvami k akci, splňuje návrh i model AIDA.

PROČ +KDE +KOMU +CO

KDO

CTA CTA CTA CTA+PROČ CTA CTA+KDE

• Taková skica pro mě představuje hrubou osnovu obsahu, mustr, od kterého se mohu odpíchnout při samotném psaní. Je to koncept a možná i předběžný layout obsahu stránky.

• Do teď jsem se soustředil na to, co na stránku napsat. Nemusím řešit styl komunikace, výběr emocí a správných slov, zapojení klíčových frází atd.

• Teď mám jednu variantu obsahové skici. Protože je to rychlé, klidně si vytvořím další a porovnávám, ve které bude obsah fungovat nejlépe, nebude přeplácaný a zapojí správně prioritu i vzájemné souvislosti obsahu.

• Nad takovou skicou se lépe s klientem konzultuje, jestli se s touto cestou ztotožní, ještě před samotným vytvořením finálního obsahu.

• Teď teprve otevřu texťák a připravím si do něj naskicnutý mustr osnovy. Místo „co psát“ už se teď začnu soustředit na to „jak psát“, tj. komunikační styl, výběr správných slov, emocí, argumentů, zapojení klíčových frází, údernost textu, rytmus atd.

• Finální text jde ke grafikovi. Pokud o to stojí, zašlu mu i obsahovou skicu, ale ve výsledné podobě, layoutu a konceptu stránky má volnou ruku. Obvykle to ještě vzájemně konzultujeme a vyladíme k dokonalosti.

• Obsahová skica je tak nejdůležitější právě pro mě jako textaře…

…a teď vám řeknu proč…

Ale ještě před tím, jak se s konceptem popral grafik:

• Copysketching jsem začal používat kvůli specifickým typům projektů, ale tenhle způsob mě baví víc než jen rovnou datlovat obsah v texťáku.

• Rozdělím si tím práci na 2 části, kdy se při skicování soustředím na to „co psát“ a v texťáku už jen na to „jak psát“. Osobně se mi tak pracuje lépe.

• Kreslení ale také z člověka vyždímá kreativního ducha, je hravější, přichází lepší nápady… Stejně jako když si dítě kreslí s otevřenou hlavou před tím, než jeho kreativitu převychová školní výchova.

• Díky obsahové skice mám hrubou osnovu stránky. Vím přesně, co bude na stránce za obsah. Koncept osnovy stránky tak můžu snadno konzultovat s klientem a předejít zbytečnému přepisování.

• Při kreslení si lépe představím, jak pracovat s netextovým obsahem a jak bude fungovat s texty. Nebude stránka přeplácaná, dá se text vyjádřit lépe netextovým prvkem? Mám čím upoutat pozornost?

• Rychlé naskicnutí obsahu umožňuje vytvořit více variant a snadno je porovnat. Která bude fungovat lépe? Hodí se ke komunikačnímu stylu? Varianty často konzultuji s grafikem kvůli vhodnosti konceptu.

• Díky check-listu mám jistotu, že na stránce nebude chybět žádný důležitý prvek přesvědčivé nabídky.

• Hodně se mi skicování obsahu vyplatilo u webu, který byl náročný na responzivní design. Díky boxíkům a jejich přeskupování se odstavce vlezou do pár řádků i na tabletu nebo smartphonu. Obsah se tak lépe čte.

• A teď 3 příklady, u kterých jsem copysketching použil a tento postup se u nich osvědčil.

• U prvního příkladu je na levé straně výstup mého návrhu obsahu podstránky. Před tím měl obsah klasickou formu článku, tj. nadpis, perex, podnadpis, odstavec, odrážky apod. Vytvořil jsem modernější layout kvůli větší přehlednosti a dohledal relevantní netextový obsah: videonávody a screenshoty aplikace.

• Implementace stránky použila navržený layout, ale místo videonávodů se na stránce objevily různé ilustrační obrázky, které měly být „vtipné“ a doplnit tak otevřený komunikační styl webu. Vhodnější by bylo vytvořit alespoň obrázky na míru ve stejném stylu, aby společně předávaly potřebné emoce a atmosféru.

• Navrhovali jsme s kolegyní textařkou a grafikem tištěnou inzerci do časopisu. Měli jsme 8 různých konceptů a kvůli formátu úzké nudle na výšku jsme zvolili komiksový koncept, který by mohl i upoutat.

• Obrázek vlevo: Jednou v 5 ráno jsem se probudil a měl vizi, jaký příběh a dialogy se v komiksu musí objevit. Vyskočil jsem z postele a rozsvítil lampu. Jenže nesvítila. Takže jsem za světýlka z mobilu rychle naskicnul celou ideu na papír, abych ji nezapomněl.

• Obrázek vpravo: Po několika konzultacích a ladění vzniknul výsledný inzerát v grafické podobě. Grafik a dva textaři tak spolu odvedli poctivou reklamní práci.

• Na začátku byla rychlá skica příběhu / obsahu. Tato malůvka dokazuje, že copywriting není jen o psaní ;-).

• Takhle vypadala první obsahová skica úvodní stránky microsite www.pohodova-materska.cz.

• Chtěl jsem vyprávět příběh v několika krocích a měl tuhle představu, jak uživatele příběhem provést. Na papíře už se mi to ale nezdálo tak dobré jako v hlavě – stránka bude dost dlouhá, střídavě umístěné obrázky s titulky by mohly soupeřit o pozornost čtenáře…

• Už proto je dobré si hodit koncept obsahu rychlým naskicnutím na papír. Ten odhalí nedostatky, které idea umístěná jen v hlavě zatím skrývá.

• Tak jsem zkusil druhou variantu obsahové skici v kompaktnější podobě. Forma vyprávění příběhu teď vypadá jako storyboard nebo komiks. Uživatel už sice nemusí přejíždět celou dlouhou stránku, ale jednotlivé části soupeří o pozornost ještě více. Navíc do malých okének by se toho moc nevešlo.

• Tohle také nevypadá jako ideální koncept. Takže jsem oba koncepty zkombinoval…

• A takhle vypadala finální obsahová skica úvodní stránky microsite.

• Příběh v tomto konceptu je rozdělený do několika snímků ve slajderu. Uživatel se bude soustředit vždy na jeden snímek, jednu část příběhu, jednu scénku.

• Konzultovali jsme koncept s grafikem, rozvinuli celý nápad a dohodli se na vizuálním stylu webu: 3D vizualizace a vtipné scénky, které předají vhodné emoce a odliší web od konkurenčních nabídek půjčky pro ženy na mateřské.

• Proto vypadá finální vzhled webu takhle. Grafik navrhnul 3D postavičky a scénky na míru podle příběhů. Nebo jsem naopak místy příběh upravil podle povedené scénky. Spolupráce copywritera s grafikem v reklamě je stěžejní a u webu přináší lepší výsledky. U téhle microsite stál její úspěch právě na tom.

• Na celém webu nenajdete žádný obrázek z fotobanky – vše se vytvářelo na míru, stylem to pasuje k sobě, takže i proto koncept webu funguje jako celek a předává ty správné emoce a uživatelský prožitek.

• A na počátku celé microsite byla jednoduchá rychlá skica obsahu a metoda, které říkám copysketching. Právě při vytváření konceptů microsite a webů se mi tento způsob práce osvědčil nejvíce.

A napište mi třeba na Facebook, jestli pracujete

podobně jako já nebo jestli vám Copysketching pomohl.

Copysketching nemusí vyhovovat každému textaři a nehodí se na každý projekt. Vyzkoušejte, jestli právě vám

pomůže vytvářet lepší obsah.