Merancang Antarmuka Berfokus untuk Keterlibatan Pengguna yang Lebih Baik

Keterlibatan pengguna adalah metrik rumit yang dapat dicapai dengan berbagai cara untuk berbagai proyek. Sebagian besar desainer memikirkan antarmuka ketika mereka berbicara tentang interaktivitas, tetapi konten halaman juga dapat mendorong interaksi pengguna. Untuk keterlibatan pengguna yang lebih baik, penting untuk melakukannya menulis konten yang menarik, dan menyajikan konten itu dalam desain yang menarik.

Ini jauh lebih mudah diucapkan daripada dilakukan, tetapi jika Anda mempelajari beberapa dasar-dasar Anda tidak akan kesulitan membuat UI terfokus dengan konten hebat untuk proyek Anda.

Dalam posting ini, saya akan menunjukkan cara untuk meningkatkan interaksi pengguna & keterlibatan konten pada antarmuka berbasis web. Ini adalah dua cara paling umum untuk melibatkan pengunjung, dan jika Anda bisa mengoptimalkan pengalaman Anda tidak akan kesulitan meningkatkan waktu yang menguntungkan pada metrik halaman.

Capture Novelty

Konsep kebaruan mendefinisikan suatu peristiwa atau hal yang umumnya baru, seringkali sangat baru dan unik berdasarkan konteks. Peristiwa baru menarik perhatian kita karena mereka menonjol. Ini juga berlaku untuk desain antarmuka dengan elemen-elemen baru yang tampaknya melompat dari halaman.

Baru-baru ini saya menemukan posting yang bagus membahas pentingnya hal baru ketika datang ke pertunangan. Pengguna sepertinya condong ke pengalaman baru, antarmuka, dan elemen UI karena mereka berbeda. Satu-satunya fakta dirancang berbeda seringkali menarik perhatian.

Salah satu contoh umum adalah tombol ajakan bertindak yang ditemukan di sebagian besar halaman arahan. Anda juga dapat membangun kebaruan dengan foto latar belakang, ilustrasi, atau tangkapan layar aplikasi, seperti pada halaman arahan Uber untuk Bisnis.

Halaman ini memang memiliki tombol ajakan untuk bertindak tetapi perhatian saya segera pergi ke screenshot. Mereka bernyawa ketika pertama kali dimuat jadi ini menggabungkan kebaruan desain dengan gerak untuk menarik perhatian.

Alternatif akan menggunakan GiftRocket ikon bergambar sebagai tautan untuk menggali lebih jauh ke dalam situs.

Kedua contoh ini gunakan hal baru untuk keuntungan mereka. Anda tidak selalu dapat menarik orang lebih jauh ke dalam situs, tetapi Anda akan melihat hasil yang lebih baik jika Anda menarik perhatian mereka pada tingkat visceral pertama.

Desainnya hal pertama pengunjung melihat, dan Anda perlu menarik perhatian mereka dalam beberapa detik untuk mendorong keterlibatan lebih lanjut.

Tipografi yang Dapat Dipotong

Studi telah menemukan bahwa sebagian besar pengguna memindai halaman web daripada membacanya kata demi kata. Anda mungkin ingin menarik orang untuk membaca konten Anda, tetapi Anda hanya bisa melakukan banyak hal.

Alternatif terbaik adalah menciptakan konten skimmable dengan tajuk utama, teks tebal, dan gambar yang menggambarkan apa yang ingin Anda katakan. Setidaknya aku bisa memikirkannya tiga teknik penulisan yang kuat Anda dapat menggunakan dalam konten Anda untuk meningkatkan keterbacaan:

1. Bagilah konten dengan subtitle yang jelas
2. Pecah paragraf untuk membuatnya lebih kecil
3. Gunakan daftar berpoin untuk membagikan poin Anda lebih cepat

Tujuannya adalah untuk menjaga pembaca Anda bergerak ke bawah halaman dengan cara apa pun yang diperlukan. Dengan menjaga konten tetap kecil dalam potongan seukuran gigitan Anda akan memiliki waktu yang jauh lebih mudah untuk menarik perhatian dan mengarahkan orang lebih jauh ke dalam situs.

