Как увеличить конверсию банковского сайта
25 точек роста конверсии на примере Банка Казани
В этой статье кратко разобран сайт Банка Казани на предмет ошибок снижающих конверсию. Даны 25 наглядных рекомендаций повышения конверсии, которые применяют ведущие банки в Росси и мире. Внедрив эти рекомендации можно значительно увеличить конверсию из простого посетителя сайта в реального клиента банка. Итак приступим.
Главная страница Банка Казани / bankofkazan.ru
Главная страница Банка Казани / bankofkazan.ru
1. Защита персональных данных
Начнём с базовых вещей, при первом визите на сайт Банка Казани отсутствует уведомление об использовании файлов cookie и защите персональных данных. При этом, персональные данные – это не только адрес электронной почты (e-mail) или номер мобильного телефон. Это ещё и данные банковской карты, паспортные данные и другие данные которые посетители вводят на сайтах банковских организаций. И если в случае потери e-mail или телефона в интернет-магазине – в худшем случае человек получит спам. То в случае потери паспортных данных или данных банковской карты – это может грозить потерей денег. А это уже куда более серьезные потери. Поэтому, необходимо защищать персональные данные и уведомлять об этом всех посетителей сайта. Для наглядности пример того как Сбербанк уведомляет о защите персональных данных - всплывающее окно внизу сайта.
Сбербанк защита персональных данных и cookie
Всплывающее окно с информацией о защите персональных данных на главной странице Сбербанка / sberbank.ru
И второй важный момент, который касается персональных данных – это то, что с 1 июля 2017 года административная ответственность за нарушение 152 федерального закона «О персональных данных» повысилась в несколько раз. Максимальный штраф для юридических лиц был повышен до 75 000 рублей, вместо 10 000 рублей ранее. Но тут есть нюанс, Роскомнадзор вправе выписывать штрафы за каждый факт нарушения, а это значит, что за каждую страницу на которой запрашиваются данные – может быть наложен штраф, который в сумме может составить уже не 75 000 рублей, а все 300 000 рублей. Это вторая причина, по которой стоит указать всплывающее окно с предупреждением об использовании файлов cookie.
2. Онлайн-чат
Второе что бросается в глаза при первом взгляде на главную страницу сайта Банка Казани – это большая, яркая и мигающая иконка онлайн-чата в правом-нижнем углу. Тесты показывают, онлайн-чаты способны увеличить конверсию, но при правильной подаче. Под правильной подачей я имею ввиду отсутствие раздражающей и прыгающей иконки чата, которая перекрывает контент.
Онлайн-чат на сайте Банка Казани
Онлайн-чат на сайте Банка Казани / bankofkazan.ru
Для сравнения, так реализован онлайн-чат у Сбербанка. Как видно, иконка небольшого размера (не перекрывает контент), не мигает и не прыгает (не отвлекает внимание), не кислотно-яркого цвета (не раздражает глаза, так как цвет подобран в тон фирменных цветов).
Онлайн-чат на сайте Сбербанка
Онлайн-чат на сайте Сбербанка / sberbank.ru
Также непонятно для чего нужна вторая иконка онлайн-чата (красный круг ниже) на сайте Банка Казани, если все функции (чат и заказ обратного звонка) можно разместить под одной иконкой со знаком вопроса (пример онлайн-чата на сайте Сбербанка), тем самым не захламляя страницу сайта. Более того, сам чат реализован с ошибками и при раскрытии появляется за контентом, соответственно не сразу понятно где он и как с ним работать. Что тоже является ошибкой, так как человек не может написать в поддержку, если у него возникает вопрос. А значит повышается риск ухода с сайта.
Онлайн-консультант на сайте Банка Казани
Онлайн-чат на сайте Банка Казани / bankofkazan.ru
3. Иконки
3.1. Детализация иконок. Сейчас на большинстве страниц сайта Банка Казани есть иконки и они плохо проработаны. Вопрос даже не к дизайну, а к качеству изображений, именно к детализации иконок. Для примера, обратите внимание границы круга иконки раздела "Акции и предложения".
Иконки разделов на сайте Банка Казани / bankofkazan.ru
Иконки разделов на сайте Банка Казани / bankofkazan.ru
Подобные плохо проработанные иконки создают ощущение неряшливости. Есть множество тестов показывающих снижение конверсии при плохом качестве изображений на сайте. В качестве хорошего примера, обратите внимание на смайлы эмоджи (emoji) не смотря на их малый размер, у них очень хорошая проработка и детализация. Что особенно актуально для экранов смартфонов с высоким разрешением (Retina).
Cмайлы эмоджи (emoji) / emojipedia.org
Cмайлы эмоджи (emoji) / emojipedia.org
3.2. Устаревшие иконки. Вторая проблема связанная с иконками на сайте Банка Казани – это их неактуальность. Например, в иконке «Онлайн-сервисы» используется логотип браузера Internet Explorer от Microsoft, который не выпускается c 2015 года. Почему это важно? Потому что информация об онлайн-сервисах должна отображать современный подход, а вместо этого данный сервис на сайте выглядит устаревшим и формирует впечатление о банке как отстающем игроке на рынке.
Иконки разделов на сайте Банка Казани / bankofkazan.ru
Иконки разделов на сайте Банка Казани / bankofkazan.ru
3.3. Количество иконок. Третья проблема связанная с иконками – это их количество. Сейчас на главной странице 12 иконок, которые не умещаются в одном экране.
Иконки разделов на сайте Банка Казани / bankofkazan.ru
Иконки разделов на сайте Банка Казани / bankofkazan.ru
Почему большое количество иконок это плохо? Возможно, вы слышали о знаменитом исследовании психологов Шины Айенгар и Марка Леппера. Они выяснили, что таблица с 24 сортами варенья привлекает меньше внимания, чем таблица, содержащая всего 6 сортов. Если человек видел много информации на экране, то вероятность того, что он что-то купит, уменьшалась примерное в 10 раз. Так же и с иконками, при большом количестве снижается их кликабельность. Поэтому количество иконок лучше сократить до 6-ти. Этого можно добиться, например, объединив разделы «Расчетный счет онлайн» и «Расчетно-кассовое обслуживание» в один. Аналогично объединить разделы «Акции и спецпредложения» и «Бонусная программа» и так далее. Если все иконки важны (на самом деле нет) то можно распределить их по двум основным направлениям «Частным лицам» и «Бизнесу», по 6 иконок в каждой.
3.4. Иконки социальных сетей. Ну и закончу тему с иконками четвертой проблемой - это иконки социальных сетей.

3.4.1. Качество иконок социальных сетей на сайте Банка Казани плохого качества (плохо проработаны детализация и форма иконок).
Иконки социальных сетей на сайте Банка Казани / bankofkazan.ru​
Иконки социальных сетей на сайте Банка Казани / bankofkazan.ru
3.4.2. Устаревшие иконки. Так у социальной сети Вконтакте логотип с русской буквой «В» изменился на английские буквы «VK» ещё в 2012 году. При том, что обновленный логотип в хорошем качестве и большом разрешении можно бесплатно скачать на сайте социальной сети и легально использовать.
Руководство по использованию логотипа социальной сети ВКонтакте / vk.com/brand
Руководство по использованию логотипа социальной сети ВКонтакте / vk.com/brand
3.4.3. Призыв к действию. Рядом с иконками не хватает призыва к действию. Некоторые люди (например, менее опытные пользователи старших поколений) глядя на иконки социальных сетей могут не понять для чего здесь эти иконки? Что нужно сделать с ними? Может это кнопки сделать репост данной страницы? Но если добавить призыв к действию «Связаться с нами» или «Подписывайтесь на нас», то станет гораздо понятнее. Вот например какие призывы к действию рядом с иконками социальных сетей указывают на своих сайтах американские банки Chase и Bank of America.
Иконки социальных сетей на сайте Bank of America / bankofamerica.com​
Иконки социальных сетей на сайте американского банка Bank of America / bankofamerica.com
Иконки социальных сетей на сайте американского банка Chase / chase.com
Иконки социальных сетей на сайте американского банка Chase / chase.com
Так гораздо понятнее и пользователи быстрее смогут начать взаимодействие с компанией в социальных сетях. Как говорит один из самых известных юзабилити-специалистов Стив Круг: «Не заставляйте меня думать».
4. Шрифты
На сайте Банка Казани для текста одновременно использованы:
  • 4 различные гарнитуры (вида) шрифтов,
  • 8 различных кеглей (размеров) шрифтов,
  • 6 различных цветов шрифтов.

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

