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

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

Точно както има преходни и целеви страници в един уеб сайт, така има преходни и целеви етапи в живота ни.

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

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

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

Важното, което искам да ти кажа е:

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

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

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

Бъди снизходителен към себе си, дай си време. То не е загубено, просто ще видиш по-късно резултатите от него.

Сега те оставям със статията на Люба и 3 препоръки какво да направиш, докато я четеш и след това:

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

Благодаря ти, че ми даваш доверието и времето си, ще се постарая да не те разочаровам. Успешна работа, но преди това – приятно четене! ⇓

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

поръчка,
изпращане на запитване,
четене на блог.

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

Преходните страници (transition pages)

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

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

Целевите страници (destination pages)

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

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

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

Самите потребители също използват тези страници по определен начин

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

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

На какво е най-важно да обърнете внимание при дизайна на преходни и целеви страници (transition & destination pages)

1. Постепенно разкриване на информацията

Представете си пътя на потребителя

от възникването на неговия проблем ⇒ през търсенията му на решение и на конкретна информация ⇒ към информацията за вашия продукт/услуга ⇒ до самата конверсия.

Заложете на постепенното разкриване на информацията.

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

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

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

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

2. Подходящо изградена визуална йерархия

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

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

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

2.1. Най-доброто структуриране на преходната страница е оптимизираното за сканиране

Grid модел с визуално обособени карти, които представят различните варианти, между които може да избирате. Не слагайте излишни елементи в горната част (Above the Fold). Първото, което потребителят вижда трябва да са възможностите за избор. Тук изключения могат да направят банери за важни кампании (като Черен петък или Коледа); колаж с различни продукти, за да подскажете големия избор или най-важният ви продукт в случай, че искате хората да му обърнат специално внимание.
Ясен приоритет на опциите и филтрите – покажете за всеки продукт само това, което е наистина важно за хората и може да е фактор за избора им (цветове и размери за дрехи, допълнителни опции за обслужване при услуги, опции, които се дават само при вас). Не забравяйте, че правилно написаното заглавие е от съществено значение – бъдете изчерпателни спрямо характеристиките на продукта без излишни прилагателни и описателни изрази. Оформете го така, че да привлича вниманието – по-голям размер на текста и по-контрастен цвят ще го отличат достатъчно.
Категоричен призив за действие – голям контрастен бутон (или линк, чийто текст подсказва накъде води). Оставете достатъчно празно пространство около бутоните си и не ги „забивайте“ в другите елементи.

2.2. Най-доброто структуриране на целевата страница е да покажете, че посетителят е попаднал на правилното място

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

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

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

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

Вие какви проблеми на клиента решавате през сайта си? Посетителите му успяват ли да стигнат до конверсия? Оставете ми линк към вашия сайт в коментар под статията и ще ви върна препоръки какво да подобрите, за да помогнете на посетителя да се превърне в клиент.

===

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

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

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