Дмитрий Коваленко, Head of Product Design в Readdle, дизайнер Fluix (SaaS), SparkMailApp и PDFexpert5, подробно проанализировал проблемы checkout форм популярных сервисов и поделился секретами по их улучшению. Telegraf публикует перевод первой из четырех его статей, посвященных этому вопросу.

Упрощение оформления заказа. 1/4

Apple.com. Десктоп. Флоу покупки в iPad Pro. 7 перенаправлений, 14 шагов, минимум 27 действий.

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

В этой статье мы рассмотрим процесс оформление заказа на 4 сервисах, чтобы понять и «почувствовать» проблему. Это первая из четырех связанных между собой историей и целью глав. В них я описываю, чему научился и что использовал для проектирования совершенно новой check out формы в SaaS проекте Fluix.

Часть 2. Вы узнаете о 16 обязательных дизайн принципах, которые помогут вам спроектировать удобную форму оформления заказа (или любую другую). Это в итоге значительно увеличит success rate, на порядок уменьшит время заполнения формы.

Главы 3 и 4. (статьи на стадии перевода – прим. ред) Сложности проектирования новой формы оформления заказа для Fluix. Вы узнаете об отношениях и зависимостях между полями, их вводными и визуальными ограничениями. А еще много инсайтов о разработке новой check out формы для SaaS проекта Fluix.

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

«Что?!! WTF? » — вероятно, спросите вы себя. Затем официанта. А затем менеджера …

Отстой! Не так ли?

Давайте перемотаем время и вспомним, как осуществлялись покупки до появления этих пластиковых карт и цифровых операций. Вы просто берете, что вам нужно, отдаете наличку продавцу и … и все! Готово. Минимум затраченного времени. Минимальное количество действий.

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

Давайте рассмотрим несколько примеров.

Пару недель назад я попытался купить гаджет NETATMO. В конце концов, я его так и не купил. И вот почему.

NETATMO. Мобильная версия. Флоу приобретения “Healthy Home Coach”.

Чтобы заказать гаджет “Healthy Home Coach”, вам необходимо:

1. Нажать «Купить сейчас» на странице устройства.
2. Вас проскроллят вниз страницы аж до последнего блока, где нужно нажать «Купить сейчас» еще раз.
3. Вас перекинут на новую страницу с перечнем всех продуктов, где нужно будет все еще раз проскроллить и нажать кнопку «Продукты» в соответствующем блоке «Забота о воздухе».
4. Вас еще раз перекинут на другую страницу с перечнем всех гаджетов, связанных с группой, выбранной на предыдущей странице. В конце списка вы должны найти тот самый “Healthy Home Coach” и нажать кнопку «Добавить в корзину».
5. Вас перекинут в корзину, где нужно нажать кнопку «Checkout» или PayPal Checkout (это даже не кнопка …).
6. Еще один редирект на форму заказа с 26 вопросами … Всё-в-одном…

Закрываю вкладку … ?

У меня был только один вопрос: «WTF, черт возьми? оО»

Просто, чтобы показать вам, как улучшить это решение, я потратил 15 минут. Это на то, чтобы упростить процесс с 6 шагов до 3, а форму из 26 вопросов — до 14, в лучшем и более чистом стиле в качестве бонуса. Я считаю, что такие улучшения могут значительно сократить время завершения покупки и отток потенциальных покупателей.

NETATMO. Mои предложения по существенному улучшению флоу.

P.S. Вы поймете, как это работает после прочтения статьи.

Теперь давайте попробуем купить iPad Pro на Apple Store шаг за шагом. Вот, как выглядит процесс.

Apple.com. Десктоп. Флоу покупки iPad Pro. 6 перенаправлений. 14 шагов. 27 вопросов. Не менее 38 действий.

Вот последовательно всех действий, шаг-за-шагом, как есть… (Чтобы вы лучше прочувствовали всю боль ?)

1. Нажмите кнопку «Купить» на странице iPad Pro.
2. Редирект на следующую страницу.
   Теперь выберите модель.
   Расцветку.
   Объем памяти с сотовой связью или без.
   Нажмите кнопку «Продолжить».
3. Редирект. Можете добавить или пропустить персональную гравировку.
4. Нажмите кнопку «Продолжить»
5. Редирект. Выберите аксессуары и/или нажмите кнопку «Добавить в корзину».
6. Редирект. Нажмите кнопку «Оформить».
7. Редирект. Нажмите «Продолжить» как Гость …
8. Редирект. Нажмите кнопку «Продолжить».
9. Теперь ответьте на 12 вопросов относительно деталей доставки.
10. Нажмите кнопку «Продолжить».
11. Теперь ответьте еще на 16 вопросов относительно оплаты и платежных данных …

6 перенаправлений. 14 шагов. 27 вопросов. Не менее 38 действий. Да, просто, чтобы купить iPad … Это бред. ?

American Airlines. Десктоп. Флоу покупки билетов. Минимум 56 действий, 39 полей, 6 перенаправлений.

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

1. Они используют проверку введенных данных с контрольной версией . То есть, вы будете уведомлены о любом незаполненном обязательном поле и/или о любой совершенной ошибке только после нажатия кнопки «Продолжить». Почему это плохое решение, вы узнаете в следующей части статьи.
2. 10 полей с 3 выпадающими меню вместо 3 простых числовых полей, чтобы указать номер телефона – просто абсурд. Номер телефона — это единое понятие в нашей голове, например, как полное имя. Поэтому здесь лучше использовать одно целое поле с возможностью ввода только цифр.Контрольная версия проверки данных. American Airlines
3. Три выпадающих списка для даты рождения. Респондент может даже выбрать 1897 год рождения… Почему бы просто не использовать 3 числовых поля, где он сможет ввести дату через клавиатуру? Но да, так вам придется использовать правильные ограничители ввода.
   
   3 выпадающих списка для даты рождения. Худший вариант с точки зрения юзабилити… American Airlines.
