5 tipp a nyerő „Buy Button” megtervezéséhez
Ha Ön tervező vagy online marketingszakértő, vagy éppen olyan webhelyet birtokol, ahol valamit meg akarsz adni, egy bizonyos pillanatban meg kell terveznie a megfelelő "vásárlási gombot". Aztán hamar megtudja, hogy csak egy “Vásárolj most” a kék téglalap szövege nem elég, ha jó eredményeket vár.
Szerencsére a megfelelő „vásárlási gomb” megtervezése nem olyan nehéz, ha megismerjük az alapvető ismereteket. Itt megy.
Először is A gomb a legfontosabb szöveg, de vannak más funkciók is, amelyekkel foglalkozni kell. Miért mondom, hogy a szöveg a legfontosabb? Képzelje el ezt - mi a lényege, hogy egy szépen megtervezett gomb legyen, ha a szöveg megfogalmazza “Menj a pokolba!”? Ügy lezárva. A jó példány az, ahol a pénzeket készítik.
A mai cikkben megvitatjuk 5 fontos tulajdonság megfelelő "vásárlási gomb". Lássuk!
1. Általános stílus
Ez a lista # 1 pontja nem ok nélkül, mivel ez a legfontosabb tulajdonság.
Akarsz kapcsolja be a gombot egy lila tehénbe. Ez egy olyan koncepció, amelyet Seth Godin népszerűsít. Röviden, azt szeretné, hogy figyelemre méltó legyen; figyelemre méltóan azt értem valamit, amit nem lehet figyelmen kívül hagyni. Valami olyasmi, mint egy lila tehén a legelő közepén.
Néhány tervező nem különösen jó ebben. Csábító, hogy hozzon létre egy olyan gombot, amely szépen kötődik a weboldal színeihez és stílusához. Eleinte nagyon jó ötletnek tűnik, csak nem.
A probléma az, hogy egy ilyen gomb messze nem figyelemre méltó. Nem akarod, hogy a gombod beolvadjon; azt akarod, hogy kitűnjön. Ezért egy teljesen különálló elemként kell létrehozni, amely csak egy weboldalon ül, és nem olyan, mint amilyennek meg kell egyeznie a webhelyével.
Hadd adjak egy nagyszerű példát egy lila-tehénszerű gombhoz.
Mozilla Firefox
A Firefox letöltési oldala így néz ki. Azt akarom, hogy észrevegyél egy dolgot. A bal oldalon található gomb, a letöltés gomb semmit sem hasonlít az oldalon. Ez az egyetlen zöld dolog. Ez az egyetlen hely, amely bemutatja a Firefox logót. Ez az egyik legnagyobb elem. Ez a hajtás felett helyezkedik el.
Mindezek a tulajdonságok rendkívül láthatóvá teszik ezt a gombot. Ez egy lila tehén. Ha azt mondod, hogy nem látod, csak megpróbálod lenyűgözni valakit.
Dióhéjban: Célja egy figyelemre méltó gomb.
2. Megjelenés
Kezdjük a szín.
Ha figyelemre méltónak szeretné használni, használjon olyan színt, amelyet máshol nem használtak az oldalon. Csakúgy, mint a Firefox srácok a saját honlapján. Olyan eszközzel, mint a Color Scheme Designer, találhat olyan színt, amely jól néz ki a webhely jelenlegi színsémájával, de még mindig nagyon eltérő.
És “különböző” itt a kulcsszó. Ha a webhelye többnyire kék, akkor nem szeretne kék vásárlási gombot. Nem akarsz kék árnyalatot. Nem akarsz semmit, ami kékesnek látszik. Rózsaszín vagy narancssárga, stb.
Még egy trükk. A narancssárga a leginkább látható szín a vörös szín után. De ez nem emeli a piros negatív érzelmeket (például a dolgokat) “állj meg”, “vigyázz!”, és “veszély”). Az interneten található legnépszerűbb narancssárga gomb megtalálható amazon.com.
A következő dolog, hogy összpontosítson a gomb mérete. Nos, mit mondhatok, BIG-nek kell lennie. Minél nagyobb a jobb. (Ismét Firefox példa.)
“Még nagyobbra tehetek?” jó kérdés a tervezési szakaszban. Sokat csinálj.
Lehet egyszerű vagy ragyogó? Egy gomb nem lehet túl ragyogó. Nézze meg újra a Firefox gombot. Félelmetes. Narancssárga róka van rajta, mégis úgy néz ki, mint egy gomb. És ez egy határ, amit nem lehet átkelni. Ha a gomb nem néz ki, akkor senki sem fog rá kattintani.
Éppen ezért nincs egyszerű válasz, amelyre jobb lenne - ragyogó vagy egyszerű. Csak meg kell találnod magad. Mindig próbálkozzon. Hozzon létre két gombot, egy ragyogó és egy egyszerű. Mindkettőt egyszerre használja, és nézze meg, hogy melyik a jobb. A Google Webhely-optimalizáló segít ebben.
Csak egy gyors példa egy egyszerű gombra.
ThemeFuse
Mint látható, a gomb nem használ narancssárga róka, de még mindig jól látható. Tény, hogy a ThemeFuse (egy prémium WordPress tématároló, amely részem vagyok) egy kicsit valamit rövid kódnak nevez. Ezek a rövid kódok többek között megkönnyítik a szép megjelenésű gombok létrehozását.
Például csak egy sorral:
[gomb link = "domain.com"] Kattintson ide a félelmetes termék megvásárlásához! [/ button]
Ezt az eredményt kapom:
3. Betűtípus
Sans-serif betűtípus a standard gomb mindenféle gombhoz. Ennek az az oka, hogy a sans-serif betűkészletek minden online használathoz nagyon jól olvashatók. (A flip oldalon a serif betűtípusok jobbak a nyomtatott kiadványok számára.)
Azt akarod, hogy a gombod másolata a lehető legegyszerűbben olvasható legyen, mivel ez a lap legfontosabb szövege. Az all-caps nem jó ötlet. A vegyes ügyek sokkal jobban működnek. Vegyes esetekben azt értem, hogy minden szó első betűje nagybetűs. (Kivéve a szavakat “mert”, “a”, “és”, stb.)
(Képforrás: Gomediazine)
Bizonyos biztonságos betűtípusok: Arial, Helvetica, Franklin Gothic, Myriad vagy bármely más klasszikus sans-serif betűtípus..
Most mi van a színnel. A másolatnak természetesen nagy kontrasztban kell lennie a gomb színével. Nem akarsz szürke-szürke. Fekete-fehér vagy kék-narancssárga.
A szövegnek ismét jól olvashatónak kell lennie.
4. Elhelyezés
A legjobb elhelyezés az Ön webhelyének tervezésétől függ, ami valószínűleg nem meglepő. De még mindig van néhány szabály, amit érdemes betartani.
Helyezze azt a legnyilvánvalóbb hely lehetséges. Ne próbáljon itt kreatív lenni. Az elhelyezésnek nyilvánvalónak kell lennie az ügyfél / felhasználó számára.
Minden alkalommal, amikor valaki meglátogatja a weboldalt, bizonyos helyeken várnak bizonyos dolgokat. Olyan dolgok, mint a logó a bal felső sarokban, a bevásárlókosár összefoglalója a jobb felső sarokban, szerzői jogi záradék a láblécben, stb. A feladat az, hogy megpróbálja kitalálni, hogy mi a legnyilvánvalóbb hely a vásárláshoz, és csak tedd oda.
Természetesen egyszerre kell a leglátványosabb helynek lennie. Ez két dolgot jelent:
- Azt teljesen el kell helyezni hajtás felett, és
- Ne félj a helytől. A Whitespace minden jó webdesigner barátja. Ne feledje, nem számít, hogy mennyi dolgot tudsz elhelyezni egy weboldalon, fontos számít, hogy mennyi dolgot tudsz eltávolítani belőle.
Az elhelyezési stratégiát a gombok másolásával és az oldal alján elhelyezett szteroidokra helyezheti. Így, amikor valaki elolvassa az egész oldalt, mégis tudnak lépéseket tenni az alján.
5. Extra elemek
Ez a torta jegesedése. Az extra elemek tovább növelik a gomb láthatóságát. Példák elemekre: nyilak, bevásárlókocsik, nagyítóüvegek, plusz jelek vagy különböző márkaelemek.
Kedvenc példaem - a Firefox példa - egy igazán hűvös extra elemet használ - a narancssárga róka (más néven a logó).
A hüvelykujjszabály az, hogy extra elemeket használjon hangsúlyozzák a gomb célját. Például két nyíl, amely lefelé mutat, nagyszerűen működik a letöltéshez. A bevásárlókosár ikon nagyszerűen működik, ha egy kosárba nyomógombot (a fenti amazon példát) használ. A nagyító nagyszerűen működik egy keresőgombbal. Stb.
Néhány márkás elemet is használhat. Például: a szokásos RSS-ikon előfizetés-to-feed gombbal, egy madár ikon a következő-on-twitter gombbal, narancssárga róka, letölthető Firefox gombbal, saját logó a vásárlással cucc gomb.
Íme néhány példa:
Wakeinteractive
Commercialiq
Mediatemple
Unlocking.com
Sofasurfer.eu
Uploadify
A "szabad" teljesítmény
Egy másik trükk az angol nyelvű legerősebb szó használata - INGYEN. Amikor valamit szabadon hirdetnek, az emberek kiszámíthatatlanul elkezdenek cselekedni Dan Ariely, "Az irracionalitás csúcsa", hogy megtudja, mit értem.)
További példák:
FreshBooks
Wufoo
Freeagent.com
Mi a következő lépés?
Ha a Photoshop vagy más hasonló szoftverek ismerősei vagyunk, akkor csak most léphetünk előre, és hozzon létre egy szép gombot. Egy másik módja annak, hogy a ThemeFuse olyan szerencsés tulajdonosává váljon, mint bármelyik WordPress téma, amint azt már korábban említettem.
Mi a tanácsod egy nagy vásárlási gomb megtervezéséhez? Szeretném frissíteni ezt a hozzászólást a véleményeivel.
