Když mohou skicovat UX borci, proč by nemohli i copywriteři? Jak v sobě objevit kreativního ducha a oprostit se od fádního psaní článkovitých forem. O rychlém načrtávání nápadů, příběhů, layoutu obsahu, argumentů i celého konceptu webu. Copysketching je metoda, kterou používám při přípravě obsahu webové stránky. Vyzkoušejte, jestli právě vám pomůže k lepším výsledkům.
2. • 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.
3. 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
4. • 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.
5. • 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.
6. • 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
7.
8. • 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.
9. • 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í
10. • 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ší.
11. • 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.
12. • 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.
13.
14. • 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.
15. • 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“.
16.
17. • 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.
19. 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.
21. 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.
22. 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.
23.
24. • 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:
25.
26.
27. • 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í.
28. • 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.
29.
30. • 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.
31.
32. • 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í ;-).
33.
34. • 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á.
35.
36. • 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…
37.
38. • 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é.
39.
40. • 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.
41. 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.