Dokumen ini dibuat untuk membantu pengguna domestik yang mengalami kesulitan karena kurangnya materi dalam Bahasa Indonesia saat mempelajari FramerFramer. Kami telah menerjemahkan konten resmi blog ke dalam Bahasa Indonesia dan menambahkan informasi yang berguna untuk praktik kerja. Semoga dapat memberikan sedikit bantuan kepada para pengguna FramerFramer.

Apa yang terjadi ketika desainer memimpin seluruh proses pembuatan situs web sendiri? Kesenjangan antara 'desain yang indah' dan 'landing page yang memiliki tingkat konversi tinggi' menghilang, memungkinkan pengguna untuk berperilaku alami di situs menggunakan psikologi visual, desain interaksi, dan pemikiran strategis.

Desain digunakan sebagai alat kuat untuk mengubah situs web. Namun, banyak desainer masih terbatas pada peran membuat 'desain yang cantik' terlepas dari hasil pemasaran. Dalam kasus ini, pengembang dan pemasar biasanya melakukan optimasi terpisah, yang sering kali menghalangi kekuatan desain asli. Desain yang didorong oleh konversi (conversion-driven design) mengisi celah ini, memungkinkan desainer untuk memimpin seluruh proses dari ide hingga peluncuran akhir.

Membuat Lay Out yang Menuntun Jalur Konversi Pengguna

Sebagai desainer, tertarik pada tren UX baru atau fitur memang wajar, namun, fitur visual yang trendi dapat menurunkan tingkat konversi. Desain harus menuntun jalur konversi pengguna.

1. Ikuti jalur pengguna dan sisakan hanya yang diperlukan

Untuk merancang tata letak yang berpusat pada pengguna, pertama-tama perlu memahami urutan pengguna menelusuri halaman. Melalui wawancara, heatmap, atau analisis jalur klik, pahami informasi apa yang diinginkan pengguna, ketidaknyamanan yang dirasakan, dan pertanyaan yang muncul.

Susun alur logis berdasarkan hal berikut.

• Mulailah dengan nilai yang jelas

• Sajikan bukti sosial seperti studi kasus atau ulasan

• Atasi keberatan yang diproyeksikan sebelumnya

• Arahkan secara alami ke CTA (Call to Action)

2. Arahkan tindakan pengguna dengan elemen visual

Sebelum menggunakan cara untuk menyoroti CTA dengan warna dan kontras, ketahui hal berikut.

1. Tidak ada warna tombol "terbaik" untuk konversi. Beberapa penelitian merekomendasikan tombol merah, yang lain biru, tetapi yang lebih penting adalah kontras dengan warna latar belakang.

2. Konsistensi warna lebih penting daripada warna psikologi. Gunakan palet merek untuk warna yang paling kuat dan kontras di CTA, dan terapkan secara konsisten di mana-mana sehingga pengguna tahu apa yang harus dipilih.

3. Menciptakan kontras tidak selalu berarti menggunakan warna terang. Kadang-kadang penting untuk membangun ruang di sekitar elemen penting. Ruang kosong sama efektifnya dalam menarik perhatian seperti warna terang, dan strategi khusus ini lebih efektif untuk memisahkan elemen-elemen penampang dari elemen lainnya.

Periksa apakah tombol CTA secara visual menonjol di halaman arahan. Jika tidak, ubah ke warna dengan kontras tinggi dan beri ruang pada tombol CTA agar pengguna tidak melewatkannya.

3. Fokus pada tujuan jika tingkat konversi rendah

Jika tingkat konversi rendah, Anda mungkin berpikir "Apakah ada solusi tersembunyi yang bisa memperbaikinya?" Namun, penyebab paling umum adalah ketiadaan tujuan desain (tidak memahami apa yang diinginkan pengguna) atau kurangnya daya tarik (tidak dapat meyakinkan pengguna kenapa mereka harus mengambil tindakan tersebut).

David Kadavy, desainer UX, mengatakan, "Semua halaman arahan sukses yang telah saya lihat memiliki satu kesamaan. Sangat jelas secara visual apa yang ingin dilakukan pengguna selanjutnya." Memutuskan dengan jelas apa yang diinginkan pengguna dan bagaimana meyakinkannya adalah kunci.

Menggunakan Interaksi dengan Tujuan Secara Strategis

Meski ada banyak elemen interaktif di situs web, tidak semuanya berdampak positif dalam meningkatkan konversi. Hal yang penting dalam desain berorientasi konversi adalah apakah interaksi benar-benar membantu perjalanan pengguna bukan sekadar elemen dekoratif.

