Основные принципы дизайна для коммерческих сайтов

Тут вы узнаете всю правду о сайтах электронной коммерции: согласно последним исследованиям в этой области, по крайней мере 59,8% потенциальных покупателей отказываются от оплаты того, что набрали в корзину (MarketingSherpa 59,8%, SeeWhy 83% и MarketLive 62,14%). Главный вопрос: почему клиенты так часто отказываются от покупок? Дело в том, что есть некоторые принципиальные ошибки, которые разработчики сайтов электронной коммерции очень часто делают. Есть ли общие принципы, которые усложняют жизнь пользователям, чтобы купить наши продукты? И есть ли какой-то осмысленный способ улучшить показатели продаж того, что мы продаём?

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

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

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

В общей сложности, пользователям представилось ответить на 500 вопросов, касающихся юзабилити. К примеру: насколько сильно вас отвлекают посторонние изображения, реклама и так далее? Все ответы были тщательно проанализированы, и в результате всего этого было создано 63 правила, которые можно объединить заголовком “Юзабилити оформления заказа на сайте электронной коммерции”. В этой статье мы рассмотрим лишь 11 из данных принципов.

1. Процесс заказа должен быть последовательным

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

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

Если на вашем сайте есть подшаги (при оплате), то вы автоматически являетесь хозяином сайта с нелинейным процессом оплаты. Подобные ситуации могут возникнуть, когда вам необходимо узнать адрес доставки товара “Предпочитаемый адрес доставки” (Walmart) или “Создать аккаунт” (Zappos) на отдельной странице, а затем перенаправить пользователя на предыдущий шаг оплаты.

Ниже вы можете увидеть схему нелинейного процесса оплаты:

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

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

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

Правило: Многие поля формы могут смутить пользователей, если у них нет описания.

“Что означает данное поле “Второй адрес”?”. Также многие пользователи терялись, когда им нужно было заполнить поле “Адрес оплаты”.

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

К примеру на сайте HobbyTron было поле “First”:

На сайте Apple многие люди вписывали свой почтовый индекс в поле “Area code”:

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

Ниже, вы можете увидеть пример того, о чём я говорю:

Даже те поля, где ответ однозначен, такие как “Email адрес”, нуждаются в разъяснении. Для поля “Email адрес” можно придумать массу инструкций вплоть до тех, зачем вам он нужен и как он будет использоваться.

То же самое касается полей, представляющих данные о банковской карте (например, дата истечения срока карточки).

3. Избегайте таких слов как “Продолжить”

Правило: Такие контекстуальные слова, как “Продолжить”, являются неоднозначными и могут легко запутать клиента.

Опираясь на полученные данные слово “Продолжить” на кнопке формы может означать следующие вещи:

1. Продолжить делать покупки
   К примеру, поискать футболку к джинсам, которые только что купил.
2. Продолжить процесс оплаты
   К примеру, если пользователь просто хочет оплатить товары, которые набрал в корзину.

Ещё одним примером таких слов является “Назад”. Куда назад? Назад к поиску? Назад, на предыдущую страницу? Таких неоднозначных слов может быть очень и очень много.

HobbyTron - это сайт, который использует слово “Продолжить”, для того чтобы продолжить процесс выбора товаров:

Один из испытуемых сказал:

Это запутало меня. Я не думал, о том, что это означало продолжить процесс оплаты.

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

Вместо этого можно использовать более сложные фразы “Оплатить товары” или “Купить что-то ещё”.

4. Используйте визуальные элементы на странице оплаты

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

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

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

Одна из испытуемых сказала, “Я не чувствую себя в безопасности”. Её реакция не была основана на технических характеристиках сайта, а на своём впечатлении.

Ниже я привёл вам небольшой пример (смотрите на рисунок B). Прошу заметить изменение цвета фона элемента и изображение замка:

Добавление визуальных элементов (таких как границы, цвет фона, и различного рода иконки) могут помочь вашему бизнесу.

5. Никогда не используйте слово “Применить” в ваших формах

Правило: Пользователи не понимают смысл слова “Применить” в контексте формы.

Более половины испытуемых застопорились, когда перед ними возникла кнопка “Применить”; к примеру: применить метод доставки к заказу.

Данная кнопка так же использовалась в ряде других случаев:

1. Не была кликабильна, даже если все необходимые поля были заполнены;
2. Пользователи путали её с главной кнопкой отправки формы.

