Как да проектирате продуктова страница: най-доброто ръководство

За разлика от други уеб страници, като начални страници (които са до голяма степен информационни), продуктовата страница е направена както за информиране, така и за убеждаване - което означава, че в идеалния случай ще доведе до кликване на бутона „Добавяне в кошницата“. Това също е това, което прави дизайна на продуктовата страница предизвикателство, като се има предвид, че красивият дизайн не винаги се превръща в дизайн с висока конверсия.

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

Ако и вие имате интерес в сферата на Уеб дизайн, може да се включите в професионално обучение по Уеб дизайн.

Целите на продуктовата страница

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

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

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

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

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

Целите на продуктовата страница и целите на купувача

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

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

Съдържанието на продуктова страница

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

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

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

-        Изображения на продукти и носители: Това съдържа основните изображения на продукта, обикновено във въртележка, за да може посетителят да премине през различни ъгли. Това би включвало и опции за гледане, като различни цветове или модели.

-        Бутон за подканваща фраза (CTA): Това е бутонът, който води до страницата за покупка. В близост до CTA са включени опции за закупуване като количество или оразмеряване.

Останалите елементи от съдържанието, които ще изброим, не е задължително да влизат под предната част, но са по -малко непосредствени от горепосоченото.

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

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

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

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

Как различните видове продукти влияят върху съдържанието на продуктовата страница

Съдържанието на продуктова страница може да варира в зависимост от естеството на продукта/услугата. Най-често срещаната разлика възниква между физически и цифрови продукти (или видими и невидими).

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

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

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

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

Най -добри практики за дизайн на продуктова страница

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

1. Използвайте подходящия софтуер за дизайн на продуктова страница

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

Ползата от прототипирането на приложения е, че те позволяват на дизайнера да се съсредоточи единствено върху потребителското изживяване в началото. Те също са склонни да водят до по-малко оригинални дизайни. Въпреки че това често може да бъде за предпочитане - целта е безпроблемно пазаруване - ако искате да правите по-креативни дизайни, текстури или анимации, ще ви е необходим софтуер като Photoshop и After Effects.

2. Използвайте подход, базиран на шаблони

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

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

3. Проектирайте, като имате предвид останалата част от сайта

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

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

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

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

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

4. Избирателно дайте приоритет на информацията

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

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

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

5. Разкажете история с изображения

Изображенията неизбежно са най-привлекателната част от дизайна на продуктовата страница по простата причина, че сканират по-бързо от текст. Вероятно не е изненада, че онлайн купувачите тези дни очакват да видят средно 6 изображения и 3 видеоклипа на страници с продукти, според проучване на Salsify.

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

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

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

6. Не подценявайте генерираното от потребителите съдържание

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

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

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

7. Тествайте, анализирайте и повтаряйте

Можем да ви дадем съвет как да получите страхотен дизайн, но не можем да ви кажем дали вашата крайна страница с продукти ще бъде успешна. Но ние знаем кой може: вашата аудитория. С други думи, успехът на вашата продуктова страница зависи от това дали аналитичните инструменти като Glew или подобрената електронна търговия на Google Analytics показват, че хората купуват.

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

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

Междувременно високата степен на изоставяне на количките може да означава, че процесът на плащане е твърде тромав (или че има неочаквани разходи). Когато посетителите изобщо не преминат към фазата на количката след дълга сесия, това може да доведе до неубедително копие. И ако дадена страница получава нисък трафик, може да искате да преразгледате SEO стратегията си.

И накрая, ще искате да обърнете внимание на броя и съдържанието на отрицателни отзиви (както на вашия сайт, така и на съвкупности от рецензии като TrustPilot), тъй като това може да показва проблем с доставката или самия продукт.

Страхотният дизайн на продуктовата страница се нуждае от страхотен дизайнер

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