Ирина Никулина – Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов (страница 30)
1. Каждая новость должная иметь выделяющийся заголовок и краткий текст новости (анонс).
2. Каждая новость сопровождается датой публикации.
3. Желательно, чтобы новость имела иллюстрацию (изображение) по теме новости.
4. Все новости имеют анонс и ссылку «Читать далее» или «Подробнее».
5. Анонс новости должен быть уникальным. Не нужно использовать первый абзац самой новости, лучше создать другой текст. В противном случае новостной раздел полностью будет состоять из фрагментов других текстов и поэтому станет дубликатом с неуникальным содержимым, а это очень негативно влияет на ранжирование в поисковых системах.
6. Изображение должно присутствовать не только в превью на странице со всеми новостями, но и в самой публикации новости.
Внешне новости могут быть оформлены по разному: в виде горизонтальных модулей (фото + текст), расположенных один под другим, или в виде «плитки», когда новость представлена квадратным модулем (фото и на нём заголовок текста).
5. Фотогалерея на сайте
Самой красивой страницей на сайте обычно бывает фотогалерея. В неё собираются лучшие фото товаров или услуг на сайте. Требования к фотографиямв фотогалерее: чёткие, высокого разрешения, с главным объектом в центре, с хорошим ракурсом и композицией, удачно откадрированные. Фотографии для фотогалереи обрабатываются в растровом редакторе Adobe Photoshop, им задается: контрастность, резкость, тоновая и цветовая коррекция; убираются лишние предметы; иногда для портретов делается ретушь. Это тот случай, когда можно «приукрасить» фото.
Можно сделать фиксированную галерею фото, расположив по 3-4 фото в ряду, или можно сделать адаптивную фотогалерею, где первая фотография или весь ряд растягивается на ширину страницы сайта. В последнее время ещё делают галерею с эффектом трёхмерности. См. рис.105.
Иногда на фотогалерее присутствует перемотка влево и вправо. Такая фотогалерея занимает один ряд, но прокручивается в обе стороны, она называется «карусель».
В виде фотогалереи с подписью к каждой фотографии делается страница «Выполненные работы» и «Портфолио работ».
Иногда фотографии в фотогалерее имеют заголовки и текст, поясняющий, что изображено на фото. Такой текст участвует в сео-оптимизации сайта и ранжируется поисковыми системами.
Ещё при создании фотогалерей используется эффект затемнения фото при наведении мышки или эффект увеличения фотографии. См. рис.106.
6. Корзина товара
Дизайн «Корзины товаров» является очень ответственным моментом. Весь сайт может быть сделан безупречно, а Корзина будет настолько неудобной, что в ней никто не сможет оплатить и заказать товар.
Надо так спроектировать Корзину товаров, чтобы покупателю было
1. Понятная логика и простота.
2. Ничего лишнего и отвлекающего.
3. Расположение иконки корзины на видном месте на сайте (в правом верхнем углу).
4. Не изобретать велосипед, а делать так, как люди привыкли.
5. Хорошим решением является блок, всплывающий при наведении на иконку Корзины на любой странице сайта.
6. Удаление товара из списка покупок должно происходить быстро и безболезненно.
7. Обозначьте действием, что товар помещен в Корзину. Например, после добавления товара в корзину появляется уведомление во всплывающем окне об успешно совершенном действии.
8. Хорошо продуманная страница Корзины.
Пользователь попадает на страницу Корзины (не оформления заказа), где он видит список добавленных товаров и цену, может удалять товар, менять количество, а также совершать ряд других действий. После того как покупатель решает, что список его покупок больше не требует никаких изменений, он переходит на следующую страницу,
9. Если в корзине много информации по оформлению товара, то рекомендую разбить информацию на блоки.
10. Можно перед созданием дизайна страницы Корзина, нарисовать схему реализации покупки, например:
У вас перед глазами должна быть последовательность шагов покупки в данной Корзине.
11. Отсутствие обязательной регистрации.
Не заставляйте покупателя проходить обязательную авторизацию или регистрацию, для того чтобы он мог сделать заказ. Такой вариант могут позволить себе только крупные магазины, иначе потенциальный покупатель может уйти с сайта, недооформив заказ в Корзине товаров.
Лучше предусмотрите автоматическое создание аккаунта покупателя, которому будут высланы доступы с информацией о заказе на указанный пользователем e-mail или телефон.
12. Шаги оформления заказа в Корзине должны быть выстроены в правильном порядке. Если пользователь заказывает не доставку, а самовывоз, ему не нужно заполнять поля с адресом доставки.
13. Если пользователь авторизован на сайте, в Корзине должно быть автоматическое заполнение полей с его данными.
Что обязательно должно быть в Корзине товаров (и отображено на дизайне этой страницы):
– Изображение товара.
– Цена каждого добавленного товара.
– Выбор количества позиций.
– Возможность перейти на страницу добавленного в Корзину товара. Название товара является ссылкой на страницу этого товара.
– Блок с информацией об итоговой сумме заказа с учётом доставки, скидки и прочих параметров.
– Возможность удалить товар из корзины.
– Автоматический пересчет суммы при удалении или добавлении товара, а также при изменении количества товаров.
– Поля для заполнения адреса, ФИО, контактов.
– Кнопка «Купить» «Оформить заказ», кнопка «Вернуться в каталог».
– Блок сопутствующих товаров. С помощью данного блока можно совершать дополнительные продажи. («Рекомендуем добавить к заказу»).
– Кнопка быстрого оформления заказа. Дайте клиенту возможность сэкономить время, позволив ему ввести только имя и телефон. Также время пользователя сэкономит кнопка «Купить в 1 клик», расположенная в карточке товара.
– Подарок при заказе выше определенной суммы.
– Блок «У меня есть промокод».
– Кратко рассказать о каждом способе доставки и оплаты.
– Минимальный набор полей для оформления заказа (имя, телефон).
– Уведомление покупателя об изменении статуса заказа. Например, о том, что заказ передан курьеру, или о том, что заказ прибыл в пункт самовывоза. Так клиент поймет, что его заказ в обработке и сам о нём не забудет.
– Кратко рассказать о гарантиях и возврате.
После того как заказ оформлен, спроектируйте такое действие: выслать на e-mail клиента
– состав заказа,
– дата доставки,
– данные для отслеживания,
– любые другие инструкции, которые могут быть полезны покупателю.