Многие испытуемые не понимали, зачем помимо всего остального, размещать дополнительную кнопку в форме.

Ниже вы можете увидеть пример с сайта Newegg, где только половина испытуемых после ввода индекса нажали на кнопку “Go” (та же проблема):

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

Ниже вы можете найти форму с сайта American Apparel, где используется кнопка “Применить” в качестве главной кнопки (проблема №2).

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

6. Поле формы «Дата истечения срока» должно выглядеть так же как на банковской карте

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

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

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

Для месяцев лучше использовать префикс 0 (к примеру, 03 для Марта).

Для года лучше использовать две последние цифры, всё как на кредитке (к примеру, 14 для 2014).

Так испытуемых не смутил вариант, когда за числом следует название месяца. К примеру, “03 – Март” вполне нормальный вариант, а вот “Март – 03” не очень.

Также поля месяца и года вы можете разделить знаком (/) (к примеру, 03 / 14 для Марта 2014).

7. Используйте только одну колонку для полей формы

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

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

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

Вот пример того, о чём я говорю:

Данную форму можно понять тремя разными способами:

1. Для того, чтобы создать аккаунт, все поля формы должны быть заполнены.
2. Поле “Email адрес”, а также поля из правой колонки могут быть использованы для “Покупки гостем”.
3. Поля правой и левой колонок должны быть полностью заполнены.

Ещё один пример с сайта PetSmart. Большинство пользователей даже не обратили внимания на вторую колонку “Credit card identification number”, что привело к возникновению ошибок:

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

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

8. Используйте поле адреса доставки, как Адрес для выплаты счёта

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

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

На многих сайтах есть кнопка “Копировать адрес доставки”. Тут проблема заключается в том, что пользователю, который ввёл неверные данные придётся исправлять их дважды. Вы спросите “А почему бы ему не нажать на кнопку ещё раз после исправления ошибки?”. Дело в том, что абсолютно все испытуемые, которые столкнулись с данной проблемой просто забыли это сделать.

Также часто используется флажок (или что-то похожее), что является более приемлемым вариантом. На сайте Amnesty International вы можете увидеть пример такого подхода:

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

Правило: Помогите вашим пользователям быстро исправить возникшие ошибки.

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

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

На сайте American Apparel, сообщение об ошибке говорит о том, что введённые данные телефона неверны:

На сайте Walmart две красные стрелки (“Ship to home” и “Site-to-store”) являются сообщениями об ошибках:

На сайте PetSmart область “State/Province” оформленная красным цветом - это не ошибка, а просто стиль данного сайта:

На сайте Perfume.com ошибка была допущена при введении данных в поле “Phone”:

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

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

Сообщения об ошибках должны быть:

• Контекстуальными (располагаться рядом с проблемными полями);
• Простыми и краткими;
• Заметными (используйте изображения или любые другие отличительные знаки).

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

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

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

Всему этому есть несколько причин.

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

Другая причина заключается в том, что 40% испытуемых выражали опасения по поводу того, что после регистрации будут постоянно закиданы различного рода предложениями товаров и услуг. Для таких пользователей слова аккаунт и подписка являются одним и тем же. Также находились те, кто говорил: “Если я создам аккаунт, то они закидают меня спамом”. Поверьте мне на слово, их опасения основаны на реальном опыте.

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

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

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

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

Если вам так уж не терпится получить ещё одну пользовательскую запись, то предложите пользователю зарегистрироваться после того, как он совершил покупку. “Не хотите ли создать аккаунт? Просто введите желаемый пароль”. Все остальные данные вы можете получить из кукисов или сессии. Таким образом, ваши продажи резко увеличатся. (Также не забудьте рассказать пользователям о том, какие преимущества их ждут после создания учётной записи).

11. Не размещайте лишнюю информацию

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

Попытка получения номера телефона закончилась следующим отзывом: “А зачем им нужен мой номер телефона? Что они будут с ним делать? Им это не нужно!”. Зачастую сайты уж слишком интересуются персональными данными пользователей.

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

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

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

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

Учитесь на чужом опыте – делайте ваши сайты лучше

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

10 лет назад гуру юзабилити Jakob Nielsen проводил подобные исследования и сформулировал те же правила. Это значит, что разработчики всерьёз их не воспринимают и продолжают наступать на одни и те же грабли. Тут всё в ваших руках.

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

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

Следуйте этим 11 правилам и всё у вас и ваших клиентов будет хорошо!