• Електронна търговия и дизайн на потребителски интерфейс (UI)

Дизайн на потребителски интерфейс за електронна търговия: Как да създаваме привлекателни страници с колекции от продукти (6 приложими тактики)

  • Felix Rose-Collins
  • 6 min read
Дизайн на потребителски интерфейс за електронна търговия: Как да създаваме привлекателни страници с колекции от продукти (6 приложими тактики)

Въведение

Страниците с продуктови колекции за съжаление често се пренебрегват както от дизайнерите, така и от копирайтърите. Докато за създаването на изключително интересни продуктови страници и целеви страници се полагат много усилия, страниците с колекции остават на заден план и са крайно безинтересни.

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

Уверете се, че основната снимка на продукта е интересна

Първото препятствие пред дизайна на страниците с колекции от продукти, което трябва да се преодолее, е да се гарантира, че основната снимка е привлекателна и интересна. Ако не успеете да привлечете вниманието на купувача практически веднага след кацането му или в рамките на няколко превъртания, вероятно сте го изгубили.

Започнете, като обмислите всичко, което знаете за целевата си аудитория. Какво харесват те? Защо харесват вашите продукти? Какво им харесва във вашите продукти? Как можете да поставите тези характеристики на преден план и в центъра на вниманието?

След това започнете да обмисляте оформлението. Трябва ли изображенията да се увеличават? Изискват ли ярък или неутрален фон? Колко продукта трябва да покажете в един ред?

В идеалния случай ще тествате няколко варианта на дизайна. Понякога най-малките промени могат да доведат до най-голяма разлика.

Разгледайте тази страница с колекция бебешки дрехи. Самите продукти са симпатични и интересни, така че не е необходимо да бъдат показвани по някакъв особено оригинален начин. Етикетът "ново в" ясно отличава някои продукти и гарантира, че купувачът ще ги забележи.

Запознайте се с Ranktracker

Универсалната платформа за ефективна SEO оптимизация

Зад всеки успешен бизнес стои силна SEO кампания. Но с безбройните инструменти и техники за оптимизация, от които можете да избирате, може да е трудно да разберете откъде да започнете. Е, не се страхувайте повече, защото имам точно това, което ще ви помогне. Представяме ви платформата Ranktracker "всичко в едно" за ефективна SEO оптимизация

Най-накрая отворихме регистрацията за Ranktracker напълно безплатно!

Създаване на безплатен акаунт

Или влезте в системата, като използвате данните си

Поставянето на подобни продукти на неутрален фон е чудесен начин те да изпъкнат.

mamasandpapas

Източник: mamasandpapas.com

Друг начин да направите основната снимка на страницата на колекцията интересна е да покажете предмета в употреба. Ако погледнете тази страница с оранжерии, ще видите как това може да се осъществи без усилие. Всяко изображение е напълно различно, в различна цветова палитра и показващо елемента от различен ъгъл. Те са направили така, че лесно да си представите продукта в собствения си дом.

greenhouseemporium

Източник: greenhouseemporium.com

Запознайте се с Ranktracker

Универсалната платформа за ефективна SEO оптимизация

Зад всеки успешен бизнес стои силна SEO кампания. Но с безбройните инструменти и техники за оптимизация, от които можете да избирате, може да е трудно да разберете откъде да започнете. Е, не се страхувайте повече, защото имам точно това, което ще ви помогне. Представяме ви платформата Ranktracker "всичко в едно" за ефективна SEO оптимизация

Най-накрая отворихме регистрацията за Ranktracker напълно безплатно!

Създаване на безплатен акаунт

Или влезте в системата, като използвате данните си

Това е чудесна тактика, ако искате да улесните клиента да види как ще изглежда крайният продукт и да му помогнете да си представи целия начин на живот.

Уверете се, че филтрите не са прекалено разсейващи

За да бъдат полезни, страниците с колекции изискват филтри. От клиентите не може да се очаква да преглеждат страници с продукти, за да намерят един конкретен артикул. Те вероятно няма да са наясно с широкия спектър на вашата оферта и може да нямат време за продължително пазаруване.

