Все статьи

Два главных тренда российских банковских сайтов

Основа статьи — доклад Андрея Клёца на РИФ-2018 (24 апреля)

Встречалось, конечно, и некоторое разнообразие, попытки экспериментировать с расположением меню (справа или даже в центре), с дизайном и информационной архитектурой. Но первые две строчки в меню, независимо от направленности банка, всегда занимали пункты «Новости», «О банке» и им подобные.

Сайт Альфа-Банка, 2004 год, типичен для своего времени

Сейчас ситуация изменилась. Оказалось, что новости банка интересно читать только журналистам, акционерам и финансовым аналитикам, а подавляющее большинство посетителей хочет подобрать подходящий продукт или войти в интернет-банк. Банковские сайты превратились в канал продаж, и это существенно определило их облик. Причем облик этот довольно стандартный и узнаваемый, поскольку большинство банков при оформлении сайтов следуют вполне определенным трендам. О них я и расскажу дальше.

Проблема: обилие информации

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

Продуктовая линейка — не единственная проблема разработчика банковского сайта. Важно учитывать мнение множества внутренних агентов влияния. За место на сайте борется каждый продуктовый департамент. Пресс-служба, HR, все, вплоть до хозуправления хотят свою страницу, а лучше целый раздел. И все эти разделы надо как-то уложить в структуру сайта и адекватно отобразить в интерфейсе.

Верхнее меню на банковском сайте может насчитывать 6-7 пунктов и даже больше: надо отобразить все сегменты и не забыть про внутренних агентов влияния

Возможно, именно поэтому большинство банковских сайтов выглядят сейчас как братья-близнецы: баннер с вертушкой на главной странице и многоуровневое верхнее меню. Разница лишь в корпоративных цветах и продвигаемых продуктах.

Тренд 1: баннеры

Грубо говоря, сайт банка можно представить как набор лендингов: благодаря контекстной рекламе очень много посетителей попадают не на главную страницу, а сразу на внутренние. Лендинг же по законам жанра должен (вроде как) начинаться большой иллюстрацией. Поэтому первое, что практически наверняка увидит посетитель банковского сайта — это баннер. Впрочем, кажется, что это характерно не только для банков, но и для рунета в целом.

Если постараться, можно найти западные сайты с одним-единственным баннером. Вот, например, британский банк Вёрджин: один статичный баннер. Просто, понятно, двигайся, посетитель, дальше вниз за информацией.

Но если вы захотите сделать так же на своем сайте, в дело вмешаются сотрудники продуктовых и рекламных департаментов. Им нужно больше баннеров. Так появляется баннерная карусель. На экране пролистывается несколько рекламных изображений, навигация осуществляется по точкам или при помощи стрелок. На момент написания статьи лидером был Россельхозбанк: карусель на их сайте содержит целых 15 баннеров. Интересно, кто-нибудь просматривает их все?

Россельхозбанк: 15 баннеров на главной странице

Рекламщики никогда не останавливаются на достигнутом: всегда можно придумать что-нибудь еще. Вот, например, на сайте банка «Открытие» для баннеров использованы не изображения, а короткие видеоролики, причем они сменяются автоматически, и никаких элементов управления нет.

Видеоролики в баннерах на сайте «Открытия»

Кажется, видеобаннеры — это дальнейшее развитие баннерного безумия. Кроме «Открытия» их сейчас используют БИНБАНК, Райффайзенбанк и Альфа-Банк. Интересно, что произойдет раньше: эти банки от них откажутся или же они появятся на других сайтах?

Чем мне так не нравятся баннеры? Во-первых, на компьютерах с небольшими экранами, например, на стандартном тринадцатидюймовом ноутбуке, страницу ниже баннера просто не видно. Приходится скроллить вниз в надежде найти хоть что-то интересное. Или обращаться сразу к верхнему меню. А во-вторых, из-за засилия баннеров банковские сайты теряют свою индивидуальность. Складывается впечатление, что их все делала одна и та же студия по одному и тому же шаблону. Возможно, стоит подумать о том, как двигаться дальше, и не искать новые форматы баннеров, а придумать что-нибудь им на замену.

Тренд 2: многоуровневое «выпадающие» меню

Если баннеры — решение хоть и традиционное, но, возможно, требующее переосмысления, то многоуровневое меню — это действительно оптимальное решение для большого банка с широкой аудиторией. Оно приемлемо для всех агентов влияния внутри банка и понятно посетителям. Экспериментировать стоит, только если у банка есть специфические задачи (развитие какого-то направления), специфическая аудитория (например, пенсионеры) или если есть ресурсы на поиски.

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

Типичное многоуровневое «выпадающее» меню на сайте Альфа-Банка

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

Многоуровневое выпадающее меню на сайте Райффайзенбанка

При этом оказывается, что «хотелками» бизнеса все-таки можно пожертвовать ради простоты интерфейса и удобства пользователей. Например, на сайте Тинькофф Банка меню содержит всего два уровня и относительно немного пунктов.

Лаконичное двухуровневое меню на сайте Тинькофф Банка

Мы пойдём другим путём: нестандартные решения

