Ctrl + ↑ Позднее

Серый мелкий текст

Подозрительный.

Мелкий текст неплох, если он весь мелкий:

Мелкий текст удобно читать, когда правильно подобран шрифт и интерлиньяж, а строки не растянуты. Подходит для сносок, подписей и если хотите привлечь внимание. На контрасте размеров, мелкий — выглядит важным, бросается в глаза, если вокруг достаточно воздуха. Дальше текст можно не читать. Он для того, чтобы создать объем, а пример сделать нагляднее.

Бросается в глаза, когда вокруг него крупный. Поставьте его отдельно, куда-нибудь на поля и добавьте воздуха, тогда он будет захватывать внимание и выглядеть важным. Мелким текстом подписывают фотографии и пишут в сносках.

Этот текст выделяется, потому что стоит сбоку и мельче основного.

Этот же текст, но серым цветом:

Мелкий текст удобно читать, когда правильно подобран шрифт и интерлиньяж, а строки не растянуты. Подходит для сносок, подписей и если хотите привлечь внимание. На контрасте размеров, мелкий — выглядит важным, бросается в глаза, если вокруг достаточно воздуха. Дальше текст можно не читать. Он для того, чтобы создать объем, а пример сделать нагляднее.

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

Мелким текстом пишут гадости

Не будьте плохим человеком.

Не пишите серым цветом об отсутствии гарантии, напишите черным, сделайте крупнее, поставьте на видное место, добавьте, где можно отремонтировать со скидкой. Цвет товара отличается от картинки — заострите внимание на этом, пусть человек лишний раз подумает, подойдет ему цвет или нет.

Если решили писать мелкий текст, то:

  1. Старайтесь не использовать шрифт с засечками.
  2. Подберите контрастный цвет.
  3. Попробуйте ограничить ширину и поменять интерлиньяж.
2016   текст

Похожие товары в интернет-магазине

Мало кто умеет грамотно пользоваться блоком с похожими товарами. Добавляют его, лишь бы предложить «что-нибудь еще». С самим модулем никто работает, хотя он напрямую влияет на продажи.

Зачем нужен

Чтобы больше заработать денег и помочь клиенту с выбором. Но это не способ манипуляции. Вы должны предлагать нужный товар в нужное время. Это могут быть дополнительные аксессуары или аналог товара. К айфону 5 на 16 гб можно предложить чехлы и наушники, а можно показать этот же айфон, но с другим объемом памяти.

Где показывать

Сверху, ближе к товару, показывайте дополнительные аксессуары, который человеку все равно придется докупать, так пусть лучше купит у вас. Дайте скидку на аксессуары, если он покупает их с крупным товаром. Показывать аналоги сверху — нехорошо, вы отвлекаете человека от покупки, хотя иногда это уместно.

Снизу покажите аналоги, достаточно четыре—шесть позиций, чтобы не потеряться в выборе. Выглядит это так: человек перешел на страницу товара, посмотрел фотографии, изучил характеристики, почитал описание. Если не решился на покупку — его встречает блок с похожим товаром и начинается все заново. Хотя есть вероятность, что он уйдет раньше, например, в середине описания или после просмотра фото.

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

Сколько показывать товаров

Зависит от дизайна и разрешения экрана.

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

На большом мониторе покажите шесть позиций, на ноутбуке — четыре, на планшете — две, а на смартфоне уберите блок. Расположение и размер объектов внутри блока на большом мониторе и планшете должны отличаться. Важность объектов не должна быть равнозначна, один элемент должен быть главным, но зависит от тематики. Например, в интернет-магазине одежды больше важны картинки, а цена уходит на второй план, если разбежка не очень большая.

Правило внутреннего и внешнего о расстоянии между объектами.

Что показывать

Покажите картинку, заголовок и цену. Не нужно лепить рейтинг, название категории, логотип производителя, кнопку «купить». Блок приглашает посмотреть товар, а не продает.

Аналоги. Характеристики товаров должны совпадать. Если продаете морозильник на 4 камеры серого цвета, не стоит показывать на 8 камер красного. Цены не должны сильно отличаться, если товар стоит 200 долларов, можно предложить за 180 и 230, но 250 уже много.

Аксессуары. Вдогонку продайте недорогой товар, к морозильнику предложите удлинитель на два метра. Покупка происходит на контрасте цен, к морозильнику за 200 долларов не жалко купить удлинитель за пару баксов.

Как формировать список товаров

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

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

На основе статистики. Система собирает данные и формирует связи между товарами. К телефону предложит карту памяти и наушники, к велосипеду — клаксон. Если клаксон продается плохо, система заменит его на звонок.