Филтрите трябва да категоризират продуктите ви по смислен начин. Цената, размерът и материалът са само някои от най-често използваните филтри. Помислете за самите продукти и за това кои са разграничителните им фактори.

Колкото по-сложен е продуктът, толкова повече филтри трябва да има. Можете да предложите и полезни такива като "не е за начинаещи" или "само за професионалисти", ако те ще помогнат на клиентите да изберат правилния артикул.

Филтрите също така не трябва да отвличат вниманието. Те трябва да са лесно достъпни, но да не заемат голяма част от страницата и по никакъв начин да не пречат на сърфирането.

Разгледайте тази страница с колекции от композитни дъски за настилка. Филтрите са представени вляво и са в правилния баланс между това да се забелязват лесно и да не пречат. Обърнете внимание, че те също така са сгъваеми, така че огромното количество информация няма да затрупа клиента.

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

Ovaeda

Източник: Ovaeda.com

Можете лесно да приложите подобно решение, което няма да заема много място, но все пак ще подобри значително потребителското изживяване и ще позволи на клиентите да намалят избора си за няколко секунди.

Показване на кратки описания на продуктите при преминаване върху тях

Мислете за страниците за събиране на продукти като за информационен център. Тук показвате всички свои продукти в определена категория. Колкото по-полезни сте, толкова по-вероятно е клиентът да извърши конверсия.

Опитайте се да не карате купувачите да кликват върху даден артикул, да четат описанието на продукта и след това да кликват обратно. Те трябва да губят време в превъртане, за да разберат къде са спрели. Или, ако продължават да отварят продукти в нови раздели, скоро ще се пренаситят от броя на артикулите, които се опитват да сравнят.

Колкото повече полезна информация можете да покажете на страницата за събиране, толкова по-добре. Чрез добавяне на просто, кратко описание на продукта, когато някой мине с мишката върху продукта, можете да помогнете на клиентите да сравнят продуктите точно там и тогава.

Тази бариатрична страница за събиране на калциеви дъвки върши чудесна работа. Получавате кратко описание на продукта, което ви казва кои витамини и минерали можете да намерите в продукта. Подчертани са и ползите: има страхотен вкус, подпомага имунното здраве и т.н.

Bariatricfusion

_Източник: Bariatricfusion.com _

Обърнете внимание колко кратки са описанията. Можете да ги прочетете за няколко секунди и да продължите да сравнявате продуктите.

Когато прилагате тази тактика, внимателно разгледайте описанието на началната страница. Не е необходимо то да съвпада с описанието на продуктовата страница. То трябва да обсъжда накратко предимствата или ключовите характеристики на продукта, като ясно го отличава от другите продукти на страницата.

Съсредоточете се върху това да бъдете информативни, а не да предлагате продажба. Клиентите са по-склонни да конвертират, ако са уверени в избора си.

Включете и социалното доказателство

Социалното доказателство е чудесен инструмент, който прави страниците по-ангажиращи и полезни. Те ще покажат на клиентите ви, че заслужавате доверие, че сте надеждни и че продуктите ви са с добро качество. Това е особено важно за новите клиенти, които все още не са запознати с вашата марка и които може да се колебаят повече дали да конвертират.

Социалното доказателство има много форми, но оценките със звезди са най-полезният вид доказателство, което можете да поставите на страниците си за колекции. Те ще послужат за няколко цели:

  • оценяване на качеството на отделния продукт.
  • да покажете колко клиенти са го закупили и са отделили време да го прегледат.
  • помагате на клиентите да вземат по-бързи решения за покупка.

Оценките със звезди са лесни за въвеждане. Разгледайте страницата на Sephora за колекция палитри със сенки за очи. Те са лесни за забелязване и показват цялата необходима информация: колко отзива има и каква е общата удовлетвореност от продукта. Можете също така ясно да видите, че една от тези палитри е много по-популярна от останалите.

sephora

Източник: sephora.com

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

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

