Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов - Ирина Анатольевна Никулина

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

8. Хорошо продуманная страница Корзины.

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

9. Если в корзине много информации по оформлению товара, то рекомендую разбить информацию на блоки.

10. Можно перед созданием дизайна страницы Корзина, нарисовать схему реализации покупки, например:

Корзина – Выбор доставки – Выбор оплаты – Подтверждение заказа

У вас перед глазами должна быть последовательность шагов покупки в данной Корзине.

11. Отсутствие обязательной регистрации.

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

Лучше предусмотрите автоматическое создание аккаунта покупателя, которому будут высланы доступы с информацией о заказе на указанный пользователем e-mail или телефон.

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

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

Что обязательно должно быть в Корзине товаров (и отображено на дизайне этой страницы):

– Изображение товара.

– Цена каждого добавленного товара.

– Выбор количества позиций.

– Возможность перейти на страницу добавленного в Корзину товара. Название товара является ссылкой на страницу этого товара.

– Блок с информацией об итоговой сумме заказа с учётом доставки, скидки и прочих параметров.

– Возможность удалить товар из корзины.

– Автоматический пересчет суммы при удалении или добавлении товара, а также при изменении количества товаров.

– Поля для заполнения адреса, ФИО, контактов.

– Кнопка «Купить» «Оформить заказ», кнопка «Вернуться в каталог».

– Блок сопутствующих товаров. С помощью данного блока можно совершать дополнительные продажи. («Рекомендуем добавить к заказу»).

– Кнопка быстрого оформления заказа. Дайте клиенту возможность сэкономить время, позволив ему ввести только имя и телефон. Также время пользователя сэкономит кнопка «Купить в 1 клик», расположенная в карточке товара.

– Подарок при заказе выше определенной суммы.

– Блок «У меня есть промокод».

– Кратко рассказать о каждом способе доставки и оплаты.

– Минимальный набор полей для оформления заказа (имя, телефон).

– Уведомление покупателя об изменении статуса заказа. Например, о том, что заказ передан курьеру, или о том, что заказ прибыл в пункт самовывоза. Так клиент поймет, что его заказ в обработке и сам о нём не забудет.

– Кратко рассказать о гарантиях и возврате.

После того как заказ оформлен, спроектируйте такое действие: выслать на e-mail клиента следующую информацию:

– состав заказа,

– дата доставки,

– данные для отслеживания,

– любые другие инструкции, которые могут быть полезны покупателю.

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

Рис.107. Корзина товара

7. Дополнительные страницы

Кроме этих страниц, бывает еще много дополнительных страниц на сайте (например, страница «Услуги», «Статьи», «Доставка» и т.д.), все они должны быть выполнены в едином стиле с первой страницей, иметь одинаковую «Шапку» и «Подвал». Их текстовое наполнение должно иметь одинаковую разметку заголовками и подзаголовками на всём сайте.

Рис.108. Страница «Услуги» на сайте

Во время разработки веб-дизайна дополнительно могут быть сделаны дизайны страниц: «Обучение», «Партнёрам», «Цены» (прайс), «Как оплатить заказ», «Корзина товаров», «Оплата и доставка», «Статьи» и т.д.

Рис. 109. Страница «Заказ и доставка»

Глава 15. Веб-дизайн мобильной версии

В этой главе:

1. Правила и особенности дизайна мобильной версии

2. Размеры и разрешение файла

3. Чем отличается мобильная версия от адаптивной?

4. Что нужно учесть при разработке мобильной версии

1. Правила и особенности дизайна мобильной версии

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

Рис.110. Прототип мобильной версии сайта

Первое правило: адаптивность.

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

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

– маленький размер экрана;

– низкая скорость загрузки, по сравнению с компьютерами;

– сложности при вводе данных;

– некоторый контент не может быть отображен или отображается некорректно.

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

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

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

Правило пятое: контент в одной колонке.

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

Правило шестое: убрать с мобильной версии некоторые инструменты.

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

Правило седьмое: сделать активными телефоны и мессенджеры.

Главное целевое действие для мобильных устройств – это получить звонок от клиента.

Для этого на сайте в мобильной версии делают следующие шаги:

– размещают активную кнопку для телефонного звонка сразу