Современный и интерактивный: новый городской портал Улан-Удэ 3 в 1
Городской портал должен состоять из следующих ресурсов:
- Официального сайта органов местного самоуправления (с информацией, обязательной к размещению в соответствии с действующими нормативно-правовыми актами)
- Информационного сайта Улан-Удэ (со справочной информацией об основных сферах жизнедеятельности).
- Интерактивного сервиса «Активный горожанин» (работы по вёрстке и дизайну сайта).
Задачи проекта:
- Создать концепции дизайна для сайтов, учитывающие современные решения и тенденции в области веб-разработки, а также отвечающие принципам внедряемого в РФ стандарта государственных сайтов.
- Разработать структуру сайтов, в которой маршрут поиска необходимой информации в подразделах будет максимально коротким и простым, начиная с главных страниц.
- Обеспечить удобное и понятное для пользователей представление информации.
- Создать удобную и функциональную систему поиска по сайтам Портала.
- Разработать два сайта, располагающиеся на разных доменах, объединенные единой информационной базой, а также создать интерактивный сервис «Активный горожанин» (дизайн и вёрстка)
В текущем кейсе мы рассмотрим этапы 6-месячной работы по модернизации городского портала Улан-Удэ, состоящего из трёх ресурсов.
Для начала
На прежнем сайте наблюдалась перезагруженность материалами, сложность внутренней структуры разделов и неудобство навигации, устаревший дизайн.
Новый информационный сайт города Улан-Удэ разрабатывался с целью создания удобного и востребованного населением многофункционального информационного комплекса, объединяющего в себе площадку для публикации официальной информации и новостных материалов, различные сервисы, интерактивные справочники и многопрофильную пользовательскую среду.
Кроме этого, ставилась цель оперативного и всестороннего информирования общественности о деятельности органов местного самоуправления города Улан-Удэ, предоставления информации о муниципальных услугах, функциях и сервисах, привлечения пользователей к активному участию в интерактивных мероприятиях и спецпроектах.
Новый портал предоставляет информацию о жизни города и деятельности органов местного самоуправления города Улан-Удэ в формате новостей, фото и видеоальбомов, мест и маршрутов на карте.
Что было сделано?
Итак, в настоящее время реализованы 3полноценных ресурса: два сайта, функционирующих абсолютно автономно на одной платформе 1С-Битрикс — информационный и официальный, а также интерактивный сервис «Активный горожанин» (вёрстка и дизайн).
В качестве системы управления сайтом используется система »1С-Битрикс: Управление сайтом» — редакция «Бизнес». С целью выполнения требований заказчика функционал стандартных компонентов Битрикса был кастомизирован.
В ходе работ были решены следующие задачи:
1. Созданы два полноценных сайта на одной платформе + произведены работы по вёрстке и дизайну интерактивного сервиса «Активный горожанин».
На официальном сайте представлена структура администрации, контактные данные и основные направления деятельности подразделений; в качестве отдельных специальных структурных элементов выделены страницы муниципальных услуг и функции, сервисы, интерактивные блоки и блоки документов, а также виртуальная приемная. Сейчас это полноценный городской портал, который сосредоточился на освещении деятельности органов местного самоуправления и размещении нормативных актов, и интегрируется с описанным ниже новым информационным.
На информационном сайте представлены новости города, полезная информация для его жителей, ссылки на сервисы и информационные ресурсы, афиши мероприятий и другая информация.
«Активный горожанин» — это интерактивный сервис жителей Улан-Удэ. С его помощью любой гражданин может сообщить об увиденных проблемах, требующих устранения со стороны городских ведомств (подразделений администрации города и муниципальных служб).
2. Созданы версии дизайна для сайтов, учитывающие современные решения и тенденции в области веб-разработок, а также отвечающие принципам внедряемого в РФ стандарта государственных сайтов.
Наш путь к созданию удобного и полезного ресурса начался с разработки прототипа и структуры сайта. Мы тщательно разработали первоначальный дизайн интерфейса (прототипы с ux-элементами) и подготовили ui-кит, которые наглядно демонстрируют основные информационные элементы и блоки обоих сайтов:
Вот так выглядел прежний сайт:
Городской портал в новой версии, состоящий из 3-х ресурсов, сейчас выглядит следующим образом:
При сравнении версий «до» и «после» можно заметить, что концепция текущего дизайна новых сайтов выполнена в минималистичном стиле. За основу были взяты принципы приоритета потребностей пользователей, удобного чтения, эргономичности и общедоступности. Шаблоны страниц и расположение блоков детально проработаны в целях наилучшего восприятия. Основу дизайна формируют информационные блоки, а также типографика, наборы идеограмм и иконок.
При разработке дизайна сайтов г. Улан-Удэ мы ориентировались на стандарты и рекомендации проекта «Дизайн государственных систем России»:
Учитывая это, были разработаны разные по оформлению варианты дизайна, но в общей стилистике.
Дизайн сайтов соответствует основным критериям и требованиям адаптивности и логики подхода «mobile-first». Содержимое страниц корректно отображается на различных устройствах.
Лендинг пейдж
Перед нами стояла задача создать лендинг-страницуна информационном сайте. По согласованию с заказчиком мы разработали и внедрили промо-страницу, которая информирует жителей о текущих проектах города и содержит информацию для потенциальных инвесторов.
Редактор может самостоятельно устанавливать последовательность блоков по требованию (реализован конструктор с возможностью собирать страницу проекта из готовых блоков и шаблонов).
3. Разработана структура сайтов с максимально коротким и простым маршрутом поиска необходимой информации в подразделах.
Особое внимание уделено навигации по сайту и поиску нужных разделов. Структура новых сайтов собрана таким образом, чтобы к основным разделам можно было перейти не более, чем в три клика. На старом сайте новостные разделы находились достаточно глубоко в структуре; теперь же разделы районов вынесены в основное меню, а их новости попадают в общую ленту.
Таким образом, благодаря соблюдению «правила 3 кликов», пользователь быстрее может найти то, что ему нужно, а значит и продлить свое пребывание на сайте. Это также благоприятно повлияет на рейтинг разработанных сайтов в поисковой выдаче, поскольку юзабилити для пользователя — один из важнейших факторов ранжирования в поисковых системах.
В рамках работ по базовой оптимизации были сформированы динамически формирующиеся карты сайтов в формате .xml (файл sitemap.xml). Однако стандартный механизм формирования карты сайта, имеющийся на платформе 1С-Битрикс, был не способен корректно формировать sitemap.xml из-за особенностей структуры разработанных сайтов.
Для создания sitemap.xml был разработан собственный механизм, учитывающий особенности структуры сайтов, обеспечивающий автоматическое построение sitemap.xml и его обновление при изменении структуры любого из сайтов (добавление/удаление страниц и разделов).
4. Обеспечено удобное и понятное для пользователей представление информации.
Информация на сайтах максимально чётко структурирована — практичная веб-навигация интуитивно понятна и позволяет пользователям быстро получить нужную информацию.
Предусмотрен удобный просмотр медиаматериалов: фотоальбомов, видеозаписей, документов.
Добавлены новые разделы, в частности, «Гостям города» — раздел для приезжих, содержащий сведения о памятниках, транспорте, гостиницах и телефоны экстренных служб:
Появился раздел «Электронная библиотека», в котором можно ознакомиться с книгами разных лет о городе Улан-Удэ:
Впервые появилась интерактивная карта, на которую нанесены метки по различным объектам категорий «Городское хозяйство», «Культура», «Образование», «Туризм» и «Спорт»:
Объекты и категории можно фильтровать: 
По клику на метку открывается информация о конкретном объекте:
На официальный сайт внедрена интерактивная карта, с помощью которой пользователи могут ознакомиться со схемой избирательных округов и найти свой избирательный участок. Редактор может указать границы и задать цвет области избирательного округа в Административной части сайта (такого типа свойства нет в стандартном функционале Битрикса, мы самостоятельно разрабатывали этот тип).
Также на официальном сайте реализована интерактивная карта районов города с подробной детализацией — ссылками на паспорт района, сведения об Администрации, полезную информацию и др.
Отдельно обозначены предстоящие мероприятия и важные объявления:
Внедрены «инструкции по применению» (от «Как получит разрешение на полет над городом?» до «Как оформить участок для садоводства?»)
Для удобства посетителей нашими специалистами было добавлено свойство «Контент официальный/информационный сайт», позволяющееделать перекрестный контент между разделами официального и информационного сайтов, если они содержат идентичную информацию. Таким образом пользователи могут получать ключевые сведения о городе, находясь на любом из двух сайтов. Кроме того, это существенно сокращает время наполнения портала контентом.
Требования заказчика к функционалу портала отличались от типового функционала Битрикса и в краткий период платформа была кастомизирована до требуемого уровня.
5. Создать удобную и функциональную систему поиска по сайтам Портала.
Новый городской портал имеет улучшенный поиск внутри разделов c подсказками и «умными» фильтрами:
Помимо стандартного окна поиска, здесь реализован поиск по тегу и блок наиболее частых запросов.
Чего же удалось добиться?
В результате получилось именно то, что требовалось, и так, как мы вместе с заказчиком это видели: тщательно подобранный и четко структурированный дизайн для госструктуры — были созданы концепции дизайн-макетов, разработаны прототипы с ux-элементами, подготовлен ui-кит, и, по успешному согласованию с заказчиком, произведена дальнейшая фронтенд-разработка и интеграция в платформу. Использована многосайтовость на разных доменах — два сайта функционируют абсолютно автономно на одной платформе 1С-Битрикс, реализована возможность автоматически выстраивать структуру администрации, имеется встроенный лендинг, внедрены 4 интерактивные карты.
Все требуемые работы были выполнены в полном объеме и с надлежащим качеством, а главное, результатом довольны все!
Еще больше кейсов и полезных материалов ищите на нашем сайте: RuNetSoft
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
