?

Log in

No account? Create an account
entries friends calendar profile Официальный сайт Previous Previous Next Next
artishevcom
artishevcom
artishevcom
Принципы дизайна страниц оплаты для интернет-магазинов
Представляю вашему вниманию перевод статьи под названием “Fundamental Guidelines Of E-Commerce Checkout Design” от Christian Holst. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

Грустная статистика систем электронной коммерции — согласно последним исследованиям, по крайней мере 59,8% потенциальных покупателей покидают сайт на этапе оформления заказа и его оплаты (у разных исследований разные показатели — от 59,8% у MarketingSherpa до 83% у SeeWhy).

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

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


Исследование показало, что обычно наиболее трудным является провести пользователя через последнею стадию покупки, когда остается всего-лишь заполнить данные кредитной карты.

Мы исследовали 15 сайтов: 1-800-Flowers, AllPosters, American Apparel, Amnesty, Apple, HobbyTron, Levi’s, Newegg, Nordstrom, Oakley, Perfume.com, PetSmart, Thomann, Walmart и Zappos.

В общем, мы проверили на пользователях более 500 юзабилити-решений: от отвлекающей анимации до нелогичности процесса оформления заказа. Затем мы проанализировали эти решения и написали 63 принципа юзабилити при оформлении заказа, в отчете, названном “E-Commerce Checkout Usability”. В этой статье мы поделимся с вами 11 фундаментальными принципами из этого отчета.


1. Процесс оформления товара должен быть полностью линейным

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

Нелинейность процесса заказа товара — это одна из самых грубых ошибок, которые нам удалось выявить в ходе исследования. Большинство исследованных сайтов имеют линейный процесс заказа (за исключением Walmart и Zappos).

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

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


Нелинейный процесс оформления товара у Wallmart. Хотите большую картинку?

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

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

Как заявил один наш тестеров, «То, что я увидел одну и ту же страницу дважды, выглядит подозрительно. Я точно все правило сделал?»


2. Добавляйте описания к названиям форм и полей

Факт: Без описаний многие формы могут быть двусмысленными.

Во время покупки один из тестировщиков пробормотал: «Что означает «Строка адреса №2»?» Некоторых других испытываемых смутило название формы «Адрес для выставления счета» (Billing address).

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

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

На сайте Apple большинство тестеров в поле «Код зоны» (Area code) стали вводить свой почтовый индекс:

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

Вот пример того, как описание полей и форм помогает пользователям понимать что и куда нужно вводить:

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

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


ПРОДОЛЖЕНИЕ СТАТЬИ ЧИТАЙТЕ НА ОФИЦИАЛЬНОМ САЙТЕ »

Tags:

Leave a comment