„Позив на акцију“ Смернице, најбоље праксе и примери

Дугмад позива на радњу на веб сајтовима се често занемарује. Дизајнери понекад не разумеју тачно шта чини добро позивање на акцију осим што је атрактиван и уклапа се у укупни дизајн. Међутим, дугмад „позив на акцију“ је сувише важна да би била осмишљена без неке врсте разумевања онога што их чини ефикасним. Уосталом, главна тачка дугмета за позив на акцију је да посетиоци дођу урадити нешто.

Важно је да стекнете бар основно разумевање о томе како боја, размера, језик и други фактори утичу на стопу конверзије дугмета за позив на акцију. Концепти овде нису компликовани, али они узимају мало промишљања и планирају да створе најефикасније позиве на акцију која су могућа унутар датог дизајна. Читајте даље за више информација о свакој од ових тачака и више.

Сврха дугмади "Позив на акцију"

Дугмад за позив на акцију може да служи различитим функцијама. После свега, “позив на акцију” је стварно мало нејасно. Све то значи да је његова главна сврха да доведу посетиоца на ваш сајт Уради нешто. Да нешто може бити додавање производа у њихову корпу, преузимање нечега, тражење информација или било шта друго.

Будући да тастери за позив на акцију имају тако различите сврхе, много пажње се мора посветити ономе што дугме жели да постигне. Тип сајта, циљно тржиште и жељена акција могу да играју улогу у томе како најбоље дизајнирати дугме позива на акцију.

Типови типки "Позив на акцију"

Постоји неколико различитих типки позива на акцију. Док сваки тип има за циљ да натера посетиоце да изврше одређену радњу, та акција може значајно да варира. У наставку се налазе најчешћи типови типки позива на акцију, базирани на акцији коју желите да предузмете.

1. Адд то Царт Буттонс

Сајтови електронске трговине обично користе неколико дугмади за позив на акцију, али најчешће коришћени тастер је “Додај у колица” дугме. Ова дугмад се обично појављују на појединачним страницама производа. Њихова сврха је да привуку купце за куповину артикла. Заједнички елементи дизајна који се додају у дугмад за колица укључују једноставну формулацију (као што је “Додај у колица” или “Додати у торбу” или “Буи Нов“) и употреба икона (обично торба или колица).

2. Преузмите дугмад

Дугмад за преузимање су слична да би се додавали у дугмад за колица тако што покушавају да привуку посетиоца да преузме неку ставку. У случају дугмади за преузимање, многи дизајнери одлучују да укључе више информација од других типова дугмади (као што су информације о верзији или величини преузимања).

3. Пробне типке

Неке локације покушавају привући своје посјетитеље да испробају своје понуде, углавном у облику бесплатне пробне верзије. Ово може бити бесплатан или бесплатан налог, у зависности од одређеног сајта. Неке локације користе “мање је више” филозофију и држати језик на њиховим дугмадима на минимуму, док други воле да пруже више информација о томе шта суђење садржи.

4. Сазнајте више дугмади

Сазнајте више дугмади се обично користе на крају блока информација задиркивања (често на почетној страници). Ови тастери су обично једноставни, али често превелики да привуку пажњу посетилаца.

5. Пријавите се дугмадима

Тастери за пријаву се најчешће појављују у две различите верзије. Први тип је обично директно повезан са обрасцем за пријаву. Други тип се обично користи на сличан начин “Додај у колица” дугмад, као начин да корисници купе или се пријаве за услугу или налог, пре него што дођу до обрасца за пријаву.

Постоје и други типови позива на акцију, али они су најчешћи. Смернице које се примењују на горе наведене ставке вероватно ће се примењивати и на било који други тип позива на радњу који можда дизајнирате.

Ефикасно коришћење негативног простора

