5 porad dotyczących projektowania zwycięskiego przycisku „Kup”

Jeśli jesteś projektantem lub sprzedawcą online lub po prostu masz stronę internetową, na której próbujesz coś sprzedać, w pewnym momencie będziesz musiał zaprojektować odpowiedni przycisk „kup”. A potem szybko dowiesz się, że właśnie wstawiasz “Kup Teraz” tekst na niebieskim prostokącie nie wystarczy, jeśli masz nadzieję na dobre wyniki.

Na szczęście zaprojektowanie odpowiedniego „przycisku kupna” nie jest takie trudne, gdy poznasz podstawową wiedzę. Tutaj idzie.

Przede wszystkim tekst na przycisku jest najważniejszy, ale istnieje kilka innych funkcji, które należy rozwiązać. Dlaczego mówię, że tekst jest najważniejszy? Wyobraź sobie to - jaki jest sens posiadania pięknie zaprojektowanego przycisku, jeśli tekst na nim jest napisany “Idź do diabła!”? Sprawa zamknięta. Dobra kopia to miejsce, w którym gromadzone są pieniądze.

W dzisiejszym artykule dyskutujemy 5 kluczowych cech odpowiedniego przycisku „Kup”. Spójrzmy!

1. Ogólny styl

Jest to punkt nr 1 na tej liście nie bez powodu, ponieważ jest to najważniejsza cecha.

Chcesz zamień swój guzik w fioletową krowę. Jest to koncepcja spopularyzowana przez Setha Godina. Krótko mówiąc, chcesz, aby było to niezwykłe; co niezwykłe, mam na myśli coś, czego nie można przeoczyć. Coś jak purpurowa krowa na środku pastwiska.

Niektórzy projektanci nie są w tym szczególnie dobrzy. Kuszące jest stworzenie przycisku, który pięknie łączy się z kolorami i stylem witryny, na której się znajduje. Na początku wydaje się to bardzo dobrym pomysłem, tylko że nie.

Problem polega na tym, że taki przycisk jest daleki od niezwykłego. Nie chcesz, aby przycisk się mieszał; chcesz, żeby się wyróżniało. Dlatego powinien być utworzony jako całkowicie oddzielny element, który po prostu znajduje się na jakiejś stronie internetowej, a nie jako coś, co musi być zgodne z tą stroną.

Pozwólcie, że podam wam wspaniały przykład przycisku podobnego do krowy purpurowej.

Mozilla Firefox

Tak wygląda strona pobierania Firefox. Chcę, żebyś zauważył jedną rzecz. Przycisk po lewej stronie, przycisk pobierania, nie przypomina niczego innego na tej stronie. To jedyna zielona rzecz. To jedyne miejsce, które prezentuje logo Firefox. To jeden z największych elementów. Znajduje się nad fałdą.

Wszystkie te cechy sprawiają, że ten przycisk jest bardzo widoczny. To purpurowa krowa. Jeśli mówisz, że tego nie widzisz, próbujesz zaimponować komuś.

W skrócie: Celuj w posiadanie niezwykłego przycisku.

2. Wygląd

Zacznijmy kolor.

Jeśli chcesz być niezwykły, użyj koloru, który nie był używany nigdzie indziej na stronie. Podobnie jak faceci z Firefox robią na swojej stronie internetowej. Możesz użyć narzędzia takiego jak Color Scheme Designer, aby znaleźć kolor, który wygląda dobrze z aktualną kolorystyką witryny, ale nadal jest bardzo różny.

I “różne” to słowo kluczowe tutaj. Jeśli Twoja strona jest głównie niebieska, nie chcesz mieć niebieskiego przycisku kupna. Nie chcesz odcienia niebieskiego. Nie chcesz niczego, co wygląda na niebieskawe. Chcesz różowy lub pomarańczowy itp. Jestem pewien, że rozumiesz.

Jeszcze jedna sztuczka. Pomarańczowy jest znany jako najbardziej widoczny kolor zaraz po czerwonym. Ale to nie podnosi wszystkich negatywnych emocji czerwonych (rzeczy takich jak “zatrzymać”, “Uważaj!”, i “zagrożenie”). Najbardziej popularny pomarańczowy przycisk w Internecie można znaleźć na stronie amazon.com.

Następną rzeczą, na której należy się skupić, jest rozmiar przycisku. Cóż mogę powiedzieć, to musi być DUŻE. Im większe, tym lepiej. (Ponownie, przykład Firefoksa).

“Czy mogę sprawić, że będzie jeszcze większy?” to dobre pytanie, które warto zadać podczas fazy projektowania. Zrób to dużo.

Tak być powinno proste lub krzykliwe? Przycisk nie może być zbyt krzykliwy. Spójrz na przycisk Firefox jeszcze raz. Jest krzykliwy. Ma na sobie pomarańczowy lis, ale nadal wygląda jak guzik. I to jest granica, której nie możesz przekroczyć. Jeśli twój przycisk nie wygląda tak, że nikt nigdy go nie kliknie.

Dlatego nie ma prostej odpowiedzi, która jest lepsza - krzykliwa lub prosta. Musisz się sam przekonać. Zawsze test podzielony. Utwórz dwa przyciski, jeden krzykliwy i jeden prosty. Użyj ich obu jednocześnie i zobacz, który z nich działa lepiej. W tym pomoże Ci Optymalizator witryny Google.

Szybki przykład prostego przycisku.

ThemeFuse

