UXDepot
Компания
35,05
рейтинг
23 апреля 2011 в 00:37

Разное → Принципы дизайна страниц оплаты для интернет-магазинов перевод tutorial

Представляю вашему вниманию перевод статьи под названием "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) стали вводить свой почтовый индекс:


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

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


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

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




3. Не стоит употреблять неоднозначные слова (например «Продолжить»)


Факт: Слова, зависящие от контекста (вроде «Продолжить») сбивают с толку.

Кнопка «Продолжить покупку» в корзине может иметь два значения:
  • Продолжить выбирать покупки (например, покупатель выбрал джинсы и хочет продолжить выбирать футболку к ним).
  • Проследовать к процессу оформления покупки (покупатель выбрал все что нужно и хочет только заплатить за товары).


«Назад» — еще один пример такого слова. Куда это — назад? Назад на предыдущую страницу? Назад к результатам поиска? А что насчет слова «Дальше»? Все эти слова зависят от контекста (страницы, на которой находится покупатель) и логики самого покупателя.

HobbyTron.com — это один из сайтов, на котором пользователи нажимали на кнопку «Продолжить», думая что они при этом проследуют к оформлению заказа:


Кнопка Продолжить на сайте HobbyTron. Большой скриншот.

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

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




4. Визуально подчеркивайте все важные поля на странице оплаты


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

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

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

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

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


Набросок для визуального закрепления. Большой скриншот.

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




5. Не используйте на страницах кнопку «Применить»


Факт: Покупатели не понимают что делает кнопка «Применить» с различными полями ввода.

Более половины тестеров смутились, увидев на страницах оплаты кнопку «Применить» (например, в разделе выбора метода доставки).
Мы выявили, что на эти кнопки либо:
  • Вообще не нажимают, даже если соответствующее поле ввода заполнено
  • Нажимают, путая с основной кнопкой подтверждения.


Пользователи просто не понимали что делать с отдельно стоящей кнопкой «Применить».

На странице оплаты Newegg.com только половина тестировщиков, введя свой индекс нажимали на кнопку Go (см. проблему 1 выше).


Кнопка Применить на Newegg. Большой скриншот.

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

На сайте AmericanApparel.com тестеры путали кнопку «Apply» с основной кнопкой подтверждения на странице (см. проблему 2 выше) и не могли завершить процесс покупки.


Кнопка «Apply» на сайте American Apparel. Большой скриншот.

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




6. Формат даты окончания срока действия карты должен выглядеть точно так же, как он выглядит на самой карте


Факт: Форму ввода даты окончания срока действия карты бывает сложно расшифровать, особенно если она не выглядит так же, как на самой карте

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

Ниже представлены несколько примеров того, как не нужно представлять формат ввода даты окончания срока действия карты. В примере D месяц подставляется текстом, а год — цифрами. Это самый неудачный вариант из всех.



Правильный способ представить месяц — предложить ввести месяц цифрами и ввести префикс для одноразрядных цифр (так, чтобы они появлялись так, как они впечатаны на карте — 3 превращалось в 03).

Правильный способ представить год — использовать двухзначное поле для ввода года (например, предложить покупателю ввести 14 для 2014 года).

Тестеры не испытывали проблем с вводом месяца, если текстовое название месяца шло после цифрового обозначения (например, 03 — Март), но когда все было наоборот (Март — 03), то это вызывало проблемы.

А еще следует использовать слэш (/) для отделения месяца от года — для того, чтобы поля были похожи на то, что покупатель видит на кредитной карте (03/14 для обозначения марта 2014 года).




7. Используйте только одну колонку для полей ввода


Факт: Если поля формы расположены в двух колонках, то покупателями трудно увидеть связь между ними

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


Вот, к примеру, форма входа и регистрации на Perfume.com:



Разные пользователи интерпретировали эту форму тремя способами:
  • Для того, чтобы зарегистрироваться на сайте, нужно заполнить все поля.
  • Для того, чтобы оформить заявку в качестве гостя, нужно заполнить поле “E-mail” и все поля в правой колонке.
  • Нужно заполнить либо правую, либо левую колонку.


Другой пример это PetSmart. Чаще всего тестеры пропускали поле №2 во второй колонке (Enter your Credit Card Identification Number), что приводило к сообщению об ошибке.



В двух таких случаях тестеры бросали процесс оформления товара потому что они продолжали вводить неправильные данные в неправильные колонки.

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




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


