1 августа Национальный банк Украины впервые за много лет обновил сайт. По словам представителей банка, в этом сайте использованы новые тренды дизайна, больше внимания уделено визуализации, переработана главная страница, сайт адаптивный и отображается на всех устройствах.

Мы попросили дизайнеров прокомментировать новый сайт НБУ. На наши вопросы согласились ответить:

Олег Карапузов, руководитель отдела UX студии Vintage
Лера Литвин, UI-тимлид в Aimbulance
Артём Морозов, дизайн-директор POPEL Agency

Какие у вас в целом впечатления от нового сайта?

Олег Карапузов 

Дизайн легкий, и первое впечатление — это радость, что сайт обновился и что происходит движение в государственной сфере.

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

Если присмотреться, то на сайте много разных шрифтов, что ухудшает восприятие, и много по мелочам.

Лера Литвин

Редизайн — це завжди чудове рішення для сайтів, яким понад 5 років. Сьогодні багатьом адміністративним порталам необхідний хороший UX- та UI-аналіз.

Звичайно, дизайнери провели велику роботу, портал став зручнішим. Вся інформація тепер розміщена структурно. На головній сторінці зрозуміла навігація. Тепер все погруповано та чисто. Стало набагато легше знайти потрібний сегмент.

Та не зважаючи на те, що цей портал несе інформативний характер — він не є «friendly» з точки зору дизайну. Так, все чистенько, немає ніякого перенавантаження контентом, але якщо говорити про тренди в UI-інтерфейсах — то тут вони не застосовуються.

Артём Морозов

Достаточно современный и в меру аккуратный сайт.

Есть ряд неочевидных плюсов, за которые отдельное спасибо:

  • Есть версия для людей с проблемами зрения (об этом часто забывают на такого рода порталах).
  • Используется шрифт Roboto от Google, который хорошо себя показывает в интерфейсах, быстро загружается и является бесплатным для использования (помним истории о нелицензионном использовании материалов).
  • Очевидно, была попытка сделать «mobile first» проекта с использованием карточек как основного строительного блока сайта, которые идеально вписываются в мобильные экраны и существенно упрощают масштабирование под разные экраны.

При этом есть и очевидные минусы:

  • Большая проблема с акцентами и иерархией элементов на странице — сейчас всё одинаково важное (или неважное, если вы пессимист). В частности — это заслуга плохой работы с отступами и пространством внутри карточек и списков (на чём построена вся система сайта).
  • Есть просчёты с типографикой — использование тонкого начертания (Roboto Light) для малых кеглей, использование для текста слишком светлых серых оттенков, которые тяжело читаются. Или решение разбивать текст в статьях на две колонки на газетный или журнальный манер — что хорошо работает для статичного понятного формата, не всегда хорошо воспринимается цифровой среде.
Вторая колонка уже началась, а её начало (конец первой) глубоко внизу

Хорошо, что не ограничились только рестайлингом и реструктуризацией, но и добавили новые функции порталу.

Как этот сайт выглядит с точки зрения современных трендов дизайна? 

Олег Карапузов

Не увидел тренда как минимум в структурированной подаче, в легкости или простоте языка. То есть, нет ориентации на пользователя. Тут немного остановлюсь. Вот пример:

1. Мобильная версия

Верхнее меню похоже на ребус или на египетские письмена. Можно расшифровать: «Храм, увидишь, спроси на английском, где купить кебаб или гамбургер».

А если серьезно, то слишком много элементов, все в разной стилистике. И часто означают похожие действия. «Кебаб» и «гамбургер» можно соединить в одно меню и все остальное поместить туда.

2. Ориентация на запросы пользователя

Вот что ищут пользователи на сайте НБУ:

А где эта самая популярная информация на сайте?

Небольшой ссылкой среди остальных…

Лера Литвин

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

Артём Морозов

Из относительно трендового на новой сайте НБУ можно назвать уже упомянутый упор на «mobile first» и, тоже относительный, минимализм. В остальном — это достаточно современный стандартный сайт без претензий. Хотелось бы чище и смелее. Можно было бы черпать вдохновение из наработок современных медиа, по типу Quartz, как современный и чистый пример, или Politico, как пример того, что можно вместить много информации в малое пространство, но не потерять в читаемости.

Акценты расставлены умело, а плашки и серый фон не съедают полезное пространство

Но трендовый — не значит безликий, а именно такое ощущение сейчас возникает. Например, сайт Государственного департамента США сочетает в себе черты современного сайта, при этом, сохраняя стилистику и отличительные черты госсайтов США.

Сайт госдепа использует современные приёмы вёрстки, добавляет стиля и характера типографикой, работой с цветом и фирменными узорами

Если бы вы руководили редизайном, какие 3 главных изменения вы внесли бы в старый сайт? Сделали ли это в НБУ?

Олег Карапузов

То, с чего мы начинаем в Vintage, — это исследования. Нужно хорошо проанализировать, что есть сейчас, что работает хорошо, а что плохо, поговорить с целевой аудиторией, выявить потребности. А не просто перерисовать все в блочной структуре.

Мне больше импонирует итерационный подход, когда сайт постепенно улучшают небольшими точечными доработками. Тогда это не так травматично для аудитории, и можно сохранить KPI как минимум на одном уровне. Люди ведь не любят изменений, когда их любимая рубрика (хоть и на сайте НБУ) теперь находится в другом месте (раньше ведь было удобнее).

Артём Морозов

Самой существенной проблемой старой версии была непонятная структура, плохая подача содержимого и ужасная типографика.

Типовой пример подачи информации на старой версии сайта

Стало ли лучше? Естественно. Можно ли было сделать ещё лучше? Всегда.

Что бы вы сделали иначе, если бы руководили редизайном этого сайта?

Олег Карапузов

Ответил уже в предыдущем вопросе. Исследования — что реально необходимо пользователям, с какими болями сталкиваются… И сделал бы людей счастливее :)

Лера Литвин

Особисто я спеціалізуюся на оформленні візуальних систем сайтів, та у кожному проекті намагаюсь знайти щось особливе, що може задати стиль всьому дизайну. Наприклад, у НБУ є унікальна емблема, яку можна було б цікаво обіграти, є корпоративний колір, до якого пасувало б додати декілька допоміжних.

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

Хтось може заперечити, що використання цікавого підходу до дизайну не завжди доречне, що банк не може бути яскравим, емоційним, використовувати ілюстративний матеріал, «стильні» фотографії. Все мусить бути структурним та строгим. Але підходи теж бувають різні. Люди, не дивлячись на їхній вік чи статус, вчаться сприймати ті тренди, які задають саме дизайнери. Якщо завжди сидіти в рамках та боятися, що кожний крок вправо чи вліво остудиться — то можна постійно розробляти посередні дизайн-рішення.

Артём Морозов

Это всегда очень сложный и комплексный вопрос. На него тяжело отвечать, не зная внутренних мотивов, метрик и задач, которые ставили перед собой создатели новой версии, не понимая сроков и предоставленных ресурсов.

Да, хотелось бы, чтобы это выглядело и работало по-настоящему современно, было ещё человечнее и понятнее.

Как и в случае с концептом сайта Верховной Рады, и здесь мне казалось бы уместным использование общей дизайн-системы. Тот же шрифт Proba Pro сразу бы добавил характера, а использование общих принципов упростило бы жизнь пользователям государственных порталов.


А что вы думаете о новом сайте НБУ? Делитесь впечатлениями в комментариях!