Система для управления контентом
Задача дизайнера
Цель для бизнеса
Моя задача как дизайнера — прооптимизировать и улучшить текущий интерфейс, который будет помогать верстальщикам быстро и безошибочно управлять контентом: создавать и редактировать блоки, оформлять кампании и публиковать материалы в разных каналах.
Через улучшение структуры, визуальной иерархии и сценариев повлиять на ключевые метрики продукта:
— сократить время публикации контента;
— снизить количество ошибок при верстке;
— повысить удовлетворённость работой с системой.
Через улучшение структуры, визуальной иерархии и сценариев повлиять на ключевые метрики продукта:
— сократить время публикации контента;
— снизить количество ошибок при верстке;
— повысить удовлетворённость работой с системой.
Создать инструмент, который позволит командам запускать контент быстрее, без вовлечения разработчиков. Это необходимо, чтобы сократить время выхода акций, снизить затраты на сопровождение и повысить гибкость в работе с разными каналами и аудиториями.
Исследование
После приоритизации гипотез и группировки болей были сформированы конкретные задачи, которые ушли в реализацию.
Фокус был на точечных улучшениях, влияющих на повседневные сценарии работы: фильтрацию, поиск, редактирование и навигацию.
Фокус был на точечных улучшениях, влияющих на повседневные сценарии работы: фильтрацию, поиск, редактирование и навигацию.
Исследование дало много ценных инсайтов, но важно было не просто зафиксировать боли, а понять, как превратить их в конкретные улучшения.
Так появились ключевые продуктовые гипотезы, которые легли в основу интерфейсных решений.
Так появились ключевые продуктовые гипотезы, которые легли в основу интерфейсных решений.
- Если мы добавим гибкий поиск (по URL, ID, слоту) и расширенные фильтры и превью, то пользователи будут быстрее находить нужный контент;
- Если дать возможность настраивать таблицы под себя (колонки, ширина, порядок) и сохранять настройки, то пользователи перестанут тратить время на повторную настройку и смогут работать быстрее;
- Если внедрить дерево контента, группировку по типу/проекту и более понятную структуру модулей, то пользователи смогут легче ориентироваться и быстрее выполнять задачи — особенно новички;
- Если добавить привычные удобства (drag&drop, открытие в новой вкладке, массовые действия), то команды будут выполнять рутинные задачи быстрее и с меньшим раздражением.
Перед тем как перейти к демонстрации и реализации, я заранее подумала о потенциальных трудностях: с какими барьерами могут столкнуться пользователи и команда.
Это помогло продумать решения заранее — мягко, гибко и без радикальных изменений привычных паттернов. Такой подход позволил учесть риски ещё на этапе проектирования.
Это помогло продумать решения заранее — мягко, гибко и без радикальных изменений привычных паттернов. Такой подход позволил учесть риски ещё на этапе проектирования.
Для понимания реальных проблем текущего интерфейса и болей пользователей был проведен опрос среди верстальщиков, глубинное интервью с руководителем, а также собраны пожелания от команды.
Цель исследования — не обсуждать пиксели и кнопки, а разобраться, как устроена ежедневная работа, где тратится время и какие повторяющиеся паттерны мешают эффективно использовать систему.
Такой подход позволил выявить не только локальные проблемы отдельных модулей, но и системные точки роста — общие сценарии, которые замедляют команду вне зависимости от конкретного функционала, модуля или раздела.
На основе обратной связи я определила как сильные стороны текущего решения, так и много раз повторяющиеся сложности, с которыми сталкиваются сотрудники ежедневно.
Я кластеризовала выявленные проблемы по темам и сценариям, чтобы увидеть системные закономерности. На основе этой структуры были сформулированы решения, направленные не только на устранение узких мест, но и на повышение удобства, предсказуемости интерфейса и скорости выполнения ключевых задач.
Цель исследования — не обсуждать пиксели и кнопки, а разобраться, как устроена ежедневная работа, где тратится время и какие повторяющиеся паттерны мешают эффективно использовать систему.
Такой подход позволил выявить не только локальные проблемы отдельных модулей, но и системные точки роста — общие сценарии, которые замедляют команду вне зависимости от конкретного функционала, модуля или раздела.
На основе обратной связи я определила как сильные стороны текущего решения, так и много раз повторяющиеся сложности, с которыми сталкиваются сотрудники ежедневно.
Я кластеризовала выявленные проблемы по темам и сценариям, чтобы увидеть системные закономерности. На основе этой структуры были сформулированы решения, направленные не только на устранение узких мест, но и на повышение удобства, предсказуемости интерфейса и скорости выполнения ключевых задач.
Некоторые решения
Чтобы сделать интерфейс более гибким и адаптивным под реальные задачи, мы реализовали кастомизацию таблиц.
Теперь каждый верстальщик может сам настроить отображение данных под себя — выбрать нужные столбцы, задать их порядок и ширину. Это особенно важно в условиях, когда пользователи работают с большим количеством информации: у разных ролей и задач — разные приоритеты.
Кто-то ориентируется на даты, кто-то — на статусы, кто-то — на названия или слоты. Возможность скрыть лишнее и фокусироваться на главном повышает скорость и удобство работы, снижает визуальную перегрузку и когнитивную нагрузку.
Мы сохранили возможность вернуться к виду по умолчанию — чтобы интерфейс оставался предсказуемым и к нему можно было вернуться при случайных изменениях.
Теперь каждый верстальщик может сам настроить отображение данных под себя — выбрать нужные столбцы, задать их порядок и ширину. Это особенно важно в условиях, когда пользователи работают с большим количеством информации: у разных ролей и задач — разные приоритеты.
Кто-то ориентируется на даты, кто-то — на статусы, кто-то — на названия или слоты. Возможность скрыть лишнее и фокусироваться на главном повышает скорость и удобство работы, снижает визуальную перегрузку и когнитивную нагрузку.
Мы сохранили возможность вернуться к виду по умолчанию — чтобы интерфейс оставался предсказуемым и к нему можно было вернуться при случайных изменениях.
Заключение
В результате внедрения новых интерфейсных решений мы не просто улучшили внешний вид системы, но заметно упростили работу пользователей.
Эти фичи помогли упростить рабочие процессы верстальщиков и контент-менеджеров, сделать интерфейс предсказуемым, а действия — более осознанными:
Эти фичи помогли упростить рабочие процессы верстальщиков и контент-менеджеров, сделать интерфейс предсказуемым, а действия — более осознанными:
- −22% — сокращение времени на типовые задачи (поиск, фильтрация, редактирование);
- −30% — меньше обращений к разработке по интерфейсным вопросам;
- — рост удовлетворённости системой.
personalization
WEB
ux/ui
Content Management System
administration
Разделение процесса заполнения информации на четкие и логичные этапы — ключ к созданию понятного и ненагружающего интерфейса.
Когда пользователю нужно настроить контент, важно выстраивать флоу таким образом, чтобы действия шли последовательно. Такой подход позволяет не перегружать экран множеством опций сразу, удерживать фокус пользователя и снижать количество ошибок.
Также важную роль играет ясность формулировок: поля ввода снабжены однозначными и понятными названиями, чтобы пользователь сразу понимал, что именно от него требуется.
Когда пользователю нужно настроить контент, важно выстраивать флоу таким образом, чтобы действия шли последовательно. Такой подход позволяет не перегружать экран множеством опций сразу, удерживать фокус пользователя и снижать количество ошибок.
Также важную роль играет ясность формулировок: поля ввода снабжены однозначными и понятными названиями, чтобы пользователь сразу понимал, что именно от него требуется.
В конструкторах контента с десятками однотипных блоков пользователь легко может запутаться. Таймер, список, баннер, форма — все выглядит похоже, особенно если блоки пока не настроены.
Чтобы упростить навигацию и снизить когнитивную нагрузку, мы внедрили сразу два решения:
Скелетоны
Скелетоны — это временные каркасные отображения, которые показывают визуальную структуру блока до того, как в него добавят контент. Пользователь сразу понимает, что это за блок и что в нем будет: иконки, текст, изображение, кнопки. Это ускоряет распознавание, особенно при вертикальной прокрутке и работе с длинными страницами.
Избранные блоки
Для еще более быстрой работы пользователь может добавить нужные блоки в «Избранное». Часто используемые блоки теперь всегда под рукой — не нужно листать весь список каждый раз.
Эти улучшения особенно важны для верстальщиков, которые ежедневно собирают страницы в сжатые сроки.
Результат — меньше ошибок, выше скорость, и больше уверенности при сборке контента.
Чтобы упростить навигацию и снизить когнитивную нагрузку, мы внедрили сразу два решения:
Скелетоны
Скелетоны — это временные каркасные отображения, которые показывают визуальную структуру блока до того, как в него добавят контент. Пользователь сразу понимает, что это за блок и что в нем будет: иконки, текст, изображение, кнопки. Это ускоряет распознавание, особенно при вертикальной прокрутке и работе с длинными страницами.
Избранные блоки
Для еще более быстрой работы пользователь может добавить нужные блоки в «Избранное». Часто используемые блоки теперь всегда под рукой — не нужно листать весь список каждый раз.
Эти улучшения особенно важны для верстальщиков, которые ежедневно собирают страницы в сжатые сроки.
Результат — меньше ошибок, выше скорость, и больше уверенности при сборке контента.
Чтобы упростить работу с большим объемом данных и учесть разные сценарии использования, мы внедрили гибкую настройку фильтров в модулях.
Теперь пользователь может:
Это ускоряет работу, снижает количество лишних кликов и делает взаимодействие с системой более предсказуемым и прозрачным.
Теперь пользователь может:
- сам выбирать нужные фильтры из общего списка;
- задать логику фильтрации — «и» / «или», в зависимости от того, нужно ли найти точные соответствия или расширить выборку;
- выбрать нужный оператор для каждого фильтра (например, содержит, равно, не содержит, задано и т. д.);
- сформировать несколько условий подряд и управлять ими прямо в интерфейсе, без необходимости обращаться к разработке или использовать сторонние инструменты.
Это ускоряет работу, снижает количество лишних кликов и делает взаимодействие с системой более предсказуемым и прозрачным.
