Привет, Хабр! Меня зовут Виталий Матыцин, я отвечаю за дизайн в Ampire. Cегодня хочу рассказать об особенностях и подводных камнях, с которыми мне пришлось столкнуться во время редизайна.
Коротко о продукте
Ampire — это киберполигон, предназначенный для обучения и тренировки навыков противодействия кибератакам. Основная аудитория пользователей платформы — преподаватели и студенты профильных специальностей, а также специалисты, которые хотят усилить свои навыки в защите инфраструктуры, за которую они отвечают.
Мы регулярно проводим учения, в рамках которых поднимается настоящая инфраструктура из серверов/роутеров и рабочих станций, которые моделируют типовую инфраструктуру организации.
![](https://habrastorage.org/getpro/habr/upload_files/895/916/3a2/8959163a22c534ccb0135259d8241004.png)
Наш киберполигон в первую очередь — это учебная платформа, в которой есть Преподаватель и Обучаемый. У каждого из них своя специфика использования сервиса. Преподаватели пользуются им ежедневно, знают особенности и, кроме того, предварительно проходят обучение для освоения функциональных возможностей. Обучаемые зачастую впервые видят систему. А значит особенно важно, чтобы система была понятна для новичков и обладала глубоким функционалом для профи. Задача не из простых.
Про дизайн процесс
Тут мы плавно переходим к нашему процессу дизайна, который основан на triplediamond. Мы рассматриваем его как рекомендации к тому, как должен быть построен процесс сейчас, но позволяем себе в некоторых моментах незначительные отклонения.
![](https://habrastorage.org/getpro/habr/upload_files/411/2b3/6bf/4112b36bfa5d37dbe318a759752111fd.png)
Что побудило нас к редизайну?
Недостаточная консистентность. Разобщенные блоки и паттерны нужно было структурировать и создать правила их использования.
Неочевидность действий пользователя. Обратная связь от пользователей указала на сложности в навигации, понимании функционала и общем взаимодействии с платформой.
Снижение когнитивной нагрузки на пользователя. Наши преподаватели много времени проводят с интерфейсом Ampire. Одной из задач было упрощение взаимодействия.
Консистентность всему голова
![](https://habrastorage.org/getpro/habr/upload_files/59a/220/c4d/59a220c4d25124aab0a9c42f11ee7040.png)
Изначально планировался UI-kit, который плавно перерос в полноценную дизайн-систему с документацией и сверстанными компонентами в песочнице.
ИБ системы требуют глубокого погружения, поэтому дизайн-систему для продуктов «Перспективного мониторинга» я назвал «Субмарина». Она состоит из нескольких частей.
Основные компоненты
В файле содержатся все компоненты, из которых собираются другие, более сложные компоненты или даже экраны. Также здесь можно найти токены (цвета, шрифты, числовые переменные) и основное описание этих компонентов. Публичная часть общедоступна и не содержит в себе сведений о компании.
![](https://habrastorage.org/getpro/habr/upload_files/ebb/41b/f0b/ebb41bf0b13b5444ff871616198f0fef.png)
Приватные компоненты
В этом файле хранятся более сложные компоненты, которые могут содержать в себе информацию для внутреннего пользования.
![](https://habrastorage.org/getpro/habr/upload_files/d21/5b3/d7b/d215b3d7b5618fe48066a12f866437e8.png)
Файлы проекта
Сейчас дизайн-система распространена на два продукта ПМ — Киберполигон Ampire и Программный комплекс Incident Management. У каждого продукта есть собственный файл, в котором находятся экраны с интерфейсами и флоу.
![](https://habrastorage.org/getpro/habr/upload_files/143/a10/373/143a10373d8ffa3a9247f3e17d399fa8.png)
Песочница — основные компоненты
Здесь мы храним основные компоненты, свёрстанные в коде.
![](https://habrastorage.org/getpro/habr/upload_files/3f8/35e/7ba/3f835e7ba1fb64ee893a457ddf0cfa2d.png)
Продуктовая песочница
У каждого из продуктов есть уникальные компоненты, которые необходимы только ему. Такие мы храним отдельно.
Неочевидность для пользователя
![](https://habrastorage.org/getpro/habr/upload_files/ad5/a2a/8df/ad5a2a8df5dc94a226aff27e59e7d132.png)
За 20+ лет люди научились языку компьютера — паттернам взаимодействия.
Паттерны повсюду: яркий пример — скролл. Он всегда справа от прокручиваемого элемента. Если это горизонтальный скролл — то снизу. Современным пользователям интуитивно понятно, что крестик в заголовке окна — это «закрыть», а три горизонтальные полоски откроют меню.
Нарушая паттерны мы позволяем пользователям “теряться” в интерфейсе.
![](https://habrastorage.org/getpro/habr/upload_files/224/7f5/0ae/2247f50ae248af7f336d8c79fcccd947.png)
Якоб Нильсен, (признанный специалист в области UX и основатель Nilsen Norman group) сформулировал следующее утверждение: “Пользователи проводят большую часть своего времени на других веб-сайтах, а не на вашем”, поэтому изначально система должна быть похожа на то, чем пользуется ваша предполагаемая аудитория. Так ей не придется учиться заново.
Стандартные законы UX мы совмещали с требованиями бизнеса, ограничениями стека разработчиков и с той информацией, которую узнали в процессе интервью с преподавателями.
Ниже скриншот из старой версии Ampire. Понятно ли вам, что по нажатию на стрелку откроется режим трансляции тренировки? Скорее похоже на то, что мы провалимся внутрь.
![](https://habrastorage.org/getpro/habr/upload_files/568/3d8/60c/5683d860c994ab0bf62336d71272132c.png)
Из-за отсутствия исследований интерфейса и сформированных лучших практик мы делали упор на исследования, эмпатию, логику и метафоры из окружающего мира:
Исследования нужны, чтобы понимать желания пользователя. Но здесь важно помнить: “что пользователь хочет” и “что ему нужно на самом деле” — разные вещи.
Эмпатия понадобится для того, чтобы поставить себя на место пользователя и понять, что на самом деле ему нужно. При этом важно учитывать контекст (нехватка времени, уровень заинтересованности, загруженность и прочее).
Дальше в дело вступает логика: какая информация к чему относится, где и как её лучше представить, как спроектировать архитектуру интерфейса.
Метафоры помогают на всех этапах в процессе создания принципиально нового, когда не знаешь как поступить или ищешь иной подход к проблеме. Ещё использование метафор помогает при отрисовке иконок, или когда только погружаешься в предметную область. Например: уязвимость можно сравнить с дырой в стене склада, последствия кибератаки с тем, что произойдёт, если через эту дыру смогут залезть. Если вор залезет на склад, он оставит следы, которые охранник увидит и постарается принять меры, чтобы не допустить воровства или порчи имущества.
Важное уточнение! Используя метафоры нужно быть осторожным в принятии решений. Они призваны только подсказывать направление поиска верного пути.
Уменьшаем когнитивную нагрузку
Киберучения длятся в среднем 60-90 минут. Зачастую их участники не знакомы с платформой. Одной из задач было снизить нагрузку и порог вхождения. Вот несколько принципов, которые помогли нам с этим:
Управление вниманием. Мы используем различные принципы восприятия в типографике, расположении блоков контента, цветах, чтобы сосредоточить внимание пользователя на тех функциях, которые считаем наиболее важными для него на данном этапе.
Порционность. Разбиваем сложное на мелкие части и подаем информацию частями. Один посыл — один экран.
Краткость. Все длинные интерфейсные тексты были конвертированы в свои более краткие, но в то же время понятные аналоги.
Язык интерфейса. Сформировали правила, согласно которым все кнопки отвечают на вопрос “что нужно сделать?”, а заголовки отражают процесс.
Дорога ложка к обеду. Если это не критичная информация, показываем ее только в тот момент, когда она необходима. Например: При наведении курсора на строку в таблице появляется иконка “редактировать”.
Принцип 10—30—60. Суть в следующем: разграничить интерфейс на “Важное”, “Второстепенное” и “Не важное”. На каждом экране должно быть 10% — важного, 30% — второстепенного и 60% — не важного. Этот же принцип можно применить и к распределению цвета.
Обучение. При первом входе в систему у вас есть возможность пройти небольшой онбординг и познакомиться с функциями платформы. А еще мы добавили на большинство элементов всплывающие подсказки и горячие клавиши.
Выравнивание. Контент выравниваем по сетке.
Темизация. Предусмотрели две темы — светлую и темную.
Это далеко не все предпринятые меры, но основные.
Консервативность сферы
Область защиты информации и сетевой инфраструктуры консервативна в плане дизайна. Я связываю это со сложностью темы информационной безопасности. Другой фактор — зависимость от других продуктов в сфере ИБ. Наши обучаемые в реальной работе используют инструменты, которые сложны и не сильно оптимизированы в плане визуальной нагрузки на пользователя.
В то время как в других ИТ сферах давно применяется более абстрактный дизайн, здесь местами остался скевоморфизм.
На схеме ниже много мелких деталей, присущих скевоморфизму.
![](https://habrastorage.org/getpro/habr/upload_files/2d4/44e/64b/2d444e64b7cdab786c6f97c79dd73df2.png)
Пример: в сфере кибербезопасности распространена матрица MITRE ATT&CK. Это набор тактик и техник, которые может использовать злоумышленник для достижения своих целей. Она довольно неудобна, но общепринята. Если мы ее модернизируем, обучаемый растеряется, увидев настоящую.
![](https://habrastorage.org/getpro/habr/upload_files/258/ee6/6e1/258ee66e15c02e5cf3d6bc0057f25a15.png)
Многие ведущие компании уже делают шаги улучшения дизайна ИБ продуктов, но должно пройти время, чтобы сформировались новые каноны и стандарты. Маленькими шажками в светлое будущее.
Инь и Янь. Консоль и геймификация
Мы работаем сразу в двух областях: Образование и Информационная безопасность.
ИБ традиционно считается строгой, корпоративной отраслью. Разработчики стремятся к максимальному наполнению продуктов функционалом. Вспомните, как хакерские станции изображают в фильмах. Интерфейсы — это либо командная строка, либо миллион непонятных окошек. В нашем случае обучение может проходить в закрытом контуре, без внешней сети. Это тоже необходимо учитывать при проектировании.
![](https://habrastorage.org/getpro/habr/upload_files/bad/7e9/4ba/bad7e94bad837de3414148d71169f49f.png)
Сфера образования наоборот старается быть максимально дружелюбной. Вот пример раскованности дизайн-решений от одного из лидеров в этом направлении.
Уникальность нашего сервиса со стороны дизайн-задач в том, что мы можем комбинировать техники из образовательных продуктов и сферы информационной безопасности. Уверен, многие из них смогут прижиться и стать общепринятой нормой.
Публичный экран
На Ampire часто проходят публичные киберучения. Поэтому необходим дашборд для вывода статистики и происходящих событий. Этот экран кардинально отличается от остальных разделов сервиса по ряду причин:
Это информационный экран и основное его назначение — вывод статистики и событий. Как правило, он выводится на телевизионную панель, поэтому на нём нет кликабельных элементов, он должен быть адаптирован к различным размерам экранов, а все детали интерфейса должны оставаться крупными и видимыми.
Назначение такого экрана — отображать процесс прохождения тренировки в реальном времени. В старой версии были предусмотрены только статусы уязвимостей и последствий, в новой — добавляются основные события, такие как создание или закрытие инцидента, создание отчета, смена статусов и т.д.
Дополнительное назначение экрана — приковывать к себе внимание, когда учения проходят на публичных мероприятиях, и вовлекать человека в процесс. Мы решаем эту задачу в том числе визуально. Интерфейс на дашборде имеет бОльшее количество анимаций и стилизаций, чем на других экранах платформы.
Про UI
Здесь хочется рассказать про технические приемы, которые мы применили при проектировании интерфейса сервиса.
Палитра составлялась постепенно. Изначально заложили цвета: черный, белый, темно-серый, светло-серый, а потом по необходимости добавляли дополнительные цвета. Спустя некоторое время сформировалась устойчивая палитра.
Используем 12-ти колоночную сетку для контентной части.
![](https://habrastorage.org/getpro/habr/upload_files/785/3b8/f0f/7853b8f0f542d14814428e7a5fc368ec.png)
Все элементы кратны 4 пикселям.
Все компоненты создавались по мере необходимости. Дополнительные варианты тоже. Не делаем ничего “про запас”. Пользуемся принципом достаточной необходимости. Единственное исключение — когда понимаем, что в дальнейшем это нам с большой вероятностью пригодится.
Используем переменные для цвета с целью быстрого создания другой цветовой схемы либо быстрой смены темы.
![](https://habrastorage.org/getpro/habr/upload_files/492/351/fc3/492351fc3a311d9b8ae136ba6d75b828.png)
Есть несколько брейкпоинтов () со статичной контентной частью. При сужении экрана сужаются боковые отступы до тех пор, пока не закончатся, затем идёт переключение на другой брейкпоинт с более узкой контентной частью.
Основной фрейм, на котором создается дизайн — 1280. Это самый маленький размер десктопа, который мы поддерживаем, и важно, чтобы весь контент мог на нём разместиться.
Для цветов определили список действий, за которые они отвечают (например: статусный красный цвет у нас в интерфейсе используется в следующих случаях: опасные моменты, ошибка, отозван, высокая сложность).
![](https://habrastorage.org/getpro/habr/upload_files/ba3/5ef/31b/ba35ef31b20f50d05f454a718615afb7.png)
![](https://habrastorage.org/getpro/habr/upload_files/e00/3ea/a3a/e003eaa3af5f775691f8cfd45da5b46a.png)
Экспериментировали с ИИ для наполнения тестового контента макетов (фотографии аватаров, тексты и даже иллюстрации на странице авторизации частично сгенерированы).
![](https://habrastorage.org/getpro/habr/upload_files/0ad/93d/8f1/0ad93d8f16675eb2e5e4c5f18369e10a.png)
Страница тренировки до и после редизайна
![До До](https://habrastorage.org/getpro/habr/upload_files/a1f/b70/8ba/a1fb708bab9f380c613eef16d88d6e3b.png)
![После После](https://habrastorage.org/getpro/habr/upload_files/c0b/5d4/cca/c0b5d4cca39601fabc458dd84ad59938.png)
Горизонтальные табы-разделы поменяли на боковое меню и освободили место для табов внутри раздела.
Настроили акценты, в основной информации оставили всё самое нужное. Остальное разнесено по табам.
Боковое меню открывается по ховеру. С учетом того, что у нас нет тач устройств, это решение — самое выигрышное.
Дальнейшие планы
Дизайн итеративен. Нельзя сделать сразу все хорошо. Сделали — получили фидбек — предложили гипотезы — проверили их — реализовали. И так по кругу.
Я вижу несколько перспективных в ближайшее время направлений для развития дизайн-культуры в Ampire:
Организация регулярных пользовательских исследований для глубокого понимания потребностей и проблем пользователей, а также для тестирования новых идей и функций.
Дальнейшее развитие и обновление дизайн-системы платформы для поддержания консистентности интерфейса и упрощения процесса разработки новых компонентов.
Геймификация. В частности, статистика для обучаемого и преподавателя, ачивки за выполнение определенных действий и т.д.
Внедрение микроанимаций для еще большей интуитивности.
Послесловие
Опросы и отзывы пользователей показали значительное улучшение общего удовлетворения платформой. Комментарии часто отмечали повышенную интуитивность интерфейса, легкость навигации и визуальную привлекательность нового дизайна.
В отличие от банкинга или e-commerce, ИБ — terra incognita для дизайнеров. Чувствуешь себя первооткрывателем. Это сложно, но вдохновляет.
![](https://habrastorage.org/getpro/habr/upload_files/42f/834/4b4/42f8344b480a6bc780f09b59f31ccf17.png)