Питай дизайнер #4: Лендинг страница – как дизайнът влияе на ефективността

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

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

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

Благодаря ти и хубав ден!

=====

Landing page е страницата, която продава – крайната стъпка в рекламна кампания, в която предлагате своя оферта, продукт или услуга.

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

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

За да създадете ефективна целева страница, е необходимо първо да си отговорите на следните въпроси:

• Каква е крайната цел – продажба, абониране за бюлетин, записване за събитие, изпращане на запитване и т.н.
• За кого е – лендинг страницата е последната стъпка от вашата кампания. Дотук са стигнали само потенциални клиенти, които има най-голям шанс да поръчат. Профилът им трябва да ви е максимално ясен, за да създадете страницата с всички нейни елементи така, че да ги убедите да станат ваши реални клиенти.
• Защо този човек да поръча от вас – за да продава успешно, лендинг страницата трябва да убеждава. Дизайнът ѝ трябва да е цялостна композиция, която да води към определената цел, а всеки отделен елемент да насочва вниманието именно към предимствата на вашия продукт/услуга, както и към лесен начин за поръчка.

• Обща визия/цялостна композиция
• Хедър/ Hero section
• Акценти
• Описанието на продукта/услугата/офертата
• Цени/ Оферти
• Социални доказателства
• Форма за поръчка
• Ефекти

Обща визия/цялостна композиция

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

Изберете един, максимум два водещи цвята. Например вашият основен бранд цвят. Или, ако ще брандирате страницата спрямо продукта/услугата, а не спрямо бранда, то използвайте неговия основен цвят. Основният цвят се слага на водещите елементи – бутоните, секциите с „продаващия“ текст, иконките, акцентите. Можете да изберете и втори цвят, с който да отличите друг вид информация, ако има такава – описания, мнения…

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

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

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

Хедър/ Hero section

Това е първото, което потребителят вижда. Тук визията и посланията трябва да са максимално точни, ясни и изчистени. Хедърът е най-горната част от страницата, където задължително поставяте своето лого. Ако тя е по-дълга, можете да добавите няколко навигационни бутона, които да водят към съответните секции в нея. Ако кампанията ви е по-мащабна, можете да превърнете лендинг страницата си и в мини сайт с 2-3-4 вътрешни страници. Hero section е мястото, където обикновено се слага ефектно изображение, което да закове вниманието на потребителя. Тук е и основното послание – точно и ясно „продаващо“ заглавие, насочено към основната нужда на човека: защо да използва този продукт/услуга, какво би му спестил, как би го накарал да се чувства…. Тук е и призивът за действие (call-to-action или CTA) – кажете точно и ясно, в прав текст на потребителя какво точно искате да направи.

Основно изображение в Hero section

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

• Ако предлагате продукт – задължително го покажете. Можете да го снимате под различен ъгъл или да създадете цяла история: разположете го в среда, която подсказва как се ползва или снимайте как с него борави конкретен персонаж, с когото потребителят се асоциира.
• Ако предлагате услуга, сложете снимка на човек, който я използва. Акцентът трябва да е върху ползите, които му носи или върху позитивните усещания, които изпитва, докато я ползва (или след това).
• Ако рекламирате събитие или семинар, поставете снимка на лектора. Подберете такава, в която да се види как човекът води събитие – ще е по-естествено, отколкото да поставите просто лицето му в обичайния портретен формат.
• Ако ще слагате векторни изображения, подберете такива, които не се използват масово. Идеалният вариант е да бъдат създадени специално за вас от художник/илюстратор.
• Ако предлагате електронна книга или абонамент за имейл, можете и да не използвате изображение. (Макар че една добре направена корица винаги привлича вниманието.) Тогава вашето заглавие трябва да е максимално привлекателно не само като текст, но и като графичен елемент – да е достатъчно голямо, за да „закове“ вниманието; да е на изчистен фон, за да се чете лесно.

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

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

• Необичаен ъгъл на заснемане – отгоре, от страни, макро-фотография.
• Малко цветове, ярки цветове, категоричен контраст.
• Малко хора, по възможност един човек.
• Различно действие – да не е нещо, което се използва непрекъснато в почти всички реклами.

Изключително ефектно е, когато елемент от изображението „излиза“ от фона.

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

Основно заглавие в Hero section

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

Хубаво е да е голямо, но не забравяйте и да оставите достатъчно „въздух“ около него. Едно от основните правила в дизайна е, че претрупаните елементи, всъщност пречат на възприятията и обратно – пространството около елементите помага за спокойното им възприемане.

Основно действие в Hero section

За да накарате потребителя да направи това, което искате, е добре да го посрещнете с ясен призив за действие:

