Дизайн інтерфейсу електронної комерції: Як створювати цікаві сторінки з колекціями товарів (6 дієвих тактик)

Вступ

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

Давайте розглянемо шість дієвих способів створення сторінок колекцій товарів, які залучають, надихають на дії, збільшують трафік і конверсію.

Переконайтеся, що основне фото товару є привабливим

Перша дизайнерська перешкода, яку потрібно подолати на сторінках колекцій товарів, - це забезпечення привабливості та цікавості головної фотографії. Якщо ви не привертаєте увагу покупця практично одразу, як тільки він потрапляє на сторінку, або протягом кількох прокручувань, ви, ймовірно, втратили його.

Почніть з аналізу всього, що ви знаєте про свою цільову аудиторію. Що їм подобається? Чому їм подобаються ваші продукти? Що саме у ваших продуктах їм подобається? Як ви можете поставити ці особливості на чільне місце?

Потім почніть обмірковувати макет. Чи потрібно збільшувати зображення? Чи потрібен їм яскравий або нейтральний фон? Скільки продуктів ви повинні показати в рядку?

В ідеалі, ви повинні провести A/B-тестування декількох варіантів дизайну. Іноді найменші зміни можуть мати вирішальне значення.

Погляньте на цю сторінку колекції дитячого одягу. Продукти самі по собі милі та привабливі, тому їх не потрібно виставляти якимось особливим чином. Етикетка "новинка" чітко виділяє певні товари і гарантує, що покупець зверне на них увагу.

Розміщення таких продуктів на нейтральному фоні - чудовий спосіб виділити їх.

Джерело: mamasandpapas.com

Ще один спосіб зробити головне фото на сторінці колекції привабливим - показати предмет у використанні. Якщо ви подивитеся на цю сторінку з теплицями, то побачите, як це можна зробити без особливих зусиль. Кожне зображення абсолютно різне, в різній кольоровій палітрі і показує предмет під різним кутом. Вони зробили так, щоб ви могли легко уявити продукт у себе вдома.

Джерело: greenhouseemporium.com

Це чудова тактика, якщо ви хочете, щоб клієнту було легше зрозуміти, як виглядатиме кінцевий продукт, і допомогти йому уявити собі цілий стиль життя.

Переконайтеся, що фільтри не надто відволікають увагу

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

Фільтри повинні класифікувати ваші продукти за певними ознаками. Ціна, розмір і матеріал - це лише деякі з найпоширеніших фільтрів. Подумайте про самі продукти і про те, які фактори їх відрізняють.

Чим складніший продукт, тим більше має бути фільтрів. Ви також можете запропонувати корисні фільтри на кшталт "не для новачків" або "тільки для професіоналів", якщо вони допоможуть покупцям вибрати потрібний товар.

Фільтри також не повинні занадто відволікати. Вони повинні бути легкодоступними, але не займати велику частину сторінки і жодним чином не заважати користувачеві під час перегляду.

Погляньте на цю сторінку з колекціями композитної терасної дошки. Зліва представлені фільтри, які забезпечують правильний баланс між тим, щоб бути помітними і не заважати користувачеві. Зверніть увагу, що вони також є розбірними, тому велика кількість інформації не буде перевантажувати покупця.

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

Джерело: Ovaeda.com

Ви можете легко реалізувати подібне рішення, яке не займе багато місця, але при цьому значно покращить користувацький досвід і дозволить клієнтам звузити свій вибір за лічені секунди.

Відображати короткі описи товарів при наведенні

Уявіть собі сторінки колекції товарів як інформаційний центр. Це місце, де ви показуєте всі свої товари в певній категорії. Чим більш корисною буде ваша сторінка, тим більша ймовірність того, що клієнт здійснить конверсію.

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

Чим більше корисної інформації ви зможете відобразити на сторінці колекції, тим краще. Додавши простий, короткий опис товару, коли користувач наводить на нього курсор, ви можете допомогти покупцям порівняти товари прямо зараз.

Ця сторінка колекції баріатричних жувальних цукерок з кальцієм чудово справляється з поставленою задачею. Ви отримуєте короткий опис продукту, де вказано, які вітаміни та мінерали ви можете знайти в ньому. Також підкреслюються переваги: він має чудовий смак, сприяє зміцненню імунітету тощо.

Джерело: Bariatricfusion.com _.

Зверніть увагу, наскільки короткі описи. Ви можете прочитати їх за пару секунд і продовжити порівнювати продукти.

Застосовуючи цю тактику, ретельно продумайте опис при наведенні. Він не обов'язково повинен збігатися з описом на сторінці товару. Він повинен коротко описувати переваги або ключові особливості товару, чітко виділяючи його серед інших товарів на сторінці.

Зосередьтеся на інформативності, а не на підштовхуванні до продажу. Клієнти з більшою ймовірністю здійснять покупку, якщо вони впевнені у своєму виборі.