1. Fokus pada mikro-animasi yang sesuai tujuan

Desain interaksi yang baik hampir tidak terlihat. Tanpa mengganggu perhatian pengguna, ia membantu mencapai tujuannya dengan mudah. Setiap mikro-interaksi harus memiliki tujuan jelas yang membantu pengguna mendekati aksi yang diinginkan.
Pertimbangkan hal-hal berikut.

• Berikan perhatian lebih kepada elemen yang harus memicu tindakan penting

• Kurangi waktu menunggu yang dirasakan pengguna saat loading

• Berikan umpan balik instan berdasarkan tindakan pengguna

• Arahkan perhatian pengunjung ke elemen penting yang bisa mendorong konversi

• Pastikan input pengguna diterima

2. Konversikan pengguna pasif menjadi aktif

Indikator terbaik tentang tingkat konversi apa? Ada beberapa jawaban yang baik, tetapi salah satu indikator relevan yang tertinggi ialah durasi tinggal di situs. Pengguna yang tinggal lebih lama cenderung membangun kepercayaan dan memiliki lebih banyak waktu untuk memahami bagaimana produk/layanan menyelesaikan masalah mereka sebelum membeli.

Komponen interaktif tidak hanya meningkatkan waktu tinggal di situs. Mereka juga memberi waktu lebih bagi pengguna untuk mengalami manfaat produk, bukan hanya membaca deskripsinya, sehingga meningkatkan kualitas waktu tersebut.

Cobalah mencari cara untuk mendorong partisipasi pengguna melalui berikut ini.

• Ganti daftar harga statis dengan kalkulator ROI interaktif

• Ubah rekomendasi generik menjadi kuis yang dipersonalisasi

• Buat demo interaktif yang memungkinkan pengguna untuk mengalami produk terlebih dahulu

• Ubah daftar fitur menjadi showcase interaktif

Menerapkan Desain Responsif untuk Konversi

Kebanyakan situs web "responsif" masih menganggap perangkat seluler sebagai tambahan semata. Desain pada perangkat selular tidak hanya memperkecil teks dan elemen dari desktop atau menyembunyikan elemen. Pendekatan desain ini mengabaikan fakta fundamental bahwa tujuan dan tindakan pengguna berbeda pada masing-masing perangkat.

Desain responsif berorientasi konversi harus disesuaikan tidak hanya berdasarkan ukuran layar tetapi juga berdasarkan konteks pengguna. Untuk melakukannya, pikirkan bagaimana orang benar-benar menggunakan situs di berbagai perangkat.

1. Mulailah dari seluler dan optimalkan sesuai kebutuhan

Pendekatan dengan memprioritaskan seluler telah disarankan selama beberapa tahun, tetapi banyak desainer masih salah paham. Mereka merancang untuk seluler dengan mengurangi bagian dari pengalaman desktop ketimbang mengembangkan sejak awal untuk lingkungan perangkat kecil.

Rekomendasi tiga elemen penting untuk pengguna seluler ialah:

• Prioritaskan konten yang meningkatkan tingkat konversi

• Buat elemen yang cukup besar untuk interaksi satu tangan

• Hilangkan langkah tak perlu dari proses konversi

Setiap keputusan harus mempertimbangkan lingkungan seluler. Ingatlah bahwa pengguna mungkin mudah terdistraksi sementara di layar, biasanya dengan satu tangan saat melakukan web browsing. Juga pertimbangkan variabilitas kecepatan koneksi, jadi hindari desain yang secara signifikan mempengaruhi waktu pemuatan.

FramerFramer mendukung desain yang responsif dengan ukuran huruf responsif dan desain berbasis tumpukan yang responsif terhadap perangkat yang tersedia. Anda dapat memantau semua desain breakpoint dalam satu jendela editor, menambah atau mengurangi elemen untuk meningkatkan pengalaman di tiap perangkat, dan menggunakan fitur warisan breakpoint untuk secara otomatis menerapkan perubahan pada breakpoint utama ke yang lain.

2. Gunakan ruang desktop secara strategis

Ketika pengguna beralih ke desktop, ruang layar lebih luas tetapi jangan mencoba mengisi setiap ruang. Alih-alih, gunakan ruang yang lebih luas itu untuk mengurangi gesekan antar konten dalam proses konversi lintas perangkat.

Keuntungan menggunakan desktop mencakup:

• Membuat tata letak multi-kolom yang menampilkan lebih banyak opsi sekaligus

• Menampilkan lebih banyak informasi tanpa klik tambahan

