Propojení designu a copywritingu

Text je asi nejdůležitější součástí uživatelského rozhraní. Přesto ho často nebereme dostatečně vážně. Zamyslete se. K čemu je text? Textem sdělujete informace, vyjadřujete myšlenky a hlavně prodáváte. Je opravdu důležitý a záleží na něm. Proto se taky za základ designu považuje právě typografie.

Použitím vhodné typografie a správných slov dosahujete v designu vytyčených cílů. Pokud berete text pouze jako výplň uživatelského rozhraní, je to špatně.

To, jaká slova vybrat tak, aby správně komunikovala myšlenku, je otázkou oboru zvaný copywriting. Jako designéra vás text zajímá nejen z pohledu obsahu, ale i z pohledu vizuálního. Text je totiž grafickým prvkem.

Texty jako grafické prvky

Zkuste se dívat na texty jako na grafické prvky. Pokud má text jeden řádek nebo dva, deset nebo dvacet slov, o písmeno víc nebo míň, jde pokaždé o úplně jiný grafický prvek. Takový prvek přichází do styku s okolními prvky, na které je potřeba brát zřetel. S každou změnou obsahu textu je potřeba zkontrolovat, jestli je s okolními prvky ve vizuálním souladu.‍

Textové bloky jako grafické plochy‍

Na celé textové bloky se dívejte jako na zabarvené plochy. Odstavce nebo nadpisy tvoří různé tvary, které mají svoji vizuální váhu a reagují na okolní prvky.

‍Slova jako linie‍

Místo slov si můžete představit grafické linie. Všímejte si počtu a délky slov. Je rozdíl, jestli je na řádku jedno nebo tři slova.

‍Písmena jako geometrické tvary‍

Když se podíváte na text v tom nejmenším měřítku, zjistíte, že každé písmeno nebo znak tvoří určitý geometrický tvar. Každý geometrický tvar má jiné vlastnosti a ovlivňuje vizuální váhu.

Textové bloky doslova

Textový blok by měl být blok v pravém slova smyslu. Neměl by se skládat z obrovských zubů. Řádky textu by měly být zhruba stejně dlouhé.

Čím více textu, tím méně prostoru

Sledujte, jak změna obsahu textu ovlivňuje rozložení a okolní prvky. Pokud například z krátkého textu uděláte dlouhý o větším počtu řádků, zvětšíte blok textu a tím zaplníte rozložení stránky. Musíte zkontrolovat a přizpůsobit tomu ostatní prvky v rozložení.

Změna ve velkých nadpisech

Kde se nejvíce vizuálně projeví třeba i změna jediného znaku jsou velké texty - nadpisy. U nich záleží opravdu na každém znaku. Čím méně textu a čím více výstižného, tím lépe.

S textovým blokem nadpisu si můžete vizuálně hrát. Můžete přidávat nebo ubírat slova. Můžete do nadpisu zkusit přidat tečku, pomlčku nebo přidat další text. Můžete řádky jinak zalomit. S každou změnou se vizuální vnímání nadpisu mění.

Je dobré předem vědět přesné znění textu

Pokud navrhujete pro určitou sekci rozhraní textové bloky, měli byste předem znát délku textů a jejich přesné znění. Ná základě toho vyberete velikost písma, šířku textového bloku nebo třeba řádkování. Pokud víte přesně, jaké konkrétní texty použijete, můžete s čistým svědomím navrhnout i okolní prvky do finální podoby.‍

Pokud se texty v budoucnu změní, měli byste zkontrolovat, jestli vše sedí oproti okolním prvkům a jestli daná sekce opravdu vypadá tak, jak by měla vypadat a jestli nejsou potřeba udělat dodatečné úpravy.‍

Často se stane, že si objednatel později v návrhu sám změní obsah textové části a rozbije tím celý návrh.

Pokud nevíte, co navrhujete, ženete se do pekla

Určitě jste někdy zažili, že jste začali tvořit vizuální návrh webu nebo aplikace, ale vlastně jste neměli tušení o konkrétním obsahu. Uživatelské rozhraní jste skládali tak, jak jste uznali za vhodné. Odhadovali jste, kde a jaká sekce by mohla být a jaký obsah se v ní může vyskytovat.

„Tady bude sekce O nás a jeden odstaveček textu. Hmm. A tady by zase mohla být sekce o produktu, do které navrhnu dva odstavce textu s nějakým pěkným nadpisem. A ještě přidám obrázek. Hlavně ať je tam je nějaký obsah, na kterém se mohu vizuálně vyřádit.“

Znáte to? Co je na tomto postupu špatně? Střílíte naslepo. Nehledě na to, že by měl samotnému návrhu předcházet uživatelský výzkum od UX designéra. Buďme ale realisti, většina UI se tvoří selským rozumem.