• Можете да използвате бутон, който да води към форма за поръчка. Придържайте се към обичайната форма за бутони, за да се възползвате от подсъзнателното възприятие на хората, че щом е бутон, се очаква да кликнат. Той трябва да се откроява като цвят. Можете просто да го оставите контрастен спрямо цялостната ви композиция. Ако цялостната визия на лендинг страницата е във вашата бранд идентичност, е добра практика и бутоните да са във вашия основен цвят. Можете да се съобразите и с принципните влияния на цветовете: червеното предизвиква усещане за спешност; зеленото – за нещо положително.
• Ако очаквате част от хората да искат повече информация, можете да поставите 2 бутона – за поръчка и от типа „Вижте повече“. Този, с който очаквате да изпълнят действието да е с наситен цвят, докато вторият да е по-незабележим – сив, бял или просто по-светъл, или в негативен на основния цвят.
• Можете и да сложите самата форма за поръчка тук, особено ако няма да правите твърде информативна лендинг страница. Този похват обикновено се използва, когато става въпрос за абонамент по имейл, туристическа оферта, изтегляне на файл, записване за събитие. Формата трябва да е максимално удобна. Не използвайте повече полета, отколкото са необходими (например оставете едно поле за име и фамилия, вместо две). Ако трябва да се направи някакъв избор (например цвят на продукт или дата за събитие) – добавете този избор във формата като падащо меню – не карайте хората да пишат излишно. Добра практика е името на полето да е вътре в него, а не до него.

Акценти

Обикновено след хедъра се поставят няколко основни акцента. Според спецификите на офертата, те могат да бъдат: ползите от продукта/услугата; причини за поръчка именно от вас; допълнителни бонуси; отлики от останалите продукти на пазара и т.н.

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

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

Описанието на продукта/услугата/офертата

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

• Ако продуктът ви позволява можете да поставите графики, статистики и подобни елементи.
• Ако става въпрос за услуга, при изпълнението на която има значение и самият изпълнител, можете да поставите негова снимка и кратко представяне. Тук отново има значение самата фотография – ако човекът гледа в камерата, ще създаде усещане, че говори на потребителя. Това е хубаво, когато става въпрос за събитие, лекция, семинар, при който се очаква този човек наистина да говори пред публика. Може да е заснет в момент, в който изпълнява дадено действие, свързано с използването на продукта/услугата.
• Ако каните хората да присъстват на място, поставете карта с адреса. Хубаво е да вградите активна карта, за да могат да се ориентират без да излизат от лендинг страницата ви. Направете я по-голяма – разпъната на цял екран и достатъчно висока, за да е комфортна за ползване.
• Тук можете да поставите и секция с Често задавани въпроси. Ако вашият продукт, услуга или оферта предизвиква въпроси, ако е нещо по-трудно разбираемо (непозната за пазара услуга, нещо авторско и уникално или специфично, предназначено за начинаещи), то по-добре сложете основните отговори. Хубаво е въпросите да са в т. нар. accordion, т.е. отговорът да се отваря само след като кликнете на въпроса. Не е нужно да карате посетителите да скролват излишно дълги текстове, а и не всеки би искал да прочете всички отговори.
• Можете да сложите видео с презентация как се използва вашият продукт. Отделете видеото в секция с по-атрактивен дизайн. Например цветен фон. Вместо видео може да поставите и малка галерия със снимки с различни начини на използване на продукта.
• Ако сте с по-творческа професия (например фотограф или хендмейдър), тук можете да поставите и галерия със снимки, които да допълнят описанието.

Ако описанието ви е по-дълго, завършете го с Call-to-action секция, която да изпраща потребителите директно към формата за поръчка.

Цени/ Оферти

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

Има няколко основни метода за повишаване на въздействието:

• Водещият вариант да е в ярък цвят, върху ярък фон, да има цветен бордер и/или цветен бутон. Така ще се отличава визуално и ще привлича вниманието.
• Друг убеждаващ елемент е да направите цените във вид на таблица. В нея изброявате всичко, което се съдържа в най-препоръчвания от вас вариант. Поставете зелени тикчета пред всеки елемент, който се включва в офертата и червено хиксче пред елементите, които не се включват. Така препоръчваният от вас вариант ще „светне“ в зелено, а по-евтините варианти – в червено. Вместо червено и зелено можете да отличите параметрите чрез черен и светлосив текст.
• Можете да направите цялото поле с препоръчваната от вас оферта по-голямо. Така визуално, ще му придадете по-висока стойност.
• Можете да добавите графичен елемент или иконка, която да внушава, че това е най-подходящия избор: стрелка, таг, сертификат и т.н. Можете да добавите и цветно поле с надпис „Най-желан“, „Най-купуван“ или нещо подобно.

