Desain Halaman Arahan: Membangun Halaman Arahan Terbaik

Halaman Arahan yang Efektif Sangat Penting untuk Kesuksesan Produk

Pemasaran adalah konsep asing bagi sebagian besar desainer dan pengembang. Kami unggul dalam pengembangan produk dan tantangan teknis, tetapi ketika saatnya tiba untuk mempromosikan produk, kami tidak terlalu paham.

Tetapi pemasaran sangat penting untuk keberhasilan suatu produk, dan itu tidak boleh diabaikan. Ini adalah tantangan saat saya merancang dan bersiap untuk meluncurkan keyboard terbaik dunia untuk pengembang, Ultimate Hacking Keyboard.

Untungnya, saya adalah bagian dari tim yang menyadari pentingnya halaman arahan yang menarik, terutama di bulan-bulan menjelang kampanye crowdfunding make-or-break kami. Bersama-sama, kami mulai merancang halaman arahan yang akan menangkap imajinasi, menghasilkan pelanggan, dan mengungguli produk kami untuk peluncuran yang sukses.

Ini adalah kisah halaman arahan utama untuk The Ultimate Hacking Keyboard.

Saran Teknis. Langkah Praktis ke Depan.

Pencarian Google untuk "desain halaman arahan" mengarah ke lusinan artikel bagus, masing-masing dikemas dengan tips penting seperti:

• “Konten harus dimuat dalam sekejap.”
• “Fotografi harus relevan dengan audiens situs.”
• dan, “Sertakan formulir untuk mengumpulkan prospek.”

Ini adalah poin yang bermanfaat, tetapi ada lebih banyak faktor untuk keberhasilan halaman arahan. Panduan desain halaman arahan ini akan memberikan saran teknis, tetapi juga akan menawarkan wawasan praktis yang membantu desainer dan pengembang memilih layanan pihak ketiga yang tepat dan mengintegrasikan teknologi yang bekerja di belakang layar.

Pada akhirnya, tujuan dari panduan ini adalah untuk menghemat waktu dan uang desainer dan pengembang, yang mungkin akan terbuang sia-sia untuk percobaan dan kesalahan yang sia-sia.

Bertujuan untuk Produksi dan Hosting Video Kelas Atas

Menyajikan video di web lebih mudah dari sebelumnya, tetapi relatif sedikit situs yang menggunakannya. Dari perspektif web, ini bukan tantangan teknis, tetapi investasi sumber daya—waktu dan uang.

Video cuplikan halaman arahan untuk Ultimate Hacking Keyboard (UHK) menjalani dua belas iterasi, dengan setiap versi baru secara bertahap menyempurnakan setiap detail kecil. Proses desainnya melelahkan tetapi bermanfaat, dan video cuplikan adalah permata mahkota halaman arahan kami. Ini benar-benar membedakan produk kami dari sisa paket.

Ingatlah bahwa pembuatan konten berkualitas tinggi itu mahal. Profesional khusus dapat membuat produk bersinar, tetapi penting untuk memahami apa yang Anda mampu; jika tidak, produk Anda mungkin tenggelam sebelum diluncurkan.

Jika Anda atau desainer lain di tim Anda memiliki keterampilan dan peralatan, Anda dapat mencoba membuat konten video Anda sendiri, tetapi buat video tetap singkat dan sederhana. Produksi yang terlalu ambisius di tangan para amatir jarang berjalan dengan baik.

Tim UHK memilih animasi 3D dinamis untuk mendemonstrasikan fungsionalitas dasar keyboard di halaman arahan kami. Jika animasi 2D diperlukan (untuk aplikasi atau layanan web), atau jika rekaman kamera live-action diperlukan, prosesnya akan menghadirkan tantangan yang berbeda.

Setelah video dibuat, itu harus di-host di situs web. Untungnya, ada banyak pilihan:

YouTube adalah pemimpin pasar yang tak terbantahkan dan sinonim untuk video di web. Ini adalah layanan yang mumpuni dan pilihan yang masuk akal, tetapi pemutar tertanamnya bukanlah pilihan yang paling estetis.

Vimeo menampilkan pemutar yang disematkan dengan desain minimalis yang cukup elegan. Ini dikenal untuk meng-hosting konten berkualitas dan menyediakan definisi tinggi yang superior.

Wistia adalah pilihan populer lainnya di kalangan pemasar. Ini menyediakan fitur-fitur canggih seperti peta panas video yang menunjukkan bagian mana dari video yang telah ditonton, dilewati, dan ditonton ulang.

Pada akhirnya, tim UHK memutuskan bahwa Vimeo paling sesuai dengan kebutuhan kami. Inilah cuplikan halaman arahan kami: Ultimate Hacking Keyboard

Perlu juga dicatat bahwa kami masuk ke dalam Antarmuka Pemrograman Aplikasi (API) Vimeo untuk membantu video kami menarik perhatian pengunjung laman landas dengan lebih baik. Menggunakan API JavaScript Vimeo, kami membuat tombol "Saya ingin satu" di situs kami berdenyut tiga kali berturut-turut setelah cuplikan kami berakhir. Digunakan dengan benar, tweak kecil seperti ini dapat meningkatkan tingkat konversi halaman arahan.