Това е чудесен начин да добавите малко FOMO към маркетинговите си тактики. На клиентите ще бъдат показани други артикули, които очевидно са популярни, защото някой току-що ги е закупил. Това също така ще изпрати силни сигнали за доверие и надеждност.

Уверете се, че изскачащият прозорец не е прекалено крещящ или разсейващ. Също така се опитайте да ги разположите на различни места, за да не дразнят купувачите.

vinylstatus

Източник: vinylstatus.com

Показване на множество изгледи на продукти

Колкото по-добре клиентите могат да видят продукта, толкова по-големи са шансовете да го конвертират. Колкото повече изображения на даден артикул показвате на страницата за колекции, толкова повече ангажираност и интерес ще предизвикате.

Можете да включите повече от едно изображение по няколко начина. Можете да позволите превъртане на галерия с продукти или да покажете различна снимка при преминаване с мишката.

Тази страница с дрехи за момчета от H&M разполага с галерия от продукти с възможност за превъртане. Можете да видите всички снимки, които са представени на страницата на отделния продукт, директно от страницата на колекцията, така че никога не се налага да кликвате.

hm

Източник:hm.com

Ако предпочитате просто да показвате различна снимка при преминаване, разгледайте тази страница с колекция дамски плажни облекла за вдъхновение. Марката умело показва задната част на артикула при преминаване на мишката, така че да можете да видите цялото изделие, без да се налага да отваряте друга страница. Това е чудесна тактика за марките за дрехи.

simplybeach

Източник:simplybeach.com

Когато избирате дали да добавите галерия или снимка на екрана, вземете предвид естеството на елемента. Колко снимки трябва да види купувачът? И какви трябва да бъдат тези снимки?

Можете да покажете използвания продукт или да включите снимки на клиенти, ако е по-вероятно те да повлияят на нов купувач. Можете да покажете артикула отблизо или дори да посочите спецификациите на продукта.

Показване на наскоро разгледани елементи

Препоръките за продукти обикновено са запазени за отделни страници с продукти. Това е и мястото, където марките ще поставят въртележката "наскоро разгледани".

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

Разгледайте страницата за мъжки обувки за бягане на Adidas. Веднага след като разгледате отделен продукт, в долната част на страницата на колекцията ще се появи функцията "Наскоро разгледани", която ще ви помогне да следите за артикулите, които са предизвикали интереса ви.

adidas

Запознайте се с Ranktracker

Универсалната платформа за ефективна SEO оптимизация

Зад всеки успешен бизнес стои силна SEO кампания. Но с безбройните инструменти и техники за оптимизация, от които можете да избирате, може да е трудно да разберете откъде да започнете. Е, не се страхувайте повече, защото имам точно това, което ще ви помогне. Представяме ви платформата Ranktracker "всичко в едно" за ефективна SEO оптимизация

Най-накрая отворихме регистрацията за Ranktracker напълно безплатно!

Създаване на безплатен акаунт

Или влезте в системата, като използвате данните си

Източник: adidas.com

Същата въртележка е показана и на отделните продуктови страници, което позволява индивидуално адаптирано сърфиране.

Можете също така да препоръчвате продукти на клиентите въз основа на разглежданите от тях продукти, точно както в продуктовите страници.

Приключване

Помислете кои от тези тактики за дизайн на страници с колекции от продукти можете да приложите на собствените си страници. Може би и шестте могат да изиграят роля за повишаване на процента на конверсия.

Винаги имайте предвид естеството на вашия продукт (продукти) и болките на вашата аудитория. Какво търсят те и как дизайнът ви може да им помогне да го намерят?

Felix Rose-Collins

Felix Rose-Collins

Ranktracker's CEO/CMO & Co-founder

Felix Rose-Collins is the Co-founder and CEO/CMO of Ranktracker. With over 15 years of SEO experience, he has single-handedly scaled the Ranktracker site to over 500,000 monthly visits, with 390,000 of these stemming from organic searches each month.

Започнете да използвате Ranktracker... безплатно!

Разберете какво възпрепятства класирането на уебсайта ви.

Създаване на безплатен акаунт

Или влезте в системата, като използвате данните си

Different views of Ranktracker app