Превью макета что это
Превью: что это значит и как работает
Что такое превью
Начнём с того, что такое превью. Это, заставка или обложка для предварительного просмотра, в которой отражена вся суть материла. Чаще всего превью применяется в качестве обложки для Ютуб, как рекламная заставка для очередного ролика. На самом деле, превью действительно можно считать импровизированной рекламой.
Согласитесь, что внешний вид побуждает нас либо купить тот или иной продукт, по его внешнему виду или нет. Опытные интернет-маркетологи прекрасно знают об этой психологии человека. Поэтому стараются сделать так называемую «оболочку» товара как можно более привлекательной.
Просто понаблюдайте за собой: желание купить книгу красивой обложкой и захватывающим предисловием намного больше, нежели со стандартным рисунком. Аналогичным способом мы выбираем не только видеоролики с провокационными названиями и интригующими заставками, но и вещи для повседневного использования. Продукты питания, одежду, бытовую химию.
Каждый бренд старается сделать упаковку для своей продукции как можно более красивой и привлекательной. Для этого у известных компаний даже есть специальный отдел с опытными специалистами в маркетинге. Для них внешний вид продукции, по важности стоит на ровне с комплексным SEO продвижением и раскруткой сайта, поэтому его разработке уделяется особое внимание.
Что такое превью для видео на Ютубе
Мы уже застрагивали тему превью для видео, но сейчас мы поговорим, о том, что это такое более подробно. Как уже говорилось ранее, это миниатюра, которая ставится в качестве обложки ролика на каком-либо канале.
Так как это отличный маркетинговый ход для привлечения просмотров и подписчиков, видеоблогеры подходят к разработке обложки очень серьёзно. Многие даже пользуются услугами веб-дизайнеров, кто профессионально подходит к этому делу и на основе интересов аудитории и специфики контента создаёт уникальное превью.
Чтобы превью для видео было действительно качественным и привлекало пользователей, важно помнить несколько правил. Самое главное – это качественное изображение. Если в макете превью есть текст или эмоджи, обязательно выделите их с заднего фона, дабы пользователь первым дело обратил внимание именно на них.
Конечно же, суть обложки должна соответствовать структуре видео, то есть о чём пойдёт речь. Здесь действует принцип дезинформации на сайте. То есть если название страницы не будет соответствовать поисковому запросу, отказы в Яндекс Метрике, это первое, что начнёт стремительно увеличиваться. Конверсия и посещения будут уменьшаться и поисковые системы, видев всю ситуацию, понизят сайт в позициях.
Если цель превью для ролика – прославить собственную персону или прорекламировать какой-либо бренд. Своё фото или фото продукта для рекламы нужно ставить на видном месте, крупным платом, можно даже подчеркнуть, выделив рамкой. Текст видео всегда должен быть цепляющим, дабы убедить пользователя срочно посмотреть этот ролик и перейти на контент блогера или сайт рекламируемого бренда.
Что такое превью фотографий
Аудиторию скорее интересует, не что такое превью фотографий, а как создать превью-фотографию для привлечения пользователей. Особенно эта тема интересна тем, кто задумал вести бизнес-аккаунт в Инстаграм, как импровизированный сайт для бизнеса. Конечно, заниматься массфолловингом, это первое, что нужно для продвижение аккаунта. Но чтобы удержать пользователя и сделать его своим подписчиком, необходимо привлечь его.
А сделать это получится, только если превью аккаунта вызовет у него неподдельный интерес. Для этого можно выбрать либо самую удачную личную фотографию и поставить хештег своего аккаунта. Либо выбрать абстракцию, отражающую структуру аккаунта, например красивый товар, который продаётся у Вас.
Что такое превью макета
Существует так же превью вкладок, что это такое, сейчас расскажем. Итак, превью макета, это, по сути, изображение, в котором отражена суть проекта, то есть его «лицо». Обычно превью макета служит для утверждения на печать, если мы говорим о том, создании баннера, как рекламы.
Блог нашего сайта можно взять как ещё один показательный пример превью, и как это работает. Не будем открывать всех секретов разработки обложки для каждой статьи, но знаем одно – это привлекает посетителей. Каждое превью на материал блоге разрабатывается дизайнером, дабы сделать его уникальным. Специально для наших статей была разработана рамка для большего эффекта.
Как можно заметить, в превью публикации отражается её тема, то есть о чём пойдёт разговоров. Если рассуждения пойдут на тему эффективного продвижения под Яндекс, то наш специалист находится соответствующее изображение и моделирует саму миниатюру.
Про все тонкости и особенности создания продающего превью не рассказывают даже в самые опытные коучеры, что (/articles/help/koucher-kto-eto-i-chem-on-zanimaetsya) делает разработку обложек более сложной. Но те, кто постигают эти знания и понимают общий алгоритм процесса, зарабатывают на это не хуже, чем на обучении SEO с нуля, или раскрутке какой-либо личности.
Что ж, сегодня мы обсудили всё, что связано с превью, определили, что это такое и как его грамотно разработать, чтобы привлечь аудиторию не только на контент на Ютубе, но и на сайт или блог. На самом деле, превью так же важно для оформления роликов или статей, как микроразметка для сайта. Поэтому этому атрибуту в маркетинге нужно уделять должное внимание.
2. Подготовка и отправка макетов в печать
Сделали макет и можно налить чаек и сесть смотреть сериалы? Ан-нет 🙂 Необходимо макеты подготовить к отправке и написать в группу ТЗ заказа. А после всего этого нужно залить все материалы в облако, об этом написано в главе 3. Работа с облаком
2.1. Резка макетов для ПВД
Для отправки макетов в печать, их сначала необходимо подготовить. Подготовка макета заключается в разбивке его на составные части, так чтобы эти части целиком влезали в формат А4.
Если макет для печати 2х или более цветный, то необходимо каждый цвет вынести на отдельный лист А4, и в письме указать на какой странице какой цвет (так как макет в печать должен иметь глубокий черный цвет независимо от того, какой цвет заказал клиент, даже если цветов несколько).
Пример технического задания:
Размер: 20х30
Цвет пакета: Белый
Цвет нанесения: 2 цвета (красный, зеленый)
Плотность: 70 мкр
Тираж: 300 штук
2.2. Превью макетов
Превью — это картинка JPG либо PNG отображающая то, как должно выглядеть готовое изделие, не обязательно в точности. Превью необходимо что-бы просверлить отверстие в бирке, либо чтобы правильно собрать макет для ПВД из листов А4.
Превью для бирок
Для бирок необходимо создать превью с указанием места сверления (окружность с диаметром 5мм), если макет маленький, то отверстие 3мм. Макет считается маленьким если он меньше 40 мм в высоту и 70 мм в ширину. В таком случае в примечании к печати (в беседе в WhatsApp) необходимо обязательно приписать, что сверление 3 мм сверлом. Никакие мокапы делать не надо.
Превью для ПВД
Превью для пакетов «Майка»
Для маек можно как разместить макет на мокапе, так и просто в кореле сделать грубый пример пакета майка, и сохранить аналогично, как сохраняли превью для ПВД.
2.3. Запись в группу WhatsApp
После того как макеты подготовлены и залиты в облако (3. Работа с облаком) необходимо скопировать содержание задачи с битрикса в специальную группу в вацап, это действие говорит, что клиент одобрил макет и он лежит в облаке. Печатники заберут макет с облака и уже сделают свою часть работы.
2.4. ЧаВо (Частые вопросы)
Кривая, она же вектор — элемент макета, который не теряет качества при увеличении/уменьшении макета. Макеты для печати методом шелкографии (ПВД, крафт, шарики) и флексоформы (майки, сувенирная продукция, пришивные этикетки, скотч) должны быть обязательно в кривых.
Необходимо открыть папку с шаблонами PSD и вставить макет клиента в шаблон, далее просто подогнать по размеру.
Как сделать превью
Думаю, многие из вас уже сталкивались с вопросом о том, как качественно и красиво подавать свои проекты. Это могло потребоваться не только в процессе работы, но и для создания вашего портфолио, о роли которого уже было рассказано в статье «Портфолио графического дизайнера».
Несомненным плюсом реалистичного превью макета является наглядность конечного результата. Часто, когда заказчик видит макет, сохраненный в формате *.jpg, он не совсем понимает, как это будет выглядеть в итоге, и может отвергнуть даже очень хорошие идеи.
Подумайте сами, что смотрится намного привлекательнее: плоскостное изображение макета или же фотореалистичная картинка с уже готовой продукцией? Думаю, ответ очевиден.
Поэтому мой вам совет – потратьте лишнее время, чтобы показать удачность решения поставленной перед вами задачи. Это еще один «балл» в вашу пользу.
Не думайте, что превью сделает за вас всю работу по убеждению заказчика, оно является очень сильным вспомогательным средством для отстаивания и аргументирования вашей позиции.
В данном уроке я покажу на примере буклета с двумя фальцами один из способов создания шаблона для изготовления превью. Почему шаблона? Потому что в дальнейшем его будет возможно использовать для быстрого создания изображения аналогичных буклетов.
Итак, с чего мы начнем?
Шаг 1. Правильная перспектива.
Очень важно для создания фотореалистики, чтобы при просмотре картинки не возникала мысль, что «что-то не так». Поэтому очень щепетильно следует отнестись к построению перспективы вашего продукта, он должен выглядеть максимально натурально.
Если вы счастливый обладатель художественного образования или просто знакомы с законами построения перспективы, то смело можете начинать ее рисовать. В случае отсутствия этих знаний предлагаю обратиться к поисковикам по картинкам или к фотоаппарату.
Я выбрала вариант с фото: разложила буклеты так, как мне показалось, они неплохо будут смотреться, и сделала снимок.
Теперь открываем Photoshop и создаем новый документ со следующими настройками:
Размещаем сделанные снимки на рабочем пространстве. В соответствие с моей задумкой, вот что у меня получилось:
Теперь начинаем обрисовывать наш буклет. Для этого выбираем инструмент Прямоугольник (Rectangle Tool) и проверяем его настройки: мы должны рисовать Слой-Фигуру (Shape layers) заданного размера (Fixed size) – 100х214 мм.
Одиночным щелчком мыши размещаем наш прямоугольник на рабочей области и трансформируем его под размер одной стороны буклета. Для этого, выделив слой с прямоугольником, нажимаем сочетание клавиш Ctrl+T и выбираем из контекстного меню (клик правой кнопкой мыши в области фигуры) пункт Искажение (Distort).
Далее совмещаем вершины прямоугольника с углами одного из разворотов буклета и принимаем трансформацию, нажав Enter. Теперь сделаем стороны плавными. Из группы инструментов Перо (Pen Tool) выбираем Инструмент «Угол» (Convert Point Tool), щелкаем по контуру фигуры, чтобы его выделить, выбираем узел, который будем редактировать и, не отпуская кнопку мыши, тянем за него, чтобы вытащить маркеры управления. Взяв отдельный маркер и зажав клавишу Alt, подгоняем наш контур под очертания буклета.
По аналогии добавляем еще две стороны, чтобы получился разворот. Во избежание путаницы в дальнейшем, я создала группу «Разворот» и поместила туда все созданные слои. Теперь у нас есть основа буклета.
Шаг 2. Свет и тень
Как известно, без света и тени нет объема. Поэтому давайте добавим несколько эффектов, чтобы будущие странички каталога выглядели более реалистично.
В палитре слоев щелкаем правой кнопкой мыши по одной из сторон буклета и в контекстном меню выбираем Параметры наложения (Blending Options), откроется окно Стиль слоя (Layer Style). В нем выбираем Тень (Drop Shadow) и Наложение градиента (Gradient Overlay) с такими параметрами:
Копируем стиль слоя на две оставшиеся стороны с помощью контекстного меню (правый клик мышью на нужном слое в палитре слоев), изменяя при этом угол наложения градиента, чтобы тень смотрелась естественно. Для центрально фрагмента он получился равным 15°, а для правого 19°. Также для правой стороны нужно немного отредактировать градиент, чтобы ползунок со значением непрозрачности 0% был смещен влево. В итоге получаем вот такое изображение:
Теперь добавим тень непосредственно под сам буклет, используя инструмент Перо (Pen Tool). В настройках переключаем рисование с Контура (Paths), которое стоит по умолчанию, на Слой-фигуру (Shape layers) и изображаем примерно следующее:
Перемещаем созданную тень под буклет и растрируем (правый щелчок на слое и выбор команды Растрировать слой – Rasterize Layer). Выбираем инструмент Ластик (Eraser Tool) с четкими краями, размером примерно 40-50 px и непрозрачностью (Opacity) 30%, и делаем нашу тень менее насыщенной. Затем сглаживаем ее края инструментом Размытие (Blur).
Шаг 3. Смарт-объекты
Теперь давайте создадим слои с редактируемым содержанием, которое возможно будет изменять в дальнейшем независимо от остального макета, — так называемые смарт-объекты (Smart Object).
Снова обратимся к инструменту Прямоугольник (Rectangle Tool), его настройки у вас сохранились (Слой-Фигура (Shape layers) заданного размера (Fixed size) – 100х214 мм). Одиночным щелчком мыши размещаем наш прямоугольник на рабочей области и преобразовываем его в смарт-объект (правый клик мышью на слое в палитре слоев и выбор команды Преобразовать в смарт-объект – Convert to Smart Object).
Не снимая выделения с этого слоя, нажимаем Ctrl+T и из контекстного меню (клик правой кнопкой мыши в области фигуры) выбираем пункт Искажение (Distort). Совмещаем вершины прямоугольника с углами одного из разворотов буклета. Не нажимая Enter, опять вызываем контекстное меню и выбираем пункт Деформация (Warp). Используя появившиеся маркеры управления, делаем наш слой близким по форме к выбранной стороне буклета. Принимаем трансформацию нажатием Enter.
Предварительно поместив смарт-объект над слоем соответствующей стороны буклета, изменим режим наложения смарт-слоя на Умножение (Multiply) и, вызвав контекстное меню, выберем команду Создать обтравочную маску (Create clipping mask).
По аналогии создаем еще 2 смарт-объекта для двух оставшихся сторон.
Если буклет покажется недостаточно контрастным, то можно добавить еще немного тени к местам сгиба. Для этого скопируйте нарисованную в самом начале сторону буклета, поместив ее над соответствующим смарт-слоем, измените в свойствах слоя значение заливки (Fill) на 0%, отключите тень и редактируйте градиент следующим образом (цвет градиента не меняется):
Шаг 4. Наводим марафет
Теперь дело осталось за самым малым – добавить содержимое буклета. Двойным щелчком на значке слоя открываем файл смарт-объекта и помещаем в него существующий макет. С помощью Ctrl+S сохраняем изменения и закрываем наш файл.
Чтобы наш буклет не висел в воздухе, делаем для него подложку. Очень ВАЖНО, чтобы фон соответствовал общей перспективе. Поэтому лучше всего выбрать что-то более-менее нейтральное.
Все сохраняем и наслаждаемся проделанной работой:
Надеюсь данный урок будет для вас полезен. Если будут желающие получить исходник — добавлю ссылку для скачивания. Просьбу об этом можно оставить в комментариях.
На этом статья подходит к своему завершению.
Оформление листинга и превью товаров в интернет-магазине: 7 ключевых правил UX
Всем привет! Меня зовут Максим Жуков, я из Kislorod. Специализируемся на разработке и развитии e-commerce проектов.
Недавно рассказывали, как прокачать поиск на сайте, чтобы увеличить конверсию. Статья собрала много положительных отзывов в профсообществе, поэтому решили продолжить.
Сегодня публикуем новый материал из внутренней базы знаний — обо всём, что касается правильной работы с листингами. Вы узнаете, почему важно уделить внимание листингам товара с точки зрения UX, что обязательно должно быть в превью карточек товаров, почему стоит избегать функционала «Быстрый просмотр» и чем его заменить.
Перед чтением рекомендуем подписаться на наш телеграмм-канал, в котором мы делимся опытом точечного увеличения конверсий в клиентских проектах, исследованиями, гипотезами и наблюдениями. Подписались? Тогда поехали.
Листинг товаров в интернет-магазине — это страница со списком позиций категории. Позиции представлены в виде превью, при нажатии на которое посетитель попадает в карточку товаров.
Листинги — одни из самых важных страниц интернет-магазина, на них покупатель получает первую информацию о товарах.
Важно грамотно оформлять листинги для:
удобства пользователей — чтобы помогать быстрее сравнивать и находить нужные товары. Это работает на увеличение конверсии.
Страница листинга обычно включает сетку товаров, полезный функционал, превью карточек товаров, иногда — дополнительные элементы.
Сетка — это количество столбцов и строк с превью товаров. Чаще всего используется 3-5 столбцов. Если актуально показывать большую фотографию и выводить в превью много характеристик, то разумно делать крупные превью — соответственно, столбцов будет меньше. О балансе размеров превью товаров и их количестве в сетке мы еще поговорим.
На скрине выше показано отображение товаров плиткой. В верхнем правом углу реализован функционал выбора размера превью.
Иногда реализуют отображение товаров списком или таблицей — это зависит от специфики интернет-магазина. Подробнее расскажем об этом в следующий раз.
На одну страницу обычно выводят от десяти до сорока позиций. Если товаров много, нужно реализовать пагинацию — переключение страниц.
Можно реализовать возможность перехода на определенную страницу, как на ozon.ru
Отображать более сотни товаров на странице не стоит — это снизить скорость загрузки. А динамическая подгрузка товаров может негативно сказаться на индексации. Вариант — комбинировать пагинацию и динамическую подгрузку по нажатию на кнопку «Показать ещё».
Создавать страницу листинга для категории с малым количеством товаров нет смысла. В ТОП попадают страницы с хорошим ассортиментом — поэтому при выборе количества отображаемых позиций важно ориентироваться и на конкурентов. О решении расскажем ниже — в блоке про оптимизацию листингов.
Применение полезного функционала в листинге улучшает пользовательский опыт и помогает быстрее находить нужные товары — без необходимости многократно перемещаться из списка товаров в карточки и обратно.
Возможные решения для удобства пользователя:
О фильтрации и о сортировке подробно рассказали в этой статье, остальные нюансы рассмотрим ниже.
Превью — первое, на что обращает внимание пользователь. Это ключевой элемент листинга, разрабатывая который нужно учесть важный нюанс.
Поэтому важно соблюсти баланс — превью товаров должно отображать не максимальное, но достаточное количество информации, чтобы листинг не был перегружен, а пользователи видели доступные варианты.
Если в превью не выводится необходимая для сравнения информация (размер, варианты расцветок) пользователю приходится постоянно перемещаться со страницы категории в карточку товара и обратно для уточнения деталей. По результатам исследований Baymard Institute, 42% сайтов отображают недостаточно информации о товарах в листинге, и пользователи не могут понять, стоит ли им изучать карточку товара.
Можно выделить две группы характеристик для отображения в превью списка товаров: универсальные и индивидуальные для разных категорий.
Универсальные характеристики должны отображаться в превью товара всегда, независимо от специфики интернет-магазина. К ним относятся:
Изображение — важнейший элемент превью. Товары без изображений игнорируют, расценивая как отсутствующие, а их отображение в листинге — как баг. Вследствие этого доверие к интернет-магазину падает.
С помощью слайдера в превью можно показать качественные изображения в разных ракурсах.
Продумывая, какие изображения будут сопровождать товары, учитывайте специфику ниши и потребности пользователей. В сферах, где важна визуальная составляющая (одежда, декор) хорошо работает комбинация изображений: использование товара в быту и товар крупным планом на нейтральном фоне.
Мы проводили исследование пользовательского опыта покупки матрасов в онлайне. Испытуемым важно было увидеть содержимое матраса — это облегчало выбор товара.
Важно, чтобы фотографии товаров в списке были в единой визуальной стилистике — разный формат изображений раздражает пользователей.
Название и тип товара
Иногда можно использовать только название, но если оно не передает суть, лучше указывать и тип товара. Например, названия «Тинейджер» или «Черепашки Ниндзя» не говорят о том, что продается комплект детского постельного белья, поэтому тип товара указан перед названием.
В случае больших или смешанных каталогов трудно определить, передает ли суть название каждого товара — лучше сразу использовать и тип, и название.
Стоимость имеет решающее значение для пользователя — как с точки зрения оценки каждого товара в отдельности, так и для сравнения товаров друг с другом. Большинство интернет-магазинов отображают цену в превью, но бывают исключения.
Если стоимость товара изменилась, то в превью стоит отображать новую цену и перечеркнутую старую, размер скидки.
Если товар продается не поштучно или метрами, а упаковкой, нужно выводить цену не только за упаковку, но и за единицу товара или метр — для удобства сравнения.
Это актуально не только для сегмента DIY, но и для e-grosery. Продавая бананы, указывайте цену за 1 банан и за 1 кг. Или хотя бы вес банана для ориентира.
Возможные цвета, размеры и материалы лучше отображать в превью товара. Не видя вариаций позиции в общем списке товаров, пользователи могут решить, что подходящего товара нет, пропустить искомую вариацию в общем листинге.
Индивидуальные характеристики присущи определенным категориям товаров. К ним могут относиться:
Пользовательские рейтинги — обязательный элемент для ниш, в которых посетителю сложно самому определиться в многообразии выбора. Особенно это свойственно товарам из сегмента электроники и бытовой техники.
Выбирая товары из списка для дальнейшего изучения, пользователи часто полагаются на оценки других пользователей, если не сильно разбираются в товарах. Важно показывать как среднюю оценку рейтинга, так и количество оценок, на которых основано среднее значение. Пользователи считают среднее значение рейтинга бесполезным, если количество оценок не указано.
Совместимость с другим товаром
Информация о совместимости товаров актуальна в технических категориях. Пользователям удобно видеть совместимость товаров и продуктов без перехода в карточку. Для визуального отображения совместимости можно использовать изображения — показывать крупным планом разъемы и соединения комплектующих. Иногда достаточно текстового указания, как в примере ниже:
Без отображения диагонали ноутбука в превью, пользователям придется каждый раз заходить в карточку товара, чтобы понять, подойдет ли сумка к ноутбуку.
Габариты тоже говорят о совместимости товаров. Если пользователь хочет купить сумку к ноутбуку, он может захотеть узнать размеры сумки.
Актуальны, если покупатель приобретает товар в подарок — в превью можно указать для кого предназначен товар. Например, возраст ребенка, на который рассчитана игрушка.
Актуально для товаров, которые используются в особых условиях. Например, защитное снаряжение, оборудование для охоты и рыбалки. Для удобства сравнения нужно отобразить в превью карточки товара важные характеристики.
Код или артикул товара
Актуально отображать в нишах, где ищут конкретные модели.
Чтобы вывести все важные характеристики в превью, но не перегружать их, используйте минимум текста и по возможности заменяйте текст иконками. Дэвид Льюис в книге «Нейромаркетинг в действии» утверждает, что информацию, представленную в виде образов, на 20% легче осмыслить, чем информацию, представленную словами.
На скриншоте ниже — превью, которые мы разработали для винотек Grape. В этой нише для покупателей кроме внешнего вида бутылки и этикетки, имеют значение следующие характеристики: цвет, содержание сахара, страна и регион, год разлива, объем.
Чтобы упростить восприятие и избежать перегруженности, мы не отображали в превью названия характеристик — вроде «Страна» или «Объем бутылки» — а сразу указывали характеристику. Пользователю и так понятно, что Грузия — это страна, в которой произведено вино, а 0,7 литра — объем бутылки. Где это возможно заменили текст иконками. В итоге превью получились информативными и в то же время не перегруженными.
Используя визуальное представление характеристик, убедитесь, что оно будет понятно пользователям. В нашем исследовании опыта покупки матрасов в онлайне испытуемые должны были найти матрас с заданной жесткостью. На одном из сайтов обозначение жесткости выглядело так:
Пользователи не понимали, что эти частично закрашенные кружки означают жесткость. Название характеристики «Жесткость» появлялось только при наведении на изображение курсора.
На другом сайте сложностей у пользователей не возникло — визуальное отображение жесткости было понятным, сопровождалось текстом «низкая жесткость», «средняя жесткость», «высокая жесткость» и «разная жесткость».
Функция быстрого просмотра популярна: ее используют 48% из 50 изученных Baymard Institute интернет-магазинов. Во многих статьях вы встретите информацию о пользе этого функционала. Почему мы рекомендуем использовать быстрый просмотр с осторожностью?
В исследованиях Baymard Institute, функционал оказался полезным для испытуемых только в одном случае — когда изображения товара были слишком маленькими. Нужно понимать, что функция «Быстрый просмотр» — это зачастую лишь костыль для интернет-магазинов с плохой реализацией листинга товаров, разработчики которых не читали эту статью 🙂
На первый взгляд, внедрение функционала кажется отличной идеей — пользователь может детальнее рассмотреть товар и получить дополнительные сведения о нем, не покидая общий список товаров в категории.
Но быстрый просмотр — не лучшее решение в плане UX, так как требует лишних действий: клика и ожидания загрузки модального окна.
Более того, быстрый просмотр отображает характеристики товара, изображения и даже кнопку «Купить», поэтому некоторые пользователи принимают его за карточку товара в каталоге. Если такой пользователь не находит в «Быстром просмотре» нужную информацию о товаре, то думает что на сайте ее нет, или что этот товар ему не подходит.
Чаще всего это происходит потому, что пользователи случайно открывают быстрый просмотр при желании перейти в карточку товара, особенно если кнопка размещается в середине изображения.
Если вы все-таки хотите реализовать функцию быстро просмотра, сделайте это грамотно, как на сайте lamoda.ru:
Если нужно показать пользователю больше изображений товара или отобразить больше характеристик, вместо быстрого просмотра мы рекомендуем использовать альтернативное решение — отбражение дополнительной информации о товаре при наведении курсора на превью.
Таким образом мы убиваем двух зайцев — пользователь может сравнивать товары в категории по важным для него характеристикам, при этом мы не перегружая интерфейс, сохраняя баланс.
Согласно исследованиям Baymard Institute, отображение дополнительной информации о товарах из списка при наведении курсора сокращает время изучения нерелевантных товаров и увеличивает время изучения релевантных, что приводит увеличению конверсии.
Особенно полезна функция, если:
Не заставляйте пользователя совершать лишнюю работу по переходу в карточки товаров и обратно в список. Дайте возможность добавлять товары в сравнение, избранное или корзину и удалять их оттуда, не покидая список.
Важно давать доступ к избранному даже незарегистрированному пользователю — хотя бы на одну сессию.
И еще один момент: позаботьтесь о том, чтобы изображение функционала было очевидным для пользователей. В нашем исследовании опыта покупки матрасов в онлайне не все испытуемые находили функционал сравнения, даже если возможность была предусмотрена в превью — так как его обозначение было неочевидным.
Учтите, что отображение в каждом превью кнопок «Добавить в избранное», «Добавить в корзину» и «Сравнить» может загромождать листинг товаров интернет-магазина и смещать фокус с важной информации о товаре. Их также можно отображать при наведении курсора. Это уменьшает визуальную нагрузку в списке товаров, не ограничивая его функциональность.
Отображение кнопок при наведении не усложняет их поиск, так как происходит само по себе при перемещении по списку и случайном наведении на превью любого товара.
Блок с альтернативными товарами может заинтересовать пользователя, если он не найдет товар с желанными характеристиками. Предлагайте товары из разных категорий, чтобы познакомить посетителей с возможными решениями и увеличить вероятность покупки.
Блоки товарных рекомендаций работают на увеличение среднего чека и конверсии, если они формируются на основе данных о пользователе — его предпочтений и истории покупок.
Давайте возможность перейти к категории заинтересовавших товаров.
Можно облегчить пользователю выбор, добавив блок с тегами, основанными на распространенных запросах посетителей. Подробнее о том, как правильно реализовать функционал тегирования, поговорим в следующей статье.
Когда пользователь хочет приобрести несколько совместимых товаров, то зачастую после добавления основного товара в корзину возвращается к листингу как к отправной точке для поиска остальных товаров. Но найти уже добавленный в корзину товар иногда тяжело, так как товары одной категории часто описываются и выглядят похоже. Например, если речь идет о ноутбуках одного бренда, быстро отличить просмотренные от непросмотренных не получится.
Аналогичная проблема возникает, когда пользователь хочет посетить карточку добавленного товара повторно, чтобы найти перечень аксессуаров или совместимых товаров. Или добавить другие похожие товары в корзину для сравнения.
Чем быстрее пользователь найдет исходный товар, тем быстрее начнет искать и оценивать другие товары. Если найти уже добавленные продукты и сориентироваться в списке проблематично, то у пользователя не останется времени и желания изучать дополнительные товары, которые он потенциально мог бы купить.
Мы рекомендуем сделать так, чтобы продукты, добавленные в корзину, избранное и в сравнение выделялись в списке товаров — пользователям будет легче находить добавленные товары при повторном просмотре категорий и результатов поиска. Во втором случае это особенно важно, поскольку любые изменения в поисковом запросе изменят порядок результатов — найти товар по его исходной позиции будет нельзя.
Превью уже добавленной в корзину позиции может включать ссылки на дополнительные товары, отображать дату доставки. Эти различия в содержании и возможностях обеспечат визуальный контраст с превью других товаров, избавляя от необходимости выделять их с помощью меток, цветов, границ или фона.
Выделить уже просмотренные товары можно еще проще — использовав для них другой цвет текста. Это помогает пользователям не тратить время на повторный просмотр продуктов.
Также можно реализовать блок с недавно просмотренными товарами — помогает пользователям быстро вернуться к просмотренным товарам.
От грамотно оформленных листингов и превью товаров выиграют и пользователи, и ваш бизнес. Внедряйте новые решения поэтапно и не забывайте проводить А/Б тестирование, чтобы убедиться в целесообразности изменений и достичь максимальной конверсии
В следующий раз поговорим о 18 решениях, которые сделают фильтрацию товаров в каталоге максимально удобной для пользователя. Чтобы не пропустить статью, подписывайтесь на этот блог или наш телеграмм-канал.
Ставьте лайк (+1), если было полезно. Вам несложно — нам приятно 😉