Apakah rekabentuk laman web yang baik? Apakah prinsip web design yang perlu ada untuk meningkatkan conversion rate?

Di Small Ditch Studio, kami selalukan menekankan 3 perkara asas untuk memulakan perniagaan secara online:
1. Good website
2. Pull more traffic
3. Increase conversion rate

Three powerfull basic steps of how to sell online

Ramai Marketer akan memberi tumpuan yang lebih untuk pulling traffic to website seperti penerapan SEO, penguasaan media sosial, iklan di facebook, dan sebagainya. Namun rekaan laman web(web design) seringkali di abaikan. Rekabentuk laman web anda sebenarnya bukan sekadar kelihatan cantik, tetapi rekabentuk yang digunakan haruslah mampu membuat conversion.

Laman web yang baik mempunyai impak yang sangat besar kepada conversion rate. Jika diberikan 15 minit kepada sebahagian users untuk meneliti satu-satu laman web, terbukti dua pertiga users akan lebih memilih untuk membaca laman web yang rekabentuknya menarik. Jadi jika anda mahu orang membaca catatan konten(blog) di laman web anda, laman web perlulah kelihatan menarik.

Jika laman web anda tidak menarik, users akan meninggalkan laman web anda begitu sahaja. Oleh itu tidak dapat tidak rekabentuk laman web anda adalah antara perkara yang penting dan anda tidak boleh mengabaikannya. Lihat dan pelajari rekabentuk laman web yang sedia ada dan jadikannya inspirasi kepada laman web anda, atau anda gunakan khidmat web designer, atau apa sahaja, yang penting, jangan sesekali mengabaikan rekabentuk(design) laman web anda.

Logo

Logo lazimnya berada di sudut kiri atas. Klik pada logo akan membawa anda ke laman utama. Jangan tukarkan kelaziman ini. Untuk design logo, anda boleh sahaja mendapatkan khidmat designer atau menghasilkannya sendiri.

Navigation

User sudah sedia lazim dengan 2 jenis menu yakni samada mendatar atau menegak. Jangan ubah kelaziman ini. Ini sudah pon terbukti berfungsi dengan baik dan disokong oleh hasil daripada beberapa kajian yang dilakukan.

Anda harus selalu ingat, user sentiasa mempunyai pilihan untuk melayari laman web yang lain (laman web saingan anda). Jika anda menukar kelaziman ini, anda berisiko untuk kehilangan user.

Sebagai contoh, kelaziman user ketika menyemak bahagian "hubungi kami", ianya adalah di bahagian akhir, atau kedua-akhir dalam senarai menu. Tidak perlulah membuat kejutan atau cuba membuat sesuatu yang baru dengan mengubah kedudukan bahagian "hubungi kami" tersebut.

Semak bahagian Navigation di laman web Papypal di bawah. Semuanya mengikut kelaziman dan jelas.

Paypal Navigation Design great homepage to increase conversion rate

Menawarkan nilai(servis atau produk)

Ini adalah bahagian paling penting. Nilai ini dinyatakan dengan perkataan(tajuk utama, sub tajuk utama dan dan mungkin beberapa titik point) yang biasanya boleh menjawab soalan-soalan ini:
Ini laman web apa?
Laman web ini apa fungsinya?
Bagaimana laman web ini berguna kepada saya?
Mengapa saya perlu membeli/menggunakan servis daripada laman ini bukan dari yang lain?

Mudahkan user untuk faham. Jika mereka tidak mendapat jawapan di atas dalam beberapa saat, mereka akan pergi. Tiada customer yang suka teks yang panjang berjela. Dan jika anda tidak berjaya menarik mereka untuk kekal berada di laman web anda, anda telah membuat kerugian.

Terdapat beberapa cara untuk menyatakan nilai servis atau produk anda di laman web. Sebagai contoh, kid.io mempunyai Pernyataan Nilai yang baik:

Value Proposition in a website to boost conversion rate

Bold headline – menyatakan apa dan untuk siapa laman web ini
Sedikit penerangan yang terperinci di bawah headline
Visual atau grafik yang besar untuk menyokong perkataan

Membina hubungan

Kita mulakan dengan beberapa soalan untuk anda jawab. Berapa ketinggian anda? Berapa berat anda? Dan dimana anda selalu berjalan?(pejabat, kawasan pembinaan, dsb)

