5 съвета за проектиране на печеливш „бутон за покупка“

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

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

На първо място, Текстът на бутона е най-важното, но има и други характеристики, които трябва да бъдат разгледани. Защо казвам, че текстът е най-важният? Представете си това - какъв е смисълът да имате красиво проектиран бутон, ако текстът върху него се казва “Върви по дяволите!”? Случаят е приключен. Добро копие е мястото, където са направени паричните средства.

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

1. Общ стил

Това е номер 1 в този списък не без причина, тъй като това е най-важната черта.

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

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

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

Позволете ми да ви дам един чудесен пример за пурпурен кравешки бутон.

Mozilla Firefox

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

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

Накратко: Стремете се да имате забележителен бутон.

2. Външен вид

Да започнем с това цветът.

Ако искате да бъдете забележителни, използвайте цвят, който не е бил използван никъде другаде на страницата. Точно както момчетата от Firefox правят на своя уебсайт. Можете да използвате инструмент като Color Scheme Designer, за да намерите цвят, който изглежда добре с текущата цветова схема на уебсайта Ви, но все още е много различен.

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

Още един трик. Orange е известен като най-видимия цвят веднага след червеното. Но това не вдига всички негативни емоции, които червеното прави (неща като “Спри се”, “внимавай!”, и “опасност”). Най-популярният оранжев бутон в интернет може да бъде намерен на amazon.com.

Следващото нещо, върху което трябва да се фокусирате, е размера на бутона. Е, какво мога да кажа, трябва да е BIG. Колкото е по-голямо, толкова по-добре. (Отново, пример за Firefox.)

“Мога ли да го направя още по-голям?” е добър въпрос, който трябва да се зададе по време на фазата на проектиране. Правете го много.

Ако е така прост или наперен? Бутонът не може да бъде твърде лъскав. Погледнете отново бутона Firefox. Той е наперен. На нея има оранжева лисица, но все още изглежда като бутон. И това е граница, която не можете да прекосите. Ако вашият бутон не изглежда като този, никой няма да го кликне.

Ето защо няма прост отговор на въпроса кой е по-добър - наперен или прост. Просто трябва да разберете за себе си. Винаги разделяйте теста. Създайте два бутона, един наперен и един прост. Използвайте и двете едновременно, и вижте кой е по-добър. Google Оптимизатор на уебсайтове ще ви помогне с това.

Само един бърз пример за прост бутон.

ThemeFuse

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

Например само с един ред от:

[button link = "domain.com"] Кликнете тук, за да закупите моя страхотен продукт! [/ button]

Получавам този резултат:

3. Шрифт

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

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

(Източник на изображението: Gomediazine)

Някои безопасни шрифтове, които можете да използвате, са: Arial, Helvetica, Franklin Gothic, Myriad или всеки друг класически шрифт без сериф, наистина.

А сега какво да кажем за цвета. Копието, разбира се, трябва да е с висок контраст с цвета на бутона. Вие не искате сиво-сиво. Искате черно-бяло или синьо-оранжево.

Отново, текстът трябва да е много четлив.

4. Поставяне

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

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

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

Разбира се, тя трябва да бъде най-видимото място едновременно. Това означава две неща:

1. То абсолютно трябва да бъде поставен над гънките, и
2. Не се страхувайте от празно пространство. Whitespace е приятел на всеки добър уеб дизайнер. Не забравяйте, че няма значение колко неща можете да поставите на даден уебсайт, важно е колко неща можете да премахнете от него.

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

5. Допълнителни елементи

Това е черешката на тортата. Допълнителните елементи подобряват видимостта на бутона още повече. Примери за елементи: стрели, колички за пазаруване, лупи, плюс знаци или различни елементи на марката.

Любимият ми пример - примерът на Firefox - използва един наистина страхотен допълнителен елемент - оранжевата лисица (известна още като тяхното лого)..

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

Можете също да използвате някои елементи на марката. Например неща като: стандартна икона на RSS с бутон за абонамент за подаване, икона с птица с бутон за последващо вписване, оранжева лисица с бутон за изтегляне на огън, собствено лого с купон бутон неща.

Ето няколко примера:

Wakeinteractive

Commercialiq

Mediatemple

Unlocking.com

Sofasurfer.eu

Uploadify

Сила на "Свободното"

Още един трик е използването на най-мощната дума на английски език - БЕЗПЛАТНО. Всеки път, когато нещо се рекламира като безплатно, хората започват да действат предсказуемо ирационално Дан Ариели, "Горещата ирационалност", за да разберете какво имам предвид.)

Още примери:

Freshbooks

Wufoo

Freeagent.com

Какво следва?

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

Какви са вашите съвети за проектиране на голям бутон купуват? Бих искал да актуализирам този пост с вашите мнения.