Минуло 10 місяців відтоді, як ми представили Page Builder Sandwich громадськості. Зараз у нас близько 6 000 активних встановлень, і для нас це чимале досягнення. Ми також отримали купу відгуків завдяки цьому — як позитивних, так і негативних. Проте всі сходяться на тому, що людям подобається, наскільки легко створювати макети та контент порівняно з іншими конструкторами сторінок на ринку.
Значна частина отриманих нами відгуків стосувалася запитів на нові функції, і за останні кілька місяців ми додали багато з них. Але роблячи це, ми також почали поступово змінювати інтерфейс користувача. І, як наслідок, ми змінювали користувацький досвід… на гірше. Дійшло до того, що нам довелося переосмислити інтерфейс, оскільки він просто перестав працювати плавно, а різні функції перестали узгоджуватися між собою.
Застарілий інтерфейс
У попередніх версіях PBS ми хотіли, щоб усе було у формі кнопок. Чому? Тому що кнопками легко користуватися. Ви просто… натискаєте на них. У старіших версіях інспектора (бічна панель на зображенні вище) натискання кнопки збільшувало значення, а натискання Shift + клік зменшувало його. Звучить досить просто. Але з додаванням каруселей, вкладок, карт та інших нових елементів і функцій усі ці кнопки перетворилися на мішанину різних іконок із різним дизайном і почали скидатися радше на ієрогліфи, ніж на класний інтерфейс. Для досвідчених користувачів це не було проблемою, але виглядає досить лячно, якщо ви новачок у PBS.
Далі з’явилося кілька проблем в інспекторі. Початкова ідея полягала в тому, щоб зробити все простим і доступним всередині інспектора. І під усім я мав на увазі абсолютно все — від перетворення тексту на заголовки до зміни кольорів фону, кольорів шрифту тощо. Однак у своєму поточному стані інспектор тепер містить багато опцій, через які вам доводиться постійно прокручувати коліщатко миші вгору та вниз. Зовсім не схоже на той інспектор, який я колись сподівався створити для користувачів.
Зрештою, нещодавно ми представили мапінг шорткодів для ваших улюблених плагінів. Ця функція вимагала від нас створення текстових полів, повзунків чисел, чекбоксів та додаткових нових типів опцій, необхідних для того, щоб зробити редагування шорткодів приємнішим. Спочатку це була чудова ідея, і так, вона спростила роботу з шорткодами. Але знову ж таки, ця функція відхилилася від нашого інтерфейсу «тільки кнопки». Оглядаючись назад, було дійсно неможливо використовувати лише кнопки для зміни атрибутів шорткодів. Тепер в останній версії ми отримали 2 типи елементів керування: кнопки та поля шорткодів.
Є ще кілька причин, через які ми вирішили, що наш інтерфейс більше не є ефективним (або не підходить для наших потреб), але перераховані вище пункти є основними. Проте одне завжди було певним: ми знали, що маємо оновити інтерфейс.
Визначення того, як в ідеалі має працювати конструктор сторінок
Замість того, щоб кинутися змінювати все одразу, ми зробили сотню кроків назад, аби поглянути на весь процес роботи з конструктором сторінок загалом. Ми хотіли вдихнути нове життя в інтерфейс. Чесно кажучи, ми не хотіли продовжувати перебудовувати його рік за роком. Це виснажливо і точно не приносить значної користі спільноті WordPress. Цього разу ми вирішили діяти повільно й обережно. Ми вивчили кожен куточок Page Builder Sandwich і те, що робить його хорошим конструктором сторінок, та зрештою сформулювали весь досвід редагування у кількох ключових концепціях.
Ключова концепція №1: пряме введення тексту в контент для його редагування
Одна з головних причин встановлення конструктора сторінок — вийти за межі обмежень бекенд-редактора WordPress. Справа не в тому, що бекенд-редактор поганий, але під час створення вебсторінок він не показує відразу, як саме ваша сторінка виглядатиме для відвідувачів сайту, а також не дозволяє розміщувати контент за межами одноколонкового макета. Там можна побачити лише текст і деякі зображення, але нічого складнішого (наприклад, контактних форм). Ви можете додавати шорткоди, так, але вони не відображатимуться у своєму відрендереному вигляді*.
* Для вирішення цієї проблеми інші розробники створюють плагіни, такі як Shortcake UI, але це вже інша річ.
Ось де стають у пригоді фронтенд-конструктори сторінок. Вони переносять процес редагування з бекенду на фронтенд, завдяки чому ви редагуєте свій сайт саме так, як його справді бачитимуть ваші відвідувачі. Як висловився б Піппін: що бачиш, те й отримуєш (WYSIWYG).
Ще одна перевага фронтенд-редактора полягає в тому, що він дозволяє редагувати текст безпосередньо. Введення заголовків і абзаців забезпечує таку ж простоту створення вебсайтів, як і використання звичайного текстового процесора. Кнопки та ярлики вкладок також мають змінюватися простим натисканням на них і введенням тексту.
Це та сфера, де більшість інших конструкторів сторінок не справляються належним чином. Більшість із них змушують вас друкувати всередині текстового поля, щоб відредагувати будь-що. Знову ж таки, у справжніх фронтенд-конструкторах сторінок такого бути не повинно. Безпосереднє введення та редагування тексту було сильною стороною Page Builder Sandwich починаючи з версії 2, і ми подбали про те, щоб це збереглося й у версії 3.
Ключова концепція №2: використання миші для швидких налаштувань
Миша — це потужний інструмент, яким часто нехтують у конструкторах сторінок. Найчастіше конструктори сторінок використовують її лише для того, щоб дозволити користувачам перетягувати елементи в різні місця або клацати по кнопках чи полях введення. Хоча це цілком нормально, за допомогою миші можна зробити набагато більше для створення сторінок.
По-перше, використання миші як інструмента редагування сторінки дає чудовий візуальний відгук, особливо під час налаштування візуальних властивостей, таких як зовнішні відступи (margins), внутрішні відступи (paddings) і розміри. Тепер точне налаштування елементів стає природним процесом.
У версії PBS 3 ви зможете налаштовувати цілу низку параметрів за допомогою миші. Ви можете коригувати відступи/проміжки між окремими елементами, внутрішні відступи у ваших колонках, а також розміри зображень, іконок та карт. Ми також замінили повзунками кнопки, які дозволяли змінювати числові значення.
Ключова концепція №3: стилізувати текст має бути легко
Якщо відсторонитися на крок від монітора, ви помітите, що більшість того, що ви додаєте на свої вебсторінки, — це текстовий вміст. Так, ми маємо там зображення та іконки для його супроводу, а останнім часом ми схильні додавати на наші сайти більші зображення. Але більшість важливого вмісту — це суцільний текст: заголовки, марковані списки, абзаци, цитати тощо. Поряд із цим важливим є те, як ми стилізуємо наш текст відповідно до дизайну. Ми змінюємо розміри та кольори або робимо його жирним чи курсивним. Це робиться для того, щоб зробити наш контент більш читабельним, релевантним і привабливим для наших читачів.
Оскільки ми часто стилізуємо текст, кнопки, що дозволяють змінювати стилі, мають бути максимально доступними. Вони не повинні бути заховані у спливаючому вікні, яке спочатку потрібно відкрити. Більшість конструкторів сторінок страждають на цю недугу. Для того щоб їхній інтерфейс називали «неперевантаженим», навіть найуживаніші опції приховують з очей.
Щоб вирішити це, ми звернули увагу на найпопулярніші текстові процесори. Ми помітили, що зазвичай вони мають рядок із купою кнопок у верхній частині екрана для форматування тексту, і скопіювали такий самий макет для версії 3. Тепер у нас є рядок з усіма кнопками стилізації тексту, який завжди присутній у верхній частині вашого екрана. Це робить стилізацію надзвичайно швидкою та звичною справою при редагуванні тексту.
Ключова концепція №4: розширені параметри стилізації мають бути гнучкими, але простими для розуміння
Головна суть конструктора сторінок полягає в тому, що він повинен дозволяти людям створювати приголомшливий дизайн легко. Це означає, що ми повинні надати безліч різноманітних налаштувань та опцій без ускладнення процесу навчання. Можливість налаштовувати відступи та стилізувати текст — це чудово, але цього недостатньо. Вам знадобляться набагато складніші опції для досягнення результату: такі як фонові зображення, візерунки, рамки, фіксований фон тощо. Нагромадження всіх цих різних параметрів може трохи приголомшити, тому ми спростили деякі з них і впорядкували їх за категоріями, щоб зробити роботу у версії 3 зручнішою.
Ключова концепція №5: підтримка шорткодів
Зрештою, не забуваймо, що наш конструктор сторінок базується на платформі WordPress. Ми повинні приймати платформу та її можливості, а не обмежувати їх чи відхилятися від них. Однією з найважливіших функцій, які надає WordPress, є шорткоди. Це не означає, що весь контент має складатися з шорткодів — це було б безладно — але натомість ми просто маємо бути сумісними з ними. Багато плагінів і тем використовують шорткоди, і було б великою втратою ігнорувати їх усі. Насправді шорткоди дають користувачам максимальну гнучкість при створенні сторінок.
Кілька тижнів тому ми представили нашу систему мапінгу шорткодів, і завдяки їй ми зіставили сотні шорткодів із сотень плагінів. Ми надали пріоритет найпопулярнішим плагінам із каталогу плагінів WordPress, тому є велика ймовірність, що ви зустрінете їх на власних сайтах. У версії 3 цей напрямок лише зміцнився, і ми продовжуватимемо вдосконалювати його в майбутньому.
Висновки
Ми взяли всі перелічені вище ключові властивості та втілили їх у Page Builder Sandwich версії 3. Це найкращий конструктор сторінок, який ми коли-небудь створювали для WordPress. Він інтуїтивніший та природніший у використанні, працює швидше, він простіший у користуванні та дружніший, ніж будь-коли.
Якщо у вас є якісь думки щодо важливих функцій конструктора сторінок, поділіться ними в коментарях нижче.