4. Они используют выпадающие списки даже для выбора поля… С точки зрения юзабилити здесь лучше использовать радиокнопки. Преимущества: респондент сразу видит все варианты; для выбора требуется всего 1 клик.
   
   Выпадающие списки для выбора пола. Ужасная юзабилити для двоичного выбора. American Airlines.
5. Полностью бессмысленный селектор типа карты, который можно легко определить по первым 2 (иногда 3) цифрам номера карты (подробней об этом в 3й части). Поэтому от этого пункта можно легко избавиться.
   
   Выпадающее меню для выбора типа карты. Бессмысленный вопрос. American Airlines.
6. Еще одно идиотическое выпадающее меню для двоичного выбора. Респонденту необходимо сделать 3 клика вместо 1, чтобы выбрать PayPal в качестве способа оплаты.Дурацкий выпадающий список для двоичного выбора. American Airlines.
7. На каждой новой странице вы увидите один и тот же рекламный блок, который занимает много места и, что более важно, внимание респондента. Правда, этои есть цель маркетологов АА …Одно и то же окно на каждом шагу. American Airlines

Это немного другой случай, более короткий, но все же относящейся к теме.

PayPal. Приложение iOS. Сверху: исходный флоу добавления кредитной карты. Внизу: упрощенный флоу. Всего 2 шага вместо 4.

Это флоу добавления кредитной карты в iOS приложении PayPal

1. Нажмите кнопку «Плюс» в верхнем правом углу.
2. На новом экране выберите только один из возможных вариантов на экране «Кредитная карта».
3. На следующем экране выберите тип карты.
4. На новом экране введите номер карты / срок действия / код безопасности и подтвердите.

Второй шаг (предположительно только в моем случае), и третий — бессмысленные. Если есть только одна опция для выбора, почему я должен видеть этот экран, верно? Перейти к следующему шагу автоматически! И почему я должен выбирать тип кредитной карты, если ее можно легко и автоматически определить с помощью первых двух цифр номера? Таким образом, этот флоу можно укоротить до 2 шагов без каких-либо жертв. В половину, Карл!

Есть еще 12 примеров процесса оформления заказа на других известных сервисах (как Amazon, DBahn, Ebay, Emirates Airlines и т. Д.), которые я хотел разобрать здесь. Но это слишком много. В таком случае статья выросла бы до размера книги. Суть уже ясна, так что давайте двигаться дальше.

Вы могли заметить, что я описал только гостевой флоу. Конечно, если у вас есть учетная запись в Apple Store, и вы используете PayPal в качестве метода оплаты, флоу будет сокращен до нескольких коротких шагов. Но вы все равно, так или иначе,  должны были ввести данные о доставке-платеже-оплате, когда создавали учетную запись ранее.

Следовательно, проблема никуда не делась.

На самом деле эта проблема везде. Например, согласно исследованиям Института Baymard:

• 40% онлайн-сервисов не используют валидирование введенных данных в момент ответа;
• 20% из них реализовали ее неправильно;
• 92% ошибаются с именованием полей;
• 80% не используют автоформатирование номера кредитной карты;
• 40% не используют такой же формат даты окончания действия карты, как это указано на самой карте.

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

Ломая шаблоны

Конечно, есть сервисы, которые пытаются исправить ситуацию и преуспели в этом. Например, форма оформления заказа Shopify.

Форма заказа Shopify.

Честно говоря, они хороши с визуальной точки зрения и навигации, но с другой стороны:

• Используют валидирование  только полей электронной почты и почтового индекса.
• Используют валидирование с контрольной версией.
• Не используют ограничения для ввода.
• Не используют зависимости между полями.

Форма заказа Shopify. Хороший дизайн, но не хватает ограничений ввода и встроенной проверки.

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

Конечно, существуют такие проекты, как PayPal, Apply Pay, Facebook Messenger Payments, Stripe, которые пытаются значительно упрощать способы оплаты в интернет-магазинах. Но тем не менее, клиент / пользователь все равно должен ответить на кучу вопросов, связанных с выставлением счетов, хотя бы раз, чтобы потом случилась «магия».

Мы не были исключением. Вот как выглядела наша форма регистрации и оформления подписки : начиная с выбора плана.

Fluix в Readdle. Старая форма оформления заказа.

Да. Эти 3 шага — 3 разных страницы. И да-даже не используем автоопределение страны, а выбираем первую по алфавиту, даже не самую популярную.

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

1. Эта форма вызывает много вопросов и сомнений.
2. Не выглядит безопасной.
3. Не показывает итоговую сумму оплаты.
4. Нет ограничений ввода.
5. Нет валидирования введенных данных.
6. Нет никаких подсказок или рекомендаций, в случае какого-либо вопроса.

И так далее…

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

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

3-я часть цикла статей о проектировании форм «Проектирование checkout формы: Закулисье. Часть I»

4-я часть цикла статей о проектировании форм «Проектирование checkout формы: Закулисье.
Часть II»

С оригиналом статьи можно ознакомиться по ссылке. 

Перевод — Катя Павлевич.