Katakanlah saya menjual kasut dan anda diberikan 2 pilihan. Pilihan pertama adalah kasut yang sesuai dipakai untuk semua orang, dan pilihan yang satu lagi adalah kasut yang direka benar-benar untuk orang yang tinggi dan beratnya seperti anda. Dan Kasut tersebut juga direka untuk digunakan di tempat anda selalu berjalan. Harga untuk kedua-dua pilihan ini pula sama. Sekarang, yang mana satu anda pilih? Jelas tanpa ragu bukan. Anda pasti memilih pilihan yang kedua.

Inilah sebabnya mengapa anda perlu menyatakan dengan jelas tentang produk atau perkhidmatan anda di laman web. Penyataan yang lebih spesifik dan jelas seperti ini jauh lebih baik daripada penyataan yang terlalu umum.

Perhatikan contoh dibawah. Bagaimana Shopify meletakkan kumpulan sasaran dalam penyataan nilai servis dan produk mereka.

Value proposition example on shopify website

Response user yang kita mahukan

Semakin banyak pilihan yang anda berikan kepada seseorang, semakin sukar untuk pilihan dibuat. Jika anda fikir user mempunyai masa yang banyak sebelum klik pada mana-mana button (sebagai response yang kita mahukan), adalah lebih baik untuk anda fikirkan semula.

Ini kerana, proses berfikir sebenarnya proses yang sukar dan anda sebaiknya memudahkan proses tersebut. Setiap reponse yang anda mahukan daripada user mestilah jelas. Dalam satu testing, keseluruhan rekabentuk laman web utama diubah dengan mengurangkan button untuk klik kepada hanya satu button, dan hasilnya, ternyata user telah response mengikut sepertimana yang dirancang.

Hick’s Law

Hicks Law applied to boost conversion

Bercakap tentang pilihan user, anda mungkin ingin cuba merujuk kepada Hick's law.

Hick's Law adalah teori popular yang digunakan sebagai rujukan di pelbagai sektor untuk tujuan yang berbeza. Dalam dunia web design juga, Hick's Law tidak terlepas menjadi salah satu rujukan yang penting. Dinamakan oleh ahli psikologi British, William Edmund Hick, menyatakan bahawa masa yang diperlukan untuk seseorang membuat keputusan adalah berpadanan secara langsung dengan pilihan yang mungkin dia ada.

Dalam perkataan yang lebih mudah, masa membuat keputusan meningkat berkadaran dengan pertambahan pilihan.

Kajian yang dijalankan oleh oleh ahli psikologi juga membuktikan teori ini. Mereka mendapati meja yang diletakkan dengan pilihan 24 jenis perisa jem kurang menarik minat customer, berbanding meja yang diletakkan dengan hanya enam jenis perisa jem.

Merujuk kepada Hick's Law ini juga kita faham bahawa, response user yang kita mahukan akan berkurangan jika jumlah pilihan ditingkatkan.

Kesimpulannya di sini, ketika membangunkan rekabentuk laman web, perkara yang seharusnya anda titik beratkan, adalah menghadkan jumlah pilihan(yakni pautan). Antaranya termasuklah pilihan yang ada pada bahagian Navigation. Pautan yang terlalu banyak hanya akan menyebabkan hilangnya minat user.

Semakin anda menghadkan pilihan user, lebih mudah laman web anda difahami user dan seterusnya ini akan meningkatkan conversion.

Call to action

Perkataan yang digunakan sebagai Call to Action mempunyai peranannya yang tersendiri bergantung kepada situasi tertentu. Sebagai contoh, terdapat satu kajian kes di mana Call to Action yang menggunakan perkataan buy(buy button) berjaya membuat conversion yang baik. Sebaliknya, dalam dunia e-commerce, Add to Cart (Add to Cart button) pula yang menjadi perkataan yang baik.

Dalam satu ujian yang lain, perkataan Beli SMS Kredit telah diubah kepada Lihat harga SMS, dan berjaya meningkatkan conversion. Walaupon ia kelihatan hanya perubahan kecil, ketahuilah sebenarnya, perubahan kecil ini memberikan impak yang sangat besar. Peningkatan sebanyak 36% dibuktikan pada kajian tersebut.

Contoh kajian lain adalah, peningkatan conversion sebanyak 83.4% berlaku selepas menukar perkataan Play right now kepada Instant demo!. Jadi, lakukan 'testing' kepada Call to Action anda untuk mencari perkataan yang sesuai.

Dolar Shave Club adalah satu contoh yang baik. Button Get Started benar-benar membantu untuk meningkatkan conversion mereka.

Greate call to action example

Web Copy

Web Copy juga antara yang sangat penting dan banyak yang boleh diperbincangkan mengenainya. Berikut adalah satu tip untuk dipertimbangkan;

