Веб-интерфейс системы «Business Guardian» (UX)

Веб-интерфейс системы «Business Guardian» (UX)
«Business Guardian»  WINDOWS APPLICATION SCREENS  Analyzing Factors Settings  Content Analysis Events  Module Architecture Settings

«Business Guardian» – это программный пакет системы информационной безопасности, разработанный под Windows, электронный продукт компании Iteranet. Предназначен для выявления и предотвращения фактов нарушения информационной политики безопасности в компании, обнаружение фактов утечек конфиденциальной информации.

Я проектировала и разрабатывала дизайн интерфейса веб-версии системы. В этой публикации будет описан процесс и решения этапа проектирования.

Моя задача, как проектировщика, cостояла в том, чтобы разобраться в поставляемых в систему данных, текущей структуре и связях, иерархии и зависимостях, проанализировать возможность представить эти данные в веб-интерфейсе без потерь функциональности стационарной версии системы, и создать интерфейс веб-приложения так, чтобы это было удобно и понятно и новым, и старым пользователям системы.

Предмет, проблема, задачи

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

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

Аналитик предварительно формирует систему правил. Чем она точнее и избирательнее, тем лучше данные обрабатываются без участия человека.

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

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

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

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

Пользователи системы делятся на две непересекающиеся группы, это:

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

Системные администраторы, создающие архитектуру модулей системы и контролирующие стабильность их работы.

В результате анализа были выявлены задачи и проблемы, которые нужно было попытаться решить при проектировании:
  • Разработать информационную архитектуру и интерфейс разделов приложения, включающего функционал двух отдельных программных продуктов стационарной версии Business Guardian АРМ Администратор и Business Guardian АРМ Аналитика.
  • Разработать интерфейс для двух отдельных специализаций пользователей — аналитиков и системных администраторов.
  • Представить огромный объем получаемых системой данных логично и последовательно для восприятия пользователем в режиме быстрого просмотра и достаточную информативность в режиме внимательного анализа на одних и тех же интерфейсных экранах.
  • Улучшить принципы построения интерфейсов многоступенчатой фильтрации и поиска по параметрам, тестирования условий критериев на изменяемых тестовых данных, режимы отображения условий и других специализированных сервисов системы.
  • Увеличить скорость работы аналитика за счет облегчения просмотра хорошо структурированных данных.
  • Отделить важную информацию от второстепенной в элементах списков данных.
  • Помочь обеспечить достаточно быструю скорость реакции аналитика вначале на события, требующие приоритетного внимания, не теряя фокуса на состоянии системы в целом.
  • Разработать интерфейс создания критериев анализа и системы в целом логичнее и доступнее для понимания и обучения работе с системой.
  • Дать возможность администраторам наблюдать в реалтайме процессы, архитектуру которых они создают
  • Придумать состав данных для диаграмм, по которым аналитики будут мгновенно оценивать состояние системы.

Результаты и последовательность работ

Изучены и проанализированы функциональность и бизнес-задачи программ Business Guardian Аналитика и Business Guardian Администратор, переработаны и перенесены в веб-версию интерфейсы всех значимых сервисов системы.

  • Создана единая комплексная архитектура веб-приложения.
  • Вначале были разработаны статичные и интерактивные прототипы ключевых разделов веб-приложения, на работу с которыми пользователи тратят 70% времени:
    • настроек рубрикатора – основного алгоритма фильтрации контентного трафика
    «Business Guardian»  AXURE WEB APPLICATION PROTOTYPES  Settings of Content Analysis Factors
    • списка событий анализа с просмотром каждого события в мастер-панели;
    «Business Guardian»  AXURE WEB APPLICATION PROTOTYPES  Content Events
    • экрана конфигурации узлов контроля, серверов и модулей для пользователей с ролью администратора;
    «Business Guardian»  AXURE WEB APPLICATION PROTOTYPES  Configiration of Modules
  • Разработаны интерактивные прототипы 3-x ключевых разделов. Пример и детализация прототипов http://x6iuw2.axshare.com/#p=home
  • Запроектированы еще 40 экранных форм: списков, настроек алгоритмов анализа данных, просмотра событий, объектов, контентного, субъектного методов анализа, анализа по формальным признакам, тестирования критериев и контроля процессов на рабочих машинах предприятия.
