Это первая из восьми статей в серии, где собраны выводы исследования юзабилити платёжных форм, проведённого нами в 2011 году, и сравнительного анализа сайтов ста крупнейших интернет-магазинов 2012 года.

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

1. Не нажимали, даже если соответствующее поле ввода было заполнено, или
2. Принимали за основную кнопку подтверждения.

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

Сравнение платёжных форм ста крупнейших интернет-магазинов показало, что 72% сайтов нарушают правило и используют кнопку «Применить» для подтверждения отдельных данных в форме заказа. Как правило, они используются для подтверждения индекса, по которому рассчитывают время и стоимость доставки, для кодов купонов или перерасчёта стоимости после изменения способа доставки или количества товаров в корзине.

Суть проблемы

Начнём с детального рассмотрения обеих случаев: когда кнопку «Применить» 1) не нажимают или 2) принимают за основную кнопку подтверждения.

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

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

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

Текст и оформление

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

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

Единственным исключением стала кнопка «Обновить» рядом с количеством товаров в корзине. Участники тестов никогда не путали её с кнопками продолжения (проблема 2), но иногда на неё не нажимали даже после изменения количества товаров (проблема 1) — следовательно, и это решение не идеально.

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

Решение — автообновление

Если для перехода к следующему шагу необходимо сначала пересчитать стоимость заказа (зачастую это именно так: юзабилити требует отвечать на действия пользователей мгновенной адаптивной обратной связью), обновляйте стоимость автоматически, используя вместо кнопки «Применить» средства AJAX.

Отказ от использования кнопки «Применить» внутри формы решает проблему в случае, когда пользователи пропускают её (проблема 1) и исключает вероятность того, что её примут за кнопку подтверждения (проблема 2). Это позволяет избежать дополнительных действий на каждом этапе и обеспечивает, таким образом, линейную последовательность оформления заказа, понятную пользователям.

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

Как избавиться от лишних кнопок

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

Оригинал: http://baymard.com/blog/checkout-usability-apply-buttons

Юрий Панасюк
Проектировщик интерфейсов и информационных систем в Nimax

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

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

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