Trots vad många människor kommer att berätta för dig, finns det inga hårda och snabba regler när det gäller knappar med knapptryckning. Ja, det är sant att stora, färgglada knappar, omgivna av gott om utrymme, oftast är mest framgångsrika, men det är viktigt att du skräddarsyr varje knapp till den primära uppgiften för den aktuella webbsidan, oavsett om det är att registrera, checka ut, registrera eller något annan. Som designer är det ditt jobb att göra det så enkelt som möjligt för besökare att uppnå dessa uppgifter och knapptrycksknappar är de mest kraftfulla verktygen till ditt förfogande, så använd dem klokt.
I allmänhet bör knapparna för hand-handling vara enkla och tydliga. De måste stå ut och fånga en användares uppmärksamhet. Allt måste noggrant övervägas, från de triggerord som används för färger, storlekar, former och positionering. Dessa knappar måste vara mycket synliga, men inte så säkra att de gör din webbplats galen eller obalanserad.
Nedan tittar vi närmare på 25 av de mest övertygande knapparna som finns på webben. Vi undersöker varför varje enskild knapp är så framgångsrik. Förhoppningsvis kommer de att ge dig en uppfattning om några grundläggande gör och don'ts och hjälpa till att inspirera dina egna mönster.
1. WordPress e-Commerce
Det är viktigt att låta din knapp sticka ut genom att använda färg. Om du kan välja en färg som knyts in med paletten på din webbplats, så är resultatet mer attraktivt.
2. Skype
Detta? Ladda ner nu? knappen är ganska enkel. Det är inte särskilt stort eller starkt färgat. Det är emellertid omgivet av gott om vitt utrymme, vilket gör det ännu mer märkbart för användarna.
3. Picsengine
Picsengine förlitar sig på placering för framgången med det? Se i åtgärd? knapp. Knappen sitter fast mitt i sidan, utan någon annan distraherande text, länkar eller knappar som omger den.
4. Mozilla Firefox
Mozilla Firefox? Gratis nedladdning? knappen har stimulerat mycket debatt. De flesta, inklusive mig själv, tror att dess stora, oregelbundet formade, levande färgade design är verkligen revolutionerande när det gäller call-to-action-grafik. En liten minoritet hävdar dock att det är förvirrande och inte alls liknar en knapp.
5. CakePHP
CakePHPs? Ladda ner? knappen har skapats med stor storlek och ovanlig form i åtanke. Dess klarhet har emellertid inte kommit på bekostnad av övergripande platsestetik. Den sitter bekvämt i bakgrunden tack vare det matchande färgschemat.
6. Crazyegg
Crazyegg har utformat sin webbplats runt sin action-knapp, som stolt ligger mitt på hemsidan, omgiven av gott om vitt utrymme. Den ljusgula färgen speglas endast av den andra knappen för att aktivera knappen på sidan - det mycket mindre? Logga in? knappen längst upp till höger.
7. Litmus
Litmus har inte gått överbord med sin kall-till-action-knapp; ändå är det mycket tydligt, tack vare i stor utsträckning till det tomma utrymmet som omger det och dess avrundade form, som inte echoes någon annanstans på sidan.
8. StumbleUpon
Att ha en primärfunktion, objekt per sida, gör det lättare för användarna att hitta knappknappar, men ibland är det bara inte möjligt. Det finns massor att klicka på StumbleUpon hemsida, men "Start Stumbling"? knappen står verkligen ut, tack vare dess användning av färg i en annars monoton inställning
9. Kom ihåg mjölken
Kom ihåg att mjölken erbjuder besökare flera alternativ på sin hemsida, men den viktigaste en-? Registrera nu!? - är den klart klaraste, placerad mitt på sidan, omgiven av en färgad ruta och aktiverad. Inget behov av snygga, ljusa färger här.
10. Lifetree Creative
Lifetree Creative har lyckats göra sin uppmaningsknapp riktigt stor, ännu större än företagslogotypen, utan att sidan blir obalanserad. Färg, form, storlek och utrymme har använts för stor effekt här.
11. Dailymil
Dailymile har gjort något ganska ovanligt med sin kall-till-action-knapp. Det läggs ut på toppen av allt annat på sidan, med en subtil droppskugga bakom den. Hjälpt också av det faktum att det är grönt, knappen knyter verkligen ut.
12. Carsonified
Carsonified hemsida innehåller massor av information, ändå? Köp dina biljetter? knappen lyser genom tack vare användningen av huvudstorlekar och färg. De vita bokstäverna sticker ut riktigt bra mot det röda.
13. planHQ
PlanHQ har använt kraften i det vita utrymmet för att accentuera sina knapptrycktangenter. Varken ljust färgad eller överdimensionerad, dessa knappar är klara tack vare de vita vitblock som de sitter i.
14. Saker
Saker har två knapptryckknappar på sin hemsida, vilka båda har samma betydelse för företaget. Av den anledningen är de en identisk form, storlek och färg, men båda står väl ut mot ljusblå och grå.
15. Livström
Röd är en utmärkt färg att använda när du vill dra uppmärksamhet till någonting. Det står bäst ut mot en svartvit bakgrund, som den som används på Liveströms hemsida. Pilens form av "Broadcast Now"? knappen, högst upp till höger, uppmanar användarna att klicka framåt.
16. Ncover
Ncover är ännu en webbplats med två knapptryckknappar på sin hemsida. Genom att använda färgen grön mot en blå bakgrund har Ncover lyckats prioritera en viktigare knapp över den andra.
17. Dashboard
Röd mot en svartvit bakgrundsfunktioner igen här. Förutom sin färg, Dashboard's? Prova det gratis !? knappen är mycket synlig tack vare sin storlek, vilket ger tillräckligt med utrymme för logotypen och? Registrera dig på 60 sekunder? att inkluderas.
18. Gratis människor
Den här sidan kan se ganska standard ut, men du skulle bli förvånad över hur många e-handelswebbplatser blir fel när det gäller deras? Lägg till i kundvagnen / kundvagnen? knappar. Free People's knapp är uppenbar utan att vara ungainly, tack vare sin färg och stora men blygsamma storlek.
19. ClickFormant
Vanligtvis är det bäst att använda industristandard utlösande ord för call-to-action-knappar. För en e-postlista bör knappen normalt läsas? Registrering? eller? gå med? Ibland kan emellertid varierande dessa ord verkligen lägga till ett företags varumärkesbild. Detta är vad ClickFormant har gjort genom att använda ordet "Inform?".
20. Kalculator
Stora knappar med stor funktionsknapp är ofta mycket framgångsrika, men kan se fula och ibland lite desperata. Medveten om detta har Koombea använt positionering, färg, utrymme och form, snarare än storlek, för att få sin knapp att lysa.
21. Basecamp
Basecamp drivs av en mycket intelligent gäng, så det kommer inte som någon överraskning att dess uppmaningsknapp är lika smart. Många webbplatser gör misstaget att placera en knapp högst upp på sidan, vilket är bra tills användaren rullar ner och det är dunkelt. Basecamps knapp visas två gånger: en gång längst upp och igen.
22. Spotify
Spotify s? Köp nu? knappen är ett utmärkt exempel på hur du bäst kan använda färg och utrymme. Ljusgrön och omgiven av vithet, är knappen uppenbar för alla.
23. Dropbox
Dropbox hemsida layout är lika logiskt och enkelt som Dropbox själv (ett fantastiskt verktyg som du verkligen borde försöka om du inte redan har det!) Besökare har inga illusioner om vad de borde göra här. De kan antingen? Se en video? eller? Hämta Dropbox? - Det är så enkelt som det.
24. 280 bilder
Den? Prova det nu? ? knappen vid 280 bilder är stor? riktigt stor! Det finns inget sätt att en besökare kan missa det. Det är blått, samma färg som bakgrunden, så ser inte ut som orätt som det lätt kunde.
25. FlockDraw
FlockDraw's? Starta ritning? knappen är en av de mest attraktiva i den här listan. Förutom den stora färgen, som markerar den från den dämpade bakgrunden, är den subtilt upplyst och understruken med mångfärgade penselsträngar.
Slutsats
Om en typ av uppmaningsknapp lyckades mer än någon annan, kan du vara säker på att varje webbplats skulle använda den. Även om det är möjligt att identifiera likheter mellan knapparna ovan är det klart många skillnader också. Det är viktigt att du testar olika kombinationer av funktionsknappar på din webbplats för att se hur varje påverkar omvandlingsfrekvensen. Du kan enkelt göra det med Google Website Optimizer. Oavsett vad dina knappar för knapptryckning ser ut, se till att de passar din övergripande webbdesign.