Как менялся интерфейс enPop и зачем это было нужно
В разработке каждого продукта есть этап, когда требуется внести кардинальные изменения в его структуру и визуальную часть. Всё это скрывается за страшным словом «редизайн».
Редизайн обычно занимает много времени, чтобы пойти на этот шаг, нужны весомые причины. У нас таких причин было несколько:
1. Добавили новый функционал.
2. Поняли, что у сервиса сложная навигация и неочевидные переходы между страницами в рамках одного пользовательского сценария.
3. Обнаружили расхождения в стилях и компонентах интерфейса.
Были еще проблемы, но все они так или иначе были связаны с этими пунктами.
С чего все начиналось
Менять дизайн всего сервиса разом, не опираясь на какие-то основные его части, если не безумие, то точно очень сложная и долгая задача. Поэтому, прежде чем приступить к редизайну, мы провели аудит текущего интерфейса, зафиксировали все моменты, которые хотели исправить, и начали думать, как будем это реализовывать.
У нас получилось чёткое разделение текущего интерфейса на отдельные составные компоненты, над которыми предстояло работать:
1. Изменение архитектуры сервиса.
2. Изменение CTA для создания нового окна при карточном и строчном отображении.
3. Настройка пошаговой навигации при создании окна.
4. Разделение контентной части и её настроек при создании окна.
5. Добавление более гибкого функционала создания сегментов.
6. Добавление новых графиков в статистику*.
*Прим. редакции: Про сегменты и графики подробно расскажем в следующих статьях, этого стоит ждать 😉
Изменение архитектуры сервиса
Как только пользователь заходит в сервис, он смотрит на навигацию, чтобы понять, куда ему двигаться дальше. Основная трудность была в том, что к enPop у нас добавился дополнительный функционал, который выходит за рамки одной платформы. В будущем мы планируем сделать мультисервисную платформу с общим интерфейсом и логикой взаимодействия, поэтому мы уже сейчас должны были предусмотреть гибкость интерфейса и заложить место под будущие сервисы. Так что первым делом мы взялись переделывать меню интерфейса.

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

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

Закончив с навигацией, мы приступили к изменению остального интерфейса сервиса. Основной функцией enPop является создание новых попапов и их редактирование. Поэтому нужно было полностью переработать эту часть интерфейса и избавиться от спорных моментов.
Изменение CTA для создания нового окна
Создание любой сущности начинается с кнопки «Создать …». Так вот у нас её не было 😐. Вместо неё был неочевидный круг с плюсом внутри, который располагался где-то посередине интерфейса.

Решение было простым: мы заменили этот непонятный элемент на всем привычную кнопку.

А в списке с попапами добавили пустую карточку, нажав на которую, можно перейти к созданию окна.

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

Интерфейс должен последовательно вести пользователя от действия к действию, а не вываливать сразу всю информацию. Это особенно важно, когда пользователь первый раз работает в платформе и ещё не так ловко ориентируется в ней. Поэтому нужно заложить в интерфейсе понятную последовательность действий.
Лучше всего с этим справился функциональный элемент «Stepper». С помощью него мы смогли разделить настройки на отдельные шаги и задать каждой приоритет. Так мы сузили диапазон решений для пользователя, тем самым избавив его от тяжелой ноши выбора. Это значительно сократило время на создание окна и сделало процесс понятным и удобным.Stepper – элемент интерфейса, который показывает последовательность пронумерованных шагов.

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

В новой версии мы разделили контентную часть и её настройки. Контентная часть, к которой относится предпросмотр окна, добавление сплит-теста, stepper и кнопки «Далее»/«Назад», находится теперь в центре страницы.

Справа от контентной части находятся её настройки.

Результаты и планы на будущее
Когда мы начинали работу над редизайном, интерфейс выглядел так:

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

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