Історично так склалося, що сайти українських державних органів не люблять контактувати зі своїми користувачами. Вони відлякують надто креативним дизайном, а якщо не вдається — ховають потрібну інформацію за дрібним кеглем і складним синтаксисом.

Виправити ситуацію взялася українська ІТ-компанія Kitsoft. Вони вже встигли привести до людського вигляду більше 20-ти державних сайтів, створили для них єдину дизайн-систему і не зупиняються. Що це діється, ми розпитали у креативної директорки компанії Марії Єфремової.

Читайте також: Україна-Естонія-В’єтнам: як Hexagon agency відкрили офіси у різних частинах світу

Креативна директорка Kitsoft Марія Єфремова

Компанія Kitsoft вже більше 20-ти років на ринку, але покращувати онлайн-діалог між державою та громадянами взялися після Революції гідності. До цього вони працювали з деякими державними проєктами, а саме з 2014-го обрали для себе таку спеціалізацію.

«Ринок став демократичнішим, з’явилося більше можливостей брати участь у тендерах і вигравати їх, — пояснює вибір креативна директорка Kitsoft Марія Єфремова. — Такі замовники специфічні, буває багато складнощів, але є й плюси. Рівень продуктів, якими вони користувалися раніше, настільки низький, що в будь-якому разі ти зробиш квантовий скачок до покращення ресурсу».

Kitsoft надає повний пакет ІТ-послуг: від досліджень бізнес-процесів до супроводу створеної системи. У компанії працює 40 людей і лише троє дизайнерів, один з них — джуніор. Цього не вистачає, зізнається креативна директорка, але намагаються організувати роботу якомога ефективніше. З базовими дослідженнями допомагають бізнес-аналітики, а на етапі наповнення сайтів долучаються контент-менеджери.

Марія Єфремова та дизайнер Артем Лигін 

Зазвичай на проєкт для міністерств у команди іде до пів року: «4-6 місяців — нормальний термін, щоб зробити все у спокійному темпі». Стільки зайняв вебсайт для Міністерства освіти і науки: «Там була вмотивована команда, приємний візуальний стиль і донорська організація, яка пришвидшувала процеси», — пригадує Марія Єфремова.

Деякі сайти вдається зробити ще швидше, як-от для Морської адміністрації. На нього пішов місяць, адже організація молода — без валізи попередніх напрацювань.

Тим часом проєкт для Міністерства аграрної політики та продовольства тривав більше року, половину цього часу складали технічне завдання. «Це був складний проєкт, — пригадує Марія. — Дуже повільно приймалися рішення, бо у міністерстві намагалися залучити всіх своїх співробітників: близько 30-ти людей. Врешті прийшли до консенсусу і результатом задоволені».

Скріншоти сайтів держорганів, які створили в Kitsoft

«З часом ми виробили свої правила співпраці з державним сектором:

• Ніколи не надсилаємо макети поштою, навіть якщо дуже просять. Натомість наполягаємо на особистій зустрічі і тільки там поступово доносимо свою ідею.
• Якщо просто показати картинку з новим дизайном, то замовник зазвичай попросить погратися зі шрифтами, поміняти місцями елементи, даватиме якісь рекомендації.
• Стараємось виявити людину, яка приймає рішення, на самому початку і максимально залучати його до всього процесу, а не лише на фінальному етапі.
• Зазвичай проєктом займається група людей, а вже наприкінці виявляється, що рішення приймають не вони, є якийсь big boss. Він може подивитися і сказати: «Мені не подобається, давайте все переробимо». Коли мали менше досвіду, це було великою проблемою. Нам казали: «Поміняйте місцями», і ми міняли. Так могло тривати безкінечно.
• Враховуємо, що потрібно давати замовнику більше часу для реакції на наші запити».

«Вчили писати і не викладати документи у сканованих картинках»

Під час створення перших держсайтів у Kitsoft закладали в основному час на розробку, програмування, збір модулів і дуже мало — для обробки контенту. Згодом зрозуміли: інформації на сайтах міністерств так багато і викладена вона настільки недолуго, що просто перенести всі тексти на новий ресурс не можна. Вирішили навчати працівників держорганів роботі з контентом, фактично — вчили їх писати.

«Зрозуміли, що не можемо цього не робити, бо фінальний продукт буде неякісним, — розповідає Марія. — Довго я сама цим займалася, але об’єм роботи надвеликий, особливо для міністерств. Тому пізніше взяли контент-менеджера».

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

«Ми зрозуміли, що ці люди точно не зможуть підтримувати сайт. Розробити програмну частину — пів діла, але прослідкувати, щоб вона не перетворилась на смітник, — теж наша робота. Побачивши це все, ми почали писати листи і в донорську організацію, яка спонсорувала цю розробку, і до в.о. міністра з проханням виділити одну компетентну людину, яка відповідатиме за сайт».

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

