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

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

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

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

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

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

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

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

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

Поэтому, я искренне поздравляю коллег из банков с отличным результатом!

Красиво. Удобен ли новый дизайн для текущих клиентов — сложно сказать, так как я не являюсь клиентом этих банков.

Про новых клиентов, т.е. например, меня.

Я не знаю как ставилась задача — поэтому сложно судить до конца о работе агентств.

Но если со Сбербанком все и так понятно — понятны его преимущества (главное надежность) и недостатки (больший и не всегда дружелюбный) и главное для сайта — удобство нахождения нужной информации, а преимущества банка можно не коммуницировать, то с Райфайзен Банком история сложнее.

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

(О Райффайзенбанке)

Относительно старого сайта, новый смотрится намного легче и понятней. Информацию теперь можно найти намного быстрее.

Тот факт, что в навигации использован прием mobile inspired (а ля айпад) это очень хорошо, это не ново, но для банковского сектора это редкость и это круто.

Проблема в том, что этот прием использован некорректно. Абсолютно не учтен так называемый «опыт пользователя».

При виде такого рода панелей (меню) ожидаешь, что все будет происходить без перезагрузки страницы. Но не тут то было Камон! Даже для поиска перезагрузилась страница. Особенно удивило, что при нажатии на «Весь банк» (бутерброд) открывается сайтмап (!!!), а не привычный пользователю сайд бар, ну или вывод расширенного меню... Короче ПЛАК( задел был крутой.

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

Все, что можно сказать сейчас, — это лишь субъективное первое мнение.

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

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

Судя по строке «Шаблоны сделаны в Студии Артемия Лебедева» очевидно, что интеграцию и программирование проводила сторонняя компания. И, возможно, именно это послужило причиной некого диссонанса между концепцией и воплощением. На самом деле это интересный вопрос, и ответ на него хотелось бы знать.

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

— На что в новых дизайнах стоит обратить особое внимание?

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

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

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

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

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

— Какие тенденции (тренды) дизайна банковских сайтов закрепляют или задают эти работы?

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

— Что, на ваш взгляд, является спорными решениями?

Райфайзен: Спорным решением является правый баннерный блок.

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

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

«Студия Артемия Лебедева», конечно, законодатели моды. Многое из того, что они делают, становится трендом. Уверена, скоро мы увидим много похожих дизайн-концепций на сайт банка Райфайзен. Сайт получился нетипичный для ресурсов банковской сферы. Компания решила задачу привлечения клиентов: нетипичный дизайн активно обсуждается пользователями в соцсетях. Это отличный PR!

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

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

Комментарии команды агентства ENGAGE/DigitasLBi, которое запустило обновленный сайт Сбербанка.

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

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

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

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

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

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

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

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

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

Работая над обновленным сайтом Сбербанка, мы впервые в агентстве использовали JS библиотеку React, которая разрабатывается в стенах штаб-квартиры Facebook, и GruntJS как средство автоматизации — что принесло свои результаты и сказалось на скорости разработки. В итоге проект был реализован в невероятные для его масштаба сроки — всего пять месяцев со дня прочтения брифа до момента запуска сайта, 3 месяца из которых пришлись на продакшн. За это время мы разработали и переработали порядка 80 интерактивных сервисов, включая все присутствующие на сайте калькуляторы. Изменился не только внешний вид, но и технология работы сервисов: мы перенесли все расчеты с серверной стороны на клиентскую. Т.е. для обычных пользователей все стало работать гораздо быстрее и нагляднее.

Третий по величине банк Европы должен быть не только основательным и надежным, но еще и удобным и приятным глазу. Я рад, что мы сделали хорошие, «добротные» шаги в этом направлении.

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

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

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