Как мы переосмыслили каждый элемент панели управления
В первой части я рассказал о стратегических решениях при редизайне ispmanager: почему мы решили переделывать продукт и как создавали дизайн-систему с нуля.
Сегодня — о конкретных UX/UI решениях. Покажу, как мы переосмыслили каждый элемент интерфейса, сохранив функциональность и добавив современности, а также расскажу об инновации — персонализации через цветовую модель OKLCH.
UX-решения: баланс доступности и функциональности
Основная сложность заключалась в сохранении количества видимой информации на экране. Увеличение размеров компонентов для улучшения доступности неизбежно снижает информационную плотность интерфейса.
Пользователи обязательно отметили бы это в негативных отзывах, поэтому потребовались нестандартные решения. Там, где простая оптимизация пространства не помогала, появлялись новые функции.
Вкладки
Проблемы старого решения
При увеличении количества вкладок часть скрывалась, появлялась горизонтальная прокрутка. Пользователи:
- Теряли понимание открытых страниц
- Не могли быстро идентифицировать активную вкладку из-за небольшого размера
- Жаловались на захламление таб-бара
- Просили возможность массового закрытия вкладок
Новое решение
При заполнении таб-бара вкладки сжимаются до минимальной ширины, а при её достижении часть перемещается в выпадающий список с возможностью массового закрытия.
Визуальные улучшения:
- Увеличенный размер с четким разделением групп
- Активная вкладка визуально интегрирована со страницей
- Каждая вкладка получила уникальную иконку, соответствующую разделам меню
Основное меню
Меню в развернутом виде претерпело только косметические изменения. Основные UX-улучшения касаются компактного режима.
Старые проблемы свернутого меню:
- Требовалось наводить курсор на каждую иконку для понимания структуры
Новые решения:
- Умное раскрытие: При наведении курсора меню раскрывается полностью
- Защита от случайных срабатываний: Добавлена задержка и «мертвая зона» между меню и контентом
- Поиск: При использовании меню остается открытым до клика по найденному разделу
- Мобильная адаптация: На мобильных устройствах меню полностью скрыто и активируется кликом
Семантическое улучшение: Иконка бургера заменена на кнопку — это точнее отражает функциональность.
Боковая панель быстрого доступа
Новая боковая панель для кнопок, ранее расположенных в хедере справа от таб-бара. Это решение:
- Увеличило пространство для вкладок
- Заложило основу для будущих функций быстрого доступа
Адаптивные таблицы и списки
Списки претерпели наиболее серьезные изменения — полностью новый дизайн и значительные UX-улучшения.
Обновленный хедер списков
- В дочерних списках кнопка «Назад» перемещена из тулбара к заголовку
- Кнопки действий («Закрепить», «Добавить в избранное») объединены в выпадающий список (кебаб-меню)
- Кнопка «Настройки списка» перемещена из таблицы в хедер
- Поиск по списку компактно интегрирован в тулбар
- Кнопка настройки фильтров теперь рядом с поиском
Сохранение информационной плотности
Проблема: Таблице хотелось дать больше воздуха для легкого считывания, но это уменьшало количество отображаемых данных.
Решение: Переключатель плотности отображения в правом верхнем углу, позволяющий выбирать между комфортным и компактным режимами.
Мобильная адаптивность
При достижении минимальной ширины ячеек таблица трансформируется в раскрывающиеся блоки:
- Изначально в свернутом состоянии
- Видимы только чекбоксы, заголовки, тоглы, кнопка контекстного меню
- Данные отображаются списком внутри каждого блока
- Модернизированный дашборд
- Карточки быстрых действий
- Увеличено количество карточек с добавлением горизонтальной прокрутки
- Ранее часть карточек скрывалась в выпадающем списке
- Обновленные виджеты
- Полностью новый дизайн всех виджетов
- Больше разнообразия и адаптивности
- Усилена визуальная иерархия ссылок, кнопок и вкладок
Переработанные формы
В формах изменения касались в основном UI и добавления адаптивности при сохранении привычного UX.
Исключение — форма создания сайтов:
Блок сводной информации перемещен из левой части в правую. Теперь выполняет функцию навигации.
Добавлена адаптивность для списков внутри форм
Обновленный файловый менеджер
Ключевые изменения касаются UX навигации: хлебных крошек, копирования пути, редактора пути, избранных каталогов и кнопки возврата.
Хлебные крошки:
Ранее были оторваны от таблицы и находились над тулбаром. Теперь часть хедера таблицы и образуют единое целое со списком.
Кнопка возврата:
Раньше выглядела как строка таблицы, создавая неудобство. Сейчас логично размещена в хедере рядом с хлебными крошками
Обновленный раздел модулей. Функциональных изменений практически не было. Визуальные улучшения:
- Кнопки «Удалить» и «Настройки» стали более выразительными
- Переместились в один ряд с кнопками «Установить» и «Купить»
- Улучшена визуальная иерархия
Раздел «Все разделы»
- Изменения коснулись исключительно визуальной части:
- Раздел пересобран из компонентов основного меню
- Поддерживается единообразие визуального языка по всему интерфейсу
Персонализация через OKLCH
Ключевое нововведение: в ispmanager появилась персонализация по цвету. Пользователи могут менять оттенок и насыщенность цвета в настройках темы, при этом показатели контрастности не проседают. Это стало возможным благодаря использованию новой цветовой модели OKLCH. В сравнении с другими моделями, она:
- Обеспечивает более предсказуемое управление цветом
- Поддерживает стабильную контрастность при изменении параметров
- Нюанс: Если пользователь использует устаревший браузер, модель не работает. В таких случаях:
- Предлагаем обновить браузер
Заключение
Сложно делать выводы, когда проект еще не завершен. После релиза планирую третью часть о результатах юзабилити тестов, о том, как изменились метрики и что говорят пользователи о новом интерфейсе.