Pengguna internet yang menggunakan enjin carian untuk mencari sesuatu produk atau servis, sudah tentu dari awal lagi tahu apa yang mereka cari dan apa yang mereka perlukan. Jika mereka menemui servis atau produk anda, mereka pastinya akan menyemak dengan lebih teliti kandungan laman web anda.

Oleh itu, menyediakan maklumat yang relevan dan tepat dalam Web Copy adalah sangat penting. Cubalah berkomunikasi dengan pelanggan anda dan perhatikan penggunaan bahasa mereka dan gunakanlah bahasa yang sama dalam web copy anda.

Sebagai contoh, apabila seseorang mencari produk pelangsingan yang bebas bahan kimia, 100% organik, selamat dan berkesan, inilah kata kunci dan bahasa yang seharusnya anda gunakan dalam web copy anda.

Above the fold and below the fold

Apa yang dimaksudkan sebagai ABOVE THE FOLD dan BELOW THE FOLD?

ABOVE THE FOLD adalah bahagian atas laman web, yang terpapar sebelum user scroll down atau pergi ke bahagian bawah. Ya, sudah tentu, user akan scroll down tetapi anda sebaiknya memastikan 3 elemen di bawah ini, ada di bahagian ABOVE THE FOLD:
Value proposition
Some visual
Call to action.

Dengan memastikan 3 elemen di atas berada di bahagian ABOVE THE FOLD, maka persoalan paling penting yang ada pada visitor laman web terjawab dengan jelas sebelum mereka scroll down. Maklumat tambahan yang lain, bolehlah di catatkan pada bahagian yang lainnya(bahagian BELOW THE FOLD).

Pon begitu, untuk bahagian BELOW THE FOLD, sepanjang manakah harus dikarangkan? Ia sebenarnya bergantung kepada jenis bisnes anda. Boleh jadi panjang dan boleh jadi ringkas. Namun, panduannya tetap ini:

kajian telah membuktikan bahawa apabila kandungan laman web yang panjang semakin diringkaskan, kadar conversion meningkat sehingga tiga kali ganda.

Pastikan ada bahagian untuk perkataan(text)

Content is King

Jangan mengabaikan enjin carian sama sekali. Seperti yang dibincangkan sebelum ini, laman web anda sebenarnya sentiasa mempunyai peluang untuk mendapat ranking yang tinggi di enjin carian.

Walau bagaimanapun, ini tidak akan berlaku melainkan laman web anda mempunyai konten seperti artikel atau blog post dengan jumlah perkataan yang melebihi 500 patah perkataan.

Gunakan ruang di bahagian lain laman web sebaiknya untuk tujuan ini. Anda boleh menulis artikel berkenaan kebaikan produk anda dengan lebih terperinci misalnya. Ataupon menyenaraikan soalan-soalan yang lazim di tanya oleh pengguna berkenaan produk dan servis anda. Pastikan, setiap perkataan penting yang menjadi keyword, digunakan dalam penulisan anda.

Ingat, tiada teks, tiadalah ranking di enjin carian.

Visuals

Neuroscience membuktikan kepada kita, memahami imej/gambar adalah ratusan kali lebih cepat daripada perkataan. Visual terbukti lebih mesra user berbanding perkataan.

Menggunakan imej/gambar dengan sebaiknya di laman web untuk menyampaikan mesej juga menjadi salah satu cara yang terbukti meningkatkan value proposition. Bagi produk yang lebih kompleks, menyampaikan maklumat dengan video boleh jadi yang paling baik sekali kerana dengan tontonan video lebih kurang 1 hingga 2 minit lebih mudah berbanding dengan membaca artikel yang panjang untuk memahami sesuatu produk atau servis.

Perlu diingatkan di sini, artikel panjang yang ditulis adalah untuk menaikkan ranking laman web anda di enjin carian, manakala menerangkan tentang produk atau servis anda dengan lebih mesra user yakni secara visual, adalah untuk memudahkan user memahami tentang produk atau servis anda.

Rule of Thirds

Rule of Thirds adalah panduan yang digunakan dalam fotografi dan sebenarnya ia juga boleh dijadikan panduan dalam rekaan laman web. Rule of Thirds adalah membahagikan gambar kepada 3 bahagian, secara mendatar dan menegak.

Rule of Thirds

Empat pertemuan garisan adalah titik tumpuan yang strategik. Apabila objek diletakkan pada titik-titik ini, ia menghasilkan imej atau rekabentuk yang paling mempengaruhi.

