Общие принципы заполнения полей форм регистрации и заказа

ž Необходимый минимум полей. При регистрации и оформлении заказа количество обязательных полей минимально, в идеале – имя и контакт: email и/или телефон. Каждое дополнительное обязательное поле снабжено пояснением – зачем нам нужна эта информация. Если полей в форме регистрации много, они визуально объединены в группы, группы имеют заголовки.

ž Заметность обязательных к заполнению полей. Они отмечены или выделены привычным пользователю образом (звездочкой).

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

ž Одна колонка полей. Поля во второй колонке пользователи часто не замечают вовсе.

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

ž Использование подсказок и автозаполнения. Примеры:

a. все поля имеют не только наименование, но и понятное описание;

b. рядом с полем или прямо в поле (плейсхолдер) приводится пример корректного заполнения;

c. если какие-то поля возможно по умолчанию заполнить наиболее часто встречающимся вариантом – заполняем;

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

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

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

ž Отсутствие проверки корректности ввода номера телефона. От этого рекомендуется отказаться: ограничение форматов ввода создает неудобства пользователю с нестандартным номером (например, заграничным, в котором есть буквы). Примечание: если номер телефона используется программным обеспечением без предварительной ручной обработки, например, для отправки SMS – используем программное приведение его к требуемому формату и отбраковку номеров нестандартного формата.

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

ž снабжаем это поле интуитивными подсказками;

ž предусматриваем выбор из списка код страны, региона;

ž предлагаем альтернативный вариант для пользователей с нестандартными номерами.

ž Мгновенная проверка. Каждое поле проверяется на правильность заполнения сразу после ввода данных, страница при этом не перезагружается.

ž Поощрение пользователя. Правильно заполненное поле выделяется, к примеру, зеленым цветом.

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

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

ž Удобная корректировка информации. В процессе регистрации или оформления заказа посетитель всегда может вернуться на шаг назад и откорректировать данные.

 

Регистрация

ž Убеждение в пользе регистрации. Она дает пользователю какие-то выгоды, и информацию об этом стоит расположить рядом с кнопкой регистрации.

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

ž Упрощение регистрации. Дополнительно к стандартной регистрации пользователю предлагается авторизация через социальные сети.

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

ž «Фоновая» регистрация. Она предлагается автоматически, и для нее клиенту не нужно ничего заполнять дополнительно: используются данные из заказа (ФИО, электронный адрес), которые он будет заполнять в любом случае, а пароль генерируется автоматически.

ž Подтверждение регистрации. После завершения регистрации посетитель получает письмо с данными регистрации; это касается также «фоновой» регистрации.

Корзина

ž Стандартный алгоритм отправки в корзину. При добавлении товара в корзину:

a. пользователь получает всплывающее сообщение о добавлении товара в корзину;

b. пользователь видит анимацию отправки товара в корзину (второй положительный эффект от этого – пользователь теперь понимает, где находится корзина, если до этого он ее не замечал);

c. значок корзины визуально меняется, показывая количество товаров в ней и общую сумму корзины.

ž Отсутствие личной информации. В корзине нет отвлекающих элементов:

a. каталога товаров, витрины;

b. рекламы, анимации;

c. новостей или ссылок на статьи блога.

ž Мгновенная связь с менеджерами. В корзине предусмотрена возможность связаться с менеджерами и получить помощь, если что-то стало непонятно в ходе покупки:

ž есть иконка онлайн-консультанта;

ž указаны телефоны и контакты менеджеров;

ž есть форма для обратного звонка.

ž Полная информация о собранном заказе. В корзине отображаются:

a. достаточно крупное изображение товаров, чтобы пользователь понимал – что это;

b. наименование товаров;

c. опционально – краткое описание товара;

d. количество позиций каждого товара;

e. общая сумма товара;

f. общая сумма с учетом доставки (опционально).

ž Кликабельность позиций. Изображение и наименование товара кликабельны и ведут на страницу товара.

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

ž Удобные операции прямо в корзине.

a. В корзине есть возможность как увеличить или уменьшить количество товара, так и полностью удалить товарную позицию.

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

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

ž Простая, понятная и наглядная очистка корзины.

a. После удаления всех товаров из корзины появляется сообщение, что корзина пуста.

b. После завершения оформления товара корзина очищается.

 

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

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

a. заголовок чата поддержки/онлайн консультанта меняет свой заголовок на, к примеру, «Нужна помощь в оформлении заказа?»;

b. на видном месте располагаются контакты менеджера и предложение позвонить/связаться для получения помощи.