«Ми вчили писати, не викладати документи у сканованих картинках, не публікувати тексти зображеннями і не спілкуватися з користувачами законами. Більшість міністерств дають лінки на закони і вважають, що таким чином висвітлили тему. Ми ж дістаємо з них розумні думки, переписуємо зрозумілою мовою, а в кінці додаємо посилання. Крім того, виробили свої стандарти, де розміщувати корисну інформацію і ту, що необхідна, але не цікава».

Дизайн-система: стандарти Великої Британії vs українські реалії

Після такого спеціального навчання людей для кількох міністерств у Kitsoft зрозуміли, що їхнього ресурсу не вистачить, аби займатись цим точково. Так дійшли до необхідності розробки єдиного дизайн-стандарту для українських держсайтів. Він мав зняти відразу багато питань. Щоб створити його, вивчали досвід США, Естонії, Данії, Нової Зеландії, а найбільше — Великої Британії.

«У Великій Британії дуже потужна дизайн-система і загалом команда, яка працює над діджиталізацією сервісів. Наприклад, там ретельно виписані вимоги до досліджень. Якщо ми можемо лише рекомендувати дослідження, то у них це пряма вимога закону. Якщо команда розробників береться за якийсь британський держсервіс, вони мають за певним чеклистом надати велику кількість артефактів: як визначали цільову авдиторію, які проводили дослідження, які отримали результати. Навіть зобов’язані у своїх фокус-групах дотримуватися принципу інклюзивності. І тільки після цього команду допускають до власне розробки сервісу.

Ми до цього поки не готові: ні ринок (небагато компаній здатні провести якісні дослідження), ані замовник (в основному через бюджети). Зараз у тих проєктах, де беремо участь, грошей окремо на дослідження взагалі немає. Дуже складно переконати замовника в необхідності цього етапу, тому стараємось розподіляти час так, аби провести хоча б базовий аналіз».

Оскільки з власними повномасштабними дослідженнями не складається, у Kitsoft для дизайн-системи активно користувалися результатами британських: «Вони досліджують кожну дрібничку: чи одно-, чи двопіксельною робити рамочку навколо поля, чи потрібно нумерувати кроки в анкеті, як краще помічати обов’язковість полів — зірочками чи підписувати необов’язкові і так далі. Результати є у вільному доступі».

Врешті компанії вдалося поєднати досвід розвинених країн з нашими реаліями й створити єдину дизайн-систему державних сайтів України. Тут рекомендують, як проводити дослідження, проєктувати вебресурси, наповнювати їх текстами, дотримуватися єдиного вигляду сайтів та принципу доступності. Останньому — надають особливої ваги.

«Раніше у нас було нормативно закріплене поняття «версія для людей з вадами зору». Йшлося про альтернативну версію сайту: чорно-білу і з двома кнопками регулювання розміру шрифту. Цим вона й обмежувалася. Але й Велика Британія, і більшість розвинених країн зрозуміли, що такий підхід не працює. Люди з вадами слуху, рухової активності, проблемами зі швидкістю сприйняття інформації теж повинні мати доступ до цих сайтів. Прийшли до того, що основна версія має бути відразу доступною для всіх, і не потрібні ніякі альтернативні.

Вже основна версія має бути достатньо контрастною, з використанням великого кеглю і помітними зонами для кліків. У своїх рекомендаціях ми пропонуємо набір інструментів, за допомогою яких можна перевірити макети сайту і виявити проблемні місця. Також потрібно тестувати сайт на роботу з екранними дикторами. Це дозволить користуватись ресурсом людям, які взагалі не бачать».

Приклад рекомендацій дизайн-системи щодо принципу доступності сайтів

У дизайн-системі всі свої рекомендації зі створення сайтів для користувачів з порушеннями сприйняття Kitsoft прописує детально і зрозуміло. У компанії керувалися міжнародним стандартом із забезпечення доступності до вебконтенту WCAG і консультувалися з українською спільнотою людей з інвалідністю.

Частково рекомендації Kitsoft вже зафіксував у своїй постанові Кабмін. Це можна вважати «перемогою», пояснює дизайнерка: «Держоргани працюють ефективно тільки тоді, коли є норма, де все затверджено законодавчо. Тепер починаючи працювати з новими замовниками, ми на першій ж зустрічі рекомендуємо ознайомитися з дизайн-системою. Відпадає багато питань, бо маємо не просто якісь рекомендації від приватної компанії, а стандарт, затверджений постановою Кабміну й обов’язковий до виконання. Це великий крок для інших компаній, які теж можуть виходити на цей ринок. Там багато роботи».

Рекомендації дизайн-системи щодо іконок для держсайтів