Rule of Thirds - the intersections

Dalam rekaan laman web, anda boleh meletakkan elemen penting dalam design di titik-titik ini untuk mempengaruhi user, dan secara saikologinya, ini mampu meningkatkan conversion.

Berikut adalah contoh penggunaan Rule of Thirds dalam laman web.

Example of the Rule of Thirds

Perhatikan bagaimana laman web ini meletakkan navigation bar mereka di bahagian yang sedikit jauh dari titik tumpuan. Ini membantu untuk memastikan pengunjung menumpukan perhatian pada bahagian yang kita mahukan.

Anda tidaklah perlu menggunakan Rule of Thirds di semua bahagian laman web anda. Sebaliknya, gunakannya di tempat-tempat tertentu yang memerlukan tumpuan yang lebih dari user pada satu-satu Call to Action seperti di bahagian header umpamanya.

Screenshot paparan header laman web anda(bukan keseluruhan laman web), dan cuba terapkan "Rule of Thirds" ini. Buatlah keputusan sebaiknya samada anda mahu memperbaiki lagi susuanan imej, atau caption atau juga button anda berpandukan Rule of Thirds ini.

Warna juga penting

Kepentingan warna selalu dilupakan. Warna juga sebenarnya salah satu elemen yang memainkan peranan yang penting dalam rekabentuk sesebuah laman web. Warna mampu untuk menyampaikan makna keseluruhan jenama anda. Kombinasi warna yang berbeza mampu menimbulkan emosi dan tindak balas yang berbeza.

Apabila memilih skema warna untuk digunakan di laman web, pastikan anda memilih gabungan warna yang mampu membangkitkan emosi dan menyerlahkan jenama anda.

Satu teknik praktikal untuk memilih gandingan warna ini adalah dengan mengambil contoh dari Pinterest. Ambil beberapa contoh gambar yang anda fikirkan bersesuaian dengan jenama anda, kemudian muat naik gambar tersebut ke Adobe’s Color Wheel.

Adobe Color Wheel

Setelah imej dimuat naik, Adobe’s Color Wheel akan secara automatik membuat skema warna untuk anda. Anda juga boleh menggerakkan pilihan warna ke sekitar yang berhampiran jika anda mahu mengubah sedikit selara warna anda.

Sebaik sahaja anda berpuas hati dengan skema warna yang akan anda gunakan, satu perkara yang mesti sentias diingati selalu, dan ini penting untuk mempengaruhi conversion; Contrast

Gunakan warna yang contrast untuk title, dan Call to Action. Dengan kata lain, warna yang digunakan untuk title dan button Call to Action haruslah berbeza dengan warna latar belakang dan contrast. Misalnya latar belakang putih tapi penggunaan teks hitam. Contoh lain adalah seperti button subscribe haruslah dalam warna yang menonjol dari yang lain.

Buatlah penyelarasan warna pada skema warna yang anda telah hasilkan dengan mempertimbangkan penggunaan warna contrast.

Semak laman web berikut. Perhatikan bagaimana penggunaan warna dapat mengawal tumpuan anda.

Using contrast in webdesign

Prinsip K.I.S.S

Anda mungkin pernah mendengar slogan yang berbunyi Keep It Simple, Stupid. Prinsip KISS ini juga digunakan untuk panduan dalam merekabentuk laman web.

Kesederhanaan dalam design sangat penting terutamanya ketika berbincang mengenai conversion. Sebaik sahaja design awal laman web anda siap, semak jika ada cara untuk meringkaskan lagi design tersebut. Percayalah, semakin ringkas design laman web anda, semakin ianya menjadi lebih mesra user dan meningkatkan conversion.

Hick's Law juga ada kaitannya dengan topik ini. "Ringkas" yang dimaksudkan disini, adalah lebih kepada mengurangkan pilihan yang user ada dan menghasilkan design yang baik dalam masa yang sama mengurangkan elemen design yang memberikan gangguan seterusnya menghilangkan tumpuan user.

Secara visual, jika kita melihat terlalu banyak maklumat di laman web, ianya hanya akan meletihkan dan menjadi gangguan pada tumpuan. Mewujudkan pengalaman user yang hebat di laman web anda juga bermakna menyingkirkan apa-apa design terlalu rumit dan tidak diperlukan.

8-Second Rule

Mengikut 8-Second Rule, anda hanya ada 8 saat untuk mencuri perhatian visitor. 8 saat adalah tumpuan terpanjang user pada satu-satu paparan.