ž Закрепленный список товаров. Список виден на всех этапах оформления заказа.

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

ž Наглядность. Если заказ оформляется в несколько этапов, пользователь сразу видит, сколько всего этапов заказа предусмотрено, и на каком из них он находится.

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

ž Подтверждение заказа. После завершения заказа пользователь:

a. видит страницу благодарности и пояснениями дальнейших действий с его стороны и со стороны компании;

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

c. получает информацию о заказе по всем указанным им контактам: SMS на номер телефона, письмо на почту, сообщение в мессенджер. Это удобно, если сейчас клиенту доступен только какой-то один вид связи. Опционально: клиенту предоставляется выбор канала, по которому он хочет получить такое уведомление.

ž Личный кабинет. Если пользователь зарегистрирован, все заказы, в том числе завершенные, сохраняются в его личном кабинете, и он может их просмотреть в любой момент.

Оплата

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

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

ž Информативные примечания.

a. По каждому варианту оплаты указываются все расходы, которые клиент понесет при оплате этим способом («комиссия – 1 %,») и другие важные примечания («для оплаты необходима карта Сбербанка»).

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

ž Открытие в новой вкладке. Опционально – на текущей странице остается подробная инструкция по оплате, а страница платежной системы открывается в новой вкладке. Таким образом, клиент не остается один на один с, возможно, незнакомой ему платежной системой.

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

ž Помощь при ошибке. Если во время оплаты произошла ошибка – указывается возможная причина неудачи и предлагается попробовать еще раз.

Доставка

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

ž Минимум действий пользователя. Данные доставки для зарегистрированного пользователя сохраняются, и при следующей покупке ему не нужно их вводить заново.

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

ž Автоматический расчет суммы доставки. Она включается в общую сумму заказа.

Тексты на сайте

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

ž Лаконичные и короткие тексты. Отсутствует «вода», длинные вступления, ненужная информация, перегруженные предложения.

ž Фокус на целевой аудитории. В тексте используются простые, привычные и понятные для ЦА фразы и слова.

ž Простота представления чисел. В основном они представлены цифрами, а не словами, для облегчения восприятия текста. Разряды в цифрах отделены пробелами (пример: 1 560 000).

ž Форматирование текста, облегчающее чтение. Используются следующие приемы:

a. подзаголовки разбивают текст на смысловые блоки;

b. расстояние между абзацами устанавливается в 1,5–2 раза больше, чем между строками абзаца;

c. формируются списки – нумерованные и маркированные;

d. выделяются ключевые слова и фразы (ключевых не с точки зрения SEO, а с точки зрения смысла);

e. текст чередуется с изображениями, графиками, таблицами;

f. отдельные, особо важные моменты выделяются курсивом;

g. для выделения части фразы или целого предложения используется жирный шрифт;

h. подчеркивание применяется, в основном, только для ссылок;

i. все виды выделения текста используются в меру, чтобы текст не казался пестрым;

j. текст выравнивается на всех страницах одинаково, предпочтительно – по левому краю;

k. строки занимают примерно 70–80 символов;

l. больше «воздуха» (пробелов и полей) в тексте увеличивает привлекательность текста и его «понятность», восприятие;

m. верхний регистр не используется ни для заголовков, ни для текста – он сложен для восприятия;

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

Шрифт

ž Единообразие. На всех страницах используются единообразные шрифты. Для элементов (заголовков и т.д.) одного уровня – одинаковый шрифт.

ž Стандартизация цветов. Цвет шрифта и цвет фона сочетаются, шрифт и фон взаимно подобраны для комфортного восприятия и чтения. Оптимально – темный шрифт на светлом фоне. Цвет ссылок не используется для обычного текста.

ž Оптимальный размер кегля. Для основного текста на сайте используется достаточно крупный кегль, чтобы пользователю было комфортно его читать. Существует множество мнений на этот счет, сейчас стандартными для обычного текста считаются размеры от 12 до 16 пикселей, причем современная тенденция – более крупный шрифт. Учитываем, что для разного типа шрифта один и тот же размер может давать разный результат.

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

Заголовки и подзаголовки

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

ž Визуальная иерархия заголовков. К примеру, с помощью величины шрифта: заголовок 1 уровня крупнее, чем заголовок 2 уровня, подзаголовок последнего уровня крупнее и/или жирнее, чем основной текст.

ž Отсутствие точки в заголовках и подзаголовках. Допускаются только вопросительный, восклицательный знак и многоточие.