Редизайн Readymag

Команда паблишинг-сервиса о поставленных задачах, результате и о том, почему разработка обошлась вдвое дороже, чем планировалось.

Readymag — это веб-инструмент, который превращает пользовательский дизайн в код и позволяет быстро создавать интерактивные веб-проекты без участия разработчиков. Он состоит из трех частей: редактора, в котором пользователь отрисовывает свой проект, вьюера, где можно предварительно посмотреть, как проект будет выглядеть на разных устройствах, и паблишинг-платформы, на которой можно в один клик опубликовать проект в сети и управлять его настройками.

В 2011 году, когда разрабатывались первые версии Readymag, мы ставили задачу создать простой интуитивный инструмент, чей интерфейс не вызывал бы ассоциаций с приборной панелью самолета или Photoshop. Ещё мы рассчитывали, что ядром нашей аудитории станут издатели независимых онлайн-журналов. Но вышло иначе.

В 2013 году мы официально запустили Readymаg и обнаружили, что пользователи активно создают в нём не только журналы, но и презентации, лонгриды и даже полноценные сайты. Это заставило пересмотреть бизнес-модель на ходу — мы поняли, что нужно расширять функциональность пользовательских проектов.

За прошедшие пять лет мы добавили возможность анимировать элементы проекта, работать сразу целой командой, вставлять кастомный код и включать формы для сбора данных. Также мы интегрировали иконки The Noun Project, фотографии бесплатного стока Unsplash и сотни шрифтов от известных мировых производителей и дистрибьюторов — Webfonts, Typekit, Type.Today.

Расчёт оказался верным — наша пользовательская база каждый год увеличивается вдвое, а проекты, созданные на Readymag, год от года становятся всё более интересными и функциональными.

Для примера — альбом иллюстратора Алана Брауна, сделанный в 2014 году, номер австралийского журнала Gritty Pretty за 2015 год, арт-проект Moving Flags, сделанный в 2016 году, а также магазин значков Pinpinpin и гид по Мюнхену, появившиеся в 2017 году.

С момента запуска мы в фоновом режиме собираем обратную связь по продукту, но этой информации было недостаточно для того, чтобы сегментировать аудиторию, исходя из задач, которые пользователи решают с помощью Readymag.

Летом 2016 года мы запустили исследование, которое заняло около шести месяцев: генеральный директор компании Диана Новичихина общалась с самыми активными и стабильными пользователями. В основном это международные дизайн-студии и рекламные агентства, где запуск клиентских сайтов, лендингов и цифровых спецпроектов поставлен на поток. Также мы сделали простое всплывающее окно с опросом прямо внутри инструмента.

О том, что создавать сложные нагруженные проекты с сотнями разнообразных элементов в Readymag неудобно, говорили многие пользователи. Например, мы получили отзыв от коммуникационного дизайнера Евгения Брянцева из «Яндекса»: «Если в проекте много объектов, в панели виджетов трудно найти нужный. Также на этой панели нельзя создавать папки».

Пока мы расширяли функциональность Readymag, его интерфейс оставался неизменным, то есть ориентированным на создание несложных веб-страниц и онлайн-журналов. После исследования нам стало ясно, что нужен редизайн. Его цель мы сформулировали так: сделать проще и удобнее работу над сложными проектами, которые включают в себя большое количество элементов, при этом не утяжелять визуально интерфейс редактора проектов.

Все элементы, которые пользователь может добавить в свой проект, — текст, фото, видео, фоновые картинки, формы сбора данных, кнопки, «Google Карты» и другие — в Readymag называются виджетами. После того, как пользователь добавляет виджет, соответствующая иконка отправляется в виджет-бар, который расположен в нижней части экрана редактора проектов.

Изначально иконки в виджет-баре выстраивались слева направо в том порядке, в котором пользователь добавлял виджеты. Работая над сложным проектом, дизайнеру зачастую приходится производить манипуляции с несколькими виджетами сразу — собирать их в группы, делать их невидимыми, закреплять на странице и менять местами. Функциональность существующего виджет-бара этим требованиям не отвечала.

Мы переделали виджет-бар так, чтобы в нём ясно читалась иерархия расположения виджетов на странице, а производить манипуляции с ними было максимально просто. Попутно мы заново отрисовали несколько старых панелей в редакторе.

Обновленный виджет-бар представляет собой вертикальную всплывающую панель, где виджеты выстраиваются как слои на странице (а не в порядке добавления, как это было раньше). Также в виджет-баре появилась возможность визуально работать с группами, добавляя и убирая виджеты.

