ГК «РОСАТОМ»

ГК «РОСАТОМ»

Оптимизация интерфейсов ЕОСДО

Июль 2016 г. — Июнь 2017 г.

Описание проекта

Опрос пользователей, проведенный в ГК «Росатом» в 2013 году, показал, что Единая отраслевая система электронного документооборота (ЕОСДО) является не очень удобной. В рамках проекта эта проблема была решена.


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


Благодаря новому интерфейсу у заказчика появилась возможность обновить браузер с IE8 до IE11, а также дополнительно появилась возможность работать в Google Chrome.


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

Цели проекта

1 Повышение удобства работы пользователей.
2 Улучшение эргономики интерфейса системы.
3 Стандартизация схожих функций ЕОСДО на уровне интерфейса.
4 Сокращение количества кликов и действий.
5 Реализация быстрого доступа к документам и справочной информации.

Задачи проекта

  • Разработать новый интерфейс системы согласно требованиям технического задания и проектных решений.
  • Обеспечить переход на новый браузер IE10 и выше, что повлекло за собой решение задачи замены апплетов.
  • Организовать и провести сбор карты кликов до начала проекта и после его окончания.
  • Существенно расширить возможности поиска в системе.
  • Устранить обновление экрана при заполнении полей карточек в ЕОСДО.
  • Не ухудшить текущую скорость работы системы.
  • Объединить карточки двух типов документов сценария «Объекты интеллектуальной собственности» — для этого реализовать новый процесс.
  • Обновить всю проектную документацию по системе с учетом выполненных интерфейсных изменений.
  • Обеспечить в переходный период одновременную работу старых и новых интерфейсов.

Архитектура системы

ЕОСДО реализована на платформе Documentum. Клиентская часть на html/css/js. Шаблонизатор Freemarker.В клиентской части приложения используется JQuery и DataTables.js. Верстка реализована на фреймворке Bootstrap 3, пересобранном с сеткой grid‑системы в 96 элементов.

Результаты проекта

  • Перевод всех 25 бизнес-процессов системы на новые интерфейсы. В рамках проекта было сверстано 179 форм, что на 17 % больше предусмотренных ТЗ и проектными решениями.
  • Сокращение количества кликов в среднем на 37 %.
  • Реализация удобного и интуитивно понятного интерфейса, что подтверждается плавным переходом на работу с новыми интерфейсами без дополнительного обучения пользователей. В рамках проекта проводились только консультации пользователей, больше связанные с изменением привычной работы.
  • Реализация нового механизма по работе с файлами на базе Java Web Start, обеспечившего возможность работы в Google Chrome и IE11. Принципиально данное решение не привязано к браузеру и может работать автономно, а также подключаться к любому другому приложению или веб-сервису, который поддерживает технологию WebSocket.
  • Исключение обновления страниц за счет использования AJAX при работе с основными элементами пользовательского интерфейса (таблицы и операции с ними, списки, выпадающие списки, выбор из справочника и т.д.) там, где позволила архитектура системы.
  • Реализация новых требований, направленных на повышение удобства пользователей и обеспечивающих возможность перехода руководителей из VIP‑клиента в веб-интерфейс.
  • Обновление 87 проектных документов — инструкции, сценарии тестирования, проектные и технические решения.

Особенности проекта

Новый интерфейс пользователя системы основан на принципе разделения клиентской и серверной части приложения с реализацией тонкой прослойки‑адаптера между существующей серверной логикой и абсолютно новой клиентской частью на html/css/js. Адаптером служат шаблоны и библиотека макросов на движке шаблонизатора Freemarker.

 

В клиентской части приложения используется JQuery и DataTables.js. Верстка реализована на фреймворке Bootstrap 3, причем он был пересобран с сеткой grid‑системы в 96 элементов, чтобы удовлетворить все требования к внешнему виду.