Разница между ручным управлением и на основе статистики — автоматизация. Вы один раз продумываете правила и система сама все делает.

Как сделать

Плохо. Впихните лишние элементы, поставьте блок не туда, неправильно расставьте акценты, покажите много товаров.

Что здесь не так:

  1. Листалка по бокам прячет товар.
  2. Товар разного цвета.
  3. Текст больше картинки.
  4. Разные габариты у морозильников.
  5. Рейтинг, звезды ни о чем не говорят.
  6. Код, он полезен только менеджеру.
  7. Кнопка «в корзину» лишняя, никто так быстро не покупает товар.
  8. Ссылка «сравнить все», непонятно что с чем будет сравниваться.


Хорошо. Покажите картинку, заголовок и цену. Не мудрите.

Завершить образ — дополнительный товар, а расцветки — аналоги, но можно показать другие рубашки в клетку, вместо других цветов.

Фильтр в каталоге интернет-магазина

Фильтр помогает найти товар, когда его много. Если в категории сто рубашек, сложно найти красную в клетку 46 размера за пять секунд.

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

Есть два вида фильтра: «по параметрам» и «ссылками». По параметрам — стандартный, есть у каждого сайта. «Ссылками» — много подкатегорий, более узкие запросы, если категория «мужские рубашки», то быстрый фильтр ссылками: в клетку, без рукавов, в клетку без рукавов.

См. также: структура каталога интернет-магазина.

Фильтр по параметрам

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

Хорошо Плохо

Вариант справа сам по себе не плох, если оставить только главные пункты и обновлять ленту автоматически, после клика на параметр. Человеку проще купить, потому что меньше действий надо сделать. Можно убрать кнопку «применить» или показывать ее рядом с блоком выбранного параметра, вместе с количеством товара. Показывать кнопку «применить» внизу блока — плохая идея.

Быстрый фильтр ссылками

Когда выбор ограничен. Ссылки должны отвечать на запросы клиента, хотя бы общими словами. Фильтр «ссылками» идет как дополнение к «параметрам», он не может заменить его, но их можно объединить. Размер зависит от проработки семантического ядра.

Интернет-магазин «Вайлдберриз»

Хлебные крошки в интернет-магазине

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

Хлебные крошки помогают ориентироваться в структуре сайта и переходить на уровне выше. В жизни это выглядит так:

Кристина ищет черное платье в «яндексе». Кликает на первую строку и видит крутое платье из коллекции «Пантера», но не с тем вырезом. Ей надо посмотреть всю коллекцию и она ищет ссылку.

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

Следуйте правилам

  • Дублируйте навигацию. Урл, хлебные крошки, вложенная навигация в боком меню — все одинаковое.
  • Логическая вложенность. Одежда → Платья → Вечерние → Кружевные.
  • Не повторяйте слова. Одежды → Платья → Вечерние платья → Кружевные вечерние платья.

Об оплате на странице товара

Пишите об оплате там, где человек принимает решение о покупке — на странице товара. Не отправляйте на страницу «об оплате».

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

См. также: о доставке на странице товара.

Как надо

  • Покажите, какие способы оплаты есть. Разместите иконки: виза, вебмани, биткойн. Не пишите словами без нужны.
  • Опишите процесс, если отличается от стандартного. 100% предоплата или только карточки принимаете, а наличные нет.

Как можно по-другому

Интернет-магазин одежды «Ламода» пишет о примерке одежды, но имеет в виду оплату:

А еще рассказывает о возврате товара. Это комбо.

Разместите иконки

О доставке на странице товара

Расскажите коротко и поставьте текст на видное место, ближе к кнопке «купить». Если товар дешевый, людям важна бесплатная доставка, если срочно — сроки доставки.

Напишите коротко

  • Стоимость. Платная или бесплатная. Зависит от стоимости товара или веса. А если недалеко от МКАД доставить. Напишите цену, хотя бы примерно.
  • Сроки. Доставка в день заказа или на следующий. Когда доставят в Гродно или Челябинск. Есть ли экспресс доставка в течении двух часов. Если под заказ, то когда примерно.
  • Способы. Привезут холодильник и поставят на кухне или скажут «мы не будем поднимать на 9 этаж». Доставка почтой или курьерской службой. Есть ли самовывоз.
  • Отказ от товара. Право такое у покупателя есть, но никто о нем не пишет. А надо.
  • Возврат. Можно ли вернуть товар через неделю или нет. А если заводской дефект.

Четвертый и пятый пункты спорные. Они могут увеличить или уменьшить прибыль. Из уважения к покупателю, написать об этом стоит, но на странице доставки или товара, решайте сами.