Lihatlah blog Quick Sprout untuk contoh gaya penulisan ini. Konten tersebut ditulis oleh Neil Patel dan dia sering menulis konten yang sangat panjang, tetapi dia memecah paragraf menjadi 1-3 kalimat masing-masing.

Jika Anda memiliki berita utama yang tepat, dan gunakan gambar / poin-poin di seluruh konten Anda akan membuat orang membaca sekilas lebih jauh. Pastikan juga untuk itu menambah jumlah spasi putih antara paragraf. Margin dan bantalan keduanya memainkan peran besar dalam desain tata letak & keterbacaan.

Desain teks sehingga sebenarnya menyenangkan untuk dibaca. Salinan yang membosankan tidak akan memikat, tetapi tidak juga salinan yang menyenangkan akan terlalu kecil atau kurang kontras.

Gambar yang Memesona

Sebuah studi kasus terbaru oleh Backlinko menyarankan halaman-halaman itu dengan setidaknya satu gambar umumnya peringkat lebih tinggi dari halaman tanpa gambar. Ini bagus dari perspektif SEO.

Tapi bagaimana dengan keterlibatan pengguna? Jika Anda dapat menyimpan satu gambar itu di atas lipatan atau dekat ke atas itu juga akan menarik perhatian pengunjung sebelum mereka bangkit. Ingat bahwa elemen halaman novel cenderung menarik.

Ketika Anda memiliki gambar (atau banyak gambar) diselingi di seluruh halaman Anda akan putus monoton blok teks yang membosankan. Pengguna bisa istirahat dari membaca untuk menghargai gambar, atau membuat koneksi antara gambar dan konten tertulis. Tetapi seperti kebanyakan teknik desain, kualitas lebih berharga daripada kuantitas.

Sebuah studi kasus Moz menemukan bahwa gambar berkualitas tinggi cenderung jaga pengunjung pada halaman lebih lama. Di sisi lain, gambar berkualitas buruk tidak bekerja juga dan dalam beberapa kasus mereka menyebabkan pengunjung memantul lebih cepat daripada tanpa gambar. Anda harus mencoba memasukkan setidaknya satu gambar itu relevan dengan konten dan itu memberikan nilai kepada pembaca.

TechCrunch melakukan ini dengan menampilkan gambar di artikel mereka di mana Anda akan sering menemukan foto unggulan di atas flip.

WordPress memudahkan penambahan gambar yang ditampilkan dengan fitur thumbnail postingan. Anda dapat mengatur foto yang berbeda untuk setiap posting yang Anda tulis dan memaksakan ini muncul di bagian atas halaman. Ini adalah cara sempurna untuk memberi pengunjung gambaran sekilas tentang apa kontennya, dan meningkat RKT untuk widget posting terkait yang juga berisi thumbnail posting.

Elemen Halaman Kontras

Jika Anda perlu membawa perhatian ke satu area tertentu pada halaman, maka asimetri adalah teman baikmu. Kontras mendorong irisan keras antara bidang desain tertentu atau blok konten tertentu.

Pengunjung secara alami bergerak menuju kontras karena berbeda. Penjajaran besar warna, ukuran, atau ruang putih menarik perhatian karena itu memecah cetakan segalanya dalam tata letak.

Contoh favorit saya untuk elemen halaman yang kontras mungkin adalah halaman utama Sketsa. Ada banyak kontras yang ditemukan antara dua tombol ajakan bertindak, satu untuk mengunduh uji coba Sketsa dan lainnya untuk membeli salinan.

Tombol pembelian menggunakan warna latar belakang penuh jauh lebih cerah dari warna lain di header. Teks tombol juga lebih cerah dibandingkan dengan tombol uji coba gratis. Ini mengarahkan pengunjung ke tombol Beli Sekarang semata-mata dari rangsangan visual.

