Пока новый вид доступен только части пользователей, но все, у кого есть кошелёк, могут посмотреть на него по прямой ссылке.
Мы приступили к редизайну в начале 2014 года после большого исследования с юзабилити-тестированием и анализом статистики.
К 2014 году Яндекс.Деньги сильно изменились функционально: из электронного кошелька с относительно узким набором возможностей мы за время с последнего редизайна эволюционировали в большой сервис для платежей в интернете и офлайне, со своими «магазинами» и возможностями оплаты разных товаров и услуг без регистрации и многим другим.
Получив результаты исследования, мы убедились, что нужно переработать многие процессы и точки взаимодействия с пользователем. Простой пример: на внутренних страницах портала авторизованные в кошельке пользователи не могли найти один из самых востребованных разделов — «Переводы»: исторически он не был вынесен в навигацию и жил только на главной странице.
Вдобавок, безо всякого исследования было понятно, что внешний вид сайта начал безнадёжно устаревать — а в Яндексе как раз была завершена работа над новой системой визуальных гайдлайнов, которую наши дизайнеры стали активно использовать.
Еще одной предпосылкой стал переезд на новый фреймворк (с xScript на Node.js) — одно из самых серьёзных изменений в нашей разработке. Фактически, вместе с редизайном мы переписываем сайт с нуля — постранично и посценарно. Это основная причина, по которой редизайн Яндекс.Денег происходит постепенно, а не одним махом. Благодаря Node.js, нам стало легче поддерживать текущую реализацию страниц и вносить быстрые правки одновременно на всем портале, а не на каждой странице в отдельности, как было раньше, когда большая часть была реализована на xScript.
Исходя из этого сформировались цели редизайна: свежий и современный внешний вид, упрощение сценариев и сокращение пути к нужным разделам на сайте — чтобы люди охотнее приходили и хотели возвращаться. Работа над редизайном началась весной прошлого года, когда были нарисованы первые скетчи концептов и обсуждались новые идеи, и сейчас продолжается. А теперь — обо всём по порядку.
Навигация: наводим порядок
Мы хотели дать пользователю быстрый доступ к основным сервисам и платёжным операциям, поэтому начали с редизайна навигации. Кошелёк — более сложная система, чем просто аккаунт пользователя, в нём много дополнительных свойств и настроек: управление привязанными и выпущенными картами, несколько видов паролей, статусы идентификации и многое другое. Мы решили, что нужно разделить навигацию логически на две части: в одной — всё для управления настройками кошелька, а в другой — действия с деньгами (платить, переводить, смотреть историю и т.д).
Сервисы Яндекса обычно выносят пользовательские настройки в шапку. Например, кнопка «Моя музыка» в шапке Яндекс.Музыки или «Мой маркет» в Яндекс.Маркете.
Поэтому в первом подходе у нас в шапке тоже появилась кнопка «Мой кошелёк». При этом самая важная для пользователя информация о кошельке — его баланс — должна была остаться на виду. И основные операции, которые непосредственно связаны с кошельком — пополнение и снятие денег — тоже должны быть заметны и легко находимы. Конструкция быстро разрослась и стала очень громоздкой.
Мы решили избавиться от кнопки «Мой кошелёк»: объединили её с балансом, который вроде как и является метафорой кошелька. Рядом с балансом поместили иконку банковской карточки — для пользователей, у которых она привязана к счёту.
В таком виде мы запустили новую шапку для пользователей. Но очень быстро поняли, что наша метафора с балансом не сработала: никто не понимал, что нужно нажать на баланс, чтобы попасть в настройки кошелька. Проведя небольшое, но очень эффективное коридорное юзабилити-тестирование, мы сделали ещё одну итерацию правок — добавили иконку кошелька рядом с балансом и стрелку, обозначающую выпадающее меню.
Оказалось, что стрелка творит чудеса :) Количество вопросов о том, где найти номер кошелька и другие настройки, резко сократилось. Такое же сокращение мы увидели в статистике поисковых запросов на сайте.
Сейчас мы продолжаем улучшать этот блок: например, для небольших экранов мы сворачиваем кнопки «пополнить» и «снять» в аккуратные «+» и «–».
Проанализировав карту кликов, мы увидели, что в выпадающем меню с настройками кошелька чаще всего кликают на начало номера кошелька — очевидно, чтобы выделить его и скопировать. Тут мы планируем добавить автоматическое копирование номера кошелька по клику на него.
Развивая концепцию логического разделения навигации на две части, в левое меню мы вынесли все основные сервисы: переводы, оплата товаров и услуг, инструменты для приема платежей.
В первой версии концепта все пункты меню мы отобразили иконками.
Потом попробовали разделить сервисы и историю действий пользователя — получили ещё одну промежуточную версию.
В тот момент поисковые фильтры в поиске Яндекса тоже отображались иконками — решив, что пользователей это может запутать, мы всё-таки отказались от иконок и остановились на классическом варианте с текстовым меню.
После запуска новой навигации заметно повысилась посещаемость узловых страниц сайта, на которых мы хотели сделать основные акценты. Ссылка «Переводы» стала самой кликабельной — мы поняли, что сервис переводов можно развивать как отдельную сущность, и освободить место на главной странице, прежде занятое формой переводов, для других не менее важных блоков.
Регистрация: меньше шагов, больше опций
Конверсия посетителей нашего сайта в зарегистрированных пользователей — одна из наших основных задач, поэтому мы стремились сделать регистрацию как можно более короткой и простой. Два года назад пользователь проходил три шага до успешного завершения регистрации, год назад мы сократили этот путь до двух шагов, теперь наша регистрация занимает один экран.
Мы убрали из процесса лишние поля, потом освежили визуальную часть — перерисовали все поля и контролы в новом дизайне. Проанализировав статистику, мы выяснили, что уделяем недостаточно внимания пользователям с авторизацией через социальные сети — и подняли кнопки социальной авторизации в самое начало — в результате количество регистраций через социальные сети выросло в 5 раз. Кроме того, в новой регистрации появилась возможность использовать номер телефона в качестве логина. Итог — увеличение конверсии в регистрации почти в два раза.
Здесь отдельно хочется отметить, что мы внимательно пересматриваем каждый процесс, который редизайним, ищем, что ещё можно упростить для пользователей. Платёжный сервис — это очень разветвлённый и сложный механизм с большим количеством внутренних ограничений. Многие из них необходимы для поддержания безопасности на должном уровне и для соблюдения требований законодательства и регулирующих органов. Не всегда в такой системе легко реализовать очевидные для пользователя — и дизайнера — решения.
Например, при любом переводе денег между физическими лицами мы обязаны запрашивать паспортные данные — это закон. Для этого мы разработали целую систему, которая определяет, откуда пришел пользователь, чем он платит, какая у него платёжная история, какой статус идентификации, выпускал ли он нашу банковскую карту (где он уже, возможно, вводил паспортные данные) — по результатам проверки система решает, нужно ли запрашивать у него дополнительную информацию в конкретный момент. В итоге пользователь у нас на сайте вводит паспортные данные не при каждом платеже, а всего один раз.
Примером ограничений по безопасности, с трудом поддающихся UX-улучшениям, может быть платёжный пароль: его мы запрашиваем на всех критически важных действиях в кошельке вместо того, чтобы запоминать настройку в один клик (и вдобавок настоятельно рекомендуем всем клиентам использовать одноразовые пароли из смс или приложения, вместо более простого, но менее безопасного постоянного пароля). Но и здесь мы работаем над автоматизацией проверок и подтверждений, что «вы — это вы», которые в конечном итоге приведут к упрощению взаимодействия с сервисом при соблюдении требований безопасности.
Главная страница для неавторизованных пользователей
Отдельным проектом стал редизайн страницы для новичков — тех, кто первый раз пришел в наш сервис и хочет понять, для чего он нужен и что умеет. Ведь до сих пор многие считают, что Яндекс.Деньги — это электронная валюта, а не сервис электронных платежей с множеством полезных функций. Понятно, что нам важно переломить неверное представление.
Первая версия обновлённой страницы была построена по принципу «каждому сервису — свой экран». Мы хотели показать самостоятельность каждого из наших сервисов: переводов, оплаты услуг, приёма платежей и, наконец, кошелька, как отдельной сущности и агрегатора информации о платежах. Для некоторых сервисов даже были сделаны отдельные страницы входа (например, «Городские платежи» — сервис для оплаты услуг).
Потестировав страницу на небольшом проценте аудитории, мы выяснили, что такое решение не даёт нам никакого прироста регистраций: длина сильно расфокусирует пользователей. Тогда мы убрали с неё всё лишнее и оставили только прямой переход к регистрации и краткое описание бонусов кошелька. Переходы в другие сервисы (оплату услуг, переводы и прием платежей) визуально убрали на второй план.
Прирост регистраций после запуска второй версии этой страницы составил 8%. Результаты эксперимента подтвердили правильность нашего подхода к редизайну: не нужно пытаться показать пользователю все возможности одновременно — нужно выделить главное и грамотно расставить акценты.
Платёжный таймлайн: фокусируемся на потребностях пользователя
Следующим большим этапом редизайна стала главная страница для активных пользователей. Для этого проекта мы тщательно изучали основные пути перемещений пользователя по нашему сайту, самые частые действия и посещаемые страницы. А потом вынесли на первый план всё самое востребованное: историю, детали платежа, сохранённые платежи с настройками и без, все входящие денежные операции.
Основная концепция главной страницы сводится к ленте платежей, «таймлайну». Внизу — история платежей в хронологическом порядке. Вверху — «будущие платежи»: избранное, автоплатежи и платежи, для которых установлены напоминания. Посередине между ними — рекомендации, основанные на профиле пользователя — «настоящее», то, что мы хотим предложить пользователю прямо сейчас.
В одной из первых версий мы попытались разделить эти три блока, изменяя цвет линии, на которую «нанизаны» события таймлайна.
Взглянув на неё, мы поняли, что без заголовков только мы сами знаем, какой блок — про что, пользователю это вряд ли будет очевидно. Мы добавили заголовки, объединили все блоки в один и выделили блок-«настоящее» цветом.
Тут мы, правда, упустили, что этот способ выделения рекомендаций конфликтует с жёлтой подсветкой отдельных операций при наведении на них курсора — в следующем подходе мы снова разделили блоки таймлайна, но сохранили заголовки.
Одновременно с общей структурой страницы мы продумывали взаимодействие пользователя с блоком Истории. Старая История была одной большой таблицей, похожей на Excel.
Мы переформатировали её в компактную ленту, похожую на историю платежей в большинстве современных интернет-банкингов. Приход и расход разделили цветом, а дату сделали более удобочитаемой.
Раньше при клике на название платежа пользователь уходил на отдельную страницу с деталями платежа. В новом подходе мы не хотели уводить пользователя с главной страницы, задача была показать все детали платежей здесь же. В первом подходе мы использовали решение, предложенное Яндекс.Диском — выезжающую справа колонку с дополнительными данными. Но в отличие от Диска, контент которого располагается по всей ширине страницы, у нас информация сосредоточена слева — примерив это решение, мы увидели, что на широких экранах такая ситуация выглядит, как минимум, странно.
Во втором подходе мы объединили эту колонку с таймлайном — но, будучи одинаковыми по ширине и массе, они стали конкурировать друг с другом.
От идеи показывать детали во всплывающем окне мы тоже отказались, потому что такое окно фокусировало пользователя только на деталях платежа. А мы хотели, чтобы дополнительная информация не мешала пользователю взаимодействовать с таймлайном.
Итоговой версией стал еще один «остров» рядом с таймлайном, в котором мы компактно уместили всю необходимую информацию про платёж. Сюда же вынесли все целевые действия, которые в старых деталях платежа отображались незаметными ссылками.
Одной из первых фишек, которую мы придумали для таймлайна, стало объединение связанных операций (например платёж и его возврат) в цепочки, вроде «бесед» в почте. В старой Истории мы реализовали связи с помощью перекрёстных ссылок в деталях платежа, ссылки открывались на новой странице. Поскольку в новой концепции мы старались показывать все детали вокруг таймлайна и никуда не уводить пользователя, перекрёстные ссылки привели бы к странному эффекту: при нажатии на ссылку в деталях одной операции таймлайн прокручивается далеко назад, к связанной операции в прошлом, пользователь буквально проваливается в прошлое, теряя фокус на том, что видел до нажатия ссылки. Поэтому мы объединили платежи в цепочки: все связанные операции показаны рядом, независимо от времени, когда они произошли.
«Склейка» позволила нам в том числе избавить пользователей от путаницы, связанной с техническими особенностями платежей привязанной картой. Такой платёж технически разбит на две операции: пополнение кошелька картой и платёж из кошелька в магазин. В старой Истории последовательно отображались обе операции — и многих пользователей это сбивало с толку. Теперь в таймлайне видно главный платёж — в магазин, а техническое пополнение счёта спрятано в цепочку связанных операций.
Ещё один блок, который может время от времени появляться в таймлайне — это входящие операции, требующие от пользователя действий: например, защищённый перевод, который ожидает подтверждения кодом протекции. На главной странице мы отображаем их в дополнительном верхнем блоке с маркером-счётчиком.
Параллельно с проектированием сценариев мы проработали систему иконок, отрисовку новых элементов интерфейса, расстановку акцентов и правила взаимодействия блоков — здесь мы в основном опирались на систему визуальных гайдлайнов Яндекса. Для некоторых сложных моментов наши дизайнеры изобретали свои решения, которые потом, в свою очередь, предлагали другим сервисам Яндекса. Например, многие наши сценарии предполагают заполнение сложных форм и стандартного набора гайдлайновых элементов формы было недостаточно — так у нас появилось «псевдополе» (поле, значение которого заполняется автоматически на основании предыдущих действий пользователя, но значение которого можно поправить) или сложные выпадающие списки с иконками и разбиением на группы.
Для новых пользователей, у которых ещё нет ни Истории, ни рекомендаций, ни напоминаний, мы сделали отдельную страницу-навигатор — она помогает освоиться в кошельке и знакомит с самыми востребованными функциями.
Что дальше?
Возвращаясь к предпосылкам и целям редизайна, обновлённый кошелёк лучше выполняет функцию персонального пространства пользователя, заточен на его настройки, привычки и платёжные паттерны. А платёжные сервисы, выросшие из кошелька, получили возможность развиваться самостоятельно с учётом потребностей всех пользователей — и тех, кто пользуется ими из кошелька, и тех, кто приходит на сайт извне.
За этот год мы прошли большой путь от идей и скетчей до полноценной реализации редизайна самой существенной части нашего сайта. Помимо описанного выше, мы полностью переписали форму переводов (об этом можно сделать отдельный рассказ — столько споров и подходов было к этой форме!), конструктор решений для приёма платежей, запустили сайт Яндекс.Кассы и сделали много других мелких усовершенствований, поддерживающих будущий редизайн.
Впереди — редизайн форм оплаты всех товаров и услуг на сайте, упрощение процесса платежа, пересмотр всех неплатёжных процессов, таких как привязка карты или восстановление доступа к счету. Чем дальше мы продвигаемся, тем целостнее и удобнее становится наш обновленный сервис. Будем рады конструктивному фидбэку.
Комментарии (71)
merhalak
16.07.2015 16:35+9После обновления Я.Маркета он у меня даже на ноутбуке стал шевелиться ощутимо медленнее, вентилятор шуметь начал. Мобильные устройства так вообще работают в режиме «ткнул — подожди», ибо не обновляю их на новый модельки (Galaxy Tab 7.7). Не спорю, представление информации стало удобнее, но с фризами нон-стоп.
MiXei4
16.07.2015 16:40+5Я посмотрел на скриншот с формой регистрации, потом прочитал фразу
Проанализировав статистику, мы выяснили, что уделяем недостаточно внимания пользователям с авторизацией через социальные сети — и подняли кнопки социальной авторизации в самое начало
И только после этого заметил кнопки регистрации через соцсети. Видимо глаз их просто пропустил, подумав, что это кнопки «Поделиться» — очень похожи.
goshavis
16.07.2015 19:06+2Я только прочитав ваш комментарий понял, что эти кнопки для регистрации. Сразу тоже думал что поделиться. Саму статью читал выборочно, так что может в ней есть.
ilyaplot
17.07.2015 02:33+3И мне пришла мысль, что слишком напоминает кнопки «поделиться» от яндекса. Их нужно делать больше. Я бы разделил визуально форму на два варианта. Вспомните матрицу, это тот случай :)
tasmitka Автор
17.07.2015 16:32+1Спасибо за отзыв, мы подумаем, как здесь можно улучшить узнаваемость. Но вообще, количество регистраций через эти кнопки убеждает нас в том, что они очень хорошо работают.
maxp
16.07.2015 18:20+4Видно, что поработали, по дизайну стало лучше, но по юзабилити хуже.
Поясняю:
Заходим money.yandex.ru, видим слева менюшку
«История», «Избранное», «Товары», «Переводы», «прием платежей», подсвечен первый пункт «История».
И теперь там на всю страницу расписаны «Сохраненные»!!!
Какого фига мне теперь каждый раз любоваться на них?!
Я и так прекрасно знаю, что у меня есть в «избранном», и когда понадобится я кликну этот пункт,
мне вовсе не надо при каждом визите в Яндекс.Деньги платить что-либо по «избранным».
Зато теперь до «Истории» надо мотать страницу.
Куда делся удобный «дашборд», где можно и «товар» выбрать, и историю оглядеть, и номер телефона/емалйа вбить для перевода?
В конце концов, поисковая компания могла бы сделать более умный поиск, чтобы по нескольким введенным символам можно было сразу отобразить подходящее из недавних платежей/избранного/и др.
Если я не очень понятно объясняю, то посмотрите, как это в телефоне работает.tasmitka Автор
16.07.2015 22:41+2Пока мы не открыли новый дизайн на всех пользователей, в меню слева сохраняются пункты «История» и «Избранное». Как только откроем на всех — уберем эти пункты, оставив один «Мои операции», тогда логический казус пропадет.
Товары — далеко не самая востребованная часть старой главной страницы, поэтому мы оставили их на отдельной странице. А Переводы постоянно развиваются и обрастают новыми функциями, которые на главной перестали помещаться, поэтому мы вынесли их отдельным разделом.
В направлении «умного поиска» по истории платежей мы усердно работаем :)maxp
17.07.2015 06:43+3Попробую еще раз объяснить основную проблему.
Захожу на money.yandex.ru и вижу на странице
— сумма (справа вверху)
— 7 пунктов «сохраненного»
— под ними «показать еще»
— и где-то внизу виднееется заголовок «история»
Из всего этого многообразия полезной информацией является только «сумма», а чтобы посмотреть «историю» необходимо мотать страницу до низу. «Сохраненные» нужны лишь один-два раза в месяц, надо сделать хотя бы возможность сворачивать их полностью, чтобы было видно «историю» без промотки.
«Сохраненные (9 штук) [показать] [избранное/напоминания/автоплатежи]»
«История ...»tasmitka Автор
17.07.2015 16:34А какое количество операций в «сохраненных» вам было бы комфортно видеть всегда раскрытыми?
KorDen32
17.07.2015 16:44+1Думаю было бы идеально вообще добавить к каждому сохраненному галку «отображать на главной сразу», таким образом можно было бы и убрать все при желании, и отобразить любое нужное количество без «среднего по больнице»
maxp
17.07.2015 19:19+1Никакое.
Если я сохранил платеж для чего-то, то я предполагаю, что буду использовать его в дальнйшем.
И если возникает мысль «надо заплатить ...», то тогда первая мысль тыкнуть в избранное, но ни в каком другом случае мне нет надобности смотреть в «избранное», что я там не видел?
Подумайте над поисковой строкой. В идеале, чтобы по набору в ней работал suggest по данным в порядке приоритета — избранное, история платежей, партнеры и т.п.
То есть если мне надо пополнить телефон тёщи, то я начинаю набирать его и в подсказке выскакивает последний платеж на этот телефон. Если я хочу перекинуть немного денег на Тинькова, то по набору «тинь» у меня однозначно бы определялся платеж из «избранного».
В общем, что тут объяснять, эта практика уже привычна и хорошо работает во многих местах.
maxp
17.07.2015 06:50+2Тут уже писали где-то, что хорошо бы выделить отдельный пункт меню под информацию о счете, реквизиты, карты и т.п.
Понятно, что можно внезапно найти это, тыкнув в «баланс» и запомнить, что оно лежит там.
Но такой расклад по первости ставит в тупик, видимо не только меня.
Какой, вообще, смысл так экономить на боквой менюшке?
Nashev
16.07.2015 18:48+1Видеть избранное в разделе истории, когда следующим же пунктом идет собственно сам раздел избранное — странно.
tasmitka Автор
16.07.2015 22:42+2Это временное явление, когда покажем дизайн на 100% пользователей, оставим вместо пунктов «История» и «Избранное» один пункт «Мои операции».
UksusoFF
16.07.2015 20:07+3Редизайн это хорошо только когда не отваливается существующий функционал… С Метрикой к сожалению не вышло :(
Milfgard
17.07.2015 07:13О, а вы смогли без тормозов просидеть в новом интерфейсе достаточно, чтобы подробно оглядеться?
UksusoFF
17.07.2015 07:47+3Я потыкался немного и написал в саппорт Яндекса, спросил как вывести интересующие меня графики, которые были в старой версии. Они сказали что пока никак и я вернулся на старую.
gentux
16.07.2015 20:50+1Хотелось бы узнать сколько денег на
мертвыхсчетах.
Надеюсь ответят, а не в очередной раз отправят в игнор.
stalinets
16.07.2015 21:20+1Хотя я и не профессионал по интерфейсам, а просто пользователь, озвучу своё мнение (как получится).
Честно говоря, я неодобрительно отношусь к изменениям в интерфейсе. Для меня самое важное — привычное удобство, терпеть не могу, когда открываешь привычную рабочую среду — а там всё вдруг стало по-другому. Ярчайшие примеры — Windows 8 после XP и Vista/7, MS Office 2007 после 2003, или вот навигатор OsmAnd на Android'е.
Скорость работы тоже хотелось бы держать навысоте. А вот всякие удобности типа возможности копирования номера кошелька кликом, когда его можно просто выделить — часто не помогают, а мешают.
Вывод — нужна лёгкая версия проекта, чем легче, тем лучше, в идеале на чистом HTML. И чтобы дизайн её не менялся годами и десятилетиями. Высочайшая скорость, совместимость со всеми старыми браузерами, никаких «удобств» и украшательств, но — отсутствие некоторых действительно удобных штучек в интерфейсе.
Invision70
16.07.2015 22:27-6Украли у меня года 2 назад пару тысяч со счета яндекс денег, техническая поддержка уперлась в пользовательское соглашение и разбираться не стали. Недавно нашел прямое доказательство по этому случаю (форум где все еще публикуют в открытую логины, пароли и суммы на счетах Яндекс денег пользователей) и предоставил все данные техподдержки. Поблагодарили, сказали будут разбираться… Все затихло. После этой ситуации доверять сервисам яндекса перестал, только если музыку послушать )
Invision70
16.07.2015 22:31-4fpteam-hack.com/archive/index.php/t-64-p-11.html?s=6cce0dd7d74585181e8aa6cb4e5a09f4
Вот собственно сам ресурс для подтверждения, благотворительность похоже.
А вы себя там нашли? :)
Invision70
17.07.2015 08:36-1Не ожидал такой реакции если честно, ну ок, опять закроют глаза на проблему, смотрим на красивые кнопочки. Всем спасибо за поддержку.
Guria
17.07.2015 11:00+2Причём тут Яндекс? С этим вопросом надо было обращаться в правоохранительные органы. А вам озаботиться безопасностью своих учётных данных надо. Где и как вы слили свой пароль от Яндекса даже самому Яндексу не может быть известно.
Invision70
17.07.2015 17:59Мне интересно как вскрыли пароль в яндекс деньгах при осуществлении транзакции, он отличался от основного. По всей видимости данным методом http://habrahabr.ru/post/239395/
stalinets
19.07.2015 16:16Я уже не раз писал, чтобы Яндекс вернул способ подтверждения платежа по кодовой таблице. Это простой и надёжный метод. Но её почему-то убрали.
TimsTims
17.07.2015 10:54+4А что должен сделать яндекс по вашему?
Может вы сами пароль выложили туда в открытом виде, или еще куда-то?
Яндекс должен вернуть вам деньги? Ну допустим, Яндекс вернет вам деньги, но тут встает вопрос — из какого источника его взять? Отменить все транзакции, которые произошли с того момента? А если деньги были потрачены на покупку товара, то как объяснить продавцу, что ему оплатили краденными деньгами?
Значит надо брать из внутреннего бюджета «на взломы», но подозреваю, что этот бюджет рассчитан только на взломы, произошедшие по ошибке Яндекса, а не по ошибке пользователя.
В вашем же случае, т.к. пароль опубликован в открытом виде — даю шанс на 70% что это был кейлоггер, 15% фишинг, 14% одинаковый пароль на другом ресурсе и 1% — брутфорс аккаунта.
пс: я не из яндекса, но просто отписываюсь, почему вас, возможно, минусуют.
massimus
17.07.2015 01:28+2> Но очень быстро поняли, что наша метафора с балансом не сработала: никто не понимал, что нужно нажать на баланс, чтобы попасть в настройки кошелька.
Я до сих пор не понимаю, как должен догадаться, что для выпуска пластиковой карты должен нажать на баланс.
Cord
17.07.2015 02:52+31. № кошелька раньше был виден и было удобно копировать, сейчас неудобно
2. История была простая и кондовая
И с нормальным пейджингом.
Сделали бесконечный лоадер.
Возможо, я просто выпал из тренда, и этот гламурный, красивый дизайн статистически удобнее, но старый мне нравился больше.
И да — если у вас общий отдел проектирования интерфейсов — передайте тому, кто выпилил Ctrl+лево/вправо из Яндекс.Поиска, отдельный антилайк/дизлайк от меня, как от пользователя.Cord
17.07.2015 02:54+2Из плюсов могу отметить только функционал — спасибо программистам и менеджерам проектов
1. Офигенный штука с налогами
2. Очень удобный и быстрый шлюз оплаты.
Стараюсь поэтому внешние сайты оплачивать через Яндекс.Деньги
3. СМС приходят лучше, чем у банков — не знаю как, но за это отдельный респект
nomadmoon
17.07.2015 05:18+8Кстати, подкидываю идею — раз уж работа с СМС поставлена сделать сервис Яндекс.СМС
А то опсосы отмораживаются давать физикам API для взаимодействия с СМС (например если я на своем сайте хочу сделать двухфакторную авторизацию), а сторонние сервисы какие то левые.
macik_spb
17.07.2015 13:45+1Однозначно, с Яндексом было бы гораздо приятнее работать. А так куча непонятных контор чужой хлеб едят. :)
franzose
17.07.2015 18:27Ага, об этом же подумал, но не ожидал увидеть в комментариях :) Есть SMPP, но его-то физикам как раз и не дают + он тот еще «невиданный зверь». Под Qt, например, так и не нашли вменяемой библиотеки…
nomadmoon
17.07.2015 04:59+3А ответственный за редизайн Яндекс.Музыки будет отчитываться? Очень хочется ему вломить. Что за мода брать нормально работающее и портить?
pacahon
17.07.2015 12:02А я вот рад что от топорного дизайна избавились. Хотя признаться для поиска некоторых фич приходилось спрашивать у техподдержки. Запрятали как для сыщиков.
Nashev
17.07.2015 09:57Чрезвычайно огорчают, мягко говоря, новомодные «редизайны» с потерей функциональности.
Нужно списки фич вести, и следить, чтобы ни одна не пропала! Кстати, хорошо бы в открытую, с описанием и пользовательским рейтингом.И комментами. В рамках сервиса поддержки/обратной связи типа copiny
Karen
17.07.2015 11:08+1Как нельзя к стати. Как раз вчера заметил, что фото отображается в интерфейсе яндекс-денег, отличное (старое) от того что в яндекс-паспорте и во всех других сервисах яндекса.
Думал куда написать.
Пишу значит тут напрямую к автору ;)
Просьба поправить.
KorDen32
17.07.2015 11:50+8Как пользователь: Ужасно.
1) 1920*1080 — куча пустого места справа. На старой главной у меня все умещалось без полосы прокрутки, т.к. избранное было построчно, теперь — все прижалось к левому краю, куча свободного места между элементами и куча прокрутки
2) История: о боже, эти супер-модные тренды. В старой истории я мог быстро ткнуть скажем на пятую страницу, если ищу старую операцию и приблизхительно предполагаю что она будет тогда-то — теперь эта новомодная бесконечная прокрутка без возможности перепрыгнуть к определенному моменту. Сделали бы как в почте, ползунок с месяцами-годами.
— отсутствует время операций у операций, сделанных не сегодня — при поиске было удобно смотреть на время в том числе.
3) Огромные отсутпы элементов — слишком много пустоты, может и расчитано на тачскрин, но это же десктопный интерфейс! Скажем 5px вместо 13px смотрится почти так же, при этом на экран влезает гораздо больше элементов истории. Или еще компактнее сделать.
4) Сделайте возможность сворачивания избранного до одной полоски, или несколько столбиоков (как раньше), чтобы в одну и ту же высоту влезало больше элементов избранного, и при этом было больше места для истории на первом экранеmacik_spb
17.07.2015 13:44+1Про сворачивание и быструю навигацию по истории — это очень правильно заметили!
tasmitka Автор
17.07.2015 17:35Изначально мы ориентировались на самое популярное разрешение у пользователей нашего сервиса — 1366*768 и 1280*n. Но вы правы, сейчас мы действительно видим существенный рост пользователей с 1920*1080, поэтому уже работаем над решением для широкоформатных экранов.
По поводу возможности быстро попасть на любую страницу и дату в Истории — это тоже уже в работе, не все сразу :)
Про избранное подумаем, спасибо.KorDen32
17.07.2015 22:04+1Кинул браузер на второй монитор, который как раз 1366*768. 6 записей избранного на первом экране… И все :\ И опять пустое место… В энный раз повторю — слишком много бессмысленной пустоты между элементами…
nikita-design
17.07.2015 11:52-1Вы все время говорите о том что, новый интерфейс не для 100% пользователей. Так зачем его тогда показывать на данном этапе, если это еще не конечное решение? А если все же конечное решение, то почему оно не для 100% пользователей?
Если же единственная цель статьи показать сам процесс работы, тогда все хорошо, спасибо, интересно. Но как по мне — слишком много времени потрачено для такого результата, учитывая время сбора метрики.
YujiTFD
17.07.2015 12:06+1Ребят, а на кой чёрт новый интерфейс, если старейшие заскорузлые болячки самого сервиса до сих пор не только цветут и пахнут, но и всячески защищаются руководством от посягательств? Да-да, я о блокировке счёта при подозрении в мошенничестве, блокировке, которая порой срабатывает по адски лажовой причине, тебя ставят перед фактом, что «сервис» Яндекс.Деньги априори прав, а ты — нет, и чтобы вернуть управление средствами ты обязан покаяться и оплатить идентификацию. А если вдруг ты решил отказаться от такого фантастического предложения — ты должен заверить у нотариуса своё заявление о расторжении отношений и деньги на другой счёт тебе переведут в течении 180(!) дней.
Да, клиентоориентированность на высоте, тут решать нечего, надо запилить новый интерфейс!
Для особо едких: раздражает не плата за необходимость идентификации, а абсолютно явный посыл о никчёмности твоих претензий при общении с «поддержкой». Совок в лучшем виде.stalinets
19.07.2015 16:22Ну по поводу техподдержки всё же могу возразить. Я около полугода назад обращался в техподдержку Я.денег по довольно замороченному вопросу — и мне пошли навстречу, мои проблемы небыстро, но решились.
YujiTFD
19.07.2015 18:03Да всё может быть, я не отрицаю. Просто у меня случилось так, что друг на друга наложилось несколько технических факторов, судя по которым моя операция ну никак не могла быть признана мошеннической, и меня это выбесило моментально, отсюда и эмоции. Ну и, конечно, тот факт, что в текущее время идентификация клиента осуществляется «бесконтактным способом» даже в Сбере, а тут такие новости.
А вот насчёт 180 дней для перевода средств после закрытия счёта — это вообще интересный момент: откуда у Я.Д право на такие сроки?
formasha
20.07.2015 14:05Срок возврата — от 10 до 180 банковских дней. Максимальные 180 дней — если к счёту поступили претензии по карточным chargeback. Сроки описаны в пользовательском соглашении: money.yandex.ru/doc.xml?id=522764
zodiac
03.08.2015 11:48А тут я могу возразить Вам. Техподдержка Яндекс.Денег ужасна. Девушка на телефоне ничем не смогла помочь мне и хотя бы принять заявку (необходимо было сделать выписку о транзакции на бланке банка с печатью), а вместо этого послала писать на почту, где отвечают как минимум неделю уточняющими запросами.
SerafimArts
17.07.2015 13:41+2… а в Яндексе как раз была завершена работа над новой системой визуальных гайдлайнов, которую наши дизайнеры стали активно использовать.
Интересно было бы почитать об этих гайдлайнах и более того — посмотреть примерчики. Подобное мне больше нравится, нежели немного надоевший материал и уж тем более уродливый модерн (метро). По-моему — подобный стиль вполне может составить конкуренцию этим монстрам современности; Лёгкий, читаемый, без излишеств, но в то же время с нормальной визуальной формой, достаточно воздуха и не слишком много. Ну т.е. как я уже говорил, он очень интересный =)tasmitka Автор
17.07.2015 18:17+1Спасибо за отзыв :)
Вообще глобальный редизайн Яндекса начался более двух лет назад (как все начиналось можно почитать в статье Данилы Ковчего). С тех пор, конечно, все это эволюционировало и обогатилось новыми идеями, хотя основные принципы во многом сохранились. В открытом доступе подробных гайдлайнов нет, но можно посмотреть, как обновлялись другие сервисы: Яндекс.Диск, Яндекс.Авто, Яндекс.Музыка, Яндекс.Маркет.SerafimArts
17.07.2015 23:11+1Ну если в целом — лишь маркет действительно поменялся. Те же «Деньги» имеют новый дизайн лишь на главной. Остальные пока что не видел, посмотрю, спасибо.
Немного по фронт-энд части этой главной страницы:
1) Анимации при наведении на элемент истории — видно подёргивание верхнего бордера из-за того, что начальный элемент box-shadow имеет другое количество аргументов, нежели в ховере.
2) Из-за применения box-shadow в поисковой строке с rgba аргументом видно накладывание границ друг на друга в стеке, например между поисковой строкой и кнопкой поиска. Или в группе кнопок плашки «Сохраненные».
3) В выпадающем списке (в истории) отсутствует курсор поинтера при выделении пунктов меню
4) В верхнем меню с информацией о кошельке (там где деньги), я фиг знает, так задумано или нет, но ссылочные элементы не растягиваются на всю ширину «контейнера», размер которого обозначен серыми разделителями (ещё бы я для них добавил бы иконки)
5) Ну и футер не прибит к низу страницы (не хорошо, когда посередине он), правда это касается остальных страниц, которые я не рассматриваю.
Это всё настолько мелкие вещи, что рядовому пользователю наплевать, просто будучи некоторое время фронтэндщиком — подобные вещи сразу бросаются в глаза, прошу прощения за излишнюю привередливость.
/Режим оффтопа: К слову по Я.Маркету, раз уж довелось — предлагаю подумать над тем, что бы вернуть старый алгоритм поиска. Сами понимаете, по запросу, например «R9 290x» выдавать сборку компа, а не видеокарту (даже без предложения перейти в соответствующий раздел) — это полный провал.
Andersen
18.07.2015 21:02по запросу, например «R9 290x» выдавать сборку компа, а не видеокарту
Возможно сборку выгодней продавать и место в результатах поиска выкупил продавец)SerafimArts
18.07.2015 23:15Наверно стоило особо подчеркнуть фразу «без предложения перейти в нужный раздел».
olegych76
20.07.2015 05:20Редизайн мне как полному… пользователю понравился.
Есть ряд моментов, которые или неочевидны, или располагаются в неочевидных местах. Но вполне допускаю, что это личностное восприятие.
В остальном мне стало удобнее пользоваться и смотреть на интерфейс.
bigdogsru
20.07.2015 13:13+2Все это впустую до тех пор, пока невозможно в одной вкладке держать открытой почту ПДД, а в другой — пользоваться деньгами с основного аккаунта. Яндекс-Деньги стали ужасно напряжными с тех пор, как стало необходимым вспоминать, какая именно почта у тебя открыта в данный момент в одной из сотни вкладок, перед тем, как совершить какой-нибудь платеж.
sergey-b
28.07.2015 20:46У меня над высокоинтеллектуальной кнопкой с балансом висит желтый кружок с цифрой 1 уже месяца три, и совершенно непонятно, как его убрать.
yadi.sk/d/Xyt0WzZyi9A4itasmitka Автор
03.08.2015 16:06Нажать на баланс, просмотреть, какое сообщение в нем висит, сделать то, что сказано в сообщении или просто закрыть его.
Sirian
Хотелось бы узнать больше про backend. Какой подход используете (callback или promise)? Какой шаблонизатор используете? Фреймворк самописный? Может отдельную статью напишете?
tasmitka Автор
Мы используем node.js + полный БЭМ-стек (https://ru.bem.info/) и шаблонизатор bemhtml. Подробнее, действительно, имеет смысл отдельным текстом рассказывать, в этом мы сосредоточились только на дизайне :)