Меня зовут Дарья Калинина, и в Яндекс.Деньгах я отвечаю за развитие интерфейсов. Сейчас мы кардинально меняем внешний вид нашего сайта для авторизованных пользователей (мы называем этот раздел сайта кошельком — по сути это наш «интернет-банкинг»). И я хочу рассказать вам о том, как и почему мы пришли к таким визуальным решениям и что планируем делать дальше.
Пока новый вид доступен только части пользователей, но все, у кого есть кошелёк, могут посмотреть на него по прямой ссылке.
![](https://habrastorage.org/r/w1560/files/7d6/8b6/0d6/7d68b60d6bfa49e9b158188d79a90a22.png)
Мы приступили к редизайну в начале 2014 года после большого исследования с юзабилити-тестированием и анализом статистики.
К 2014 году Яндекс.Деньги сильно изменились функционально: из электронного кошелька с относительно узким набором возможностей мы за время с последнего редизайна эволюционировали в большой сервис для платежей в интернете и офлайне, со своими «магазинами» и возможностями оплаты разных товаров и услуг без регистрации и многим другим.
Получив результаты исследования, мы убедились, что нужно переработать многие процессы и точки взаимодействия с пользователем. Простой пример: на внутренних страницах портала авторизованные в кошельке пользователи не могли найти один из самых востребованных разделов — «Переводы»: исторически он не был вынесен в навигацию и жил только на главной странице.
![](https://habrastorage.org/r/w1560/files/fcf/646/526/fcf64652672b40c2804b2adc3914ec4e.png)
Вдобавок, безо всякого исследования было понятно, что внешний вид сайта начал безнадёжно устаревать — а в Яндексе как раз была завершена работа над новой системой визуальных гайдлайнов, которую наши дизайнеры стали активно использовать.
Еще одной предпосылкой стал переезд на новый фреймворк (с xScript на Node.js) — одно из самых серьёзных изменений в нашей разработке. Фактически, вместе с редизайном мы переписываем сайт с нуля — постранично и посценарно. Это основная причина, по которой редизайн Яндекс.Денег происходит постепенно, а не одним махом. Благодаря Node.js, нам стало легче поддерживать текущую реализацию страниц и вносить быстрые правки одновременно на всем портале, а не на каждой странице в отдельности, как было раньше, когда большая часть была реализована на xScript.
Исходя из этого сформировались цели редизайна: свежий и современный внешний вид, упрощение сценариев и сокращение пути к нужным разделам на сайте — чтобы люди охотнее приходили и хотели возвращаться. Работа над редизайном началась весной прошлого года, когда были нарисованы первые скетчи концептов и обсуждались новые идеи, и сейчас продолжается. А теперь — обо всём по порядку.
Мы хотели дать пользователю быстрый доступ к основным сервисам и платёжным операциям, поэтому начали с редизайна навигации. Кошелёк — более сложная система, чем просто аккаунт пользователя, в нём много дополнительных свойств и настроек: управление привязанными и выпущенными картами, несколько видов паролей, статусы идентификации и многое другое. Мы решили, что нужно разделить навигацию логически на две части: в одной — всё для управления настройками кошелька, а в другой — действия с деньгами (платить, переводить, смотреть историю и т.д).
Сервисы Яндекса обычно выносят пользовательские настройки в шапку. Например, кнопка «Моя музыка» в шапке Яндекс.Музыки или «Мой маркет» в Яндекс.Маркете.
![](https://habrastorage.org/r/w1560/files/161/26e/d9d/16126ed9daff4047acbb22aea162817a.png)
![](https://habrastorage.org/r/w1560/files/250/c55/9ab/250c559ab31b4df8b000cece99580c9b.png)
Поэтому в первом подходе у нас в шапке тоже появилась кнопка «Мой кошелёк». При этом самая важная для пользователя информация о кошельке — его баланс — должна была остаться на виду. И основные операции, которые непосредственно связаны с кошельком — пополнение и снятие денег — тоже должны быть заметны и легко находимы. Конструкция быстро разрослась и стала очень громоздкой.
![](https://habrastorage.org/r/w1560/files/7e0/9e3/d87/7e09e3d8771745b78065eea6fdfb5605.png)
Мы решили избавиться от кнопки «Мой кошелёк»: объединили её с балансом, который вроде как и является метафорой кошелька. Рядом с балансом поместили иконку банковской карточки — для пользователей, у которых она привязана к счёту.
![](https://habrastorage.org/r/w1560/files/e6a/3ae/bf1/e6a3aebf15104638a7f09718ae00e440.png)
В таком виде мы запустили новую шапку для пользователей. Но очень быстро поняли, что наша метафора с балансом не сработала: никто не понимал, что нужно нажать на баланс, чтобы попасть в настройки кошелька. Проведя небольшое, но очень эффективное коридорное юзабилити-тестирование, мы сделали ещё одну итерацию правок — добавили иконку кошелька рядом с балансом и стрелку, обозначающую выпадающее меню.
![](https://habrastorage.org/r/w1560/files/f2a/46f/34b/f2a46f34bcf94b528b9f0266f1107cbe.png)
Оказалось, что стрелка творит чудеса :) Количество вопросов о том, где найти номер кошелька и другие настройки, резко сократилось. Такое же сокращение мы увидели в статистике поисковых запросов на сайте.
Сейчас мы продолжаем улучшать этот блок: например, для небольших экранов мы сворачиваем кнопки «пополнить» и «снять» в аккуратные «+» и «–».
![](https://habrastorage.org/r/w1560/files/a3a/c0e/4e2/a3ac0e4e22054bf1b3aeb42b407979d2.png)
Проанализировав карту кликов, мы увидели, что в выпадающем меню с настройками кошелька чаще всего кликают на начало номера кошелька — очевидно, чтобы выделить его и скопировать. Тут мы планируем добавить автоматическое копирование номера кошелька по клику на него.
![](https://habrastorage.org/r/w1560/files/d99/885/ded/d99885dede074f2493e065467714ff06.png)
Развивая концепцию логического разделения навигации на две части, в левое меню мы вынесли все основные сервисы: переводы, оплата товаров и услуг, инструменты для приема платежей.
В первой версии концепта все пункты меню мы отобразили иконками.
![](https://habrastorage.org/r/w1560/files/863/43f/149/86343f149b2046f98460289be6554df2.png)
Потом попробовали разделить сервисы и историю действий пользователя — получили ещё одну промежуточную версию.
![](https://habrastorage.org/r/w1560/files/002/ce4/b3b/002ce4b3b5264ea486dfc5141ef98875.png)
В тот момент поисковые фильтры в поиске Яндекса тоже отображались иконками — решив, что пользователей это может запутать, мы всё-таки отказались от иконок и остановились на классическом варианте с текстовым меню.
![](https://habrastorage.org/r/w1560/files/58c/1e6/d7b/58c1e6d7bd42446695aac9ac34a3c7d7.png)
После запуска новой навигации заметно повысилась посещаемость узловых страниц сайта, на которых мы хотели сделать основные акценты. Ссылка «Переводы» стала самой кликабельной — мы поняли, что сервис переводов можно развивать как отдельную сущность, и освободить место на главной странице, прежде занятое формой переводов, для других не менее важных блоков.
Конверсия посетителей нашего сайта в зарегистрированных пользователей — одна из наших основных задач, поэтому мы стремились сделать регистрацию как можно более короткой и простой. Два года назад пользователь проходил три шага до успешного завершения регистрации, год назад мы сократили этот путь до двух шагов, теперь наша регистрация занимает один экран.
![](https://habrastorage.org/r/w1560/files/674/a6b/35f/674a6b35f7504a59ad78381b3b243854.png)
Мы убрали из процесса лишние поля, потом освежили визуальную часть — перерисовали все поля и контролы в новом дизайне. Проанализировав статистику, мы выяснили, что уделяем недостаточно внимания пользователям с авторизацией через социальные сети — и подняли кнопки социальной авторизации в самое начало — в результате количество регистраций через социальные сети выросло в 5 раз. Кроме того, в новой регистрации появилась возможность использовать номер телефона в качестве логина. Итог — увеличение конверсии в регистрации почти в два раза.
Здесь отдельно хочется отметить, что мы внимательно пересматриваем каждый процесс, который редизайним, ищем, что ещё можно упростить для пользователей. Платёжный сервис — это очень разветвлённый и сложный механизм с большим количеством внутренних ограничений. Многие из них необходимы для поддержания безопасности на должном уровне и для соблюдения требований законодательства и регулирующих органов. Не всегда в такой системе легко реализовать очевидные для пользователя — и дизайнера — решения.
Например, при любом переводе денег между физическими лицами мы обязаны запрашивать паспортные данные — это закон. Для этого мы разработали целую систему, которая определяет, откуда пришел пользователь, чем он платит, какая у него платёжная история, какой статус идентификации, выпускал ли он нашу банковскую карту (где он уже, возможно, вводил паспортные данные) — по результатам проверки система решает, нужно ли запрашивать у него дополнительную информацию в конкретный момент. В итоге пользователь у нас на сайте вводит паспортные данные не при каждом платеже, а всего один раз.
Примером ограничений по безопасности, с трудом поддающихся UX-улучшениям, может быть платёжный пароль: его мы запрашиваем на всех критически важных действиях в кошельке вместо того, чтобы запоминать настройку в один клик (и вдобавок настоятельно рекомендуем всем клиентам использовать одноразовые пароли из смс или приложения, вместо более простого, но менее безопасного постоянного пароля). Но и здесь мы работаем над автоматизацией проверок и подтверждений, что «вы — это вы», которые в конечном итоге приведут к упрощению взаимодействия с сервисом при соблюдении требований безопасности.
Отдельным проектом стал редизайн страницы для новичков — тех, кто первый раз пришел в наш сервис и хочет понять, для чего он нужен и что умеет. Ведь до сих пор многие считают, что Яндекс.Деньги — это электронная валюта, а не сервис электронных платежей с множеством полезных функций. Понятно, что нам важно переломить неверное представление.
Первая версия обновлённой страницы была построена по принципу «каждому сервису — свой экран». Мы хотели показать самостоятельность каждого из наших сервисов: переводов, оплаты услуг, приёма платежей и, наконец, кошелька, как отдельной сущности и агрегатора информации о платежах. Для некоторых сервисов даже были сделаны отдельные страницы входа (например, «Городские платежи» — сервис для оплаты услуг).
![](https://habrastorage.org/r/w1560/files/394/3d0/ce5/3943d0ce56114e4ebd323d03b2f55429.png)
Потестировав страницу на небольшом проценте аудитории, мы выяснили, что такое решение не даёт нам никакого прироста регистраций: длина сильно расфокусирует пользователей. Тогда мы убрали с неё всё лишнее и оставили только прямой переход к регистрации и краткое описание бонусов кошелька. Переходы в другие сервисы (оплату услуг, переводы и прием платежей) визуально убрали на второй план.
![](https://habrastorage.org/r/w1560/files/688/776/ef4/688776ef425c4186ba3a0575ccdd6517.png)
Прирост регистраций после запуска второй версии этой страницы составил 8%. Результаты эксперимента подтвердили правильность нашего подхода к редизайну: не нужно пытаться показать пользователю все возможности одновременно — нужно выделить главное и грамотно расставить акценты.
Следующим большим этапом редизайна стала главная страница для активных пользователей. Для этого проекта мы тщательно изучали основные пути перемещений пользователя по нашему сайту, самые частые действия и посещаемые страницы. А потом вынесли на первый план всё самое востребованное: историю, детали платежа, сохранённые платежи с настройками и без, все входящие денежные операции.
Основная концепция главной страницы сводится к ленте платежей, «таймлайну». Внизу — история платежей в хронологическом порядке. Вверху — «будущие платежи»: избранное, автоплатежи и платежи, для которых установлены напоминания. Посередине между ними — рекомендации, основанные на профиле пользователя — «настоящее», то, что мы хотим предложить пользователю прямо сейчас.
В одной из первых версий мы попытались разделить эти три блока, изменяя цвет линии, на которую «нанизаны» события таймлайна.
![](https://habrastorage.org/r/w1560/files/77e/7e4/b9f/77e7e4b9f7ba4848809f0c1f536c6f6b.png)
Взглянув на неё, мы поняли, что без заголовков только мы сами знаем, какой блок — про что, пользователю это вряд ли будет очевидно. Мы добавили заголовки, объединили все блоки в один и выделили блок-«настоящее» цветом.
![](https://habrastorage.org/r/w1560/files/1ea/082/b51/1ea082b510cd4f36a28136ba07273246.png)
Тут мы, правда, упустили, что этот способ выделения рекомендаций конфликтует с жёлтой подсветкой отдельных операций при наведении на них курсора — в следующем подходе мы снова разделили блоки таймлайна, но сохранили заголовки.
![](https://habrastorage.org/r/w1560/files/7d2/8a3/188/7d28a3188e764c639df20b7e46d971b7.png)
Одновременно с общей структурой страницы мы продумывали взаимодействие пользователя с блоком Истории. Старая История была одной большой таблицей, похожей на Excel.
![](https://habrastorage.org/r/w1560/files/c75/bc5/3d4/c75bc53d4ef34c12991a5dbc531bd0a1.png)
Мы переформатировали её в компактную ленту, похожую на историю платежей в большинстве современных интернет-банкингов. Приход и расход разделили цветом, а дату сделали более удобочитаемой.
![](https://habrastorage.org/r/w1560/files/010/7f8/125/0107f8125a21406081c2d9f4dc46a666.png)
Раньше при клике на название платежа пользователь уходил на отдельную страницу с деталями платежа. В новом подходе мы не хотели уводить пользователя с главной страницы, задача была показать все детали платежей здесь же. В первом подходе мы использовали решение, предложенное Яндекс.Диском — выезжающую справа колонку с дополнительными данными. Но в отличие от Диска, контент которого располагается по всей ширине страницы, у нас информация сосредоточена слева — примерив это решение, мы увидели, что на широких экранах такая ситуация выглядит, как минимум, странно.
![](https://habrastorage.org/r/w1560/files/949/969/246/949969246b9344d1b020073d1fb4fdd4.png)
Во втором подходе мы объединили эту колонку с таймлайном — но, будучи одинаковыми по ширине и массе, они стали конкурировать друг с другом.
![](https://habrastorage.org/r/w1560/files/362/ec1/0dc/362ec10dc9524156a641d596396e0f0a.png)
От идеи показывать детали во всплывающем окне мы тоже отказались, потому что такое окно фокусировало пользователя только на деталях платежа. А мы хотели, чтобы дополнительная информация не мешала пользователю взаимодействовать с таймлайном.
![](https://habrastorage.org/r/w1560/files/6a3/d2d/976/6a3d2d976f624211ab4a358fbc029716.png)
Итоговой версией стал еще один «остров» рядом с таймлайном, в котором мы компактно уместили всю необходимую информацию про платёж. Сюда же вынесли все целевые действия, которые в старых деталях платежа отображались незаметными ссылками.
![](https://habrastorage.org/r/w1560/files/b03/789/5f8/b037895f8ab440f48f662b988cebbe76.png)
Одной из первых фишек, которую мы придумали для таймлайна, стало объединение связанных операций (например платёж и его возврат) в цепочки, вроде «бесед» в почте. В старой Истории мы реализовали связи с помощью перекрёстных ссылок в деталях платежа, ссылки открывались на новой странице. Поскольку в новой концепции мы старались показывать все детали вокруг таймлайна и никуда не уводить пользователя, перекрёстные ссылки привели бы к странному эффекту: при нажатии на ссылку в деталях одной операции таймлайн прокручивается далеко назад, к связанной операции в прошлом, пользователь буквально проваливается в прошлое, теряя фокус на том, что видел до нажатия ссылки. Поэтому мы объединили платежи в цепочки: все связанные операции показаны рядом, независимо от времени, когда они произошли.
![](https://habrastorage.org/r/w1560/files/014/fd9/221/014fd9221d88492bb8fd5a9b114e72f4.png)
«Склейка» позволила нам в том числе избавить пользователей от путаницы, связанной с техническими особенностями платежей привязанной картой. Такой платёж технически разбит на две операции: пополнение кошелька картой и платёж из кошелька в магазин. В старой Истории последовательно отображались обе операции — и многих пользователей это сбивало с толку. Теперь в таймлайне видно главный платёж — в магазин, а техническое пополнение счёта спрятано в цепочку связанных операций.
Ещё один блок, который может время от времени появляться в таймлайне — это входящие операции, требующие от пользователя действий: например, защищённый перевод, который ожидает подтверждения кодом протекции. На главной странице мы отображаем их в дополнительном верхнем блоке с маркером-счётчиком.
![](https://habrastorage.org/r/w1560/files/0a9/c81/a2f/0a9c81a2fa74400db910bb700a201f06.png)
![](https://habrastorage.org/r/w1560/files/ff6/68a/74f/ff668a74f4f346efa6e55d02e4e179b6.png)
Параллельно с проектированием сценариев мы проработали систему иконок, отрисовку новых элементов интерфейса, расстановку акцентов и правила взаимодействия блоков — здесь мы в основном опирались на систему визуальных гайдлайнов Яндекса. Для некоторых сложных моментов наши дизайнеры изобретали свои решения, которые потом, в свою очередь, предлагали другим сервисам Яндекса. Например, многие наши сценарии предполагают заполнение сложных форм и стандартного набора гайдлайновых элементов формы было недостаточно — так у нас появилось «псевдополе» (поле, значение которого заполняется автоматически на основании предыдущих действий пользователя, но значение которого можно поправить) или сложные выпадающие списки с иконками и разбиением на группы.
![](https://habrastorage.org/r/w1560/files/2bc/a89/2a6/2bca892a654e46ffbe64b4bdb00ed235.png)
Для новых пользователей, у которых ещё нет ни Истории, ни рекомендаций, ни напоминаний, мы сделали отдельную страницу-навигатор — она помогает освоиться в кошельке и знакомит с самыми востребованными функциями.
![](https://habrastorage.org/r/w1560/files/e22/0da/b46/e220dab4657c4c62b74b9609d1360197.png)
Возвращаясь к предпосылкам и целям редизайна, обновлённый кошелёк лучше выполняет функцию персонального пространства пользователя, заточен на его настройки, привычки и платёжные паттерны. А платёжные сервисы, выросшие из кошелька, получили возможность развиваться самостоятельно с учётом потребностей всех пользователей — и тех, кто пользуется ими из кошелька, и тех, кто приходит на сайт извне.
За этот год мы прошли большой путь от идей и скетчей до полноценной реализации редизайна самой существенной части нашего сайта. Помимо описанного выше, мы полностью переписали форму переводов (об этом можно сделать отдельный рассказ — столько споров и подходов было к этой форме!), конструктор решений для приёма платежей, запустили сайт Яндекс.Кассы и сделали много других мелких усовершенствований, поддерживающих будущий редизайн.
Впереди — редизайн форм оплаты всех товаров и услуг на сайте, упрощение процесса платежа, пересмотр всех неплатёжных процессов, таких как привязка карты или восстановление доступа к счету. Чем дальше мы продвигаемся, тем целостнее и удобнее становится наш обновленный сервис. Будем рады конструктивному фидбэку.
Пока новый вид доступен только части пользователей, но все, у кого есть кошелёк, могут посмотреть на него по прямой ссылке.
![](https://habrastorage.org/files/7d6/8b6/0d6/7d68b60d6bfa49e9b158188d79a90a22.png)
Мы приступили к редизайну в начале 2014 года после большого исследования с юзабилити-тестированием и анализом статистики.
К 2014 году Яндекс.Деньги сильно изменились функционально: из электронного кошелька с относительно узким набором возможностей мы за время с последнего редизайна эволюционировали в большой сервис для платежей в интернете и офлайне, со своими «магазинами» и возможностями оплаты разных товаров и услуг без регистрации и многим другим.
Получив результаты исследования, мы убедились, что нужно переработать многие процессы и точки взаимодействия с пользователем. Простой пример: на внутренних страницах портала авторизованные в кошельке пользователи не могли найти один из самых востребованных разделов — «Переводы»: исторически он не был вынесен в навигацию и жил только на главной странице.
![](https://habrastorage.org/files/fcf/646/526/fcf64652672b40c2804b2adc3914ec4e.png)
Вдобавок, безо всякого исследования было понятно, что внешний вид сайта начал безнадёжно устаревать — а в Яндексе как раз была завершена работа над новой системой визуальных гайдлайнов, которую наши дизайнеры стали активно использовать.
Еще одной предпосылкой стал переезд на новый фреймворк (с xScript на Node.js) — одно из самых серьёзных изменений в нашей разработке. Фактически, вместе с редизайном мы переписываем сайт с нуля — постранично и посценарно. Это основная причина, по которой редизайн Яндекс.Денег происходит постепенно, а не одним махом. Благодаря Node.js, нам стало легче поддерживать текущую реализацию страниц и вносить быстрые правки одновременно на всем портале, а не на каждой странице в отдельности, как было раньше, когда большая часть была реализована на xScript.
Исходя из этого сформировались цели редизайна: свежий и современный внешний вид, упрощение сценариев и сокращение пути к нужным разделам на сайте — чтобы люди охотнее приходили и хотели возвращаться. Работа над редизайном началась весной прошлого года, когда были нарисованы первые скетчи концептов и обсуждались новые идеи, и сейчас продолжается. А теперь — обо всём по порядку.
Навигация: наводим порядок
Мы хотели дать пользователю быстрый доступ к основным сервисам и платёжным операциям, поэтому начали с редизайна навигации. Кошелёк — более сложная система, чем просто аккаунт пользователя, в нём много дополнительных свойств и настроек: управление привязанными и выпущенными картами, несколько видов паролей, статусы идентификации и многое другое. Мы решили, что нужно разделить навигацию логически на две части: в одной — всё для управления настройками кошелька, а в другой — действия с деньгами (платить, переводить, смотреть историю и т.д).
Сервисы Яндекса обычно выносят пользовательские настройки в шапку. Например, кнопка «Моя музыка» в шапке Яндекс.Музыки или «Мой маркет» в Яндекс.Маркете.
![](https://habrastorage.org/files/161/26e/d9d/16126ed9daff4047acbb22aea162817a.png)
![](https://habrastorage.org/files/250/c55/9ab/250c559ab31b4df8b000cece99580c9b.png)
Поэтому в первом подходе у нас в шапке тоже появилась кнопка «Мой кошелёк». При этом самая важная для пользователя информация о кошельке — его баланс — должна была остаться на виду. И основные операции, которые непосредственно связаны с кошельком — пополнение и снятие денег — тоже должны быть заметны и легко находимы. Конструкция быстро разрослась и стала очень громоздкой.
![](https://habrastorage.org/files/7e0/9e3/d87/7e09e3d8771745b78065eea6fdfb5605.png)
Мы решили избавиться от кнопки «Мой кошелёк»: объединили её с балансом, который вроде как и является метафорой кошелька. Рядом с балансом поместили иконку банковской карточки — для пользователей, у которых она привязана к счёту.
![](https://habrastorage.org/files/e6a/3ae/bf1/e6a3aebf15104638a7f09718ae00e440.png)
В таком виде мы запустили новую шапку для пользователей. Но очень быстро поняли, что наша метафора с балансом не сработала: никто не понимал, что нужно нажать на баланс, чтобы попасть в настройки кошелька. Проведя небольшое, но очень эффективное коридорное юзабилити-тестирование, мы сделали ещё одну итерацию правок — добавили иконку кошелька рядом с балансом и стрелку, обозначающую выпадающее меню.
![](https://habrastorage.org/files/f2a/46f/34b/f2a46f34bcf94b528b9f0266f1107cbe.png)
Оказалось, что стрелка творит чудеса :) Количество вопросов о том, где найти номер кошелька и другие настройки, резко сократилось. Такое же сокращение мы увидели в статистике поисковых запросов на сайте.
Сейчас мы продолжаем улучшать этот блок: например, для небольших экранов мы сворачиваем кнопки «пополнить» и «снять» в аккуратные «+» и «–».
![](https://habrastorage.org/files/a3a/c0e/4e2/a3ac0e4e22054bf1b3aeb42b407979d2.png)
Проанализировав карту кликов, мы увидели, что в выпадающем меню с настройками кошелька чаще всего кликают на начало номера кошелька — очевидно, чтобы выделить его и скопировать. Тут мы планируем добавить автоматическое копирование номера кошелька по клику на него.
![](https://habrastorage.org/files/d99/885/ded/d99885dede074f2493e065467714ff06.png)
Развивая концепцию логического разделения навигации на две части, в левое меню мы вынесли все основные сервисы: переводы, оплата товаров и услуг, инструменты для приема платежей.
В первой версии концепта все пункты меню мы отобразили иконками.
![](https://habrastorage.org/files/863/43f/149/86343f149b2046f98460289be6554df2.png)
Потом попробовали разделить сервисы и историю действий пользователя — получили ещё одну промежуточную версию.
![](https://habrastorage.org/files/002/ce4/b3b/002ce4b3b5264ea486dfc5141ef98875.png)
В тот момент поисковые фильтры в поиске Яндекса тоже отображались иконками — решив, что пользователей это может запутать, мы всё-таки отказались от иконок и остановились на классическом варианте с текстовым меню.
![](https://habrastorage.org/files/58c/1e6/d7b/58c1e6d7bd42446695aac9ac34a3c7d7.png)
После запуска новой навигации заметно повысилась посещаемость узловых страниц сайта, на которых мы хотели сделать основные акценты. Ссылка «Переводы» стала самой кликабельной — мы поняли, что сервис переводов можно развивать как отдельную сущность, и освободить место на главной странице, прежде занятое формой переводов, для других не менее важных блоков.
Регистрация: меньше шагов, больше опций
Конверсия посетителей нашего сайта в зарегистрированных пользователей — одна из наших основных задач, поэтому мы стремились сделать регистрацию как можно более короткой и простой. Два года назад пользователь проходил три шага до успешного завершения регистрации, год назад мы сократили этот путь до двух шагов, теперь наша регистрация занимает один экран.
![](https://habrastorage.org/files/674/a6b/35f/674a6b35f7504a59ad78381b3b243854.png)
Мы убрали из процесса лишние поля, потом освежили визуальную часть — перерисовали все поля и контролы в новом дизайне. Проанализировав статистику, мы выяснили, что уделяем недостаточно внимания пользователям с авторизацией через социальные сети — и подняли кнопки социальной авторизации в самое начало — в результате количество регистраций через социальные сети выросло в 5 раз. Кроме того, в новой регистрации появилась возможность использовать номер телефона в качестве логина. Итог — увеличение конверсии в регистрации почти в два раза.
Здесь отдельно хочется отметить, что мы внимательно пересматриваем каждый процесс, который редизайним, ищем, что ещё можно упростить для пользователей. Платёжный сервис — это очень разветвлённый и сложный механизм с большим количеством внутренних ограничений. Многие из них необходимы для поддержания безопасности на должном уровне и для соблюдения требований законодательства и регулирующих органов. Не всегда в такой системе легко реализовать очевидные для пользователя — и дизайнера — решения.
Например, при любом переводе денег между физическими лицами мы обязаны запрашивать паспортные данные — это закон. Для этого мы разработали целую систему, которая определяет, откуда пришел пользователь, чем он платит, какая у него платёжная история, какой статус идентификации, выпускал ли он нашу банковскую карту (где он уже, возможно, вводил паспортные данные) — по результатам проверки система решает, нужно ли запрашивать у него дополнительную информацию в конкретный момент. В итоге пользователь у нас на сайте вводит паспортные данные не при каждом платеже, а всего один раз.
Примером ограничений по безопасности, с трудом поддающихся UX-улучшениям, может быть платёжный пароль: его мы запрашиваем на всех критически важных действиях в кошельке вместо того, чтобы запоминать настройку в один клик (и вдобавок настоятельно рекомендуем всем клиентам использовать одноразовые пароли из смс или приложения, вместо более простого, но менее безопасного постоянного пароля). Но и здесь мы работаем над автоматизацией проверок и подтверждений, что «вы — это вы», которые в конечном итоге приведут к упрощению взаимодействия с сервисом при соблюдении требований безопасности.
Главная страница для неавторизованных пользователей
Отдельным проектом стал редизайн страницы для новичков — тех, кто первый раз пришел в наш сервис и хочет понять, для чего он нужен и что умеет. Ведь до сих пор многие считают, что Яндекс.Деньги — это электронная валюта, а не сервис электронных платежей с множеством полезных функций. Понятно, что нам важно переломить неверное представление.
Первая версия обновлённой страницы была построена по принципу «каждому сервису — свой экран». Мы хотели показать самостоятельность каждого из наших сервисов: переводов, оплаты услуг, приёма платежей и, наконец, кошелька, как отдельной сущности и агрегатора информации о платежах. Для некоторых сервисов даже были сделаны отдельные страницы входа (например, «Городские платежи» — сервис для оплаты услуг).
![](https://habrastorage.org/files/394/3d0/ce5/3943d0ce56114e4ebd323d03b2f55429.png)
Потестировав страницу на небольшом проценте аудитории, мы выяснили, что такое решение не даёт нам никакого прироста регистраций: длина сильно расфокусирует пользователей. Тогда мы убрали с неё всё лишнее и оставили только прямой переход к регистрации и краткое описание бонусов кошелька. Переходы в другие сервисы (оплату услуг, переводы и прием платежей) визуально убрали на второй план.
![](https://habrastorage.org/files/688/776/ef4/688776ef425c4186ba3a0575ccdd6517.png)
Прирост регистраций после запуска второй версии этой страницы составил 8%. Результаты эксперимента подтвердили правильность нашего подхода к редизайну: не нужно пытаться показать пользователю все возможности одновременно — нужно выделить главное и грамотно расставить акценты.
Платёжный таймлайн: фокусируемся на потребностях пользователя
Следующим большим этапом редизайна стала главная страница для активных пользователей. Для этого проекта мы тщательно изучали основные пути перемещений пользователя по нашему сайту, самые частые действия и посещаемые страницы. А потом вынесли на первый план всё самое востребованное: историю, детали платежа, сохранённые платежи с настройками и без, все входящие денежные операции.
Основная концепция главной страницы сводится к ленте платежей, «таймлайну». Внизу — история платежей в хронологическом порядке. Вверху — «будущие платежи»: избранное, автоплатежи и платежи, для которых установлены напоминания. Посередине между ними — рекомендации, основанные на профиле пользователя — «настоящее», то, что мы хотим предложить пользователю прямо сейчас.
В одной из первых версий мы попытались разделить эти три блока, изменяя цвет линии, на которую «нанизаны» события таймлайна.
![](https://habrastorage.org/files/77e/7e4/b9f/77e7e4b9f7ba4848809f0c1f536c6f6b.png)
Взглянув на неё, мы поняли, что без заголовков только мы сами знаем, какой блок — про что, пользователю это вряд ли будет очевидно. Мы добавили заголовки, объединили все блоки в один и выделили блок-«настоящее» цветом.
![](https://habrastorage.org/files/1ea/082/b51/1ea082b510cd4f36a28136ba07273246.png)
Тут мы, правда, упустили, что этот способ выделения рекомендаций конфликтует с жёлтой подсветкой отдельных операций при наведении на них курсора — в следующем подходе мы снова разделили блоки таймлайна, но сохранили заголовки.
![](https://habrastorage.org/files/7d2/8a3/188/7d28a3188e764c639df20b7e46d971b7.png)
Одновременно с общей структурой страницы мы продумывали взаимодействие пользователя с блоком Истории. Старая История была одной большой таблицей, похожей на Excel.
![](https://habrastorage.org/files/c75/bc5/3d4/c75bc53d4ef34c12991a5dbc531bd0a1.png)
Мы переформатировали её в компактную ленту, похожую на историю платежей в большинстве современных интернет-банкингов. Приход и расход разделили цветом, а дату сделали более удобочитаемой.
![](https://habrastorage.org/files/010/7f8/125/0107f8125a21406081c2d9f4dc46a666.png)
Раньше при клике на название платежа пользователь уходил на отдельную страницу с деталями платежа. В новом подходе мы не хотели уводить пользователя с главной страницы, задача была показать все детали платежей здесь же. В первом подходе мы использовали решение, предложенное Яндекс.Диском — выезжающую справа колонку с дополнительными данными. Но в отличие от Диска, контент которого располагается по всей ширине страницы, у нас информация сосредоточена слева — примерив это решение, мы увидели, что на широких экранах такая ситуация выглядит, как минимум, странно.
![](https://habrastorage.org/files/949/969/246/949969246b9344d1b020073d1fb4fdd4.png)
Во втором подходе мы объединили эту колонку с таймлайном — но, будучи одинаковыми по ширине и массе, они стали конкурировать друг с другом.
![](https://habrastorage.org/files/362/ec1/0dc/362ec10dc9524156a641d596396e0f0a.png)
От идеи показывать детали во всплывающем окне мы тоже отказались, потому что такое окно фокусировало пользователя только на деталях платежа. А мы хотели, чтобы дополнительная информация не мешала пользователю взаимодействовать с таймлайном.
![](https://habrastorage.org/files/6a3/d2d/976/6a3d2d976f624211ab4a358fbc029716.png)
Итоговой версией стал еще один «остров» рядом с таймлайном, в котором мы компактно уместили всю необходимую информацию про платёж. Сюда же вынесли все целевые действия, которые в старых деталях платежа отображались незаметными ссылками.
![](https://habrastorage.org/files/b03/789/5f8/b037895f8ab440f48f662b988cebbe76.png)
Одной из первых фишек, которую мы придумали для таймлайна, стало объединение связанных операций (например платёж и его возврат) в цепочки, вроде «бесед» в почте. В старой Истории мы реализовали связи с помощью перекрёстных ссылок в деталях платежа, ссылки открывались на новой странице. Поскольку в новой концепции мы старались показывать все детали вокруг таймлайна и никуда не уводить пользователя, перекрёстные ссылки привели бы к странному эффекту: при нажатии на ссылку в деталях одной операции таймлайн прокручивается далеко назад, к связанной операции в прошлом, пользователь буквально проваливается в прошлое, теряя фокус на том, что видел до нажатия ссылки. Поэтому мы объединили платежи в цепочки: все связанные операции показаны рядом, независимо от времени, когда они произошли.
![](https://habrastorage.org/files/014/fd9/221/014fd9221d88492bb8fd5a9b114e72f4.png)
«Склейка» позволила нам в том числе избавить пользователей от путаницы, связанной с техническими особенностями платежей привязанной картой. Такой платёж технически разбит на две операции: пополнение кошелька картой и платёж из кошелька в магазин. В старой Истории последовательно отображались обе операции — и многих пользователей это сбивало с толку. Теперь в таймлайне видно главный платёж — в магазин, а техническое пополнение счёта спрятано в цепочку связанных операций.
Ещё один блок, который может время от времени появляться в таймлайне — это входящие операции, требующие от пользователя действий: например, защищённый перевод, который ожидает подтверждения кодом протекции. На главной странице мы отображаем их в дополнительном верхнем блоке с маркером-счётчиком.
![](https://habrastorage.org/files/0a9/c81/a2f/0a9c81a2fa74400db910bb700a201f06.png)
![](https://habrastorage.org/files/ff6/68a/74f/ff668a74f4f346efa6e55d02e4e179b6.png)
Параллельно с проектированием сценариев мы проработали систему иконок, отрисовку новых элементов интерфейса, расстановку акцентов и правила взаимодействия блоков — здесь мы в основном опирались на систему визуальных гайдлайнов Яндекса. Для некоторых сложных моментов наши дизайнеры изобретали свои решения, которые потом, в свою очередь, предлагали другим сервисам Яндекса. Например, многие наши сценарии предполагают заполнение сложных форм и стандартного набора гайдлайновых элементов формы было недостаточно — так у нас появилось «псевдополе» (поле, значение которого заполняется автоматически на основании предыдущих действий пользователя, но значение которого можно поправить) или сложные выпадающие списки с иконками и разбиением на группы.
![](https://habrastorage.org/files/fe0/3a4/aa3/fe03a4aa35e5486ab45d3e19a79a056d.png)
![](https://habrastorage.org/files/2bc/a89/2a6/2bca892a654e46ffbe64b4bdb00ed235.png)
Для новых пользователей, у которых ещё нет ни Истории, ни рекомендаций, ни напоминаний, мы сделали отдельную страницу-навигатор — она помогает освоиться в кошельке и знакомит с самыми востребованными функциями.
![](https://habrastorage.org/files/e22/0da/b46/e220dab4657c4c62b74b9609d1360197.png)
Что дальше?
Возвращаясь к предпосылкам и целям редизайна, обновлённый кошелёк лучше выполняет функцию персонального пространства пользователя, заточен на его настройки, привычки и платёжные паттерны. А платёжные сервисы, выросшие из кошелька, получили возможность развиваться самостоятельно с учётом потребностей всех пользователей — и тех, кто пользуется ими из кошелька, и тех, кто приходит на сайт извне.
За этот год мы прошли большой путь от идей и скетчей до полноценной реализации редизайна самой существенной части нашего сайта. Помимо описанного выше, мы полностью переписали форму переводов (об этом можно сделать отдельный рассказ — столько споров и подходов было к этой форме!), конструктор решений для приёма платежей, запустили сайт Яндекс.Кассы и сделали много других мелких усовершенствований, поддерживающих будущий редизайн.
Впереди — редизайн форм оплаты всех товаров и услуг на сайте, упрощение процесса платежа, пересмотр всех неплатёжных процессов, таких как привязка карты или восстановление доступа к счету. Чем дальше мы продвигаемся, тем целостнее и удобнее становится наш обновленный сервис. Будем рады конструктивному фидбэку.