Copysketching aneb skicováním k lepšímu obsahu / Copycamp 2013
Upcoming SlideShare
Loading in...5
×
 

Copysketching aneb skicováním k lepšímu obsahu / Copycamp 2013

on

  • 2,809 views

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ů, ...

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.

Statistics

Views

Total Views
2,809
Views on SlideShare
575
Embed Views
2,234

Actions

Likes
2
Downloads
14
Comments
0

7 Embeds 2,234

http://www.o-psani.cz 2162
http://6467429714369351622_6b4445de8cd3233403ac029e7ba09d2303bddca6.blogspot.com 42
http://localhost 16
https://twitter.com 9
http://test.o-psani.cz 2
http://arrased14.rssing.com 2
http://digg.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Copysketching aneb skicováním k lepšímu obsahu / Copycamp 2013 Copysketching aneb skicováním k lepšímu obsahu / Copycamp 2013 Presentation Transcript

  • Prezentace doplněnáo podrobné komentáře.
  • • Copysketching je mé pracovní označení postupu,kterým připravuji obsah webové stránky. Kombinujerychlé 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ávrhukonceptů webů a microsite, ale často mi pomáhá uvytvář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 mustrempro textařinu. Někdy ze skici vyjde i grafik, ale není tonutné, 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ředstavujebrief i výstup samostatnýchanalýz jako klíčová slova,konkurence apod.Proces vznikujedné 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 siobjedná „vytvoření textů“.• Ideální postup začíná dobrou analýzou. Ta zahrnujesamostatné části jako Analýzu klíčových slov, Analýzukonkurence, 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ý typinformací na stránce / webu musí být, aby se odlišilaod konkurence, za rozumné náklady přivedlaná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 obsaha forma až podle něj, u některých projektů ale stačínavrhnout wiframe s pracovním obsahem (respektivejen s použitím obsahové strategie) a copywriterdokončí finální obsah do připravené formy. Nebo UX icopy 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 scopywriterem i grafikem už od začátku projektu pocelou 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 nebokonkrétní stránky, vymýšlíme různé varianty, stylvizuálu a úzce spolupracujeme. Často se pakpředháníme v kreativitě.• Protože chybí v procesu UX tým, konzultanti, accountiatd., 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 tomá alfa a omega. Vychází z něj obsah každé stránky a uněj končím zpětnou kontrolou. Díky němu se mámvždycky od čeho odpíchnout a na nic nezapomenu.• Každá nabídka / prodejní stránka musí jasně říkat, conabízím, komu to nabízím, co mu to přinese, proč by sito měl koupit ode mě, kdo mu to vlastně nabízí, kde seto dá koupit, kolik to stojí a co musí udělat, aby tozí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é strategiekonkré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 účetnebo 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 účetnebo 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ádejmeprojekt webu s nabídkou mikropůjčky. Mám hotovouvstupní 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ánkuwebu. Obvykle si vše píšu na papír, škrtám, přepisuji,spojuji k sobě související části obsahu a označímzvýrazňovačem prvky s největší prioritou. Není špatnési rovnou zvýraznit hlavní cíle a akce, které uživatelpotřebuje, nebo které po něm chceme.• Často si při této přípravě zapíšu konkrétní čísla nebofakta, která jsem zjistil při analýze, různé verze titulkůnebo výhod, jak mě napadají, nebo třeba i jak oslovitcí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 účetnebo 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. Sinteraktivními šoupátky si uživatelé rádi hrají, přitáhnoujejich 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í sklientskou podporou přes video chat. Brali jsme to sgrafikem 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 jakopodpora důvěryhodnosti místo referencí a částečně i jakokonkurenční výhoda.• Několik dalších částí obsahu zodpovídá potenciální otázky avyvrací obavy uživatelů / zákazníků, např. kdy přijdoupení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 účetnebo 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é čáryvlevo), protože v obsahu stránky by se pravděpodobněmohly a měly objevit blízko sebe. Vytvoří tak třebajeden 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 avzbudit 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íholayoutu obsahu. Řídím se nastavenou prioritou prvků apropojením souvisejícího obsahu.• Už z konzultací s grafikem bylo jasné, že zkusímekoncept postavit na 3D vizualizaci kanceláře spracovníky klientské podpory a video chatu.• V hlavičce tedy bude velký prostor pro grafiku, alerovnou tam půjde umístit tlačítko pro důležitou CTA.• Aby uživateli byl hned jasný účel webu, kvůli většímuprostoru hlavičky bude dobré dát někam nahoru ihlavní 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 rovnousi prvky odškrtnout jako už použité.• Např. v perexu použiju oslovení cílovky a rovnou ihlavní sdělení – to bude samozřejmě i v titulku. Napapíře nepíšu lorem ipsum texty, ale jen konkrétnímyšlenky nebo zajímavé údaje a zbytek třebaproškrtnu vlnovkou. Jde jen o rychlé naskicnutí v ruce.• Kalkulačka je důležitá, takže ji zkusím umístit hnedpod 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í sněkolika dalšími částmi, takže na stránce budouvšechny pohromadě v jednom dynamickém bloku.• K tomu už zbývá doplnit informace o poskytovatelipůjčky a rovnou si zapíšu konkrétní čísla.• Podle modelu AIDA by to ještě chtělo uzavřít stránkuvý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 mohlyopakovat na každé stránce webu. Podobně takkontakty a pracovní doba klientské podpory.
  • CO+KOMUPROČZA KOLIKCTAPŘÍNOSYCTA
  • CO+KOMUPROČZA KOLIKCTAPŘÍNOSYCTA• A teď přijde ta třešnička. Vezmu hlavní check-list avšech 8 bodů zkusím umístit do navržené skici kjednotlivým blokům. Snadno si tak ověřím, jestli jsemnezapomněl na některý z povinných prvků nabídky.• Kromě toho si ověřím i prioritu obsahu, tj. jestlistránka začíná tím, co vlastně nabízím, komu a proč bysi to měl koupit ode mě. A podle konceptu taképřítomnost výzvy k akci dostatečně nahoře. Je to promě 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+COKDOCTA CTA CTACTA+PROČ CTACTA+KDE
  • PROČ+KDE+KOMU+COKDOCTA CTA CTACTA+PROČ CTACTA+KDE• Druhá půlka stránky už je obsáhlejší. Blok „jak tofunguje“ 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 kzí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žetím se i uzavírá trojice nabídka, nabízející a cílovka.• Ostatní prvky jsou výzvy k akci. Jedna hlavní, několikdalších vedlejších. Grafik musí vhodně odlišit avypí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+COKDOCTA CTA CTACTA+PROČ CTACTA+KDE• Taková skica pro mě představuje hrubou osnovuobsahu, mustr, od kterého se mohu odpíchnout přisamotné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í asprávných slov, zapojení klíčových frází atd.• Teď mám jednu variantu obsahové skici. Protože je torychlé, klidně si vytvořím další a porovnávám, ve kterébude obsah fungovat nejlépe, nebude přeplácaný azapojí 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ýmvytvořením finálního obsahu.
  • • Teď teprve otevřu texťák a připravím si do nějnaskicnutý 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 iobsahovou skicu, ale ve výsledné podobě, layoutu akonceptu 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ě jakotextař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ýmtypům projektů, ale tenhle způsob mě baví víc než jenrovnou 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ž sidítě kreslí s otevřenou hlavou před tím, než jehokreativitu 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. Konceptosnovy stránky tak můžu snadno konzultovat sklientem a předejít zbytečnému přepisování.
  • • Při kreslení si lépe představím, jak pracovat snetextovým obsahem a jak bude fungovat s texty.Nebude stránka přeplácaná, dá se text vyjádřit lépenetextovým prvkem? Mám čím upoutat pozornost?• Rychlé naskicnutí obsahu umožňuje vytvořit vícevariant a snadno je porovnat. Která bude fungovatlépe? Hodí se ke komunikačnímu stylu? Varianty častokonzultuji s grafikem kvůli vhodnosti konceptu.• Díky check-listu mám jistotu, že na stránce nebudechybě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 ajejich přeskupování se odstavce vlezou do pár řádků ina tabletu nebo smartphonu. Obsah se tak lépe čte.
  • • A teď 3 příklady, u kterých jsem copysketching použil atento postup se u nich osvědčil.• U prvního příkladu je na levé straně výstup méhonávrhu obsahu podstránky. Před tím měl obsahklasickou 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, alemísto videonávodů se na stránce objevily různéilustrační obrázky, které měly být „vtipné“ a doplnittak otevřený komunikační styl webu. Vhodnější by bylovytvořit alespoň obrázky na míru ve stejném stylu, abyspolečně předávaly potřebné emoce a atmosféru.
  • • Navrhovali jsme s kolegyní textařkou a grafikemtištěnou inzerci do časopisu. Měli jsme 8 různýchkonceptů a kvůli formátu úzké nudle na výšku jsmezvolili komiksový koncept, který by mohl i upoutat.• Obrázek vlevo: Jednou v 5 ráno jsem se probudil a mělvizi, jaký příběh a dialogy se v komiksu musí objevit.Vyskočil jsem z postele a rozsvítil lampu. Jenženesvítila. Takže jsem za světýlka z mobilu rychlenaskicnul 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 adva textaři tak spolu odvedli poctivou reklamní práci.• Na začátku byla rychlá skica příběhu / obsahu. Tatomalůvka dokazuje, že copywriting není jen o psaní ;-).
  • • Takhle vypadala první obsahová skica úvodní stránkymicrosite www.pohodova-materska.cz.• Chtěl jsem vyprávět příběh v několika krocích a měltuhle představu, jak uživatele příběhem provést. Napapíř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 stitulky by mohly soupeřit o pozornost čtenáře…• Už proto je dobré si hodit koncept obsahu rychlýmnaskicnutí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 vkompaktnější podobě. Forma vyprávění příběhu teďvypadá jako storyboard nebo komiks. Uživatel už sicenemusí přejíždět celou dlouhou stránku, ale jednotlivéčásti soupeří o pozornost ještě více. Navíc do malýchokének by se toho moc nevešlo.• Tohle také nevypadá jako ideální koncept. Takže jsemoba koncepty zkombinoval…
  • • A takhle vypadala finální obsahová skica úvodnístránky microsite.• Příběh v tomto konceptu je rozdělený do několikasnímků ve slajderu. Uživatel se bude soustředit vždyna 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: 3Dvizualizace a vtipné scénky, které předají vhodnéemoce a odliší web od konkurenčních nabídek půjčkypro ženy na mateřské.
  • • Proto vypadá finální vzhled webu takhle. Grafiknavrhnul 3D postavičky a scénky na míru podlepříběhů. Nebo jsem naopak místy příběh upravil podlepovedené scénky. Spolupráce copywritera s grafikemv 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 apř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 mitento způsob práce osvědčil nejvíce.
  • A napište mi třeba naFacebook, jestli pracujetepodobně jako já nebo jestlivám Copysketching pomohl.Copysketching nemusí vyhovovatkaždému textaři a nehodí se na každýprojekt. Vyzkoušejte, jestli právě vámpomůže vytvářet lepší obsah.