5 фундаментални принципа за добър дизайна на начална страница на уеб сайт

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

Дизайнерката Люба Попова днес ти разказва как да я направиш така, че да изпълнява ефективно функциите си.

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

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

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

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

1. Осигурете лесен достъп до началната страница в сайта

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

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

Затова се постарайте да осигурите лесен достъп до нея:

• Най-разбираемата и обичайна връзка към началната страница е логото в хедъра. Там то изпълнява двете си най-важни роли – да показва на хората кои сте вие и да ги отведе към началото, ако се почувстват изгубени.
• На подходящи места можете да слагате и текстови линк „Начало“. В някои сайтове, при попълване на форми и заявки за поръчка, се премахват хедъра и футера. Най-често това се прави, за да се избегне когнитивно натоварване, но всъщност е грешка, защото се отнема възможността на хората да проверят отново нещо, да се върнат към по-предна стъпка. В подобна ситуация те могат да се почустват като в капан и просто да затворят сайта. Не всеки завършва започната поръчка и причините са различни при всеки. Това налага необходимостта да не се премахват двете най-обичайни навигационни структури, каквито се хедъра и футера.
• Използвайте стандартно и леснозапомнящо се име на сайта, като brand.com например. Така давате шанса на потребителя да го отвори отново.
• Направете дизайна на началната страница една идея по-различен от този на останалите страници – тук можете да сложите по-привлекателна снимка (или видео) в най-горната част, повече карусели с продукти, повече интересно оформени секции с призиви за действие…

2. Информирайте посетителите кои сте вие и какво предлагате в сайта

Първото впечатление е най-важното

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

Не оставяйте хората да гадаят

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

Най-въздействащо е ако можете да съберете всичко важно във видимата част на сайта (above the fold), още при отварянето му. Вече съм писала за добрите практики за Above the Fold, можете да си ги припомните в статията ми „Как да задържите потребителя в ерата на дефицит на вниманието“.

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

Ако вашето above the fold пространство е достатъчно ясно и привлекателно, хората ще продължат да скролват надолу, за да се запознаят с всичко, което можете да им предложите.

3. Поетапно разкриване на съдържанието на сайта чрез примери

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

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

Добрият уеб дизайн работи в три направления едновременно:

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

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

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

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

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

4. Добре структурирана навигация и разбираеми призиви за действие

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

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

Навигацията не е само главното меню или линковете във футъра, тя е цялостната свързаност на сайта и в нея участват всички инкове, бутони, call-to-action секции и т.н. Разгледала съм този въпрос по-подробно в статията „Навигацията на уеб сайта – как да я направим достатъчно ефективна“.

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

5. Семпъл дизайн и максимално проста структура

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

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

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

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

Иновациите и съвременните тенденции имат своето място, разбира се. Можете да „облечете“ структурата с модерна визия, можете да използвате нашумелите формати за съдържание (като видео и особено shorts), можете да заложите на иновативни интеракции и интересни полета и изображения. Стига всичко това да не пречи на чистата възможност за лесно сканиране на цялостното съдържание и всеки елемент поотделно.

В заключение:

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

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

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

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

===

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

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

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