Некоторые банки экспериментируют со своими интерфейсами, возможно, пытаясь отойти от описанного здесь шаблона «выпадающее меню + карусель с баннерами». Иногда это получается удачно, иногда не очень.

Банк может попытаться «спрятать» или как-то переосмыслить меню. Например, вплоть до недавнего времени на сайте Росбанка при нажатии на любой пункт меню открывалось модальное окно, которое работало как мини-сайт, причем это был единственно возможный способ навигации. Сейчас это решение осталось только на внутренних страницах сайта. На главной странице двухуровневое меню начало работать привычным образом, а модальное окно убрали под кнопку «всё меню». На самом деле, это крайне необычное решение, и его жизнеспособность надо проверять на тестированиях.

Мегаменю в модальном окне на сайте Росбанка

БИНБАНК пошел еще дальше: они в принципе убрали меню из основной части экрана, оставив там только огромную карусель с видео-баннерами. Зато в правый верхний угол добавили целых две кнопки, каждая из которых открывает свое меню. Кажется, это не самое лучшее решение: интересно, сколько посетителей сайта замечают эти кнопки и догадываются на них нажать. Да и сама идея использовать в одном интерфейсе две метафоры меню без подписей выглядит как ничем не обоснованное нарушение всех паттернов проектирования и определенно запутывает пользователя.

Две кнопки, вызывающие два разных меню, на сайте БИНБАНКА

Сайт банка «Юникредит» в целом вписывается в общую картину, но с некоторыми существенными нюансами. Верхний уровень меню спрятан в выпадающий список, что, может и неплохо (бизнесу обычно нечего делать на банковском сайте, разве что в интернет-банк зайти). Но вот навигация для частных лиц устроена очень странно. Из привычных рубрик здесь только «кредиты», а вот что такое «банковские услуги» или где, например, искать дебетовые карты, совершенно непонятно.

Нестандартное меню на сайте банка Юникредит

Довольно нестандартное решение можно увидеть на сайте МКБ. Навигация представляет собой сочетание ссылок и гамбургера. Основное меню расположено в одну колонку, а важные пункты выделены шрифтом. Правда, надо постараться найти вход в интернет-банк и привыкнуть к его расположению, но в старой версии сайта кнопка входа тоже была нестандартно размещена. А еще это один из немногих сайтов, где баннеры можно переключать не только по нажатию на маленькие кружочки, но и на стрелки.

Сайт МКБ: меню расположено справа, представляет собой сочетание ссылок и гамбургера

Гадание на трендах

На самом деле, главный тренд — это быстрое развитие технологий, и поэтому совершенно невозможно предсказать, в какую сторону будут дальше развиваться банки и банковские сайты. Может быть, банки превратятся в финансовую экосистему для клиентов, предоставляя различные услуги, нетипичные для банков, но связанные с деньгами, расчётами и обменом информацией. К этой модели, кажется, приближаются Сбербанк и Тинькофф с их виртуальными мобильными операторами и другими амбициозными проектами. В таком случае проблема информационной перенасыщенности банковских сайтов встанет еще острее.

Раздел, посвященный мобильному оператору Тинькофф Мобайл, на сайте банке

С другой стороны, вполне может оказаться, что некоторые банки через несколько лет перестанут продавать свои услуги самостоятельно. Продажей банковских продуктов будут заниматься сайты-агрегаторы, своего рода небанковские финансовые супермаркеты. Тогда, наверное, основная функция банковских сайтов будет заключаться в информационной поддержке клиента, который уже выбрал продукт в таком «супермаркете».

«Финансовый супермаркет» на сайте banki.ru — вполне возможно, новый тренд

А может быть, через несколько лет часть банков откроют свои API и превратятся в технологические платформы: их услуги будут распространятся по отдельности под разными брендами. Тогда сайты банков полностью изменятся, так как изменится их целевая аудитория: это будут не физические лица или предприниматели, которые ищут наиболее подходящий для себя продукт, а различные компании, работающие в области финансовых технологий.

Cтартап Revolut: мультивалютные платежи без комиссии

Сейчас есть предпосылки для развития в любом из этих направлений, поэтому нам остается лишь наблюдать, анализировать и пытаться угадать, куда ветер дует.

Что в итоге

Сами по себе тренды — это не хорошо и не плохо. Благодаря им посетители сайтов привыкают к определенной структуре интерфейса: наверху всегда двухуровневое меню, начинающееся с раздела «частным лицам», внизу баннеры, вход в интернет-банк, как правило, справа вверху. Однако не стоит использовать какой-то тренд в интерфейсе только потому, что «все так делают» и тем более не стоит доводить его до абсурда, как в примерах с каруселями из 15 баннеров и мегаменю в отдельном окне. Нужно оценивать жизнеспособность каждого решения: при помощи юзабилити-тестирований, при помощи веб-аналитики и A/B-тестов на готовом сайте. Тестируйте, анализируйте и пытайтесь найти свой оптимальный путь в мире трендов и стандартов отрасли.

Тэги

Поделиться статьёй

Поделитесь своим мнением
Стоила ли статья потраченного времени?