Створення масштабного інформаційного порталу та оптимізація його структури 8 Створення масштабного інформаційного порталу та оптимізація його структури 9 Створення масштабного інформаційного порталу та оптимізація його структури 10

Нац. Поліція України

#Кейси #Галузеві рішення

Команда Evergreen розробила новий формат інформаційного порталу Національної Поліції України. У нас уже був досвід взаємодії з державною службою України та Консультативної Місією Європейського Союзу. Однак даний проект зайняв у нашому портфоліо особливе місце, оскільки довелося враховувати ряд непростих технічних моментів:

Технічні моменти

Клієнт & Замовник

Крім складнощів технічного характеру, в цьому проекті був адміністративний нюанс: клієнт ≠ замовник. Тому для затвердження багатьох пунктів проекту були потрібні десятки дозвільних підписів різних інстанцій обох суб’єктів взаємодії.

Клієнт проекту: державна служба, Національна Поліція України.

Вимога клієнта: створити цікавий, інтуїтивно зрозумілий сайт – інформаційний портал національної поліції та всіх її регіональних відділень.

Замовник проекту, він же спонсор: Консультаційна місія Європейського Союзу, EUAM (The European Union Advisory Mission).

Мета EUAM в Україні: підтримати реформування сектора громадянської безпеки в цілому. Національної Поліції, в тому числі.

Джерело фінансування: КМЕС із бюджету ЄС.

Цілі й задачі проекту

ЦІЛІ ПРОЕКТА

Сайт Имидж

Створити сайт Національної поліції України. Зробити його зручним і зрозумілим

Покращити імідж поліції, підвищити рівень довіри серед українців

ЗАДАЧІ

Створення масштабного інформаційного порталу та оптимізація його структури 11

Вирішити всі технічні проблеми та незручності, які були притаманні старому веб-сайту:

  • перейти з СУБД Oracle на більш просте рішення;
  • замінити програмне забезпечення адміністрування сайту з існуючого десктоп-клієнта на веб-платформу (CMS);
  • забезпечити можливість легко й швидко додавати новини;
  • розробити адаптивну версію порталу та всіх регіональних сайтів.
Створення масштабного інформаційного порталу та оптимізація його структури 12

Реструктурувати розділи сайтів для:

a. більш швидкого пошуку;
b. зручної та зрозумілої навігації

Створення масштабного інформаційного порталу та оптимізація його структури 13

Продумати новий дизайн згідно з Брендбукм Нової Поліції та її потребами.

Створення масштабного інформаційного порталу та оптимізація його структури 14

Забезпечити можливість наповнення сайтів наступними видами медіаконтенту:

  • відео з youtube
  • фотографії
  • прямі трансляції
  • стрічка новин
  • блог під велику кількість статей.

РІШЕННЯ ВІД EVERGREEN: СТВОРЕННЯ САЙТУ, ЗРОЗУМІЛОГО І ЗРУЧНОГО ДЛЯ ВСІХ КОРИСТУВАЧІВ

Функціональний і мобільний сайт. 24 сайти – одна адмінка

Для зручності співробітників НПУ ми змінили ПО адміністрування сайту на просту у використанні CMS. Вона відмінно підходить під сайти з великими обсягами інформації та об’єднує регіональні сайти з головним (npu.gov.ua). Систему управління базами даних (СКБД) Oracle ми замінили на MySQL, яка значно простіше у використанні.

Огляд сайту

Була створена базова модель регіональних сайтів, від якої успадковується кожен наступний регіональний сайт. Обласні сайти ми розмістили на піддоменах, наприклад: hk.npu.gov.ua (Харківська область). В рамках створеної системи адміністратор порталу може створити новий сайт, призначити регіонального адміністратора і контент-менеджерів. Платформа розмежовує сферу діяльності регіональних менеджеровов і регламентує їхні права. Кожен із них бачить і править тільки свій сайт, який дозволяє керувати контентом сайту будь-якої області із загальної адмінпанелі. Новий сайт створюється з адмін-панелі лише кількома кліками мишки.

Кожен із сайтів доступний українською, російською і англійською мовами.

Досягнення

Всі регіональні версії сайту НПУ мають ідентичний дизайн і структуру, але різний контент. Для оперативного наповнення сайту з місця події ми створили автономну мобільну версію. Співробітники прес-служб різних областей мають можливість заходити в адміністративну панель із мобільного телефону й оперативно оновлювати інформацію. Новини можна швидко експортувати з Word і перетворювати в редакторі на html або text формат.

Всі сайти, що входять у портал, адаптовані під будь-які десктоп і мобільні пристрої. Після створення “версії для слабозорих” сайт можна повною мірою охарактеризувати як доступний кожному користувачеві.

Адаптивний дизайн

Зручний сайт, спрощена структура, зрозуміла навігація, продуманий ux дизайн

Старий сайт був гранично перевантажений зайвими категоріями і пунктами меню, що неймовірно ускладнювало навігацію. Ми змінили структуру сайту, спростили, розставили категорії по пріоритетності. Тепер основна інформація доступна за кілька кліків.

