Правительство Кузбасса

Масштабное обновление государственных сайтов Кузбасса

У региональных органов власти: администрации области, департаментов, муниципалитетов, учреждений — сотни сайтов. Они выглядят и работают по-разному. Это затрудняет общение граждан c государством в интернете

Задачи и аудит

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

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

Дизайн-система

В самом начале проекта перед нами встал выбор: использовать опыт других — подобные задачи решаются во всех регионах — либо разработать самостоятельную дизайн-систему для Кузбасса. Решили использовать гайдланы дизайн-системы России. Ее разрабатывает Минкомсвязи совместно с лидерами digital-рынка.

На старте это дало нам две очень важные вещи:

1

Правила и подходы, c помощью которых можно развивать и поддерживать ресурсы

2

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

Подробнее о дизайне госсистем

gov.design

Принципы дизайн-системы

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

Наличие понятных для всех принципов позволило разрешать споры и противоречия внутри команды и при взаимодействии с заказчиком

Визуальный стиль, типографика, компоненты интерфейса

На основании федерального гайдлана наша команда выработала стиль областных ресурсов. В процессе работы над проектом мы добавили недостающие компоненты: многоуровневое меню для навигации по разветвлённым внутренним разделам, таблицы, «хлебные крошки», многоуровневые выпадающие списки.

Все новые компоненты, цвета, иконки заботливо собраны в гайдлайне дизайн-системы Кузбасса

Информационная архитектура и прототипирование

За время существования старого сайта АКО его структура обросла множеством страниц и разветвлённых разделов. Вкупе с неочевидной навигацией и перегруженной главной страницей это делало сайт сложным и запутанным.

Мы проанализировали архитектуру старого сайта. Реорганизовали некоторые разделы, избавились от дубликатов. Структура сайта стала более простой и масштабируемой, при этом ничего не потерялось — весь контент сохранён.

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

Необходимо было расширить функциональность и объединить разрозненные областные сайты: новостной портал, законодательная база и другие — на одной площадке

Прототип сайта

В работе над сайтом участвовало пять департаментов. У каждого участника процесса были свои задачи, пожелания и видение нового сайта. Мы создали динамический прототип сайта — каждый смог покликать по пунктам меню, перейти на внутренние страницы. Это упростило процесс согласования.

3l745u.axshare.com

Новый сайт администрации

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

На главной странице предыдущей версии сайта администрации было 119 кликабельных элементов, хаотично разбросанных по странице. Мы провели большую работу. Упростили и структурировали контент, в результате кликабельных элементов стало в полтора раза меньше

Навигация и поиск

Все государственные сайты объединены госбаром — панель сверху. Госбар — единая точка авторизации и персонализации: вход через ЕСИА, версия для слабовидящих, доступ к каталогу сайтов, уведомления от МЧС.

Для быстрого доступа к внутренним разделам добавлена удобная карта сайта и выпадающие меню.

Навигация по внутренним разделам осуществляется при помощи наглядного бокового меню.

Поиск по сайту всегда доступен. На страницу поиска добавили частые поисковые запросы.

В будущем планируется реализовать сквозной поиск по всем областным сайтам — не нужно посещать массу ресурсов, всё можно найти на любом из них

Обращения

Самый популярный сценарий использования сайта. Задать вопрос, пожаловаться, получить консультацию, предложить инициативу — всё это можно сделать на сайте.

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

Отследить статус обращения и узнать ответ можно будет в удобном личном кабинете. Запуск этой функции состоится позже

Документы

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

Также реализовали поиск по нескольким параметрам: просмотр документов на сайте, скачивание в нескольких форматах.

Банк документов

zakon.kemobl.ru

Документы

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

Адаптивность

Сайт корректно отображается на любых устройствах, не теряя функциональности и удобства.

Детали работы над сайтом

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

Любой страницей можно поделиться в социальных сетях одним кликом.

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

В общей сложности собрано порядка 50 дизайн-макетов. Для работы над этим проектом перешли на Sketch — масштаб сайта и необходимость повторного использования компонентов потребовали нового инструмента. Обратного пути в фотошоп больше нет

Результаты и перспективы

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

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

Сайт администрации

ako.ru