4.1. Кол-во шрифтов. Как правило, наиболее гармонично сочетаются 2 шрифта. Классическая шрифтовая пара состоит из шрифтов с засечками и без. Принято считать, что шрифты без засечек больше подходят для заголовков, а шрифты с засечками для основных объемных текстов. Якобы засечки увеличивают контраст между буквами и направляют взгляд по строке, из-за чего читая шрифт без засечек, мозг тратит больше времени на то, чтобы опознать букву, потому что ее форма не такая отличительная. Но дизайнер Тинькофф банка Юлия Кондратьева собрала различные тесты и выяснила, что для обычного человека отличий почти нет. Поэтому можно использовать любые шрифты, главное минимизировать их количество и гармонично сочетать. Аналогичную рекомендацию даёт и компания Apple для разработчиков.
Рекомендации Apple по выбору шрифтов / developer.apple.com/design​
Рекомендации Apple по выбору шрифтов / developer.apple.com/design
4.2. Кегль шрифта. Аналогичный подход и к размерам шрифта, старайтесь минимизировать большое количество различных размеров шрифта в тексте. Один из самых удобных и красивых сайтов с лонгридами Medium.com справляется с 3 основными кеглями:
  • 16px - для сносок. Минимальный кегль для текстовых страниц;
  • 21px - (минимум 18px) для основного текста. лучший размер шрифта для начала. Вы не распечатываете документ Word с одним интервалом; ты пишешь для людей, сидящих в паре футов от своих десятилетних мониторов.
  • 34px - (минимум 21px) для заголовков. Поначалу такой размер может показаться неудобно большим, но взгляните на Medium.com
Кегль шрифтов на сайте Medium.com / Erik D. Kennedy
Кегль шрифтов на сайте Medium.com / Erik D. Kennedy
4.3. Цвет текста. К цветам текста тот же подход. Желательно не злоупотреблять многообразием цветов и сохранять высокий контраст между цветом текста и цветом фона. Потому, что сейчас на сайте Банка Казани 6 различных цветов текста и часть текста плохо читабельна из-за низкого контраста с цветом фона.
Низкий контраст текста (2:92:1) на сайте Банка Казани / bankofkazan.ru
Низкий контраст текста (2:92:1) на сайте Банка Казани / bankofkazan.ru
Если для вас текст читабелен, это ещё не значит что он также читабелен для слабовидящих людей. Поэтому не стоит забывать и о людях со слабым зрением и делать текст более контрастным. Важный нюанс, чем меньше размер шрифта (кегль) тем больше должна быть контрастность. Apple рекомендует использовать контрастность не ниже 3:1.
Рекомендации Apple по цвету и контрасту / developer.apple.com/design
Рекомендации Apple по цвету и контрасту текста / developer.apple.com/design
5. E-mail в шапке сайта
Сегодня не так много людей, кто пишет электронные письма в компании, потому что скорость ответа может достигать от нескольких часов до нескольких дней. Гораздо быстрее и проще связаться через онлайн-чат или позвонить. Поэтому адрес электронной почты лучше убрать в специализированный раздел «Контакты» или в футер (подвал) сайта, где его смогут найти те пользователи, которым понадобится адрес электронной почты банка. Тем самым появится возможность освободить драгоценное пространство первого экрана сайта и не рассеивать внимание пользователей на множество элементов. Вместо адреса электронной почты можно указать, например, ссылку на меры по борьбе с распространением коронавирусной инфекции (об этом ниже).
Адрес электронной почты в шапке сайта Банка Казани / bankofkazan.ru
Адрес электронной почты в шапке сайта Банка Казани / bankofkazan.ru
6. Поиск по сайту
Аналогично адресу электронной почты из шапки сайта желательно убрать поле с поиском. Вместо этого, сократить данное поле до иконки в виде лупы (увеличительного стекла) и спустить эту иконку ниже, в меню. Вот как это реализовано на сайте Сбербанка
Поле поиска в шапке сайта Банка Казани / bankofkazan.ru
Поле поиска в шапке сайта Банка Казани / bankofkazan.ru
Вместо этого, можно сократить данное поле до иконки в виде увеличительного стекла (лупы) и спустить эту иконку ниже, в меню. Вот как это реализовано на сайте Сбербанка
Иконка поиска в меню на сайте Сбербанка / sberbank.ru
Иконка поиска в меню на сайте Сбербанка / sberbank.ru
Это позволит убрать сверху полосу с окном поиска и сэкономить пространство первого экрана главной страницы - самого посещаемого и ценного пространства на сайте.

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

А теперь, давайте посмотрим как поиск работает на другом сайте банка. Например возьмем Альфа банк. Кейс тот же, человек увидел рекламу кредитных карт, она его заинтересовала и он перешел на сайт. Во первых, видим, что поиск реализован в виде иконки, а не поля.
Вот так быстро и просто в 3 клика пользователь нашел то, что ему было нужно. Вот так должен работать поиск на сайте, помогать находить нужное и конвертировать лиды в продажи. А если поиск не работает, то его лучше совсем убрать.
8. Телефон
Для начала, нужен ли вообще телефон на сайте?
Номер телефона в шапке сайта Банка Казани / bankofkazan.ru
Номер телефона в шапке сайта Банка Казани / bankofkazan.ru
Действительно, если обратить внимание, то многие сервисы и магазины, вроде Uber, Wildberries и Ozon не указывают номера своих телефонов на сайте. Так происходит потому, что всё меньше людей используют телефон для связи с компаниями при возникновении вопросов. Так American Express (ТОП-20 банков в США) провела опрос, который показал, что 60% пользователей предпочитают обходиться без телефона при взаимодействии с компаниями. А в случае возникновения вопросов, 24% находят ответ на сайте, а 12% в онлайн-чате.

На основе этих данных, рекомендуется убрать номер телефона из шапки сайта Банка Казани, что ещё и разгрузит операторов колл-центра банка и сэкономит денег на телефонные переговоры. Но не стоит удалять телефон полностью, а лучше перенести его в футер (подвал) сайта. Потому, что из данных того же опроса (American Express) становится понятно, что по мере того, как усложняется проблема, (например, в связи со спорами, жалобами, мошенниками, блокировками), 40% пользователей больше склоняются к общению с реальным человеком по телефону. Поэтому полностью убирать номер телефона с сайта не стоит, но его можно убрать в подвал. Вот как это делает Альфа банк, как видно в шапке сайта номер телефона не указан, он спущен в футер сайта.
Номер телефона спущен из шапки в футер на сайте Альфа банка / alfabank.ru​
Номер телефона спущен из шапки в футер на сайте Альфа банка / alfabank.ru
Номер телефона можно продублировать сверху страницы в тех разделах, где могут возникать вопросы у пользователей. Например на странице с описанием продукта. Вот как дублирует номер телефона Альфа банк на странице с описанием кредитной карты.
Номер телефона появляется в сложных разделах на сайте Альфа банка / alfabank.ru
Номер телефона появляется в сложных разделах на сайте Альфа банка / alfabank.ru
Другие способы улучшения восприятия номера телефона:

  • Разделить на 2 номера, для физических и юридических лиц.
  • Добавить короткий номер, например как номер 900 у Сбербанка. Такой номер проще запомнить, быстрее набрать и попросту выглядит такой номер презентабельнее.
  • Добавить иконку телефонной трубки, чтобы быстро и просто находить телефон даже при беглом взгляде. Ну и чтобы не перепутать номер телефона с другими номерами, например с номером лицензии Центробанка или другими реквизитами.
  • Указать время приема звонков, либо с 09:00 до 19:00, либо 24/7, чтобы человек точно понимал когда можно звонить и не расстраивался по поводу отсутствия ответа при звонке вне рабочее время.
  • Добавить сервис заказа обратного звонка, на случай если пользователь оказался на сайте вне рабочее время колл-центра, или ему неудобно разговаривать (на работе или со спящим ребенком).
  • Номер телефона обязательно стоит делать кликабельным, чтобы набирать номер одним кликом со смартфона.
  • Добавить возможность звонков через интернет-соединение, чтобы звонки были бесплатны из любого региона или страны. А рядом с номером телефона указать подпись "Звонок бесплатный" - это снимет сомнения в том, что звонок будет дорогим.