• Mengimplementasikan status hover yang rumit untuk membimbing pengguna

Tujuan responsif bukan menciptakan pengalaman yang sepenuhnya berbeda di setiap perangkat. Fokus pada pemanfaatan ruang tambahan untuk membuat proses konversi lebih mudah melalui desain.

3. Hindari kesalahan yang mengurangi konversi dalam desain responsif

Pastikan untuk menghindari elemen penghalang konversi umum saat menilai desain web responsif di antar berbagai perangkat.

1. Jangan sembunyikan CTA pada mobile: Ketika CTA hilang di layar mobile, tingkat konversi bisa turun.

2. Hindari pola tata letak form yang rumit: Form yang bekerja baik di perangkat desktop mungkin menjadi penghalang konversi di mobile. Di layar kecil, tingkat pengabaian pengguna meningkat secara eksponensial setiap Anda menambahkan sebuah field baru.

3. Hindari tulisan dan tombol yang sangat kecil: Memaksa pengguna untuk memperbesar teks atau tombol pembayaran cepat menurunkan tingkat konversi.

Jangan menganggap desain responsif sekadar desain teknis. Namun, praktikkan pemikiran terus-menerus tentang pengalaman pengguna untuk membuatnya bekerja di setiap layar bukan sekadar berfungsi.

Pertimbangkan Performa sebagai Bagian dari Desain

Performa situs web tidak hanya merupakan tanggung jawab pengembang. Jika halaman memuat lambat, pengguna dapat meninggalkan situs, yang sering kali menyebabkan penurunan tingkat konversi. Desainer juga dapat berkontribusi pada optimasi performa.

• Optimasi gambar: SVG cocok untuk ikon dan logo, JPEG bagus untuk foto, PNG berguna untuk gambar kompleks yang membutuhkan transparansi. WebP menawarkan kompresi yang efisien dengan browser terbaru. FramerFramer secara otomatis mengurangi ukuran file dengan konversi AVIF, menyediakan gambar yang dioptimalkan per perangkat.

• Optimasi animasi: Animasi berlebihan dapat memperlambat situs. Penelitian menunjukkan bahwa waktu pemuatan 100ms dapat mengurangi konversi hingga 7%. Gunakan animasi hanya saat diperlukan dan tetap ringan.

• Penggunaan ulang komponen: Desain berbasis komponen memaksimalkan caching browser, meningkatkan kecepatan kunjungan kembali, dan menjamin konsistensi pengalaman pengguna.

Banyak desainer membiarkan optimisasi kinerja ditangani oleh pengembang, tetapi ini adalah kesalahan yang mengurangi konversi. Jika halaman memuat lambat, pengguna akan meninggalkan situs. Bahkan desain yang paling difokuskan pada konversi pun tidak akan menyelamatkan situs yang tidak sempat dilihat pengguna.

Desainer memberi dampak besar pada keberhasilan melalui pilihan yang dibuat di awal proses desain. Berikut adalah cara membuat pilihan itu efektif.

1. Optimalkan gambar tanpa mengurangi kualitas

Gambar menyumbang lebih dari setengah dari ukuran rata-rata situs web. Banyak desainer enggan mengorbankan kualitas visual mencolok. Berikut adalah cara meningkatkan performa tanpa mengurangi kualitas secara signifikan.

• Gunakan SVG untuk ikon, logo, dan ilustrasi sederhana

• Pilih JPEG untuk foto dan gambar yang kompleks tanpa transparansi

• Pilih PNG hanya untuk gambar kompleks yang memerlukan transparansi

• Gunakan WebP yang lebih baru untuk kompresi lebih baik dengan alternatif fallback

FramerFramer secara otomatis mengoptimalkan gambar dan memudahkan kita untuk ini. Untuk performa maksimal, sebagian besar gambar dikonversi ke format AVIF dan disajikan dengan ukuran sekitar 20% lebih kecil. Ukuran gambar diatur secara otomatis menyesuaikan layar dan dapat diatur secara manual dalam pengaturan FramerFramer.

2. Gunakan animasi ringan

Menambahkan animasi yang mencolok dapat meningkatkan keterlibatan pengguna, tetapi harus diingat bahwa memperlambat kecepatan situs berarti membahayakan tingkat konversi. Penelitian menunjukkan setiap 100ms tambahan memuat halaman dapat mengurangi konversi hingga 7%.

Sebelum dan sesudah menambahkan elemen interaktif, jalankan uji performa untuk memastikan tidak terlalu lambat. Jika animasi menambahkan lebih dari 100ms ke waktu pemuatan, fokusnya akan lebih pada estetika daripada nilai konversi.

