Інклюзивність, інтерактивність та інші юзабіліті-фішки сайту «Дія», за які користувачі полюбили держсервіс
«Дія» — це бренд цифрової держави в Україні, що представлений у вигляді веб-порталу і мобільного застосунку та розроблений Міністерством цифрової трансформації. Історія «Дії» розпочалась ще у 2019 році: тоді Президент України Володимир Зеленський озвучив ідею держави у смартфоні. Згідно із початковою концепцією, за допомогою зручного мобільного застосунку громадяни могли брати активну участь в управлінні державою та зручно з нею комунікувати.
Команді «Дії» вдалося зробити зручний та безпечний онлайн-сервіс держпослуг для українців шляхом спроб та помилок, тестувань та постійних оновлень. У цій статті ми проаналізуємо юзабіліті рішення, які допомогли «Дії» досягти бажаного результату, та визначимо, які з цих ідей можуть стати в нагоді маркетологам при розробці комерційних веб-сайтів.
Фото: lexinform.ua
«Дія»: актуальна статистика сайту та сервісу
Цікаві факти та статистика порталу
- У 2023 році 64% українців користувалися державними е-послугами. «Дія» була визнана найпопулярнішим сервісом серед опитаних, адже їй віддали перевагу 51% українців. Для порівняння: у 2021 році цей показник складав 30%, а у 2020 — 13%.
- Наприкінці 2023 року портал налічував понад 100 послуг та понад 4,4 млн активних користувачів.
- Серед найзатребуваніших послуг порталу: реєстрація та закриття ФОП, подання заяви про шлюб, замовлення дублікатів свідоцтв та витягів, реєстрація ТОВ.
- У 2020 році веб-сайт «Дія» отримав Red Dot Design Award та став першим національним продуктом з такою відзнакою.
- У 2022 році бренд отримав дві нагороди на премії D&AD Awards у сфері дизайну та реклами. Так, проєкт став найкращим у категорії Local Solution та Digital Design.
- «Дія» отримала перше місце на Eurobest Awards — премії за досягнення у сфері комунікацій та реклами. Проєкт визнано найкращим серед 640 робіт від кандидатів з 31 країни в номінації Creative Business Transformation.
SEO-довідка: найважливіші показники сайту «Дія»
Згідно з даними Ahrefs, загальна відвідуваність порталу у лютому 2024 року склала 813,4 тис. Країни надходження трафіку — Україна (98%) та Польща (1%).
Швидкість завантаження веб-сайту складає 2,1 секунди для мобільних пристроїв та настільних комп’ютерів, що є оптимальним показником.
Показник відмов становить 47,91%, а середня кількість сторінок, переглянутих за один сеанс, — 6,40. Це свідчить про затребуваність веб-порталу серед користувачів та наповнення сайту якісним і інформативним контентом.
ТОП-9 фішок веб-сайту «Дія», які можна взяти на замітку
«Дія» раз і назавжди змінила уявлення про держпослуги. Складний і часто бюрократизований процес оформлення документів в офлайні перетворився у простий та зрозумілий user flow онлайн. Сьогодні на прикладі «Дії» ми можемо побачити готові диджитал-рішення, які допомагають спростити клієнтський шлях в складній ніші.
Але зауважимо, що держсервіс — це не про продажі, адже його мета надавати послуги населенню та служити потребам громадян. Саме тому радимо вивчати цей кейс не буквально, а для пошуку нових цікавих рішень у веб-дизайні. Сайт «Дії» — чудова ілюстрація того, як юзабіліті може стати ефективним інструментом в руках маркетолога для побудови якісної комунікації з цільовою аудиторією.
Дизайн веб-сайту
Одним із трендів UI/UX дизайну у 2024 році є мінімалізм — чим лаконічніше виглядає веб-сайт, тим простіше користувачеві знайти необхідну інформацію та виконати цільову дію. При цьому помилково вважати, що мінімалізм — це про нудний чорно-білий дизайн, в якому немає чим зачепитись оку.
Веб-сайт «Дії» впевнено поєднує найкращі принципи мінімалістичного дизайну із зручністю та елегантністю. Головна сторінка зустрічає логотипом — простим та читабельним, який чудово підходить для використання у будь-яких сучасних форматах.
Цікавим є колірне рішення: оскільки «Дія» об’єднує всі державні сервіси, конкретного брендового кольору немає. Так, залежно від контексту використано різні колірні схеми — статичні або динамічні градієнти, кольори спектра для ситуативного використання тощо.
Шрифт e-Ukraine був спеціально розроблений для використання державними сервісами. Гарнітура складається з трьох накреслень: для заголовків, основного тексту та накреслення для назв державних закладів. Шрифт є інклюзивним, адже завдяки особливій будові літер інформація сприймається легко всіма користувачами.
Також варто звернути увагу на унікальні зображення із високою роздільною здатністю. Зокрема на веб-сайті представлено і відеоконтент: наприклад, короткий тизер про те, що таке «Дія».
Дизайн-система «Дії» доступна у відкритому доступі: тут можна ознайомитись із основними принципами, а також завантажити окремі елементи.
Висновок: гарний дизайн — це той, який залучає й утримує увагу користувача. Дотримуйтесь принципу послідовності: усі елементи мають бути узгоджені між собою, а також відповідати фірмовому стилю бренду. Зокрема шрифти мають бути розбірливими, а їхня рекомендована кількість — не більше трьох. Також радимо попрацювати над створенням якісного візуального контенту: унікальні відео та фото сформують думку про вас як професійний та авторитетний бренд.
Навігація сайту
Мета навігації веб-сайту — направити користувачів туди, куди їм потрібно, за якомога меншої кількості кліків. Це особливо важливо для об’ємних ресурсів (найчастіше — інтернет-магазинів), які мають багато сторінок, категорій, товарів тощо.
Наразі портал «Дія» налічує більше 100 послуг, однак зрозуміла навігація забезпечує швидкий доступ до необхідної інформації та автоматизацію користування держпослугами:
- У верхній частині веб-сайту відображені основні категорії. Дві з них («Послуги» та «Ще») оснащені спадним меню — при натисканні на розділ користувач може ознайомитись більш детально з усіма категоріями.
- Уся інформація та послуги розділено за двома основними категоріями: «Громадянам» та «Бізнесу», що зменшує час пошуку та спрощує користувацький досвід.
- Головна сторінка оснащена функцією пошуку: у відповідному текстовому полі можна ввести запит, що цікавить, та за лічені секунди отримати необхідні результати.
- Корисним є блок із «Популярними послугами»: якщо користувач шукає одну із них, то це також зменшує час пошуків. Всі непріоритетні послуги та посилання винесені в окремий розділ «Ще».
- Футер містить посилання на основні категорії веб-сайту, а також додаткову інформацію про обробку персональних даних, посилання на маркетплейси для завантаження мобільного застосунку, соціальні мережі тощо.
- На головній сторінці є блок «Q&A», який надає відповіді на найпоширеніші запитання та економить час на пошуку інформації.
- Інтуїтивно зрозумілі кнопки реєстрації та входу в особистий кабінет.
- Додатковою перевагою є те, що користувач може повернутися до головної сторінки з будь-якої точки взаємодії. Цьому сприяє клікабельний логотип, що присутній на всіх сторінках веб-сайту.
Структура сторінки відрізняється залежно від типу контенту. Наприклад: новини містять блок із останніми матеріалами та кнопки «Поділитись у соціальних мережах». Сторінки із послугами містять короткий опис, вартість, блок із найпоширенішими запитаннями. Ключова перевага у тому, що всі сторінки містять лише найважливішу інформацію.
Важливо зазначити, що така структура є не дуже дієвою для бізнесу: якщо «Дія» має відповісти на питання чітко та провести по складним держпослугам швидко та легко, то задача бізнесу — заробляти й продавати. Натомість таку фішку можуть взяти на замітку сайти страхових або фінансових послуг, де складну інформацію потрібно подати у максимально зрозумілому вигляді.
Висновок: у контексті користувацької взаємодії простота є ключовою. Як було зазначено, мета навігації веб-сайтом полягає в тому, щоб користувач міг досягти своєї цілі за якомога меншої кількості кроків. Надто складна навігаційна структура призводить до нерозуміння та плутатини: у результаті користувач покидає веб-сайт, а рейтинг у пошуковій видачі падає. Отож, подбайте про зручне та інформативне меню, наявність хлібних крихт та функції пошуку.
Якщо ваш сайт вже встиг накопичити дані для аналізу, то використайте їх, щоб вивчити шлях ваших клієнтів. Найпопулярніші з точки зору продажів послуги або категорії товарів завжди варто розміщувати у зоні видимості, щоб зменшити час для їхнього пошуку відвідувачами.
Адаптивність
Гарно розроблений UX-дизайн для мобільних пристроїв може вплинути на повернення близько 70% користувачів. Згадайте себе: швидко зайти на веб-сайт набагато зручніше через смартфон, який завжди під рукою. З огляду на це важливо дбати про адаптивність веб-дизайну: так, сторінка має коректно відображатися і підлаштовуватись під різні розміри екранів користувача.
Веб-сайт «Дії» адаптивний: усе, що ми можемо сказати у цьому блоці 🙂
Насправді це дійсно так: швидкість завантаження веб-сайту для мобільних пристроїв не відрізняється від десктопної (2,1 секунди). Усі зображення та інтерактивні елементи відображаються коректно. Серед відмінностей між версіями — відображення головного меню. Так, у мобільній версії веб-сайту використано гамбургер-меню.
Висновок: з огляду на те, що 60% глобального інтернет-трафіку надходить із мобільних пристроїв, важливо дбати про адаптивний веб-дизайн. Добре розроблений мобільний веб-сайт — це не тільки про покращену користувацьку взаємодію. Серед інших переваг — позитивний вплив на пошукову оптимізацію сайту та підвищення рейтингу у результатах пошуку.
Інтерактивність
Інтерактивний веб-дизайн дозволяє створити захопливий користувацький досвід, а також покращити візуальну привабливість ресурсу. На веб-сайті «Дія» інтерактивність реалізована за допомогою окремих елементів — іконок, банерів, слайдерів. Що стосовно прикладів?
При наведенні курсора на текстову складову, блоки виділяються нижнім підкресленням.
Hover-ефект: при наведенні курсора на картинки, вони масштабуються та відтворюються.
Автоматичне відтворення елементів: наприклад, смартфон, що демонструє мобільний застосунок «Дія».
При наведенні курсору на банер на головній сторінці елемент «оживає» та пропонує завантажити мобільний застосунок.
Окремо підсвічуються вибрані блоки при наведенні курсору.
При наведенні курсору кнопки змінюють колір: наприклад, з чорного на рожево-зелений градієнт.
Висновок: використовуйте інтерактивні елементи у веб-дизайні, якщо вони можуть органічно доповнити інформацію про ваш продукт або його функції. При цьому уникайте принципу «інтерактивність заради інтерактивності», де окремі елементи перетягують на себе увагу та плутають відвідувачів. Переконайтеся, що користувачам легко переміщатися сайтом, а сторінки товарів/послуг та категорій не перегружені контентом. Також уникайте складних дизайнерських рішень, які передбачають виконання багатьох дій для досягнення мети.
Інклюзивність
Інклюзивний дизайн базується на простій концепції: розробити інтерфейс, який буде зручним та доступними якомога ширшій аудиторії. Відвідувачі можуть мати фізичні, сенсорні, ментальні та інші порушення, але це не має ставати на заваді взаємодії з вашим ресурсом.
Розробники веб-сайту «Дії» це розуміють та поступово впроваджують функції, що засновані на принципах інклюзивності. Наприклад, користувачі із порушенням зору можуть налаштувати кольори та розмір шрифту. Ця опція доступна на сторінці гіду по сайту.
Висновок: згідно з даними Інституту Беймарда, 94% найбільших сайтів електронної комерції все ще не відповідають вимогам інклюзивності. Нехтування цими принципами призводить до втрати певної частки цільової аудиторії, зниження конкурентоспроможності на ринку та лояльності користувачів до бренду. Про те, яким вимогам інклюзивності має відповідати сучасний веб-сайт, читайте у нашій статті.
Зручний процес авторизації
Згідно із статистикою, близько 88% користувачів свідомо залишають реєстраційні форми або заповнюють у них не релевантну інформацію. Серед основних причин такої поведінки: низька швидкість завантаження сторінки, незрозумілий процес реєстрації, велика кількість полів для заповнення, відсутність шляху «назад» тощо.
Як процес авторизації реалізований на веб-сайті «Дії»? По-перше, користувачеві надано вибір: можна скористатися одним із трьох способів, які не вимагають заповнення довгих форм. Серед варіантів — авторизація за допомогою системи ID.GOV.UA, застосунку «Дія» або особистого ключа. У будь-якому випадку платформа супроводжує користувача підказками, що полегшує та пришвидшує процес.
При цьому сторінка доступна двома мовами — українською та англійською, а відповідні кнопки «Увійти» та «Зареєструватись» розташовані у верхній видимій частині веб-сайту. Залежно від обраного способу, увесь процес займає від 1 до 5 хвилин.
Висновок: незалежно від того, у якій ніші ви працюєте, авторизації на сайті є важливою як для зручності користувачів, так і для збільшення вашого прибутку. Розділіть тривалий процес на прості кроки та супроводжуйте користувача вичерпними підказками на кожному етапі. Надайте відвідувачам веб-сайту вибір: найшвидшою та найзручнішою є авторизація через Google акаунт та соціальні мережі. При цьому важливо пам’ятати про інклюзивність: неправильно заповнені поля краще позначати відповідними іконками, аніж кольорами.
Можливість налаштування файлів Cookie
Файли cookie — це невеликі текстові файли, що містять унікальні дані для ідентифікації пристрою в мережі. І хоча головна мета «печива» полягає у полегшенні цифрового досвіду користувачів, багатьом така опція не припадає до смаку. Так, 65% респондентів опитування Deloitte висловлюють глибоку стурбованість щодо надмірного використання файлів cookie та їхнього потенційного впливу на персональні дані.
Натомість файли cookie є важливими для коректної роботи веб-сайту. Згідно із положеннями GDPR, користувачі мають право обирати — прийняти умови, відмовитись чи виставити індивідуальні налаштування щодо файлів cookie.
«Дія» у цьому контексті є яскравим прикладом того, як варто робити: при відвідуванні веб-сайту у лівому куточку вспливає банер із вибором «Дозволити всі» або «Налаштувати». При цьому ж надано стислий опис того, як веб-сайт збирає, обробляє та використовує ці дані.
Висновок: веб-сайт має містити банер із файлами cookie, на якому чітко зазначено, що ви використовуєте «печиво». Опишіть тип файлів cookie, які використовує веб-сайт, та їх призначення. Детальна інформація про файли cookie та їхні дії має бути доступна користувачам у політиці конфіденційності або політиці щодо файлів cookie.
Інтеграція з соціальними мережами
Згідно із даними Statista за жовтень 2023 року, у світі налічувалося 5,3 млрд користувачів Інтернету (65,7% світового населення). З них 4,95 млрд (або 61,4% населення світу) були користувачами соціальних мереж. Соціальні мережі — невід’ємна складова маркетингової стратегії сучасного бізнесу. Натомість якщо основна присутність вашого бренду зосереджена на веб-сайті, чому б не скористатися цим для розширення аудиторії у соцмережах?
Майже на кожному сучасному веб-сайті («Дія» не виняток) ви знайдете посилання на офіційні акаунти бренду у соціальних мережах. Бренд цифрової держави присутній у Facebook, Instagram, Telegram, Viber, YouTube. До речі, найбільша частка трафіку веб-сайту припадає саме на останню платформу відеоконтенту.
Відповідні іконки розташовані у футері веб-сайту. При наведенні курсору іконка підсвічується рожево-зеленим градієнтом.
Висновок: якщо ваш бренд активно розвиває акаунти у соціальних мережах, тоді варто розмістити посилання на них на офіційному веб-сайті. Це корисно з огляду на полегшення користувацької взаємодії. Якщо відвідувачі зацікавились вашим брендом з органічного пошуку, тоді посилання на всі канали присутності бренду допоможе долучитися до нього швидше і легше. Іконки із відповідними посиланнями мають бути впізнаваними та видимими: не обов’язково підписувати кожну з них, адже логотипи соцмереж і так впізнавані.
Служба підтримки
Цікаво, що 3 з 4 споживачів стверджують, що погана взаємодія з компанією може зіпсувати їм день. По той бік екрану перебувають такі самі живі люди, яким необхідно бути почутими вчасно, зручно і результативно. Наявність служби підтримки — одна із необхідних умов для успішного ведення бізнесу. Так, за виникнення проблеми клієнт може звернутись по допомогу на зручній для нього платформі. І ви маєте про це подбати.
«Дія» діє не лише на словах: на веб-сайті розташована спеціальна іконка. При натисканні відкриваються платформи, за допомогою яких можна зв’язатися із менеджером служби підтримки — Telegram, Viber, Messenger.
Посилання веде на бота, за допомогою якого можна ознайомитись із доступними послугами, відповідями на найчастіші запитання, зв’язатися із менеджерами, залишити заявку про проблему тощо. Наприклад, у Telegram це виглядає наступним чином:
Висновок: чим краща якість послуг підтримки, тим швидшим буде розвиток бізнесу. Підвищення рівня задоволеності клієнтів збільшує ймовірність повторних покупок, а також зміцнює лояльність до бренду та покращує його репутацію. Зокрема робота із відгуками (як позитивними, так і негативними) допоможе компанії розробити пропозиції, що будуть відповідати очікуванням та вимогам клієнтам.
Спростіть користувацький досвід за допомогою багатоканальної служби підтримки: це може бути чат безпосередньо на сайті, боти у соціальних мережах, форми для зворотного зв’язку тощо. Для економії ресурсів чимало компаній вдаються до автоматизованих ШІ-рішень.
Наостанок
UX/UI складова є надзвичайно важливою для розвитку та функціонування бізнесу загалом. Веб-сайт — це обличчя вашого бренду та візитівка, з якої можна дізнатися усе та навіть більше.
«Дія» — яскравий приклад простої комунікації складних послуг. Тому бізнесам зі складними для сприйняття широкою аудиторією продуктами, серед яких зокрема банки, юридичні та страхові компанії, юзабіліті рішення державного сервісу можуть стати в нагоді для покращення власних сайтів.
Проте варто зважати на той факт, що бізнес та державні інституції хоч і обоє надають послуги, але мають різну мету. Тому, очевидно, що не всі рішення, які є ефективними на сайті «Дії», будуть такими ж ефективними для сайтів з надання комерційних послуг.
Але дотримання правил і стандартів веб-дизайну неодмінно призведе до найкращих результатів. Головне — діяти!
