Мы провели количественное исследование, которое было направлено на тестирование процесса оформления заказа в различных интернет-магазинах. В результате мы установили, что 27% пользователей прекращали процесс оформления заказа по причине - «процесс оформления слишком длинный / сложный».

Мы исследовали 50 топовых интернет-магазинов США. В среднем процесс оформления заказа составляет 5,42 шага, начиная со страницы с корзиной и заканчивая страницей подтверждения заказа.

Среднее число шагов при оформлении заказа выросло с 5,08 в 2012 г. до 5,42 в 2016 г.

Однако по нашим наблюдениям за пользователями, само по себе количество шагов – не самый важный аспект. Важно то, что пользователь должен сделать на каждом шаге. Но и количество шагов, начиная с 8-ми, становится уже важным: если их 8 или больше, это уже плохо для юзабилити. Как видно на графике, от таких длинных процессов оформления интернет-магазины отказались.

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

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

В 2012 году 14% сайтов использовали процесс оформления в стиле «аккордеон», а в 2016-м их стало уже 32%.

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

Сравнивая эффективность UX и количество полей в формах, мы видим явную зависимость, что увеличение полей снижает эффективность UX.

В среднем процесс оформления заказа содержит 14,88 полей для ввода, если покупка делается незарегистрированным пользователем. Однако полностью оптимизированный процесс может содержать всего лишь 7 полей для ввода.

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

Рассмотрим два примера:

Левая часть картинки составлена по результатам анализа движения глаз 32 респондентов на странице сайта REI. Обратите внимание, что респонденты очень большое внимание уделили разделам «New REI membership» и «Current REI members» хотя эти секции были не важны для той покупки, которую они совершали.

«О, это просто фантастика!» - респондент произнес с сарказмом, когда увидел страницу ввода платежного адреса сайта Cabela с 16-ю полями для ввода. При использовании разумного подхода к дизайну, их можно было бы сократить до 6-8 полей, показанных по умолчанию, без какого-то вреда для сбора информации.

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

«Я думаю, все эти многочисленные необязательные поля могут раздражать, потому что это затрудняет заполнение формы. Например, сейчас в этой форме столько пустых полей, что она кажется незаполненной, хотя все обязательные поля в ней заполнены», - сказал респондент, оформляя заказ на сайте ASOS.

«Зачем им все эти разные номера телефонов, для звонков в дневное время, для звонков в вечернее время? Это же всего лишь интернет-магазин одежды», - слова другого респондента.

Хотя процесс оформления заказа в силу своей специфики требует много полей для ввода, мы считаем, что его можно организовать с 6-8 полями (точное число полей зависит от страны назначения).

На примере ниже показан процесс оформления заказа сайта Crutchfield, состоящий из 8-ми полей для заполнения. Это всего лишь 54% от среднего числа в 14,88 полей в таком процессе среди всех сайтов в нашем исследовании.

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

Примечание: в США традиционно используют две строки с адресом – Address Line 1 и Address Line 2. В Address Line 1 принято записывать все составляющие улицу и номер дома (поскольку большинство людей живет в домах), а в Address Line 2 – номер квартиры (когда он есть), номер офиса и этаж.

Для большинства b2c-бизнесов есть поля, которые только совсем небольшое число покупателей когда-либо заполняет. Но такие поля нельзя совсем убирать, потому что они нужны для беспроблемной доставки этому сегменту покупателей. Вторая строка с адресом и название компании – как раз и есть такие поля.

Наши тесты показали, что вторая строка с адресом может быть скрыта, но появляться при необходимости по клику, как в примере ниже.

Еще один способ упростить заполнение форм – использовать одно поле «Ф.И.О.» вместо разделение на «Фамилия», «Имя», «Отчество».

42% респондентов сделали так во время тестов: они вводили свое имя целиком в первое поле, только потом замечали ошибку, что заставляло их вернуться и исправить введенные данные. Очевидно, что это сильно мешает удобству.

На сайте Amazon есть только одно поле с именем: «Ф.И.О.». Это уменьшает количество полей и легко позволяет людям вводить сложные имена в том числе.

Если в среднем количество полей при оформлении заказа равно 15-ти, то одно только объединение двух полей «Имя» и «Фамилия» в одно поле «Ф.И.О.» или «Полное имя» дает сокращение полей для ввода на 7%. Уже достаточно серьезная цифра. А если в полях еще присутствует поле «отчество», то сокращение достигнет 14%.

Обратим внимание, что не все упрощения полей для ввода обходятся без потерь. В некоторых случаях вы получите меньше данных от пользователя. В некоторых случаях данные будут в менее структурированном формате – как, например, в случае с Ф.И.О.

В 14% интернет-магазинах, работающих в b2c, по умолчанию платежный адрес и адрес доставки представлены разными полями для ввода, что, конечно же, изначально «пугает» пользователя и создает ощущение бесчисленных полей, которые надо заполнить.

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

Вот как это могло быть реализовано проще:

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

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

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

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

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

По материалам Baymard Institute

