Интерфейсы «пользователю надо – всё равно пройдёт»
Вот комикс «приключения одного пользователя в форме заказа»:
Есть такие интерфейсы, которые проходят до конца 100 из 100 пользователей. Но до батареи доезжают только уши чертовски разозлённые.
Пример IRLЗаявление, например, на шенгенскую визу относится к интерфейсу, который совершенно не нуждается в улучшении с точки зрения конечной конверсии. 100 человек пришло за визой, 100 человек заполнили. Нет проблемы, правда? Но, конечно, проблема не в итоговом уровне прохождения квеста, а в усилиях, затраченных по дороге. И «не прошёл» — это 300 рублей девушке за правильное заполнение со слов выезжающего (как, например, в посольстве Греции). Все доходят до конца только потому, что они готовы пойти на такие сложности, чтобы получить визу.
То же самое относится ко многим интерфейсам. Например, если вы видите ноутбук на 1000 рублей дешевле, чем в «удобном» магазине, наверное, вы всё-таки поматеритесь и заполните форму. Даже если она сбрасывает все данные при проверке страницы. Если вы отправляете телефон в форме, вы снова поматеритесь и введёте его со второго раза без +7, как хочет идиотская JS-проверка.
Или вот если вы заполняете заявление в ЖЭК с третьего раза, вы тоже сделаете это, потому что в данном случае провайдер услуг — естественный монополист, и выбора у вас нет.
Давайте посмотрим, как это может выглядеть в менее экстремальных случаях, когда стоит не вопрос жизни и смерти, а просто небольшого повышения удобства.
Примеры Форма раз (пополнение баланса WM, позволяет ввести номер из Узбекистана, например):
Форма два (чертовски красивое пополнение баланса сотового в Яндекс.Деньгах):
Похожая форма пополнения одного полосатого опсоса (дефисы ставит сама):
Формы выше, безусловно, крутые и сразу избавляют от вопросов, как вводить номер. Но мне всё-таки кажется, что дедушка Раскин был прав в плане естественных интерфейсов. Собственно, я насмотрелся всякого в форме ввода телефона и сам неоднократно отправлял «не указан».
Наша быстроформа заказа:
Эту форму невозможно заполнить неправильно. Нет ни одной звёздочки, можно отправить прямо пустую форму, можно написать что угодно в какое угодно поле, мы отфильтруем. Задача — принять заказ. Если человек опечатался — у нас есть телефон и почта, мы решим (а обычно вводят всё). Никакой занудной верификации.
Если отправить эту форму как на скриншоте выше, будет «Спасибо, мы вам перезвоним».
В форму вбивали городские телефоны на 6 цифр, конски здоровые номера из других стран, начинающиеся далеко не на +7, номера на 8, номера в 10-значном формате, по два номера, по два номера с указанием, когда и по какому звонить, естественно, фразу «не указан» и даже «только по почте, я глухонемой».
А вот так делать не надо:
Ещё естественный интерфейс Реквизиты банковской карты — это настоящий ад по вводу. На РЖД, помнится, я переворачивал карту раза три-четыре и долго тупил, как вводить банк — через точку, дефис, русскими или английскими буквами (хотя банк можно установить по номеру). Когда я наблюдаю за тем, как эту операцию делают пожилые люди, то самый частый косяк — не найти CVV. Ещё очень много вопросов вызывает заполнение имени с «револьверных» карт типа подарочных. Сравните формы:
И вот это:
Результат, скорее всего, будет одинаков: оплатить-то надо —, но представьте эмоции пользователя в конце.
Вот ещё пример А это место, где я бился головой об интерфейс минуты две и при этом жалел тех пенсионерок, которые получили карты для такой вот активации:
Знаете, что самое страшное? Это не форма активации для первого пользования, хотя ссылка на карте дана именно сюда. У меня нет шансов пройти эту форму.
А вот хорошая практика ввода таких штук:
Поле само распарсит, что там, и поймёт, логин это, почта или телефон. И если телефон — то в каком формате.
Сохранение данных Больше всего меня как пользователя бесит необходимость повторно вводить данные. Вот самый частый случай — напоминание пароля. Обратите внимание на задний план. Угадайте, что там уже введено в первую форму, и что меня опять спрашивают.
Мне это напоминает звонки в поддержку Акадо, когда сначала первая линия спрашивает номер договора и ФИО, потом переключает на вторую, чтобы они тоже спросили номер договора и ФИО.
»37 сигналов» просто подставляют ранее введённую в логине почту в поле восстановления пароля — это когда-то стало хорошей практикой.
А вот так это может решаться ещё (наш пример):
Раньше было в два окна, но выяснилось, пользователь часто вводит почту, а потом читает дальше. И радостно щёлкает по «я забыл пароль». Всплывает алерт с «Письмо с новым паролем отправлено», страница даже не обновляется.
Телефон в этом письме тоже увеличивает процент успешного решения задачи. Звонить часто проще, да.
Письмо, конечно, не идеальное — надо отправлять одноразовый токен на ссылке сразу на следующий шаг по задаче на сайте, а не менять пароль, но это пока в планах. Вообще, мы сейчас шерстим все свои процессы на такие мелочи. Через полгода покажу, что нарыли ещё.
Ещё одно напрочь долбанутое место — это поле ввода сначала города, потом улицы. Где-то на середине ввода улицы к этом городу иногда подгружается КЛАДР, и всё введенное в улицу стирается. Ну блокируйте поле улицы, если уж такая строгая логика по порядку ввода. Это конфликт дизайнера и разработчика — первый нарисовал, не понимая, как это будет работать. А второй реализовал, не понимая, почему юзеры такие тупые. Виноватых нет, а исправлять надо.
У нас решено так: доставке нужна ближайшая станция метро и точный адрес в нормализованной форме. Мы стараемся показать подсказку КЛАДРа, но если пользователь от неё отмахнулся — пускаем дальше и обрабатываем вручную уже у себя. Подсказку надо показывать, чтобы сократить ввод и избежать ситуации, когда улицы с одинаковыми названиями есть в двух районах города. Или есть такой проезд и переулок, например. Метро же мы вообще не спрашиваем, а автоматом дёргаем API Яндекс.Карт и уточняем на бекэнде оттуда.
А пока ещё один эксперимент Ещё одна странная точка поиска таких мелких человеческих улучшений — это поиск. Я уже писал про то, что мы сделали до этого, чтобы человек по запросам «башня», «жженга» или «l; tyuf» находил именно то, что искал пользователь.Остался ещё один мелкий штрих, на который вместе с тестами ушло 4 часа работы.
Условие очень простое: — Если в поиске были подсказки после нескольких введённых символов.— И после нового символа подсказок не осталось.— То показывать до следующего символа предыдущие подсказки.
Зачем? Я вижу, что больше процента пользователей жмут backspace в поле поиска. Предположение состояло в том, что пользователь набирает первые несколько букв поискового запроса, а потом тычет в подсказку. Если набирается две-три-четыре-пять правильно и одна неверно, щёлкать уже некуда. Я пару раз наступал на эти грабли на планшете и постоянно вижу именно такой сценарий у малоопытных пользователей.
Ещё одно подозрение — что пользователь, которому сложно, переводит взгляд на клавиатуру и набирает 2–3–4 символов запроса, ожидая, что потом всплывёт подсказка, а потом смотрит обратно на экран, проверять, всё ли всплыло и если нет — нет допустил ли он опечаток. Даже если он напечатал косо, малоопытный пользователь в большинстве случаев всё равно посмотрит вверх, чтобы проверить, что нужно стирать. И там его будет ждать подсказка, которой он (надеюсь, с облегчением) воспользуется.
После накатки фичи уменьшилось количество пользователей, пользующихся бакспейсом в поле поиска на 3,21%. Погрешность измерения не менее 30% (то есть около 1 процента из 3,21%), но всё равно результат заметный. Также немного уменьшилось количество поисковых запросов на пользователя (но в рамках погрешности).
Зря ли мы продолбали эти 4 часа? Я не знаю. Подозреваю, что вряд ли мы кому-то сделали хуже этим апдейтом, но хотя бы сотне пользователей в месяц немного помогли. Даже если десять из этой сотни не заметили своей ошибки и спокойно ткнулись в подсказку — ок, это окупится.
Напоследок А вот эта форма, внезапно, явно помогает пользователю повысить компьютерную грамотность. Хотя изначально должна была повышать удобство, подставляя самые частые города на эту букву вверх.
Что самое приятное — скрипт чертовски умно сконвертировал русскую «а» в английскую тоже для подсказок. Наверное, это был робот-дворецкий с английским чувством юмора.