Навигация сайта

Результат:

  • меню з 6 категорій замість 12
  • 41 пункт замість 63
  • 3 секунди замість 10 для знаходження потрібного пункту

Результат

Важно

У хедері головної сторінки

  • контактний телефон гарячої лінії
  • кнопка швидкої подачі заяви
  • карта для переходу на регіональний сайт.

Хедер сайту

Дуже важливо

Мета більшості користувачів – подать заяву.

  • Кнопка подачі заяви дублюється чотири рази
  • Телефон гарячої лінії – двічі

Ці елементи дублюються в нижній частині сайту. Також у футері:

  • питання й відповіді
  • вакансії
  • інформація про реформи
  • докладка карта сайту

Футер сайта

Імідж поліції та довіра українців: забезпечуємо приємним UI

Дизайн розроблено згідно Guideline нової поліції. Він містить ті ж стилі, кольори та шрифтові пари, які присутні на всіх знаках відмінності, бордах і документах.

Кольори і шрифти

Основа естетики нового дизайну – простота й лаконічність. Для покращення сприйняття інформації використовується мікроанімація. Важливі текстові блоки оптимізовані й подані у вигляді інфографіки.

Детали

Архітектурне рішення UI дозволяє ергономічно розташувати величезну кількість статей, новин, фото/відео матеріалів. Це легко консолідує новини з 24 регіонів у новинну стрічку головного сайту.

У стрічці новин у порівнянні з попередньою версією додані:

  • категорії новин
  • пошук по даті
  • підказки у вигляді тегів
  • іконки, які вказують на наявність фото/відео матеріалів у статті.

Новости на сайте

ТЕХ-СТЕК

  • Open source CMS + multidomain modules
  • MySQL
  • NodeJS
  • Gulp

ЮЗАБІЛІТІ АУДИТ - UX, ПЕРЕВІРЕНИЙ ЛЮДЬМИ

Команді Evergreen удалося створити простий і зручний сайт для 3-х категорій користувачів:

Категорії користувачів

Кожен пункт меню було затверджено й перевірено на зручність відповідним департаментом. Меню та вся навігація сайта кілька разів тестувалась на користувачах і покращувалась.

Основні тести та їхні результати:

Чи легко знайти сайт поліції в іншій області

Завдання: знайти сайт поліції в Вінницькій області. Історія пошуку по клікам:

  1. Карта України
  2. Посилання “Обласні сайти” в правому кутку хедера
  3. Пункт меню “Контакти”
  4. Пошук

Будь-який із цих варіантів приводить до потрібного посилання.

Висновок: проблем зі знаходженням сайта іншої області не знайдено.

Навігація сайту

Чи зрозуміло як написати скаргу на поліцейського

Завдання: “Ви хочете поскаржитися на поліцейського, написавши заяву просто на сайті. Ваші кроки…”

Результат: за результатами кліків у відкритому меню стовпчик “Звернення” було перенесено в ліву частину екрану, оскільки читати пункти меню починають зліва направо. Цей пункт дуже важливий, відповідно, він має пріоритетність у розташуванні.

Опитування дало нам розуміння, що назва розділу в попередній версії “Звернення громадян” сприймалась користувачами невірно. Вони припускали, що це – текстова сторінка з законами. Пункт було перейменовано на “Подати звернення”. Ця назва зрозуміла й містить у собі заклик до дії.

Тестування

Як повернутися на головний сайт поліції

Завдання: повернутися з регіонального на головний сайт поліції.

Висновок: жодних ускладнень не виявлено

 Головна сторінка

Чи можна звести нанівець зусилля розробників UX некоректним внесенням контенту?

P.S. Після здачі проекту працівники прес-служби, які не мали досвіду роботи з новим сайтом, розмістили інформацію в тому вигляді, в якому вона була розміщена в попередній версії. У результаті було порушено дизайн сайту і утруднене його функціонування. Команда Evergreen провела з працівниками прес-служби інструктажі та тренінги по наповненню сторінок. На сьогоднішній день є недопрацьовані моменти, але в цілому сайт виглядає практично так, як було задумано дизайнерами.

Ми надаємо консультативну підтримку прес-службі НПУ і раді, що наша співпраця допомагає підтримувати і розвивати сайт.

У наступному проекті ми реалізували для сайту Національної Поліції версію для слабозорих. Про це – у кейсі “Адаптація сайту для людей із вадами зору

Потрібно створити масштабний портал або сайт зі складною архітектурою? Структурувати велику кількість розділів? Або ви бажаєте мобільне управління сайтом прямо з телефону? Пишіть, ми можемо це, і багато іншого.

21.12.2018
Зображення, використані в статті, були взяті з відкритих джерел і використовуються як ілюстрації.
Хочете обговорити ваш проект або замовити розробку?
Надіслати
Цей сайт є українською мовою. Ви можете переключити мову у меню, або зробити це зараз.