Найдите место для ссылки на страницу «о доставке». Главное — не переборщите с текстом.

Когда можно не писать

Если у вас постоянная клиенты, которые знают все условия.

Оформление фотографий в интернет-магазине

Уделите внимание фотографиям в интернет-магазине, хуже не будет, если улучшить их. Возможно, у вас даже вырастут продажи.

См. также: важность фотографий для интернет-магазина.

13 правил по оформлению

  1. Никаких водяных знаков, закрывающих картинку.
  2. Фотографии должны быть хорошего качества.
  3. Если хотите «оригинальную» фотографию, вырежьте из видео обзора или сфотографируйте сами.
  4. Нельзя делать маленькие фотографии, если только это не миниатюры.
  5. Фотографии увеличиваются при клике, чтобы рассмотреть детали.
  6. Если несколько фотографий, то можно листать при клике сбоку.
  7. Область стрелок-листалок сбоку фотографии, больше самой стрелки, чтобы не целиться, а просто кликнуть.
  8. Листалка может работать при нажатии, а может при перетягивании (свапе), как на мобильнике.
  9. Когда фотографии долистали до конца, можно вернуть человека в самое начало, но это редко уместно.
  10. Если много фотографий, снизу должны быть миниатюры.
  11. Миниатюры — навигация по фотографиям, показывает «ассортимент» и подогревает желание листать.
  12. Большие фотографии можно не увеличивать при клике, они и так большие.
  13. Делайте подписи к фотографиям, если не прячете за слайдером, а показываете все сразу.

Полезно. Используйте фотораму, чтобы красиво оформлять фотографии по всем правилам.

Дублирование слов в меню

Дублировать — плохо. Если убрать одинаковые слова, хуже не станет.

Меню интернет-магазина «фотосклад.ру».

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

См. также: структура каталога в интернет-магазине.

Есть еще несколько ссылок со словами «со скидкой», но их место в самой категории, а не в меню.

Правило внутреннего и внешнего

Правило о расстоянии между объектами, применяется ко всему: слова, абзацы, блоки, картинки, видео. Человек должен читать текст, а не связывать элементы между собой.

См. также: Теория близости, Артемий Лебедев.

Карточка товара интернет-магазина

На картинке две проблемы: объекты разные по смыслу — соединены, и отсутствие первостепенного и второстепенного.

Про первую проблему. Я сразу обратил внимание на слово «значение», потом на то что ниже — Молдавия. И задумался, как «значение» может быть Молдавией, в чем смысл. Слово «производитель» стоит далеко и визуально не соединено со страной, хотя линия снизу есть.

О второй проблеме. Все элементы одного размера и с одинаковым отступом: цена, характеристики и кнопка. Нет главного элемента, но если характеристик будет больше, они станут главные.

Как применить правило

Связать элементы одинаковые по смыслу или выполняющие похожие действия.

Сейчас главные элементы — цена и кнопка. Слова в характеристиках стоят далеко друг от друга по горизонтали, но сейчас линия выполняет свою функцию.

Еще убрали слова, которые понятны из контекста: «цена» над ценой и обозначение колонок.

Рядом, потому что связано

См. также: правило внутреннего и внешнего и о связи интерлиньяжа и отступов у бюро Горбунова. Относится больше к тексту.

Дубли страниц

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

Из-за чего появляются

Дубли появляются из-за цмс. Когда она плохо настроена, вы можете создать две разные страницы с одинаковым урл, вот вам и дубль. Или одна страница отображается сразу по двум урл: /?p=123 и /dubli, это тоже дубль, но не очень страшный. Если создавать все страницы вручную, дублей не будет.

Какие бывают и как избавиться

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

Если ошибся человек, просто удалите страницу. Если проблема в цмс, изучайте редирект 301 и rel=”canonical”. Редирект перенаправит со страницы дубля на основную. Тег каноникал укажет какая страница является главной, примеряется для категорий с несколькими страницами.

Товар
Возьмем айфон 6. Объем памяти 16, 64 и 128 гб. А еще есть разные цвета. Под каждый параметр можно создать отдельную страницу, но в результате получите кучу одинаковых, где меняется всего 1 слово.

Чтобы страницы были на похожи, создайте одну, но с кнопками: объем памяти, цвет, чехол, пленка. Если любите рисковать и хотите под каждый запрос сделать отдельную страницу — рискуйте.

Сделайте основной контент уникальным: если другой цвет у айфона, загрузите фотографии с этим цветом, больше объем памяти, напишите что на 64 гб поместится 2309 фотографии и можно не париться что закончится память, а просто наслаждаться моментом, а плохие фотки удалить потом.

Ctrl + ↓ Ранее