Jak widać przycisk nie używa żadnych pomarańczowych lisów, ale nadal jest bardzo widoczny. W gruncie rzeczy ThemeFuse (premium sklep z motywami WordPress, którego jestem częścią) zapewnia trochę czegoś zwanego shortcodes. Między innymi te skróty sprawiają, że naprawdę łatwo jest tworzyć ładne przyciski.

Na przykład za pomocą jednej linii:

[button link = "domain.com"] Kliknij tutaj, aby kupić mój niesamowity produkt! [/ button]

Mam ten wynik:

3. Czcionka

Czcionka bezszeryfowa jest standardem dla wszystkich rodzajów przycisków. To dlatego, że czcionki bezszeryfowe są bardzo czytelne dla każdego użycia online. (Z drugiej strony, czcionki szeryfowe są lepsze dla publikacji drukowanych).

Chcesz, aby kopia na przycisku była tak czytelna, jak to możliwe, ponieważ jest to najważniejszy fragment tekstu na stronie. All-caps nie są dobrym pomysłem. Mieszane etui działa znacznie lepiej. Przez przypadek mieszany rozumiem pierwszą literę każdego słowa będącego wielką literą. (Z wyjątkiem słów takich jak “dla”, “”, “i”, itp.)

(Źródło zdjęcia: Gomediazine)

Niektóre bezpieczne czcionki, których możesz użyć to: Arial, Helvetica, Franklin Gothic, Myriad lub dowolna inna klasyczna czcionka bezszeryfowa, naprawdę.

A co z kolorem? Kopia powinna oczywiście mieć duży kontrast z kolorem przycisku. Nie chcesz szaro-na szaro. Chcesz czarno-białe lub niebiesko-pomarańczowe.

Ponownie tekst musi być bardzo czytelny.

4. Umieszczenie

Najlepsze rozmieszczenie zależy od projektu Twojej strony, co prawdopodobnie nie jest zaskakujące. Ale nadal istnieją pewne zasady, które warto przestrzegać.

Umieść go w najbardziej oczywiste miejsce możliwe. Nie próbuj być kreatywnym. Miejsce powinno być oczywiste dla klienta / użytkownika.

Za każdym razem, gdy ktoś odwiedza witrynę, oczekuje pewnych rzeczy w określonych miejscach. Rzeczy takie jak: logo w lewym górnym rogu, podsumowanie koszyka w prawym górnym rogu, klauzula praw autorskich w stopce itp. Twoim zadaniem jest dowiedzieć się, co jest najbardziej oczywistym miejscem na przycisk zakupu i po prostu go tam umieścić.

Oczywiście musi to być najbardziej widoczne miejsce w tym samym czasie. Oznacza to dwie rzeczy:

1. To absolutnie musi zostać umieszczony nad fałdą, i
2. Nie bój się białych znaków. Biała przestrzeń jest przyjacielem każdego dobrego projektanta stron internetowych. Pamiętaj, że nie ma znaczenia, ile rzeczy możesz umieścić na stronie internetowej, ważne jest, ile rzeczy możesz z niej usunąć.

Możesz umieścić swoją strategię umieszczania na sterydach, duplikując przycisk, a także umieszczając go na dole strony. W ten sposób, gdy ktoś przeczyta całą stronę, może nadal podejmować działania na samym dole.

5. Dodatkowe elementy

To wisienka na torcie. Dodatkowe elementy jeszcze bardziej poprawiają widoczność Twojego przycisku. Przykłady elementów: strzałki, wózki sklepowe, lupy, znaki plus lub różne elementy marki.

Mój ulubiony przykład - przykład Firefoksa - korzysta z jednego naprawdę fajnego dodatkowego elementu - pomarańczowego lisa (znanego także jako ich logo).

Podstawową zasadą jest użycie dodatkowych elementów podkreślić cel przycisku. Na przykład dwie strzałki skierowane w dół świetnie nadają się do przycisku pobierania. Ikona koszyka na zakupy działa świetnie z przyciskiem dodawania do koszyka (przykład amazonu powyżej). Szkło powiększające działa świetnie z przyciskiem wyszukiwania. I tak dalej.

Możesz także użyć niektórych elementów marki. Na przykład takie rzeczy jak: standardowa ikona RSS z przyciskiem subskrybuj kanał, ikona ptaka z przyciskiem „śledź mnie na Twitterze”, pomarańczowy lis z przyciskiem pobierania-firefox, własne logo z kupnem-my- przycisk rzeczy.

Oto kilka przykładów:

Wakeinteractive

Commercialiq

Mediatemple

Unlocking.com

Sofasurfer.eu

Uploadify

Moc „Free”

Jeszcze jedna sztuczka to użycie najpotężniejszego słowa w języku angielskim - ZA DARMO. Kiedykolwiek coś jest reklamowane jako darmowe, ludzie zaczynają działać w sposób przewidywalnie irracjonalny (sprawdź świetną książkę autorstwa Dan Ariely, „The Upside of Irrationality”, aby dowiedzieć się, co mam na myśli.)

Więcej przykładów:

Freshbooks

Wufoo

Freeagent.com

Co dalej?

Jeśli jesteś biegły w Photoshopie lub innym podobnym oprogramowaniu, możesz teraz po prostu stworzyć ładny przycisk. Innym sposobem jest zostanie szczęśliwym posiadaczem dowolnego motywu WordPress przez ThemeFuse, jak wspomniałem wcześniej w tym poście.

Jaka jest twoja rada dotycząca projektowania świetnego przycisku kupna? Chciałbym zaktualizować ten post swoimi opiniami.