Додайте соціальні докази

Соціальні докази - чудовий інструмент для того, щоб зробити сторінки більш привабливими та корисними. Вони покажуть вашим клієнтам, що ви заслуговуєте на довіру, надійні і що ваші продукти мають хорошу якість. Це особливо важливо для нових клієнтів, які ще не знайомі з вашим брендом і можуть бути більш нерішучими щодо конверсії.

Соціальні докази бувають різних форм, але зоряні рейтинги - найкорисніший тип доказів, які варто розміщувати на сторінках вашої колекції. Вони слугуватимуть кільком цілям:

• оцінити якість окремого продукту
• показують, скільки клієнтів придбали його і знайшли час на перегляд
• допомагають клієнтам швидше приймати рішення про покупку

Зіркові рейтинги легко врахувати. Подивіться на сторінку колекції палеток тіней Sephora. Їх легко знайти, і вони відображають всю необхідну інформацію: скільки відгуків є і яка загальна задоволеність товаром. Ви також можете чітко побачити, що одна з цих палітр набагато популярніша за інші.

Джерело: sephora.com

Ще одним чудовим соціальним сигналом, який варто розмістити на сторінках вашої колекції, є сповіщення про розпродажі в режимі реального часу.

Перевірте цю сторінку з наклейками для ноутбуків на замовлення. Під час перегляду в правому нижньому куті з'являється ненав'язливе спливаюче вікно, яке повідомляє, хто здійснив покупку на сайті, звідки він і що він купив.

Це чудовий спосіб додати трохи FOMO до вашої маркетингової тактики. Клієнтам будуть показані інші товари, товари, які явно користуються популярністю, тому що хтось їх щойно придбав. Це також надішле сильні сигнали довіри та надійності.

Переконайтеся, що спливаюче вікно не надто кричуще і не відволікає увагу. Крім того, спробуйте розставити їх так, щоб вони не починали дратувати покупців.

Джерело: vinylstatus.com

Відображати кілька переглядів продукту

Чим краще клієнти зможуть побачити товар, тим вищі шанси, що вони здійснять покупку. Чим більше зображень товару ви покажете на сторінці колекції, тим більшу зацікавленість і інтерес ви викличете.

Ви можете об'єднати кілька зображень кількома способами. Ви можете дозволити прокрутку галереї товарів або показати іншу фотографію при наведенні курсору миші.

Ця сторінка одягу для хлопчиків від H&M має прокручувану галерею товарів. Ви можете побачити всі фотографії, які представлені на сторінці окремого товару, прямо зі сторінки колекції, тому вам ніколи не доведеться переходити на іншу сторінку.

Джерело:hm.com

Якщо ви віддаєте перевагу тому, щоб при наведенні показувалася інша фотографія, загляньте на сторінку цієї колекції жіночого пляжного одягу для натхнення. Бренд розумно показує задню частину виробу при наведенні, щоб ви могли побачити весь виріб без необхідності відкривати іншу сторінку. Це чудова тактика для брендів одягу.

Джерело:simplybeach.com

Вибираючи, чи додавати галерею або фото при наведенні, враховуйте характер товару. Скільки фотографій повинен побачити покупець? І якими мають бути ці фотографії?

Ви можете показати товар у використанні або розмістити фотографії покупця, якщо вони можуть вплинути на нового покупця. Ви можете показати товар зблизька або навіть перерахувати його характеристики.

Показати нещодавно переглянуті елементи

Рекомендації до товарів зазвичай зарезервовані для окремих сторінок товарів. Тут же бренди розміщують карусель "нещодавно переглянуті".

Однак, розмістивши його на сторінці колекції, ви можете м'яко нагадати покупцям про товари, які вони вже бачили і які їм сподобалися. Заощаджуйте їхній час і зусилля, щоб повернутися до їхньої історії, коли у них одночасно відкрито багато вкладок.

Перегляньте сторінку чоловічих кросівок Adidas. Щойно ви переглянете окремий товар, внизу сторінки колекції з'явиться функція "нещодавно переглянуті", яка допоможе вам стежити за товарами, що викликали у вас інтерес.

Джерело: adidas.com

Така ж карусель також присутня на окремих сторінках продуктів, що робить перегляд індивідуально адаптованим.

Ви також можете рекомендувати товари покупцям на основі переглянутих ними позицій, так само, як і на сторінках товарів.

Підбиваємо підсумки.

Подумайте, які з цих тактик дизайну сторінок колекцій товарів ви можете застосувати на своїх сторінках. Можливо, всі шість можуть зіграти певну роль у підвищенні вашої конверсії.

Завжди пам'ятайте про характер вашого продукту(ів) та больові точки вашої аудиторії. Що вони шукають, і як ваш дизайн може допомогти їм це знайти?