Прошло 10 месяцев с тех пор, как мы представили Page Builder Sandwich публике. Сейчас у нас около 6 000 активных установок, и для нас это немалое достижение. Мы также получили массу отзывов — как хороших, так и плохих. Однако общее мнение таково: пользователям нравится, насколько легко создавать макеты и контент по сравнению с другими конструкторами страниц.
Большая часть полученных отзывов представляла собой запросы на добавление новых функций, и за последние несколько месяцев мы добавили многие из них. Но по мере того как мы это делали, мы также постепенно начали менять пользовательский интерфейс. И, как следствие, менялся и пользовательский опыт… не в лучшую сторону. Дошло до того, что нам потребовалось переосмыслить интерфейс, поскольку он попросту перестал работать плавно, да и различные функции уже не сочетались друг с другом гармонично.
Устаревший интерфейс
В предыдущих версиях PBS мы хотели, чтобы всё было в виде кнопок. Почему? Потому что кнопками легко пользоваться. Вы просто… нажимаете на них. В старых версиях инспектора (боковая панель на изображении выше) клик по кнопке увеличивал значение, а клик с зажатой клавишей Shift уменьшал его. Звучит достаточно просто. Но с добавлением каруселей, вкладок, карт и других новых элементов и возможностей все эти кнопки превратились в мешанину из разнородных значков с разным дизайном и стали больше напоминать иероглифы, чем классный интерфейс. Для опытных пользователей это не составляло труда, но выглядело весьма устрашающе, если вы только начинали работать с PBS.
Затем возникло несколько проблем с инспектором. Первоначальная идея заключалась в том, чтобы сделать всё простым и доступным внутри инспектора. И под всем имелось в виду абсолютно всё: от превращения текста в заголовки до изменения цветов фона, шрифта и так далее. Однако в своем текущем состоянии инспектор содержит столько опций, что вам приходится постоянно крутить колесико мыши вверх и вниз. Это совсем не похоже на тот инспектор, который я изначально надеялся создать для пользователей.
Наконец, недавно мы представили сопоставление шорткодов для ваших любимых плагинов. Для этой функции нам потребовалось создать текстовые поля, ползунки для чисел, флажки и дополнительные новые типы опций, необходимые для более удобного редактирования шорткодов. Поначалу это была хорошая идея, и да, работать с шорткодами стало проще. Но опять же, эта функция отклонялась от нашей концепции интерфейса «только кнопки». Оглядываясь назад, понимаешь, что использовать исключительно кнопки для изменения атрибутов шорткодов было действительно невозможно. Теперь в последней версии у нас появилось 2 типа элементов управления: кнопки и поля шорткодов.
Было еще несколько причин, заставивших нас решить, что наш интерфейс больше не эффективен (или не соответствует нашим потребностям), но описанные выше — основные. Одно было ясно наверняка: мы знали, что интерфейс необходимо обновить.
Определяем, как в идеале должен работать конструктор страниц
Вместо того чтобы сразу бросаться переделывать всё подряд, мы сделали сотню шагов назад, чтобы взглянуть на процесс работы с конструктором страниц в целом. Мы хотели вдохнуть новую жизнь в интерфейс. По правде говоря, нам не хотелось перестраивать его год за годом. Это утомительно и точно не приносит ощутимой пользы сообществу WordPress. На этот раз мы решили действовать медленно и осторожно. Мы изучили каждый уголок Page Builder Sandwich и то, что делает его хорошим конструктором страниц, и в итоге сформировали весь процесс редактирования вокруг нескольких ключевых концепций.
Ключевая концепция №1: прямой ввод текста в контент для редактирования
Одна из главных причин установки конструктора страниц — избавиться от ограничений стандартного редактора в панели управления WordPress. Не то чтобы бэкенд-редактор был плох, но при создании веб-страниц он не показывает сразу, как страница будет выглядеть для посетителей сайта, и не позволяет верстать контент за рамками одноколоночного макета. Там вы видите только текст и некоторые изображения, но ничего из более сложных элементов (например, контактных форм). Да, вы можете добавлять шорткоды, но они не будут отображаться в готовом виде*.
* Для решения этой проблемы сторонние разработчики создают плагины, такие как Shortcake UI, но речь сейчас не об этом.
Именно здесь на помощь приходят визуальные конструкторы страниц (front-end). Они переносят процесс редактирования из панели управления на сам сайт, и вы редактируете сайт именно так, как его будут видеть посетители. Как выразился бы Пиппин: что видишь, то и получаешь (WYSIWYG).
Еще одно преимущество визуального редактора заключается в том, что он позволяет редактировать текст напрямую. Ввод заголовков и абзацев дарит ощущение работы в привычном текстовом процессоре при создании сайта. Текст кнопок и названия вкладок также должны легко меняться простым кликом по ним и набором текста.
Это именно та область, с которой большинство других конструкторов страниц справляются не лучшим образом. Большинство из них заставляет вас вводить текст в отдельное поле для редактирования любого элемента. Опять же, в настоящих фронтенд-конструкторах так быть не должно. Прямой ввод и редактирование текста были сильной стороной Page Builder Sandwich начиная со второй версии, и мы позаботились о том, чтобы сохранить это и в версии 3.
Ключевая концепция №2: использование мыши для быстрой настройки
Мышь — мощный инструмент, о возможностях которого в конструкторах страниц часто забывают. Зачастую конструкторы страниц используют ее лишь для перетаскивания элементов и сброса их в разные места либо для кликов по кнопкам и полям ввода. Хотя это нормально, с помощью мыши в создании страниц можно делать гораздо больше.
Во-первых, использование мыши как инструмента редактирования страницы обеспечивает великолепный визуальный отклик, особенно при настройке таких визуальных свойств, как внешние отступы (margin), внутренние отступы (padding) и размеры. Теперь настройка элементов становится интуитивной и естественной.
В PBS версии 3 вы сможете настраивать множество параметров с помощью мыши. Вы можете изменять отступы/промежутки между отдельными элементами, внутренние отступы внутри колонок, а также размеры изображений, иконок и карт. Мы также заменили кнопки изменения числовых значений на ползунки.
Ключевая концепция №3: текст должно быть легко стилизовать
Если вы отойдете на шаг от монитора, вы заметите, что большая часть того, что вы добавляете на веб-страницы, — это текстовый контент. Да, к нему прилагаются изображения и иконки — и в последнее время мы склонны размещать на сайтах более крупные изображения. Но основная часть важного содержимого — это текст: заголовки, маркированные списки, абзацы, цитаты и т. д. Наряду с этим важно и то, как мы стилизуем текст в соответствии с нашим дизайном. Мы меняем размер и цвет, делаем шрифт жирным или курсивным. Всё это нужно для того, чтобы наш контент был более читабельным, актуальным и привлекательным для читателей.
Поскольку мы часто оформляем текст, кнопки для изменения стилей должны быть легкодоступными. Они не должны быть спрятаны во всплывающем окне, которое сначала нужно открыть. Большинство конструкторов страниц страдают этой болезнью. Чтобы их пользовательский интерфейс можно было назвать «неперегруженным», даже самые часто используемые опции скрывают от глаз.
Чтобы решить эту проблему, мы обратили внимание на самые распространенные текстовые процессоры. Мы заметили, что в них вверху экрана обычно расположена строка с множеством кнопок для форматирования текста, и скопировали этот же макет для версии 3. Теперь панель со всеми кнопками стилизации текста постоянно находится в верхней части экрана. Это делает форматирование по-настоящему быстрым и доводит работу с текстом практически до автоматизма.
Ключевая концепция №4: расширенные параметры стилизации должны быть гибкими, но простыми для понимания
Суть конструктора страниц заключается в том, чтобы позволять людям легко создавать потрясающий дизайн. Это означает, что мы должны предоставить множество различных настроек и параметров, не усложняя при этом процесс обучения. Возможность настраивать отступы и стилизовать текст — это здорово, но этого недостаточно. Для выполнения задачи вам понадобятся гораздо более тонкие настройки: фоновые изображения, паттерны, границы, фиксированные фоны и многое другое. Нагромождение всех этих различных параметров может показаться ошеломляющим, поэтому мы упростили некоторые из них и распределили по категориям, чтобы сделать работу в версии 3 более дружелюбной.
Ключевая концепция №5: поддержка шорткодов
И наконец, не будем забывать, что наш конструктор страниц работает на базе WordPress. Мы должны принимать платформу и ее возможности, а не ограничивать их или уклоняться от них. Одна из важнейших функций WordPress — это шорткоды. Это не значит, что весь контент должен состоять из шорткодов — это создало бы беспорядок, — но мы просто обязаны быть совместимыми с ними. Множество плагинов и тем используют шорткоды, и было бы огромным упущением игнорировать их. На самом деле шорткоды дают пользователям максимальную гибкость при создании страниц.
Несколько недель назад мы представили систему сопоставления шорткодов, благодаря которой сопоставили сотни шорткодов из сотен плагинов. Мы расставили приоритеты в пользу наиболее популярных плагинов из каталога плагинов WordPress, так что велика вероятность, что вы встретите их на своих сайтах. В версии 3 это направление только укрепилось, и в дальнейшем мы продолжим его развивать.
Заключение
Мы объединили все эти ключевые свойства в Page Builder Sandwich версии 3. Это лучший конструктор страниц, который мы когда-либо создавали для WordPress. Он стал более интуитивным и естественным в работе, работает быстрее, проще в использовании и дружелюбнее, чем когда-либо.
Если у вас есть мысли о том, какая функция является обязательной для конструктора страниц, поделитесь ими в комментариях ниже.