Редизайн интерфейса Базы дисциплинарной практики для проектного центра «Инфометр»

База была создана проектным центром «Инфометр» на вики движке Trac, поэтому имела некоторые функциональные ограничения и дорабатывалась программно.
Существующий изначально принцип подачи информации воспринимался пользователями как слишком сложный, непонятный и устаревший. Нужен был новый, простой и аккуратный интерфейс, адаптируемый для мобильных устройств.
В качестве примера удобного и привычного интерфейса целевая аудитория выбрала «Консультант+».

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

Главная страница

Первым шагом был отказ от двух строк поиска – в шапке главной страницы и на странице с вики-текстами (Тексты НПА). По сути это был один и тот же поиск, который производился не по всему сайту, а только по вики-текстам, и это вводило пользователя в заблуждение.
Я оставила поиск по текстам НПА только в соответствующем разделе, убрав его с главной.
В остальном содержание главой страницы осталось прежним.
Поменялись меню и подвал.

Акты АП

Поиск по фильтрам и ключевым словам, таблица.

Отображение столбцов в таблице

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

Карточка

Каждой карточке присвоен свой номер. Есть возможность последовательно листать карточки в пределах одной страницы: смотреть следующую и предыдущую.

Тексты НПА, они же вики-тексты

Поиск по текстам.

Результат поиска.
Для более удобной навигации использовала „хлебные крошки“.

Форма регистрации

Форма входа

Увеломление.

Три вида уведомлений: обычное (исчезает само через несколько секунд), предупреждение и ошибка (закрывается по клику на крестик).

Дополненная главная страница с разделами

Я предложила два варианта:
1 – с табами

2 – с раскрывающимися блоками

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

Создание карточки акта зарегистрированным пользователем

Пример незаполненного поля ввода, обязательного для заполнения.

Выбор параметров.

Выбранные параметры.
Удалить пункт из списка можно нажав на красный крестик.

Добавление параметров к уже выбранным.

Заполненная карточка.

Датапикер.

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

После заполнения карточки пользователь видит черновик того, как она будет отображаться на сайте.

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

Вложения.
Возможность загружать, скачивать и удалять вложенные файлы.

История изменений.

Редактирование карточки

После внесения изменений необходимо выбрать одно из действий: оставить как новую, промодерировать или отклонить. Для этих целей я посчитала уместным использовать переключатель (radiobutton).

После редактирования, как и при создании карточки, появляется черновик. После предварительного просмотра можно публиковать карточку.

Результат редизайна

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