Anda hanya mempunyai masa yang amat singkat sebaik sahaja user membuka laman web anda. Jadi manfaatkan masa yang amat singkat itu sebaiknya! Berikut adalah beberapa panduan untuk mencuri perhatian visitor seterusya meningkatkan conversion untuk 8 saat pertama.

Headline laman web seharusnya besar, jelas dan persis menerangkan servis atau produk anda.

Gunakan imej yang menarik yang menerangkan tentang produk atau servis anda, dan memandu perhatian user ke arah Call to Action

Buat button subscribe yang besar, mudah dan jelas.

Sign Up button seharusnya besar dan jelas.

Gunakan perkataan yang kuat impaknya di dalam copywriting laman web anda.

Selain grafik dan copywriting, pertimbangkan untuk memanfaatkan multimedia yang lain seperti video dan audio.

Gunakan hover effect pada button seperti menjadikan button bertukar warna ketika user meletakkan cursor pada button supaya menimbulkan sedikit impak dan membuatkan user teruja

Popup yang menarik ketika user meninggalkan laman web juga merupakan suatu kaedah untuk mencuri kembali perhatian user sebelum mereka meninggalkan laman web.

Raut wajah meningkatkan rasa ingin tahu

Kebiasaan kita secara semulajadi bertindak-balas dengan raut wajah manusia. Kita secara semulajadi merasakan sama gembira pada raut wajah yang gembira atau sama bersimpati pada raut wajah yang sedih. Jika kandungan yang ingin disampaikan, disertakan dengan gambar dengan raut wajah manusia, itu bahkan sangat membantu untuk mencuri perhatian user.

Pertimbangkan untuk menggunakan gambar dengan wajah pada artikel atau mungkin testimoni dilaman web anda. Ini amat membantu untuk meningkatkan engagement dan seterusnya meningkatkan conversion.

Jika anda sendiri menjadi jenama untuk laman web anda(personal branding), ini malah lebih mudah dilakukan. Gunakan wajah anda sendiri. Pastikan gambar samada diambil oleh jurugambar professional atau diambil sendiri oleh anda adalah gambar yang mendatar(horizontal shot) dan pastikan juga ada ruang negatif supaya bahagian tersebut boleh diletakkan dengan teks dan Call to Action.

Using faces in webdesign

Gambar dengan kualiti tinggi

Jika anda mencari punca dan sebab sesuatu konten itu kurang berjaya mendapat sambutan, tentunya anda ingin melihat jika ia disebabkan kualiti gambar yang digunakan dalam konten.

Penyelidikan mendapati bahawa 60 peratus pengguna internet lebih bersedia untuk mempertimbangkan hasil carian yang disertakan dengan gambar dan 23 peratus lain lebih cenderung untuk menghubungi perniagaan yang menggunakan gambar dengan baik di laman web mereka.

Secara spesifiknya, elakkanlah penggunaan gambar yang tidak relevan dan hambar. Penyelidikan juga membuktikan bahawa jika artikel anda disertakan dengan gambar yang cukup menarik, anda akan mendapat purata 94% lebih banyak tumpuan berbanding artikel dengan gambar yang rendah kualiti.

Kepercayaan

Orang tidak membeli daripada anda jika mereka tidak mempercayai anda. Selain memaparkan maklumat seperti nombor telefon dan alamat premis anda, ada baiknya laman web anda lengkap dengan senarai Terma dan Syarat.

Jangan abaikan "Load Speed"

Secara statistiknya, pengguna internet sentiasa menginginkan yang pantas. Berdasarkan kajian yang dijalankan, dengan hanya kelewatan 1 saat sahaja, mengakibatkan Conversion Rate turun sebanyak 7%. Maka apabila kita bincangkan tentant "Page Loading Speed", sudah tentu setiap saat haruslah kita titik beratkan.

Jangan memandang remeh pada kelajuan laman web anda. Laman web yang perlahan hanya akan mengakibatkan rasa kecewa pada visitor dan menyebabkan mereka meninggalkan laman web, dan inilah yang menyebabkan Conversion Rate menurun. Bahkan, ini juga menjadi faktor-faktor yang menyebabkan ranking di enjin carian menjadi rendah.

Berikut adalah beberapa tools yang anda boleh gunakan untuk menyemak kelajuan laman web anda.

Google PageSpeed Insights
Pingdom
GTmetrix
KeyCDN
Sucuri


Demikian kupasan kami berkenaan apakah elemen yang mesti ada secara asasnya pada sesuatu laman web dan bagaimana setiap elemen itu memberi impak kepada conversion rate.