«Business Guardian»  AXURE WEB APPLICATION PROTOTYPES
  • Cформированы и утверждены структура блоков и стандарты компонентов интерфейса для каждого раздела приложения
  • Собран интерактивный прототип всего приложения, включающий механизмы взаимодействия пользователя с системой на всех разработанных экранных формах.
  • Отобраны наиболее востребованные и необходимые для быстрой оценки ситуации потоки данных для формирования статистических срезов на графиках дашборда приложения.
  • Интерфейса тестировался постоянными пользователями стационарных программ Business Guardian.
  • По результатам итеративного тестирования внесено большое количество доработок как в первоначальную концепцию структуры, касающуюся как целых экранов, так и детализации ui-компонентов. В частности, несколько раз изменен принцип сборки параметров карточки списка состав, который будет требовать и дальнейшего тестирования для поиска наиболее оптимального вида для большинства пользователей, и в зависимости от выводимой информации, возможно потребуются дополнительные режимы отображения для отдельных потоков данных. Пиктограммы, в большом количестве присутствующие на карточках списков, позволяют уместить кратко много маркеров, информативны и привычны пользователям системы, метафоры значений многих пиктограмм сохранены такими же как в desktop версии приложения. В следующей части кейса будет представлен процесс разработки UI-дизайна, где удалось нормально для восприятия представить такое количество мелких элементов, для этого нужна была правильная сетка

Результаты проектирования интерфейса предоставлены в виде статичных графических файлов и интерактивного прототипа, разработанного в Axure.

Разработанные компоненты и сервисы

  • Информационная архитектура всего приложения, в которое объединены возможности аналитики и администрирования системы.
  • Многоуровневая горизонтальная навигация
  • Компактный функциональный комплекс блоков с независимой прокруткой в каждом для представления списка и просмотра записи списка в мастер-панели, с инструментами действий для текущего элемента списка
«Business Guardian»  AXURE WEB APPLICATION PROTOTYPES / List of Subject Analysis Factors
  • Расширяемый параметрами фильтр серверного поиска для списков с внешними индикаторами активных опций.
«Business Guardian»  AXURE WEB APPLICATION PROTOTYPES / Interface filtering of search
  • Механика смены контента в мастер-панели с просмотра на редактирование без перезагрузки и потери фокуса на текущих данных в поле зрения.
«Business Guardian»  AXURE WEB APPLICATION PROTOTYPES / Interface View/Edit in Master Panel
  • Табличный в стационарном приложении вид представления данных переработан в список из карточек, что позволило избежать многочисленных пустых клеток, получаемый на этих данных в табличном виде, сложности оценки по множеству разбросанных параметров строки
  • Применена однотипность и наследуемость принципов построения интерфейса списков элементов данных, просмотров и редактирования одного элемента, включающий три режима просмотра и редактирования с дифференцированным отображением инструментов в зависимости от вида просмотра
  • Основной вид представления списков – лист, элементом является карточка. Карточка списка компактна, содержит большинство параметров элемента, имеет два режима просмотра – свернутый, содержащий название, тип и критичеcкие индикаторы, и развернутый, на нем удобно без открытия подробного просмотра отслеживать ситуации, требующие внимания, в подробную же запись в мастер-панели переходить в случае необходимости редактирования, установки реакции на событие, обработки связанных категорий данных — текстовых документов, сработавщих критериев
«Business Guardian»  AXURE WEB APPLICATION PROTOTYPES /  List views
  • Системы индикации для типов анализа, событий и объектов, связанных с каждым типом, состояний критичности нарушения для событий, объектов, критериев анализа, типов объектов в зависимости от протокола снятия данных, состояния объектов, попавших под санкции системы, индикаторы состояний рабочих станций, попавших под санкции системы, индикаторы и мониторинг состояний критериев анализа, индикаторы и мониторинг состояний происходящих и отложенных процессов, индикаторы синхронизацией критериев, индикаторы активности состояний модулей анализа
iteranet-ux9
  • Обозначения типов, видов, весовых и пороговых характеристик критериев анализа пиктограммами необходимые для тестирования логично перешли в применение и в обозначении выявленных нарушений соответствующих этим критериям.
iteranet-ux10
  • Механизмы тестирования созданных критериев контентного анализа на изменяемых произвольных данных и
    механизм формирования и тестирования условий для срабатывания критерия анализа по функциональным признакам
«Business Guardian»  AXURE WEB APPLICATION PROTOTYPES / Criteria testing
  • Сводка данных и отчетов в стационарной версии была представлена не достаточно развернуто и только виде заказных отчетов, в веб-версии сформирован дашборд с детальной динамичной инфографикой с данными реалтайм.
«Business Guardian»  AXURE WEB APPLICATION PROTOTYPES / Dashboard Infographics with Realtime Data

Период изучения 2 программных продуктов системы «Business Guardian» — 1 неделя

Период проектирования, и утверждения прототипов — 20 рабочих дней

Период разработки дизайна приложения — 25 рабочих дней. Об этом в следующей публикации

Все материалы, использованные в данном отчете принадлежат компании Iteranet и защищены законом об авторском праве.

Елена Баранова, UX/UI дизайнер