Веб-интерфейс системы «Business Guardian» (разработка UI)

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Content Analysis Settings

Задача

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

  1. Создать дизайн темы и механизмы интерактивного взаимодействия интерфейса на примере трех функционально насыщенных экранах приложения.
  2. Сформировать стандарты ui-дизайна приложения, разработать стилистические и структурные таблицы стилей для шаблонов и ui-компонентов.
  3. Сверстать на основе разработанных стандартов интерфейса все функционально отличающиеся экраны приложения, весь состав ui-компонентов, необходимых для построения интерфейса приложения на этапе интеграции дизайна
  4. Написать спецификацию на интеграцию интерфейсов для разработчиков

Технические требования

  1. Дизайн тема интерфейса должна содержать компонентные таблицы стилей на less-препроцессоре для всех стандартных, входящих во фреймворк, и дополнительных компонентов, скрипты для обеспечения состояний и интерактивности интерфейса.
  2. Дизайн должен быть разработан как генерируемая стилевая тема на основе фреймворка. Отрисовывать графические макеты оформления, по согласованию, не требовалось.
  3. Разработка интерфейса должна быть организованная по принципам модульного дизайна – компоненты разметки должно быть легко использовать многократно и независимо в любом месте приложения, скрипты для динамических компонентов должны быть подключены в контексте компонентов.
  4. Трансформации и смена состояний в меню, панелях, компонентах – анимированы.
  5. Использовать цветовую гамму интерфейсов, ранее принятую для продуктов «Business Guardian»
  6. Реализовать механику адаптивного дизайна в рамках минимальной и максимальной принятой ширины экрана для использования приложения на desktop устройствах вывода.
  7. Шаблоны приложения должны быть построены с организацией контента в нескольких блочных фреймах с независимой прокруткой в каждом.

Решение

Разработана контрастная комфортная для длительного использования цветовая схема оформления в заданных основных оттенках дизайна

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Theme

Создан css-фреймвок построения страниц из разного количества автономных блоков, возможны практически любые варианты раскладки по два и три блока по ширине и высоте доступной области экрана. Нижняя и левая панели сворачиваются

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Frames

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

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Scrollbars

Дополнительные режимы просмотра списков отличаются только стилями и работают без перезагрузки страницы в целом.

Размер рабочей области может меняться за счет сворачивания панели фильтров.

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Sidebar

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

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

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) -Toolbars

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

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Panels

Разная по объему информация подробного вида элемента списка размещена компактно в простых и составных иерархических таб-панелях с зависимыми от панели инструментами управления данными.

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Tabs

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

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Modal

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

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Forms

Структура, механика сворачивания и схема разметки карточки элемента списка одинакова для разных по составу редактируемых (критериев, модулей, пользователей) и нередактируемых (событий, объектов, документов, результатов поиска, заданий, отчетов, процессов) элементов

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Cards

Иерархический вид просмотра строиться на принципах пользовательской ценности каждого конкретного списка

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

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

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Trees

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

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

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

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

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

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

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Markers

Графики для сводки на дашборд разработаны с использованием нескольких js-библиотек, отвечающим потребности представления запланированных на этапе проектирования данных. Всего постоянно на главной странице аналитику доступно 28 сводок актуальных данных состояний анализа.

«Business Guardian»  WEB APPLICATION DESIGN (HTML5/CSS/JS) - Dashboard

Результат работы

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

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

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

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

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

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

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