Když se klient rozhodne pro změny

Představte si situaci, kdy navrhujete pro klienta web nebo aplikaci. Dáváte si na práci opravdu záležet, aby vše v návrhu ladilo a byla dodržena vizuální rovnováha.

Dílo dokončíte. Se svým výtvorem jste nad míru spokojeni. Najednou se ozve klient, že si obsah webu nebo aplikace rozmyslel. Potřebuje přehodit pár sekcí a vyměnit texty. V tu chvíli můžete začít od znova, protože tím klient v podstatě vytvořil nové grafické prvky, které už spolu neladí. Nedej bože, že se to stane víckrát.

Snažte se připravit finální obsah

Zkuste na klienta naléhat ještě před samotným vizuálním návrhem, aby dodal veškeré statické texty předem, které si ideálně nechte schválit. V případě, že klient během návrhu texty změní, upozorněte ho na to, že dodatečná práce bude nákladnější. Díky tomu si klient dá více záležet na přípravě obsahu a vy se vyhnete častým změnám textů během navrhování.

Když nemáte obsah a musíte použít ukázkový text

Předpokládejme, že nemáte k dispozici hotové texty a klient je bude doplňovat až po dodání návrhu. Jde o častý scénář. Potřebujete použít ukázkové texty. Kde je vezmete?‍

Vyhněte se „Lorem ipsum“‍

Nejčastěji se pro ukázkové texty sahá po generátoru pseudolatinského textu „Lorem ipsum“. Proč ho nedoporučuji používat? Reálný jazyk je totiž dost odlišný.

Bavme se o češtině, která je dost specifická. Obsahuje diakritiku. Má krátká slova. Má dlouhá slova. Má spoustu předložek, které se různě zalamují. Pokud byste si celý web nebo aplikaci navrhli v duchu „Lorem ipsum“ a později dosadili reálné texty, zjistili byste, že se mohou chovat jinak. A to ne počítám to, že předem neznáte opravdovou délku textů.

Například máte-li u daného „Lorem ipsum“ textu nastavené malé řádkování a text vyměníte za reálný český text, zjistíte, že do hry vstupuje diakritika a v tom případě je lepší řádkování zvětšit, protože diakritika zasahuje do předchozích řádků.‍

Raději použijte reálné ukázkové texty‍

Lepší variantou pro demonstraci textů je použít reálné texty vzaté například ze zpravodajského nebo jiného serveru. V nich se pracuje s reálným jazykem a lépe zjistíte, jak dané textové bloky nastavit.

Pokud byste přeci jen chtěli použít nějaký generátor, zkuste generátor českých textů například tento.

Správný postup při návrhu webu nebo aplikace

V ideálním světe se před návrhem webu nebo aplikace dělá uživatelský výzkum. To je role UX designerů nebo marketérů. Dotazují se lidé z cílové skupiny. Uživatelský výzkum - zní to honosně. Ale nebojte se toho pojmu. Uživatelský výzkum může znamenat oslovení stovek respondentů, ale také může znamenat 2 až 3 hloubkové rozhovory s lidmi z cílové skupiny. Mnohdy to stačí. Abyste zvýšili šance těmto lidem něco prodat, musíte pochopit jejich myšlení. Cílem je zjistit potřeby, obavy, problémy nebo motivace, které poslouží k napsání toho správného prodejního textu.

Na základě tohoto uživatelského výzkumu přichází role copywritera, který napíše krásné, chytlavé ale hlavně funkční prodejní texty. Cílem je získat hotové texty ještě před samotným vizuálním navrhováním.

Jakmile je textový obsah webu nebo aplikace schválený, je řada na vás. Převezmete schválené texty, které dostanete ideálně zasazené v hotovém drátěném modelu (wireframu), který zpracoval UX designér a začnete tvořit vizuální dílo. Přesně víte, jaké texty, fotky a další obsah budete muset graficky ztvárnit a s jakými konkrétními slovy a jejich spojeními budete pracovat. Máte jistotu, že se již připravený obsah nebude razantně měnit. Víte, jak budou konkrétní nadpisy a odstavce textu vypadat. A to je výhoda.

Během procesu návrhu je vhodné s copywriterem stále komunikovat, abyste s ním mohli ladit případně délky textů. Může se stát, že budete potřebovat určité textové bloky delší či kratší.

Toto nemusí být nutně správný postup. Roli UX designera, copywritera i další role můžete zastat buď všechny vy nebo kdokoli jiný. Důležitou myšlenkou, kterou byste si měli odnést, je ta, pracovat při vizuálním návrhu webu nebo aplikace s již hotovými a reálnými texty.