Желите да се ваши позиви на акцију истакну у односу на околне садржаје и заиста привуку пажњу посетилаца вашег сајта. У ту сврху морате користити негативни простор око тих гумба. Укључите празан простор између вашег садржаја и вашег позива на акцију. Иако је ово мање важно (и рјеђе) на неким дугмадима, као што су дугмад за додавање у корпу, док други, попут оних да науче више, боље раде са више простора.

Важно је да балансирате количину негативног простора који имате око тастера са величином самих дугмади. Ради се о пропорцији. Желите да ваше дугме, простор око њега и околни садржај изгледају као да иду заједно, чак и са диспаритетима у величини. Можда ћете морати мало да се зафркавате са стварима да бисте их гледали како треба.

Неке смернице:

• Проверите да ли има довољно простора око дугмета тако да се не осећа пренатрпано
• Размотрите принципе као што је правило трећина или Златни омјер када одредите колико простора треба укључити
• Негативни простор даје вашој соби за позивање на акцију да би се издвојио од вашег другог садржаја и раздвојио га

Величина и боја

Веома је важно колико су ваши тастери за акцију активни. Превелико дугме ће надјачати све око њега. Дугме које је сувише мало изгубиће се приликом пребацивања свих осталих садржаја на страници. Желите да ваше дугме буде довољно велико да се издвоји без преплављивања дизајна.

Боја се може користити за одличан ефекат како би се уравнотежила величина ваших дугмади. За веће типке, одаберите боју која је мање изражена у вашем дизајну (али још увијек истиче позадину). За мање дугме, можда ћете желети да одаберете светлију, контрастну боју да бисте заиста направили поп тастер. У оба случаја, уверите се да боја која се користи поставља дугме одвојено без сукобљавања са укупним дизајном сајта.

Неке смернице:

• Тастери за позив на акцију би требали бити највећа дугмад на датој страници
• Користите контрастне боје да би се мањи тастери више истицали
• Користите мање различите боје да бисте увећали превелике дугмад
• Позивање на дугмад за акцију треба да привуче пажњу без преплављивања вашег дизајна

Језик

Тачна формулација коју изаберете да користите на дугмадима позива на радњу може имати огроман ефекат на конверзију. Упоредити “Буи Нов” са “Додај у колица“. Један је много хитнији од другог. Или о томе “Пробајте бесплатно” са “Бесплатна реклама“? Један је много јачи од другог и истиче се више.

Језик који користите на тастерима за позив на акцију треба да буде што једноставнији и једноставнији. Желите да посетиоци знају само једним погледом тачно шта ће добити када кликну на дугме. Ако их испитују, то значи да су паузирали, што може довести до нижих стопа конверзије.

Не заборавите ни на величину фонта. Текст на дугмету за позив на акцију треба да буде велик и подебљан, исправно прилагођен величини и боји самог дугмета. Уверите се да постоји довољан контраст и да је текст лако читљив.

Неке смернице:

• Користите једноставан, директан језик
• Користите велики, подебљани фонт на дугмету за главни текст
• Побрините се да језик јасно захтијева одређену акцију

Цреате Ургенци

Желите да посетиоци на вашем сајту изведу жељене акције са што мање мисли. Иако не желите да преварите своје посетиоце, што им више прилика да се зауставе и размотре шта раде, то им даје више могућности да кажу “не”.

Желите да вам дугмад дају утисак да морају одмах да реагују. Желите да их охрабрите да одмах донесу одлуку, у тренутку. Иако ово неће функционисати за сваки тастер за позив на акцију (посебно оне за куповину ставки са високим ценама), за јефтине или бесплатне акције, пожељно је да посетиоци кликну са мало промишљања.

Неке смернице:

• Охрабрите своје посетиоце да одмах реагују
• Не дајте својим посетиоцима било какав разлог за паузу
• Иако је хитност важна, немојте на било који начин обмањивати своје посетиоце

Обезбедите додатне информације