Ако имате една цена, то пак може да се възползвате от някоя от тези препоръки.

Социални доказателства

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

• Мненията за вашия продукт е хубаво да са отделени в секция с привличащ окото фон. Неслучайно често се използва тъмен фон – негативното пространство в една светла страница, неминуемо ще спре погледа. Добре е да сложите заглавие над всяко от мненията (например с някаква важна за предимствата на продукта извадка от съответното мнение), така ще позволите на хората лесно да схванат най-важното, без да ги карате да четат твърде много. Можете да добавите и звезди към мненията. Ако имате препоръки от клиенти във вашата Фейсук страница, можете да ги поставите като скрийншоти. Така ще покажете още по-убедително, че мненията са автентични.
• Ако сред вашите клиенти и партньори има големи имена/фирми, е добре да поставите логата им. Често те са в сиво и се появяват цветни, само ако човек мине с мишката отгоре. Това е така, защото не са основен акцент, който да помага за продажбите пряко, а са доказателство, което така или иначе действа „на бекграунд“. Доминиращият бранд на лендинг страницата  трябва да е вашият. Не е добре логата на вашите клиенти и партньори да са линкове към техните сайтове. Не забравяйте, че в лендинг страница не се поставят линкове, които извеждат потребителя извън нея.

Форма за поръчка

Вече споменах, че формата трябва да е максимално удобна.

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

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

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

Бутоните могат да се поставят самостоятелно под съответната секция, но може да са част от цяла СТА секция. Например фон, в който има текстово послание и до него стои бутон, който отговаря на това послание и води към поръчка

Ефекти

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

Можете да използвате няколко подобни ефекта, например в началото, за да „грабнете“ вниманието на потребителя и да му покажете, че се грижите и за удоволствието му, а не само за поръчката, която се очаква да извърши. Също така, някъде по средата, в някоя Call-to-action секция, за да привлечете вниманието му отново.

Ако офертата ви позволява, можете да добавите интерактивен елемент – калкулатор, филтри за цената, статистики, графики, чиито елементи се „пълнят“ пред очите на зрителя и т.н.

След като сте направили всеки елемент от лендинг страницата си неустоим, отново огледайте всичко. Отговорете си на основния въпрос: дали страницата изпълнява основната си цел (поръчката), дали всеки елемент е заел своето място във визуалната йерархия и дали всички те са част от единна композиция и не са започнали да се „късат“ от цялото.

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

Полезни връзки:

За максимално ефективна лендинг страница, далеч не е достатъчно да сте направили добър дизайн. Тя е част от цялостния маркетинг. Освен това, трябва да води потребителя към крайната цел, а дизайнът ѝ да е част от цялостното потребителско изживяване (UX). Добавям няколко линка със съвети за изграждане на ефективна лендинг страница – за вдъхновение, докато обмисляте дизайна на вашата:

• The best 400 landing page examples created by top-class SaaS companies 
• The Best Landing Page Design Inspiration & Examples
• The Best Landing Page Templates for Free & Premium
• The Best UI Component Examples for Inspiration
• Understanding Landing Page Conversions (A tale from Witzenhausen)
• Beginner’s Guide to Landing Pages
• How to Design an Effective Landing Page
• Landing Pages – Turn Traffic Into Money 
• The UX behind designing landing pages that convert 
• Images That Don’t Stink: How to Choose Pictures for a Landing Page 
• How to build super effective landing pages 
• Soft Landing. 10 Design Concepts of Landing Pages

Питай дизайнер

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

===

Любомира Попова е уеб дизайнер на свободна практика и художник-сюрреалист с артистичен псевдоним Fineluart.
Създава първия си статичен сайт през 2008. В момента се е специализирала в изработката на WordPress сайтове и визии за уеб. Занимава се с дизайн повече от 17 години, като през повечето време е била част от рекламни фирми и агенции. Създавала е визии за почти всички рекламни среди – външна, печатна, уеб, digital, TV. Работи основно с малки бизнеси в сферата на услугите, макар през годините да е правила реклами за представители на почти всички сфери.

Има професионален интереси в областта на дигиталния маркетинг, графичния дизайн и social media. Това ѝ дава възможност да вижда уеб сайтовете не само като дизайн, а като част от визуалната комуникация между бранда и потребителя. За нея всяка отделна визия е част от цялостно развитие, а не „парче дизайн“.

„Редовно консултирам клиенти и млади колеги и винаги се радвам, когато успея да улесня някого по пътя му в моята (любима) сфера. Ако имате въпроси за дизайн и реклама, съм насреща да помогна, независимо дали става въпрос за принципи в дизайна, тенденции, технически въпроси, видове реклами или се нуждаете от конкретни съвети за личните си проекти. Питайте ме.“ Люба