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

В виде фотогалереи с подписью к каждой фотографии делается страница «Выполненные работы» и «Портфолио работ».

Рис. 105. Фотогалерея на сайте с эффектом трёхмерности.

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

Ещё при создании фотогалерей используется эффект затемнения фото при наведении мышки или эффект увеличения фотографии. См. рис.106.

Рис. 106. Эффект затемнения фотографии на странице «Портфолио»

6. Корзина товара

«Не заставляйте меня думать» – первый закон юзабилити.

Стив Круг

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

Корзина товара в интернет-магазине – один из важнейших элементов, от оформления и функциональных возможностей которого напрямую зависят продажи на сайте. Существует так называемый эффект «Брошенной корзины». Это происходит тогда, когда покупатель на сайте кладет товар в Корзину и покидает сайт, не совершив заказа и оплаты.

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

Правила создания Корзины товаров:

1. Понятная логика и простота.

2. Ничего лишнего и отвлекающего.

3. Расположение иконки корзины на видном месте на сайте (в правом верхнем углу).

4. Не изобретать велосипед, а делать так, как люди привыкли.

5. Хорошим решением является блок, всплывающий при наведении на иконку Корзины на любой странице сайта.

6. Удаление товара из списка покупок должно происходить быстро и безболезненно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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