Изминаха 10 месеца, откакто представихме Page Builder Sandwich пред обществеността. Вече имаме около 6 000 активни инсталации и това е доста голямо постижение за нас. Получихме и много отзиви заради него – както добри, така и лоши. Общото мнение обаче е, че хората харесват колко лесно се изграждат оформления и се създава съдържание в сравнение с останалите конструктори на страници на пазара.
Голяма част от обратната връзка, която получихме, бяха заявки за нови функции и през последните няколко месеца добавихме много от тях. Но докато продължавахме да правим това, в процеса започнахме бавно да променяме и потребителския интерфейс. И съответно променяхме и потребителското изживяване… към по-лошо. Стигна се до момент обаче, в който трябваше да преосмислим интерфейса, защото той просто вече не работеше гладко, а и различните функции не се съчетаваха добре с него.
Остарелият интерфейс
В предишните версии на PBS искахме всичко да бъде под формата на бутони. Защо? Защото бутоните са лесни за използване. Просто… кликвате върху тях. В по-старите версии на инспектора (страничната лента на изображението по-горе), кликването върху бутон увеличаваше стойност, а Shift+кликването я намаляваше. Това звучи достатъчно лесно. Но с добавянето на карусели, табове, карти и други нови елементи и функции, всички тези бутони се превърнаха в каша от различни икони с различен дизайн и започнаха да изглеждат по-скоро като йероглифи, отколкото като готин интерфейс. Това не беше проблем за опитните потребители, но изглежда доста плашещо, ако сте нови в PBS.
Освен това се появиха няколко проблема с инспектора. Първоначалната идея беше всичко да бъде просто и достъпно вътре в инспектора. И под всичко имах предвид всичко – от превръщане на текст в заглавия до промяна на цветовете на фона, цветовете на шрифта и каквото още се сетите. В настоящото си състояние обаче инспекторът вече съдържа много опции, които ще ви накарат постоянно да използвате колелцето на мишката, за да скролвате нагоре и надолу. Доста по-различно от инспектора, който първоначално се надявах да създам за потребителите.
И накрая, наскоро представихме мапинг на кратки кодове за любимите ви плъгини. Тази функция изискваше от нас да създадем текстови полета, плъзгачи за числа, полета за отметка и допълнителни нови типове опции, необходими за по-приятното редактиране на кратки кодове. Първоначално това беше добра идея и да, тя улесни работата с кратките кодове за вас. Но отново тази функция се отклони от нашия интерфейс „само бутони“. В ретроспекция беше наистина невъзможно да се използват само бутони за промяна на атрибутите на кратките кодове. Сега, в най-новата версия, се озовахме с два вида контроли: бутоните и полетата за кратки кодове.
Има още няколко причини, които ни накараха да решим, че интерфейсът ни вече не е ефективен (или подходящ за нашите нужди), но горните точки са основните. Едно нещо обаче винаги беше сигурно: знаехме, че трябва да обновим интерфейса.
Дефиниране на това как в идеалния случай трябва да работи един конструктор на страници
Вместо да се втурнем и да променяме нещата веднага, направихме сто крачки назад, за да погледнем цялостното изживяване с конструктора на страници. Искахме да вдъхнем нов живот на интерфейса. Честно казано, не искахме да продължаваме да го преизграждаме година след година. Това е изтощително и определено не носи съществена помощ на общността на WordPress. Този път решихме да правим нещата бавно и внимателно. Проучихме всеки детайл от Page Builder Sandwich и това, което го прави добър конструктор на страници, и накрая оформихме цялото изживяване при редактиране в няколко основни концепции.
Основна концепция №1: Писане директно в съдържанието за редактиране на елементи
Една от основните причини за инсталиране на конструктор на страници е излизането от ограниченията на бекенд текстовия редактор на WordPress. Не че бекенд редакторът не е добър, но при създаването на уеб страници той не показва веднага как ще изглежда страницата ви за посетителите на сайта, нито ви позволява да оформите съдържанието си извън оформление с една колона. Там можете да видите само текста си и някои изображения, но нищо от по-сложните елементи (напр. контактни форми). Можете да добавяте кратки кодове, да, но те няма да се покажат в рендирания си вид*.
* Съществуват плъгини, разработени от други, за справяне с това, като Shortcake UI, но това е отделна тема.
Тук се намесват фронтенд конструкторите на страници. Те извеждат изживяването при редактиране от бекенда и го пренасят във фронтенда, като вие редактирате сайта си по начина, по който посетителите ви реално ще го виждат. Както Пипин би се изразил: Каквото виждате, това получавате (WYSIWYG).
Друго предимство на фронтенд редактора е, че той ви позволява да редактирате текста си директно. Въвеждането на заглавия и параграфи предоставя удобството на използването на обичаен текстов процесор при създаването на уебсайтове. Етикетите на бутоните и табовете също трябва да могат да се променят просто чрез кликване върху тях и писане.
Това е областта, в която повечето други конструктори на страници не се справят добре. Повечето от тях ви принуждават да пишете в текстово поле, за да редактирате всичко. Отново, това не би трябвало да е така при истинските фронтенд конструктори на страници. Директното въвеждане и редактиране на текст е силна страна на Page Builder Sandwich от версия 2 насам и се погрижихме това да остане валидно и във версия 3.
Основна концепция №2: Използване на мишката за бързи корекции
Мишката е мощен инструмент, който често бива пренебрегван в конструкторите на страници. Често конструкторите на страници я използват само за да позволят на хората да плъзгат елементи и да ги пускат на различни места или да кликват върху бутони или полета за въвеждане. Макар че това е добре, има толкова много повече неща, които можете да правите с мишката по отношение на изграждането на страници.
От една страна, има страхотна визуална обратна връзка при използването на мишката като инструмент за редактиране на страницата, особено при регулиране на визуални свойства като отстъпи (margins, paddings) и размери. Сега персонализирането на вашите елементи се превръща в естествено изживяване.
Във версия 3 на PBS ще можете да регулирате редица неща с помощта на мишката. Можете да настройвате външните отстъпи/разстоянията между отделните елементи, вътрешните отстъпи в колоните, както и размерите на изображения, икони и карти. Също така заменихме бутоните за промяна на числови стойности с плъзгачи.
Основна концепция №3: Текстът трябва да се стилизира лесно
Ако се отдръпнете малко от монитора, ще забележите, че по-голямата част от това, което добавяте в уеб страниците си, е текстово съдържание. Да, имаме изображения и икони, които да го придружават – а напоследък сме склонни да добавяме и по-големи изображения в сайтовете си. Но основната част от важното съдържание е изцяло текст: заглавия, списъци с водещи символи, параграфи, цитати и т.н. Заедно с това е и начинът, по който стилизираме текста си, за да отговаря на нашия дизайн. Променяме размерите и цветовете му или го правим получер или курсив. Това се прави, за да бъде съдържанието ни по-четливо, подходящо и привлекателно за съответните читатели.
Тъй като често стилизираме текста, бутоните, които ни позволяват да променяме стиловете, трябва да са много леснодостъпни. Те не трябва да са скрити в изскачащ прозорец, който първо трябва да отворим. Повечето конструктори на страници страдат от този недостатък. За да може потребителският им интерфейс да бъде определен като „изчистен“, дори най-използваните опции биват скривани от погледа.
За да решим това, разгледахме най-често използваните текстови процесори. Забелязахме, че те обикновено имат ред с множество бутони в горната част на екрана, използвани за форматиране на текст, и копирахме същото разположение за версия 3. Вече разполагаме с ред с всички бутони за стилизиране на текст, които винаги присъстват в горната част на екрана ви. Това прави стилизирането наистина бързо и напълно естествено при редактиране на текст.
Основна концепция №4: Разширените опции за стилизиране трябва да бъдат гъвкави, но лесни за разбиране
Най-важното за един конструктор на страници е, че той трябва да позволява на хората да създават зашеметяващи дизайни лесно. Това означава, че трябва да предоставим много различни настройки и опции, без това да налага трудна крива на обучение. Възможността за регулиране на външни и вътрешни отстъпи и стилизирането на текст са страхотни, но само те не са достатъчни. Ще ви трябват много по-сложни опции, за да свършите работата – опции като фонови изображения, шарки, рамки, фиксирани фонове и други. Натрупването на всички тези различни настройки може да бъде малко объркващо, затова опростихме някои от тях и ги организирахме в категории, за да направим нещата по-удобни във версия 3.
Основна концепция №5: Поддръжка на кратки кодове
И накрая, нека не забравяме, че нашият конструктор на страници стъпва върху WordPress. Трябва да приемаме платформата и нейните възможности, а не да ги ограничаваме или да се отклоняваме от тях. Една огромна функционалност, която WordPress предоставя, са кратките кодове. Това не означава, че цялото съдържание трябва да се състои от кратки кодове – това би било хаотично, – а вместо това трябва просто да бъдем съвместими с тях. Много плъгини и теми използват кратки кодове и би било голяма загуба, ако ги пренебрегнем. Всъщност кратките кодове дават на потребителите максимална гъвкавост при създаването на страници.
Преди няколко седмици представихме нашата система за мапинг на кратки кодове и благодарение на нея картографирахме стотици кратки кодове от стотици плъгини. Дадохме приоритет на най-популярните плъгини в директорията с плъгини на WordPress, така че има голяма вероятност да ги срещнете в собствените си сайтове. Това само се затвърди във версия 3 и ще продължим да го подобряваме занапред.
Заключение
Взехме всички тези основни характеристики от по-горе и ги вградихме във версия 3 на Page Builder Sandwich. Това е най-добрият конструктор на страници, който сме създавали за WordPress досега. Той е по-интуитивен и по-естествен за използване, работи по-бързо, по-лесен е за употреба и е по-удобен от всякога.
Ако имате някакви идеи за важна функция за конструктор на страници, споделете ги с нас като коментар по-долу.