Laman » UI / UX » 5 Tips Merancang Winning Buy Button

    5 Tips Merancang Winning Buy Button

    Jika anda seorang pereka, atau pemasar dalam talian, atau anda hanya mempunyai laman web di mana anda cuba menjual sesuatu, pada satu ketika anda perlu merancang butang "beli" yang betul. Dan kemudian, anda akan dengan cepat mengetahui bahawa hanya meletakkan “beli sekarang” teks di segi empat biru tidak cukup jika anda mengharapkan hasil yang baik.

    Nasib baik, mereka bentuk "butang beli" yang betul tidak begitu sukar apabila anda mengetahui beberapa pengetahuan asas. Di sini pergi.

    Pertama sekali, yang teks pada butang anda adalah perkara yang paling penting, tetapi ada beberapa ciri lain yang perlu ditangani. Mengapa saya katakan bahawa teks itu adalah yang paling penting? Bayangkan ini - apa gunanya mempunyai butang yang direka dengan indah jika teks di atasnya mengatakan “Pergi ke neraka!”? Kes ditutup. Salinan yang baik adalah di mana wang dibuat.

    Dalam artikel hari ini, kita berbincang 5 sifat penting daripada "butang beli" yang betul ". Mari kita lihat!

    1. Gaya keseluruhan

    Ini adalah titik # 1 pada senarai ini bukan tanpa alasan, kerana ia adalah sifat yang paling penting.

    Anda mahu belok butang anda ke dalam lembu ungu. Ini adalah konsep yang dipopularkan oleh Seth Godin. Singkatnya, anda mahu ia menjadi luar biasa; dengan luar biasa saya maksudkan sesuatu yang tidak boleh diabaikan. Sesuatu seperti seekor ungu di tengah padang rumput.

    Sesetengah pereka tidak begitu baik dalam hal ini. Ia menggoda untuk mencipta butang yang mengikat indah dengan warna dan gaya laman web yang ia duduk. Pada mulanya ia kelihatan seperti idea yang sangat baik, hanya tidak.

    Masalahnya adalah bahawa butang sedemikian jauh dari luar biasa. Anda tidak mahu butang anda digabungkan; anda mahu ia menonjol. Oleh itu, ia perlu dicipta sebagai unsur yang sama sekali berasingan yang hanya berlaku di beberapa laman web, bukan sebagai sesuatu yang perlu bersesuaian dengan laman web tersebut.

    Izinkan saya memberi anda contoh yang bagus seperti butang seperti ungu-lembu.

    Mozilla Firefox

    Inilah halaman muat turun Firefox. Saya mahu anda melihat satu perkara. Butang di sebelah kiri, butang muat turun, tidak kelihatan seperti apa-apa lagi di halaman itu. Ia satu-satunya perkara yang hijau. Ini satu-satunya tempat yang membentangkan logo Firefox. Ini salah satu elemen terbesar di sana. Ia terletak di atas lipatan.

    Kesemua ciri ini menjadikan butang ini sangat kelihatan. Ia adalah seekor ungu. Jika anda mengatakan anda tidak melihatnya, anda hanya cuba menarik perhatian seseorang.

    Secara ringkas: Bertujuan untuk mempunyai butang yang luar biasa.

    2. Penampilan

    Mari bermula dengan warna.

    Sekiranya anda ingin menggunakan warna yang tidak digunakan di tempat lain di halaman ini. Sama seperti orang Firefox lakukan di laman web mereka. Anda boleh menggunakan alat seperti Pereka Skema Warna untuk mencari warna yang kelihatan baik dengan skema warna semasa laman web anda tetapi masih sangat berbeza.

    Dan “berbeza” adalah kata kunci di sini. Sekiranya laman web anda kebanyakannya biru, anda tidak mahu butang membeli biru. Anda tidak mahu warna biru. Anda tidak mahu apa-apa yang kelihatan kebiru-biruan. Anda mahu merah jambu, oren, dan lain-lain. Saya pasti anda mendapat titik.

    Satu lagi helah. Orange dikenali sebagai warna paling ketara selepas merah. Tetapi, ia tidak menimbulkan semua emosi negatif merah tidak (perkara seperti “berhenti”, “perhatikan!”, dan “bahaya”). Butang oren yang paling popular di internet boleh didapati amazon.com.

    Perkara seterusnya untuk memberi tumpuan adalah saiz butang. Nah, apa yang boleh saya katakan, ia perlu BESAR. Yang lebih besar adalah lebih baik. (Sekali lagi, contoh Firefox.)

    “Bolehkah saya membuatnya lebih besar lagi?” adalah soalan yang baik untuk bertanya semasa fasa perancangan. Lakukan banyak perkara.

    Sekiranya ia berlaku mudah atau mewah? Butang tidak boleh terlalu mencolok. Lihatlah butang Firefox sekali lagi. Ia sangat mencolok. Ia mempunyai rubah oren di atasnya, namun ia masih kelihatan seperti butang. Dan itu adalah sempadan yang anda tidak dapat menyeberang. Jika butang anda tidak kelihatan seperti seseorang tidak akan pernah mengkliknya.

    Itulah sebabnya tidak ada jawapan yang mudah untuk mana yang lebih baik - mencolok atau mudah. Anda hanya perlu mengetahui sendiri. Selalu berpecah ujian. Buat dua butang, satu mencolok dan satu mudah. Gunakan kedua-dua mereka pada masa yang sama, dan lihat siapa yang melakukan lebih baik. Google Website Optimizer akan membantu anda dengan itu.

    Hanya satu contoh ringkas butang yang ringkas.

    ThemeFuse

    Memandangkan anda dapat melihat butang itu tidak menggunakan rubah oren, tetapi ia masih sangat kelihatan. Sebenarnya, ThemeFuse (sebuah kedai tema premium WordPress, yang saya sebilangan) menyediakan sedikit kod yang dipanggil kod pendek. Antara lain, kod pendek menjadikannya sangat mudah untuk membuat butang mencari yang bagus.

    Contohnya, dengan hanya satu baris:

    [butang pautan = "domain.com"] Klik di sini untuk membeli produk hebat saya! [/ butang]

    Saya mendapat keputusan ini:

    3. Fon

    Fon Sans-serif adalah standard untuk semua jenis butang. Itu kerana fon sans-serif sangat mudah dibaca untuk setiap penggunaan dalam talian. (Di sebelah flip, fon serif lebih baik untuk penerbitan cetakan.)

    Anda mahu salinan pada butang anda dapat dibaca sebaik mungkin, kerana ia merupakan sekeping teks yang paling penting pada halaman. Semua topi bukan idea yang baik. Kes campur kerja lebih baik. Dengan kes gabungan saya maksudkan huruf pertama setiap perkataan menjadi watak huruf besar. (Kecuali kata-kata seperti “untuk”, “yang”, “dan”, dan lain-lain.)

    (Sumber imej: Gomediazine)

    Beberapa fon selamat yang boleh anda gunakan ialah: Arial, Helvetica, Franklin Gothic, Myriad, atau mana-mana font klasik sans-serif lain, benar-benar.

    Sekarang bagaimana dengan warna. Salinan itu sememangnya sangat berbeza dengan warna butang. Anda tidak mahu kelabu abu-abu. Anda mahu hitam-putih, atau biru-pada-oren.

    Sekali lagi, teks itu perlu dibaca dengan sangat baik.

    4. Penempatan

    Peletakan terbaik bergantung kepada reka bentuk laman web anda, yang mungkin tidak menghairankan. Tetapi masih terdapat beberapa peraturan yang patut dipatuhi.

    Letakkan di dalam tempat yang paling jelas mungkin. Jangan cuba kreatif di sini. Penempatan harus jelas kepada pelanggan / pengguna.

    Setiap kali seseorang melawat laman web mereka mengharapkan untuk melihat perkara-perkara tertentu di tempat-tempat tertentu. Perkara-perkara seperti: logo di sudut kiri atas, ringkasan keranjang belanja di sudut kanan atas, klausa hak cipta di footer, dan lain-lain. Tugas anda adalah untuk mencuba untuk mengetahui apakah tempat yang paling jelas untuk membeli butang dan letakkan di sana.

    Sudah tentu, ia perlu menjadi tempat yang paling jelas pada masa yang sama. Ini bererti dua perkara:

    1. Ia betul-betul perlu diletakkan di atas lipatan, dan
    2. Jangan takut ruang kosong. Whitespace adalah rakan setiap pereka web yang baik. Ingat, tidak kira betapa banyak perkara yang boleh anda letakkan di laman web, perkara penting ialah berapa banyak barangan yang anda boleh alih keluar dari itu.

    Anda boleh meletakkan strategi penempatan pada steroid dengan menduplikasi butang dan juga meletakkannya di bahagian bawah halaman. Dengan cara itu, apabila seseorang membaca seluruh halaman, mereka masih boleh bertindak di bahagian bawahnya.

    5. Unsur tambahan

    Ini adalah icing pada kek. Elemen tambahan meningkatkan keterlihatan butang anda lebih jauh. Contoh elemen: anak panah, kereta belanja, gelas pembesar, tanda tambah, atau pelbagai unsur penjenamaan.

    Contoh kesukaan saya - contoh Firefox - menggunakan satu elemen tambahan yang hebat - rubah oren (aka logo mereka).

    Peraturan praktikal adalah menggunakan unsur-unsur tambahan menekankan maksud butang tersebut. Sebagai contoh, dua anak panah menunjuk ke bawah berfungsi hebat untuk butang muat turun. Ikon keranjang belanja berfungsi dengan baik dengan butang add-to-cart (contoh amazon di atas). Kaca pembesar berfungsi dengan baik dengan butang carian. Dan sebagainya.

    Anda juga boleh menggunakan beberapa unsur penjenamaan. Sebagai contoh perkara-perkara seperti: ikon RSS standard dengan butang langganan-makanan, ikon burung dengan butang follow-me-on-twitter, rubah oren dengan butang muat turun-firefox, logo anda sendiri dengan pembelian- butang barangan.

    Berikut adalah beberapa contoh:

    Wakeinteractive

    Commercialiq

    Mediatemple

    Unlocking.com

    Sofasurfer.eu

    Muat naik semula

    Kuasa "Percuma"

    Satu lagi silap mata adalah penggunaan perkataan yang paling berkuasa dalam bahasa Inggeris - PERCUMA. Apabila ada sesuatu yang diiklankan secara percuma, orang mula bertindak tidak dapat direalisasikan (lihat buku hebat oleh Dan Ariely, "The Upside of Irrationality" untuk mengetahui apa yang saya maksudkan.)

    Lebih banyak contoh:

    Buku baru

    Wufoo

    Freeagent.com

    Apa yang akan datang?

    Sekiranya anda mahir dalam Photoshop atau perisian sejenis yang lain, anda boleh teruskan dan buat butang yang bagus sekarang. Cara lain ialah untuk menjadi pemilik bertuah dari mana-mana tema WordPress oleh ThemeFuse, seperti yang telah saya sebutkan tadi dalam catatan ini.

    Apakah nasihat anda untuk mereka bentuk butang beli hebat? Saya ingin mengemas kini pos ini dengan pendapat anda.