Anda akan melihat a teknik serupa di halaman beranda Optin Monster. Header ini hanya memiliki satu tombol berlabel Get OptinMonster Now. Ini adalah tombol hijau terang dengan latar belakang biru tanpa ada elemen hijau lain yang terlihat.

Warna, ukuran, dan bentuk semuanya menarik perhatian Anda karena itu kontras dengan yang lainnya di tajuk. Tepat di samping tombol adalah tautan teks kecil untuk pratinjau video. Ini mungkin video yang bagus dan patut diperhatikan, tetapi tidak sebanyak tombol uji coba / pendaftaran CTA.

Untuk blog, Anda mungkin memiliki kualifikasi berbeda untuk keterlibatan pengguna. Satu pilihan umum adalah a formulir pendaftaran buletin seperti contoh di Aeolidia.

Jika Anda gulir ke bawah ke bagian bawah konten Anda akan melihat a kotak pendaftaran fancy-shmancy dirancang hanya untuk formulir buletin. Itu menonjol dari sisa halaman dengan warna latar belakang yang unik, tipografi yang menyenangkan, dan ikon King Triton yang lucu.

Cara terbaik untuk mendesain dengan kontras adalah mempelajari contoh dan hanya bereksperimen. Lihat apa yang berhasil dan apa yang tidak melacak metrik dengan pengujian A / B. Jika Anda mencari lebih banyak contoh, lihat artikel Codrops ini penuh dengan tip dan layar situs web asimetris langsung.

Dorong Interaksi Pengguna

Ada begitu banyak cara untuk membuat pengunjung tertarik pada suatu situs, tetapi yang paling umum adalah untuk membuat mereka melakukan hal-hal. Ini berlaku untuk blog statis dan situs sosial dinamis. Tidak ada trik satu ukuran untuk semua ini. Anda dapat melakukan apa saja yang berhasil untuk membuat pengguna merasa terlibat dengan halaman.

Di sebuah situs statis, Anda mungkin menambahkan banyak tautan yang berhubungan untuk membaca lebih banyak, atau memasukkan tayangan slide gambar. Anda juga bisa tambahkan formulir untuk komentar pengguna atau newsletter email.

Ketika sampai pada antarmuka yang dinamis, tujuan situs ini biasanya untuk mendorong keterlibatan pengguna. Rintangan terbesar adalah mengajar pengguna cara kerja situs, dan cara berinteraksi dengan antarmuka.

Lihat pos ini dari KissMetrics yang berbicara tentang teknik keterlibatan pengguna. Salah satu strategi terbaik yang saya temukan adalah merancang tur berpemandu yang mengarahkan pengunjung melalui masing-masing fitur utama.

Pikirkan tentang betapa membingungkannya prospek Twitter bagi pengguna baru. Jika mereka tidak mengikuti siapa pun dan tidak memiliki pengikut, mengapa mereka tweet?

Itu “Ikuti saran” kotak saat mendaftar membantu pengguna baru berkenalan dengan cara kerja Twitter. Fitur ini mengutamakan pengguna baru mulai menarik dengan platform, dan untuk bereksperimen dengan fitur seperti berikut, tweet, dan pesan pribadi.

Selain tur, Anda juga akan menginginkannya buat antarmuka menjadi mudah. Fitur prima seharusnya 1-2 klik saja dari dasbor pengguna atau halaman utama. Antarmuka intuitif butuh penjelasan, dan kesederhanaan menangkap perhatian lebih cepat.

Dengan memahami semua teknik ini, Anda akan lebih mudah membangun antarmuka itu memecahkan masalah pengguna, dan mendorong pengguna baru untuk bergabung. Jika Anda mencari lebih banyak Kiat keterlibatan desain UX lihat posting terkait ini:

• Taktik Onboarding Pengguna untuk Meningkatkan Keterlibatan (thinkapps.com)
• Pelajaran dalam Keterlibatan Bertahap (uxbooth.com)
• Jangan menganggap pengguna baru ingin mempelajari cara menggunakan produk Anda (uxdesign.cc)