8 Вересень 2012
1 837
Рубрика: дизайн

Правильный постраничный вывод товаров

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

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

Давайте представим ситуацию, когда у нас есть каталог товаров с разделом, в котором 35 записей. При разбивке по 10 товаров на страницу мы заставим клиента трижды кликнуть мышкой, чтобы увидеть товары из конца списка. Это крайне неудобно и спасет ситуацию лишь ссылка “Показать все”. С другой стороны, если гость воспользовался фильтром по цене или знает название товара, то показывать ему остальные будет неправильным решением, они ему в данный момент неитересны. В таком случае постраничная навигация нужна. Как же поступить лучше и найти компромисс между тем, чтобы скрыть ненужное, но в то же время не упустить возможность показать все товары потенциальному покупателю?

В 21-м веке мы можем программировать на аяксе, а это существенно упростит задачу. Итак…

Методы хорошего постраничного вывода товаров

1. Можно сразу предлагать выбрать количество товаров на страницу, а также сортировку по цене или названию. Неважно, сколько товаров в каталоге, если клиенту нужны самые недорогие варианты. В таком случае 10 самых дешевых товаров, выведенных на первой странице, скорее всего его устроят и клиент останется доволен. Сопутствующие и похожие товары можно предложить уже на странице товара.

2. Быстрый поиск. Этот вариант хорош в случае, если гость знает название товара. В строке поиска по мере набора текста можно предлагать варианты, совпадающие с тем, что ищет посетитель. По клику на результат мы откроем ему страницу товара, минуя страницу поиска.

Пример быстрого поиска:

3. Динамичная подгрузка результатов поиска или фильтра. Этот способ давно используется на images.google.com в качестве стандартного поиска изображений. Позже этот метод взяли на вооружение и в яндексе. Когда посетитель долистает страницу вниз, автоматически подгружаются следующие результаты поиска и выводятся под текущими. Таким образом мы и уменьшим количество запросов к базам данных, и ускорим процесс навигации по сайту.

Дизайнер, помни: чем быстрее посетитель сможет найти нужный ему товар в магазине, тем больше вероятность успешного конверта и покупки.

Тепер я хочу бачити коментарі 4