Jagalah agar animasi tetap ringan sambil meneliti animasi loading mana yang dapat membantu mengurangi waktu muatan yang dirasakan pengguna.

3. Membangun sistem komponen yang dapat digunakan kembali

Desain berbasis komponen menawarkan konsistensi dan manfaat performa. Penggunaan ulang komponen memungkinkan browser untuk memanfaatkan caching yang efektif, secara dramatis meningkatkan waktu pemuatan untuk pengunjung berulang.

Membuat desain yang unik untuk setiap halaman daripada membuat pustaka komponen yang dioptimalkan dapat menjadi metode yang lebih efisien dan sistematis. Pendekatan ini mengurangi pemborosan kode, memberikan pengalaman pengguna yang lebih padat, dan mempercepat keseluruhan UX.

Peningkatan Berkelanjutan Berdasarkan Data

Banyak tim membuat situs sekali dan membiarkannya begitu saja atau mengandalkan intuisi untuk perbaikan. Namun, desain yang berfokus pada konversi harus terus berkembang melalui umpan balik loop yang didukung oleh data.

Ukuran data yang bisa dimanfaatkan termasuk:

• Analisis jalur pengguna: Memahami tindakan sebelum konversi atau saat keluar.

• Tingkat konversi per perangkat: Mengidentifikasi kapan konversi menurun di lingkungan tertentu.

• Tingkat penyelesaian form: Mengidentifikasi form field yang menyebabkan pengabaian atau masalah.

• Tingkat klik CTA: Menilai apakah tombol cukup efektif.

• Kedalaman scroll: Memastikan apakah konten penting benar-benar dibaca.

• Analisis halaman keluar: Mengidentifikasi titik di mana pengguna keluar sebelum konversi.

Platform tanpa kode seperti FramerFramer memungkinkan pengujian A/B cepat dan pengembangan berdasarkan data real-time. Saat melakukan perbaikan, fokuskan pada perubahan yang paling berdampak terlebih dahulu.

Kembangkan Desain Berdasarkan Data Nyata, Bukan Asumsi

Banyak tim mendesain situs mereka dan beralih ke proyek berikutnya setelah peluncuran. Beberapa menyesuaikannya berdasarkan intuisi atau subjektivitas, mengandalkan orang dengan suara paling besar. Kedua pendekatan ini mahal.

Memperkenalkan umpan balik loop untuk perbaikan berkelanjutan sangat bergantung pada strategi desain berbasis data. Perhatikan sinyal gesekan di bawah ini selama proses konversi.

• Analisis Jalur: Menunjukkan jalur pengguna sebelum mengganti layar atau keluar.

• Tingkat Konversi per Perangkat: Menunjukkan apakah desain responsif gagal pada layar tertentu.

• Tingkat Penyelesaian Field Form: Mengidentifikasi field yang menyebabkan pengguna meninggalkan site.

• Tingkat Klik CTA: Menunjukkan apakah tombol CTA berfungsi sebagaimana mestinya.

• Kedalaman Gulir: Menunjukkan apakah konten penting tidak terlihat.

• Analisis Halaman Keluar: Menunjukkan halaman mana yang meninggalkan situs.

• Waktu untuk Interaksi Pertama: Menunjukkan apakah pengguna memahami apa yang harus dilakukan dengan cepat.

Dengan platform desain tanpa kode, Anda dapat melakukan pengulangan dengan lebih cepat dibandingkan menunggu pengembang untuk pengujian A/B. Alih-alih hanya optimalisasi cepat untuk konversi, perbaiki terus berdasarkan data pengguna nyata agar Anda dapat memperoleh hasil yang lebih baik di waktu yang berlalu.

Ingatlah bahwa tidak semua perubahan dapat memberikan hasil yang sama. Itulah alasan mengapa penting mengutamakan perubahan yang paling mungkin berdampak pada konversi.

Ubah Desain Menjadi Senjata untuk Konversi

Lebih dari sekedar membuat situs yang indah, rancang agar bisa mendukung hasil bisnis. Ketika desainer memimpin seluruh proses pembuatan, mereka dapat menyeimbangkan kreativitas dan strategi yang akan meningkatkan daya saing.

Manfaatkan FramerFramer untuk melatih dan menciptakan situs web yang berorientasi konversi. Segera mulai dan teruskan perbaikan untuk menciptakan hasil nyata dengan cepat.

Artikel ini merupakan konten terjemahan dan adaptasi dari ‘5 conversion-driven web design tactics to boost your website’s ROI’ blog resmi FramerFramer.