Инклюзивность, интерактивность и другие юзабилити-фишки сайта «Дія», за которые пользователи полюбили госсервис
«Дія» — это бренд цифрового государства в Украине, представленный в виде веб-портала и мобильного приложения и разработанный Министерством цифровой трансформации. История «Дії» началась еще в 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 разработан специально для использования государственными сервисами. Гарнитура состоит из трех начертаний: для заголовков, основного текста и для названий государственных учреждений. Шрифт инклюзивный, ведь благодаря особому строению букв информация воспринимается легко всеми пользователями.
Также стоит обратить внимание на уникальные изображения с высоким разрешением. В частности, на веб-сайте представлен и видеоконтент: например, короткий тизер о том, что такое «Дія».
Дизайн-система «Дії» доступна в открытом доступе: здесь можно ознакомиться с основными принципами, а также загрузить отдельные элементы.
Вывод: хороший дизайн — это тот, который привлекает и удерживает внимание пользователя. Соблюдайте принцип последовательности: все элементы должны быть согласованы между собой, а также соответствовать фирменному стилю бренда. В частности, шрифты должны быть разборчивыми, а их рекомендованное количество — не более трех. Также рекомендуем поработать над созданием качественного визуального контента: уникальные видео и фото сформируют мнение о вас как профессиональном и авторитетном бренде.
Навигация на сайте
Цель навигации веб-сайта — направить пользователей туда, куда им нужно, при наименьшем количестве кликов. Это особенно важно для объемных ресурсов (чаще всего интернет-магазинов), которые имеют много страниц, категорий, товаров и т.д.
В настоящее время портал «Дія» насчитывает более 1000 услуг, однако понятная навигация обеспечивает быстрый доступ к необходимой информации и автоматизацию использования госуслуг:
- В верхней части сайта отображаются основные категории. Две из них («Услуги» и «Еще») оснащены раскрывающимся меню — при нажатии на раздел пользователь может ознакомиться более подробно со всеми категориями.
- Вся информация и услуги разделены по двум основным категориям: «Гражданам» и «Бизнесу», что уменьшает время поиска и упрощает пользовательский опыт.
- Главная страница оснащена функцией поиска: в соответствующем текстовом поле можно ввести интересующий запрос и за считанные секунды получить необходимые результаты.
- Полезен блок с «Популярными услугами»: если пользователь ищет одну из них, то это также уменьшает время поисков. Все неприоритетные услуги и ссылки вынесены в раздел «Ещё».
- Футер содержит ссылки на основные категории веб-сайта, а также дополнительную информацию об обработке персональных данных, ссылки на маркетплейсы для загрузки мобильного приложения, социальные сети и т.д.
- На главной странице есть блок «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 составляющая чрезвычайно важна для развития и функционирования бизнеса в целом. Веб-сайт — это лицо вашего бренда и визитная карточка, из которой можно узнать все и даже больше.
«Дія» — яркий пример простой коммуникации сложных услуг. Поэтому бизнесам со сложными для восприятия широкой аудиторией продуктами, среди которых банки, юридические и страховые компании, юзабилити решения государственного сервиса могут пригодиться для улучшения собственных сайтов.
Однако следует учитывать тот факт, что бизнес и государственные институты хоть и оба оказывают услуги, но имеют разную цель. Поэтому, очевидно, что не все решения, эффективные на сайте «Дії», будут такими же эффективными для сайтов по предоставлению коммерческих услуг.
Но соблюдение правил и стандартов веб-дизайна обязательно приведет к наилучшим результатам. Главное — действовать!
