Главная / Информация / Лучший сайт банка / Коцепция и реализация дизайна

Коцепция и реализация дизайна

Оценка банковских сайтов по критериям «Коцепция и реализация дизайна» в рамках номинации «Лучший Интернет-сайт банка» Первого Всероссийского конкурса "Рекламная кампания года в банковской сфере"

Данная номинация проводится при поддержке одного из ведущих Российских интернет-агентств - компании «Артус» www.artus.ru, которое готовит все материалы.

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

- Дизайн-концепция сайта и ее соответствие целям и задачам проекта;

- Реализация дизайна сайта.

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

Важность и описание рассматриваемых критериев

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

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

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

Комментарий коммерческого директора интернет-агентства «Артус» Соболева Алексея:

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

Отдельно опишем составляющие критерия «Реализация дизайна».

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

Первая задача - фокусировка внимания целевых посетителей на информации, дающей быстрое и однозначное представление о сфере деятельности компании и – по возможности – ее позиции на рынке, т.к. посетитель, впервые открывший сайт, скажем, по ссылке из списка результатов поиска, должен за несколько секунд просмотра сайта удостовериться в том, что открыл именно сайт компании, среди услуг которой есть услуга, способная решить его проблему. В нашем случае посетитель, желающий найти коммерческий банк, должен за 3-5 секунд после загрузки страницы удостовериться в том, что открытый им сайт, принадлежит банку, а не ПИФу, управляющей компании, валютной бирже или брокерской компании. Опыт показывает, что если для т.н. идентифицикации сайта посетителю придется затратить слишком много сил и времени, то он, скорее всего, перейдет к просмотру сайта конкурента. Решить задачу быстрой идентификации зачастую помогает использование дополнения к логотипу компании в форме так называемого «функционального слогана», способного быстро и однозначно проинформировать посетителя сайта о деятельности и конкурентных преимуществах компании.

Комментарий руководителя отдела реализации проектов интернет-агентства «Артус» Романа Фомина:

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

Вторая задача главной страницы – анонсировать наиболее важные услуги компании и сервисы, упрощающие потенциальному клиенту выбор услуги и стимулирующие коммуникации с банком (консультации, мнения, заказ услуг). Также в зависимости от бизнес-модели компании на главной странице сайта могут присутствовать элементы, фильтрующие аудиторию, демонстрирующие конкурентные преимущества, подтверждающие актуальность контента сайта. Многое из упомянутого имеет отношение и к внутренним страницам сайта.

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

Требования к дизайну навигационных элементов банковских сайтов довольно серьезны, это связано с зачастую большим объемом сложно структурированной информации. Задача дизайна в данной части – визуально отделить навигационные области на сайте от информационных областей. Вся навигация должна быть выполнена на всем сайте в едином стиле. Навигация должна всегда быть под рукой у 100% посетителей, поэтому не допустимо использование графической, Flash- и JavaScript-навигации.

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

Оценки сайтов банков по критериям концепции и реализации дизайна сайта

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

При оценке сайта мы не будем очень подробно разбирать каждый сайт, а ограничимся лишь краткими комментариями. Напоминаем Вам, что мы взяли для оценки шкалу Лейкерта. В ней у нас будет две зоны: положительная зона – т.е. когда сайт соответствует выбранному критерию, и отрицательная зона – когда сайт не соответствует выбранному критерию. В каждой зоне мы оцениваем уровень качества соответствия или несоответствия сайта критерию. А именно:

4 – Отлично соответствует критерию

3 – По большинству важных параметров соответствует критерию

2 – В целом соответствует

1 – По ряду параметров соответствует критерию

-1 – Не соответствует критерию, но без существенных потерь для эффективности сайта

-2 – В целом не соответствует критерию

-3 – По большинству важных параметров не соответствует критерию

-4 – Критично не соответствует критерию

Итак, начнем:

Банк, сайт Комментарии Оценка

Сбербанк России

www.sbrf.ru

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

Оценка концепции: -2

Оценка реализации: -4.