8. Языковые версии сайта
8.1. Английский язык. Уверен, что многие видели ссылки на версию сайта на иностранных языках, вот например, на сайте Райффайзен банка в правом верхнем углу указана ссылка ENG (English) которая является переключателем на английский язык.
Переключатель языков на сайте Райффайзен банка / raiffeisen.ru
Переключатель языков на сайте Райффайзен банка / raiffeisen.ru
В случае с Банком Казани можно предположить, что банк региональный и английский язык здесь не нужен. Но есть несколько причин в пользу перевода сайта на английский язык:

  • Туризм. Казань входит в тройку самых популярных туристических городов в России, многие туристы иностранные. Плюс здесь регулярно проводятся различные международные мероприятия, от Универсиады до Чемпионата мира по футболу. Поэтому иностранцев в Казани не мало. Они здесь работают, отдыхают и им также требуются финансовые услуги и сайт на английском языке был бы удобен и являлся бы дополнительным конкурентным преимуществом.
  • Иностранные инвесторы. К тому же, версия сайта на английском, может быть полезна для иностранных инвесторов.
  • SEO. Версия сайта на иностранном языке положительно влияет на продвижения сайта в поисковых системах. Чем выше позиция сайта, тем чаще потенциальные клиенты переходят на сайт.
  • Положительный имидж. Сайт на английском языке покажет даже российским посетителям сайта высокий уровень банка.

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

8.2. Татарский язык. Помимо английского языка, сайт Банка Казани желательно перевести на местный, национальный – татарский язык. Потому что Казань это столица республики Татарстан, где второй официальный язык – татарский. И на этом языке разговаривают многие люди, особенно люди старших поколений, а также люди в менее крупных городах республики, где представлены отделения Банка Казани. И так как один из основных владельцев банка – это государство в лице исполкома города Казани, то наверняка в банке обслуживаются работники бюджетных организаций, пенсионеры и другие люди, которые разговаривают на татарском языке. Для всех этих людей было бы удобнее использовать татарский язык, а для банка это стало бы очередным конкурентным преимуществом. И в целом, банк воспринимался бы как "свой" - а это важная характеристика в национальных республиках. Многие американские банки, переводят свои сайт на испанский язык. Так например Bank of America в шапке сайта указывает переключатель на испанский язык. При том, что испанский не является официальным языком в США, а у Bank of America нет отделений в соседней испаноговорящей Мексике. Всё это для испаноговорящих жителей США. Смогли бы они разобраться с сайтом на английском языке, живя в США? Вероятнее всего, смогли бы, но сайт на испанском языке удобнее и "роднее".
Переключатель языков на сайте Bank of America / bankofamerica.com​
Переключатель языков на сайте Bank of America / bankofamerica.com
К слову, Bank of America переводит не только сайт, но и интерфейс в своих банкоматах, в которых помимо английского и испанского языков, есть ещё: русский, французский, китайский, корейский и португальский языки. И подобный перевод есть не только в банкоматах крупных туристических городов США, но и в небольших отдаленных городах страны.
Различные языковые версии интерфейса банкомата, на сайте Bank of America / bankofamerica.com
Различные языковые версии интерфейса банкомата, на сайте Bank of America / bankofamerica.com
9. Геолокация
У Банка Казани есть офисы и банкоматы в разных городах, а не только в Казани и Татарстане. Например, в Москве, Нижнем Новгороде, Набережных Челнах, Нижнекамске и других городах. Поэтому желательно добавить геолокацию на сайте, то есть, определять город пользователя зашедшего на сайт по IP-адресу. Это позволит предоставить индивидуальный сервис, например:

  • Предлагать ближайшие отделения или банкоматы на основе местоположения пользователя;
  • Отображать различные данные для жителей разных городов, скажем разный курс валют;
  • Предлагать индивидуальные маркетинговые акции для разных регионов и так далее.

Пример реализации геолокации на сайте банка ВТБ:
Геолокация на сайте банка ВТБ / vtb.ru​
Геолокация на сайте банка ВТБ / vtb.ru
10. Банкоматы и отделения банка

На сайте Банка Казани есть раздел со списком офисов и банкоматов банка, что уже хорошо. Но данный раздел можно доработать и сделать более удобным:

10.1. Навигация. Добавить возможность построить маршрут до ближайшего банкомата в навигаторе пользователя:
10.2. Схема. Часто банкомат расположен внутри здания, например в торговом центре или аэропорту, в этом случае желательно добавить схему ТЦ с пешим маршрутом до зоны с банкоматами (включая ближайшие зоны на парковке и ориентиры в виде ближайших крупных магазинов, скажем: «Банкомат расположен возле магазина электроники М.Видео») тогда пользователям будет проще ориентироваться и они смогут быстрее найти банкомат.

10.3. Фотография. Дополнить адрес отделения или банкомата можно фотографией, чтобы пользователи могли сориентироваться на местности визуально. Вот как это реализовано в американском банке Wells Fargo:
Фотография банкомата на сайте американского банка Wells Fargo / wellsfargo.com​
Фотография банкомата на сайте американского банка Wells Fargo / wellsfargo.com
10.4. Доступные купюры. Дописать доступные в выбранном банкомате валюты, номиналы купюр и лимиты выдачи. Это повышает удобство, ускоряет навигацию и просто показывает заботу о клиентах. Вот как это реализовано на сайте Тинькофф банка:
Доступные купюры в банкомате на сайте Тинькофф банка / tinkoff.ru​
Доступные купюры в банкомате на сайте Тинькофф банка / tinkoff.ru
11. Слайдер с баннерами
Сейчас на первом экране главной страницы сайта Банка Казани расположен слайдер состоящий из 8 баннеров, что совершенно неэффективно. По результатам тестов, просматриваемость баннеров падает уже на 3-4 баннере. Если с первым баннером в карусели взаимодействуют 28-37% от пользователей зашедших на сайт, то с восьмым баннером лишь 2% пользователей.
Исследование использования карусели на сайтах, Kyle Peatt / smashingmagazine.com
Исследование использования карусели на сайтах, Kyle Peatt / smashingmagazine.com
Первый экран главной страницы сайта – это самое просматриваемое место на сайте, поэтому желание уместить здесь как можно больше информации вполне понятно. Но в стремлении угодить всем, вы рискуете не угодить никому. В этом случае есть 2 эффективных варианта:

