DDVB

Проект оформления портала государственных и муниципальных услуг города Москвы

DDVB 2

Диаграмма переходов и ветвлений

1 106 15

14.1

2

1.1

117 163

1.2

12

7.1

174 1385 14

13.1

9

DDVB 3

1 Главная страницаЕдиная панель городских порталов.

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

Поле ввода поисковых запросов. В проекте поиск играет основную роль. При начале ввода запроса система переходит в состояние 1.1

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

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

Блок «Городские порталы». Содержит ссылки на городские порталы Москвы. Текст условен.

Для оформления используется бесплатное Российское семейстово шрифтов PT.

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

Логотип. Содержит знак и сокращенное написание названия сайта. Дизайн знака условен.

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

Манифест. Содержит описание текущего состояния и целей проекта.

Рубрикатор каталога. Каждый блок рубрикатора содержит название раздела, пиктограмму и описание. Пиктограммы окрашены в цвета разделов каталога. Описание кратко характеризует содержимое раздела, может содержать частые поисковые запросы и услуги, вхождение которых в раздел не очевидно. Дизайн пиктограмм и описания условны. По клику осуществляется переход в состояние 2.

Популярные услуги. Список наиболее запрашиваемых услуг, написанный языком, близким к языку запросов.

Блок «Правительство Москвы». Содержит ссылки на сайты учреждений правительства Москвы, которые часто ищут на сайте. Текст условен.

Блок «Портал pgu.mos.ru». Содержит разделы, связанные с самим порталом.

Блок «Услуги портала». Список разделов сайта, который присутствует на всех страницах. Текст условен.

DDVB 4

1.1 Поиск услуги

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

Хлебные крошки. Хлебные крошки присутствуют во всех внутренних разделах сайта.

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

DDVB 5

1.2 Поиск услуги

DDVB 6

2 Раздел каталога

Название раздела.

Пиктограмма раздела.

Описание раздела. Кратко характеризует содержимое раздела, может содержать частые поисковые запросы и услуги, вхождение которых в раздел не очевидно. Текст условен.

Название подраздела.

Описание подраздела. Кратко характеризует содержимое подраздела, может содержать частые поисковые запросы и услуги, вхождение которых в подраздел не очевидно. Текст условен.

DDVB 7

3 Подраздел каталога

Название подраздела.

Пиктограмма раздела.

Описание подраздела. Кратко характеризует содержимое раздела, может содержать частые поисковые запросы и услуги, вхождение которых в подраздел не очевидно. Текст условен.

Название услуги.

Описание услуги. Кратко характеризует услугу, может содержать частые поисковые запросы и неочевидные нюансы. Текст условен.

Бейдж «Онлайн». Показывает, что услуга доступна онлайн.

DDVB 8

4 Услуга

Название услуги.

Пиктограмма раздела.

Шкала шагов. Показывает шаги получения услуги онлайн. Текущий шаг подсвечен оттенком цвета раздела.

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

Информационный врез. Содержит информацию о пользовании системой. Фон имеет оттенок цвета раздела каталога.

Кнопка перехода к оформлению услуги.

DDVB 9

6 Шаг 1. Является ли перепланировка типовой?

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

DDVB 10

7 Шаг 1. Каталог типовых перепланировокРезультат поиска по каталогу выдается в реальном времени без перезагрузки страницы.

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

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

DDVB 11

7.1 Шаг 1. Выбор перепланировкиВыбор типовой перепланировки позволяет упростить дальнейшее заполнение анкет.

DDVB 12

8 Шаг 2. Необходим ли проект перепланировки? Тип помещения

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

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

DDVB 13

9 Шаг 2. Необходим ли проект перепланировки? Планируемые измененияПосле заполнения шага формы секция шага сворачивается, и рядом появляется бейдж статуса. В нем содержится краткое описание результатов шага. По клику на предыдущий шаг можно всегда вернуться назад и изменить его. Это может оказать влияние на все дальнейшие шаги. При случайном переключении или возврате данные не сотрутся. Система будет хранить все введенные данные во всех вариантах заполнения.

DDVB 14

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

DDVB 15

11 Шаг 3. Необходимые документы на квартируКнопка отправки реагирует на действия пользователя. Она появляется, когда заполнены все необходимые поля, изменяет свою подпись в зависимости от контекста.

DDVB 16

12 Шаг 4. Получение услуги. Способ полученияЕсли пользователь прервет заполнение формы, то услуга сохранится в его личном кабинете с пометкой «Не до конца заполнена». Заполнение можно продолжить в любой момент.

DDVB 17

13 Шаг 4. Получение услуги. Личные данныеСистема может сохранять различные данные пользователя для того, чтобы было легче заполнять анкеты. Это могут быть паспортные данные разных паспортов для разных членов семьи, и многое другое.

DDVB 18

13.1 Шаг 4. Получение услуги. Профили В выпадающем меню можно выбрать, данные какого паспорта заполнять.

DDVB 19

14 Шаг 4. Получение услуги. Личные данные. ЗаполнениеВ зависимости от вида удостоверения, добавляются необходимые поля.

Поле “Кем выдан” заполняется одним полем, всегда содержит код и обладает возможностью автоподстановки из базы данных подразделений. Это позволяет избежать частых ошибок при заполнении названия подразделения и кода.

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

DDVB 20

14.1 Шаг 4. Получение услуги. Личные данные. Сохранение профиляНазвание для нового профиля предлагается автоматически.

DDVB 21

15 Шаг 4. Получение услуги. Загрузка документов для проектаПосле загрузки файл можно удалить.

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

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

DDVB 22

16 Шаг 4. Получение услуги. Способ получения

На последнем шаге появляется кнопка отправки.

DDVB 23

17 Успех

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