Как разрабатывали редизайн Яндекс.Денег

Мы приступили к редизайну в начале 2014 года после большого исследования с юзабилити-тестированием и анализом статистики.

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

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

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

Еще одной предпосылкой стал переезд на новый фреймворк (с xScript на Node.js) — одно из самых серьёзных изменений в нашей разработке. Фактически, вместе с редизайном мы переписываем сайт с нуля — постранично и посценарно. Это основная причина, по которой редизайн Яндекс.Денег происходит постепенно, а не одним махом. Благодаря Node.js, нам стало легче поддерживать текущую реализацию страниц и вносить быстрые правки одновременно на всем портале, а не на каждой странице в отдельности, как было раньше, когда большая часть была реализована на xScript.

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

Навигация: наводим порядок

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

Сервисы Яндекса обычно выносят пользовательские настройки в шапку. Например, кнопка «Моя музыка» в шапке Яндекс.Музыки или «Мой маркет» в Яндекс.Маркете.

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

Мы решили избавиться от кнопки «Мой кошелёк»: объединили её с балансом, который вроде как и является метафорой кошелька. Рядом с балансом поместили иконку банковской карточки — для пользователей, у которых она привязана к счёту.

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

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

Сейчас мы продолжаем улучшать этот блок: например, для небольших экранов мы сворачиваем кнопки «пополнить» и «снять» в аккуратные «+» и «–».

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

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

В первой версии концепта все пункты меню мы отобразили иконками.

Потом попробовали разделить сервисы и историю действий пользователя — получили ещё одну промежуточную версию.

В тот момент поисковые фильтры в поиске Яндекса тоже отображались иконками. Решив, что пользователей это может запутать, мы всё-таки отказались от иконок и остановились на классическом варианте с текстовым меню.

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

Регистрация: меньше шагов, больше опций

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

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

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

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

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

Главная страница для неавторизованных пользователей

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

Первая версия обновлённой страницы была построена по принципу «каждому сервису — свой экран». Мы хотели показать самостоятельность каждого из наших сервисов: переводов, оплаты услуг, приёма платежей и, наконец, кошелька, как отдельной сущности и агрегатора информации о платежах. Для некоторых сервисов даже были сделаны отдельные страницы входа (например, «Городские платежи» — сервис для оплаты услуг). 

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

Прирост регистраций после запуска второй версии этой страницы составил 8%. Результаты эксперимента подтвердили правильность нашего подхода к редизайну: не нужно пытаться показать пользователю все возможности одновременно — нужно выделить главное и грамотно расставить акценты. 

Платёжный таймлайн: фокусируемся на потребностях пользователя

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

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

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

Взглянув на неё, мы поняли, что без заголовков только мы сами знаем, какой блок — про что, пользователю это вряд ли будет очевидно. Мы добавили заголовки, объединили все блоки в один и выделили блок-«настоящее» цветом.

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

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

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

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

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

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

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

«Склейка» позволила нам в том числе избавить пользователей от путаницы, связанной с техническими особенностями платежей привязанной картой. Такой платёж технически разбит на две операции: пополнение кошелька картой и платёж из кошелька в магазин. В старой Истории последовательно отображались обе операции — и многих пользователей это сбивало с толку. Теперь в таймлайне видно главный платёж — в магазин, а техническое пополнение счёта спрятано в цепочку связанных операций.

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

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

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

Что дальше?

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

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

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