11.1. Один баннер. Можно оставить только один баннер с наиболее акутальным предложением на данный момент и менять этот баннер хоть каждый день. Такой подход позволяет сосредоточить максимальное внимание на баннере. Вот, например как это делает Тинькофф банк
Один баннер в первом экране на главной странице сайта Тинькофф банка / tinkoff.ru
Один баннер в первом экране на главной странице сайта Тинькофф банка / tinkoff.ru
А менее приоритетные продукты и услуги спускаются ниже по сайту, вместо размещения баннеров в слайдере:
Менее приоритетные продукты на главной странице сайта Тинькофф банка / tinkoff.ru
Менее приоритетные продукты на главной странице сайта Тинькофф банка / tinkoff.ru
11.2. Несколько баннеров. Другой вариант - оставить слайдер из нескольких баннеров, но разместить в нем только 3-4 баннера. Так, например, реализовано на сайте Альфа банка:
Слайдер с баннерами на сайте Сбербанка / sberbank.ru​
Слайдер с баннерами на сайте Сбербанка / sberbank.ru
Если выбирается путь с несколькими баннерами, то желательно сделать заметную и удобную навигацию (большие и контрастные стрелки по бокам от баннеров) и доступ к каждому баннеру под слайдером (крупные точки или превью с заголовками). Вот как реализован слайдер из 4-х баннеров с превью под слайдером на сайте Альфа банка:
Превью с доступом к каждому из 4-х баннеров в слайдере на сайте Альфа банка / alfabank.ru​
Превью с доступом к каждому из 4-х баннеров в слайдере на сайте Альфа банка / alfabank.ru
11.3. Дизайн баннеров. Рекомендуется обновить дизайн баннеров на сайте Банка Казани в соответствии с современными трендами в дизайне. Потому что текущие баннеры словно отрисованы в начале 2000-х годов: жирные и устаревшие шрифты, "избитые / изъезженные" фотографии из фотостоков, тени у текста, темные "тяжелые" фоны у баннеров и тому подобное.
Баннеры с устаревшим дизайном на сайте Банка Казани / bankofkazan.ru​
Баннеры с устаревшим дизайном на сайте Банка Казани / bankofkazan.ru
Всё это формирует впечатление, что банк устарел, в голове возникают мысли о том, что в банке нет современных удобных сервисов, а в кассе сидят ворчливые пожилые женщины. Поэтому стоит обновить дизайн. А для понимания трендов, можно обратить внимание на дизайн сайтов из списка ТОП-10 банков РФ, или полистать референсы на сайтах вроде Behance или Dribbble. Эти рекомендации позволят повысить кликабельность баннеров и положительно скажутся на имидже банка как современной финансовой организации.
12. Онлайн-банк
Очевидно, что бОльшая часть посещений сайта – это не новые посетители, а текущие клиенты банка, которым необходим доступ в онлайн-банк. В этой связи, было бы уместнее - если форма с полями (логин, пароль) для входа в онлайн-банк располагалась на первом экране главной страницы. Российские банки так не делают, зато делают все американские. Вот пример первого экрана главной страницы банка Bank of America
Вход в онлайн-банк в первом экране главной страницы на сайте Bank of America / bankofamerica.com
Вход в онлайн-банк в первом экране главной страницы на сайте Bank of America / bankofamerica.com
Вполне логичный и работающий приём, который сокращает путь до самого популярного сервиса, облегчает навигацию по сайту и повышает удобство использования.
13. Курсы валют
Сейчас виджет с курсами валют расположен в верхней части сайта Банка Казани.
Виджет с курсом валют на сайте Банка Казани / bankofkazan.ru​
Виджет с курсом валют на сайте Банка Казани / bankofkazan.ru
Обмен валют - это важный параметр для банков, но если взглянуть на весь перечень услуг, то окажется, что обмен валюты не является приоритетным источником прибыли. Поэтому виджет с курсом валют, который находится в верху сайта Банка Казани можно спустить ниже, ближе к футеру, чтобы не перегружать первые экраны сайта информацией. Если посмотреть на сайты Сбербанка или банка ВТБ, то информация о курсе валют у них спущена вниз. А на сайтах Тинькофф банка и Альфа банка информация о курсе валют и вовсе убрана с главной страницы в отдельный раздел на сайте, на который ведет ссылка из футера.
Ссылка на раздел с информацией о курсах валют на сайте Альфа банка / alfabank.ru​
Ссылка на раздел с информацией о курсах валют на сайте Альфа банка / alfabank.ru
Рекомендации по оформлению блока «Курсы валют»:
  • Указать курсы ключевых валют (доллары и евро) и флаги США и Евросоюза для ускорения ориентации;
  • Вместо подписи "Покупка" и "Продажа", лучше указать "Банк покупает" и "Банк продаёт" - так будет гораздо понятнее;
  • Дата и время, для понимания актуальности указанного курса;
  • Выпадающее меню с выбором места обмена, так как зачастую курс в онлайн-банке выгоднее для пользователя чем в отделении. Ну и для банка это также оптимизация расходов, так как не задействуется кассир-операционист. Вот как это реализовано в Райффайзен банке
  • Кнопка «Купить валюту» или "Подробнее" которая отсылает в онлайн-банк для обмена валюты.
    Блок с информацией о курсах валют на сайте банка Открытие / open.ru
    Блок с информацией о курсах валют на сайте банка Открытие / open.ru
    А в разделе с подробной информацией о курсах валют, можно указать следующее:
    • Калькулятор с возможностью смены валют, чтобы облегчить подсчет;
    • Полям в калькуляторе желательно дать понятное название, например "Хочу купить" и "Хочу продать", вместо "Покупка/Продажа";
    • Тренды (зеленые и красные стрелки показывающие рост или падение курса);
    • Скидки - допустим "Курс от 1000$" дешевле;
    • Варианты обмена - онлайн, наличные, безналичные и др.;
    • Полезные статьи на тему обмена валюты. Например советы «Как выгодно менять валюту в путешествии».
    Раздел с информацией о курсах валют на сайте банка Открытие / open.ru
    Раздел с информацией о курсах валют на сайте банка Открытие / open.ru
    Эти рекомендации сделают взаимодействие с информацией об обмене валют понятнее, быстрее и удобнее. С таким интерфейсом приятнее взаимодействовать и к нему хочется возвращаться. Потому что сейчас курс валют на сайте Банка Казани выглядит как виджет из начала 2000-х годов, когда размещали на сайтах похожие виджеты с прогнозом погоды или часами.
    14. Новости
    Сейчас раздел новости на сайте Банка Казани подан монотонно и скучно. Подобный формат подачи не вызывает желания их прочитать.
    Блок с новостями на сайте Банка Казани / bankofkazan.ru​
    Блок с новостями на сайте Банка Казани / bankofkazan.ru
    Вместо унылого и не презентабельного столба текста, можно презентовать новости в виде привлекательных изображений и интригующих заголовков. Вот, например, как это делает американский банк Chase
    Блок с новостями на сайте банка Chase / chase.com
    Блок с новостями на сайте банка Chase / chase.com
    Ещё один нюанс, который многие забывают (и Банк Казани в их числе) – это указание даты публикации для новостей. Потому что слово «новость» происходит от слова «новый». И если сообщение было опубликовано 3 месяца назад, то это уже сложно назвать новостью и заинтересовать ей кого-либо. Поэтому для новостей важно указывать дату публикации. Показывая тем самым актуальность сообщения. Вот как указывает даты Райффайзен банк.
    Даты новостей на сайте Райффайзен банка / raiffeisen.ru​
    Даты новостей на сайте Райффайзен банка / raiffeisen.ru
    В целом же, в банковском секторе наблюдается тренд ухода от типичной подачи новостей сухим текстом в сторону журнального формата, в котором новости разбавляются полезными статьями в которых упоминаются сервисы банка. Это уже контент-маркетинг, а не просто новости. Поэтому на сайте американского банка Chase раздел с новостями называется уже "News & Stories", а не просто "News" (скриншот выше). Среди американских банков, хорошо работает со статьями банк Chase. Среди российских банков этот тренд поддерживает Тинькофф банк в своём Тинькофф журнале, главным редактором которого с 2015 по 2019 год был Максим Ильяхов автор очень книги «Пиши сокращай».
    Новости и статьи на сайте Тинькофф банка / tinkoff.ru
    Новости и статьи на сайте Тинькофф банка / tinkoff.ru
    Помимо подачи новостей – сами новости у Банка Казани скучные и неубедительные. Например, из последних новостей: "Банк Казани ответил на вопросы по поддержке бизнеса в период коронакризиса". Банк ответил на вопросы? А какая в этом польза для пользователя? Зачем ему читать эту новость?
    Новость на сайте Банка Казани / bankofkazan.ru​
    Новость на сайте Банка Казани / bankofkazan.ru
    Для сравнения, вот как Альфа банк обыграл ту же ситуацию с коронавирусом:

    • Снижение платежей по кредитам на 70%;
    • Отсрочка по кредитам до 5 млн руб;
    • Отмена оплаты за обслуживание дебетовых карт;
    • Премиум услуги дешевле на 40% и так далее.
    Новость на сайте Альфа банка / alfabank.ru​
    Новость на сайте Альфа банка / alfabank.ru
    Очевидно, что как подача, так и сам контент подобных новостей и статей выглядят привлекательнее и приносят больше пользы как действующим, так и потенциальным клиентам банка. Ну и приятный бонус заключается в том, что контент-маркетинг положительно сказывается на позициях сайта в поисковых системах (SEO). Сайт поднимается выше в поисковиках и на него чаще переходят новые потенциальные клиенты.
    15. Информирование о коронавирусе
    К слову о коронавирусе, о котором я писал чуть ранее. Пандемия продолжается уже 4 месяца (статья написана в конце июля 2020), каждый день по 6 000 новых зараженных в России, границы закрыты, масочный режим не снят, люди переживают. При этом, вся информация которая есть о коронавирусе на сайте Банка Казани – это новость, о которой я писал в предыдущем пункте. И этого, конечно же недостаточно. Помимо скидок и отсрочек необходимо информировать своих клиентов о принимаемых мерах для борьбы с распространением коронавирусной инфекцией. Для этих целей можно создать отдельный раздел и вынести ссылку на него на главную страницу, вот как это делает банк Chase.
    Информирование о COVID-19 на сайте банка Chase / chase.com​
    Информирование о COVID-19 на сайте банка Chase / chase.com
    О чем рассказывается в данном разделе? Например о том, что между банкоматами установлены перегородки, а клавиатуры и экраны банкоматов регулярно обрабатываются дезинфицирующими растворами. В отделениях сотрудникам измеряется температура в начале рабочего дня, все ходят в масках и перчатках на работе. А благодаря разделительным полосам на полу соблюдается социальная дистанция 2 метра. Ну и естественно про онлайн-сервисы.

    Зачем это нужно? Так люди ощущают, что данный банк заботится о безопасности своих клиентов и сотрудников. А потому, с меньшим опасением идут в отделения банка или к банкоматам. И если представить ситуацию, что есть 2 одинаковых банка, один из которых принимает меры по борьбе с коронавирусом, а другой нет. То особо мнительные люди выберут первый. Это конкурентное преимущество.

    Стоит ли делать этот раздел сейчас, когда пандемия идет на спад? Данный раздел будет актуальным как минимум до конца 2020 года, а скорее всего и дольше потому что министр здравоохранения РФ заявил, что ожидает снятия всех ограничений не раньше февраля 2021 года. Но даже если завтра снимут все ограничения, то всё равно останется множество людей, которые по инерции будут с опасением относиться ко всему вокруг и переживать за своё здоровье. Поэтому данный раздел желательно добавить, он если не прямо, то косвенно способен повысить конверсию.
    16. Мобильное приложение
    Мобильное приложение банка – это удобный инструмент, поэтому им пользуется большинство клиентов. Несмотря на это, ссылки на сайте Банка Казани для скачивания мобильного приложения реализованы слабо, а именно:
    • Малый размер и потому слабая заметность;
    • Плохое качество (низкая детализация);
    • Английский язык (не переведены подписи на русский);
    • Отсутствуют пояснение, визуализация и призыв к действию.
    Ссылки на скачивание мобильного приложения на сайте Банка Казани / bankofkazan.ru​
    Ссылки для скачивания мобильного приложения на сайте Банка Казани / bankofkazan.ru
    Чтобы сделать доступ к мобильному приложению быстрее и удобнее, то вместо двух небольших иконок лучше сделать крупный блок посвященный мобильному приложению с изображением смартфона. Вот, например как это реализовано на сайте Альфа банка.
    Ссылки для скачивания мобильного приложения на сайте Альфа банка / alfabank.ru
    Ссылки для скачивания мобильного приложения на сайте Альфа банка / alfabank.ru
    Благодаря крупному размеру блока - его проще и быстрее найти, даже при беглом взгляде по сайту. А благодаря изображению смартфона – сразу понятно, что речь о мобильном приложении, даже для людей со слабым зрением, для которых мелкий текст может быть нечитабелен. А поясняющий текст на русском языке "Скачать для iPhone" сделает понятным данный блок даже для людей старших поколений, для которых иконки со словами слова «Google Play» или «AppStore» являются загадочными ребусами.

    Дополнительно можно создать раздел с подробным описанием и преимуществами мобильного приложения, чтобы мотивировать пользователей скачивать приложение. Так, например, на сайте Альфа банка рассказано, что в мобильном приложении возможны быстрые переводы в другие банки по номеру телефона, платежи за ЖКХ и штрафы по QR-коду, обмен валюты по выгодному курсу, справки и многое другое.
    17. Футер
    Сейчас подвал сайта Банка Казани больше похож на хаос из непонятных слов, вроде «Информация 622-П». Такой подход осложняет навигацию и замедляет поиск необходимого раздела, потому как приходится перечитывать все пункты и разбираться в значении непонятных терминов.
    Футер (подвал) на сайте Банка Казани / bankofkazan.ru​
    Футер (подвал) на сайте Банка Казани / bankofkazan.ru
    Вместо этого можно логически сгруппировать ссылки в столбцы по различным направлениям, например:

    • Общие популярные разделы (О банке, курсы валют, новости, контакты);
    • Услуги для физических лиц (Кредитные и дебетовые карты, автокредиты, вклады);
    • Услуги для юридических лиц (Регистрация, расчетный счет, кредиты бизнесу);
    • Другое (страхование, инвестиции, безопасность и другие).
    При этом, в каждом столбце разделы распределены по популярности. От самых посещаемых разделов (сверху) к менее посещаемым разделам (снизу). Потому что пользователи читает сверху вниз. Вот, как этот подход реализован на сайте Тинькофф банка.
    Футер на сайте Тинькофф банка / tinkoff.ru​
    Футер со структурированными разделами на сайте Тинькофф банка / tinkoff.ru
    При таком структурировании разделов футера, пользователю не нужно просматривать все разделы, а достаточно выбрать интересующий столбец и в нем нужный раздел, который скорее всего буде вверху списка. Это значительно упрощает и ускоряет поиск необходимого раздела.
    18. Копирайт
    Знак копирайта © (охрана авторских прав) и 2020 год сейчас указаны в футере на сайте Банка Казани.
    Копирайт в подвале (футере) на сайте Банка Казани / bankofkazan.ru
    Копирайт в подвале (футере) на сайте Банка Казани / bankofkazan.ru
    Наличие копирайта и года - это хороший ход, но лучше опубликовать не один (2020-й) год, а указать диапазон дат. Где первая цифра указывает на год, когда впервые был опубликован сайт, а вторая цифра - это год внесения последних изменений на сайте. Если посмотреть дату регистрации домена - то увидим 2003 год. Затем проверив вебархив, видно что в 2004 году сайт уже работал.
    Дата регистрации домена www.bankofkazan.ru. Первый снимок сайта Банка Казани
    Слева: дата регистрации домена Банка Казани bankofkazan.ru 27.11.2003 / nic.ru
    Справа: первый снимок сайта Банка Казани 31.08.2004 / web.archive.org
    Поэтому смело можно написать в футере Банка Казани 2004 - 2020. Зачем это нужно? Банк Казани является старейшей финансовой организацией в регионе, основанной ещё в 1990 году и пережившей 3 кризиса. А это наглядный показатель стабильности. И так как для банка надежность является важнейшим фактором, то указание диапазона дат является хорошим конкурентным преимуществом и косвенно признаком надежности банка. Вот как это реализовано в Райффайзен банке.
    Диапазон дат в копирайте на сайте Райффайзен банка / raiffeisen.ru
    Диапазон дат в копирайте на сайте Райффайзен банка / raiffeisen.ru
    19. Лицензия
    В последние годы Центральный банк России придерживается политики активной расчистки банковского сектора. Так за последние 5 лет было отозвано более 400 лицензий у банков и по прежнему в новостях мелькают заголовки об отзыве лицензии у очередного банка. Это пугает и настораживает людей, поэтому наличие действующей лицензии у банка – это важный параметр на который обращают внимание потенциальные клиенты при выборе банка. И именно поэтому (ну и по требованию Центробанка) банки указывают номер лицензии в футере сайта.
    Номер лицензии Центробанка в футере на сайте Банка Казани / bankofkazan.ru
    Номер лицензии Центробанка в футере на сайте Банка Казани / bankofkazan.ru
    С этим всё понятно. Но на собственном сайте можно написать что угодно, поэтому логично предположить, что часть пользователей захотят проверить статус лицензии на сайте Центрального банка. И в этом свете, остается загадкой, почему ни один из банков не догадался сделать текст о лицензии кликабельной и ведущей на сайт Центробанка России? Если представить, что пользователь не знаком с Банком Казани и хочет убедиться в его официальном статусе, то ему потребуется сделать множество действий для этого:
    1. Необходимо зайти на сайт банка, найти номер лицензии и скопировать его;
    2. Затем необходимо зайти в Яндекс и там вбить номер лицензии в поисковую строку;
    3. Следующим шагом необходимо найти сайт Центробанка и перейти по ссылке;
    4. И уже на странице Центробанка убедиться в статусе банка.

    Почему бы не сделать номер лицензии на сайте банка в виде ссылке, которая вела бы на страницу Центробанка, где подтверждался бы официальный статус банка и действующая лицензия? А также другие данные: название банка, номер лицензии, адрес сайта, фактический адрес, телефон, ссылки на социальные сети, размер уставного капитала и т.д. Это сэкономит минуту времени, упростит жизнь пользователям и прибавит очки надежности банку. А если банк надежен – то его конверсия повышается, потому что надежность банка – это один из важнейших факторов при выборе банка.
    20. О банке
    С главной страницей закончили, идём внутрь сайта. Давайте посмотрим информацию о банке, чтобы понять можно ли доверять данной финансовой организации свои деньги.
    Раздел "О банке" на сайте Банка Казани / bankofkazan.ru
    Раздел "О банке" на сайте Банка Казани / bankofkazan.ru
    20.1. Фотография. Хорошо что фотография взята не из фотостока, а сделана собственная фотография, в банке с фирменными цветами, а также сотрудниками в фирменной одежде – это хорошо, это показывает что банк существует и встретит вас в приятной атмофсере.

    Но сама фотография низкого качества. Речь о низком разрешении и плохой резкости фотографии, в результате на фото появляется шум, пиксели и прочие артефакты. Сравните с качеством изображений на сайте Сбербанка.
    Фотография низкого качества из раздела "О банке" на сайте Банка Казани / bankofkazan.ru
    Фотография низкого качества из раздела "О банке" на сайте Банка Казани / bankofkazan.ru
    Но сама фотография низкого качества. Речь о низком разрешении и плохой резкости фотографии, в результате на фото появляется шум, пиксели и прочие артефакты. Сравните с качеством изображений на сайте Сбербанка (ниже).
    Фотография высокого качества из раздела "О банке" на сайте Сбербанка / sberbank.ru
    Фотография высокого качества из раздела "О банке" на сайте Сбербанка / sberbank.ru
    Обратите внимание на значок с логотипом Сбербанка у девушки в белом сарафане (слева на фото). Этот значок был вставлен позже, чтобы показать связь со Сбербанком, потому что сама фотография была сделана не в Сбербанке, а взята из фотостока.

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

    При этом видно, что фото на сайте Банка Казани было сделано хорошо: выстроен свет, настроен фокус. Это значит, что скорее всего снижение качества произошло в момент сжатия фотографии в меньший размер, для того чтобы страница быстрее загружалась. Но сейчас есть множество вариантов сохранить качество фотографии и малый размер. Например, для изображений в форматах JPEG 2000, JPEG XR и WebP используется более эффективное сжатие, поэтому они загружаются быстрее и потребляют меньше трафика, чем изображения PNG и JPEG.
    20.2. Текст. Идём дальше по разделу "О банке", и второе на что обращает внимание пользователь после фото - это текст. Сейчас на сайте Банка Казани текст с описанием представляет собой нечитаемый столб. А если и читать, то здесь указано "рейтинг прогноз - негативный". Если расшифровать данный рейтинг – это не плохой показатель. Но неподготовленному пользователю, далекому от банковских рейтингов, словосочетание «негативный рейтинг» ничего хорошего не говорит. Поэтому раздел о банке желательно переделать:

    1. Разбить всю информацию на несколько блоков с небольшим содержанием текста и выделенной в заголовок ключевой мыслью блока, а не вываливать всё одним столбом текста.
    2. Разбавить каждый блок изображением высокого качества.

    Вот как оформлен раздел "О банке" на сайте Сбербанка
    Первый экран раздела "О банке" на сайте Сбербанка / sberbank.ru
    Первый экран раздела "О банке" на сайте Сбербанка / sberbank.ru
    А теперь, как это можно было бы сделать на сайте Банка Казани:
    1. Текст. Короткий заголовок с ключевыми фактами: «Банк Казани - основан в 1990-м году и является старейшим финансовым учреждением в регионе. Ключевым владельцем банка является государственный исполнительный комитет города Казани»
    2. Фон. Всё это написать на фоне фотографии банка - большое здание главного офиса банка, например.

    Таким заголовком банк расскажет, что кредитная организация существует давно, прошла несколько кризисов и выстояла, а значит надежна. А второй частью заголовка рассказывается о том, что основной владелец это государство, а значит вероятность лишения лицензии существенно ниже. Фотография же покажет, что банк не какая-то "шарашкина контора", а обладает большим собственным зданием. Всё это повышает доверие.
    20.3. Фактиоды. Второй экран раздела "О банке", который расположен ниже заголовка можно наполнить фактоидами (ключевыми цифрами), например: год основания 1990. Активы 13 млрд руб., 6-е место в регионе по величине активов. В ТОП-15 по количеству выданных банковских гарантий в РФ. 500+ сотрудников. Ну и так далее: кол-во клиентов столько-то, кол-во банкоматов столько-то, кол-во выданных кредитов столько-то и другие ключевые цифры. Вот как это реализовано н сайте Сбербанка.
    Фактоиды в разделе "О банке" на сайте Сбербанка / sberbank.ru
    Фактоиды в разделе "О банке" на сайте Сбербанка / sberbank.ru
    Подобные короткие и лаконичные цифры легче просмотреть и запомнить, нежели осваивать большой столб текста. Плюс к этому, показав подобные внушительные цифры банк ещё раз убеждаете посетителей сайта в надежности. Потому что если в Банке Казани работает 500+ человек, то это крупная организация, а значит вероятность её закрытия "завтра" ниже. А если пользователи сомневается в надежности банка, то ему не доверяют, а если банку не доверяют то и не становятся его клиентами. Поэтому задача сайта в целом и раздела "О банке" в частности - это формировать доверие.
    20.4. Сотрудники. В третьем экране раздела "О банке" можно указать руководство банка с фотографиями и краткой трудовой биографией. Потому что люди работают с людьми и когда посетитель сайта видит, что за банком стоят реальные люди, которые не скрывают своих лиц – это повышает уровень доверия. Сейчас же у Банка Казани руководство «спрятано» за безликим текстом. Ещё хуже то, что если пользователь захочет узнать кто руководит банком, то ему необходимо будет скачать файлы в формате текстового редактора Word к себе на компьютер и только там увидеть кто управляет банком. Это прошлый век. Никто скачивать подобные файлы не будет. И непонимания кто руководит банком - будет возрастать недоверие к нему. Поэтому гораздо понятнее, удобнее и быстрее для пользователей будет указать в разделе руководство банка с фотографиями. Вот как это реализовано на сайте Тинькофф банка.
    Руководство в разделе "О банке" на сайте Тинькофф банка / tinkoff.ru
    Руководство в разделе "О банке" на сайте Тинькофф банка / tinkoff.ru
    При этом, карточка каждого сотрудника Тинькофф банка кликабельна и раскрывает краткую трудовую биографию, прочитав которую пользователь увидит, что руководят банком профессионалы с большим опытом работы в банковской сфере и это ещё один бал в копилку доверия.
    20.5. Лицензии. В четвертом экране раздела "О банке" можно указать лицензии. Так как всплывает множество новостей об отзыве лицензий у банков, то лицензии важны для пользователей. Это также повышает доверие. Сейчас у Банка Казани размещены лицензии на сайте, но они совершенно нечитабельны.
    Лицензии на сайте Банка Казани / bankofkazan.ru
    Лицензии на сайте Банка Казани / bankofkazan.ru
    Как видно, на сайте Банка Казани вся информация о лицензиях свалена в хаотичную кучу, а текст набран заглавными буквами, что осложняет чтение. Сравните с подачей лицензий на сайте Альфа банка.
    Лицензии на сайте Альфа банка / alfabank.ru​
    Лицензии на сайте Альфа банка / alfabank.ru
    На сайте Альфа банка каждый документ отделен друг от друга, указаны тип документа, название, формат и вес. А также документ визуально выделяется при наведении курсора мыши, что дополнительно помогает отделить их между собой. Подобная подача информации облегает чтение и позволяет бОльшему количеству людей узнать почему банк является надежным и почему ему можно доверять свои деньги.
    21. Выбор кредитного продукта
    С разделом "О банке" на сайте Банка Казани разобрались, идем дальше. Попробуем воспользоваться одной из ключевых услуг банка – взять кредит. Для этого выбираем раздел "Кредит частным лицам" и видим список из 8 кредитных продуктов.
    Кредитные продукты на сайте Банка Казани / bankofkazan.ru
    Кредитные продукты на сайте Банка Казани / bankofkazan.ru
    Кредитные продукты в Банке Казани отличаются условиями. Если подойти к вопросу выбора кредита со стороны клиента, то очевидно, что любому здравомыслящему человеку хочется получить в кредит сумму побольше, по наименьшей процентной ставке, на бОльший срок. Поэтому если говорить очень упрощенно, то кредитные продукты в рамках одного банка – это по сути своей поиск оптимального баланса между суммой, сроком, процентами и прочими условиями. Чтобы выбрать наиболее подходящие условия - нужно их сравнить по ключевым показателям. Но в текущем виде раздел с описанием кредитных продуктов Банка Казани очень сложен для сравнения по двум причинам:

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

    Поэтому на этапе выбора, рекомендуется сократить количество кредитных продуктов и расположить их в одной строке с понятными отличиями, вот как это реализовано в Тинькофф банке.
    Выбор кредитного продукта на сайте Тинькофф банка / tinkoff.ru
    Выбор кредитного продукта на сайте Тинькофф банка / tinkoff.ru
    Обратите внимание, что на сайте Тинькофф банка всего 3 тарифа, а из краткого описания сразу становятся понятны их отличия. Так, если нужна сумма больше 2 миллионов рублей, то потребуется залог. Если залог есть, то процентная ставка ниже. А чем больше залог, тем больше и срок кредита. Всё просто и понятно, за считанные секунды можно выбрать подходящий для себя вариант даже без углубления в детали. Подобное упрощение – это важно, потому как финансовые продукты и без того сложны для большинства людей, потому что большинство людей не являются профессиональными финансистами, экономистами, бухгалтерами или инвесторами. И для них сравнение множества тарифов со схожими процентами – это тяжкое испытание. А если пользователю что-то тяжело или непонятно, то ему проще перейти на сайт другого банка. А вместе с ним уходит и конверсия.

    Аналогичным путем - путем сокращения количества тарифов, пошел и банк Home Credit.
    Выбор кредитного продукта на сайте банка Home Credit / homecredit.ru​
    Выбор кредитного продукта на сайте банка Home Credit / homecredit.ru
    22. Описание кредитного продукта
    На предыдущем шаге был выбран кредит "Доверительный" на сайте Банка Казани. И дальше начинается сущий ад в виде большой и сложной таблицы, состоящей из 84 ячеек (27 строк и 7 столбцов) длиной в 5 экранов.
    Описание кредитных условий на сайте Банка Казани / bankofkazan.ru
    Описание кредитных условий на сайте Банка Казани / bankofkazan.ru
    Такие большие и сложные таблицы на сайтах - это совковый тлен. От одного вида этой огромной таблицы клонит в сон. Понятно, что это финансовые продукты - это сложные продукты в которых множество переменных и процентная ставка зависит от различных условий. Но вываливая всё на посетителя сайта – высок риск того, что он даже не дойдёт до этапа оформления кредита, потому что не разберется во всех данных. Поэтому для начла необходимо заинтересовать человека, чтобы он не ушёл при виде главы из "Войны и мира" Толстова. Для этого необходимо максимально упростить и сократить подачу информации. Для этих целей отлично подойдет кредитный калькулятор. Вот например, как делает АкБарс банк (ниже).
    Весь калькулятор на сайте АкБарс банка занимает лишь половину одного экрана. Без больших и сложных таблиц из множества цифр, без 24 вариантов процентной ставки (как на сайте Банка Казани). При этом, у АкБарс банка, все те же условия, что и у Банка Казани уже заложены в этот калькулятор. Например, если пользователь получает заработную плату на карту АкБарс банка - то процентная ставка понижается с 12,9% до 11,9% и это сразу видно, достаточно кликнуть по переключателю. Ну а вслед за процентной ставкой понижается и размер ежемесячного платежа. Это также изменяется в реальном времени после переключения. Аналогичным образом, если есть страхование жизни, то ниже процентная ставка снижается до 8%, а вслед за процентной ставкой снижается и ежемесячный платеж. И это логично, ведь банк снижает свои риски.

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

    Ещё один способ разгрузить внимание пользователя – это разбить информацию на блоки. Например, в большой таблице с описанием условий кредита на сайте Банка Казани есть пункт про снижение процентной ставки.
    Условия снижения процентной ставки на сайте Банка Казани / bankofkazan.ru
    Условия снижения процентной ставки на сайте Банка Казани / bankofkazan.ru
    Это отличное конкурентное преимущество, которое можно вынести отдельно. Вот как это делает Тинькофф банк.
    Условия снижения процентной ставки на сайте Тинькофф банка / tinkoff.ru
    Условия снижения процентной ставки на сайте Тинькофф банка / tinkoff.ru
    Как видно, бонус в виде снижения процентной ставки вынесен в отдельный блок, в котором расшифровано понятие «Надежный клиент». В таблице Банка Казани данное преимущество теряется среди большого количества текста, а те кто найдут этот текст не поймут что значит «Надежный клиент». Поэтому лучше выносить преимущества в отдельный блок.
    23. Звездочки
    Ещё один недостаток подобной таблицы в Банке Казани - это звездочки со сносками в тексте. Когда слово или цифра отмечается звездочкой, а внизу страницы указывается сноска с примечанием.
    Звездочки (сноски) в тексте на сайте Банка Казани / bankofkazan.ru
    Звездочки (сноски) в тексте на сайте Банка Казани / bankofkazan.ru
    От подобных звездочек и сносок желательно избавляться по 2-м причинам:
    1. Они заставляют пользователей скроллить вверх и вниз по несколько раз в поисках нужной сноски;
    2. Звездочки воспринимаются многими людьми негативно, потому как часто за звездочками скрывается информация о комиссиях, переплатах и усложненных, невыгодных условиях. Поэтому многие компании отказываются от звездочек и сносок. Например банк Home Credit позиционирует себя как банк без скрытых комиссий и звездочек.
    Договор без звездочек на сайте банка Home Credit / homecredit.ru
    Договор без звездочек на сайте банка Home Credit / homecredit.ru
    Повторюсь ещё раз: я понимаю, что есть большое количество разных условий в кредитных продуктах о которых банк обязан уведомлять. Но не обязательно всё умещать на одной странице, это отпугивает пользователей. Поэтому вместо перегруженных таблиц, лучше использовать кредитный калькулятор с основными условиями, а также указать ссылку на "Подробные условия кредита" рядом. Вот как это делает АкБарс Банк.
    Ссылка на подробные условия кредита на сайте АкБарс банка / akbars.ru
    Ссылка на подробные условия кредита на сайте АкБарс банка / akbars.ru
    24. Оформление заявки на кредит
    Разобрались с описанием кредитного продукта, теперь представим, что пользователь осилил этот столб текста и его устроили условия, поэтому он идет дальше и хочет оформить заявку на кредит. Он кликает по кнопке "Заявка на кредит" на сайте Банка Казани и перед ним открывается страница оформления.
    На данной странице есть ряд проблем:
    1. Здесь непонятно зачем дважды дублируется калькулятор. При том, что оба калькулятора не самые удобные.
    2. Затем зачем-то снова предлагаются 16 вариантов тарифов на кредитные продукты, какие-то из них дублируются, хотя пользователь уже выбрал кредитный тариф на предыдущем шаге.
    3. И что ещё хуже - первым тарифом предлагается самый невыгодный кредит с грабительской процентной ставкой под 20% годовых.
    Банк словно пытается отговорить пользователя брать кредит на каждом шаге. Для сравнения, вот как Тинькофф банк реализовал на сайте оформление кредита с применением геймификации для мотивации заполнения формы:
    Оформление кредита на сайте Тинькофф банка / tinkoff.ru
    Оформление кредита на сайте Тинькофф банка / tinkoff.ru
    Оформление кредита на сайте Тинькофф банка реализовано хорошо по ряду причин:

    1. Всё оформление не свалено в одну кучу, а разделено на 4 коротких шага (1-фио, 2-паспорт, 3 - место работы, 4-дополнительная инфомрация (залог, снилс,)). 4 коротких шага выглядят не так уж и сложно. Но если свалить все поля в кучу - это выглядело бы утомительно.
    2. Сверху указан прогресс, сейчас это 23% одобрения кредита - то есть пользователь ощущает словно уже поработал и оставлять на полпути дело не станет. Также здесь есть мотивация заполнения следующего поля: ещё +9% пользователь получит за заполнение адреса электронной почты. То есть пользователь может не заполнять одно из полей, но при этом вероятность одобрения будет ниже, поэтому пользователь сам заинтересован в максимальном заполнении всех форм (используется пряник, а не кнут). А на сайте Банка Казани если пользователь не заполнит поле с телефоном, то система его не пропустит далее (задействован кнут, а не пряник).
    3. При вводе ФИО система помогает пользователям. То есть пользователь только начинает вводить имя, а ему уже дается подсказка - это ускоряет и упрощает заполнение. Более того, у каждого поля есть название и подсказка. И если начать вводить - название поля не исчезает, а значит даже если человек начал заполнять и отвлекся он сможет легко продолжить спустя время. На каждом шаге пользователь контролирует происходящее. А чувство контроля одно из важнейших для человека, об этом писала профессор психологи Гарварда - Эллен Ланже (Ellen Langer).
    4. При вводе телефона даются подсказки если есть ошибка. А если ошибок нет, то появляется зеленая галка с подтверждением, что всё верно, можно идти дальше. В Банке Казани же если пользователь не ввёл хотя бы одну цифру - весь номер стирается без объяснения в чем ошибка. Это замедляет заполнение и попросту раздражает.
    5. И так далее, на каждом следующем шаге дается по 1% за каждое заполненное поле. В каждом поле даются подсказки. Более того, на 4-м шаге поясняется для чего нужна та или иная информация. Например, залог нужен для увеличения суммы кредита и уменьшения процентной ставки. (Потому что залог снижает риски банка). А в Банке Казани – указано: "Поручительство по желанию клиента", но не сказано для чего. Ну конечно же большинство людей откажутся давать залог или поручительство, так как это замедляет и усложняет оформление. И соответственно они получат высокий процент так и не поняв почему. И просто уйдут в другой банк в поисках более выгодных условий, хотя в Банке Казани наиболее выгодные условия.
    25. Безопасность
    Ну и на последок, помимо дизайна, надежности и процентных ставок - потенциальных клиентов банков волнует безопасность. Потому что речь идет о деньгах. По опросам 17% пользователей не совершают покупки на тех сайтах, на которых испытывают опасения безопасности своих платежных данных. В Банке Казани раздел посвященный безопасности - это вновь нечитаемый столб текста с советами из серии "используйте только официальные приложения банка". Во-первых, бОльшая часть пользователей этот текст читать не будет. А во-вторых, не всем понятно как отличить официальное приложение от неофициального.
    Раздел "Безопасность" на сайте Банка Казани / bankofkazan.ru
    Раздел "Безопасность" на сайте Банка Казани / bankofkazan.ru
    Для сравнения покажу как заполнен раздел "Безопасность" на сайте Тинькофф банка:

    1. Тут указано какие данные нужно держать в секрете с наглядыми изображениями;
    2. Советы как предотвратить кражу денег;
    3. Что делать в критической ситуации;
    4. Короткие видеоролики с распространенными видами мошенничества, простыми словами;
    5. И более подробные статьи с более изощренными вариантами мошеннических схем.
    Раздел "Безопасность" на сайте Тинькофф банка / tinkoff.ru
    Раздел "Безопасность" на сайте Тинькофф банка / tinkoff.ru
    В результате, даже если какая-нибудь бабушка или школьник, которые далеки от технологий и мошенников потратят несколько минут на изучение данного раздела, то они будут в курсе как уберечь свои деньги от мошенников. А в сумме это формирует образ безопасного банка, который заботится о своих клиентах и борется с мошенниками.
    Вывод:
    В период кризиса особенно важно оптимизировать свои расходы и выжимать максимум конверсий из сайта. Потому что если запустить рекламу на подобный слабо проработанный сайт, каким является сайт Банка Казани сейчас, то эффект будет схож с тем как пытаются перенести воду в дырявом ведре. Какой бы хорошей не была реклама, каким большим не был рекламный бюджет – всё это будет зря, если пользователи будут просто уходить сайта, на котором всё сложно и запутано. В данной статье очень кратко разобраны лишь 25 точек роста конверсии и это малая часть от всех рекомендаций, которые есть в нашей базе знаний, в которой всего более 500 таких точек роста. Но внедрив даже эти 25 рекомендаций уже получится существенно увеличить показатель конверсии сайта. А если нужен более существенный результат и рост конверсии и продаж на сайте, то свяжитесь с нами по координатам указанным ниже и мы сделаем всё под ключ и увеличим конверсию сайта минимум на 30%. Погрузимся в веб-аналитику, опросим реальных пользователей и подготовим, минимум, 150 рекомендаций для роста конверсии.
    Контакты:
    E-mail: info@conversant.me
    Телефон: +7 (495) 0044 395

    Адреса:
    г. Москва
    ул. Ленинская Слобода, д.26, стр.5
    (станция метро "Автозаводская")
    БЦ "Симонов Плаза"

    г. Казань
    ул. Кремлевская, д. 21, офис 1006