Je to už 10 měsíců, co jsme představili Page Builder Sandwich veřejnosti. Nyní máme kolem 6 000 aktivních instalací, což je pro nás nemalý úspěch. Díky tomu jsme také získali spoustu zpětné vazby, a to jak dobré, tak špatné. Všeobecná shoda však panuje v tom, že lidé oceňují, jak snadné je vytvářet rozvržení a tvořit obsah ve srovnání s ostatními nástroji pro tvorbu stránek na trhu.
Velká část zpětné vazby, kterou jsme obdrželi, byly požadavky na nové funkce a mnoho z nich jsme v uplynulých měsících přidali. Jak jsme v tom však pokračovali, začali jsme v tomto procesu také pomalu měnit uživatelské rozhraní. A v důsledku toho jsme také měnili uživatelský zážitek… k horšímu. Dospělo to však do bodu, kdy jsme museli rozhraní přehodnotit, protože už jednoduše nefungovalo plynule a jednotlivé funkce do něj příliš nezapadaly.
Zastaralé rozhraní
V předchozích verzích PBS jsme chtěli, aby mělo všechno podobu tlačítek. Proč? Protože tlačítka se snadno používají. Prostě na ně… kliknete. Ve starších verzích inspektoru (postranní panel na obrázku výše) kliknutí na tlačítko hodnotu zvýšilo, zatímco kliknutí se stisknutou klávesou Shift ji snížilo. To zní vcelku jednoduše. S přidáním karuselů, záložek, map a dalších nových prvků a funkcí se však všechna tato tlačítka změnila ve změť různých ikon s odlišným designem a začala připomínat spíše hieroglyfy než skvělé rozhraní. Pro zkušené uživatele to nebyl problém, ale pokud jste byli v PBS nováčky, působilo to dost odstrašujícím dojmem.
Dále se v inspektoru objevilo několik problémů. Původní myšlenkou bylo udělat vše jednoduché a dostupné přímo uvnitř inspektoru. A tím „vše“ jsem myslel opravdu vše – od převodu textu na nadpisy až po změnu barev pozadí, barev písma a cokoli dalšího, co vás napadne. Ve svém současném stavu však inspektor obsahuje tolik možností, že musíte neustále rolovat kolečkem myši nahoru a dolů. Dost odlišné od inspektoru, jaký jsem původně doufal pro uživatele vytvořit.
A nakonec jsme nedávno představili mapování shortcodů pro vaše oblíbené pluginy. Tato funkce vyžadovala vytvoření textových polí, posuvníků s čísly, zaškrtávacích políček a dalších nových typů voleb, které byly potřeba k tomu, aby byla úprava shortcodů příjemnější. Zpočátku to byl dobrý nápad a ano, usnadnilo vám to manipulaci se shortcody. Tato funkce se však opět odchýlila od našeho rozhraní založeného „pouze na tlačítkách“. Při zpětném pohledu bylo opravdu nemožné používat pouze tlačítka pro změnu parametrů shortcodů. V nejnovější verzi jsme tak skončili se dvěma typy ovládacích prvků: tlačítky a poli pro shortcody.
Existuje ještě několik dalších důvodů, proč jsme usoudili, že naše rozhraní již není efektivní (nebo vhodné pro naše potřeby), ale výše uvedené body jsou ty hlavní. Jedna věc však byla vždy jistá: věděli jsme, že rozhraní musíme aktualizovat.
Definování toho, jak by měl page builder ideálně fungovat
Místo abychom se do toho bezhlavě pustili a začali věci hned měnit, udělali jsme sto kroků zpět, abychom se podívali na celkový zážitek z práce s page builderem. Chtěli jsme rozhraní vdechnout nový život. Popravdě řečeno, nechtěli jsme ho rok co rok znovu předělávat. Je to vyčerpávající a komunitě WordPressu to rozhodně nepřináší výraznou pomoc. Tentokrát jsme se rozhodli postupovat pomalu a pečlivě. Prozkoumali jsme každé zákoutí Page Builder Sandwich a to, co z něj dělá dobrý page builder, a nakonec jsme celý proces úprav zkonkretizovali do několika klíčových konceptů.
Základní koncept č. 1: Úprava obsahu psaním přímo v textu
Jedním z hlavních důvodů pro instalaci page builderu je vymanit se z omezení administrátorského textového editoru WordPressu. Ne že by editor v administraci nebyl dobrý, ale při tvorbě webových stránek vám okamžitě neukáže, jak bude stránka vypadat pro vaše návštěvníky, ani vám neumožňuje uspořádat obsah jinak než v jednom sloupci. Vidíte tam pouze svůj text a některé obrázky, ale nic ze složitějších prvků (např. kontaktní formuláře). Můžete sice přidávat shortcody, ale nezobrazí se ve své vykreslené podobě*.
* Existují pluginy vytvořené jinými vývojáři, které to řeší, jako například Shortcake UI, ale to je vedlejší.
A právě zde přicházejí na řadu frontendové page buildery. Přenášejí úpravy z administrace přímo na frontend, takže upravujete svůj web přesně tak, jak jej skutečně uvidí vaši návštěvníci. Jak by to formuloval Pippin: Co vidíte, to dostanete (WYSIWYG).
Další výhodou frontendového editoru je, že vám umožňuje upravovat text přímo. Psaní nadpisů a odstavců přináší při tvorbě webu lehkost běžného textového procesoru. Tlačítka a popisky záložek by mělo být také možné měnit pouhým kliknutím a psaním.
V této oblasti většina ostatních page builderů zaostává. Většina z nich vás nutí psát do textového pole, abyste cokoliv upravili. U skutečných frontendových page builderů by tomu tak ale být nemělo. Psaní a úprava textu přímo na stránce byly silnou stránkou Page Builder Sandwich už od verze 2 a dali jsme si záležet, aby tomu tak zůstalo i ve verzi 3.
Základní koncept č. 2: Využití myši pro rychlé úpravy
Myš je mocný nástroj, který se v page builderech často opomíjí. Page buildery ji často využívají jen k tomu, aby umožnily přetahovat prvky a umisťovat je na různá místa nebo klikat na tlačítka či vstupní pole. Ačkoli je to v pořádku, s myší se dá při tvorbě stránek dělat mnohem víc.
Především je skvělé mít vizuální odezvu při použití myši jako nástroje pro úpravu stránky, zejména při nastavování vizuálních vlastností, jako jsou vnější a vnitřní okraje (margins a paddings) a velikosti. Vylaďování vašich prvků se tak stává přirozeným zážitkem.
V PBS verze 3 budete moci pomocí myši upravovat celou řadu věcí. Můžete upravovat vnější okraje / rozestupy mezi jednotlivými prvky, vnitřní okraje ve sloupcích a také velikosti obrázků, ikon a map. Tlačítka umožňující změnu číselných hodnot jsme také nahradili posuvníky.
Základní koncept č. 3: Stylování textu by mělo být snadné
Když poodstoupíte od monitoru, všimnete si, že většinu toho, co na webové stránky přidáváte, tvoří textový obsah. Ano, máme tam obrázky a ikony, které jej doprovázejí – a v poslední době máme tendenci přidávat na weby větší obrázky. Většina důležitého obsahu je však text: nadpisy, odrážkové seznamy, odstavce, citace atd. Spolu s tím souvisí i to, jak text stylujeme, aby ladil s naším designem. Buď měníme jeho velikost a barvu, nebo jej zvýrazňujeme tučně či kurzívou. Díky tomu je náš obsah čitelnější, relevantnější a atraktivnější pro příslušné čtenáře.
Protože text stylujeme často, tlačítka, která nám umožňují styly měnit, by měla být velmi snadno přístupná. Neměla by být schovaná uvnitř vyskakovacího okna, které musíme nejprve otevřít. Většina page builderů touto nectností trpí. Aby jejich uživatelské rozhraní mohlo být označeno za „přehledné“, jsou i ty nejpoužívanější možnosti skryté před zraky uživatele.
Abychom to vyřešili, podívali jsme se na nejběžněji používané textové procesory. Všimli jsme si, že mají obvykle v horní části obrazovky řádek se spoustou tlačítek pro formátování textu, a toto uspořádání jsme pro verzi 3 okopírovali. Nyní máme řádek se všemi tlačítky pro formátování textu stále přítomný v horní části obrazovky. Díky tomu je stylování opravdu rychlé a naprosto přirozené, jako byste psali v běžném textovém editoru.
Základní koncept č. 4: Pokročilé možnosti stylování by měly být flexibilní, ale snadno pochopitelné
Smyslem page builderu je, aby lidem umožnil snadno vytvářet ohromující designy. To znamená, že bychom měli nabídnout spoustu různých nastavení a možností, aniž by to vedlo k náročnému procesu učení. Možnost upravovat vnější a vnitřní okraje a stylovat text je skvělá, ale to samo o sobě nestačí. K dosažení cíle budete potřebovat mnohem propracovanější možnosti, jako jsou obrázky na pozadí, vzory, ohraničení, fixní pozadí a další. Nahromadění všech těchto různých nastavení může být trochu zahlcující, a proto jsme některá z nich zjednodušili a uspořádali do kategorií, aby bylo ve verzi 3 vše přívětivější.
Základní koncept č. 5: Podpora shortcodů
V neposlední řadě nezapomínejme, že náš page builder staví na WordPressu. Měli bychom platformu a její funkce plně využívat, nikoli je omezovat nebo se od nich odchylovat. Jednou ze skvělých funkcí, které WordPress nabízí, jsou shortcody. To neznamená, že by se celý obsah měl skládat ze shortcodů – to by byl chaos –, ale měli bychom s nimi být jednoduše kompatibilní. Mnoho pluginů a šablon shortcody používá a byla by velká škoda je všechny ignorovat. Shortcody ve skutečnosti dávají uživatelům při tvorbě stránek maximální flexibilitu.
Před několika týdny jsme představili náš systém mapování shortcodů a díky němu jsme zmapovali stovky shortcodů ze stovek pluginů. Upřednostnili jsme ty nejpopulárnější pluginy z adresáře pluginů WordPressu, takže je velmi pravděpodobné, že se s nimi setkáte i na svých vlastních webech. Ve verzi 3 jsme tuto podporu ještě posílili a do budoucna ji budeme dále vylepšovat.
Závěr
Vzali jsme všechny výše uvedené základní vlastnosti a zabudovali je do Page Builder Sandwich verze 3. Je to zatím nejlepší page builder, jaký jsme pro WordPress vytvořili. Používá se intuitivněji a přirozeněji, funguje rychleji, snadněji se ovládá a je uživatelsky přívětivější než kdykoli předtím.
Pokud máte jakékoli nápady ohledně zásadních funkcí pro page builder, dejte nám vědět v komentářích níže.