Ciptakan Pengalaman Immersive dengan Konten 3D

Terkadang penting untuk memberikan pengalaman yang mendalam kepada pengunjung halaman arahan. Kami ingin pengunjung kami dapat menjelajahi Ultimate Hacking Keyboard dalam 3D, jadi kami harus menyelidiki layanan berbasis WebGL yang dibuat khusus untuk tujuan ini.

Sketchfab adalah layanan berbasis WebGL paling populer. Mudah untuk dikuasai, menyediakan berbagai pengaturan visual, dan dapat disematkan ke berbagai layanan hosting populer.

P3d.in adalah layanan WebGL sederhana yang berfokus pada kemudahan penggunaan, tetapi memiliki dukungan terbatas untuk tekstur resolusi tinggi tertentu.

Setelah mempertimbangkan dengan cermat, kami memilih Sketchfab. Beginilah tampilan Ultimate Hacking Keyboard dalam 3D.

Visualisasikan Masalah dan Solusi dengan Animasi 2D

Salah satu keuntungan utama dari Ultimate Hacking Keyboard adalah mengurangi gerakan tangan secara dramatis. Tim ingin memvisualisasikan ini di halaman arahan kami dengan menampilkan animasi UHK yang bekerja berdampingan dengan keyboard biasa. Menerapkan ini tidak sesederhana kedengarannya.

Menggunakan video yang disematkan terasa seperti berlebihan, dan itu juga membutuhkan kerja rendering ekstra. GIF animasi bukanlah pilihan karena ukuran file yang besar dan palet warna yang terbatas. Pada akhirnya, kami memilih untuk bekerja dengan animasi SVG sebaris karena mereka memungkinkan grafik tangan kami bergerak secara independen dari grafik lain di halaman.

Membuat animasi halaman arahan kami dengan cara ini lebih memakan waktu daripada yang kami harapkan. Kami harus menavigasi masalah lintas-browser, bug library JavaScript, dan tantangan teknis tak terduga lainnya hanya untuk membuat animasi sederhana. Namun, hasil akhirnya terlihat cukup bagus dan terbukti sepadan dengan kerja ekstranya.

Sebuah kata bijak—jangan pernah meremehkan jumlah hal yang bisa salah!

Ukur Analytics secara Real Time

Google Analytics sangat bagus. Ini banyak digunakan dan mudah untuk dikerjakan. Namun, ada kandidat yang lebih baik untuk operasi waktu nyata.

Chartbeat melakukan pekerjaan yang baik dalam mengirimkan pemberitahuan ketika sebuah situs web melebihi ambang batas tertentu, terutama jumlah pengguna simultan di sebuah situs. Misalnya, situs UHK kadang-kadang ditautkan ke forum online, menghasilkan lonjakan lalu lintas yang tiba-tiba. Berkat Chartbeat, kami langsung tahu, dan kami dapat bergabung dengan percakapan yang sedang berlangsung lebih awal.

Mixpanel membantu administrator web menganalisis peristiwa seperti kunjungan situs, membuka dialog langganan, dan mengonfirmasi langganan. Itu juga dapat membangun corong dari peristiwa ini dan memvisualisasikan tingkat konversi, sehingga membuat angka dapat ditindaklanjuti.

Clicky menyediakan fitur peta panas yang luar biasa yang mengungkapkan di mana pengunjung mengklik sebuah situs. Berdasarkan hasil, perbaikan dapat dilakukan pada tata letak atau konten situs untuk mencapai hasil yang lebih baik.

HotJar memungkinkan pemilik situs web untuk merekam interaksi pengunjung mereka dengan menyimpan setiap tindakan mouse dan keyboard dan mengubahnya menjadi video.

Masing-masing layanan ini memiliki fitur dan manfaat uniknya sendiri, tetapi semuanya memberikan umpan balik yang berharga dan tepat waktu tentang aktivitas pengunjung situs web. Terserah bisnis individu untuk menentukan jenis informasi apa yang paling berharga untuk tujuan pemasaran.

Catat Kesalahan & Cegah Sakit Kepala yang Tidak Perlu

Situs web menjadi semakin bergantung pada JavaScript, sedemikian rupa sehingga fitur situs penting sering bergantung padanya. Misalnya, dialog berlangganan di halaman arahan Ultimate Hacking Keyboard dipicu oleh kode JavaScript.

Saat menerapkan fitur berlangganan, kami mengujinya di browser utama dan merasa yakin bahwa kami telah melakukan semua yang kami perlukan. Namun kemudian, kami menerima email dari pengunjung yang mengeluh bahwa fitur berlangganan halaman arahan tidak berfungsi.

Ternyata, pengunjung tersebut menggunakan Adblock Plus dalam mode paling ketat, yang memblokir skrip analitik Clicky. Tidak seperti layanan analitik lainnya, kode sematan Clicky tidak tangguh dalam hal ini, jadi setelah mencatat tindakan berlangganan dan mereferensikan objek Clicky, kode menghasilkan kesalahan.

