5 савета за дизајнирање победничког „дугмета за куповину“

Ако сте дизајнер, или онлине маркетер, или сте случајно поседовали веб сајт на коме покушавате нешто да продате, у неком тренутку ћете морати да дизајнирате одговарајуће "дугме за куповину". И онда, брзо ћете сазнати да сте само ставили “буи нов” текст на плавом правоугаонику једноставно није довољан ако се надате добрим резултатима.

Срећом, дизајнирање одговарајућег "дугмета за куповину" није толико тешко када се упознају основна знања. Ево иде.

Пре свега, текст на вашем дугмету је најважнија ствар, али постоје неке друге карактеристике које треба ријешити. Зашто кажем да је текст најважнији? Замислите ово - у чему је сврха имати лепо дизајниран тастер ако текст на њему пише “Ићи дођавола!”? Случај затворен. Добра копија је место где се новац прави.

У данашњем чланку расправљамо 5 пресудних особина правог "дугмета за куповину". Хајде да погледамо!

1. Општи стил

Ово је прва тачка на овој листи не без разлога, јер је то најважнија особина.

Желиш да окрените дугме у љубичасту краву. Ово је концепт који је Сетх Годин популаризовао. Укратко, желите да буде изванредан; мислим на нешто што се не може занемарити. Нешто као пурпурна крава усред пашњака.

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

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

Дозволите ми да вам дам одличан пример дугмета сличног љубичастој крави.

Мозилла Фирефок

Овако изгледа страница за преузимање Фирефок-а. Желим да приметиш једну ствар. Дугме на левој страни, дугме за преузимање, не изгледа као ништа друго на тој страници. То је једина зелена ствар. То је једино место које представља Фирефок лого. То је један од највећих елемената тамо. Налази се изнад прегиба.

Сва ова својства чине ово дугме изузетно видљивим. То је љубичаста крава. Ако кажеш да га не видиш, само покушаваш да импресионираш некога.

Укратко: Циљ је да имате невероватан тастер.

2. Изглед

Почнимо од боја.

Ако желите да будете изванредни, користите боју која се не користи нигде другде на страници. Баш као што Фирефок дечки раде на свом сајту. Можете да користите алатку као што је Цолор Сцхеме Десигнер да бисте пронашли боју која изгледа добро са тренутном шемом боја вашег веб сајта, али је још увек веома различита.

И “различит” овде је кључна реч. Ако је ваша веб страница углавном плава, не желите плави гумб за куповину. Не желиш нијансу плаве. Не желиш ништа што изгледа плавичасто. Желите ружичасту, или наранџасту, итд. Сигуран сам да сте схватили.

Још један трик. Наранџа је позната као највидљивија боја одмах након црвене боје. Али, то не подиже све негативне емоције које црвена ради (ствари попут “зауставити”, “пази!”, и “опасност”). Најпопуларније наранџасто дугме на интернету може се наћи на амазон.цом.

Следећа ствар на коју се треба фокусирати је величину дугмета. Па, шта да кажем, треба да буде БИГ. Што је већи, то је боље. (Поново, Фирефок пример.)

“Могу ли још више повећати?” је добро питање које треба поставити током фазе пројектовања. Уради то много.

Требало би једноставна или јефтина? Дугме не може бити превише блиставо. Поново погледајте Фирефок дугме. То је необично. На њој је наранџаста лисица, али ипак изгледа као дугме. А то је граница коју не можете прећи. Ако ваше дугме не изгледа као да га нико неће кликнути.

Зато нема једноставног одговора на кога је боље - необично или једноставно. Само морате да сазнате за себе. Увек подељен тест. Направите два дугмета, један јефтин и један једноставан. Користите их обоје у исто вријеме, и погледајте који је бољи. Гоогле Оптимизатор Веб локација ће вам помоћи у томе.

Само кратак пример једноставног дугмета.

ТхемеФусе

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

На пример, са само једном линијом:

[буттон линк = "домаин.цом"] Кликните овде да купите мој одличан производ! [/ буттон]

Добијам овај резултат:

3. Фонт

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

Желите да копија на вашем дугмету буде што је више могуће читљива, јер је то најважнији део текста на страници. Све капе нису добра идеја. Мјешовити случај ради много боље. Под мешовитим случајем мислим на прво слово сваке речи које је велико слово. (Осим ријечи попут “за”, “тхе”, “и”, итд.)

(Извор слике: Гомедиазине)

Неки сигурни фонтови које можете користити су: Ариал, Хелветица, Франклин Готхиц, Мириад или било који други класични санс-сериф фонт, заиста.

Шта је са бојом. Наравно, копија треба да буде у високом контрасту са бојом дугмета. Не желиш сиво-сиво. Желите црно-бело или плаво-на-наранџасто.

Поново, текст мора бити врло читљив.

4. Плацемент

Најбољи положај зависи од дизајна вашег сајта, што вероватно не изненађује. Али још увијек постоје нека правила која вриједи поштовати.

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

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

Наравно, то треба да буде највидљивије место у исто време. То значи двије ствари:

1. То апсолутно мора бити постављен изнад прелома, и
2. Немојте се бојати размака. Вхитеспаце је пријатељ сваког доброг веб дизајнера. Запамтите, није важно колико ствари можете поставити на веб-локацију, битно је колико ствари можете уклонити из њега.

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

5. Додатни елементи

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

Мој омиљени пример - пример Фирефока - користи један заиста кул додатни елемент - наранџасту лисицу (ака њихов лого).

Правило је да се користе додатни елементи нагласите сврху дугмета. На пример, две стрелице према доле раде сјајно за дугме за преузимање. Икона корпе за куповину одлично функционише помоћу дугмета адд-то-царт (пример изнад Амазон). Повећало одлично ради са дугметом за претрагу. И тако даље.

Можете користити и неке елементе брендирања. На пример, ствари као што су: стандардни РСС иконица са дугметом за претплату на феед, икона за птице са дугметом "пратите ме на Твиттеру", наранџаста лисица са дугметом довнлоад-фирефок, сопствени лого са буи-ми- буттон буттон.

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

Вакеинтерацтиве

Цоммерциалик

Медиатемпле

Унлоцкинг.цом

Софасурфер.еу

Уплоадифи

Снага "слободног"

Још један трик је употреба најмоћније ријечи на енглеском језику - БЕСПЛАТНО. Кад год се нешто рекламира као бесплатно, људи почињу да се понашају предвидљиво ирационално (погледајте велику књигу Дан Ариели, "Наопако ирационалности" да сазнам на шта мислим.)

Још примера:

Фресхбоокс

Вуфоо

Фрееагент.цом

Шта је следеће?

Ако сте искусни у Пхотосхопу или неком другом сличном софтверу, можете одмах да направите лепо дугме. Други начин је да постанете сретни власник било које ВордПресс теме од ТхемеФусе, као што сам раније споменуо у овом посту.

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