АБ «ГАЗПРОМБАНК» ЗАО
Москва

www.gazprombank.ru

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

Оценка концепции: 1

Оценка реализации: -1.

ОАО ВНЕШТОРГБАНК
Москва

www.vtb.ru

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

Оценка концепции: 2

Оценка реализации: 2

ЗАО ММБ
Москва

www.mdmbank.ru

Если оставить без внимания ошибки разработчиков фирменного стиля: искажение пропорций в названии и логотип в форме пирамиды – не самый удачный символ для кредитных организаций, то концепция сайта в целом соответствует критерию. Информация удобно структурирована и поддержана графикой. С навигацией по основным разделам проблем нет, понятные текстовые ссылки есть в верхней части любой страницы сайта. Но сквозная навигация, выполненная Студией Артемия Лебедева, по образу Windows Vista еще не скоро станет привычным инструментом, понятным каждому посетителю.

Оценка концепции: 2

Оценка реализации: 2

Райфазенбанг Австрия

www.raiffeisen.ru

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

Оценка концепции: 2

Оценка реализации: 1

ОАО АКБ «ЕВРОФИНАНС МОСНАРБАНК»
Москва

www.evrofinance.ru

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

Оценка концепции: 2

Оценка реализации: 3

ОАО «БАНК МОСКВЫ»
Москва

www.mmbank.ru

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

Оценка концепции: 1

Оценка реализации: -2

ОАО АКБ «РОСБАНК»
Москва

www.rosbank.ru

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

Оценка концепции: 1

Оценка реализации: -1

ОАО БАНК «ПЕТРОКОММЕРЦ»
Москва

www.pkb.ru

Главная страница – яркий пример того, какой она быть не должна. Очень не удобная навигация, нет анонсов основных сервисов сайта, нет информативного слогана, нет информации, свидетельствующей актуальность контента, не ни слова о конкурентных преимуществах. Фотографические изображения не связаны с текстом, внутренние страницы созданы с нарушениями отраслевых стандартов.

Оценка концепции: -3

Оценка реализации: -4

КМБ-БАНК (ЗАО)
Москва

www.kmb.ru

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

Оценка концепции: -1

Оценка реализации: -1

ОАО «АЛЬФА-БАНК»
Москва

www.alfa-bank.ru

Запоминающийся дизайн, отличное позиционирование бренда и реализация фирменного стиля. Удобная основная навигация и спорная навигация a la Windows Vista. Высококачественная графика, которая чаще всего не мешает восприятию хорошо оформленного текста.

Оценка концепции: 3

Оценка реализации: 4

АКБ «МБРР» (ОАО)
Москва

(Московский банк реконструкции и развития)

www.mbrd.ru

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

Оценка концепции: -1

Оценка реализации: -1

ОАО «УРАЛСИБ»
Москва

bank.uralsib.ru

При отлично организованной информационной структуре, есть и технические погрешности – трудно найти ссылки в тексте и вспомогательной информации, нет альтернативного текста для важных картинок, включая логотип. В целом дизайн выполнен на высоком уровне с точки зрения технологичности и подачи материала (что важно!), но кажется немного простоватым.

Оценка концепции: 3

Оценка реализации: 2

ОАО «ТРАНСКРЕДИТБАНК»
Москва

www.tcb.ru

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

Оценка концепции: 2

Оценка реализации: 1

ОАО БАНК ЗЕНИТ
Москва

www.zenit.ru

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

Оценка концепции: -2

Оценка реализации: -2

ОАО «СИБАКАДЕМБАНК»
Новосибирск

www.sibacadem.ru

Графика низкого качества, но это не влияет на восприятие важной текстовой информации. В целом, возможности визуализации информации использованы не полностью.

Оценка концепции: 1

Оценка реализации: 2

БАНК «СЕВЕРНАЯ КАЗНА» ОАО
Екатеринбург

www.kazna.ru

Крайне непродуктивная идея размещения flash-заставки на стартовой странице сайта. Довольно спорно расположены информация об услугах банка в виде картинки под углом 90 градусов к горизонту. Внутренние страницы организованы более грамотно: список услуг есть на каждой странице, хорошо оформлен текст.