Setelah kejadian ini, kami berpikir dengan hati-hati tentang bagaimana menghindari situasi serupa di masa depan. Tim menyadari bahwa kami harus menggunakan event handler window.onerror global untuk menangkap dan mencatat kesalahan tersebut. Kemudian kami mencari layanan logging yang sesuai dan akhirnya memilih Errorception.

Errorception luar biasa karena melakukan satu pekerjaan dan melakukannya dengan sangat baik—menemukan kesalahan JavaScript. Antarmuka penggunanya minimalis dan fungsional, dukungannya luar biasa, dan memungkinkan admin situs untuk melihat kesalahan individu dan menyelidiki jejak tumpukan. Yang terbaik dari semuanya, ini memberikan keuntungan nyata bagi Anda.

Sejak mengintegrasikan Errorception, kami telah menyelesaikan sekitar selusin bug, beberapa di antaranya tidak mungkin dan tidak terduga. Misalnya, kami pernah menerima kesalahan terkait Penyimpanan lokal dan menemukan bahwa saat Safari dalam mode penjelajahan pribadi, localStorage localStorage.setItem() menghasilkan kesalahan.

Tidak mungkin untuk memperhitungkan setiap kasus kesalahan outlier, jadi logging adalah cara yang bagus untuk menangkap kekurangan sebelum mereka menjadi sakit kepala besar.

Rancang Proses Pembuatan dengan Perawatan Rendah

Awalnya, halaman indeks UHK dimulai sebagai satu halaman HTML yang dihosting di WordPress, dan berisi semua kode CSS, HTML, dan JavaScript. Pada awalnya, ini adalah solusi yang layak, tetapi seiring bertambahnya halaman, ini menjadi beban pemeliharaan, dan diperlukan pendekatan yang lebih modular.

Solusi kami? Pertama, kami membagi kode CSS, HTML, dan JavaScript menjadi beberapa file terpisah. Kemudian, kami mengonversi file CSS menjadi Lebih sedikit file untuk mempermudah perawatan. Akhirnya, kami merancang proses pembuatan untuk merakit semua file kecil kami.

Selalu Optimalkan untuk Performa

Tim UHK mengetahui dari pengalaman bahwa kinerja situs web sangat penting—seperti saat halaman arahan kami di-Slashdotted dan kami menerima 260 pengunjung secara bersamaan. Untungnya, $ 20 per bulan Linode VPS kami tampil seperti seorang juara, tetapi ini membutuhkan lebih dari sekadar keberuntungan, jadi berikut adalah beberapa tip peningkatan kinerja:

• Pemuatan gambar yang lambat adalah teman Anda, terutama jika halaman Anda, seperti halaman kami, berisi banyak gambar. Kami menggunakan plugin WordPress Unveil Lazy Load.

• Anda juga dapat memuat aset dengan malas. Jika bagian halaman bergantung pada skrip tambahan, mungkin saja memuatnya dengan lambat saat berada di dalam viewport. Periksa visibilitas viewport dengan plugin jQuery inview, dan muat skrip dengan jQuery.getScript() atau pemuat skrip lainnya.

Desain Halaman Arahan adalah Disiplin Desain yang Penting

Kami telah menyentuh beberapa masalah desain halaman arahan di posting ini, jadi mari kita simpulkan poin terpenting:

• Melampaui konten berbasis teks dan sertakan media kaya seperti video, model 3D, dan animasi 2D. Jenis konten ini membuat halaman arahan lebih menarik dan mendorong pengunjung untuk berbagi dengan orang lain.
• Gunakan analitik waktu nyata sehingga Anda dapat dengan cepat bereaksi terhadap lonjakan lalu lintas yang tiba-tiba dan bergabung dengan percakapan yang sedang berlangsung.
• Selalu mencatat kesalahan. Ada banyak hal yang bisa (dan akan) salah, jadi penting untuk melacaknya.
• Optimalkan kinerja sehingga situs Anda akan tetap bertahan bahkan di bawah beban lalu lintas tertinggi.

Seperti halnya setiap disiplin desain, desain halaman arahan memerlukan komitmen berkelanjutan untuk belajar tentang alat, teknik, dan proses baru. Teknologi dan selera pasti berkembang—kecanggihan saat ini adalah peninggalan masa depan.

Untungnya, desain halaman arahan yang berkomunikasi dengan jelas dan memikat audiens tidak sepenuhnya bergantung pada teknologi. Desainer berpengalaman tahu bagaimana menggabungkan alat-alat terbaru, tetapi proses desain mereka terutama didorong oleh mengajukan pertanyaan yang tepat dan dengan terampil menavigasi masalah yang mengancam untuk menggagalkan proyek.

Pada akhirnya, halaman arahan yang menarik harus menjadi bagian penting dari rencana pemasaran merek atau produk baru. Di dunia berbasis web kami, halaman arahan yang dirancang dengan baik memiliki kemampuan untuk membangun pengikut, menghasilkan buzz, dan meningkatkan penjualan—semuanya sangat penting untuk kemakmuran berkelanjutan perusahaan yang sedang naik daun.