Группам виджетов и одиночным виджетам можно давать произвольные названия. Можно фиксировать положение виджетов на странице и делать их невидимыми, а ещё, кликнув на иконку виджета в виджет-баре, можно быстро доскролить до положения виджета на странице — это удобно для длинных страниц.

Новый виджет-бар в действии

Можно заметить, что это панель слоёв, которая в том или ином виде встречается в большинстве графических редакторов. Так и есть. Но в нашем случае это преимущество, а не недостаток. Принципы работы панели слоев хорошо знакомы большинству дизайнеров и не требуют дополнительных объяснений.

Мы не хотели создавать принципиально новую панель, а лишь стремились сделать её удобнее и проще в использовании, чем в существующих графических редакторах.

Процесс перетаскивания виджетов

В новой панели виджетов мы также визуально выделили особое положение фиксированных виджетов: они располагаются либо в самом верху, либо в самом низу панели. Таким образом, они никогда не смешиваются с простыми виджетами иерархически и визуально.

Процесс перетаскивания фиксированных виджетов

Попутно мы:

Заново отрисовали иконки всех виджетов, чтобы они хорошо смотрелись в уменьшенном виде (как это происходит при группировке виджетов).
Перенесли все настройки виджетов к правому краю окна браузера — это даёт пользователю больше свободного рабочего пространства.

Обновили внешний вид и функциональность панели сеток и направляющих.

Обновили фоновую панель и заново отрисовали панель подбора цветов. Изначально мы планировали добавить много новых характеристик в панель бэкграунда. В частности, хотели дать пользователям возможность ставить на фон не только статичную картинку, но и слайдшоу и цветовой градиент. Казалось, это так просто — нужно всего лишь добавить пару иконок на панель. Но в процессе мы поняли, что отстаем от графика и какие-то задумки придётся отложить до следующего релиза. Утверждённые макеты перерисовывали на ходу.

Объединили панель вьюпорта и высоты страницы в одну и добавили небольшую, но значимую деталь — иконку, сигнализирующую о том, что у страницы включен мобильный вьюпорт, когда пользователь работает с десктопным вьюпортом.

Из внутренней аналитики инструмента мы узнали, что наши пользователи редко используют опцию планшетного вьюпорта. В итоге мы решили убрать её совсем, поскольку считаем, что для просмотра проектов на планшете вполне подходит стандартный десктопный дизайн. В старых проектах, которые были созданы до редизайна, планшетный вьюпорт останется (перейти в этот режим и редактировать в нем проекты можно), но в новых есть только мобильный и десктопный вьюпорты.

Редизайн обошелся Readymag вдвое дороже, чем мы рассчитывали. Приступая к работе мы планировали, что управимся за два месяца, но всё растянулось почти на четыре. Виной тому было несколько факторов:

Нехватка рабочих рук. Сейчас в нашей команде четыре разработчика, и мы всё острее чувствуем необходимость в расширении штата. В Readymag открыта вакансия фронтенд-разработчика, но найти достойных кандидатов очень сложно, практически все отваливаются на этапе тестового задания.
Незадолго до редизайна мы перешли на реактивную разработку, внедрив Vue.js в существующий Backbone.js-проект. Из-за этого многие базовые компоненты пришлось прорабатывать с нуля.
Обилие сценариев перемещения виджетов: в панели виджет-бара можно перетаскивать вверх и вниз как один, так и несколько виджетов сразу, также есть возможность перемещать или убирать их из групп.
Readymag — не нативное приложение, а веб-инструмент. Поэтому нужно было обеспечить его корректную работу во всех существующих браузерах.

Новый интерфейс радикально упрощает манипуляции с объектами на странице и делает рабочий процесс более наглядным. Панели настроек виджетов, ранее разбросанные по разным краям экрана, заставляли дизайнеров активно двигать мышью. В новом интерфейсе все близкие по контексту настройки собраны в одном месте.

Рутинные действия стали доступнее: появилось несколько новых шорткатов. Количество кликов, необходимых для некоторых операций, — например, для того, чтобы спрятать виджет, — уменьшилось вдвое.

В целом пользователи встретили изменения позитивно. В наших Facebook- и Twitter-аккаунтах дизайнеры писали о своих эмоциях и задавали много вопросов.

При переходе на новое программное обеспечение мы использовали современные возможности браузеров и обновили технологический стек, однако из-за этого невольно сломали работу редактора Readymag в старых версиях Internet Explorer и Safari.

Сразу после выкладки посыпались сообщения от пользователей об этой ошибке (и нескольких других мелких). После релиза разработчики оставались в офисе до ночи, чтобы в течение суток починить все возникшие неполадки.

#дизайн