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

Задача веб-дизайнера вернуть такой текст клиенту на доработку, предъявив к нему определённые требования, например: «разбейте текст на абзацы, сократите текст, сделайте подзаголовки текста, приложите фото коллектива» и т.д. Или он может сам это сделать, если обладает начальными навыками копирайтинга и редактирования текста.

5. Каталог, модуль «Схема работы», «Партнеры», «Услуги»

Каталог товаров

Основным модулем на сайте интернет-магазина является каталог продукции (товаров или услуг). Поэтому к его разработке надо подойти очень ответственно, и сделать так, чтобы покупателям было легко выбрать товар и купить его. Это и есть основная задача веб-дизайнера: создать понятный и легкий процесс покупки товар или заказа услуги.

Обычно страницы каталога являются самыми посещаемыми на всём сайте.

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

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

Представьте, вы собираетесь на море и вам перед поездкой нужно купить несколько товаров в дорогу. Вы открываете интернет-магазин и видите, что например, солнечных очков там предлагается более тысячи наименований. Какие из них выбрать? Времени изучать нет. Если все товары идут просто по порядку (по логике, заложенной создателями сайта), вы растеряетесь и уйдете на другой сайт. На сайте конкурента вы открываете каталог товаров и видите вверху каталога раздел «Сейчас популярно» и там всего шесть товаров (очков). Из шести вполне можно выбрать.

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

Рис. 69. Шаблон каталога интернет-магазина

Структура каталога

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

Элементы товарного каталога:

– Баннер с акционными товарами.

– Раздел «Популярное» (ТОП товаров, Бестселлеры).

– Раздел «Новинки».

– Сам каталог.

– Чёткие фотографии товара в хорошем разрешении с возможностью увеличить фото.

– Удобные фильтры и сортировка товаров.

– Меню с категориями и подкатегориями каталога.

– Поиск по товарам.

– Блок «Вы недавно смотрели».

– Блок «С этим покупают».

– Блок «Сравнение товара».

– Блок «Товары со скидками».

– Блок «Сезонные товары» или другие подборки товаров.

– Бренды.

– Рейтинги товаров.

– Карточка товара (с ценой и кнопкой «В корзину»).

– Отзывы в карточке товара.

– Видеообзоры товара.

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

– Корзина товаров (и иконка корзины в «шапке» сайта).

– Модуль «Возможно, вам понравится» (в виде ссылки на другую страницу каталога).

– Ссылки на гайды и полезные статьи по товарам каталога.

Карточка товара – это лицо товара, от неё напрямую зависит, будет совершена покупка или нет.

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

Рис. 70. Карточка товара

В идеальной карточке товара должны быть:

– чёткие фотографии товара (в виде мини галереи),

– возможность увеличить фотографию товара,

– название и артикул товара,

– слоган к товару (если есть),

– подробное описание товара, состав, особенности,

– закладка с техническими характеристиками товара,

– закладка с отзывами о товаре,

– возможность выбрать цвет, набор, комплект товара,

– крупно видна цена и ограничение акции по времени (дедлайн),

– покупка в один клик,

– информация о доставке (или самовывозе),

– блок «Похожие товары»,

– блок «Вы ранее смотрели»,

– блок «Рекомендуемые товары»,

– видеопрезентация товара,

– кнопка «Поделиться»,