Новый ispmanager: конкретные решения и персонализация интерфейса

Как мы переосмыслили каждый элемент панели управления
В первой части я рассказал о стратегических решениях при редизайне ispmanager: почему мы решили переделывать продукт и как создавали дизайн-систему с нуля.

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



UX-решения: баланс доступности и функциональности
Основная сложность заключалась в сохранении количества видимой информации на экране. Увеличение размеров компонентов для улучшения доступности неизбежно снижает информационную плотность интерфейса.

Пользователи обязательно отметили бы это в негативных отзывах, поэтому потребовались нестандартные решения. Там, где простая оптимизация пространства не помогала, появлялись новые функции.

Вкладки
Проблемы старого решения
При увеличении количества вкладок часть скрывалась, появлялась горизонтальная прокрутка. Пользователи:

• Теряли понимание открытых страниц
• Не могли быстро идентифицировать активную вкладку из-за небольшого размера
• Жаловались на захламление таб-бара
• Просили возможность массового закрытия вкладок

Новое решение
При заполнении таб-бара вкладки сжимаются до минимальной ширины, а при её достижении часть перемещается в выпадающий список с возможностью массового закрытия.

Визуальные улучшения:

• Увеличенный размер с четким разделением групп
• Активная вкладка визуально интегрирована со страницей
• Каждая вкладка получила уникальную иконку, соответствующую разделам меню

Основное меню
Меню в развернутом виде претерпело только косметические изменения. Основные UX-улучшения касаются компактного режима.

Старые проблемы свернутого меню:

• Требовалось наводить курсор на каждую иконку для понимания структуры

Новые решения:

• Умное раскрытие: При наведении курсора меню раскрывается полностью
• Защита от случайных срабатываний: Добавлена задержка и «мертвая зона» между меню и контентом
• Поиск: При использовании меню остается открытым до клика по найденному разделу
• Мобильная адаптация: На мобильных устройствах меню полностью скрыто и активируется кликом

Семантическое улучшение: Иконка бургера заменена на кнопку — это точнее отражает функциональность.


Боковая панель быстрого доступа
Новая боковая панель для кнопок, ранее расположенных в хедере справа от таб-бара. Это решение:

• Увеличило пространство для вкладок
• Заложило основу для будущих функций быстрого доступа

Адаптивные таблицы и списки
Списки претерпели наиболее серьезные изменения — полностью новый дизайн и значительные UX-улучшения.


Обновленный хедер списков

• В дочерних списках кнопка «Назад» перемещена из тулбара к заголовку
• Кнопки действий («Закрепить», «Добавить в избранное») объединены в выпадающий список (кебаб-меню)
• Кнопка «Настройки списка» перемещена из таблицы в хедер
• Поиск по списку компактно интегрирован в тулбар
• Кнопка настройки фильтров теперь рядом с поиском

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


Мобильная адаптивность
При достижении минимальной ширины ячеек таблица трансформируется в раскрывающиеся блоки:

• Изначально в свернутом состоянии
• Видимы только чекбоксы, заголовки, тоглы, кнопка контекстного меню
• Данные отображаются списком внутри каждого блока

• Модернизированный дашборд
• Карточки быстрых действий
• Увеличено количество карточек с добавлением горизонтальной прокрутки
• Ранее часть карточек скрывалась в выпадающем списке
• Обновленные виджеты
• Полностью новый дизайн всех виджетов
• Больше разнообразия и адаптивности
• Усилена визуальная иерархия ссылок, кнопок и вкладок

Переработанные формы
В формах изменения касались в основном UI и добавления адаптивности при сохранении привычного UX.
Исключение — форма создания сайтов:
Блок сводной информации перемещен из левой части в правую. Теперь выполняет функцию навигации.
Добавлена адаптивность для списков внутри форм


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

Хлебные крошки:
Ранее были оторваны от таблицы и находились над тулбаром. Теперь часть хедера таблицы и образуют единое целое со списком.

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


Обновленный раздел модулей. Функциональных изменений практически не было. Визуальные улучшения:

• Кнопки «Удалить» и «Настройки» стали более выразительными
• Переместились в один ряд с кнопками «Установить» и «Купить»
• Улучшена визуальная иерархия

Раздел «Все разделы»

• Изменения коснулись исключительно визуальной части:
• Раздел пересобран из компонентов основного меню
• Поддерживается единообразие визуального языка по всему интерфейсу

Персонализация через OKLCH
Ключевое нововведение: в ispmanager появилась персонализация по цвету. Пользователи могут менять оттенок и насыщенность цвета в настройках темы, при этом показатели контрастности не проседают. Это стало возможным благодаря использованию новой цветовой модели OKLCH. В сравнении с другими моделями, она:

• Обеспечивает более предсказуемое управление цветом
• Поддерживает стабильную контрастность при изменении параметров
• Нюанс: Если пользователь использует устаревший браузер, модель не работает. В таких случаях:
• Предлагаем обновить браузер

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