Факт: Большинство пользователей заказывают доставку товаров домой, а значит просить ввести и адрес доставки, и адрес регистрации не имеет смысла.

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


Оформление заказа на сайте NewEgg. Большой скриншот.

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

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


Кнопка переноса адресов на сайте Apple. Большой скриншот.

Кнопку порой бывает трудно заметить — это зависит от дизайна сайта. Например, на сайте Apple ее не увидела половина пользователей. В итоге им пришлось все вводить вручную два раза.

Лучшим решением для таких случаев будет использовать чекбокс (или нечто подобное), который говорит, что адрес для выставления счета и адрес доставки одинаковы. В таком случае ошибки нужно исправлять только один раз. Сайт Amnesty International — хороший пример использования такого решения:






9. Используйте понятные сообщения об ошибках


Факт: Покупатели часто не видят сообщения об ошибках и поэтому не исправляют их

У половины наших испытателей были серьезные проблемы с сообщениями об ошибках — они либо не видели их, либо не могли понять что от них хотят.

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

Вот четыре примера недостаточно заметных сообщений об ошибке:

На сайте American Apparel сообщение об ошибке возникает в желтой плашке вверху (в сообщении говорится о том, что покупатель неправильно заполнил поле с номером телефона).


На сайте Walmart мы видим две маленькие красные стрелочки (справа от Ship to home и Site-re-store). Это и есть сообщения об ошибке.


А на сайте PetSmart красный цвет названия поля State/Province не является ошибкой, это всего-лишь стиль выделения этого заголовка.


У Perfume.com красный цвет поля означает ошибку.


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

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

Убедитесь в том, что ваши сообщения:
  • Располагаются рядом с тем местом, где допущена ошибка (а не вверху страницы)
  • Поняты и лаконичны
  • Заметны покупателям (сделайте их контрастнее, используйте стрелочки или другие визуальные индикаторы)





10. Регистрация не должна быть обязательной


Факт: Покупателям сильно не нравится необходимость регистрироваться на сайте

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

Это происходит по нескольким причинам.

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



Помимо этого, 40% наших тестеров заявили что боятся быть заспамленными, даже если они ясно отказались от рассылки при оформлении заказа.
У многих покупателей в голове есть мысленная установка «Аккаунт = Новостная рассылка». Один из тестеров описал это так: «Если я создам сейчас аккаунт, то они будут спамить меня вечно». Вероятно, к такому мнению они пришли из-за сайтов, которые по умолчанию подписывали пользователей на рассылку и скрывали опцию отказа от нее.

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

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

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

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

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




11. Не требуйте информации, которая, по мнению пользователей, вам не нужна


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

На предложение сообщить номер своего мобильного телефона на одном из сайтов наш тестер воскликнул: «Эй, зачем им номер моего мобильника? Как они будут его использовать? Он им не нужен!» На всех исследованных сайтах кто-либо из тестеров заявлял что сайт требует от него слишком много персональной информации.

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


Оформление заказа в Apple.

Если информация действительно необходима, то потрудитесь объяснить почему. То, что очевидно вам, — не всегда очевидно покупателям. Они привыкли ожидать худшего, когда совершают покупки онлайн (спам на e-mail и рекламные звонки на телефон).

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

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




Улучшение впечатления пользователя при заказе товара


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

В своем исследовании, проведенном более 10 лет назад, гуру юзабилити Якоб Нильсен писал о том, что крупные электронные магазины грубо нарушают даже самые базовые юзабилити-принципы. С тех пор немногое изменилось — достаточно посмотреть на сайты Walmart и AllPosters.

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

С последними достижениями в веб-технологиях и мощными современными браузерами потенциал создания хорошего впечатления пользователя вырос многократно. Однако не стоит фокусироваться на последних технологиях до тех пор, пока базовые принципы юзабилити не соблюдены. Мы внедряем самые крутые технологии потому что они такие новые и крутые и в то же время пассивно смотрим как 59,8% покупателей уходят с сайта в процессе оформления заказа.

Линейный подход (глава 1), хорошие тексты (главы 2 и 3), простой и понятный дизайн форм (4, 5, 5, 7, 8, 9), рассмотрение проблемы личной информации (10 и 11) помогут создать действительно хорошую систему оформления заказа.

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



PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите мне в личку, пожалуйста :)
Автор: @DezmASter Christian Holst
UXDepot
рейтинг 35,05
Компания прекратила активность на сайте
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Комментарии (58)

  • +4
    В последнее время Smashing Magazine лично для меня стал менее интересным. Благодаря Хабру я узнал, что там всё ещё публикуются стоящие материалы. Спасибо за перевод!
  • +7
    Мне очень нравится форма оплаты у Anywayanyday.ru

    • +3
      Ну вот что в их формах оплаты юзабельного? Полная противоположность этому топику.
      image
      1) Card Number. Нет бы написать по-русски, ведь основные клиенты их Россияне.
      2) Тоже самое про срок действия карты.
      3) А вот поле «владелец карты» с какого-то фига уже на русском и стиль не такой, как у основных форм. Здесь они решили внутри формы информацию о форме разместить.
      4) CVC. Что это, где это? Нужно пояснять людям.
      5) Название банка? Зачем оно? Я впервые столкнулся с этим. Нигде прежде меня не просили передать такую информацию.

      В общем, понятно, что аудитория у них платежеспособная, а клиенты часто совершают интернет-покупки и они подкованы в этом смысле. Но все равно, ни а какой юзабилити форм оплаты там речи и не может идти.
      • +10
        на карте это пишется англ. буквами :) расположено как на рисунке. Имхо ок
        • 0
          Логотипы платёжной системы на картах расположены в нижнем правом углу лицевой стороны, а не в верху её середины.
          • 0
            Достал из бумажника три карты: только на одной — внизу справа, на двух остальных — вверху справа.
      • НЛО прилетело и опубликовало эту надпись здесь
        • +1
          • 0
            ой, забыл дописать что там и так это есть
      • +1
        я даже знаю, где такая форма )))
        • 0
          пардон-те, лоханулся)
      • –1
        Похоже пластиковые карты вы видели только по телевизору или на картинках
        • 0
          Здесь мы не обсуждаем, видел ли я карты по телевизору или на картинках.

          Я уже описал, какие пункты мне показались антиюзабельными. Почему не все на русском или не все на английском.

          Лично я, если впервые совершал бы покупки по карте, вряд ли догадался бы, что такое cvv/cvc. У меня на всех картах (psbank, bsgv, masterbank) по две группы цифр (xxxx yyy).

          Зачем и банк-эмитент — вообще не понятно.
          • 0
            я там выше картиночку добавил, посмотрите :)
          • –1
            Ахах, тролль-зануда
  • +9
    Для российских интернет-магазинов хотелось бы добавить, чтобы если требуют номер телефона, то распознавали бы его во всех популярных форматах ввода:

    89162226655
    +7-916-222-66-55
    (916) 222 66 55

    и т.д.
    • +1
      Да, это точно.
      Отличное замечание.
    • +1
      … или как минимум прямо заявляли о том, в какой форме они его от нас ожидают
    • +6
      Я делал несколько интернет-магазинов и всегда настаивал на том, чтобы поле телефона было произвольным. Часто заказчик просит чтобы номер соответствовал формату (например только цифры), но я считаю это глупым. Какая разница введет человек телефон со скобочками, без скобочек? С плюсиком или без плюсика? От опечатки это не спасет, приносит кучу проблем (я сам как-то долго не мог ввести телефон в хитроумную форму и решил проблему отключением javascript), а толку никакого, ведь телефон всё равно будет читать менеджер, а не машина. Смысл в четком формате есть, наверное, только тогда, когда сайт что-то отправляет по смс.
      • +1
        Абсолютно согласен. Даже если необходим отформатированный номер для отправки SMS, то что мешает отформатировать номер автоматически? Задача-то простейшая.
    • –2
      Можно сделать поле для ввода телефона с маской. К примеру, +7 (___) ___-__-__
      • +1
        Это визуально усложняет процесс, и заставляет юзера думать, что ни в коем случае делать не стоит. Мое имхо гибкой должна быть система и менеджеры, а пользователь должен делать как ему удобней.
        • 0
          А почему усложняет? Я не думаю над тем в каком виде компания его от меня ожидает
  • 0
    billing address это не юридический адрес.
    • +3
      Вы не стали объяснять, что же в таком случае billing address специально, чтобы поднять ажиотаж? :)
      • +1
        объяснил вполне достаточно для того, чтобы автор заменил термин.
  • +3
    Кстати, если есть несколько вариантов покупки: с регистрацией и без, то полезно писать подсказку что даст регистрация. Историю покупок, накопительные скидки, возможность участвовать в каких-то акциях и т.д. Работаю с магазином, в котором много плюшек для зарегистрированных пользователей. Но пока не добавили объяснение что даст регистрация, регистрировалось ровно 0.0% покупателей.
  • 0
    Не видно в первом пункте детали картинки на 1704×707.
  • +2
    Верные моменты. Особенно регистрация. Часто кидаю что-то в корзину, что бы просто проверить — доступна ли доставка в Россию в этом магазине вообще, а если стоит регистрация то скорее всего не буду ковыряться и закрою вкладку.
    Ещё есть очень неприятная вещь связанная с адресом доставки, иногда в списке выбора стран Россия есть, а в конце оказывается, что видите ли доставка невозможна. Раздражает безумно.
    • 0
      Условия доставки вообще должны по ссылке с каждой страницы быть доступны прямой и наглядной ссылкой «Доставка»
      • +1
        А это вообще утопия. В западных интернет-магазинах о международной доставке в абсолютном большинстве максимум что написано «да, у нас есть международная доставка». А куда и как — это уже при оплате и вводе реквизитов. Теоретически объяснимо тем, что они работают на локального клиента, но ведь раз есть доставка, зачем отгонять пользователей отсутствием информации? Риторический вопрос.
  • +2
    Меня же никто не просит заводить аккаунт, когда я покупаю парфюм в обычном магазине!

    Гениальная фраза!
    Эй, зачем им номер моего мобильника? Как они будут его использовать? Он им не нужен!

    Тоже верно.
    • +1
      Помнится, делал сайт пиццерии. Не скажу, что больших трудов стоило, но не с первого раза удалось объяснить заказчику, что делать обязательную регистрацию не надо. Человек, блин, покушать хочет, а ему бац! — регистрируйся…
      • 0
        Всем бы пиццериям такое объяснить… Тоже дико бесит такое, решил себе жрачки заказать, а на сайте форма в сто полей. Ещё и с валидацией емейла и капчей.
    • 0
      Просят, но через заполнение формы на дисконтную карту.
  • +3
    Главная ошибка, это предположение, что если пользователь попал в корзину, то он точно решил что-то купить. Он может смотреть способы доставки или оплаты, или просто сравнивал товары с разных страниц.

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

    Проще говоря, если цену товара писать только в корзине, то количество псевдо-покупателей вместе с процентом отказников взлетят до небес. И мудрые юзабилити-специалисты конечно скажут, что достаточно подправить одну страницу, и прибыль взлетит в том же направлении.
    • 0
      Мне кажется, там речь не про корзину идёт, а про страницу checkout.
    • 0
      И инфа про доставку и сравнение должны быть доступны без использования корзины…
  • –4
    В пункте 3, про кнопку «Продолжить», написана ахинея.

    Во первых, перевод кнопки «Continue shopping» как «Продолжить покупку» полностью меняет смысл происходящего. «Continue shopping» — это не «продолжить покупку», а «продолжить шляться_по_магазину». Нажать эту кнопку для оформления покупки может только идиот.

    Во вторых, поскольку идиотов все-таки везде хватает, пункт 3 должен гласить «не вставляйте в процесс оформления покупки левые кнопки». Как следствие, пункт 3 сведется к пункту 1.

    Пункт 8, про адрес выставления счета, не актуален для России. Непонятно, зачем вообще переводили.
    • 0
      Люди поставили минусу, и не потрудились объяснить в чем проблема.
      Попробую взять на себя эту неблагодарную роль.

      Сначала кажется, что, действительно, «Continue shopping» это «продолжить шляться_по_магазину», но на самом деле понятие «shopping» включает в себя не только поиск товара, его изучение и перемещение между магазинами, но и непосредственно покупку вместе с оплатой. Шоппинг это покупки, а не только разглядывание витрин. Именно поэтому фраза неоднозначно воспринимается.

      На русском языке нельзя сделать кнопку «продолжить шоппинг», поэтому проблема будет существовать не во всех языков. Но однозначности добавить можно в любом случае: «Оплатить покупку» + «Добавить другие товары». Второе вместо «Continue shopping».
  • +4
    Например я часто, с точки зрения сайта, «останавливась перед оплатой» на сайтах с билетами на самолеты, так как в подавляющем случае только там, перед самой оплатой, можно узнать _полную_ цену, вместе со всеми налогами, сборами, страховкой, чертом_лысым, иногда, в результате, почти удваивающими цену на билет.
    Очень часто иначе никак это не увидеть. Приходится делать такую «сорвавшуюся покупку».

    Аналогично с доставкой в других магазинах.
    • 0
      Значит нужно сделать калькулятор актуальной стоимости билета до попадения на форму оплаты. С пометкой «При оплате цена может незначительно отличаться»
  • 0
    я вот о чем подумал, возможно стоит делать на спорных страницах поле для коментариев, естественно пояснив его текстом и указав, что оно не относится к заказу?
    мне иногда не хватает терпения искать контактное мыло, потом писать что я имею ввиду, скриншоты прилагать и тп, а если идти на страницу отзывов (если такая вообще есть), то нужно пояснять шаги которые нужно пройти для повторения ошибки и/или непонятного поля.
  • +1
    Чё-то не понял :)

    > HobbyTron.com — это один из сайтов, на котором пользователи нажимали на кнопку «Продолжить», думая что они при этом проследуют к оформлению заказа:

    > скриншот кнопки «continue shopping»

    > В подобных случаях следует использовать слова, свободные от вольных трактовок — например «Купить сейчас» или «Продолжить покупки».

    А continue shopping это разве не есть это самое «продолжить покупки»?
    • 0
      Тонкости перевода, в оригинале это звучит так «Instead, use words that aren’t open to interpretation, such as “Check out now” and “Shop more.”»
      • 0
        Может тогда стоило бы перевести как «Купить еще»?
        • 0
          Даже не знаю, на мой взгляд, «Купить ещё» подразумевает, что уже что-то куплено, а это не так, т.к. заказ ещё не то что не получен, ещё даже не оформлен. Вторая ассоциация — купить ещё тот же товар, что тоже не правильно. Я бы перевёл как «Выбрать ещё», например.
        • 0
          Можно «Добавить(Купить) другие товары». По-аглицки наверное что-то типа «Add more(other) goods(items)» — тут уже надо носителю языка думать.
  • +4
    Перевод статьи о юзабилити содержит юзабилит ошибку: скриншоты слишком мелкие, есть желание разглядеть их, но это невозможно — нет ссылок на более крупные скриншоты. В оригинальной же статье ссылки есть.
    • +1
      Снабдил статью крупными скриншотами :)
  • +1
    Спасибо за статью, прямо сейчас стоит задача по разработке идеальной формыс checkout, теперь мысли более структурированы

    Присоединяюсь к предыдущему оратору с просьбой выложить более крупные скриншоты.
  • +1
    Отличный перевод, все четко и ясно, сам все это понимаю, но у Вас отлично структурированно, теперь буду прикладывать ее как инструкцию тем кто занимается непосредственно разработкой. Спасибо.
  • 0
    Покупал на большинстве из вышеперечисленных магазинов, маленькую трудность доставляло лишь одно — поиск кнопки Checkout, которая вечно хрен знает где расположена :) Иногда доходило даже до Ctrl+F в HTML коде.
  • 0
    Причин такого беспорядка 2:

    1) Некомпетентные в веб-разработке заказчики, считающие себя умнее разработчика.
    2) Инет-магазины — очень бюджетная сфера, для их разработки нанимают индусов (причем, часто еще не пишут что-то свое, а берут за основу кривую бесплатную CMS), а индусу некогда думать о юзабилити, ему бы на еду себе заработать. Вряд ли за дешево вам сделают хороший сайт.
  • 0
    Жаль примеры не из российских сайтов. В России немного отличается принцип оформления покупки через сайт. Очень редко вижу возможность оплатить по карте. А если эта возможность есть, то она скорее осуществляется не на стороне магазина, а на стороне агрегатора платежей или сайта банка. И это дополнительный шаг в оформлении покупки.

    Из российских примеров, что быстрее всего вспоминаются, мне нравится процесс оформления и оплаты покупки на indada.ru и lookatme.ru
  • 0
    Нужен ваш совет. Хотим установить на сайт заказчику интернет-магазин. Но заказчик не хочет выносить магазин в отдельный поддомен типа shop.site.ru Можно ли разместить магазин в подпапку типа site.ru/shop? Какие плюсы и минусы обоих методик?
    Например, читая книгу «Икусство продвижения сайтов» указано, что лучше всегда использовать подпапки. Но если магазин разрастется? Не будет ли излишней нагрузки на сервер. И да, сейчас мы используем modx Evo.
    • 0
      Лучше на отдельный домен/субдомен. Ещё могут быть некоторые затруднения с SSL сертификатом. Не критично, но всё же.
  • 0
    спасибо, крутая статья

    есть ещё что-то по этой теме?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое Разное