Привет! Мы — Александра Маслова и Александр Евтушенко — аналитики группы проектирования пользовательского опыта Solar Dozor ГК «Солар».

В продукте мы отвечаем за создание логики работы пользователя с интерфейсом, для чего исследуем путь пользователя и продумываем паттерны поведения системы. Задача весьма амбициозна, т.к. находится на стыке нескольких сфер деятельности — дизайна, аналитики, информационной безопасности и веб-разработки. Каждый релиз бизнес-аналитики ищут новые пути для развития DLP, а мы помогаем им в воплощении их идей и «приземлении» в продукт. Наши клиенты — «стражи в белых шляпах» — сотрудники отделов информационной безопасности крупных и средних коммерческих и государственных организаций.

Теперь о главном: в версии Solar Dozor 8.0 появилась новая функция — универсальный 4D плеер. Он избавляет офицеров ИБ от необходимости собирать данные об активности сотрудников в разных зонах интерфейса и записывать результаты поиска отдельно. Теперь все эти задачи можно решать в единой «информационной комнате». Плеер 4D собирает всю информацию о действиях пользователя: события и инциденты, сообщения, медиаданные — снимки и записи экрана, аудиозаписи с микрофона рабочей станции — и отображает их в хронологическом порядке на временном графике.

В этой статье мы поделимся подробностями о том, как появилась эта функция и как мы спроектировали интерфейс для неё. Всё началось с информационной архитектуры…

Что такое информационная архитектура

Информационная архитектура (ИА) — это структура продукта, т.е. то, каким образом контент организован на сайте или в приложении. Цель архитектуры — помочь пользователям легко находить полезную информацию и просто с ней взаимодействовать.

Можно сравнить ИА с библиотекой, в которой собраны все нужные читателю книги, а библиотекарю нужно придумать систему порядка и установить правила сортировки и группировки книг по алфавиту, жанрам и/или писателям. Только в хорошо организованной библиотеке читатель быстро и просто находит желанный фолиант. Такую библиотеку он будет помнить, как наиболее удобное средство достижения цели, и возвращаться к ней вновь.

Информационная архитектура влияет на UX следующим образом:

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

Мы, как UX-аналитики действующего продукта, не всегда проектируем информационную архитектуру, но всегда опираемся на нее. Особенно, когда встает вопрос о внедрении новых фич в продукт. При крупных доработках очень полезно схематично визуализировать ИА, чтобы самому посмотреть, «ложится» ли улучшение в существующее решение.

А еще важно опираться на ИА потому, что она может подарить идею новой фичи. Так произошло и с нашей новой фичей «Плеер 4D».

Предпосылки

При проведении расследований офицеру информационной безопасности приходится обрабатывать информацию в различных, несвязанных зонах интерфейса Solar Dozor, с фиксацией промежуточных итогов. Это приводит к увеличению времени расследований, повышению утомляемости сотрудника, и как следствие — увеличению вероятности влияния человеческого фактора на полноту и корректность проведения расследований

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

Так выглядели первые наброски фичи:

Для проверки этой гипотезы мы совершили несколько простых, но очень полезных действий.

Ревью сценариев

Для начала мы экспертно оценили сценарии пользователей в продукте. Сформулировали набор вопросов, ответы на которые подтвердили бы или опровергли гипотезу о едином рабочем пространстве. Затем собрали единый скоуп (наши мысли + видение руководителя продукта) и отправились «в поля» — общаться с сотрудниками ИБ.

Исследования пользовательского опыта

На основе проведенных с офицерами информационной безопасности интервью и опросов мы:

Актуализировали CJM. Местами скорректировали сценарии, где-то дополнили, что-то осталось без изменений.
Выявили боли. Как уникальные для разных шагов сценария, так и общие, касающиеся всего флоу работы офицера ИБ.
Подтвердили: единое пространство — нужно! Гипотеза о том, что офицеру ИБ действительно было бы очень удобно иметь возможность управлять разными типами данных в одном экране, подтверждена.

