Как да задържите потребителя в ерата на дефицит на вниманието или Above the Fold

Знаеш ли за колко секунди си създаваш първо впечатление за даден сайт? За около 2. После обикновено отделяш още 8, за да го разгледаш по-подробно и да решиш дали ще предприемеш някакво действие, или ще отидеш на друг сайт.

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

Дизайнерът Люба Попова ти обяснява как да го направиш в днешната статия за онова ограничено, и важно, пространство, което посетителите виждат веднага щом отворят един сайт – Above the Fold.

⇒ Прочети, приложи наученото към твоя сайт  и ако искаш обратна връзка от специалист – питай Люба. Остави ѝ линк в коментар, тя ще разгледа какво си направил и ще ти даде конкретни насоки как да оптимизираш твоето Above the Fold пространство.

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

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

Съответно, Below the fold е тази част от сайта, която се намира под линията на екрана и не се вижда преди потребителят да започне да превърта надолу.

Фразата Above the Fold започва да се използва през XVIII век по повод вестникарските издания, които са твърде големи и трябва да се прегънат на две преди да се изложат на щанда. Така от тях се вижда само горната част, където се отпечатват най-важните новини и най-гръмките заглавия. Затова се използва и  думата fold – „сгъвка“.

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

Защо Above the Fold частта е толкова важна

Статистиките сочат, че на хората им отнема по-малко от 2 секунди да решат дали да напуснат страницата и средно около 8 секунди, за да разгледат всичко.

Доклад на MOVR заключава, че 11% от посетителите на страницата през мобилно устройство започват да скролват до 4 секунди след като уеб страницата се е заредила. 9% са започнали да я превъртат в рамките на това време дори да не се е заредила.

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

⇒ Above the Fold дава на посетителя незабавна видимост на цялото съдържание в секцията, без да се налага той да извършва допълнителни действия като скрол или клик. Точно заради това в тази част на сайта обикновено се поставят и всички елементи с висок потенциал за ангажиране:  заглавия, навигация и призиви за действие. Сигурно сте забелязали (даже понякога изглежда малко отегчително), че съвременните сайтове имат стандартна композиция на видимата част на екрана –  грабващо изображение, заглавие, уточняващ текст и голям бутон с ангажиращ call-t-action.

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

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

Завладяващият дизайн и ясното, информативно съдържание в Above the Fold  на страницата могат да привлекат потребителите да продължат надолу. И обратно –  ако потребителите не намерят от пръв поглед нещо интересно, те ще напуснат сайта. Моделите на превъртане също показват, че начинът, по който съдържанието е представено на видимата на екрана част от страницата (като използването на визуални знаци, показващи повече съдържание) може ефективно да ги насочва да се ангажират с останалата част от страницата.

⇒ Ключовото тук е да разбирате аудиторията си и да използвате всички похвати на дизайна, за да направите своята Above the Fold част максимално привлекателна.

Един мит за дължината на сайтовете

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

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

⇒ Съветвам ви да дадете на хората всичко, от което се нуждаят като информация, включително да им разкажете за себе си и дейността си. За да намалите ефекта на скрола, можете да използвате похвати като: карусели, които се превъртат на страни; информация в поп-ъпи (но не реклами); акордеони или Javascript ефекти, които създават впечатление, че всеки екран е отделна страница (на принципа на мобилните приложения).

Как да определите къде свършва Above the Fold във вашия сайт

Можете да използвате heatmaps (каквито има в Yandex metrica, Hotjar или MS Clarity), за да видите докъде скролва по-големият процент от вашите потребители. Всички топлинни карти изглеждат общо взето по този начин:

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

Много често в тази част се разполага само един бутон с призив за действие – сред най-важните принципи в UX е да водите потребителя към една цел. Но това невинаги е така:

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

⇒ При по-рядко срещан или авторски продукт, например хендмейд; с благотворителна кауза; нещо тепърва навлизащо на вашия пазар; най-вероятно ще трябва да добавите и малко повече текст в Above the Fold в сравнение с текста, необходим за представяне на по-разпространени продукти, каквито са техника или дрехи да кажем. Допустимо е и да сложите повече бутони.

⇒ В B2B сектора съдържанието на видимата на екрана част от страницата често се фокусира върху създаването на доверие и бързото предаване на стойностни предложения на потенциални бизнес клиенти.

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

⇒ Ако имате онлайн магазин, Above the Fold е частта, в която да разположите най-важните си продукти и промоции.

⇒ Когато предлагате продукти за повече аудитории (например мъже, жени и деца), тогава следва да имате 3 призива за действие.

Добри практики за дизайна на Above the Fold частта в уеб сайта ви

1. Ангажиращо съдържание за целевата група

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

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

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

2. Погрижете се призивът за действие да изпъква

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

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

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

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

Можете да се запознаете с едно интересно изследване (Case Study) на Unbounce за намиране правилното място на бутона с призив– да го нацелите предизвиква скок от 41% в реализациите.

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

3. Избягвайте претрупаността

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

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

Не забравяйте,че в Above the Fold частта, освен основното си послание имате и всички елементи на навигацията – лого, слоган, бутон за логване, връзки в главното меню, понякога поп-ъпи, съобщение за бисквитки…

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

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

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

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

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

4. Обърнете специално внимание на мобилната версия на сайта си

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

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

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

5. Подберете точното изображение

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

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

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

По-дрехите посрещат, по ума изпращат – заключение

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

⇒ А вие обръщате ли специално внимание на първото впечатление, което създава сайтът ви? Оставете линк в коментар и аз ще ви дам съвети за оптимизирането на неговата Above the Fold част.

===

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

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

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