Защо вашият WordPress сайт трябва да има лепкави интерфейсни елементи и как да ги създадете

Този принос за лепкавите UI елементи в WordPress е на Лекси Лу.


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

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

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

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

Бележка на редактора Израснали сме и да се наслаждаваме на различни елементи от лепкави сайтове. Блогът CodeinWP сам използва един такъв елемент и ние също така направихме лепкава навигация една от основните характеристики на Zerif – най-популярната ни тема (вижте демонстрация). Защо? Просто работи за потребителя. Но нека Лекси обясни това подробно:

Защо лепкавите UI елементи в WordPress работят

Използването на лепкави елементи в WordPress ефективно може да ви помогне да предадете важна информация и да улесни пътуването на посетителя през вашия сайт. Един уебсайт за електронна търговия откри, че включването на лепкава навигация спомага за увеличаване на реализациите от 30 на 33 процента.

Отделен A / B тест, проведен за изследователски цели, установи, че 100 процента от посетителите предпочитат лепкавите дизайнерски елементи – въпреки че много от тях не бяха точно сигурни защо.

За да използвате силата на лепкавите UI елементи в WordPress, не можете просто да изтеглите приставка за WordPress и да гледате как вашите числа се подобряват навсякъде. Трябва внимателно да планирате кои елементи ще работят най-добре за вашия сайт. Вие също трябва да гарантирате, че тези елементи – които понякога могат да бъдат фини, ако нямате опит с кодирането – работят по предназначение.

За щастие има няколко различни типа UI елементи и плъгини, които да ви помогнат да ги включите в своя WordPress сайт:

Лепкави бутони за споделяне в социалните медии

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

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

(Диаграма от WordPress графики и графики Lite.)

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

WordPress няма недостиг на приставки за добавяне на лепкави / плаващи бутони на социалните медии. Важното е да изберете един, който да се държи интуитивно с дизайна на вашата тема. Има толкова много примери за плаващи бутони в социалните медии, които се държат доста странно на мобилни устройства или когато прозорците на настолния браузър се променят по размер.

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

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

В CodeinWP тук е публикуван списък от две части от над 30 приставки за социални медии. Сигурен съм, че там ще намерите идеалния плъгин за вас.

Лепка информация поле

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

12keysrehab

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

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


Лепен елемент Лепен елемент

Автор (и): Stew Heckenberg

Текуща версия: 1.3.5

Последна актуализация: 26 януари 2019 г.

sticky-element.1.3.5.zip


74% Ratings


600 + инсталирания


WP 3.0 + Изисква

Целта е да не се направи елементът на страничната лента твърде блестящ или разсейващ. Той ще бъде там, докато посетителят е на сайта, така че не искате да ги изключвате с нещо лошо проектирано или прекалено натрапчиво. Грешка от страна на простотата, тъй като плаващата странична лента трябва да бъде черешката на тортата за съпътстващото съдържание.

Лепкави менюта

Лепкавите менюта са може би най-приземният вид от всички лепкави потребителски интерфейсни елементи в WordPress, но те също са едни от най-полезните.

Идеята е проста. Докато потребителят превърта надолу, менюто остава стабилно на място.

Но можете да реализирате това по много различни начини:

а) Можете да отидете за стандартното разположение в горната част.

Това направи екипът на ThemeIsle със своите Тема на Zerif, например (можете да видите тук демонстрация на живо):

Zerif лепкави елементи

Един допълнителен бонус тук е, че менюто не е просто едноредово меню, а мега меню – когато задържите курсора на мишката върху всеки от елементите, те разкриват по-сложна структура:

мега меню

б) Поставете менюто отстрани.

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

Ето пример от RichBrown.info:

RichBrown

Менюто е фиксирано вдясно, докато превъртате надолу.

в) Поставете го на дъното.

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

Ето пример от bulletpr:

bulletpr

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

Лепкави имейл регистрации

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

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

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

twelveskip

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

CodeinWP например използва множество форми за тази цел и много от лепкавите. Като този:

codeinwp

Лепкави реклами

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

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

път

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

Както всяка реклама, и тази трябва да се извършва само в умерена степен. Стената от реклами вляво или вдясно от даден артикул е незабавно изключване. Една или две, съчетани с връзки към повече статии, са добър начин за рекламиране.

Creative лепкави интерфейсни елементи в WordPress

Освен нещата, изброени по-горе, можете да бъдете много по-креативни с използването на лепкави UI елементи в WordPress, но това ще означава и потенциално повече работа, за да ги внедрите.

Ето един пример от Gavick.com:

остров

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

Изглежда наистина няма ограничение за творческото използване на лепкави UI елементи в WordPress … тъй като някой успя да направи остров лепкав.

Как да намерите правилния плъгин?

Има няма недостиг на приставки в WordPress.org, който може да ви помогне да внедрите лепкави елементи във вашата тема. Някои може да работят чудесно с вашата тема, докато други може да не са оптимизирани за вашия сайт. Ще са необходими някои опити и грешки, за да намерите тези, които работят най-добре.

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

Лекси Лу За автора: Лекси Лу е дизайнер на свободна практика и блогър. Тя се радва да изследва най-новите тенденции и винаги е пила чаша кафе в непосредствена близост. Тя управлява Дизайн печено и може да бъде последвано в Twitter @lexieludesigner.

Всички редакции и остроумни пренаписвания от Карол К.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map