Blog

5 съвета как landing страниците да са ефективни още на ниво дизайн

Спорът “креативност срещу ефективност” е вечен и в следващите няколко минути ни се иска да поговорим защо е важно дизайнът да е и ефективен, освен креативен. Избраните примери показват, че битката въобще не съществува и тези две категории работят заедно.

1. Цел на landing страницата

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

Именно ясната и конкретно поставена цел определя целия дизайн подход към даден проект. Следващите три примера показват различни цели - информиране на аудиторията, участие в промо кампания и изпращане на заявка. Целта оказва влияние върху структурата на landing-a и съдържанието, което потребителят ще види.

Batiste Landing

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

Отделните секции на лендинг страницата дават нужната за потребителя информация:

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

Секциите са степенувани според степента на важност на информацията, която искаме да достигне до крайния потребител. Най-посещаваните секции са “Продукти” и “Къде да купя”, като при 11% от сесиите се стига до края на страницата.

Queen’s Landing

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

Началният екран показва механиката на кампанията и CTA (call-to-action) за регистрация чрез email и Facebook, в зависимост от предпочитанията на потребителя. Продуктът отново е на фокус. Тъй като това е промо кампания веднага след първия скрол са показани наградите. По време на кампанията има качени над 9 000 предизвикателства и са направени 3 400 регистрации.

Easycredit Landing

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

Постигнати резултати: след създаването на промо страницата на Изи Кредит - promo.easycredit.bg, анализирането на поведението на аудиторията, създаването на добра база данни от аудитория и сигнали за поведението им, успяхме да получим следните резултати:

  • увеличаване на Conversion rate в различните месеци между 150% и 222%
  • увеличаване на броя на заявки (leads) с 300 - 400%
  • намаляване на цената на заявка (CPA) с над 100% 

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

Познаването на целевата група е от огромно значение не само за performance екипите. Визуалното представяне на един бранд трябва да отговаря на неговото ДНК, както и да съвпада с езика на “неговите хора”.

Следващите два примера показват две landing страници с една и съща цел за един и същи клиент, но насочени към различни аудитории.

Двете кампании са за набиране на кадри за Telus International, като страниците имат еднаква структура. Основната цел е потребителят да изпрати своята кандидатура. Визуално обаче двата landing-a много се различават, именно заради различните хора, на които говори. Едната позиция е за customer service assistance като стилът е издържан изцяло във визуалната идентичност на Telus. Втората е за подобна позиция като е пояснено обаче, че става въпрос за support към League of Legends. Тъй като тук вече говорим на хора, които са запалени по компютърни игри, използваме стилистиката на самата игра. Тя говори именно на тези хора и привлича специфично тях.

3. Дизайн и текст работят заедно​

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

Най-често заглавието е първото послание, което потребителят вижда. То е последвано от CTA (call-to-action) бутона. Златното правило е той да е кратък, точен и достатъчно силен, за да накара потребителят да извърши действието. Концепцията KISS (Keep It Simple Stupid) е винаги една добра алтернатива за създаването на работещи послания.

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

  • The Blink Test

Може ли потребителят да разбере какво искаме от него за по-малко от 5 секунди?

  • The Z-pattern

По правило окото се движи по формата на фигурата Z, така че ъглите, началната и крайната точка са местата, където е добре да са поместени важните елементи.

  • Visual cues

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

Направете теста върху началния екран на landing страницата на Batiste. Разбирате ли какво се иска от вас? Заглавието в комбинация с бутона дава основната информация - “Имаш нужда да освежиш косата си? Разгледай нашите продукти”. Основните елементи в композицията са разположени в Z формата - окото започва пътя си от текстовия блок (заглавие + CTA бутон), преминава през момичето и завършва върху самия продукт. В случая зеленият правоъгълник играе ролята на насочващ елемент, като подсилва разположението и води погледа.

4. Елементи на доверие​

Често, за да изпълни една landing страница целта си, у потребителя трябва да се изгради доверие в продукта или услугата, които му се предлагат. Включването на елементи като други потребителски мнения, ревюта, case study-та и т.н. помагат за изграждането на това доверие.

На началната страница на xplora.bg има 4 такива секции - лога на текущите ни клиенти, актуална информация за брой клиенти, служители и проекти, препоръки от наши клиенти и лога на партньори.

 

5. Тест

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

Надяваме се ви доказахме, че спор не съществува и креативността върви ръка за ръка с ефективността. Поне за нас :)