Когда мы впервые провели исследование оформления заказа в топовых 100 интернет-магазинах США в 2012 году, мы увидели, что 14% из них используют оформление заказа в стиле «аккордеон». Так мы называем оформление заказа, при котором пользователь остается на одной странице, а различные этапы оформления заказа разворачиваются и сворачиваются на той же странице как элементе веб-дизайна, который называется «аккордеон».

В 2016 году наше исследование показало, что уже 32% топовых интернет-магазинов США используют такое оформление заказа.

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

Мы обнаружили, что в использовании «аккордеона» при оформлении заказа есть 2 проблемы с юзабилити, которые надо предотвратить, чтобы обеспечить хорошие результаты:

1) проблема ранее введенных данных на предыдущих этапах – пользователь или не видит их, или они мешают пользователю на очередном этапе;

2) система неправильно обрабатывает нажатие кнопки «назад» в браузере, зачастую c потерей уже введенных данных.

Причем, наше исследование показало, что у 75% сайтов, которые используют оформление заказа в стиле «аккордеон», есть, как минимум, одна из этих 2-х проблем.

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

Обратите внимание, как на примере ниже, при оформлении заказа на сайте L.L.Bean пользователь не видит ранее введенной информации.

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

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

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

Исходя из вышеизложеного отметим 2 важных момента для реализации такого оформления заказа:

1) итоги предыдущих этапов должны быть так оформлены, чтобы было очевидно, что этот контент «вторичный», то есть далеко не самый важный в данный момент;

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

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

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

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

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

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

Во время тестирования было ясно, что часть пользователей просто не понимает идею «аккордеона».

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

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

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

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

«О, неееет! Мне, что, надо начать сначала? Вот теперь я начинаю злиться!» - сказал респондент нашего исследования. На сайте Foot Locker респондент нажал кнопку «назад» в браузере, будучи на последнем этапе оформления заказа. Но в итоге попал не на предыдущий этап оформления, а в корзину, при этом пропали все его ранее введенные данные заказа. Респондент продолжил: «У них же уже должны быть мои данные? Нет, я ухожу отсюда, это какой-то несерьезный магазин».

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

Поэтому очень важно, чтобы реализованные на AJAX процессы оформления заказа в стиле «аккордеон» правильно отрабатывали нажатие кнопки «назад». Это можно сделать с помощью History API в HTML5. Говоря конкретнее, функция history.pushState() позволяет изменить URL просматриваемой страницы, не вызывая перезагрузки страницы, и это позволит возвращаться на предыдущие этапы оформления заказа в «аккордеоне».

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

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

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

● Анимируйте переход от одного этапа оформления заказа к другому.

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

По материалам baymard.com

Когда мы впервые провели исследование оформления заказа в топовых 100 интернет-магазинах США в 2012 году, мы увидели, что 14% из них используют оформление заказа в стиле «аккордеон». Так мы называем оформление заказа, при котором пользователь остается на одной странице, а различные этапы оформления заказа разворачиваются и сворачиваются на той же странице как элементе веб-дизайна, который называется «аккордеон».

В 2016 году наше исследование показало, что уже 32% топовых интернет-магазинов США используют такое оформление заказа.

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

Мы обнаружили, что в использовании «аккордеона» при оформлении заказа есть 2 проблемы с юзабилити, которые надо предотвратить, чтобы обеспечить хорошие результаты:

1) проблема ранее введенных данных на предыдущих этапах – пользователь или не видит их, или они мешают пользователю на очередном этапе;

2) система неправильно обрабатывает нажатие кнопки «назад» в браузере, зачастую c потерей уже введенных данных.

Причем, наше исследование показало, что у 75% сайтов, которые используют оформление заказа в стиле «аккордеон», есть, как минимум, одна из этих 2-х проблем.

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

Обратите внимание, как на примере ниже, при оформлении заказа на сайте L.L.Bean пользователь не видит ранее введенной информации.

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

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

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

Исходя из вышеизложеного отметим 2 важных момента для реализации такого оформления заказа:

1) итоги предыдущих этапов должны быть так оформлены, чтобы было очевидно, что этот контент «вторичный», то есть далеко не самый важный в данный момент;

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

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

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

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

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

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

Во время тестирования было ясно, что часть пользователей просто не понимает идею «аккордеона».

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

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

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

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

«О, неееет! Мне, что, надо начать сначала? Вот теперь я начинаю злиться!» - сказал респондент нашего исследования. На сайте Foot Locker респондент нажал кнопку «назад» в браузере, будучи на последнем этапе оформления заказа. Но в итоге попал не на предыдущий этап оформления, а в корзину, при этом пропали все его ранее введенные данные заказа. Респондент продолжил: «У них же уже должны быть мои данные? Нет, я ухожу отсюда, это какой-то несерьезный магазин».

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

Поэтому очень важно, чтобы реализованные на AJAX процессы оформления заказа в стиле «аккордеон» правильно отрабатывали нажатие кнопки «назад». Это можно сделать с помощью History API в HTML5. Говоря конкретнее, функция history.pushState() позволяет изменить URL просматриваемой страницы, не вызывая перезагрузки страницы, и это позволит возвращаться на предыдущие этапы оформления заказа в «аккордеоне».

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

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

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

● Анимируйте переход от одного этапа оформления заказа к другому.

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

По материалам baymard.com