Мы провели количественное исследование, которое было направлено на тестирование процесса оформления заказа в различных интернет-магазинах. В результате мы установили, что 27% пользователей прекращали процесс оформления заказа по причине - «процесс оформления слишком длинный / сложный».

Мы исследовали 50 топовых интернет-магазинов США. В среднем процесс оформления заказа составляет 5,42 шага, начиная со страницы с корзиной и заканчивая страницей подтверждения заказа.

Среднее число шагов при оформлении заказа выросло с 5,08 в 2012 г. до 5,42 в 2016 г.

Однако по нашим наблюдениям за пользователями, само по себе количество шагов – не самый важный аспект. Важно то, что пользователь должен сделать на каждом шаге. Но и количество шагов, начиная с 8-ми, становится уже важным: если их 8 или больше, это уже плохо для юзабилити. Как видно на графике, от таких длинных процессов оформления интернет-магазины отказались.

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

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

В 2012 году 14% сайтов использовали процесс оформления в стиле «аккордеон», а в 2016-м их стало уже 32%.

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

Сравнивая эффективность UX и количество полей в формах, мы видим явную зависимость, что увеличение полей снижает эффективность UX.

В среднем процесс оформления заказа содержит 14,88 полей для ввода, если покупка делается незарегистрированным пользователем. Однако полностью оптимизированный процесс может содержать всего лишь 7 полей для ввода.

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

Рассмотрим два примера:

Левая часть картинки составлена по результатам анализа движения глаз 32 респондентов на странице сайта REI. Обратите внимание, что респонденты очень большое внимание уделили разделам «New REI membership» и «Current REI members» хотя эти секции были не важны для той покупки, которую они совершали.

«О, это просто фантастика!» - респондент произнес с сарказмом, когда увидел страницу ввода платежного адреса сайта Cabela с 16-ю полями для ввода. При использовании разумного подхода к дизайну, их можно было бы сократить до 6-8 полей, показанных по умолчанию, без какого-то вреда для сбора информации.

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

«Я думаю, все эти многочисленные необязательные поля могут раздражать, потому что это затрудняет заполнение формы. Например, сейчас в этой форме столько пустых полей, что она кажется незаполненной, хотя все обязательные поля в ней заполнены», - сказал респондент, оформляя заказ на сайте ASOS.

«Зачем им все эти разные номера телефонов, для звонков в дневное время, для звонков в вечернее время? Это же всего лишь интернет-магазин одежды», - слова другого респондента.

Хотя процесс оформления заказа в силу своей специфики требует много полей для ввода, мы считаем, что его можно организовать с 6-8 полями (точное число полей зависит от страны назначения).

На примере ниже показан процесс оформления заказа сайта Crutchfield, состоящий из 8-ми полей для заполнения. Это всего лишь 54% от среднего числа в 14,88 полей в таком процессе среди всех сайтов в нашем исследовании.

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

Примечание: в США традиционно используют две строки с адресом – Address Line 1 и Address Line 2. В Address Line 1 принято записывать все составляющие улицу и номер дома (поскольку большинство людей живет в домах), а в Address Line 2 – номер квартиры (когда он есть), номер офиса и этаж.

Для большинства b2c-бизнесов есть поля, которые только совсем небольшое число покупателей когда-либо заполняет. Но такие поля нельзя совсем убирать, потому что они нужны для беспроблемной доставки этому сегменту покупателей. Вторая строка с адресом и название компании – как раз и есть такие поля.

Наши тесты показали, что вторая строка с адресом может быть скрыта, но появляться при необходимости по клику, как в примере ниже.

Еще один способ упростить заполнение форм – использовать одно поле «Ф.И.О.» вместо разделение на «Фамилия», «Имя», «Отчество».

42% респондентов сделали так во время тестов: они вводили свое имя целиком в первое поле, только потом замечали ошибку, что заставляло их вернуться и исправить введенные данные. Очевидно, что это сильно мешает удобству.

На сайте Amazon есть только одно поле с именем: «Ф.И.О.». Это уменьшает количество полей и легко позволяет людям вводить сложные имена в том числе.

Если в среднем количество полей при оформлении заказа равно 15-ти, то одно только объединение двух полей «Имя» и «Фамилия» в одно поле «Ф.И.О.» или «Полное имя» дает сокращение полей для ввода на 7%. Уже достаточно серьезная цифра. А если в полях еще присутствует поле «отчество», то сокращение достигнет 14%.

Обратим внимание, что не все упрощения полей для ввода обходятся без потерь. В некоторых случаях вы получите меньше данных от пользователя. В некоторых случаях данные будут в менее структурированном формате – как, например, в случае с Ф.И.О.

В 14% интернет-магазинах, работающих в b2c, по умолчанию платежный адрес и адрес доставки представлены разными полями для ввода, что, конечно же, изначально «пугает» пользователя и создает ощущение бесчисленных полей, которые надо заполнить.

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

Вот как это могло быть реализовано проще:

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

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

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

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

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

По материалам Baymard Institute