Када је то прикладно, користите дугмад за позив на акцију да бисте посетиоцима дали додатне информације о томе шта ће добити ако кликну на дугме. То се најчешће види помоћу пробних дугмади или дугмади за преузимање. Уобичајени примери додатних информација укључују дужину трајања бесплатне пробе или величину преузимања датотеке. Информације о верзијама се такође обично виде.

Када укључите додатне информације, запамтите да треба да задржите фокус на стварном позиву на акцију. Побрините се да текст за језик који привлачи посјетитеље да дјелује буде најистакнутији, а друге информације су много мање видљиве.

Неке смернице:

• Само додајте додатне информације када додају корисничко искуство
• Додатне информације су прикладне само за неке типове типки за позивање на акцију, од којих су најпознатији типке за преузимање или пробне типке
• Уверите се да је главни позив на акцију и даље најистакнутији текст на вашем дугмету

Приоритет

Важно је дати приоритет дугмадима позива на акцију на вашој страници ако их има више. Ово се може урадити на више начина, али најчешћи су употребом боје и величине.

Користите боју да означите најважније дугме на страници или да мање важне ставке изгледају мање истакнуте. Или употријебите величину како бисте истакли најважније дугме (тако што ћете га повећати) и уклонити нагласак на оне мање важне.

Иконе и слике

Укључивање визуелних знакова у дугмад за позив на акцију такође може помоћи у повећању стопе конверзије. Икона колица за куповину на “Додај у колица” дугме, на пример, или стрелица на дугме за преузимање су добри примери. Размислите ио јединственим иконама које ћете користити, али уверите се да икона додаје корисничком доживљају тако што ћете појаснити за шта је дугме и не додаје никакву конфузију.

Неке смернице:

• Уверите се да иконе које користите помажу да разјасните значење вашег дугмета, уместо да га мешате
• Лако препознатљиве иконе могу одмах указати на значење вашим посетиоцима
• Немојте се плашити да користите иконе које се мање користе, све док је њихово значење још увек јасно

Примери

Ево неколико примери одличних дугмади за позив на акцију. Иако не одговарају свим горе наведеним смјерницама, они задовољавају довољно критерије да би се сматрали великим.

Ливестреам - Диференцирање "буи нов" (за плаћене опције) и "пријавите се" (за бесплатне опције) дугме је добра стратегија.

виндовс 7 - Велики, зелени "Гет Виндовс7" дугме је лако за посетиоце.

Филесхаре ХК - Светло зелено дугме овде се истиче на белој позадини.

Логбоок - Користећи различите боје за дугмад "Довнлоад" и "Буи", они се разликују и дају приоритет дугмету "Купи".

ТастеБоок - Ово дугме одлично користи икону и користи већи, подебљани текст да се истакне.

ГоодБарри - Још једно јарко зелено дугме за позив на акцију.

Лифетрее Цреативе - Наставак истог слова од копије тела до позива на акцију ствара осећај кохезије.

Тхе Ресуматор - Јарко црвено дугме позива на акцију подебљано се истиче на плавој позадини.

Нотепод - Добар пример укључивања додатних информација у дугме позива на акцију.

Инкд - Одличан пример одређивања приоритета тастерима величине.

Елегантне теме - Још један одличан пример коришћења боје за истицање без сукобљавања са околним елементима дизајна.

ЗенДеск - Још један одличан пример израде дугмета се истиче коришћењем боје.

Сторенви - Округли тастер је неочекиван и издваја се, посебно када је окружен белом границом.

Бара'Маил - Понекад дугме које се уклапа боље функционише у целокупном дизајну сајта, посебно када је акција мање хитна.

Море Ресоурцес

• Позиви за акцију Буттонс: Примери и најбоље праксе - из Смасхинг Магазине
• Добри тастери за позив на акцију - од УКС Боотх-а
• Позив на акцију Дугмад: да ли је величина битна? - Од Гет Еластиц
• 10 Технике за ефективно “Позив на акцију” - Фром Боагворлд
• 5 Савети за креирање ефективног дугмета за позив на радњу - из СитеПоинт-а