Оценка концепции: -1

Оценка реализации: -3

АКБ «ПРОМСВЯЗЬБАНК» (ЗАО)
Москва

www.psbank.ru

На сайте удобно оформлена информация об услугах, сайт запоминается своей необычной нелинейной динамичной композицией и насыщенно синими цветами. Технически реализован слабо. Есть проблемы с вписыванием контента страниц в стандартные разрешения мониторов по ширине, читаемостью многих графических и текстовых материалов.

Оценка концепции: 1

Оценка реализации: -2

«НОМОС-БАНК» (ЗАО)
Москва

www.nomos.ru

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

Оценка концепции: 1

Оценка реализации: -3

ОАО «АК БАРС» БАНК
Казань

www.akbars.ru

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

Оценка концепции: 2

Оценка реализации: 1

ОАО ХАНТЫ-МАНСИЙСКИЙ БАНК
Ханты-Мансийск

www.khmb.ru

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

Оценка концепции: 3

Оценка реализации: 3

Международный промышленный банк

www.iib.ru

Существенный недостаток реализации дизайна – сложная графическая навигационная панель и невыразительные баннеры.

Оценка концепции: 1

Оценка реализации: 1

ЗАО «СНГБ»
Сургут

www.sngb.ru

Сургутнефтегазбанк

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

Оценка концепции: -3

Оценка реализации: -3

ОАО «УРАЛВНЕШТОРГБАНК»
Екатеринбург

www.uvtb.ru

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

Оценка концепции: 1

Оценка реализации: -2

ОАО АКБ «ЮГБАНК»
Краснодар

www.yugbank.ru

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

Оценка концепции: -1

Оценка реализации: -4

«ЗАПСИБКОМБАНК» ОАО
Салехард

www.wscb.ru

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

Оценка концепции: -1

Оценка реализации: -1

ЗАО «БАНК РУССКИЙ СТАНДАРТ»
Москва

www.rs.ru

Дизайн сайта не согласован с фирменным стилем банка и концепцией бренда. Графика в коллаже и баннерах плохого качества. Не лучшим образом выстроена архитектура сайта. Нет сквозной и дублирующей навигации. Многие служебные тексты реализованы графикой.

Оценка концепции: -1

Оценка реализации: -2

АКБ «АБСОЛЮТ БАНК» (ЗАО)
Москва

www.absolutbank.ru

Очень высокое качество дизайна. Учтены все мелочи. Очень качественно представлены тексты. Много качественных «графических примитивов» - пиктограммы, иконки и т.п.

Оценка концепции: 4

Оценка реализации: 3

ОАО «БАЛТИЙСКИЙ БАНК»
Москва

www.baltbank.ru

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

Оценка концепции: -3

Оценка реализации: -4

Международный Московский Банк

www.imb.ru

В целом дизайн выглядит целостно. Но недостаточный акцент на фирменном стиле, а также некоторая «каша» в важном блоке с контактными данными банка снижает его эффективность.

Оценка концепции: 2

Оценка реализации: 2

КБ «ЛОКО-БАНК» (ЗАО)
Москва

http://www.lockobank.ru/

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

Оценка концепции: -2

Оценка реализации: -2

Подведем итоги

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

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

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

Данный материал предоставлен интернет-агентством «Artus», одним из ведущих интернет-агентств, занимающимся созданием и продвижением сайтов в сети интернет.

Другие материалы:

Критерии оценки сайтов банков

Маркетинговая концепция сайта

Качество контента и актуальность информации на сайте

Техническая чистота и поддержка сайта

Внутренняя поисковая оптимизация сайта

Реализация системы навигации на сайте

PR активность банка в интернете

Оперативность реакции менеджеров сайтов на запросы клиентов

Материалы корпоративного блога «Артуса» по банковской теме:

Заявка на создание сайта

Ответьте пожалуйста, на контрольный вопрос: Название первого месяца в году ?