На основе детального анализа результатов исследования мы приступили к проектированию.

Проектирование

В результате обработки информации от респондентов мы пришли к следующим выводам:

Данные нужно группировать

Фактически, мы имеем дело с тремя типами данных:

Визуальные. Снимки экрана и Записи экрана
Аудио. Записи с микрофона рабочей станции
Текстовые данные. Таблицы со списком событий и инцидентов

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

Данными нужно управлять

С группами определились. Теперь стояла задача создать удобный элемент управления, который позволял бы «рулить» всеми типами данных одновременно, с визуализацией хронологии дня персоны. Что подойдет лучше всего? Конечно же, таймлайн!

Причем, мы предусмотрели два типа таймлайна:

Основной таймлайн. Выводится всегда. Минимум данных, минимум места. Отображение основной информации, управление выбранным для анализа временным промежутком
Детализированный таймлайн. Детализация по типам данных. Скрывается при нажатии на соответствующую кнопку

Выводить все и сразу

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

Первый подход к выводу всей информации в одном рабочем пространстве выглядел так:

Тулбар управления таймлайном. Он же — основной таймлайн, управление контентом в блоках ниже. Перемещение по времени
Таймлайн. Детализация по всем сущностям, используемым в системе
Медиаданные. Блок слева
Текстовые данные. Блок справа

Основные сущности, структура — все на месте. Концептуальный прототип готов. Этот артефакт нужен команде для понимания общей картины - абсолютно верхнеуровневой. Владельцу продукта — для понимания, что проектирование движется в нужном направлении и соответствует бизнес-логике фичи.

Когда на таком уровне всех всё устраивает — движемся в сторону детализации!

Прототип средней детализации

Как происходил процесс создания детализованного прототипа:

Учли реальные размеры рабочей области. Внесли все возможные панели — браузер, панель задач, закладки и т.д. — все добавили в прототип. Это крайне важно в условиях большого количества данных. Каждый пиксель на вес золота!
Использовали элементы UI-кита. Шрифты, контролы и все прочее. С каждым уровнем детализации мы получаем все более близкую и реальную картину интерфейса системы. Да и дизайнеру потом будет проще готовить макеты. Все в плюсе.
Проработали основной таймлайн. Добавили всю информацию о персоне и о временном отрезке, по которому ведется работа. Все типы данных отражены определенными блоками, сами границы таймлайна выделены акцентным цветом.
Визуализировали детализацию таймлайна. Каждый тип данных получил отдельную строку. Яркая и понятная индикация — дискретные данные в виде кругов, непрерывные в виде полос.
Оформили нижние контентные блоки. Добавили фильтры и другие нужные функции — например, разворачивание блока во весь экран.
Сформировали пул идей для развития системы. Да, прямо во время разработки MVP. Целый бэклог гипотез для исследований!

Несколько кругов обсуждений, доработок и вуаля! Готово:

Макеты

Встречайте! Плеер 4D!

Выводы

Четыре ключевых пункта, почему Плеер 4D получился крутой и полезный

Информационная архитектура. Связность всех блоков, единое воспроизведение контента. Все на одном экране, все данные «слеплены». Именно благодаря использованию ИА у нас получилось создать такую большую и сложную фичу, ярко отражающую принципы человеко-ориентированного дизайна.
Таймлайн. В красивой, понятной и логичной форме смогли свести совершенно разные типы данных: дискретные и непрерывные. Критичность и интенсивность событий также отражены. Графическое представление не настолько перегружено, насколько могло бы быть.
Гибкие настройки. Много точек для кастомизации функционала страницы. Помимо дефолтных (выбор периода и персоны) есть несколько вариантов отображения экрана, можно увеличивать нужные блоки, разворачивать детализацию таймлайна, выносить окно с медиаданными на второй экран.
Все данные в веб-версии. Задача не из простых, но всего каких-то пару часов подсчета пикселей с линейкой у монитора — и все уместилось.

От идеи до реализации: как мы создали универсальный Плеер 4D в Solar Dozor 8.0