Указания, най-добри практики и примери за „Призив за действие“

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

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

Цел на бутоните "Призив за действие"

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

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

Видове бутони "Покана за действие"

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

1. Добавете към бутоните за кошница

Сайтовете за електронна търговия обикновено използват няколко бутона за покана за действие, но най-широко използваното е бутоните “добави в кошницата” бутон. Тези бутони обикновено се появяват на отделните страници на продукта. Тяхната цел е да привлекат клиентите да купуват артикул. Общите елементи на дизайна, добавени към бутоните за количката, включват проста формулировка (като например “Добави в кошницата” или “Добави към чантата” или “Купи сега“) и използването на икони (обикновено торба или количка).

2. Изтегляне на бутони

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

3. Пробни бутони

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

4. Научете повече бутони

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

5. Бутони за регистрация

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

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

Ефективно използване на отрицателно пространство

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

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

Някои указания:

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

Размер и цвят

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

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

Някои указания:

• В идеалния случай бутоните ви за действие трябва да са най-големите бутони на дадена страница
• Използвайте контрастни цветове, за да направите по-малки бутони
• Използвайте по-малко различни цветове, за да направите големи бутони по-добре
• Обаждате се на бутоните за действие, за да обръщате внимание, без да удряте дизайна

език

Точната формулировка, която избирате да използвате в бутоните си за повикване до действие, може да окаже огромен ефект върху реализацията. сравнение “Купи сега” с “Добави в кошницата“. Единият е много по-спешен от другия. Или за това “Опитайте го безплатно” с “Безплатен пробен период“? Единият е много по-силен от другия и се откроява повече.

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

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

Някои указания:

• Използвайте прост, директен език
• Използвайте голям, удебелен шрифт на бутона за основния текст
• Уверете се, че езикът изисква конкретно действие

Създаване на спешност

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

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

Някои указания:

• Насърчавайте посетителите си да действат незабавно
• Не давайте на посетителите никаква причина за пауза
• Докато спешността е важна, не подвеждайте посетителите си по никакъв начин

Осигурете допълнителна информация

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

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

Някои указания:

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

Дайте приоритет

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

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

Икони и изображения

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

Някои указания:

• Уверете се, че иконите, които използвате, помагат да се изясни значението на бутона, вместо да се обърка
• Лесно разпознатите икони веднага могат да означават значението на посетителите ви
• Не се страхувайте да използвате по-малко използвани икони, стига тяхното значение да е все още ясно

Примери

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

Livestream - Различаването на бутоните "Купи сега" (за платени опции) и бутоните за регистрация (за безплатни опции) е добра стратегия.

Windows 7 - Големият, зелен бутон "Get Windows7" ​​е лесен за посещение на посетителите.

Файлове от HQ - Ярко зеленият бутон тук наистина се отличава с белия фон.

корабен дневник - Използването на различни цветове за бутоните "Изтегляне" и "Купи" ги отличава и дава приоритет на бутона "Купи".

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

GoodBarry - Друг ярък зелен бутон за извикване на действие.

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

Възобновителят - Ярък червен бутон за извикване на действие с удебелен шрифт се откроява на фона на синия фон.

Notepod - Добър пример за включване на допълнителна информация в бутон за повикване до действие.

Inkd - Чудесен пример за приоритизиране на бутоните с размер.

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

Zendesk - Друг чудесен пример за правене на бутон се откроява с помощта на цвят.

Storenvy - Кръгъл бутон е неочакван и се откроява, особено когато е заобиколен от бяла рамка.

Bara'Mail - Понякога бутон, който се слива с по-добра работа в цялостния ви дизайн на сайта, особено когато действието е по-малко спешно.

Повече ресурси

• Бутони за призив за действие: примери и най-добри практики - от списанието
• Добри бутони за покана към действие - От щанда на UX
• Призив за действие Бутони: Има ли значение за размера? - От Get Elastic
• 10 техники за ефективно “Призив за действие” - От Boagworld
• 5 Съвети за създаване на ефективен бутон за извикване на действие - От SitePoint