Рекомендації щодо подання інформації

Саме прийняття постанови зайняло близько року. За цей час команда протестувала багато рішень і навіть встигла помітити деякі недоліки. Наприклад, не дуже вдалою ідеєю вважають зафіксувати у постанові конкретні кольори: «Навіть у своїй роботі вже трохи хочемо їх поміняти. Зрозуміли, що базовий синій варто зробити більш яскравим. Сподіваємось, це увійде в наступні редакції».

Та зміни до постанови КМУ — складний процес. Команда поки не придумала механізму, як його спростити і пришвидшити, проте збирає відгуки і рекомендації з поліпшення системи: «Наприклад, зараз використовуємо єдиний шрифт Proba Pro — від українського дизайнера Андрія Константинова. Ми його придбали для доменної зони gov.ua і виходили з принципу використання єдиного шрифту для всіх сайтів. Проте спільнота дизайнерів рекомендує додати в пару ще один. Як зараз це врегулювати нормативно, ще не придумали, але хочеться дослухатися до таких порад».

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

«Зараз робимо сайт для Антимонопольного комітету, там робоча група — біля 15 людей, кожен зі своїми смаками. На першій зустрічі, коли я розповіла, що таке дизайн-код, усі сказали: «Слава Богу, ми не будемо 2 місяці сперечатися про колір кнопочок чи шрифти».

До переваг дизайн-системи слід також додати й те, що вона вберігає від візуальних помилок. Наприклад, забороняє використовувати банери, що навіть зафіксовано у постанові КМУ (хоч і без прямого називання): «Банер — це текст на картинці, а він не доступний для екранних рідерів, режиму відключених зображень, пошукових систем, автоматичного перекладу в браузері, — пояснює Марія. — Також у дизайн-системі є вимога, що будь-які елементи не мають самовільно перемикатися. Швидке миготіння у людини зі схильністю до нападів може викликати судоми. Крім того, не маємо права обмежувати у часі людей, що повільно сприймають інформацію».

Проте не всі дослухаються до порад. Інколи на сайтах з’являються ті ж банери через некомпетентність адміністраторів або й самих розробників. «На жаль, багато компаній досить вільно трактують дизайн-систему. Часом її сприймають як набір візуальних правил, не проводять досліджень, не виявляють потреб авдиторії, а просто розмальовують інтерфейс у якісь кольори. Зараз сайтів за дизайн-системою з’являється все більше: є вдалі, є — не дуже. Це початок, у будь-якому разі ми маємо зробити свої помилки».

Кілька прикладів, що конкретно вдалося змінити у сайтах:

• «Система тегування». Вперше її використали для Міністерства інфраструктури. З його допомогою людина може знаходити всю інформацію на потрібну тему: не окремо новини, нормативні акти та публікації, а все, наприклад, про автотранспорт. Більшість міністерств захотіло працювати за таким принципом, тому зараз для нас це вже стандарт.
• Розміщуємо інформацію зручно для користувача, а не модератора сайту. Раніше людині потрібно було знати всю структуру міністерства, щоб знайти потрібну їй інформацію. У держорганах звикли, що все відштовхується від їхньої структури і потреб. Думка, що має бути зручно не для них, а кінцевому користувачеві — злам шаблону.
• «Поле онлайн» на сайті Мінагрополітики. Інструмент допомагає дізнатися, скільки посіяно чи зібрано врожаю у кожній області. Дуже оцінили ресурс журналісти: раніше, щоб отримати цю інформацію, їм доводилось щоразу надсилати запити».

Замість підсумків

Зараз команда взялася за ще один амбіційний проєкт — єдину платформу для створення будь-якої держпослуги без залучення програмістів. Крім того, за прикладом Великої Британії, планують перевести всі сайти держорганів на єдину платформу gov.ua. У компанії розробили ресурс, за допомогою якого держустанови можуть створювати собі з готових шаблонів підсайти. Це дозволить їм суттєво економити кошти і протягом дня створювати зручний ресурс.

Та головним досягненням креативна директорка Kitsoft вважає єдину дизайн-систему: «Це правильний курс, в якому варто рухатись, — каже вона. — Далі плануємо розвивати напрямок: створювати окремі форми, сторінки, шаблони сайтів, щоб максимально пришвидшувати розробку нових сервісів. Залишається багато роботи із впровадження принципів доступності у життя, бо розмалювати кнопочки легко, але не всі тестують сайт на коректність табуляції, верстки і роботи екранного диктора, наприклад. Хочеться також мати можливість робити більше досліджень, спостерігати, як користуються системою, які проблеми виникають, і покращувати її».

Фото: Наталія Азаркіна. 

Раніше Telegraf.Design досліджував, чи дійсно шрифти 1000-гривневої банкноти — авторські.